/* Shared visual grammar. Component files own composition, this file owns type,
   spacing and controls. Keep experiments inside the same frame. */
:root{
 --font-ui:'Helvetica Neue',Arial,sans-serif;
 --gutter:clamp(24px,3.4vw,78px);
 --space-section:clamp(36px,4vw,72px);
 --space-group:clamp(20px,2vw,32px);
 --type-label:clamp(12px,.7vw,14px);
 --type-ui:clamp(14px,.85vw,17px);
 --type-body:clamp(18px,1.2vw,23px);
 --type-lead:clamp(22px,1.7vw,32px);
 --type-title:clamp(32px,3.8vw,68px);
 --type-display:clamp(48px,5.5vw,110px);
 --tracking-display:-.055em;
 --tracking-text:-.015em;
 --action-size:44px;
 font-family:var(--font-ui);
}

/* One family, with hierarchy carried by size, spacing and contrast. */
.meta,.journal-identity>.meta,.essay-heading .meta,.caption-kicker,
.focus-number,.focus-count,.focus-count>span,.breadcrumbs .section-count,
.project-card small,.rail-controls,.series-hero>span,.piece>span,
.gallery-bar h2 span,.connection-list small,.viewer-controls span,
.essay-edge small,.essay-side .essay-edge .meta,.essay-side .essay-edge small,
.sketch-labels span,.sketch-invitation,.newsletter>p{
 font-family:var(--font-ui);font-weight:400;font-size:var(--type-label);
 line-height:1.45;letter-spacing:0;font-variant-numeric:tabular-nums;
}
.meta,.journal-identity>.meta,.essay-heading .meta,.caption-kicker,
.sketch-invitation{text-transform:none}
.focus-count>span{font-size:.85em}
.focus-name,.page-heading,.journal-head h1,.journal-copy h2,.essay-heading h1,
.caption-title,.project-subhead,.connections h2{
 font-family:var(--font-ui);font-weight:400;letter-spacing:var(--tracking-display);
 line-height:1.04;
}
.page-heading,.journal-head h1,.essay-heading h1{font-size:var(--type-display)}
.journal-copy h2,.project-subhead,.connections h2{font-size:var(--type-title)}
.caption-title{font-size:clamp(30px,2.7vw,58px)}
.page-deck,.journal-head .journal-subtitle,.project-role,
.newsletter>label,.reading-brand strong{
 font-family:var(--font-ui);font-size:var(--type-lead);line-height:1.3;
 font-weight:400;letter-spacing:-.03em;
}
.journal-deck,.project-summary,.project-copy,.about-copy,.reading-text{
 font-family:var(--font-ui);font-size:var(--type-body);line-height:1.6;
 letter-spacing:var(--tracking-text);
}
.reading-text>p:first-child{font-size:inherit;line-height:inherit}
.caption-role,.project-card strong,.connection-list strong,
.gallery-bar h2,.essay-side .essay-edge strong{
 font-family:var(--font-ui);font-weight:400;letter-spacing:-.025em;
}
.project-card strong{font-size:clamp(17px,1.1vw,22px);line-height:1.25}
.project-card small{display:block;margin-top:5px}
.project-entry,.journal-read,.text-link,.viewer-head button,.viewer-controls button,
.breadcrumbs .back-link,.reading-brand>span{font-size:var(--type-ui)}
.breadcrumbs .section-label{font-size:var(--type-ui)}

/* The same outer alignment from the category index through project and journal. */
.topline,#category-stage{padding-inline:var(--gutter)}
.page-content{padding:var(--space-group) var(--gutter) var(--space-section)}
.project-intro,.journal-head{gap:var(--space-section);margin-top:0;align-items:end}
.journal-head{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding-top:0;padding-bottom:var(--space-section)}
.journal-identity>.meta,.project-intro .meta{margin-bottom:var(--space-group)}
.journal-head .journal-subtitle{margin-top:var(--space-group);max-width:none}
.project-intro{margin-bottom:var(--space-section)}
.journal-entry{padding:var(--space-section) 0;gap:var(--space-section)}
.journal-entry:before{inset:0 calc(-1 * var(--gutter));transform:none;opacity:0;transition:opacity .28s var(--ease)}
.journal-entry:is(:hover,:focus-within):before{transform:none;opacity:1}
.journal-copy{padding:0}
.journal-copy h2{margin-top:var(--space-group)}
.journal-deck{margin-top:var(--space-group)}
.journal-read{margin-top:var(--space-group)}
.newsletter{padding-bottom:0}
.newsletter>label{margin-bottom:var(--space-group);white-space:nowrap}
.newsletter-field{border-radius:0}
.newsletter-field button{border-radius:0;font-size:var(--type-ui)}
.newsletter-field input{font-family:var(--font-ui);font-size:var(--type-body);letter-spacing:var(--tracking-text)}
.project-tags{gap:8px 20px;margin-top:var(--space-group)}
.project-tags a{font-size:var(--type-ui);padding:6px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:36px}
.project-tags a:hover{background:transparent;color:var(--ink);border-color:var(--ink)}

/* Rectangular selected states; circles only indicate a directional action. */
.rail-filters{gap:4px}
#work-stage>.rail-filters{position:absolute;top:4px;left:calc(3% + 14px);z-index:9;margin:0}
#work-stage:has(>.rail-filters) #project-rail{top:48px}
.rail-filters button,.gallery-bar button{
 font-family:var(--font-ui);font-size:var(--type-label);line-height:1.2;
 border:0;border-radius:0;min-height:36px;padding:8px 12px;
 transition:background .2s,color .2s;
}
.gallery-bar>div{border:0;padding:0;gap:4px;background:var(--soft)}
.rail-filters button:not([aria-pressed=true]):hover,.gallery-bar button:not([aria-pressed=true]):hover{background:var(--soft)}
.entry-arrow,.journal-read>span,.essay-side .edge-arrow,.film-play b{
 display:grid;place-items:center;flex:none;width:var(--action-size);height:var(--action-size);
 border:1px solid var(--line);border-radius:50%;font-size:25px;line-height:1;font-weight:400;
 transition:background .25s,color .25s,transform .3s var(--ease);
}
.project-entry{gap:16px;min-height:44px;margin-top:var(--space-group)}
.film-play b{border-color:#fffa}
.essay-side .essay-edge:is(:hover,:focus-visible) .edge-arrow{transform:translateX(4px)}
.essay-side.previous .essay-edge:is(:hover,:focus-visible) .edge-arrow{transform:translateX(-4px)}
.focus-row:focus-visible,.primary-nav a:focus-visible,.journal-copy:focus-visible{outline-offset:3px!important}

/* Reading keeps its centered axis and generous side navigation. */
.reading-masthead{padding-bottom:var(--space-group)}
.reading-brand{gap:8px}
.reading-brand strong{font-size:clamp(22px,1.5vw,28px)}
.essay-layout{margin-top:var(--space-section)}
.essay-heading h1{margin:var(--space-group) 0 0;max-width:18ch;margin-inline:auto}
.living-diagram{margin-top:var(--space-group)}
.reading-text{max-width:52ch;margin-top:var(--space-section)}
.essay-work-link{max-width:52ch;font-size:var(--type-body);margin-top:var(--space-section)}
.essay-work-link .text-link{margin-top:12px}
.about-layout{gap:var(--space-section);margin-top:var(--space-section)}
.about-copy p+p{margin-top:1em}

@media(min-width:1900px){:root{--action-size:52px}}
@media(min-width:1101px){
 .reading{--edge-width:clamp(130px,9vw,220px);padding-inline:var(--gutter)}
 .reading-masthead{margin-inline:calc(var(--edge-width) + var(--space-group))}
 .essay-content{width:calc(100% - 2 * (var(--edge-width) + var(--space-group)));max-width:1200px}
 .essay-layout>.essay-side{top:var(--topline-height)}
 .essay-side.previous{left:calc(var(--sidebar) + var(--gutter))}
 .essay-side.next{right:var(--gutter)}
 .essay-side .essay-edge{padding-inline:16px;gap:var(--space-group)}
 .essay-side .essay-edge strong{font-size:clamp(18px,1.2vw,24px)}
 .essay-side .essay-edge .edge-arrow{width:var(--action-size);height:var(--action-size);font-size:25px}
}
@media(max-width:1100px){.project-intro{grid-template-columns:1fr;gap:var(--space-group)}.project-summary{margin-top:0}}
@media(max-width:800px){
 :root{--gutter:22px;--space-section:36px;--space-group:20px;--type-label:12px;--type-ui:14px;--type-body:18px;--type-lead:22px;--type-title:clamp(32px,8.5vw,48px);--type-display:clamp(48px,13vw,80px);--action-size:40px}
 .journal-head{grid-template-columns:1fr;gap:32px}
 .journal-head h1{font-size:var(--type-display)}
 .journal-head .journal-subtitle{font-size:var(--type-lead);max-width:26ch;text-wrap:initial}
 .newsletter>label{font-size:var(--type-lead)}
 .journal-entry{grid-template-columns:1fr;padding:var(--space-group) 0 var(--space-section);gap:16px}
 .journal-copy{padding:0}
 .journal-copy h2{margin-top:var(--space-group);font-size:var(--type-title)}
 .journal-deck{font-size:var(--type-body)}
 .journal-read>span{width:var(--action-size);height:var(--action-size)}
 .focus-number,.focus-count,.focus-count>span{font-size:10px}
 .project-card strong{font-size:15px}
 .project-card small{font-size:11px;margin-top:4px}
 /* Content determines the caption height; controls never overlap long titles. */
 #work-stage,body[data-view=stack] #work-stage{
  height:auto;min-height:0;display:grid;grid-template-rows:380px auto auto 52px;
  row-gap:20px;padding-bottom:12px;
 }
 body[data-view=stack] #work-caption{
  position:relative;grid-row:2;left:auto;top:auto;bottom:auto;transform:none;
  width:auto;margin:0 var(--gutter);
 }
 #project-rail{
  position:relative;grid-row:3;inset:auto;width:100%;height:190px;
 }
 #work-stage:has(>.rail-filters){grid-template-rows:380px auto 32px 190px 52px}
 #work-stage:has(>.rail-filters) #project-rail{grid-row:4;top:auto}
 #work-stage>.rail-filters{position:relative;grid-row:3;inset:auto;margin:0 26px;width:fit-content}
 #work-stage:has(>.rail-filters) .rail-controls{grid-row:5}
 .rail-controls{
  position:relative;grid-row:4;inset:auto;margin:0 var(--gutter);
  width:calc(100% - 2 * var(--gutter));height:52px;
 }
 .rail-filters{left:26px;gap:4px}
 .rail-filters button{min-height:32px;font-size:12px;padding:6px 10px}
 .reading{padding-bottom:150px}
 .reading-masthead{margin-inline:0}
 .essay-heading h1{font-size:var(--type-display);margin-bottom:0}
 .essay-heading .meta{font-size:var(--type-label)}
 .living-diagram{margin-inline:0;width:100%}
 .sketch-labels strong{font-size:14px;letter-spacing:var(--tracking-text)}
 .sketch-labels span{font-size:11px;line-height:1.4}
 .sketch-control{max-width:84%;margin-top:24px}
 .essay-mobile-nav{padding:12px var(--gutter);gap:16px;box-shadow:none}
 .essay-mobile-nav .essay-edge .meta{font-size:11px}
 .essay-mobile-nav .essay-edge strong{font-size:14px;line-height:1.3}
 .about-copy{font-size:var(--type-body)}
 .connections{margin-top:var(--space-section);padding-top:var(--space-section)}
}
@media(max-width:430px){:root{--gutter:18px;--type-lead:21px}}
@media(prefers-reduced-motion:reduce){.journal-entry:before{transition:none}}