/* Hallmark · shape: Catalogue · genre: editorial · theme: Atelier (deal 3/3, seed student-written-blog-about-social-dd45·824e34b7·2026-10-26·r0) · job: listen · draw: 028dfc
 * hero: Counter · nav: slab · footer: index columns · imagery: two illustrative student photographs · signature: a personal editorial opening beside the reading list
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: E, simplified the layouts and reserved visible focus and mobile states */
@import url("./tokens.css");
@import url("./base.css");

:root { --color-soft-lilac: oklch(85% 0.082 321); --color-soft-violet: oklch(82% 0.075 291); --color-soft-blush: oklch(88% 0.060 343); --color-note: oklch(97% 0.025 325); --color-tape: oklch(84% 0.070 329 / 0.82); --color-hero-dark: oklch(18% 0.070 305 / 0.94); --color-hero-mid: oklch(21% 0.066 305 / 0.68); --color-hero-clear: oklch(21% 0.066 305 / 0.08); --color-hero-text: oklch(98% 0.012 308); }
body { background:var(--color-paper); color:var(--color-ink-2); }
h1, h2, h3 { text-transform:uppercase; }
h1, h2 { line-height:.94; }
button { cursor:pointer; }
.skip-link { position:absolute; z-index:var(--z-modal); top:-80px; left:var(--gutter); background:var(--color-ink); color:var(--color-paper); padding:var(--space-sm) var(--space-lg); }
.skip-link:focus { top:var(--space-sm); }
.site-header { border-bottom:1px solid var(--color-rule); background:var(--color-paper); }
.site-header .container { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-xl); }
.brand { font-family:var(--font-display); font-size:clamp(1.25rem,2vw,1.9rem); font-weight:700; letter-spacing:.008em; text-transform:uppercase; color:var(--color-ink); text-decoration:none; white-space:nowrap; }
.brand span { color:var(--color-accent); }
.site-nav { display:flex; gap:clamp(1.4rem,3vw,3.2rem); align-items:center; }
.site-nav a, .footer-nav a { font-size:var(--text-sm); text-decoration:none; border-bottom:1px solid transparent; padding:var(--space-xs) 0; }
.site-nav a:hover, .site-nav a[aria-current], .footer-nav a:hover { border-color:var(--color-accent); color:var(--color-accent); }
.menu-toggle { display:none; border:1px solid var(--color-ink); background:transparent; color:var(--color-ink); padding:var(--space-xs) var(--space-md); border-radius:var(--radius-pill); }
.hero { padding-block:var(--space-2xl) var(--space-3xl); display:grid; grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr); gap:clamp(2rem,5vw,5.5rem); align-items:center; }
.hero-copy { display:grid; justify-items:start; gap:var(--space-lg); }
.hero h1 { max-width:11ch; font-size:clamp(3.4rem,6.2vw,6.6rem); line-height:.99; }
.hero .lead { max-width:32ch; }
.primary-link { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 var(--space-lg); border:1px solid var(--color-accent); border-radius:var(--radius-pill); background:transparent; color:var(--color-accent); text-decoration:none; transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out); }
.primary-link:active { transform:translateY(1px); }
.primary-link:hover { background:var(--color-accent); color:var(--color-accent-ink); }
.text-link { display:inline-block; color:var(--color-accent); text-decoration-color:var(--color-accent); text-underline-offset:.35em; }
.text-link:hover { color:var(--color-ink); }
.hero-photo { aspect-ratio:4/4.15; max-height:620px; width:100%; outline:1px solid var(--color-rule); outline-offset:-1px; }
.hero-photo img { object-position:48% center; }
.hero-immersive { position:relative; isolation:isolate; min-height:min(690px, calc(100svh - 88px)); display:flex; align-items:center; overflow:hidden; background:var(--color-ink); color:var(--color-hero-text); }
.hero-media, .hero-background, .hero-video, .hero-scrim { position:absolute; inset:0; width:100%; height:100%; }
.hero-media { z-index:0; }
.hero-background > img, .hero-video { width:100%; height:100%; object-fit:cover; object-position:62% center; }
.hero-background > img { filter:sepia(.12) saturate(.85) contrast(.97); }
.hero-video { z-index:1; }
.hero-scrim { z-index:2; pointer-events:none; background:linear-gradient(90deg,var(--color-hero-dark) 0%,var(--color-hero-mid) 45%,var(--color-hero-clear) 84%); }
.hero-content { position:relative; z-index:3; width:100%; padding-block:var(--space-3xl); display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-lg); }
.hero-content h1 { max-width:11ch; color:var(--color-hero-text); font-size:clamp(4.1rem,7.5vw,8rem); line-height:.86; }
.hero-content h1 span { display:block; color:var(--color-soft-lilac); }
.hero-content .lead { max-width:35ch; color:var(--color-hero-text); font-family:var(--font-hand); font-size:clamp(1.8rem,2.8vw,2.7rem); line-height:1; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-lg); }
.hero-proof { display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:var(--space-lg); border-top:1px solid oklch(98% 0.012 308 / .38); color:var(--color-hero-text); font-size:var(--text-sm); }
.hero-proof span + span::before { content:"·"; margin-right:18px; color:var(--color-soft-lilac); }
.hero-immersive .primary-link { background:var(--color-hero-text); color:var(--color-ink); border-color:var(--color-hero-text); }
.hero-immersive .primary-link:hover { background:var(--color-soft-violet); border-color:var(--color-soft-violet); }
.hero-secondary { color:var(--color-hero-text); text-underline-offset:.3em; }
.hero-immersive a:focus-visible, .video-toggle:focus-visible { outline-color:var(--color-hero-text); }
.video-toggle { position:absolute; z-index:4; top:var(--space-lg); right:var(--gutter); min-height:44px; padding:var(--space-xs) var(--space-md); border:1px solid var(--color-hero-text); border-radius:var(--radius-pill); color:var(--color-hero-text); background:var(--color-hero-dark); }
.video-toggle:hover { background:var(--color-ink); }
.photo-caption { margin-top:var(--space-sm); font-size:var(--text-xs); color:var(--color-muted); }
.intro-note { position:relative; border:1px solid var(--color-rule); margin-top:var(--space-xl); padding:var(--space-xl); background:var(--color-note); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--gap-columns); align-items:start; }
.intro-note::before { content:""; position:absolute; top:-12px; left:46%; width:108px; height:24px; background:var(--color-tape); transform:rotate(-4deg); }
.small-heading { font-family:var(--font-hand); color:var(--color-accent); font-size:clamp(1.4rem,2vw,1.9rem); font-weight:600; letter-spacing:0; line-height:1; text-transform:none; }
.intro-note p { font-family:var(--font-display); font-weight:var(--display-weight); font-size:clamp(1.8rem,2.8vw,3.15rem); line-height:1.05; text-transform:uppercase; color:var(--color-ink); max-width:36ch; }
.section { padding-block:var(--section-gap-s); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--space-xl); padding-bottom:var(--space-lg); border-bottom:1px solid var(--color-ink); margin-bottom:var(--space-xl); }
.section-heading h2 { max-width:none; }
.section-heading h2::after { content:""; display:block; width:2.3em; height:3px; margin-top:var(--space-xs); background:var(--color-accent); transform:rotate(-2deg); }
.section-heading .text-link { white-space:nowrap; }
.stories-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2xl) var(--gap-columns); }
.story-card { min-width:0; border-top:2px solid var(--color-ink); padding-top:var(--space-sm); }
.story-card > a { display:block; text-decoration:none; }
.story-media { width:100%; aspect-ratio:1.3/1; position:relative; overflow:hidden; background:var(--color-paper-2); }
.story-media img { width:100%; height:100%; object-fit:cover; filter:sepia(.28) saturate(.89) contrast(.94); }
.story-media img.post-photo { filter:none; }
.story-media img.post2-image { object-position:center 50%; }
.type-media { display:flex; align-items:center; justify-content:center; padding:var(--space-xl); }
.type-media strong { font-family:var(--font-display); font-size:clamp(3rem,6vw,6.2rem); font-weight:300; line-height:1; letter-spacing:var(--tracking-display); color:var(--color-ink); }
.fomo-media { background:var(--color-soft-lilac); }
.deinfluence-media { background:var(--color-soft-blush); }
.story-category { font-family:var(--font-display); font-size:var(--text-lg); font-weight:600; text-transform:uppercase; color:var(--color-accent); margin-block:var(--space-lg) var(--space-xs); }
.story-card h3 { color:var(--color-ink); max-width:25ch; }
.story-card p:last-child { margin-top:var(--space-sm); max-width:36ch; }
.story-card a:hover h3 { color:var(--color-accent); text-decoration:underline; text-underline-offset:.12em; }
.about-strip { background:var(--color-paper-2); padding-block:var(--section-gap-s); }
.about-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-columns); align-items:center; }
.about-image { aspect-ratio:4/3; }
.about-copy { display:grid; justify-items:start; gap:var(--space-lg); }
.about-copy h2 { max-width:16ch; }
.about-copy p { max-width:52ch; }
.topic-list { border-top:1px solid var(--color-ink); }
.topic-list a { display:grid; grid-template-columns:50px minmax(0,1fr) auto; gap:var(--space-lg); align-items:center; padding:var(--space-lg) 0; border-bottom:1px solid var(--color-rule); text-decoration:none; }
.topic-list a:hover { color:var(--color-accent); padding-left:var(--space-xs); }
.topic-list span { color:var(--color-muted); font-size:var(--text-sm); }
.topic-list strong { font-family:var(--font-display); font-size:clamp(1.5rem,2vw,2rem); font-weight:700; text-transform:uppercase; }
.site-footer { border-top:1px solid var(--color-ink); background:var(--color-paper-2); padding-block:var(--space-xl) var(--space-lg); }
.footer-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--gap-columns); }
.footer-grid p { margin-top:var(--space-sm); max-width:34ch; }
.footer-nav { display:grid; justify-items:start; align-content:start; gap:var(--space-xs); }
.footer-note { border-top:1px solid var(--color-rule); margin-top:var(--space-2xl); padding-top:var(--space-md); color:var(--color-muted); font-size:var(--text-xs); }
.page-intro { padding-block:var(--space-3xl) var(--space-2xl); border-bottom:1px solid var(--color-rule); }
.page-intro h1 { max-width:18ch; font-size:clamp(3.6rem,6vw,6.5rem); }
.page-intro h1 { margin-bottom:var(--space-lg); }
.page-intro p { max-width:55ch; font-size:var(--text-lead); }
.filter-row { display:flex; flex-wrap:wrap; gap:var(--space-xs); margin-bottom:var(--space-xl); }
.filter { min-height:44px; border:1px solid var(--color-rule); background:transparent; color:var(--color-ink-2); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-pill); font-size:var(--text-sm); transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out); }
.filter:active, .menu-toggle:active { transform:translateY(1px); }
.filter:disabled, .menu-toggle:disabled { opacity:.45; cursor:not-allowed; }
.filter:hover, .filter[aria-pressed="true"] { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }
.archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2xl) var(--gap-columns); }
.archive-grid .story-card:first-child { grid-column:auto; }
.archive-grid .story-card:first-child > a { display:block; }
.archive-grid .story-card:first-child .story-media { aspect-ratio:1.3/1; }
.archive-grid .story-card:first-child h3 { font-size:var(--text-title); }
.about-page-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--gap-columns); padding-block:var(--section-gap-s); align-items:center; }
.about-page-grid .about-image { aspect-ratio:4/4.5; }
.prose { font-size:var(--text-lead); display:grid; gap:var(--space-lg); }
.team-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-columns); margin-top:var(--space-2xl); }
.team-member { border-top:1px solid var(--color-ink); padding-top:var(--space-lg); }
.team-portrait { width:100%; aspect-ratio:4/5; margin-bottom:var(--space-lg); display:grid; place-items:center; background:var(--color-paper-2); }
.team-portrait > span { font-family:var(--font-display); font-size:clamp(4rem,7vw,7rem); font-weight:300; color:var(--color-accent); }
.team-member h3 { margin-bottom:var(--space-xs); }
.team-member p { color:var(--color-muted); font-size:var(--text-sm); }
.value-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-columns); }
.value-list article { border-top:2px solid var(--color-ink); padding-top:var(--space-lg); }
.value-list h3 { margin-bottom:var(--space-sm); }
.value-list p { max-width:38ch; }
.quick-check { background:var(--color-paper-2); }
.quick-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--gap-columns); }
.quick-grid h2 { margin-block:var(--space-md); }
.quick-grid > div:first-child > p:last-child { max-width:40ch; }
.quick-card { position:relative; padding:var(--space-xl); border:1px solid var(--color-rule); background:var(--color-note); }
.quick-card::before { content:""; position:absolute; top:-12px; left:42%; width:100px; height:22px; background:var(--color-tape); transform:rotate(3deg); }
.prompt-options { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
.prompt-options button { min-height:44px; padding:var(--space-xs) var(--space-md); border:1px solid var(--color-accent); background:transparent; color:var(--color-accent); border-radius:var(--radius-pill); }
.prompt-options button:hover, .prompt-options button[aria-pressed="true"] { background:var(--color-accent); color:var(--color-accent-ink); }
.quick-answer { min-height:4em; margin-block:var(--space-lg); font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; line-height:1.08; color:var(--color-ink); }
.video-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.9fr); gap:var(--gap-columns); align-items:center; }
.video-copy { display:grid; justify-items:start; gap:var(--space-lg); }
.video-copy h2 { max-width:15ch; }
.video-copy > p:not(.small-heading) { max-width:46ch; }
.video-steps { margin:0; padding-left:1.3em; line-height:1.8; }
.video-figure { margin:0; max-width:620px; justify-self:end; }
.video-figure video { width:100%; aspect-ratio:1; object-fit:cover; background:var(--color-ink); border:1px solid var(--color-rule); }
.video-figure figcaption { margin-top:var(--space-sm); color:var(--color-muted); font-size:var(--text-sm); line-height:1.5; }
/* Home page: clear editorial chapters and a compact, even reading grid. */
.home-page { --home-section-padding:clamp(3.25rem,6vw,5.5rem); }
.home-page .intro-note { margin-bottom:var(--space-xl); }
.home-page .home-recent,
.home-page .home-quick,
.home-page .home-video,
.home-page .home-about,
.home-page .home-topics { border-top:1px solid var(--color-ink); }
.home-page .home-recent { background:var(--color-paper-2); padding-block:var(--home-section-padding); }
.home-page .home-recent .section-heading,
.home-page .home-topics .section-heading { margin-bottom:var(--space-lg); }
.home-page .section-index { margin-bottom:var(--space-sm); color:var(--color-accent); font-size:var(--text-xs); font-weight:600; letter-spacing:.14em; line-height:1.4; text-transform:uppercase; }
.home-page .home-recent .stories-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); }
.home-page .home-recent .story-card { display:flex; border:1px solid var(--color-card-edge); background:var(--color-card); padding:0; min-width:0; transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out); }
.home-page .home-recent .story-card:hover { border-color:var(--color-accent); transform:translateY(-3px); }
.home-page .home-recent .story-card:focus-within { border-color:var(--color-accent); }
.home-page .home-recent .story-card > a { display:flex; width:100%; min-height:100%; flex-direction:column; }
.home-page .home-recent .story-media { aspect-ratio:1.28/1; border-bottom:1px solid var(--color-card-edge); }
.home-page .home-recent .story-category { align-self:flex-start; margin:var(--space-lg) var(--space-lg) var(--space-sm); padding:4px 8px; border:1px solid var(--color-card-edge); background:var(--color-paper-2); font-family:var(--font-body); font-size:var(--text-xs); font-weight:600; letter-spacing:.07em; line-height:1.35; }
.home-page .home-recent .story-card h3 { margin-inline:var(--space-lg); font-size:clamp(1.55rem,2vw,2.15rem); line-height:1.05; }
.home-page .home-recent .story-card p:last-child { margin:var(--space-sm) var(--space-lg) var(--space-lg); color:var(--color-ink-2); font-size:var(--text-sm); line-height:1.5; }
.home-page .home-quick { background:var(--color-ink); color:var(--color-hero-text); padding-block:var(--home-section-padding); }
.home-page .home-quick h2 { color:var(--color-hero-text); }
.home-page .home-quick .section-index { color:var(--color-soft-lilac); }
.home-page .home-quick .quick-card { border-color:var(--color-soft-violet); }
.home-page .home-video { background:var(--color-card); padding-block:var(--home-section-padding); }
.home-page .home-about { background:var(--color-paper-3); padding-block:var(--home-section-padding); }
.home-page .home-about .about-image { outline:1px solid var(--color-card-edge); outline-offset:-1px; }
.home-page .home-about .about-copy { align-content:center; }
.home-page .home-topics { background:var(--color-paper); padding-block:var(--home-section-padding); }
@media (max-width:60rem) {
  .home-page .home-recent .story-card h3 { font-size:1.7rem; }
  .home-page .home-recent .story-category,
  .home-page .home-recent .story-card h3 { margin-inline:var(--space-md); }
  .home-page .home-recent .story-card p:last-child { margin-inline:var(--space-md); }
}
@media (max-width:44rem) {
  .home-page { --home-section-padding:3.25rem; }
  .home-page .home-recent .stories-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-md); }
  .home-page .home-recent .story-card > a { display:grid; grid-template-columns:minmax(108px,38%) minmax(0,1fr); grid-template-rows:auto auto 1fr; align-content:start; }
  .home-page .home-recent .story-media { grid-row:1/4; height:100%; min-height:190px; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--color-card-edge); }
  .home-page .home-recent .story-category { margin:var(--space-md) var(--space-md) var(--space-sm); }
  .home-page .home-recent .story-card h3 { font-size:clamp(1.4rem,5.5vw,1.8rem); }
  .home-page .home-recent .story-card p:last-child { margin-top:var(--space-xs); margin-bottom:var(--space-md); }
}
@media (max-width:30rem) {
  .home-page .home-recent .story-card > a { display:flex; }
  .home-page .home-recent .story-media { min-height:0; height:auto; aspect-ratio:1.55/1; border-right:0; border-bottom:1px solid var(--color-card-edge); }
}
.article-layout { max-width:940px; margin-inline:auto; padding-block:var(--space-2xl) var(--section-gap-s); }
.article-back { display:inline-block; margin-bottom:var(--space-2xl); font-size:var(--text-sm); }
.article-header { text-align:center; display:grid; justify-items:center; gap:var(--space-md); margin-bottom:var(--space-2xl); }
.article-header h1 { max-width:15ch; }
.article-header h1 { font-size:clamp(3.2rem,5vw,5.8rem); }
.article-deck { max-width:50ch; font-size:var(--text-lead); }
.article-meta { font-size:var(--text-sm); color:var(--color-muted); }
.article-cover { width:100%; aspect-ratio:1.7/1; margin-bottom:var(--space-2xl); }
.article-cover img { width:100%; height:100%; object-fit:cover; filter:sepia(.28) saturate(.89) contrast(.94); }
.article-cover.photo-cover { aspect-ratio:auto; margin:0 0 var(--space-2xl); }
.article-cover.photo-cover img { display:block; aspect-ratio:1.7/1; height:auto; filter:none; }
.article-cover.photo-cover.portrait-cover img { aspect-ratio:4/3; object-position:center 50%; }
.article-cover figcaption, .article-photo figcaption { margin-top:var(--space-sm); color:var(--color-muted); font-size:var(--text-sm); line-height:1.5; }
.article-photo { margin:var(--space-2xl) 0; }
.article-photo img { display:block; width:100%; height:auto; }
.article-cover.type-media strong { font-size:clamp(5rem,12vw,11rem); }
.fomo-media strong, .article-cover.fomo-media strong { font-size:clamp(2.8rem,7vw,7rem); white-space:nowrap; }
.article-body { max-width:680px; margin-inline:auto; font-size:var(--text-lead); line-height:1.7; }
.article-body > * + * { margin-top:var(--space-lg); }
.article-video { margin-block:var(--space-2xl); }
.article-video video { display:block; width:100%; aspect-ratio:16/9; background:var(--color-ink); border:1px solid var(--color-rule); }
.article-video figcaption { margin-top:var(--space-sm); color:var(--color-muted); font-size:var(--text-sm); line-height:1.5; }
.article-body h2 { font-size:var(--text-2xl); margin-top:var(--space-2xl); }
.article-body ul, .article-body ol { padding-left:1.4em; }
.article-body li + li { margin-top:var(--space-xs); }
.post-discussion { padding:var(--space-lg); background:var(--color-note); border:1px solid var(--color-rule); }
.post-discussion h2 { margin-top:0; }
.post-discussion a { display:inline-block; margin-top:var(--space-sm); }
.quiz-answers { padding:var(--space-md) var(--space-lg); border:1px solid var(--color-rule); background:var(--color-note); }
.quiz-answers summary { cursor:pointer; font-weight:600; }
.quiz-answers summary:focus-visible { outline:2px solid var(--color-accent); outline-offset:4px; }
.quiz-answers ol { margin-top:var(--space-md); }
.pull-quote { border-left:2px solid var(--color-accent); padding-left:var(--space-lg); font-family:var(--font-display); font-size:var(--text-2xl); line-height:1.2; color:var(--color-ink); margin-block:var(--space-2xl); }
.article-note { border-top:1px solid var(--color-rule); padding-top:var(--space-lg); color:var(--color-muted); font-size:var(--text-sm); }
.next-story { border-top:1px solid var(--color-ink); margin-top:var(--space-3xl); padding-top:var(--space-lg); }
.next-story h2 { margin-top:var(--space-sm); }
@media (max-width:60rem) { .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .hero h1 { font-size:clamp(3.2rem,6vw,5rem); } .stories-grid { gap:var(--space-lg); } }
@media (max-width:44rem) { .hero-immersive { min-height:min(760px, calc(100svh - 72px)); align-items:flex-end; } .hero-background > img, .hero-video { object-position:58% center; } .hero-scrim { background:linear-gradient(0deg,var(--color-hero-dark) 0%,var(--color-hero-mid) 45%,var(--color-hero-clear) 100%); } .hero-content { padding-block:var(--space-2xl) var(--space-xl); gap:var(--space-md); } .hero-content h1 { font-size:clamp(3rem,11.5vw,5.2rem); } .hero-actions { gap:var(--space-md); } .video-toggle { top:var(--space-md); right:var(--gutter); } .team-portrait { aspect-ratio:1/1; max-height:440px; } }
@media (max-width:44rem) { .site-header { position:sticky; top:0; z-index:var(--z-sticky-nav); padding-top:env(safe-area-inset-top); } .site-header .container { min-height:72px; } .has-js .menu-toggle { display:block; min-height:44px; min-width:44px; } .site-nav { flex-direction:column; align-items:stretch; gap:var(--space-xs); } .has-js .site-nav { display:none; position:absolute; z-index:var(--z-dropdown); left:0; right:0; top:100%; background:var(--color-paper); border-bottom:1px solid var(--color-rule); padding:var(--space-lg) var(--gutter); } .has-js .site-nav.is-open { display:flex; } .site-nav a { padding:var(--space-sm) 0; min-height:44px; display:flex; align-items:center; } .hero { grid-template-columns:minmax(0,1fr); padding-block:var(--space-xl) var(--space-2xl); gap:var(--space-xl); } .hero h1 { font-size:clamp(3.3rem,12vw,5.4rem); } .hero-photo { aspect-ratio:5/4; max-height:none; } .intro-note { grid-template-columns:minmax(0,1fr); gap:var(--space-md); } .section-heading { align-items:start; flex-direction:column; } .stories-grid, .archive-grid, .about-grid, .about-page-grid, .team-list, .footer-grid { grid-template-columns:minmax(0,1fr); } .archive-grid .story-card:first-child > a { grid-template-columns:minmax(0,1fr); } .about-page-grid .about-image { aspect-ratio:4/3; } .footer-grid { gap:var(--space-2xl); } .page-intro { padding-block:var(--space-2xl); } .article-layout { padding-block:var(--space-xl) var(--section-gap-s); } .article-header { text-align:left; justify-items:start; } .article-back { margin-bottom:var(--space-xl); } }
@media (max-width:44rem) { .article-cover.photo-cover img { aspect-ratio:4/3; } }
@media (max-width:44rem) { .value-list, .quick-grid { grid-template-columns:minmax(0,1fr); } .quick-card { padding:var(--space-lg); } .intro-note::before { left:38%; } .hero-content h1 { font-size:clamp(3.8rem,14vw,5.4rem); } }
@media (max-width:44rem) { .video-section { grid-template-columns:minmax(0,1fr); } .video-figure { justify-self:stretch; width:100%; } }
@media (max-width:25rem) { .brand { font-size:1.18rem; } .site-header .container { gap:8px; } .hero-proof { gap:4px 12px; } .hero-proof span + span::before { margin-right:12px; } .hero-actions { width:100%; align-items:stretch; } .hero-actions .primary-link { flex:1; } .story-category { font-size:1.05rem; } }