/* Living a Good Woman's Life: an atlas of the study. Tokens and layout from the
   September 2026 Claude Design handoff (design_handoff_good_womans_life_atlas);
   slate paper (blue-grey ground, deep teal links) chosen by Dina on 8 Sep 2026 over the handoff's sand. */
html, body { margin: 0; background: #dde3e8; color: #131a20; font-family: Literata, Georgia, serif; font-size: 17px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
a { color: #1d5c6e; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #131a20; }
::selection { background: #1d5c6e; color: #f4f7f9; }
img { display: block; max-width: 100%; height: auto; }
.svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { position: relative; max-width: 1400px; margin: 0 auto; padding: clamp(20px, 4vh, 40px) clamp(16px, 4vw, 48px) clamp(60px, 9vh, 110px); }

/* the grid: 1px gaps over a dark ground draw the hairlines */
.grid { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(19,26,32,.24); border: 1px solid rgba(19,26,32,.24); }
.cell { flex: 1 1 100%; min-width: 0; background: #f4f7f9; }

/* small type */
.eyebrow, .letter { font-family: 'Archivo Narrow', sans-serif; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #1d5c6e; }
.cap { font-family: 'Archivo Narrow', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #46525c; }
.cap--right { text-align: right; }

/* title plate */
.title { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: clamp(28px, 5vh, 56px) clamp(20px, 3.4vw, 48px) clamp(28px, 5vh, 52px); }
.title__col { flex: 1 1 520px; min-width: 0; }
.title__h { margin-top: 22px; font-weight: 300; font-size: clamp(36px, 5vw, 72px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; color: #131a20; }
.title__h em { font-style: italic; font-weight: 400; color: #1d5c6e; }
.title__lede { margin-top: clamp(24px, 3.5vh, 40px); max-width: 58ch; font-size: clamp(19px, 2vw, 24px); line-height: 1.5; color: #2f3841; text-wrap: pretty; }
.title__note { margin-top: 18px; max-width: 56ch; font-size: 17px; line-height: 1.62; font-style: italic; color: #46525c; text-wrap: pretty; }
.title__fig { flex: 0 1 340px; min-width: 220px; justify-content: flex-end; margin-left: auto; }

/* right now */
.now { padding: 16px clamp(20px, 3.4vw, 48px) 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.now__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; align-items: baseline; font-family: Caveat, cursive; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; filter: url(#pencil); }
.now__label { color: #b5402c; font-weight: 600; }
.now__text { color: #34404a; }
.now__rule { display: block; width: 100%; max-width: 720px; filter: url(#pencil); }

/* plates */
.plate { padding: clamp(26px, 4vh, 40px) clamp(20px, 3.4vw, 48px); }
.plate--team { padding-bottom: 20px; }
.plate__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.plate__title { font-weight: 500; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.01em; color: #131a20; }
.plate__aside { font-family: 'Archivo Narrow', sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #46525c; margin-left: auto; }
.body { display: flex; flex-wrap: wrap; gap: 24px 48px; margin-top: 20px; align-items: flex-start; }
.text { flex: 1 1 420px; min-width: 0; max-width: 64ch; display: flex; flex-direction: column; gap: 16px; font-size: 17.5px; line-height: 1.6; color: #2f3841; text-wrap: pretty; }
.p { max-width: 62ch; font-size: 17.5px; line-height: 1.6; color: #2f3841; text-wrap: pretty; }
.fig { display: flex; flex-direction: column; gap: 8px; }
.fig svg { display: block; width: 100%; height: auto; }
.fig--side { flex: 0 1 340px; min-width: 240px; }
.fig--tea { flex: 0 1 380px; min-width: 260px; }
.fig--desk { flex: 1 1 520px; min-width: 260px; max-width: 1180px; margin-left: auto; }
.fig--expect { flex: 0 1 420px; min-width: 260px; margin-left: auto; }
.fig--big { flex: 0 1 480px; min-width: 280px; margin-left: auto; }
.plate__head--us { align-items: center; }

/* plates B to D */
.actor { flex: 1 1 240px; padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.actor svg { display: block; width: 100%; max-width: 440px; height: auto; }
.actor__name { font-weight: 500; font-size: 24px; line-height: 1.15; color: #131a20; }

/* plate E */
.map-body { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 22px; align-items: flex-end; }
.map { flex: 1 1 560px; min-width: 0; }
.map svg { display: block; width: 100%; height: auto; }
.sites { flex: 0 1 300px; min-width: 240px; border-collapse: collapse; font-size: 16px; }
.sites th { text-align: left; padding: 8px 12px 8px 0; font-family: 'Archivo Narrow', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #46525c; }
.sites th:last-child { text-align: right; padding-right: 0; }
.sites td { padding: 9px 12px 9px 0; border-top: 1px solid rgba(19,26,32,.16); color: #2f3841; }
.sites td:first-child { font-weight: 500; color: #131a20; }
.sites td:last-child { padding-right: 0; text-align: right; font-weight: 500; color: #1d5c6e; }
.sites .total td { padding: 10px 12px 0 0; border-top: 1px solid rgba(19,26,32,.4); }
.sites .total td:first-child { font-family: 'Archivo Narrow', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #46525c; }
.sites .total td:last-child { padding-right: 0; color: #131a20; }

/* plate F */
.strips-intro { display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline; margin-top: 16px; }
.strips-intro .p { flex: 1 1 380px; }
.strips { margin-top: 22px; border-top: 1px solid rgba(19,26,32,.4); }
.strip { padding: 16px 0 10px; border-bottom: 1px solid rgba(19,26,32,.16); }
.strip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.strip__title { font-family: 'Archivo Narrow', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #131a20; }
.strip__nat { font-size: 15px; color: #46525c; }
.strip__nat b { font-family: 'Archivo Narrow', sans-serif; font-weight: 500; font-size: 16px; color: #131a20; margin-left: 6px; }
.strip__art { display: block; width: 100%; height: auto; margin-top: 2px; }
@media (max-width: 720px) {
  .title { gap: 8px 40px; }
  .title__fig { flex: 0 1 200px; min-width: 180px; margin: 4px auto 0; }
  .title__fig .cap { text-align: center; }
  .hand text { font-size: 18px; }
  .strip__art text { font-size: 28px; letter-spacing: .3px; }
  .strip__art circle { r: 12px; }
}
.source { margin-top: 14px; font-size: 13.5px; line-height: 1.6; font-style: italic; color: #46525c; }

/* plate G */
.scroll { margin-top: 20px; overflow-x: auto; }
.turns { display: block; width: 100%; min-width: 720px; height: auto; }

/* plate H */
.conv { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.conv .p { max-width: 58ch; }
.figures { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(19,26,32,.18); border: 1px solid rgba(19,26,32,.18); max-width: 700px; }
.figure { flex: 1 1 120px; background: #f4f7f9; padding: 16px 12px 14px; }
.figure__n { font-weight: 300; font-size: clamp(34px, 3.6vw, 46px); line-height: .95; color: #131a20; white-space: nowrap; }
.figure__n small { font-size: .5em; }
.figure__l { margin-top: 8px; font-family: 'Archivo Narrow', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #46525c; white-space: nowrap; }
.funded { display: flex; align-items: center; gap: 16px; max-width: 700px; }
.funded__art { flex: 0 0 auto; width: 118px; height: auto; }
.funded__text { margin: 0; font-family: Caveat, cursive; font-weight: 500; font-size: clamp(22px, 2.3vw, 27px); line-height: 1.2; color: #34404a; filter: url(#pencil); }

/* plate I */
.road-art { display: block; width: 100%; height: auto; margin-top: 16px; }
.trips { flex: 1 1 360px; min-width: 0; max-width: 720px; margin: 0 auto; border-top: 1px solid rgba(19,26,32,.4); }
.trips__row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px; gap: 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(19,26,32,.14); }
.trips__head { padding: 8px 0; border-bottom: 1px solid rgba(19,26,32,.24); font-family: 'Archivo Narrow', sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #46525c; }
.trips__head .trips__i { font-size: 11px; font-weight: 400; color: #46525c; }
.trips__n { font-family: 'Archivo Narrow', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #1d5c6e; }
.trips__r { font-size: 16.5px; color: #131a20; }
.trips__i { font-family: 'Archivo Narrow', sans-serif; font-weight: 500; font-size: 16px; color: #131a20; text-align: right; }
.photos { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.photos__row { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(19,26,32,.18); border: 1px solid rgba(19,26,32,.18); }
.photos__cell { flex: 1 1 260px; min-width: 0; background: #f4f7f9; }
.photos__cell img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* plate K */
.claude { font-family: Caveat, cursive; font-weight: 600; font-size: 1.3em; line-height: 1; color: #8f3a86; }

/* plate L */
.us-body { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; margin-top: 12px; }
.team { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: #f4f7f9; }
.who { min-width: 0; background: #f4f7f9; display: flex; flex-direction: column; padding: 0 0 22px; }
.who img { width: 100%; aspect-ratio: 1 / 1; max-height: 360px; object-fit: cover; object-position: 50% 8%; background: #dde3e8; }
.who__name { margin: 18px 20px 0; font-weight: 500; font-size: 22px; line-height: 1.15; color: #131a20; }
.who__role { margin: 8px 20px 0; font-family: 'Archivo Narrow', sans-serif; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7; color: #1d5c6e; }
.who__bio { margin: 12px 20px 0; font-size: 15.5px; line-height: 1.58; color: #2f3841; text-wrap: pretty; }
.who__q { margin: 14px 20px 0; padding-top: 12px; border-top: 1px solid rgba(19,26,32,.16); font-size: 15.5px; line-height: 1.58; font-style: italic; color: #46525c; text-wrap: pretty; }

/* footer */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding-top: 26px; }
.foot__name { font-weight: 500; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -.01em; color: #131a20; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: 'Archivo Narrow', sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.foot__links a { text-decoration: none; }
.foot__where { color: #46525c; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }