/* comeonin.online — Layout A (Atelier), per Stefan 2026-10-18:
   dark walnut-brown with bone lettering for photo pages; text pages reversed;
   Helvetica Neue throughout; links as bone fields with walnut lettering, bold. */
:root{
  --walnut:#271b12; --walnut-2:#321f14; --walnut-ink:#1f150e;
  --bone:#ebe3d3; --bone-2:#e2d8c5; --bone-soft:#c2b7a4; --bone-mute:#8f826f;
  --brown-mute:#6b5a48;
  --line:rgba(235,227,211,.16); --line-dark:rgba(31,21,14,.16);
  --font:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --bar:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;background:var(--walnut);color:var(--bone)}
body.text-page{background:var(--bone);color:var(--walnut-ink)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
.nw{white-space:nowrap}

/* ---------- toolbar + menu (every page) ---------- */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  height:var(--bar);padding:0 20px;background:rgba(39,27,18,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);color:var(--bone)}
.bar .name{font-size:13px;font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.burger{width:44px;height:44px;margin-right:-10px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  align-items:center;background:none;border:0;cursor:pointer}
.burger i{display:block;width:24px;height:1.5px;background:var(--bone);transition:transform .2s,opacity .2s}
.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;inset:var(--bar) 0 0 0;z-index:29;background:var(--walnut);color:var(--bone);
  padding:20px 20px 40px;overflow-y:auto;display:none}
.menu-open .menu{display:grid;gap:10px;align-content:start}
.menu a,.menu .soon{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;font-size:19px;line-height:1.2}
.menu a{background:var(--bone);color:var(--walnut-ink);font-weight:700}
.menu small{font-size:12px;font-weight:500;letter-spacing:.2em;color:#6b5a48;text-transform:uppercase}
.menu .soon{border:1px dashed var(--line);color:var(--bone-mute)}
.menu .soon small{color:var(--bone-mute)}
.menu a[aria-current]{box-shadow:inset 5px 0 0 var(--walnut-ink)}
.menu .foot{margin-top:24px;font-size:14px;color:var(--bone-soft)}

/* ---------- shared pieces ---------- */
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-soft)}
.text-page .eyebrow{color:var(--brown-mute)}
.fields{display:grid;gap:10px}
.field{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 16px 15px 18px;
  background:var(--bone);color:var(--walnut-ink);font-size:17px;font-weight:700;line-height:1.25;
  transition:transform .18s ease,box-shadow .18s ease}
.field::after{content:"";position:absolute;inset:4px;border:1px solid rgba(31,21,14,.2);pointer-events:none}  /* an inlaid line, like stringing on a table top */
.field .arrow{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border:1.5px solid currentColor;border-radius:50%;
  font-weight:400;font-size:15px;line-height:1;transition:transform .18s ease,background-color .18s ease,color .18s ease}
.field:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.field:hover .arrow{transform:translateX(3px);background:var(--walnut-ink);color:var(--bone)}
.field:active{transform:scale(.99);box-shadow:none}
.text-page .field{background:var(--walnut);color:var(--bone)}
.text-page .field::after{border-color:rgba(235,227,211,.22)}
.text-page .field:hover .arrow{background:var(--bone);color:var(--walnut-ink)}
/* rich buttons: a picture or monogram, a title, one line beneath */
.field.rich{justify-content:flex-start;gap:14px;padding:9px 14px 9px 9px}
.field.rich img,.field.rich .mono{flex:none;width:60px;height:60px;object-fit:cover}
.field.rich .mono{display:grid;place-items:center;background:var(--walnut);color:var(--bone);font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1.05;text-align:center}
.text-page .field.rich .mono{background:var(--bone);color:var(--walnut-ink)}
.field.rich .t{flex:1;min-width:0;display:grid;gap:3px}
.field.rich .t small{font-size:14px;font-weight:400;line-height:1.35;opacity:.78}
.field.rich .arrow{margin-left:auto}
/* forms */
.form{display:grid;gap:14px;margin-top:22px}
.form label{display:grid;gap:6px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brown-mute)}
.form input,.form textarea{font:400 16px/1.4 var(--font);color:var(--walnut-ink);background:#f1eadd;border:1px solid rgba(31,21,14,.3);padding:12px 13px;border-radius:0;width:100%}
.form textarea{min-height:110px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--walnut);outline-offset:1px}
.form button.field{width:100%;border:0;cursor:pointer;font-family:var(--font);text-align:left}
.hp{position:absolute;left:-9999px}
.facts{border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:112px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute);padding-top:3px}
.facts dd{font-size:15.5px;line-height:1.45}
.text-page .facts,.text-page .facts div{border-color:var(--line-dark)}
.text-page .facts dt{color:var(--brown-mute)}
footer{margin-top:56px;padding:24px 20px 40px;border-top:1px solid var(--line);font-size:13px;
  color:var(--bone-mute);display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.text-page footer{border-color:var(--line-dark);color:var(--brown-mute)}

/* ---------- home ---------- */
.home .hero{background:var(--walnut-ink)}
.home .hero img{aspect-ratio:12/7;object-fit:cover;object-position:60% 40%}
.home .ident{padding:26px 20px 0}
.home h1{font-size:44px;font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:10px 0 12px}
.home .tag{font-size:18px;line-height:1.45}
.home .tag span{color:var(--bone-soft)}
.home .intro{margin:26px 20px 0;padding-top:26px;border-top:1px solid var(--line)}
.home .welcome p{font-size:18px;line-height:1.55}
.home .welcome p+p{margin-top:12px}
.home .intro .fields{margin-top:28px}
.teaser .nature{margin:0 -20px 30px;background:var(--walnut-ink)}
.teaser .nature img{aspect-ratio:4/3;object-fit:cover;object-position:30% 50%}
.idols .eyebrow.second{margin-top:20px}
.band{padding:44px 20px 0}
.band-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.band-head .more{padding:9px 13px;background:var(--bone);color:var(--walnut-ink);font-size:14px;font-weight:700}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.tile{flex:0 0 72%;scroll-snap-align:start}
.tile .ph{aspect-ratio:4/5;overflow:hidden;background:var(--walnut-ink)}
.tile .ph img{height:100%;object-fit:cover}
.tile p{padding-top:10px;font-size:17px;line-height:1.25}
.tile .num{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--bone-mute);margin-right:8px}
.tile .cat{display:block;margin-top:3px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute)}
.hint{margin-top:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute)}
.teaser .voice{margin:16px 0 26px;font-size:26px;font-weight:400;line-height:1.3}
.teaser .fields{margin-top:24px}
.idea h2{font-size:40px;font-weight:400;line-height:1.05;margin:12px 0 14px}
.idea .big{font-size:19px;line-height:1.5;color:var(--bone)}
.future{margin-top:30px;padding:22px 20px;background:var(--walnut-2);border:1px solid var(--line)}
.future p:not(.eyebrow){margin-top:10px;color:var(--bone-soft);font-size:16px}
.idea .fields{margin-top:24px}

/* ---------- text pages: who + grgr ---------- */
.prose{max-width:680px;padding:34px 20px 0}
.prose h1{font-size:40px;font-weight:400;line-height:1.05;margin:10px 0 18px}
.prose h2{font-size:24px;font-weight:500;line-height:1.2;margin:40px 0 14px}
.prose p{font-size:18px;line-height:1.62}
.prose .eyebrow{font-size:12px;line-height:1.4}   /* keep eyebrows small inside text (`.prose p` would win) */
.prose p+p{margin-top:16px}
.prose .lead{font-size:22px;line-height:1.45;font-weight:400}
.prose .pull{margin:26px 0;padding:2px 0 2px 18px;border-left:3px solid var(--walnut);font-size:22px;line-height:1.4;font-weight:500}
.prose .note{font-size:16px;color:var(--brown-mute)}

.prose .fields{margin-top:22px}
.prose .fields.end{margin-top:44px}
.ch{display:flex;align-items:baseline;gap:14px}
.ch span{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--brown-mute);min-width:24px}

.story .side{padding:0 20px}
.portrait{margin:0 -20px 0;background:var(--walnut-ink)}
.portrait img{aspect-ratio:12/7;object-fit:cover;object-position:60% 40%}
.story .side .facts{margin-top:26px}

.idols{margin:30px 0 4px;padding:22px 20px;background:var(--bone-2)}
.idols ol{list-style:none;margin-top:8px}
.idols li{padding:12px 0;border-bottom:1px solid var(--line-dark)}
.idols li:last-child{border-bottom:0}
.idols b{display:block;font-size:22px;font-weight:400;line-height:1.2}
.idols span{display:block;margin-top:2px;font-size:14px;color:var(--brown-mute)}

.respect{margin:40px -20px 0;padding:30px 20px 32px;background:var(--walnut);color:var(--bone)}
.respect .ch{margin-top:0}
.respect .ch span{color:var(--bone-mute)}
.respect .slogan{font-size:28px;font-weight:400;line-height:1.25;margin-bottom:14px}
.respect p:not(.slogan){color:var(--bone-soft)}
.respect .field{margin-top:22px;background:var(--bone);color:var(--walnut-ink)}

.slogan-band{padding:40px 20px 36px;background:var(--walnut);color:var(--bone)}
.slogan-band .eyebrow{color:var(--bone-soft)}
.slogan-band h1{font-size:48px;font-weight:400;line-height:1.02;margin:12px 0 14px}
.slogan-band .big{font-size:20px;color:var(--bone-soft)}
.grgr-page .prose{padding-top:30px}
.question{margin:34px 0 0;padding:26px 20px;background:var(--walnut);color:var(--bone)}
.question .eyebrow{color:var(--bone-soft)}
.question .q{margin:10px 0 20px;font-size:30px;font-weight:400;line-height:1.2}
.question .field{background:var(--bone);color:var(--walnut-ink)}

/* ---------- work index ---------- */
.head{padding:32px 20px 22px}
.head h1{font-size:40px;font-weight:400;line-height:1.05;margin:10px 0 10px}
.head p{color:var(--bone-soft)}
.grid{display:grid;gap:28px;padding:6px 20px 0}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--walnut-ink)}
.card .ph img{height:100%;object-fit:cover}
.card .cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.card h2{font-size:21px;font-weight:400;line-height:1.2}
.card .num{font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--bone-mute);margin-right:10px}
.card .cat{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute);white-space:nowrap}
.bignote{margin:34px 20px 0;padding:18px;border:1px dashed var(--line);color:var(--bone-soft);font-size:15px;line-height:1.5}
.bignote b{color:var(--bone)}
.note-field{margin:10px 20px 0}

/* ---------- project ---------- */
.p-title{padding:30px 20px 20px}
.p-title h1{font-size:38px;font-weight:400;line-height:1.05;margin:10px 0 0}
.photos{display:grid;gap:14px;padding:0 20px}
.photos figure{background:var(--walnut-ink)}
.photos figcaption{padding:8px 0 0;font-size:13px;color:var(--bone-mute);background:var(--walnut)}
.p-note{margin:26px 20px 0;color:var(--bone-soft);font-size:15px}
.pager{display:grid;gap:10px;margin:36px 20px 0}
.pager .field small{display:block;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:4px}

/* ---------- 404 ---------- */
.lost{padding:60px 20px 0;max-width:560px}
.lost h1{font-size:40px;font-weight:400;margin:10px 0 14px}
.lost .fields{margin-top:28px}

/* ---------- computer ---------- */
@media (min-width:900px){
  :root{--bar:68px;--edge:max(48px, calc((100vw - 1184px) / 2))}   /* one left edge for every block */
  .bar{padding:0 var(--edge)}
  .menu{inset:var(--bar) 0 0 auto;width:440px;border-left:1px solid var(--line);padding:30px 40px}
  footer{padding:26px var(--edge) 40px}

  /* computer: his words and the whole beach photo side by side, nothing written over the photo (Stefan, 10/19) */
  .home .top{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);grid-template-rows:auto auto;column-gap:56px;
    align-items:center;padding:56px 0 0 var(--edge);min-height:calc(100vh - var(--bar))}
  .home .hero{grid-column:2;grid-row:1/3;align-self:center;background:none}
  .home .hero img{aspect-ratio:2400/1847;object-fit:cover;object-position:50% 50%;width:100%;height:auto}
  .home .ident{grid-column:1;grid-row:1;align-self:end;padding:0}
  .home h1{font-size:clamp(46px,4.3vw,72px);white-space:nowrap}
  .home .intro{grid-column:1;grid-row:2;align-self:start;margin:28px 0 0;padding:28px 0 0;border-top:1px solid var(--line)}
  .home .intro .fields{margin-top:28px}
  .home .tag{font-size:20px}
  .home .welcome p{font-size:19px}
  .band{padding:88px var(--edge) 0}
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 24px;margin:0;padding:0;overflow:visible}
  .tile .ph{aspect-ratio:4/3}
  .hint{display:none}
  .teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:12px 64px;align-items:start}
  .teaser .nature{display:none}
  .teaser .eyebrow{grid-column:1/-1}
  .teaser .voice{margin:6px 0 0;font-size:38px}
  .teaser .facts{grid-column:2;grid-row:2}
  .teaser .fields{grid-column:1;grid-row:3;margin-top:8px;max-width:420px}
  .idea{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
  .idea .eyebrow:first-child{grid-column:1/-1}
  .idea h2{font-size:64px;grid-column:1}
  .idea .big{grid-column:1;font-size:21px}
  .future{grid-column:2;grid-row:2/4;margin-top:12px;padding:30px}
  .idea .fields{grid-column:1/-1;grid-template-columns:1fr 1fr;margin-top:40px}

  .prose{padding:64px 48px 0;margin:0 auto}
  .prose h1{font-size:56px}
  .story{display:grid;grid-template-columns:380px minmax(0,680px);gap:72px;justify-content:space-between;padding:0 var(--edge)}
  .story .side{position:sticky;top:calc(var(--bar) + 40px);align-self:start;padding:64px 0 0}
  .portrait{margin:0}
  .portrait img{aspect-ratio:4/5;object-position:72% 40%}
  .story .prose{padding:64px 0 0;margin:0}
  .respect{margin:44px -40px 0;padding:40px}
  .idols{padding:26px 28px}

  .slogan-band{padding:80px 48px 64px}
  .slogan-band > *{max-width:584px;margin-left:auto;margin-right:auto}
  .slogan-band h1{font-size:84px;margin:12px auto 14px}
  .slogan-band .big{font-size:24px}
  .grgr-page .prose{padding-top:48px}
  .question{padding:34px}
  .question .q{font-size:40px}

  .head{padding:56px var(--edge) 28px}.head h1{font-size:60px}
  .grid{grid-template-columns:repeat(2,1fr);gap:40px 28px;padding:10px var(--edge) 0}
  .bignote,.note-field{display:none}

  .p-title{padding:56px var(--edge) 28px}.p-title h1{font-size:58px}
  .photos{padding:0 var(--edge);gap:22px}
  .p-note{margin:30px var(--edge) 0}
  .pager{grid-template-columns:1fr 1fr;margin:44px var(--edge) 0}
  .lost{padding:96px var(--edge) 0}
}
@media (min-width:1300px){
  .grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- home: tree teaser ---------- */
.tree-card{display:block;border:1px solid var(--line);background:var(--walnut-2)}
.tree-card .ph{aspect-ratio:16/9;overflow:hidden}
.tree-card .ph img{height:100%;object-fit:cover}
.tree-card .txt{padding:20px}
.tree-card h2{font-size:32px;font-weight:400;line-height:1.1;margin:8px 0 8px}
.tree-card p:not(.eyebrow){color:var(--bone-soft)}
.tree-card .go{display:inline-block;margin-top:16px;padding:12px 16px;background:var(--bone);color:var(--walnut-ink);font-weight:700}

/* ---------- the Tree (a separate room) ---------- */
.tree-page{background:var(--walnut)}
.tree-bar{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;height:52px;padding:0 20px;
  background:rgba(39,27,18,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;letter-spacing:.08em;color:var(--bone-soft)}
.tree-bar span{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.tree-hero .art{position:relative}
.tree-hero img{aspect-ratio:16/9;object-fit:cover}
.spot{position:absolute;transform:translate(-50%,-50%);padding:5px 9px;border-radius:999px;background:rgba(235,227,211,.92);color:var(--walnut-ink);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.spot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--walnut);margin-right:6px;vertical-align:1px}
.s-canopy{left:50%;top:9%}.s-branches{left:19%;top:36%}.s-trunk{left:50%;top:57%}.s-roots{left:50%;top:88%}
.illu{position:absolute;right:10px;bottom:8px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(235,227,211,.7)}
.tree-intro{padding:34px 20px 8px;max-width:680px}
.tree-intro h1{font-size:40px;font-weight:400;line-height:1.05;margin:10px 0 20px}
.legend{list-style:none;border-top:1px solid var(--line);margin-bottom:24px}
.legend li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--bone-soft)}
.legend b{display:inline-block;min-width:96px;color:var(--bone);font-weight:700}
.level{position:relative;overflow:hidden;margin-top:44px;border-top:1px solid var(--line)}
.level::before{content:"";position:absolute;inset:0;background:url(../img/tree.jpg) no-repeat;background-size:auto 240%;opacity:.3}
.level::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(39,27,18,.55),rgba(39,27,18,.92))}
.l-roots::before{background-position:50% 100%}
.l-trunk::before{background-position:50% 64%}
.l-branches::before{background-position:22% 30%}
.l-canopy::before{background-position:50% 0%}
.level .in{position:relative;z-index:1;padding:40px 20px 44px;max-width:680px}
.level h2{font-size:34px;font-weight:400;line-height:1.08;margin:10px 0 20px}
.level .sub{font-size:19px;color:var(--bone-soft)}
.level .line{margin-top:18px;padding-left:16px;border-left:3px solid var(--bone);font-size:21px;line-height:1.4;font-weight:500}
.level .fields{margin-top:24px}
.leaves{list-style:none;display:grid;gap:10px}
.leaf details{border:1px solid rgba(235,227,211,.32);background:rgba(39,27,18,.6)}
.leaf summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 16px}
.leaf summary::-webkit-details-marker{display:none}
.leaf summary b{font-size:18px;font-weight:500}
.leaf summary i{font-style:normal;font-size:22px;font-weight:400;line-height:1;transition:transform .2s}
.leaf details[open] summary i{transform:rotate(45deg)}
.leaf details > p{padding:0 16px 14px;color:var(--bone-soft);font-size:16px}
.leaf .when{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.leaf .when a{padding:8px 12px;background:var(--bone);color:var(--walnut-ink);font-weight:700}
.chip{display:inline-block;padding:4px 8px;border:1px solid rgba(235,227,211,.4);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.leaf.soon summary b::after{content:"Soon";margin-left:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-mute);vertical-align:2px}
.tree-page footer{margin-top:0;background:var(--walnut)}

@media (min-width:900px){
  .tree-card{display:grid;grid-template-columns:1.4fr 1fr;align-items:center}
  .tree-card .ph{aspect-ratio:auto;height:100%}
  .tree-card .txt{padding:40px}
  .tree-card h2{font-size:48px}
  .tree-bar{padding:0 var(--edge);height:60px}
  .tree-hero img{aspect-ratio:auto;height:calc(100vh - 60px);max-height:900px;object-fit:cover}
  .spot{font-size:12px;padding:7px 12px}
  .tree-intro,.level .in{margin:0 auto;padding-left:0;padding-right:0}
  .tree-intro{padding-top:64px}
  .tree-intro h1{font-size:60px}
  .level .in{padding:72px 0 76px}
  .level h2{font-size:48px}
  .leaves{grid-template-columns:1fr 1fr}
}

/* ---------- work: three rooms and the project viewer (his Wix layout, his colours) ---------- */
.catnav{margin-top:22px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.catnav .field{padding:12px 12px 12px 14px;font-size:15px}
.catnav .field .arrow{width:26px;height:26px;font-size:13px}
.room{padding:46px 20px 0}
.room-title{padding-top:14px;border-top:1px solid var(--line);font-size:14px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-soft)}
.project{margin-top:30px;scroll-margin-top:calc(var(--bar) + 12px)}
.room{scroll-margin-top:var(--bar)}
.p-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.p-head h3{font-size:16px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.p-head .num{font-size:12px;letter-spacing:.12em;color:var(--bone-mute);margin-right:10px}
.p-head .go{flex:none;padding:8px 11px;background:var(--bone);color:var(--walnut-ink);font-size:13px;font-weight:700}
.viewer{margin-top:12px}
.stage{position:relative;background:#1f150e}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slides:focus-visible{box-shadow:inset 0 0 0 2px var(--bone)}
.slide{flex:0 0 100%;margin:0;scroll-snap-align:center;aspect-ratio:var(--ar,1)}
.slide .zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.slide img{width:100%;height:100%;object-fit:contain}
.stage .nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:0;background:var(--bone);color:var(--walnut-ink);font:700 18px/1 var(--font);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.stage .nav.prev{left:8px}.stage .nav.next{right:8px}
.nav:disabled{opacity:.25;cursor:default}
.count{position:absolute;right:10px;bottom:10px;padding:6px 9px;background:rgba(31,21,14,.82);color:var(--bone);font-size:12px;font-weight:500;letter-spacing:.14em}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb{flex:0 0 62px;height:62px;padding:0;border:0;background:var(--walnut-ink);cursor:pointer;opacity:.55;outline:2px solid transparent;outline-offset:2px;transition:opacity .15s,outline-color .15s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.on{opacity:1;outline-color:var(--bone)}
.viewer.single .nav,.viewer.single .thumbs,.viewer.single .count{display:none}
.p-view{padding:0 20px}
.work .bignote{margin-top:22px}
@media (max-width:899px){.catnav .field{justify-content:center;text-align:center;padding:12px 6px;font-size:14px}.catnav .field .arrow{display:none}}

/* full screen */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(22,15,9,.97);color:var(--bone)}
.lightbox::backdrop{background:rgba(0,0,0,.7)}
.lightbox img{position:absolute;left:12px;right:12px;top:58px;bottom:52px;width:calc(100% - 24px);height:calc(100% - 110px);object-fit:contain}
.lb-close{position:absolute;top:6px;right:8px;width:48px;height:48px;border:0;background:none;color:var(--bone);font:300 34px/1 var(--font);cursor:pointer}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--bone);color:var(--walnut-ink);font:700 18px/1 var(--font);cursor:pointer}
.lightbox .nav.prev{left:12px}.lightbox .nav.next{right:12px}
.lightbox .count{right:auto;left:50%;transform:translateX(-50%);bottom:14px}
.lb-open,.lb-open body{overflow:hidden}

@media (min-width:900px){
  .room{padding:72px var(--edge) 0}
  .project{margin-top:44px}
  .p-head h3{font-size:18px}
  .slide{aspect-ratio:auto;height:min(62vh,580px)}
  .stage .nav{width:44px;height:44px}
  .stage .nav.prev{left:12px}.stage .nav.next{right:12px}
  .thumb{flex-basis:84px;height:84px}
  .catnav{max-width:720px}
  .p-view{padding:0 var(--edge)}
  .p-view .slide{height:min(72vh,740px)}
  .lightbox img{left:80px;right:80px;width:calc(100% - 160px);top:40px;bottom:56px;height:calc(100% - 96px)}
  .lightbox .nav.prev{left:20px}.lightbox .nav.next{right:20px}
}

/* ---------- home: the Tree, in marquetry (js/marquetry.js) ----------
   One section of the page: the panel holds still while the words beside it come and go. Without JavaScript the words stack. */
.tree-sec{margin-top:56px;scroll-margin-top:var(--bar)}
.tree-sticky{padding:0 20px}
.panel{display:none}
.words .marks{display:none}
.step{padding:22px 0;border-top:1px solid var(--line)}
.step h3{font-size:26px;font-weight:400;line-height:1.18;margin:8px 0 10px}
.step p:not(.eyebrow){font-size:17px;line-height:1.5;color:var(--bone-soft)}
.step p+p{margin-top:8px}
.step .q{color:var(--bone)!important;font-weight:500}
.step .hint-s{font-size:12px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-mute)!important}
.step .field,.step .fields{margin-top:16px}

.tree-js .tree-sec{height:calc(7 * 78vh + 100vh);height:calc(7 * 78svh + 100svh)}
.tree-js .tree-sticky{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));
  display:flex;flex-direction:column;padding:10px 12px 0;overflow:hidden}
.tree-js .panel{display:block;position:relative;flex:0 0 52%;background:#6a4429;
  box-shadow:0 0 0 1px rgba(235,227,211,.5),0 0 0 5px var(--walnut),0 0 0 6px rgba(235,227,211,.18)}   /* set into the page like a table top: a bone stringing line */
.tree-js .panel canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.tree-js .words{position:relative;flex:1;padding:16px 8px 0;min-height:0}
.tree-js .words .marks{display:flex;gap:12px;list-style:none;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-mute)}
.tree-js .marks li{transition:color .3s}
.tree-js .marks li.on{color:var(--bone)}
.tree-js .step{position:absolute;left:8px;right:8px;top:40px;padding:0;border:0;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}
.tree-js .step.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .2s,transform .45s ease .2s}
.tree-js .step h3{font-size:22px;margin:6px 0 8px}
.tree-js .step p:not(.eyebrow){font-size:15.5px}
.tree-js .step .field{padding:11px 14px;font-size:15px}
.tree-js .step .fields{gap:8px}

.tags{position:absolute;inset:0;pointer-events:none}
.tt{position:absolute;left:0;top:0;pointer-events:none;opacity:0;cursor:pointer;white-space:nowrap;border:0;
  padding:4px 7px;background:rgba(235,227,211,.94);color:var(--walnut-ink);font:700 10.5px/1.1 var(--font);letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(20,10,4,.35);transition:opacity .35s}
.tt.on{opacity:1;pointer-events:auto}
.tt-root{background:rgba(31,21,14,.82);color:var(--bone);font-weight:500;font-size:10px;padding:3px 6px;box-shadow:none}
.tt-crown{padding:7px 11px;font-size:11.5px;background:var(--bone);box-shadow:0 0 0 1px #d6b062,0 6px 18px rgba(20,10,4,.4)}
.tt-knot{background:transparent;box-shadow:none;border-radius:50%;padding:0}
.tt:focus-visible{outline:2px solid #d6b062;outline-offset:2px}
.tt{transition:opacity .35s,background-color .35s,color .35s,box-shadow .35s}
.tt.lit{background:var(--bone);color:var(--walnut-ink);box-shadow:0 0 0 1px #d6b062,0 0 22px rgba(214,176,98,.55)}   /* the name of the root or branch that is growing now */
.tip{position:absolute;left:0;top:0;margin:0;padding:6px 10px;background:var(--bone);color:var(--walnut-ink);font:700 13px/1.2 var(--font);
  white-space:nowrap;box-shadow:0 0 0 1px #d6b062,0 6px 18px rgba(20,10,4,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.tip.on{opacity:1}

.tree-sheet{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;max-width:460px;margin:0 auto;padding:22px 20px 20px;
  background:var(--bone);color:var(--walnut-ink);box-shadow:0 0 0 1px rgba(31,21,14,.2),0 22px 60px rgba(10,5,2,.55);
  transform:translateY(130%);transition:transform .3s ease}
.tree-sheet.open{transform:none}
.tree-sheet .x{position:absolute;top:4px;right:6px;width:44px;height:44px;border:0;background:none;color:var(--walnut-ink);font:300 30px/1 var(--font);cursor:pointer}
.tree-sheet .k{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--brown-mute)}
.tree-sheet h3{font-size:28px;font-weight:400;line-height:1.15;margin:6px 34px 8px 0}
.tree-sheet .t{font-size:16px;line-height:1.5}
.tree-sheet .topics{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tree-sheet .topics li{padding:5px 9px;border:1px solid rgba(31,21,14,.28);font-size:13.5px}
.tree-sheet .soon{margin-top:14px}
.tree-sheet .chip{border-color:rgba(31,21,14,.35);color:var(--walnut-ink)}
.tree-sheet .field{margin-top:14px;background:var(--walnut);color:var(--bone)}
.tree-sheet .field::after{border-color:rgba(235,227,211,.22)}
.tree-sheet .field:hover .arrow{background:var(--bone);color:var(--walnut-ink)}

@media (min-width:900px){
  .tree-sec{margin-top:96px}
  .tree-sticky{padding:0 var(--edge)}
  .tree-js .tree-sec{height:calc(7 * 85vh + 100vh)}
  .tree-js .tree-sticky{flex-direction:row;align-items:stretch;gap:56px;padding:28px var(--edge) 32px}
  .tree-js .panel{flex:1.5 1 0}
  .tree-js .words{flex:1 1 0;max-width:440px;align-self:center;height:min(520px,80%);padding:0}
  .tree-js .step{left:0;right:0;top:52px}
  .tree-js .step h3{font-size:36px;line-height:1.12;margin:10px 0 14px}
  .tree-js .step p:not(.eyebrow){font-size:19px}
  .tree-js .step .field{padding:14px 16px;font-size:16px}
  .tt{font-size:11.5px;padding:5px 9px}
  .tt-root{font-size:10.5px;padding:4px 7px}
  .tt-crown{font-size:13px;padding:8px 13px}
  .tree-sheet{left:auto;right:32px;bottom:32px;width:420px}
}
/* the natural Tree (js/natural.js): one square photograph, so the panel is square */
html.tree-natural .panel{flex:0 0 auto;width:min(100%, 56svh);aspect-ratio:1/1;margin:0 auto;background:#4a2c1b}
@media (min-width:900px){
  html.tree-natural .panel{flex:0 0 auto;height:100%;width:auto;max-width:62%;margin:0}
}
/* version 9 (js/grow.js): shorter chapters, the page settles on each one, a Next button, clickable chapter names */
html.tree-grow{scroll-snap-type:y proximity}
html.tree-grow .tree-sec{position:relative;height:calc(7 * 60vh + 100vh);height:calc(7 * 60svh + 100svh)}
.snaps{position:absolute;left:0;top:0;width:1px;height:100%;pointer-events:none}
.snapm{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-margin-top:var(--bar)}
.tree-next{display:none}
html.tree-grow .tree-next{position:absolute;left:8px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:2;display:inline-flex;align-items:center;gap:10px;
  padding:11px 16px;border:1px solid rgba(235,227,211,.45);background:transparent;color:var(--bone);font:700 12.5px/1 var(--font);
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
html.tree-grow .tree-next span{display:inline-block;font-size:15px;letter-spacing:0}
html.tree-grow .tree-next:hover,html.tree-grow .tree-next.nudge{background:var(--bone);color:var(--walnut-ink);border-color:var(--bone)}
html.tree-grow .tree-next.nudge span{animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-1px)}50%{transform:translateY(4px)}}
html.tree-grow .marks li{cursor:pointer}
html.tree-grow .marks li:hover{color:var(--bone)}
@media (min-width:900px){
  html.tree-grow .tree-sec{height:calc(7 * 66vh + 100vh)}
  html.tree-grow .tree-next{left:0;bottom:0}
}
@media (prefers-reduced-motion:reduce){.tree-js .step,.tree-js .step.on,.tree-sheet{transition:none}html.tree-grow .tree-next.nudge span{animation:none}}

/* ---------- version 11 (js/tree11.js): three renderers, shared medallion and baked glow ---------- */
html.tree11 .panel{aspect-ratio:1/1;overflow:hidden;background:#5a3826}
.stage11,.glow11{position:absolute;inset:0;pointer-events:none}
.stage11 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage11 .poster{transition:opacity .4s}
.tree11-fade .stage11 img{transition:none;will-change:opacity}
.glow11{opacity:0;will-change:opacity}
.glow11 img{position:absolute;inset:0;width:100%;height:100%;animation:breathe11 3.6s ease-in-out infinite}
.glow11 .g1{animation-delay:-1.8s}
@keyframes breathe11{0%,100%{opacity:.35}50%{opacity:1}}
.med11{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.med11 img{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(14,7,2,.5))}
.med11::before{content:"";position:absolute;inset:-120%;border-radius:50%;opacity:var(--halo,0);
  background:radial-gradient(circle,rgba(255,214,130,.55) 0%,rgba(255,214,130,.18) 35%,rgba(255,214,130,0) 62%)}
.med11.waiting::before{animation:halo11 3s ease-in-out infinite}
@keyframes halo11{0%,100%{opacity:.55}50%{opacity:1}}
.tt-knot{border-radius:50%}
@media (prefers-reduced-motion:reduce){.glow11 img,.med11.waiting::before{animation:none}}

/* D · deep time: the panel's world zooms; the era lines are brass rules on the board, their words kept the same size */
.world11{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.world11 > canvas{position:absolute;inset:0;width:100%;height:100%}
.eras11{position:absolute;inset:0;pointer-events:none}
.era11{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(214,176,98,.55);opacity:0;transition:opacity .6s ease}
.era11.on{opacity:1}
.era11 button{position:absolute;left:calc(var(--vx,0%) + 1.2%);bottom:2px;transform:scale(var(--inv,1));transform-origin:0 100%;pointer-events:auto;border:0;cursor:pointer;
  background:rgba(31,21,14,.78);color:var(--bone);padding:4px 8px;font:500 10.5px/1.25 var(--font);letter-spacing:.14em;text-transform:uppercase;text-align:left;white-space:nowrap}
.era11 button b{display:block;font-weight:700;letter-spacing:.06em;text-transform:none;font-size:12.5px;color:#f0d79a}
.era11:not(.on) button{pointer-events:none}

/* version 13: ten chapters; one time line at a time */
html.tree13 .tree-sec{height:calc(10 * 55vh + 100vh);height:calc(10 * 55svh + 100svh)}
@media (min-width:900px){html.tree13 .tree-sec{height:calc(10 * 60vh + 100vh)}}
html.tree13 .era11.on:not(.now){opacity:.32}
html.tree13 .era11.now button b{color:#f6dfa3}

/* version 14: still panel; a soft light rests on each chapter's part (transform + opacity only) */
html.tree14 .tree-sec{height:calc(11 * 50vh + 100vh);height:calc(11 * 50svh + 100svh)}
@media (min-width:900px){html.tree14 .tree-sec{height:calc(11 * 55vh + 100vh)}}
.tree14-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.light14{position:absolute;left:0;top:0;width:4000px;height:4000px;transform-origin:0 0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(14,7,2,0) 0,rgba(14,7,2,0) 5%,rgba(14,7,2,.5) 8.5%,rgba(14,7,2,.5) 100%);
  transition:transform 1.1s cubic-bezier(.4,0,.2,1),opacity .9s ease;will-change:transform,opacity}
html.tree14 .tree-sticky .panel{overflow:hidden}
html.tree14 .glow11{transition:opacity .9s ease}
@media (prefers-reduced-motion:reduce){.light14{transition:none}}
.illu14{position:absolute;right:8px;bottom:6px;z-index:3;font:500 10px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(235,227,211,.6);pointer-events:none}
/* version 14 review (10/19): no Next button, no moving light */
html.tree14 .tree-next{display:none!important}
.cvlist div{grid-template-columns:130px 1fr}.cvlist dd{font-size:16.5px}
.tt-knot{cursor:pointer}

/* ---------- version 15: the tree and a stratigraphic column on one screen ---------- */
.strata{padding:48px 20px 0;scroll-margin-top:var(--bar)}
.strata-head h2{font-size:30px;font-weight:400;line-height:1.15;margin:8px 0 10px}
.strata-head p:not(.eyebrow){color:var(--bone-soft);max-width:620px}
.strata-body{margin-top:22px;display:grid;gap:22px}
html.tree15 .panel{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#6e3a1c;
  box-shadow:0 0 0 1px rgba(235,227,211,.5),0 0 0 5px var(--walnut),0 0 0 6px rgba(235,227,211,.18)}
html.tree15 .panel canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.strata .glow11{opacity:1}
.column{list-style:none;border-top:1px solid var(--line)}
.sr{display:grid;grid-template-columns:118px 1fr;gap:2px 14px;padding:10px 0;border-bottom:1px solid var(--line)}
.sr .d{grid-row:1/3;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);padding-top:3px}
.sr b{font-size:16px;font-weight:500;line-height:1.3}
.sr .l{font-size:14.5px;line-height:1.45;color:var(--bone-soft)}
.sr::before{content:"";grid-row:1/3;display:none}
.sr-wisdom b{color:#e8c47a}.sr-present b{color:#e3a27c}.sr-grass b{color:#e9cf8f}.sr-soil b{color:#d9b48d}
.strata-roots{display:grid;gap:14px;margin-top:22px;padding:18px;border:1px solid var(--line);background:var(--walnut-2)}
.strata-roots p:not(.eyebrow){margin-top:4px;font-size:15.5px;color:var(--bone)}
.strata-roots .q{color:var(--bone-soft)}
.strata-hint{margin-top:14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-mute)}
.strata-go{margin-top:18px}
@media (min-width:900px){
  .strata{padding:96px var(--edge) 0}
  .strata-head h2{font-size:44px}
  .strata-body{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 0;align-items:stretch}
  .column{position:relative;border:0;height:100%}
  .sr{position:absolute;left:0;right:0;top:calc(var(--y) * 100%);padding:4px 0 0 40px;border:0;grid-template-columns:1fr;gap:1px}
  .sr .d{grid-row:auto;padding:0}
  .sr::before{display:block;position:absolute;left:0;top:10px;width:30px;border-top:1px dashed rgba(214,176,98,.6)}
  .sr b{font-size:16.5px}.sr .l{font-size:14px;max-width:440px}
  .strata-roots{grid-template-columns:repeat(3,1fr);gap:28px;padding:24px 28px}
  .strata-go{max-width:720px}
}
.soil{list-style:none;margin-top:4px;display:grid;gap:3px}
.soil li{font-size:14px;line-height:1.4;color:var(--bone-soft);display:grid;grid-template-columns:132px 1fr;gap:10px}
.soil li span{font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mute);padding-top:2px}
@media (max-width:899px){.sr-soil .soil{grid-column:2}.soil li{grid-template-columns:1fr;gap:0}}
@media (min-width:900px){.soil li{font-size:13.5px}}
@media (min-width:900px){.strata-roots{margin-top:36px}}

/* ---------- version 16: explore switch, markers on the tree, cards in place of the column ---------- */
.v16 .strata-head{display:grid;gap:4px}
.explore-toggle{justify-self:start;margin-top:14px;display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border:1px solid rgba(214,176,98,.55);
  background:transparent;color:var(--bone);font:700 12.5px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background-color .3s,color .3s}
.explore-toggle .sw{width:34px;height:20px;border-radius:10px;background:rgba(235,227,211,.18);position:relative;transition:background-color .3s}
.explore-toggle .sw i{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--bone);transition:transform .3s}
.exploring .explore-toggle{background:rgba(214,176,98,.14)}
.exploring .explore-toggle .sw{background:#c9a256}.exploring .explore-toggle .sw i{transform:translateX(14px)}
.v16 .panel::after{content:"";position:absolute;inset:0;background:rgba(18,9,3,.32);opacity:0;transition:opacity .5s;pointer-events:none;z-index:2}
.exploring .panel::after{opacity:1}
.marks16{position:absolute;inset:0;z-index:4;pointer-events:none}
.mk16{position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;border:0;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .4s,transform .4s}
.exploring .mk16{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.mk16 .dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#f6dc9a 0,#d6b062 60%,#a98236 100%);
  color:#3a2410;font:700 14px/1 var(--font);box-shadow:0 0 0 2px rgba(255,236,190,.35),0 0 18px rgba(255,206,112,.75);animation:mk16 2.8s ease-in-out infinite}
.mk16:nth-child(2n) .dot{animation-delay:-1.4s}
@keyframes mk16{0%,100%{box-shadow:0 0 0 2px rgba(255,236,190,.35),0 0 10px rgba(255,206,112,.45)}50%{box-shadow:0 0 0 4px rgba(255,236,190,.25),0 0 24px rgba(255,206,112,.9)}}
.mk16 .nm{padding:3px 7px;background:rgba(31,21,14,.88);color:var(--bone);font:500 10.5px/1.1 var(--font);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mk16:hover .dot,.mk16.on .dot,.mk16:focus-visible .dot{background:radial-gradient(circle,#fff3cf 0,#ecc978 70%)}
.mk16.on .nm{background:var(--bone);color:var(--walnut-ink)}
@media (max-width:599px){.mk16 .nm{display:none}.mk16.on .nm{display:block}.mk16 .dot{width:26px;height:26px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.mk16 .dot{animation:none}}
/* the quiet column: date + name, each a button */
.v16 .sr button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:118px 1fr auto;gap:2px 14px;align-items:baseline;width:100%;cursor:pointer;padding:2px 0}
.v16 .sr button .d{grid-row:auto}
.v16 .sr button i{font-style:normal;color:var(--bone-mute);transition:transform .2s,color .2s}
.v16 .sr button:hover i,.v16 .sr button:focus-visible i{transform:translateX(4px);color:var(--bone)}
.v16 .sr button:focus-visible{outline:2px solid #d6b062;outline-offset:3px}
@media (min-width:900px){
  .v16 .sr button{grid-template-columns:1fr auto;gap:1px 10px}
  .v16 .sr button .d{grid-column:1}.v16 .sr button b{grid-column:1}.v16 .sr button i{grid-column:2;grid-row:1/3;align-self:center}
}
/* the card */
.side16{position:relative}
.card16{padding:4px 0 0}
.card16 .back{all:unset;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-mute)}
.card16 .back:hover{color:var(--bone)}
.card16 .eyebrow{margin-top:18px}
.card16 h3{font-size:30px;font-weight:400;line-height:1.15;margin:6px 0 12px;color:#ecd29a}
.card16 > p:not(.eyebrow){font-size:16px;line-height:1.55;color:var(--bone-soft);max-width:520px}
.card16 > p + p{margin-top:10px}
.card16 .rows{list-style:none;margin-top:10px;border-top:1px solid var(--line)}
.card16 .rows li{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--bone-soft)}
.card16 .rows li span{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mute);padding-top:3px}
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tile16{border:1px solid rgba(214,176,98,.5);background:rgba(214,176,98,.08);color:var(--bone);padding:10px 14px;font:500 15px/1 var(--font);cursor:pointer;transition:background-color .2s,color .2s}
.tile16:hover{background:rgba(214,176,98,.22)}
.tile16.on{background:var(--bone);color:var(--walnut-ink);border-color:var(--bone)}
.card16 .more{margin-top:14px;font-size:15px;color:var(--bone)}
.card16 .more a,.soon16 a{color:#e8c47a;text-decoration:underline;text-underline-offset:3px}
.soon16{margin-top:18px;font-size:14px;color:var(--bone-mute)}
.card16 .field{margin-top:20px;max-width:420px}
.v16 .tree-sheet{display:none!important}
@media (max-width:899px){.side16{scroll-margin-top:calc(var(--bar) + 8px)}.card16 .rows li{grid-template-columns:1fr;gap:2px}}
@media (min-width:900px){.side16{padding-left:40px}.v16 .column{margin-left:-40px}}
@media (max-width:899px){.v16 .strata-body{grid-template-columns:minmax(0,1fr)}.v16 .sr{display:block}.v16 .side16,.card16{min-width:0}}