/* ==========================================================================
   journal.css — "The Gap · A Field Journal"
   One design system for the portfolio: tokens, type, masthead, the
   dimension line ("the gap"), index rows, buttons, footer, reveals.
   Shared by the homepage and the companion pages. See DESIGN.md.
   ========================================================================== */

:root{
  /* palette: warm, tinted neutrals. Terracotta is the only accent. */
  --ivory:#FCFAF8; --oat:#F3EFEA; --paper:#FFFDFA; --blush:#F4E6DF; --wash:#F8EEE8; --sage-tint:#E4ECE3;
  --ink-rgb:56,51,48; --ivory-rgb:252,250,248; --ink:#383330; --ink-2:#4A423D; --muted:#5C544E;
  --navy:#1B2D3B; --navy-2:#2C4357;
  --terra:#B56E57; --terra-text:#9C543F; --sage:#8FA892;
  --rule:rgba(56,51,48,.17); --rule-soft:rgba(56,51,48,.09);

  /* type */
  --serif:'Newsreader','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Ubuntu',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Ubuntu Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* layout: the left margin column carries the cable, so nothing sits on it */
  --gutter:clamp(54px,6.6vw,96px);
  --edge:clamp(22px,4.2vw,64px);
  --sec:clamp(72px,9vw,150px);

  /* motion tokens (Emil Kowalski: strong ease-out for entrances, ease-in-out for movement, never bounce) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --d-press:140ms; --d-ui:220ms; --d-reveal:760ms; --d-line:1100ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
b,strong{font-weight:500}
::selection{background:var(--navy);color:var(--paper)}
:focus-visible{outline:2px solid var(--terra-text);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
[id]{scroll-margin-top:92px}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:430;letter-spacing:-.028em;line-height:.98;font-optical-sizing:auto;text-wrap:balance}
.display em{font-style:italic;font-weight:400;color:var(--terra-text);letter-spacing:-.018em}
.h1{font-size:clamp(46px,8.1vw,124px)}
.h2{font-size:clamp(38px,5.6vw,92px);line-height:1}
.h3{font-size:clamp(28px,3.2vw,46px);line-height:1.04}
.deck{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.5vw,36px);line-height:1.18;letter-spacing:-.014em;color:var(--terra-text);text-wrap:balance}
.lede{font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;color:var(--ink-2);max-width:33em;text-wrap:pretty}
.kicker{display:flex;align-items:center;gap:14px;font:400 12px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--terra-text)}
.kicker .no{color:var(--ink)}
.kicker::after{content:"";flex:0 0 clamp(28px,5vw,72px);height:1px;background:currentColor;opacity:.55}
.label{font:400 11.5px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono)}
.src{font:400 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}

/* ---------- rules ---------- */
.rule{display:block;height:1px;background:var(--rule);border:0;transform-origin:0 50%}
.rule.ink{background:var(--ink)}

/* ---------- masthead (with the gap meter) ---------- */
.skip{position:absolute;left:12px;top:-64px;z-index:60;background:var(--navy);color:var(--paper);padding:11px 18px;border-radius:2px;font:500 14px var(--sans);transition:top .15s var(--ease-out)}
.skip:focus{top:10px}
.mast{position:relative;z-index:30;padding:16px var(--edge) 0 var(--gutter)}
.mast::before{content:"";position:absolute;inset:0 0 -26px 0;z-index:-1;background:linear-gradient(180deg,rgba(var(--ivory-rgb),.98) calc(100% - 26px),rgba(var(--ivory-rgb),0));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);pointer-events:none}
.mast-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:40px}
.brand{font:500 25px/1 var(--serif);letter-spacing:-.012em;justify-self:start}
.brand i{font-style:normal;color:var(--terra)}
.issue{font:400 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--muted);text-align:center;white-space:nowrap}
.mast nav{justify-self:end;display:flex;align-items:center;gap:clamp(16px,2.3vw,34px);font:400 12px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.mast nav a{position:relative;padding:11px 0;color:var(--ink-2);transition:color var(--d-ui) var(--ease-out)}
.mast nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease-out)}
.mast nav a[aria-current=true]{color:var(--terra-text)}
.mast nav a[aria-current=true]::after{transform:scaleX(1)}
.mast nav a.talk{color:var(--terra-text)}
/* the touch area is larger than the word: >=44px tall without changing the layout */
.mast nav a::before,.foot a::before,.brand::before{content:"";position:absolute;inset:-9px -8px}
.foot a,.brand{position:relative}
.brand::before{inset:-13px -8px}
.mast .gl{pointer-events:none}
@media (hover:hover) and (pointer:fine){.mast nav a:hover{color:var(--terra-text)}.mast nav a:hover::after{transform:scaleX(1)}}
.mast .meter{margin-top:2px;--gl-h:18px}
.mast nav .sm{display:none}
.mast nav a{white-space:nowrap}
@media (max-width:1100px){.issue{display:none}.mast-in{grid-template-columns:1fr auto}}
@media (max-width:960px){.mast nav .lg{display:none}.mast nav .sm{display:inline}}
@media (max-width:520px){.kicker::after{display:none}.kicker{letter-spacing:.11em;font-size:11.5px}}
@media (min-width:721px){.mast.sticky{position:sticky;top:0}}
@media (max-width:720px){
  .mast{padding:12px var(--edge) 0 var(--gutter)}
  .mast-in{grid-template-columns:1fr auto;gap:12px}
  .issue{display:none}
  .mast nav{grid-column:1 / -1;justify-self:start;gap:clamp(14px,5vw,26px);font-size:11px;order:3;white-space:nowrap}
  .mast nav a{padding:9px 0}
  .mast nav .lg{display:none}.mast nav .sm{display:inline}
  .brand{font-size:23px}
  .mast .meter{--gl-h:12px}
}

/* ---------- the dimension line: "the gap" ---------- */
.gl{position:relative;height:var(--gl-h,28px);color:var(--ink);width:100%}
.gl::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--rule)}
.gl .seg{position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:currentColor;transform-origin:50% 50%}
.gl .tw{position:absolute;top:0;bottom:0;width:50%}
.gl .tw.l{left:0}.gl .tw.r{right:0}
.gl .t{position:absolute;top:50%;width:1px;height:13px;margin-top:-6.5px;background:currentColor}
.gl .tw.l .t{left:0}.gl .tw.r .t{right:0}
.gl .lab{position:absolute;top:calc(50% + 13px);font:400 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gl .lab.l{left:0}.gl .lab.r{right:0}
.gl .mid{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--terra);opacity:0;transform:scale(.55)}
.gl.meter .t{height:9px;margin-top:-4.5px;opacity:.75}
.gl.meter .seg{opacity:.55}

/* ---------- index rows (numbered table of contents) ---------- */
.index{border-top:1px solid var(--ink)}
.index>li{border-bottom:1px solid var(--rule)}
.row{position:relative;display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;grid-template-areas:"meta ttl act" "meta desc act";gap:12px clamp(16px,2.4vw,44px);align-items:baseline;padding:clamp(22px,2.7vw,40px) clamp(0px,.6vw,10px);transition:background-color var(--d-ui) var(--ease-out),transform var(--d-press) var(--ease-out);touch-action:manipulation}
.row .meta{grid-area:meta}
.row .no{font:400 12px var(--mono);letter-spacing:.14em;color:var(--muted)}
.row .cat{display:block;font:400 11.5px/1.35 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--terra-text)}
.row .ttl{grid-area:ttl;font:430 clamp(27px,3.1vw,46px)/1.04 var(--serif);letter-spacing:-.022em;text-wrap:balance;transition:transform .34s var(--ease-out)}
.row.feature .ttl{font-size:clamp(34px,4.5vw,68px);line-height:.98}
.row .desc{grid-area:desc;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:30em}
.row .ev{display:block;margin-top:10px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--terra-text)}
.row .act{grid-area:act;align-self:start;display:flex;align-items:baseline;gap:10px;font:500 14px var(--sans);color:var(--terra-text);white-space:nowrap;justify-self:end}
.row .act small{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.row .arr{display:inline-block;transition:transform .34s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .row:hover{background:rgba(var(--ink-rgb),.045)}
  .row:hover .ttl{transform:translateX(8px)}
  .row:hover .arr{transform:translateX(5px)}
}
.row:active{transform:scale(.996);transition-duration:80ms}
@media (max-width:820px){
  .row{grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "ttl" "desc" "act";padding:24px 0}
  .row .meta{flex-direction:row;align-items:baseline;gap:14px}
  .row .act{justify-self:start;margin-top:6px}
}

/* ---------- buttons: one style, rectangular ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;background:var(--navy);color:var(--paper);border:1px solid var(--navy);border-radius:2px;font:500 16px var(--sans);letter-spacing:.01em;cursor:pointer;touch-action:manipulation;transition:background-color var(--d-ui) var(--ease-out),border-color var(--d-ui) var(--ease-out),color var(--d-ui) var(--ease-out),transform var(--d-press) var(--ease-out)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--navy-2);border-color:var(--navy-2)}}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}}
.textlink{display:inline-flex;align-items:baseline;gap:8px;font:500 15px var(--sans);color:var(--terra-text);padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/0 1px no-repeat;transition:background-size .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.textlink:hover{background-size:100% 1px}}

/* ---------- footer ---------- */
.foot{padding:clamp(40px,5vw,72px) var(--edge) 40px var(--gutter);background:var(--ivory)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 32px;margin-top:22px;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot a{color:var(--ink-2);padding:8px 0}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--terra-text)}}

/* ---------- reveals: rises, rule draws, line masks. Content is visible without JS. ---------- */
.js [data-rv=u]{opacity:0;transform:translateY(14px)}
.js [data-rv=u].in{opacity:1;transform:none;transition:opacity var(--d-reveal) var(--ease-out) var(--d,0ms),transform var(--d-reveal) var(--ease-out) var(--d,0ms)}
.js [data-rv=o]{opacity:0}
.js [data-rv=o].in{opacity:1;transition:opacity var(--d-reveal) var(--ease-out) var(--d,0ms)}
.js .rule[data-rv]{transform:scaleX(0)}
.js .rule[data-rv].in{transform:scaleX(1);transition:transform var(--d-line) var(--ease-io) var(--d,0ms)}
.m .ln{display:block;overflow:hidden;padding:.1em .06em .16em;margin:-.1em -.06em -.16em}
.m .ln>span{display:block}
.js [data-rv=m] .ln>span{transform:translateY(112%)}
.js [data-rv=m].in .ln>span{transform:none;transition:transform .95s var(--ease-out) calc(var(--d,0ms) + var(--i,0) * 85ms)}
/* the gap line draws, or (in the closing) closes */
.js .gl[data-rv=draw] .seg{transform:scaleX(0);transform-origin:0 50%}
.js .gl[data-rv=draw] .t,.js .gl[data-rv=draw] .lab{opacity:0}
.js .gl[data-rv=draw].in .seg{transform:scaleX(1);transition:transform var(--d-line) var(--ease-io) var(--d,0ms)}
.js .gl[data-rv=draw].in .t,.js .gl[data-rv=draw].in .lab{opacity:1;transition:opacity .5s var(--ease-out) calc(var(--d,0ms) + 350ms)}
.js .gl[data-rv=draw].in .tw.r .t{transition-delay:calc(var(--d,0ms) + var(--d-line) - 200ms)}
.js .gl[data-rv=draw].in .lab.r{transition-delay:calc(var(--d,0ms) + var(--d-line) - 200ms)}
.gl[data-rv=close] .seg,.gl[data-rv=close] .tw{transition:transform 1.3s var(--ease-io) var(--d,0ms)}
.gl[data-rv=close].in .seg{transform:scaleX(0)}
.gl[data-rv=close].in .tw.l{transform:translateX(100%)}
.gl[data-rv=close].in .tw.r{transform:translateX(-100%)}
.gl[data-rv=close].in .mid{opacity:1;transform:none;transition:opacity .4s var(--ease-out) calc(var(--d,0ms) + 1.15s),transform .4s var(--ease-out) calc(var(--d,0ms) + 1.15s)}

@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1 !important;transform:none !important;transition:none !important}
  .js [data-rv=m] .ln>span{transform:none !important;transition:none !important}
  .js .rule[data-rv]{transform:none !important}
  .js .gl[data-rv=draw] .seg{transform:none !important}
  .js .gl[data-rv=draw] .t,.js .gl[data-rv=draw] .lab{opacity:1 !important}
  .gl[data-rv=close] .seg{transform:scaleX(0) !important}.gl[data-rv=close] .tw.l{transform:translateX(100%) !important}.gl[data-rv=close] .tw.r{transform:translateX(-100%) !important}
  .gl[data-rv=close] .mid{opacity:1 !important;transform:none !important}
  .row,.row .ttl,.row .arr,.btn{transition:none !important}
}