/* Five type roles. The landscape carries the expression; type supplies order. */
:root{
 --ink:#232426;
 --muted:#5d5c61;
 --paper:#e5e4e1;
 --on-dark:#f6f2e9;
 --accent:#9b7b44;
 --amber:var(--accent);
 --cta-accent:var(--accent);
 --rule:#b6b2b6;
 --type-label:13px;
 --type-body:17px;
 --type-lead:24px;
 --type-section:clamp(32px,3.2vw,40px);
 --type-display:clamp(56px,6.2vw,96px);
 --page-gutter:clamp(24px,4.5vw,80px);
}
body{font-size:var(--type-body);line-height:1.6}
.site-header,.case-header{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.signature,.case-header .signature{font-size:var(--type-body);line-height:1.3;letter-spacing:-.02em}
.site-header .signature span,.case-header .signature span{font-size:var(--type-label);line-height:1.45;letter-spacing:0;color:var(--muted);margin-top:4px;max-width:none}
.plain-button,.back-button,.music-toggle,.direction{font-size:var(--type-label);line-height:1.4;letter-spacing:0}
.music-toggle{opacity:1;color:var(--muted)}
.music-toggle:hover,.music-toggle[aria-pressed='true']{color:var(--ink)}
.header-actions{gap:24px}
.index-icon{font-size:var(--type-body)}
#loader-music-description{font-size:var(--type-label);color:var(--muted);line-height:1.5}

/* The project has one headline, one explanation and a quiet metadata tier. */
.project-intro{left:var(--page-gutter);top:22%;width:44%;max-width:620px}
.client{display:inline-block;vertical-align:baseline;margin-right:12px;font-size:var(--type-label);font-weight:600;line-height:1.4;letter-spacing:0;margin-bottom:16px;color:var(--ink)}
.project-status{font-size:var(--type-label);color:var(--muted);line-height:1.4;margin-bottom:16px}
h1,.project-intro h1,.opening-copy h1,.case-summary h2{
 font-family:var(--serif);font-size:var(--type-display);font-weight:400;
 line-height:1;letter-spacing:-.045em;text-wrap:balance;margin:0 0 24px;
}
.project-subtitle,.case-subtitle{font-size:var(--type-lead);line-height:1.35;letter-spacing:-.02em;max-width:32ch;margin:0 0 16px;color:var(--ink)}
.project-intro .role{font-size:var(--type-label);line-height:1.5;max-width:42ch;color:var(--muted);margin:0 0 24px}
.project-intro .project-note{font-size:var(--type-label);line-height:1.5;max-width:42ch;color:var(--muted);margin:16px 0 0}
.primary-button,.contact-block .primary-button,.case-external .primary-button,#opening-controls .opening-enter{
 font-family:var(--serif);font-size:var(--type-lead);font-weight:400;line-height:1.3;letter-spacing:-.02em;
}
.landmark-caption{font-size:var(--type-label);line-height:1.4;color:var(--ink)}
.opening-copy{left:var(--page-gutter);max-width:46%}
.opening-eyebrow{font-size:var(--type-label);letter-spacing:0;line-height:1.5;color:var(--muted);max-width:42ch;margin-bottom:24px}
.opening-copy>p:last-child{font-size:var(--type-body);line-height:1.6;letter-spacing:0}
#opening-thought{left:var(--page-gutter);font-size:var(--type-section);line-height:1.2;letter-spacing:-.025em;color:var(--ink)}
#opening-controls,#journey[data-opening-phase='entrance'] #opening-controls{left:var(--page-gutter);right:var(--page-gutter)}
#opening-controls .opening-skip,.opening-travel-status{font-size:var(--type-label);line-height:1.5}
.journey-bottom{left:var(--page-gutter);right:var(--page-gutter)}
.route-nav,.journey-hint,.route-stops>button,.route-stops>button[aria-current],.route-stops>button:is(:hover,:focus-visible){color:var(--on-dark)}
.journey-hint,#route-count{font-size:var(--type-label);line-height:1.5;opacity:1}
#route-current{font-family:var(--sans);font-size:var(--type-body);line-height:1.4;letter-spacing:0}

/* The index behaves like navigation, not a second set of headline styles. */
#work-index{right:var(--page-gutter);min-width:0;max-width:none;width:min(350px,calc(100vw - var(--page-gutter) - var(--page-gutter)))}
#work-index .index-group,#work-index button span+span{font-size:var(--type-label);line-height:1.5;color:var(--muted)}
#work-index button .index-name{font-family:var(--sans);font-size:var(--type-body);line-height:1.4;color:var(--ink)}

/* Case studies use the same hierarchy and a comfortable reading measure. */
.case-article{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.case-opening{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.case-summary{padding-top:24px}
.case-summary h2{overflow-wrap:anywhere}
.case-subtitle{margin-bottom:32px}
.case-role{font-size:var(--type-body);line-height:1.6;margin-bottom:24px}
.case-role dt,.contribution h3,.case-facts dt{font-size:var(--type-label);font-weight:400;line-height:1.5;color:var(--muted);margin-bottom:8px}
.contribution{max-width:44ch;padding-top:24px}
.contribution p,.thinking-body,.polar-chapter-copy>p,.nike-gallery-heading>p,.witcher-process p,.contact-block>p{
 font-size:var(--type-body);line-height:1.65;letter-spacing:0;color:var(--ink);
}
.thinking{margin-top:48px;padding-top:32px}
.thinking-heading h3,.polar-story-heading h3,.polar-chapter h4,.nike-gallery-heading h3,.witcher-process h3,.contact-block h3{
 font-family:var(--serif);font-size:var(--type-section);font-weight:400;line-height:1.15;letter-spacing:-.025em;
}
.thinking-heading>p{font-size:var(--type-label);line-height:1.5;color:var(--muted)}
.thinking-body{gap:48px;padding:32px 0 40px;max-width:1120px}
.thinking-body p{max-width:58ch}
.case-facts{padding:24px 0;margin:8px 0 48px;gap:32px}
.case-facts dd,.archive-project h4,.case-footer p{font-family:var(--serif);font-size:var(--type-lead);font-weight:400;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
figcaption,.polar-screen figcaption,.archive-project figcaption>span,.archive-project p,.polar-screen-label,.polar-enlarge,.polar-design-note,.nike-visual-credit,.media-viewer-hint,.media-viewer-header>p,.polar-story-heading>p,.contact-block .ai-note{
 font-size:var(--type-label);line-height:1.55;letter-spacing:0;color:var(--muted);
}
.polar-screen-label{min-height:40px}
.polar-chapter{padding:40px 0 56px}
.polar-chapter-copy{padding-top:40px}
.polar-chapter h4{margin-bottom:24px}
.polar-story-heading{margin-bottom:48px}
.contact-block{border-top:0;padding-top:24px}
.case-footer{padding:32px 0;margin-top:48px}
.case-film-fallback span{font-size:var(--type-lead);line-height:1.3;color:var(--on-dark)}
.media-viewer .back-button{font-size:var(--type-label)}

@media(max-width:900px){
 .polar-chapter-copy{padding-top:0}
 .polar-chapter h4 br,.witcher-process h3 br{display:initial}
 .thinking-heading{align-items:flex-start}
}
@media(max-width:760px){
 :root{--type-display:clamp(44px,12vw,60px);--type-section:32px;--type-lead:22px;--page-gutter:24px}
 .site-header,.case-header{padding-top:24px;height:112px;gap:12px}
 .signature{min-width:0;flex:1}
 .site-header .signature span,.case-header .signature span{max-width:240px}
 .site-header .header-actions{gap:12px}
 .header-actions{gap:12px;margin-top:-8px}
 .case-header .header-actions{gap:12px}
 .case-header .back-button{font-size:0}
 .site-header .signature span{max-width:180px}
 #index-toggle .index-icon{display:none}
 .project-intro{top:21%;width:calc(100% - 48px);max-width:390px}
 .project-intro h1,.opening-copy h1,.case-summary h2{margin-bottom:20px}
 .project-intro .role{margin-bottom:16px;max-width:36ch}
 .project-status{margin-bottom:12px}
 .project-subtitle{max-width:25ch;margin-bottom:12px}
 .opening-copy{left:var(--page-gutter);max-width:calc(100% - 48px)}
 .opening-copy>p:last-child{line-height:1.5}
 #opening-thought{left:var(--page-gutter);width:calc(100% - 48px)}
 #opening-controls,#journey[data-opening-phase='entrance'] #opening-controls{gap:16px}
 #work-index{top:112px;max-height:calc(100svh - 144px)}
 .case-summary{padding-top:8px}
 .case-opening{gap:24px}
 .case-subtitle{margin-bottom:24px}
 .thinking{margin-top:32px;padding-top:24px}
 .thinking-body{gap:24px;padding:24px 0 32px}
 .thinking-heading>p{margin-top:16px}
 .case-facts{gap:24px;margin-bottom:32px}
 .polar-story-heading{margin-bottom:32px}
 .polar-chapter{padding:32px 0 40px}
 .polar-screen-label{min-height:44px}
 .case-footer{margin-top:32px;padding:24px 0}
 .case-footer p{margin-bottom:16px}
}
@media(max-height:760px) and (min-width:761px){
 :root{--type-display:64px}
 .project-intro{top:20%}
 .project-intro h1{margin-bottom:16px}
 .project-status{margin-bottom:8px}
 .project-intro .role{margin-bottom:16px}
}
@media(max-width:760px) and (max-height:740px){
 .project-intro{top:22%}
 .project-intro h1{margin-bottom:12px}
 .project-status{margin-bottom:8px}
 .project-subtitle{font-size:var(--type-body);max-width:28ch;margin-bottom:8px}
 .project-intro .role{margin-bottom:8px}
 .journey-hint{display:none}
}
@media(max-width:360px){
 :root{--page-gutter:20px}
 .site-header .header-actions{gap:8px}
 .site-header .music-icon{display:none}
 .project-intro{width:calc(100% - 40px)}
 .site-header .signature span{max-width:140px}
}

/* Small project details introduce the expressive headline. The action ends the block. */
.project-meta{margin:0 0 24px;max-width:100%}
.project-credit{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:var(--type-label);line-height:1.5;color:var(--muted)}
.project-credit #client{font-weight:600;color:var(--ink)}
.project-intro .project-status{display:flex;width:fit-content;margin:8px 0 0}
@media(max-width:760px){.project-meta{margin-bottom:20px}}

/* Astral's public project names lead; metadata stays secondary. */
.case-facts[data-project="astral"]{grid-template-columns:repeat(2,minmax(0,1fr));margin:32px 0 0}
.case-facts[data-project="astral"]>div{display:flex;flex-direction:column;gap:8px}
.case-facts[data-project="astral"] dd{order:-1;max-width:none}
.case-facts[data-project="astral"] dt{margin:0}
@media(max-width:760px){.case-facts[data-project="astral"]{grid-template-columns:1fr;margin-top:24px}}

/* Astral pairs the public scope with the abstract landmark, without extra case claims. */
#case-study[data-project="astral"] .case-opening{align-items:center}
#case-study[data-project="astral"] .case-summary{padding-top:0}
#case-study[data-project="astral"] .case-subtitle{font-size:var(--type-body);line-height:1.6;letter-spacing:0;max-width:38ch;margin-bottom:24px}
.case-keywords{list-style:none;padding:20px 0 0;margin:0;border-top:1px solid var(--rule);display:grid;gap:8px;font-family:var(--serif);font-size:var(--type-section);line-height:1.15;letter-spacing:-.025em}
#case-study[data-project="astral"] .case-cover{height:clamp(540px,45vw,700px)}
#case-study[data-project="astral"] .thinking{margin-top:32px;padding-top:24px}
#case-study[data-project="astral"] .thinking-heading h3{font-family:var(--sans);font-size:var(--type-label);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--muted)}
#case-study[data-project="astral"] .thinking-heading>p{margin:0}
#case-study[data-project="astral"] .case-facts{margin-top:20px;padding:0 0 24px;border-top:0;gap:24px 40px}
#case-study[data-project="astral"] .thinking-body{display:block;padding:16px 0 0;font-size:var(--type-label);color:var(--muted)}
#case-study[data-project="astral"] .case-footer{margin-top:32px}
@media(max-width:760px){
 #case-study[data-project="astral"] .case-cover{height:clamp(250px,36svh,330px)}
 #case-study[data-project="astral"] .case-opening{gap:24px}
 .case-keywords{font-size:var(--type-lead)}
 #case-study[data-project="astral"] .thinking-heading{display:flex;gap:16px}
 #case-study[data-project="astral"] .case-facts{gap:24px}
}