/* Susan Gamache — site.css | Last updated: October 29, 2026 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--sg-cta-press); }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); margin: 0 0 var(--sp-16); }
h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); }
h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }
h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); }
h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }

.container { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--sp-24); }
.site-header { padding-block: var(--container-pad-y); }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); }
.site-logo__image { height: 90px; width: auto; }

.primary-menu { display: flex; align-items: center; gap: var(--sp-24); list-style: none; margin: 0; padding: 0; }
.primary-menu a {
  font-size: var(--type-menu-size);
  line-height: var(--type-menu-lh);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--fg);
}
.primary-menu li { position: relative; }
.primary-menu .menu-item-has-children > a::after { content: " \25BE"; font-size: 0.6rem; }
.primary-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  list-style: none;
  margin: 0; padding: var(--sp-8) 0;
  background: var(--bg);
  border: 1px solid var(--border);
  min-width: 200px;
  z-index: 10;
}
.primary-menu .menu-item-has-children:hover .sub-menu,
.primary-menu .menu-item-has-children:focus-within .sub-menu { display: block; }
.primary-menu .sub-menu a { display: block; padding: var(--sp-8) var(--sp-16); text-transform: none; }


.footer-cta { text-align: center; border: 1px solid var(--accent); padding: var(--sp-48) var(--sp-24); margin: var(--sp-64) auto; max-width: 700px; }
.footer-cta__title { color: var(--accent); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }
.footer-cta__text { color: var(--sg-grey-4); }
.footer-cta__email { display: inline-block; margin-top: var(--sp-16); color: var(--cta); font-size: var(--type-h4-size); font-weight: var(--fw-bold); }
.footer-cta__email:hover { color: var(--cta-hover); }

.footer-columns { background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--accent); }
.footer-columns__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-80); padding-block: var(--sp-64); }
.footer-col h3 { color: var(--fg); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
.footer-col p { color: var(--fg); }
.footer-col__link { display: inline-block; margin-top: var(--sp-8); font-size: var(--type-menu-size); font-weight: var(--fw-bold); color: var(--cta); }
.footer-col__link:hover { color: var(--cta-hover); }

.footer-bottom { background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), var(--fg); padding-block: var(--sp-24); }
.footer-bottom__text { text-align: center; margin: 0; color: var(--sg-white); font-size: var(--type-body-sm-size); }
.footer-bottom__text a { color: var(--sg-white); text-decoration: underline; }

@media (max-width: 768px) {
  .footer-columns__inner { grid-template-columns: 1fr; gap: var(--sp-32); }
}


.btn {
  display: inline-block;
  padding: var(--sp-12) var(--sp-24);
  font-size: var(--type-menu-size);
  font-weight: var(--fw-bold);
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.btn--cta { background: var(--cta); color: var(--sg-white); }
.btn--cta:hover { background: var(--cta-hover); color: var(--sg-white); }

.btn--outline { border-color: var(--cta); color: var(--fg); }
.btn--outline:hover { background: var(--cta); color: var(--sg-white); }


.home-hero { line-height: 0; }
.home-hero__embed { width: 100%; height: 500px; border: 0; display: block; }

.home-intro { padding-block: var(--sp-64); text-align: center; }
.home-intro__title { color: var(--accent); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); }
.home-intro__lede {
  font-size: var(--type-body-lg-size);
  font-weight: var(--fw-light);
  max-width: 60ch;
  margin-inline: auto;
}
.home-intro__actions { display: flex; justify-content: center; gap: var(--sp-16); margin-top: var(--sp-32); flex-wrap: wrap; }

.home-services { padding-block: var(--sp-64); }
.home-services__grid { display: grid; gap: var(--sp-24) var(--sp-32); grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); }
.home-services__card { padding-block: var(--sp-40) 0; }
.home-services__card h3 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
.home-services__more { display: inline-block; margin-top: var(--sp-8); font-weight: var(--fw-bold); font-size: var(--type-menu-size); color: var(--cta); }
.home-services__more:hover { color: var(--cta-hover); }


.home-profile { background: var(--bg); padding-block: var(--sp-80); }
.home-profile__inner { display: flex; gap: var(--sp-64); align-items: flex-start; }
.home-profile__eyebrow { flex: 0 0 30%; color: var(--fg); font-size: var(--type-h1-size); line-height: var(--type-h1-lh); margin: 0; }
.home-profile__body { flex: 1 1 auto; }
.home-profile__body p:first-of-type { font-size: var(--type-body-lg-size); font-weight: var(--fw-light); }
.home-profile__lead-line { font-size: var(--type-h4-size); font-weight: var(--fw-bold); }
.home-profile .btn { margin-top: var(--sp-16); }

@media (max-width: 768px) {
  .home-profile__inner { flex-direction: column; }
  .home-profile__eyebrow { flex-basis: auto; }
}


.home-publications { padding-block: var(--sp-64); }
.home-publications__intro { max-width: 70ch; }
.home-publications__grid { display: grid; gap: var(--sp-40) var(--sp-32); grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-32); }

@media (max-width: 900px) {
  .home-publications__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .home-publications__grid { grid-template-columns: 1fr; }
}
.home-publications__thumb { aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--sp-16); }
.home-publications__card h3 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); margin-bottom: var(--sp-8); }
.home-publications__meta { font-size: var(--type-body-sm-size); color: var(--fg); margin-bottom: var(--sp-8); }
.home-publications__more { display: inline-block; margin-top: var(--sp-8); font-weight: var(--fw-bold); font-size: var(--type-menu-size); color: var(--cta); }
.home-publications__more:hover { color: var(--cta-hover); }


.page-about { padding-block: var(--sp-64); }
.about__layout { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-64); align-items: start; }
.about__title { color: var(--fg); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }
.about__section-title { color: var(--fg); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); margin-top: var(--sp-40); }
.about__bio ul { padding-left: var(--sp-24); }
.about__bio li { margin-bottom: var(--sp-8); }
.about__bio ul ul { margin-top: var(--sp-8); }
.about__resume-link { font-weight: var(--fw-regular); }
.about__awards { border-top: 1px solid var(--border); padding-top: var(--sp-24); margin-top: var(--sp-24); }

.about__sidebar { border: 1px solid var(--border); padding: var(--sp-24); }
.about__sidebar-title { color: var(--accent); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
.about__memberships { list-style: none; padding: 0; margin: 0 0 var(--sp-24); }
.about__memberships li { padding: var(--sp-8) 0; border-bottom: 1px solid var(--border); font-size: var(--type-body-sm-size); }
.about__photo { margin-top: var(--sp-16); box-shadow: var(--shadow-image); }

@media (max-width: 768px) {
  .about__layout { grid-template-columns: 1fr; }
}


.sidebar-page { padding-block: var(--sp-64); }
.sidebar-page__layout { display: grid; grid-template-columns: 3fr 1fr; gap: var(--sp-64); align-items: start; }
.sidebar-page__title { color: var(--fg); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }
.sidebar-page__lede { font-size: var(--type-body-size); color: var(--fg-muted); max-width: 70ch; }

.sidebar-page__aside-title { color: var(--accent); font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
.sidebar-page__aside-title:not(:first-child) { margin-top: var(--sp-40); }
.sidebar-page__aside ul { padding-left: var(--sp-24); }
.sidebar-page__aside li { margin-bottom: var(--sp-8); }

@media (max-width: 768px) {
  .sidebar-page__layout { grid-template-columns: 1fr; }
}

.postgrid { display: grid; gap: var(--sp-32) var(--sp-24); grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); margin: var(--sp-40) 0; }
.postgrid--boxed .postgrid__card { background: rgba(158, 173, 189, 0.19); }
.postgrid__card-image { aspect-ratio: 16 / 9; object-fit: cover; }
.postgrid--boxed .postgrid__card h3,
.postgrid--boxed .postgrid__card p,
.postgrid--boxed .postgrid__card .postgrid__more { padding-inline: var(--sp-24); }
.postgrid__card h3 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); margin-top: var(--sp-16); }
.postgrid--boxed .postgrid__card h3 { margin-top: var(--sp-16); }
.postgrid__more { display: inline-block; margin-bottom: var(--sp-16); font-weight: var(--fw-bold); font-size: var(--type-menu-size); color: var(--cta); }
.postgrid__more:hover { color: var(--cta-hover); }


.page-resources { padding-block: var(--sp-64); }
.resources__intro { max-width: 70ch; }

.resources__index { border: 1px solid var(--border); padding: var(--sp-24); margin: var(--sp-32) 0 var(--sp-48); max-width: 60ch; }
.resources__index-label { margin: 0 0 var(--sp-8); color: var(--fg-muted); }
.resources__index ol { margin: 0; padding-left: var(--sp-24); }
.resources__index li { margin-bottom: var(--sp-4); }

.resources__section { border-top: 1px solid var(--border); padding-block: var(--sp-40); max-width: 75ch; }

.resources__section h2 { font-size: 2rem; line-height: 1.3; font-weight: 500; color: var(--fg); }
.resources__section ul { padding-left: var(--sp-24); }
.resources__section li { margin-bottom: var(--sp-8); }
.resources__section ul ul { margin-top: var(--sp-8); }


.quiz-land__title { padding-block: var(--sp-64) var(--sp-24); text-align: center; }
.quiz-land__clarity-title { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }

.quiz-land__split { display: flex; gap: var(--sp-64); align-items: center; padding-block: var(--sp-64); }
.quiz-land__split--reverse { flex-direction: row-reverse; }
.quiz-land__split-image { flex: 0 0 40%; }
.quiz-land__split-image img { box-shadow: var(--shadow-image); }
.quiz-land__split-text { flex: 1 1 auto; }
.quiz-land__split-text h4 { color: var(--accent); }

.quiz-land__how { text-align: center; padding-block: var(--sp-24) var(--sp-64); }
.quiz-land__steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-48); text-align: left; margin-top: var(--sp-32); }
.quiz-land__step ul { padding-left: var(--sp-24); }
.quiz-land__step li { margin-bottom: var(--sp-8); }

.quiz-land__matters { background: var(--accent); color: var(--sg-white); text-align: center; padding-block: var(--sp-64); }
.quiz-land__matters h2 { color: var(--sg-white); }
.quiz-land__matters p { font-size: var(--type-body-lg-size); max-width: 70ch; margin-inline: auto; }

.quiz-land__about { display: flex; gap: var(--sp-64); padding-block: var(--sp-64); align-items: flex-start; }
.quiz-land__about-text, .quiz-land__about-fine-print { flex: 1 1 50%; }
.quiz-land__about-lede { font-size: var(--type-body-lg-size); font-weight: var(--fw-light); }
.quiz-land__about-fine-print img { margin-bottom: var(--sp-24); box-shadow: var(--shadow-image); }
.quiz-land__about-fine-print p { font-size: var(--type-body-sm-size); color: var(--fg-muted); }

@media (max-width: 768px) {
  .quiz-land__split, .quiz-land__split--reverse, .quiz-land__about { flex-direction: column; }
  .quiz-land__steps { grid-template-columns: 1fr; }
}


.quiz__box { border: 1px solid var(--fg); padding: var(--sp-24); margin-block: var(--sp-64); }
.quiz__welcome { text-align: center; color: var(--fg); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); margin-bottom: 0; }
.quiz__title { text-align: center; color: var(--fg); font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }

.gform_wrapper select {
  height: 56px;
  font-size: 18px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background-color: #fff;
}
.gform_wrapper select:focus { border-color: var(--fg); outline: none; }


.quiz-results__box { max-width: 70ch; margin-inline: auto; padding-block: var(--sp-64); text-align: center; }
.quiz-results__title { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }



.dg__header-band { background: var(--fg); }
.dg__header { padding-block: var(--sp-64) var(--sp-32); }
.dg__eyebrow {
  font-size: var(--type-menu-size);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sg-grey-4);
  margin: 0 0 var(--sp-8);
}
.dg__header h1 { color: var(--sg-white); }

.dg__lede { font-size: 1.15rem; font-weight: var(--fw-light); max-width: 60ch; color: var(--sg-grey-5); }
.dg__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-16);
  font-size: var(--type-body-sm-size);
  color: var(--sg-grey-5);
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.dg__meta a { color: var(--sg-grey-4); }

.dg__section { padding-block: var(--sp-48); border-top: 1px solid var(--border); }
.dg__section h2 { margin-bottom: var(--sp-24); }

.dg__section h3 { font-size: 1.05rem; margin-top: var(--sp-32); }

.dg__grid { display: grid; gap: var(--sp-24); margin-top: var(--sp-16); }
.dg__grid--3 { grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); }
.dg__grid--4 { grid-template-columns: repeat(4, 1fr); }

.dg__grid--swatch { grid-template-columns: repeat(auto-fit, 200px); }

@media (max-width: 900px) {
  .dg__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dg__grid--4 { grid-template-columns: 1fr; }
}

.dg__card {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-rec-md);
  padding: var(--sp-24);
}

.dg__photo img {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-rec-sm);
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}
.dg__photo figcaption { font-size: var(--type-body-sm-size); color: var(--fg-muted); margin-top: var(--sp-8); }

.dg__logo-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-rec-md);
  padding: var(--sp-32);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-16);
  max-width: 400px;
}
.dg__btn {
  display: inline-block;
  background: var(--cta);
  color: var(--sg-white);
  font-weight: var(--fw-bold);
  padding: var(--sp-8) var(--sp-24);
  border-radius: var(--radius);
}
.dg__btn:hover { color: var(--sg-white); background: var(--cta-hover); }


.dg__swatch {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-rec-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dg__swatch-color { aspect-ratio: 4 / 3; }
.dg__swatch-info {
  background: var(--sg-white);
  color: var(--sg-dark);
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--type-body-sm-size);
}
.dg__swatch-name { font-weight: var(--fw-bold); font-size: 0.95rem; }
.dg__hex { font-family: ui-monospace, monospace; color: var(--fg-muted); }
.dg__ratio { font-size: 0.75rem; }
.dg__pass { color: var(--fg-muted); }
.dg__fail { color: var(--sg-cta); font-weight: var(--fw-bold); }
.dg__swatch-token { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--fg-muted); }
.dg__swatch-rule { border: none; border-top: 1px solid var(--border); margin: var(--sp-4) 0 0; }
.dg__swatch-usage {
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  padding-top: var(--sp-4);
}

.dg__placeholder {
  border: 1px dashed var(--border-strong);
  background: var(--sg-neutral);
  padding: var(--sp-16);
  font-size: var(--type-body-sm-size);
}

.dg__source-note { font-size: var(--type-body-sm-size); color: var(--fg-muted); margin-top: var(--sp-16); }


.dg__section-note { font-size: var(--type-body-sm-size); color: var(--fg-muted); margin-top: var(--sp-8); max-width: 70ch; }

.dg__type-family { display: flex; align-items: center; gap: var(--sp-24); margin-bottom: var(--sp-32); }
.dg__type-family p { font-size: var(--type-body-sm-size); color: var(--fg-muted); max-width: 40ch; }
.dg__type-glyph { font-size: 96px; line-height: 1; font-weight: var(--fw-bold); }
.dg__type-scale { display: flex; flex-direction: column; }

.dg__type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16);
  border-bottom: 1px solid var(--border);
  padding-block: var(--sp-12);
}
.dg__type-sample { flex: 1 1 auto; min-width: 0; }
.dg__type-meta {
  flex: 0 0 auto;
  display: flex;
  gap: var(--sp-16);
  font-size: 0.75rem;
  white-space: nowrap;
}
.dg__type-selector { font-family: var(--font-sans); font-weight: var(--fw-bold); }
.dg__type-token { font-family: ui-monospace, monospace; color: var(--fg-muted); }
.dg__type-range { font-family: ui-monospace, monospace; color: var(--fg-muted); }


.dg__spacing-scale { display: flex; align-items: flex-end; gap: var(--sp-24); flex-wrap: wrap; margin-top: var(--sp-24); }
.dg__sp-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); width: 100px; }
.dg__sp-box { background: var(--accent); border-radius: var(--radius); }
.dg__sp-value { font-family: ui-monospace, monospace; font-weight: var(--fw-bold); }
.dg__sp-usage { font-size: var(--type-body-sm-size); color: var(--fg-muted); text-align: center; }


.dg__radius-demo { display: flex; align-items: center; gap: var(--sp-24); margin-top: var(--sp-24); }
.dg__radius-box { width: var(--sp-80); height: var(--sp-80); background: var(--accent); border-radius: var(--radius); }


.dg__radius-scale { display: flex; align-items: flex-end; gap: var(--sp-24); flex-wrap: wrap; margin-top: var(--sp-24); }
.dg__radius-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); width: 100px; }
.dg__radius-item-box { width: var(--sp-80); height: var(--sp-80); background: var(--accent); }


.dg__elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-24); margin-top: var(--sp-24); }
.dg__elevation-card {
  background: var(--sg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-rec-md);
  padding: var(--sp-24);
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.dg__level { font-size: var(--type-body-sm-size); font-weight: var(--fw-bold); text-transform: uppercase; }
.dg__elevation-card p { font-size: var(--type-body-sm-size); color: var(--fg-muted); margin: 0; }