/* Loop XXI, October 2026: quiet infrastructure.
   Images carry the page. Source Serif 4 speaks; Jost, with its round O, points the way.
   Core pages (home, articles, tools) load only this file. Retained pages load it last,
   so it also owns the shared header, footer, type and the article reading layout. */

@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/jost-variable.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/fonts/source-serif-4-variable.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/assets/fonts/source-serif-4-italic-variable.woff2') format('woff2')}

:root{
  --night:#0A0A0A;   /* ground */
  --bone:#F2E9D6;    /* type on night */
  --stone:#CFC8BA;   /* secondary type on night, 11.9:1 */
  --mist:#ADA79A;    /* small print on night, 8.3:1 */
  --ink:#121211;     /* type on pale fog and sky */
  --ink-soft:#33322E;
  --sage:#A8B89C;    /* focus */
  --rule:rgba(242,233,214,.16);
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,4.4vw,64px);
  --ease:cubic-bezier(.65,0,.15,1);
}

/* ---------- base for core pages ---------- */
body.lp-core{margin:0;background:var(--night);color:var(--bone);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body.lp-core *,body.lp-core *::before,body.lp-core *::after{box-sizing:border-box}
body.lp-core img{display:block;max-width:100%;height:auto}
body.lp-core picture{display:block}
body.lp-core a{color:inherit}
body.lp-core main{display:block;outline:none}
body.lp :focus-visible{outline:2px solid var(--sage);outline-offset:4px}
body.lp ::selection{background:var(--bone);color:var(--night)}

/* ---------- shared header ---------- */
.lp-skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;background:var(--bone);color:var(--night);font:500 15px/1 var(--sans);text-decoration:none}
.lp-skip:focus{top:12px}
header.lp-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0;padding:clamp(16px,2.2vw,28px) var(--pad);max-width:none;width:auto;background:var(--night);border:0;box-shadow:none;color:var(--bone);font-family:var(--sans)}
header.lp-header.lp-header--over{position:absolute;inset:0 0 auto 0;background:transparent}
header.lp-header .lp-mark{display:inline-flex;align-items:center;min-height:44px;border:0}
header.lp-header .lp-mark img{display:block;width:auto;height:clamp(30px,2.5vw,38px);max-width:none;filter:none}
header.lp-header .lp-nav{display:flex;gap:clamp(22px,3vw,44px);margin:0;padding:0}
header.lp-header .lp-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0;color:var(--bone);font:400 1.0625rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;text-transform:none;box-shadow:none}
header.lp-header .lp-nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
header.lp-header .lp-nav a:hover::after,header.lp-header .lp-nav a[aria-current]::after{transform:scaleX(1)}

/* ---------- shared footer ---------- */
footer.lp-footer{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px 40px;margin:0;padding:clamp(64px,9vw,128px) var(--pad) 32px;max-width:none;background:var(--night);border:0;border-top:1px solid var(--rule);color:var(--stone);font:400 1.0625rem/1.5 var(--sans)}
footer.lp-footer .lp-footer-mail{justify-self:start;color:var(--bone);font:300 clamp(1.7rem,3.6vw,3.2rem)/1.1 var(--serif);letter-spacing:-.015em;text-decoration:none;overflow-wrap:anywhere}
footer.lp-footer .lp-footer-mail:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
footer.lp-footer nav{display:flex;flex-wrap:wrap;gap:4px 28px}
footer.lp-footer nav a{display:inline-flex;align-items:center;min-height:44px;color:#E4DCCB;font:inherit;text-decoration:none}
footer.lp-footer nav a:hover,footer.lp-footer nav a[aria-current]{color:var(--bone)}
footer.lp-footer .lp-footer-base{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px}
footer.lp-footer small{color:var(--stone);font-size:.9375rem}
footer.lp-footer .lx-motion{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--stone);font:400 .9375rem/1 var(--sans);cursor:pointer}
footer.lp-footer .lx-motion:hover{color:var(--bone)}
footer.lp-footer .lx-motion[hidden]{display:none}

/* ---------- home ---------- */
/* The opening: the arch, one line and one sentence. The doors follow without a gallery in between. */
.hm-hero{position:relative;min-height:clamp(560px,86svh,980px);overflow:hidden;background:#000;isolation:isolate}
.hm-hero-media{position:absolute;inset:0;margin:0;display:block;height:100%;isolation:isolate}
body.lp-core .hm-hero-media img{width:100%;height:100%;object-fit:cover;object-position:68% 46%}
.hm-hero-media::after{content:"";position:absolute;inset:0 0 auto 0;height:min(26vh,220px);pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.hm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 40%,transparent 62%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 42%)}
.hm-hero-copy{position:absolute;z-index:2;left:var(--pad);bottom:clamp(40px,8vh,96px);width:min(44vw,720px)}
.hm-hero h1{margin:0 0 22px;color:var(--bone);font:300 clamp(2.6rem,5.4vw,5.4rem)/1.02 var(--serif);font-optical-sizing:auto;letter-spacing:-.025em;text-wrap:balance}
.hm-hero-copy p{margin:0;max-width:27em;color:#E4DCCB;font:400 clamp(1.0625rem,1.35vw,1.25rem)/1.5 var(--sans)}

/* Articles and Tools: a wide engraving and a tall photograph, side by side. */
.hm-doors{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);align-items:end;padding:clamp(48px,6vw,96px) var(--pad) clamp(72px,9vw,144px)}
.hm-door{display:block;color:var(--bone);text-decoration:none}
.hm-door--articles{grid-column:1/8}
.hm-door--tools{grid-column:8/13}
.hm-door img{width:100%;object-fit:cover}
.hm-door--articles img{aspect-ratio:16/10}
.hm-door--tools img{aspect-ratio:4/5;object-position:50% 60%}
.hm-door-label{display:grid;gap:8px;padding-top:22px}
.hm-door-word{font:300 clamp(2.2rem,3.6vw,3.6rem)/1 var(--serif);letter-spacing:-.025em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;text-decoration-color:transparent;transition:text-decoration-color .35s var(--ease)}
.hm-door:hover .hm-door-word,.hm-door:focus-visible .hm-door-word{text-decoration-color:currentColor}
.hm-door-note{color:var(--stone);font:400 1.0625rem/1.4 var(--sans)}

/* One orchestrated moment: the arch opens, then the words arrive. */
@media (prefers-reduced-motion:no-preference){
  .hm-hero-media img{animation:hm-aperture 2.4s var(--ease) .1s both}
  .hm-hero-copy{animation:hm-rise 1.3s var(--ease) 1.25s both}
}
/* The footer's Pause motion control: finished frames, no movement. */
.lx-motion-paused .hm-hero-media img,.lx-motion-paused .hm-hero-copy{animation:none!important}
.lx-motion-paused body.lp *,.lx-motion-paused body.lp *::before,.lx-motion-paused body.lp *::after{animation-play-state:paused!important}
@keyframes hm-aperture{0%{clip-path:circle(0% at 73% 38%)}14%{clip-path:circle(10% at 73% 38%)}100%{clip-path:circle(150% at 73% 38%)}}
@keyframes hm-aperture-phone{0%{clip-path:circle(0% at 49% 46%)}14%{clip-path:circle(16% at 49% 46%)}100%{clip-path:circle(150% at 49% 46%)}}
@keyframes hm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- page heads (articles, tools) ---------- */
.pg-head{padding:clamp(48px,9vw,148px) var(--pad) clamp(40px,6vw,88px);max-width:1180px}
.pg-head h1{margin:0 0 22px;font:300 clamp(3.2rem,9vw,8.4rem)/.92 var(--serif);letter-spacing:-.04em}
.pg-head p{margin:0;max-width:30em;color:var(--stone);font:400 clamp(1.0625rem,1.45vw,1.3rem)/1.55 var(--sans)}
.pg-head--compact{padding:clamp(40px,6vw,88px) var(--pad) clamp(36px,4.5vw,64px)}
.pg-head--compact h1{margin:0 0 14px;font-size:clamp(2.5rem,4.4vw,3.9rem);line-height:1}

/* ---------- articles ---------- */
.ar-feature{padding:0 var(--pad)}
.ar-feature a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pad);align-items:end;color:inherit;text-decoration:none}
.ar-feature img{grid-column:1/9;width:100%;aspect-ratio:16/10;object-fit:cover}
.ar-feature-copy{grid-column:9/13;padding-bottom:4px}
.ar-feature h2{margin:14px 0 18px;font:300 clamp(2.3rem,4.2vw,4rem)/1 var(--serif);letter-spacing:-.025em}
.ar-dek{margin:0;max-width:24em;color:var(--stone)}
.ar-kind,.ar-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;color:var(--mist);font:400 .9375rem/1.4 var(--sans)}
.ar-grid{list-style:none;margin:0;padding:clamp(80px,10vw,160px) var(--pad) clamp(40px,6vw,96px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--pad);row-gap:clamp(56px,7vw,112px)}
.ar-grid li:nth-child(even){margin-top:clamp(0px,9vw,160px)}
.ar-grid a{display:block;color:inherit;text-decoration:none}
.ar-grid img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:24px}
.ar-grid h3{margin:0 0 12px;max-width:20em;font:400 clamp(1.5rem,2.2vw,2.1rem)/1.14 var(--serif);letter-spacing:-.012em}
.ar-feature a:hover h2,.ar-grid a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}

/* ---------- tools ---------- */
/* Both choices side by side, each shown as it really looks: endpoints, or the tool's own result. */
.tl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);column-gap:var(--pad);padding:0 var(--pad) clamp(88px,10vw,160px)}
/* Each card spans the same five rows, so previews, names, text and actions line up across cards. */
.tl-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;justify-items:start;align-content:start;min-width:0}
.tl-shot{display:flex;flex-direction:column;align-self:stretch;width:100%;min-height:clamp(260px,26vw,400px);margin:0 0 34px;overflow:hidden;background:#121211;border:1px solid var(--rule);container-type:inline-size}
.tl-shot-bar{flex:none;display:flex;align-items:center;min-height:46px;padding:0 22px;border-bottom:1px solid var(--rule);color:var(--stone);font:400 .9375rem/1.2 var(--sans)}
.tl-shot-body{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--night)}
.tl-shot-body picture,.tl-shot-body img{display:block;width:100%;height:auto}
.tl-shot-body::after{content:"";position:absolute;inset:auto 0 0 0;height:22%;pointer-events:none;background:linear-gradient(0deg,var(--night),rgba(10,10,10,0))}
.tl-shot--api .tl-shot-body{padding:clamp(18px,2.4vw,30px) clamp(20px,2.4vw,30px);background:none}
.tl-shot--api .tl-shot-body::after{display:none}
.tl-shot .tl-api-auth{margin:0 0 clamp(14px,2vw,24px);max-width:none;color:var(--stone);font:400 clamp(.8125rem,1.05vw,.9375rem)/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.tl-api{margin:0;display:grid}
.tl-api div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:clamp(9px,1.25vw,14px) 0;border-top:1px solid var(--rule)}
.tl-api dt{margin:0;color:var(--bone);font:400 clamp(.875rem,1.15vw,1.0625rem)/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.tl-api dt span{display:inline-block;min-width:4.6ch;color:#BE9A62}
.tl-api dd{margin:0;flex:none;color:var(--stone);font:400 clamp(.9375rem,1.15vw,1.0625rem)/1.4 var(--sans);text-align:right}
@container (max-width:520px){.tl-api div{flex-direction:column;align-items:flex-start;gap:2px}.tl-api dd{text-align:left}}
.tl-card h2{margin:0 0 14px;font:300 clamp(2.2rem,3.2vw,3.2rem)/1 var(--serif);letter-spacing:-.025em}
.tl-card p{margin:0 0 12px;max-width:28em;color:#E4DCCB;font:400 clamp(1.0625rem,1.3vw,1.1875rem)/1.5 var(--sans)}
.tl-card .tl-fine{margin-bottom:26px;color:var(--stone);font-size:1rem}
.tl-link{display:inline-flex;align-items:center;min-height:48px;margin-top:auto;padding:0 26px;border:1px solid var(--bone);border-radius:999px;color:var(--bone);font:500 1rem/1 var(--sans);text-decoration:none;transition:background-color .3s,color .3s}
.tl-link:hover{background:var(--bone);color:var(--night)}

/* ---------- not found ---------- */
.nf{position:relative;margin:0;background:#cfcdc6;color:var(--ink)}
.nf img{width:100%;height:auto;aspect-ratio:2560/1097;object-fit:cover}
.nf-copy{position:absolute;inset:0 0 auto 0;padding:clamp(40px,6vw,96px) var(--pad)}
.nf-copy h1{margin:0 0 18px;font:300 clamp(2.6rem,6vw,6rem)/.95 var(--serif);letter-spacing:-.035em}
.nf-copy p{margin:0;font:400 1.0625rem/1.5 var(--sans)}
.nf-copy a{color:var(--ink)}

/* ---------- reading: essays and films ---------- */
body.lp .lx-article{max-width:none!important;margin:0;padding:0 0 clamp(64px,8vw,120px)!important;width:auto;color:var(--bone)}
body.lp .lx-article>*{max-width:720px;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad);box-sizing:content-box}
body.lp .lx-article>.ar-cover{max-width:none;padding:0;margin:0 0 clamp(40px,6vw,88px)}
body.lp .ar-cover img{display:block;width:100%;height:auto;aspect-ratio:16/7;object-fit:cover}
body.lp .lx-article header{position:static;margin:0 auto 40px;background:none;border:0;padding-top:0}
body.lp .lx-article header h1{margin:0 0 20px!important;color:var(--bone);font:300 clamp(2.4rem,5vw,4.2rem)/1.04 var(--serif)!important;letter-spacing:-.03em}
body.lp .lx-article .ar-meta{margin:0 0 24px}
body.lp .lx-article .lx-summary{margin:0;color:var(--stone)!important;font:300 clamp(1.25rem,1.9vw,1.55rem)/1.45 var(--serif)!important}
body.lp .lx-article section{margin-top:44px!important;padding:0!important}
body.lp .lx-article>section{padding:0 var(--pad)!important}
body.lp .lx-article h2{margin:0 0 18px;color:var(--bone);font:400 clamp(1.5rem,2.3vw,2rem)/1.2 var(--serif)!important;letter-spacing:-.012em}
body.lp .lx-article p,body.lp .lx-article li{color:#E4DCCB!important;font:400 1.1875rem/1.72 var(--serif);overflow-wrap:anywhere}
body.lp .lx-article a{color:var(--bone);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
body.lp .lx-article figure{margin:40px auto}
body.lp .lx-article video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:0}
body.lp .lx-article .lx-fine,body.lp .lx-article .ar-record{color:var(--mist)!important;font:400 .875rem/1.6 var(--sans)!important}
body.lp .lx-article .lx-transcript{border:1px solid var(--rule);border-radius:0;padding:16px 22px}
/* The transcript box lines up with the reading column at every width. */
body.lp .lx-article>.lx-transcript{max-width:calc(720px - 44px);margin-left:max(var(--pad),calc((100% - 720px)/2));margin-right:max(var(--pad),calc((100% - 720px)/2))}
body.lp .lx-article .lx-transcript summary{font:500 1rem/1.4 var(--sans)}
body.lp .lx-article.gw-page{padding-top:clamp(48px,8vw,112px)}
body.lp .lx-article ul{margin:0;padding-left:1.15em}
body.lp .lx-article li+li{margin-top:.55em}
/* Legal pages (privacy, terms) use the same reading column. */
body.lp main.wrap{width:auto;max-width:720px;margin:0 auto;padding:clamp(56px,9vw,120px) var(--pad) clamp(64px,8vw,120px);box-sizing:content-box}
body.lp main.wrap h1{margin:0 0 18px;font:300 clamp(2.6rem,6vw,5rem)/1.02 var(--serif);letter-spacing:-.03em}
body.lp main.wrap .lede{margin:0 0 8px;color:var(--stone);font:300 clamp(1.15rem,1.7vw,1.35rem)/1.5 var(--serif)}
body.lp main.wrap h2{margin:56px 0 14px;font:400 clamp(1.35rem,2vw,1.7rem)/1.22 var(--serif);letter-spacing:-.01em}
body.lp main.wrap p,body.lp main.wrap li{color:#E4DCCB;font:400 1.0625rem/1.7 var(--sans)}
body.lp main.wrap .note{background:var(--ink);border-left:2px solid var(--stone);padding:16px 18px;margin:24px 0}
body.lp main.wrap a{color:var(--bone);text-underline-offset:.16em}
/* Film pages open like an essay: left-aligned title block over the picture. */
body.lp .film-heading{text-align:left;padding:clamp(56px,9vw,120px) 0 clamp(32px,4vw,48px)!important}
body.lp .film-heading h1{margin:0 0 20px;font:300 clamp(2.6rem,6vw,5rem)/1.02 var(--serif);letter-spacing:-.03em}
body.lp .film-heading .lx-dek{margin:0;max-width:34em;color:var(--stone);font:300 clamp(1.2rem,1.8vw,1.45rem)/1.45 var(--serif)}
body.lp .film-heading .ar-meta{margin:0 0 24px}

/* ---------- phone ---------- */
@media (max-width:360px){
  header.lp-header{flex-wrap:wrap;row-gap:0}
  header.lp-header .lp-nav{flex:1 0 100%;justify-content:flex-start;gap:0 16px}
  header.lp-header .lp-nav a{font-size:1rem}
}
@media (max-width:760px){
  .hm-hero{min-height:0;background:var(--night)}
  .hm-hero::after{display:none}
  .hm-hero-media{position:relative;inset:auto;aspect-ratio:1/1}
  body.lp-core .hm-hero-media img{object-position:50% 22%}
  .hm-hero-copy{position:relative;left:auto;bottom:auto;width:auto;padding:30px var(--pad) 8px}
  .hm-hero h1{margin-bottom:14px;font-size:clamp(2.1rem,9.6vw,2.9rem);line-height:1.05}
  .hm-doors{grid-template-columns:1fr;row-gap:40px;padding-top:44px;padding-bottom:64px}
  .hm-door--articles,.hm-door--tools{grid-column:auto}
  .hm-door--articles img,.hm-door--tools img{aspect-ratio:3/2;object-position:50% 50%}
  .hm-door-label{padding-top:16px;gap:4px}
  .hm-door-word{font-size:clamp(2.1rem,9vw,2.6rem)}
  .ar-feature a{grid-template-columns:1fr}
  .ar-feature img,.ar-feature-copy{grid-column:auto}
  .ar-feature-copy{padding-top:22px}
  .ar-grid{grid-template-columns:1fr;padding-top:72px}
  .ar-grid li:nth-child(even){margin-top:0}
  .tl-grid{display:flex;flex-direction:column;gap:64px}
  .tl-card{display:flex;flex-direction:column;align-items:flex-start}
  .tl-shot{min-height:0;margin-bottom:26px}
  .nf img{aspect-ratio:4/5}
  footer.lp-footer{grid-template-columns:1fr}
  body.lp .ar-cover img{aspect-ratio:4/3}
  @media (prefers-reduced-motion:no-preference){.hm-hero-media img{animation-name:hm-aperture-phone}}
}

@media (prefers-reduced-motion:reduce){
  body.lp *,body.lp *::before,body.lp *::after{animation:none!important;transition:none!important}
}