/* A+43, Podium-style build. Jost and Barlow Condensed stand in for the
   reference's licensed Futura and Univers Condensed. */
:root{
  --white:#fff; --black:#0b0b0b; --beige:#d8cbb6; --grey:#8a8580;
  --margin:clamp(16px, 2.4vw, 36px);
  --futura:Jost, "Futura PT", Futura, "Century Gothic", sans-serif;
  --cond:"Barlow Condensed", "Univers Condensed", "Arial Narrow", sans-serif;
  --hc:var(--black);                      /* header colour, switched per section */
}
body[data-header="white"]{--hc:var(--white)}
*{box-sizing:border-box}
html, body{margin:0; background:var(--white); color:var(--black)}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{font-family:var(--futura); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img, video{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid currentColor; outline-offset:3px}
.skip{position:absolute; left:-999px}
.skip:focus{left:var(--margin); top:var(--margin); z-index:200; background:var(--white); padding:8px}
.over{font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase}

/* split-line reveal */
[data-split] .ln{display:block; overflow:hidden}
[data-split] .ln > span{display:inline-block; transform:translateY(105%); transition:transform 1s cubic-bezier(.2,.8,.2,1)}
[data-split].in .ln > span{transform:none}

/* loading: the canvas shows the shape as a dot, the counter sits top right */
.hdr-pct{position:absolute; right:var(--margin); top:var(--margin); font-weight:700; font-size:15px; transition:opacity .4s}
body:not(.loading) .hdr-pct{opacity:0; pointer-events:none}
.hdr-menu{transition:opacity .5s .2s}
body.loading .hdr-menu{opacity:0; pointer-events:none}

/* letter reveal: characters pop in in random order */
/* the raw text stays hidden until the script has split it into letters (no flash before the reveal);
   if the script never runs the text appears after 8s, the <noscript> rule shows it at once */
@keyframes show-chars{to{visibility:visible}}
[data-chars]:not([data-split-done]){visibility:hidden; animation:show-chars 0s 8s forwards}
[data-chars] .ch{opacity:0; transition:opacity .08s linear}
[data-chars].in .ch{opacity:1}
[data-chars] .w{display:inline-block; white-space:nowrap}

/* fixed canvas behind everything */
.gl{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none}
main{position:relative; z-index:1}

/* header */
.hdr{position:fixed; left:0; right:0; top:0; z-index:60; display:flex; justify-content:space-between; align-items:center; padding:var(--margin); color:var(--hc); pointer-events:none; transition:color .35s}
.hdr > *{pointer-events:auto}
.hdr-logo img{height:26px; width:auto; filter:invert(1); transition:filter .35s}
body[data-header="white"] .hdr-logo img{filter:none}
.hdr-menu{display:flex; align-items:center; gap:10px; font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase}
.dots{display:grid; grid-template-columns:repeat(3, 4px); gap:2px}
.dots i{width:4px; height:4px; background:currentColor; transition:opacity .2s}
.dots i:nth-child(2n){opacity:.25}
.hdr-menu:hover .dots i{opacity:1}
.hdr-menu:hover .dots i:nth-child(2n+1){opacity:.25}

/* menu */
.menu{position:fixed; inset:0; z-index:59; background:var(--black); color:var(--white); display:grid; align-content:center; padding:var(--margin);
  clip-path:circle(0 at calc(100% - 50px) 40px); transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.menu[hidden]{display:grid; visibility:hidden}
.menu.open{clip-path:circle(150% at calc(100% - 50px) 40px); visibility:visible}
.menu ul{list-style:none; margin:0; padding:0}
.menu li{overflow:hidden; padding-left:16px; margin-left:-16px}   /* room for the J's overhang, which the reveal mask clipped */
.menu li a{display:inline-block; font-weight:700; font-size:clamp(48px, 9vw, 140px); line-height:.95; text-transform:uppercase; text-decoration:none; transform:translateY(105%); transition:transform .8s cubic-bezier(.2,.8,.2,1), color .25s}
.menu.open li a{transform:none}
.menu li:nth-child(2) a{transition-delay:.05s} .menu li:nth-child(3) a{transition-delay:.1s} .menu li:nth-child(4) a{transition-delay:.15s}
.menu li a:hover{color:var(--beige)}
.menu-meta{position:absolute; left:var(--margin); right:var(--margin); bottom:var(--margin); display:flex; justify-content:space-between; margin:0; font-family:var(--cond); font-weight:500; letter-spacing:.06em; text-transform:uppercase}

/* hero */
.hero{position:relative; height:100svh}
.hero-tag{position:absolute; left:var(--margin); bottom:var(--margin); margin:0; font-weight:700; font-size:clamp(26px, 3vw, 46px); line-height:1; text-transform:uppercase; letter-spacing:-.005em}
.hero-hint{position:absolute; right:var(--margin); bottom:var(--margin); font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase}

/* mosaic: scroll room for the flight towards the items */
.mosaic{position:relative; height:200vh}
@media (max-aspect-ratio:7/10){ .mosaic{height:135vh} }   /* portrait phones: a shorter ride through the images */

/* projects: grid of video cards; columns drift at different speeds */
.projects{position:relative; background:var(--black); color:var(--white); padding:14vh var(--margin) 26vh}
.grid{display:grid; grid-template-columns:1fr; gap:clamp(48px, 7vw, 90px) clamp(16px, 1.6vw, 24px)}
.col{display:grid; gap:clamp(48px, 6vw, 80px); align-content:start; will-change:transform}
.card{display:block; text-decoration:none; will-change:opacity}
.card-media{position:relative; overflow:hidden; aspect-ratio:348 / 259; background:#151515}
.card-media img, .card-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease-out}
.card:hover .card-media img, .card:hover .card-media video{transform:scale(1.05)}
.card-halo{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:overlay; transition:opacity .4s ease-out}
.card-row{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:start; padding-top:12px}
.card-title{margin:-.1em 0 0; font-weight:700; font-size:clamp(20px, 1.7vw, 28px); line-height:1; text-transform:uppercase}
.card-meta{text-align:right; line-height:1.25}
.card-meta .yr{display:block; font-family:var(--cond); font-weight:500; font-size:12px; letter-spacing:.06em; color:#c4c4c4}
.card-meta .cl{display:block; font-size:13px}
.ph{color:#7f7fff}
@media (min-width:760px){ .grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }

/* view toggle + list view */
.viewbtn{position:fixed; left:50%; bottom:22px; z-index:58; transform:translate(-50%, 140%); display:flex; align-items:center; gap:12px; padding:10px 12px;
  background:var(--black); color:var(--white); border:1px solid rgba(255,255,255,.35); font-family:var(--cond); font-weight:700; font-size:12px; line-height:1;
  letter-spacing:.06em; text-transform:uppercase; text-align:left; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.viewbtn.show{transform:translate(-50%, 0)}
.vb-ico{display:grid; gap:3px}
.vb-ico i{display:block; width:22px; height:2px; background:currentColor}
.listview{position:fixed; inset:0; z-index:57; background:var(--black); color:var(--white); overflow:auto; padding:110px var(--margin) 120px; opacity:0; transition:opacity .45s}
.listview[hidden]{display:block; visibility:hidden}
.listview.open{opacity:1; visibility:visible}
.lv-rows{list-style:none; margin:0; padding:0; counter-reset:row}
.lv-rows li{counter-increment:row}
.lv-rows a{display:grid; grid-template-columns:60px 1fr auto auto; gap:24px; align-items:baseline; padding:18px 0; border-top:1px solid rgba(255,255,255,.18); text-decoration:none;
  transition:padding .35s cubic-bezier(.2,.8,.2,1), color .25s}
.lv-rows a::before{content:counter(row, decimal-leading-zero); font-family:var(--cond); font-size:13px; letter-spacing:.06em}
.lv-rows a:hover{padding-left:14px; color:var(--beige)}
.lv-rows .t{font-weight:700; font-size:clamp(24px, 3vw, 44px); text-transform:uppercase; line-height:1}
.lv-rows .m{font-family:var(--cond); font-weight:500; font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.lv-preview{position:fixed; left:0; top:0; width:min(26vw, 360px); aspect-ratio:4 / 3; object-fit:cover; pointer-events:none; opacity:0; transition:opacity .25s; z-index:2}

/* studio: background turns white as it enters; portraits react to the pointer */
.world{position:relative; background:var(--black); color:var(--black); padding:22vh 0 6vh}
.world-head{padding:0 var(--margin); max-width:1200px}
.world-title{margin:18px 0 0; font-weight:700; font-size:clamp(30px, 4vw, 64px); line-height:1; text-transform:uppercase}
.world-bts{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; padding:16vh var(--margin) 0; align-items:end}
.world-bts p{margin:0; max-width:30em; font-size:clamp(16px, 1.25vw, 19px); line-height:1.45; justify-self:end}
.carousel{height:min(68vh, 600px); margin-top:5vh; overflow:hidden; cursor:grab; user-select:none; touch-action:pan-y}
.carousel.drag{cursor:grabbing}
.track{display:flex; gap:18px; height:100%; padding:0 var(--margin); will-change:transform}
.slide{flex:none; height:100%; aspect-ratio:429 / 565; overflow:hidden; background:#ddd; will-change:transform, opacity}
.slide img{width:100%; height:100%; object-fit:cover; pointer-events:none}
/* process: steps stick one below the other, so each new card slides over the last and they stack */
.process{position:relative; padding:16vh var(--margin) 0}
.process-over{display:block; margin-bottom:22px}
.step{position:sticky; top:calc(84px + var(--i) * 64px); display:grid; grid-template-columns:110px minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr) 160px;
  gap:24px; align-items:start; padding:18px 0 60px; background:var(--white); border-top:2px solid var(--black);
  /* every step ends at the same line once docked (top + height is equal for all), so 04 slides up
     until only the 01-03 strips show above it, then the whole stack scrolls away together */
  --last:max(40vh, 300px); min-height:calc(var(--last) + (3 - var(--i)) * 64px)}
.step:last-child{padding-bottom:24px}
.step-num{font-weight:700; font-size:clamp(34px, 3.6vw, 56px); line-height:.9}
.step-head h3{margin:0 0 10px; font-weight:700; font-size:clamp(34px, 3.6vw, 56px); line-height:.9; text-transform:uppercase}
.step ul{list-style:none; margin:4px 0 0; padding:0; font-weight:500; font-size:clamp(16px, 1.3vw, 20px); line-height:1.35; text-transform:uppercase}
.step p{margin:4px 0 0; max-width:24em; font-size:clamp(15px, 1.15vw, 18px); line-height:1.45}
.step-img{aspect-ratio:4 / 5; overflow:hidden; background:#eee}
.step-img img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){
  .step{grid-template-columns:70px 1fr; top:calc(70px + var(--i) * 52px); --last:max(56vh, 420px); min-height:calc(var(--last) + (3 - var(--i)) * 52px)}
  .step ul, .step p{grid-column:2}
  .step-img{grid-column:2; width:min(60%, 220px)}
}

/* footer with the stone */
.foot{position:relative; min-height:100svh; background:var(--black); color:var(--white); display:grid; place-items:center; overflow:hidden}
.stone{position:absolute; inset:0; width:100%; height:100%}
.foot-cta{position:relative; z-index:1; text-align:center; margin-top:44vh; display:grid; justify-items:center; gap:4px}
.foot-small{font-family:var(--cond); font-weight:500; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#c4c4c4; margin:10px 0}
.foot-cta h2{margin:0; font-weight:700; font-size:clamp(34px, 4.6vw, 72px); line-height:.95; text-transform:uppercase}
.foot-link{display:inline-block; margin-top:10px; font-weight:700; font-size:clamp(34px, 4.6vw, 72px); line-height:.95; text-transform:uppercase; text-underline-offset:8px; text-decoration-thickness:3px}
.foot-link:hover{color:var(--beige)}
.foot-bar{position:absolute; left:var(--margin); right:var(--margin); bottom:var(--margin); z-index:1; display:flex; justify-content:space-between; gap:20px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.25); font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase}

/* ---------- subpages: shared ---------- */
.page{background:var(--white)}
.page.loading main{opacity:0}
.page main{transition:opacity .5s}
.menu li a[aria-current="page"]{color:var(--beige)}
[data-rise]{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
[data-rise].in{opacity:1; transform:none}
.phero{position:relative; padding:22vh var(--margin) 8vh; background:var(--white); color:var(--black)}
.phero.dark{background:var(--black); color:var(--white)}
.phero-title{margin:14px 0 0; font-weight:700; font-size:clamp(84px, 17vw, 300px); line-height:.82; letter-spacing:-.02em; text-transform:uppercase}
.phero-row{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-top:5vh; padding-top:16px; border-top:2px solid currentColor}
.phero-row p{margin:0; max-width:30em; font-size:clamp(16px, 1.25vw, 19px); line-height:1.45}
.phero-row .over{white-space:nowrap}

/* journal: feature + rows */
.jfeat{padding:4vh var(--margin) 12vh; background:var(--white)}
.jfeat-card{display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:clamp(20px, 3vw, 48px); align-items:end; text-decoration:none}
.jfeat-media{position:relative; overflow:hidden; aspect-ratio:16 / 10; background:#eee}
.jfeat-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform}
.jfeat-text h2{margin:14px 0 18px; font-weight:700; font-size:clamp(36px, 4.4vw, 76px); line-height:.92; text-transform:uppercase}
.jfeat-text p{margin:0 0 26px; max-width:28em; font-size:clamp(15px, 1.15vw, 18px); line-height:1.45}
.jfeat-more{font-weight:700; font-size:15px; text-transform:uppercase; border-bottom:2px solid currentColor; padding-bottom:3px; transition:color .25s}
.jfeat-card:hover .jfeat-more{color:var(--grey)}
.jlist{padding:0 var(--margin) 18vh; background:var(--white)}
.jfilters{display:flex; gap:22px; padding-bottom:14px}
.jfilters button, .afilters button{font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase; opacity:.45; transition:opacity .2s}
.jfilters button[aria-pressed="true"], .afilters button[aria-pressed="true"], .jfilters button:hover, .afilters button:hover{opacity:1}
.jfilters sup, .afilters sup{font-size:9px; margin-left:1px}
.jrows{list-style:none; margin:0; padding:0; border-bottom:2px solid var(--black)}
.jrows li[hidden]{display:none}
.jrows a{display:grid; grid-template-columns:80px minmax(0, 1fr) 110px 120px 170px; gap:24px; align-items:baseline; padding:26px 0; border-top:2px solid var(--black); text-decoration:none;
  transition:padding .4s cubic-bezier(.2,.8,.2,1), background-color .3s, color .3s}
.jrows .n{font-weight:700; font-size:clamp(20px, 1.8vw, 28px)}
.jrows .t{font-weight:700; font-size:clamp(28px, 3.6vw, 60px); line-height:.95; text-transform:uppercase}
.jrows .m{font-family:var(--cond); font-weight:500; font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.jrows time{text-align:right}
.jrows a:hover{padding-left:18px; padding-right:18px; background:var(--black); color:var(--white)}
.jpreview{position:fixed; left:0; top:0; z-index:40; width:min(24vw, 340px); aspect-ratio:4 / 3; object-fit:cover; pointer-events:none; opacity:0; transition:opacity .25s}
@media (max-width:900px){
  .jfeat-card{grid-template-columns:1fr}
  .jrows a{grid-template-columns:44px 1fr; row-gap:8px}
  .jrows .m, .jrows time{grid-column:2; text-align:left}
  .phero-row{flex-direction:column; align-items:start}
}

/* post */
.post-hero{padding:20vh var(--margin) 8vh; background:var(--white)}
.post-back{display:inline-block; margin-bottom:5vh; text-decoration:none; opacity:.6; transition:opacity .2s}
.post-back:hover{opacity:1}
.post-hero > .over{display:block}
.post-hero > .post-meta{display:flex}
.post-title{margin:14px 0 0; max-width:14ch; font-weight:700; font-size:clamp(52px, 9vw, 160px); line-height:.86; letter-spacing:-.015em; text-transform:uppercase}
.post-meta{display:flex; gap:24px; margin-top:5vh; padding-top:14px; border-top:2px solid var(--black)}
.post-media{position:relative; overflow:hidden; height:min(90vh, 62vw); background:var(--black)}
.post-media img{width:100%; height:100%; object-fit:cover; will-change:transform}
.post-body{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:clamp(24px, 4vw, 80px); padding:12vh var(--margin) 16vh; background:var(--white)}
.post-sticky{position:sticky; top:100px}
.post-toc{list-style:none; margin:14px 0 0; padding:0; counter-reset:toc}
.post-toc li{counter-increment:toc; border-top:1px solid rgba(0,0,0,.15)}
.post-toc a{display:grid; grid-template-columns:34px 1fr; padding:10px 0; font-weight:500; font-size:15px; line-height:1.25; text-transform:uppercase; text-decoration:none; transition:padding .3s, color .2s}
.post-toc a::before{content:counter(toc, decimal-leading-zero); font-family:var(--cond); font-size:13px; letter-spacing:.06em; color:var(--grey)}
.post-toc a:hover{padding-left:8px}
.post-progress{width:2px; height:120px; margin-top:22px; background:rgba(0,0,0,.12)}
.post-progress i{display:block; width:100%; height:100%; background:var(--black); transform-origin:top; transform:scaleY(0)}
.post-text{max-width:720px; font-size:clamp(17px, 1.3vw, 20px); line-height:1.6}
.post-text > *:first-child{margin-top:0}
.post-text p{margin:0 0 1.1em}
.post-text h2{margin:2.2em 0 .6em; font-weight:700; font-size:clamp(28px, 2.6vw, 42px); line-height:1; text-transform:uppercase; scroll-margin-top:100px}
.post-text h3{margin:1.8em 0 .5em; font-weight:700; font-size:clamp(20px, 1.6vw, 26px); line-height:1.1; text-transform:uppercase}
.post-text ul, .post-text ol{margin:0 0 1.2em; padding-left:1.2em}
.post-text li{margin:.3em 0}
.post-text a{text-underline-offset:3px}
.post-text a:hover{color:var(--grey)}
.post-text code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; background:#f1eee9; padding:.1em .35em}
.post-text pre{margin:0 0 1.4em; padding:20px; overflow:auto; background:var(--black); color:#eae6df; font-size:14px; line-height:1.5}
.post-text pre code{background:none; padding:0; color:inherit}
.tbl{overflow:auto; margin:0 0 1.4em}
.post-text table{width:100%; border-collapse:collapse; font-size:15px}
.post-text th, .post-text td{text-align:left; padding:10px 12px 10px 0; border-top:1px solid rgba(0,0,0,.15); vertical-align:top}
.post-text th{font-family:var(--cond); font-weight:500; letter-spacing:.06em; text-transform:uppercase; border-top:2px solid var(--black)}
.pnext{background:var(--black); color:var(--white); padding:14vh var(--margin)}
.pnext-link{position:relative; display:grid; gap:18px; text-decoration:none}
.pnext-title{font-weight:700; font-size:clamp(52px, 9vw, 160px); line-height:.86; text-transform:uppercase; transition:color .3s}
.pnext-img{position:absolute; right:0; top:50%; width:min(30vw, 420px); aspect-ratio:4 / 3; overflow:hidden; transform:translateY(-50%) scale(.9); opacity:0; transition:opacity .4s, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.pnext-img img{width:100%; height:100%; object-fit:cover}
.pnext-link:hover .pnext-img{opacity:1; transform:translateY(-50%) scale(1)}
.pnext-link:hover .pnext-title{color:var(--beige)}
@media (max-width:900px){
  .post-body{grid-template-columns:1fr}
  .post-side{display:none}
}

/* archive */
.page-archive{background:var(--black)}
.arch{position:relative; background:var(--black); color:var(--white); padding:6vh var(--margin) 26vh; overflow:hidden}
.agrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 22px)}
.acol{display:grid; gap:clamp(28px, 3.4vw, 54px); align-content:start; will-change:transform}
.aitem{margin:0; cursor:zoom-in; will-change:opacity}
.aitem-media{position:relative; overflow:hidden; background:#151515 center / cover no-repeat}
.aitem-media img, .aitem-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s ease-out}
.aitem:hover .aitem-media img, .aitem:hover .aitem-media video{transform:scale(1.05)}
.aitem figcaption{display:flex; justify-content:space-between; padding-top:9px; font-family:var(--cond); font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#c4c4c4}
.aitem:focus-visible{outline:2px solid var(--white); outline-offset:4px}
@media (min-width:760px){ .agrid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (min-width:1180px){ .agrid{grid-template-columns:repeat(4, minmax(0, 1fr))} }
.afilters{position:fixed; left:50%; bottom:22px; z-index:58; display:flex; gap:20px; padding:13px 18px; background:var(--black); color:var(--white); border:1px solid rgba(255,255,255,.35);
  transform:translate(-50%, 160%); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.afilters.show{transform:translate(-50%, 0)}
.lbox{position:fixed; inset:0; z-index:70; background:var(--black); color:var(--white); display:grid; grid-template-rows:1fr auto;
  clip-path:circle(0 at var(--ox, 50%) var(--oy, 50%)); transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.lbox[hidden]{display:grid; visibility:hidden}
.lbox.open{clip-path:circle(150% at var(--ox, 50%) var(--oy, 50%)); visibility:visible}
.lbox-media{display:grid; place-items:center; min-height:0; padding:var(--margin) var(--margin) 0}
.lbox-media img, .lbox-media video{max-width:100%; max-height:calc(100svh - 110px); object-fit:contain}
.lbox-bar{display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 var(--margin) var(--margin); padding-top:14px; border-top:1px solid rgba(255,255,255,.25);
  font-family:var(--cond); font-weight:500; font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.lbox-btns{display:flex; gap:22px}
.lbox-btns button{font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.lbox-btns button:hover{color:var(--beige)}

/* home: journal section head */
.sec-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:9vh; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.25)}
.sec-head h2{margin:10px 0 0; font-weight:700; font-size:clamp(44px, 7vw, 120px); line-height:.85; text-transform:uppercase}
.sec-link{font-weight:700; font-size:15px; text-transform:uppercase; text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:3px; white-space:nowrap; transition:color .25s}
.sec-link:hover{color:var(--beige)}
.card-text{margin:10px 0 0; font-size:14px; line-height:1.45; color:#bdbdbd; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-archive .card-title::after{content:" ↗"}

@media (max-width:800px){
  .world-bts{grid-template-columns:1fr}
  .world-bts p{justify-self:start}
  .lv-rows a{grid-template-columns:40px 1fr; }
  .lv-rows .m{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  [data-split] .ln > span, .menu li a{transform:none; transition:none}
  [data-chars] .ch{opacity:1; transition:none}
  .pre-dot{animation:none}
}

/* legal notice */
.legal-meta{justify-content:flex-start; gap:clamp(18px, 4vw, 60px)}
.legal-meta a{text-decoration:none}
.legal-meta a:hover{color:var(--grey)}
.legal-sec{padding:0 0 2.4em; margin-bottom:2.4em; border-bottom:1px solid rgba(0,0,0,.15)}
.legal-sec:last-child{border-bottom:0; margin-bottom:0}
.legal-sec h2{margin-top:0}
.legal-sec ul{list-style:none; padding:0}
.legal-sec li{padding:6px 0; border-top:1px solid rgba(0,0,0,.08)}

/* ---------- touch, phone and tablet refinements ---------- */
.gl{height:100lvh}                                   /* no canvas resize while the mobile URL bar slides */
.hdr{padding-top:max(var(--margin), env(safe-area-inset-top)); padding-left:max(var(--margin), env(safe-area-inset-left)); padding-right:max(var(--margin), env(safe-area-inset-right))}
.menu{padding-bottom:max(var(--margin), env(safe-area-inset-bottom))}
.menu-meta{bottom:max(var(--margin), env(safe-area-inset-bottom))}
.foot-bar{bottom:max(var(--margin), env(safe-area-inset-bottom))}
.viewbtn{bottom:max(22px, env(safe-area-inset-bottom))}
.menu{overflow-y:auto}

/* hover-only effects must not stick after a tap */
@media (hover:none){
  .jrows a:hover{padding-left:0; padding-right:0; background:none; color:inherit}
  .lv-rows a:hover{padding-left:0; color:inherit}
  .card:hover .card-media img, .card:hover .card-media video,
  .aitem:hover .aitem-media img, .aitem:hover .aitem-media video{transform:none}
  .post-toc a:hover{padding-left:0}
  .pnext-link:hover .pnext-img{opacity:0; transform:translateY(-50%) scale(.9)}
}

/* tap targets of at least 44px on touch screens */
@media (pointer:coarse){
  .hdr-menu, .hdr-logo{min-height:44px; display:flex; align-items:center}
  .hdr-menu{padding:0 4px; margin-right:-4px}
  .sec-link, .post-back, .foot-bar a, .menu-meta a{display:inline-flex; align-items:center; min-height:44px}
  .foot-link{padding:6px 0}
  .jfilters button, .afilters button, .lbox-btns button{min-height:44px; padding:0 10px}
  .post-toc a{padding:14px 0}
}

/* phones and small tablets */
@media (max-width:900px){
  /* the header floats over light and dark sections alike: blend it so it stays readable */
  .hdr{mix-blend-mode:difference; color:#fff}
  .hdr-logo img, body[data-header="white"] .hdr-logo img{filter:none}
  .foot-bar{flex-wrap:wrap; row-gap:6px; justify-content:center; text-align:center}
  .foot-bar > span:first-child{order:3; flex-basis:100%}
  .foot-cta{margin-top:30vh; padding:0 var(--margin)}
  .post-hero{padding-top:18vh}
  .post-media{height:min(60vh, 90vw)}
  .viewbtn{padding:8px 10px; background:var(--black); color:var(--white); border:1px solid rgba(255,255,255,.35)}
  .lbox-bar{padding-bottom:max(12px, env(safe-area-inset-bottom))}
}
@media (max-width:480px){
  .menu li a{font-size:clamp(40px, 14vw, 64px)}
  .menu-meta{flex-direction:column; gap:4px}
  .post-text pre{margin-left:calc(var(--margin) * -1); margin-right:calc(var(--margin) * -1); padding:16px var(--margin)}
}
/* landscape phones: the full-height sections must not clip their content */
@media (max-height:480px) and (orientation:landscape){
  .menu{align-content:start; padding-top:72px}
  .menu li a{font-size:clamp(32px, 8vh, 56px)}
  .menu-meta{position:static; margin-top:20px}
  .foot{min-height:auto; padding:80px 0 90px}
  .foot-cta{margin-top:0}
}

/* ---------- fonts, self-hosted (latin subset; Jost as a variable font) ---------- */
@font-face{font-family:"Jost"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/jost-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}