@font-face{font-family:"Noto Serif Display";src:url("/a/NotoSerifDisplay.5343443b8f.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif Display";src:url("/a/NotoSerifDisplay-Italic.77309ca264.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

/* Design B (Drew, 14 Nov 2026): white paper, one serif, light weights, a tracked capital wordmark,
   boxed buttons. Hierarchy comes from size and weight, never from colour. */
:root{
  --ink:#2f2c26; --text:#57534b; --paper:#fff; --light:#fffdf3; --hair:#e6e2d9; --field:#8f897d;
  --face:"Noto Serif Display",Georgia,"Times New Roman",serif;
  --edge:20px; --nav-h:64px;
  --gutter:clamp(1.25rem,.8rem + 3vw,5rem);
  --ease:cubic-bezier(.33,1,.68,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--text);font:300 1.1875rem/1.5 var(--face);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;font-variant-numeric:lining-nums;overflow-wrap:break-word}
img{display:block;max-width:100%}
h1,h2,h3{color:var(--ink);font-weight:300}
p{margin:0 0 1em;text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
strong,b{font-weight:500;color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tone-cream :focus-visible,.hero :focus-visible,.top:not(.top-ink) :focus-visible{outline-color:var(--light)}
.skip{position:absolute;left:1rem;top:-5rem;z-index:60;background:var(--ink);color:var(--paper);padding:.75rem 1rem}
.skip:focus{top:1rem}

/* type */
.display{font-weight:300;font-size:clamp(2.75rem,1.6rem + 5vw,5.5rem);line-height:1.04;letter-spacing:-.005em;margin:0;text-wrap:balance}
.display-2{font-size:clamp(2.375rem,1.6rem + 2.6vw,3.625rem);line-height:1.08}
.display-3{font-size:clamp(2rem,1.5rem + 1.6vw,3rem);line-height:1.1}
.display-4{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.2}
.display a{text-decoration:none}
.display a:hover{text-decoration:underline;text-decoration-thickness:1px}
.lede{font-size:clamp(1.25rem,1.1rem + .5vw,1.6875rem);line-height:1.34;max-width:26ch;margin:0}
.ink{color:var(--ink)}

/* buttons: a hairline box, filled on hover */
.btn{display:inline-block;border:1px solid currentColor;padding:.72em 1.55em .8em;font:300 1.1875rem/1.15 var(--face);color:var(--ink);text-decoration:none;cursor:pointer;background:none;transition:background-color .16s var(--ease),color .16s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tone-cream .btn,.btn-light{color:var(--light)}
.tone-cream .btn:hover,.btn-light:hover{background:var(--light);color:var(--ink);border-color:var(--light)}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.more{display:inline-block;padding:.75rem 0}
.actions{margin:1.75rem 0 0;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}

/* the top bar */
.top{position:absolute;inset:0 0 auto 0;z-index:20;height:calc(var(--nav-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(var(--edge),env(safe-area-inset-right)) 0 max(var(--edge),env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;color:var(--light);font-size:1.25rem;line-height:1}
.top-ink{color:var(--ink)}
.wordmark{font-size:.8125rem;font-weight:420;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;text-decoration:none;padding:.95rem 0;position:relative;z-index:2}
.nav-wide{display:none}
.nav-wide a{text-decoration:none;text-underline-offset:.32em;padding:.5rem 0}
.nav-wide a:hover,.nav-wide a[aria-current]{text-decoration:underline}
.nav-wide .boxed:hover,.nav-wide .boxed[aria-current]{text-decoration:none}
.nav-wide .boxed{border:1px solid currentColor;padding:.42em .85em .5em}
.top:not(.top-ink) .nav-wide .boxed:hover{background:var(--light);color:var(--ink);border-color:var(--light)}
.top-ink .nav-wide .boxed:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav-narrow summary{list-style:none;cursor:pointer;padding:.75rem 0 .75rem 1rem;position:relative;z-index:2}
.nav-narrow summary::-webkit-details-marker{display:none}
.is-open{display:none}
.nav-narrow[open] .is-shut{display:none}
.nav-narrow[open] .is-open{display:inline}
.nav-narrow nav{position:fixed;inset:0;z-index:1;background:var(--paper);color:var(--ink);padding:calc(var(--nav-h) + env(safe-area-inset-top) + 2.5rem) var(--edge) 2.5rem;display:flex;flex-direction:column;gap:.625rem;font-size:2.375rem;line-height:1.25;overflow:auto}
.nav-narrow nav a{text-decoration:none;padding:.5rem 0}
.nav-narrow nav a[aria-current]{text-decoration:underline 1px;text-underline-offset:.2em}
.top:has(.nav-narrow[open]){color:var(--ink)}
html:has(.nav-narrow[open]){overflow:hidden}

/* the opening screen */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:clip;background:#3d4247;color:var(--light)}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{position:absolute;inset:auto 0 0;z-index:2;padding:0 26px max(44px,calc(env(safe-area-inset-bottom) + 28px));text-align:center}
.hero h1{color:inherit;font-size:1.75rem;line-height:1.2;letter-spacing:-.005em;max-width:21em;margin:0 auto 1.625rem;text-wrap:balance}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
  .hero-copy{animation:copy-away linear both;animation-timeline:scroll(root);animation-range:20vh 44vh}
  @keyframes copy-away{to{opacity:0}}
}}

/* our story: a ruled frame, the heading set into its top edge, a photograph laid over its corner */
.story{padding:clamp(5rem,3rem + 6vw,8.5rem) 0 clamp(4rem,2.5rem + 5vw,7.5rem)}
.story-grid{position:relative}
.frame{--w:6px;position:relative;z-index:1;margin:0 var(--edge);padding:calc(3.875rem + var(--w)) calc(1.375rem + var(--w)) calc(8rem + var(--w))}
.rule{position:absolute;background:var(--ink);pointer-events:none}
.rule-t{left:0;top:0;width:100%;height:var(--w);transform-origin:left center}
.rule-r{right:0;top:0;width:var(--w);height:100%;transform-origin:center top}
.rule-b{right:0;bottom:0;width:100%;height:var(--w);transform-origin:right center}
.rule-l{left:0;bottom:0;width:var(--w);height:100%;transform-origin:center bottom}
.frame h2{z-index:1}
.frame h2{position:absolute;top:0;left:14px;transform:translateY(calc(3px - 50%));display:flex;align-items:center;gap:14px;margin:0;background:var(--paper);padding:0 14px 0 8px;font-size:2.625rem;line-height:1.1;white-space:nowrap}
.frame h2::before{content:"";width:34px;height:1px;background:var(--ink)}
.quote{margin:0;font-style:italic;font-size:1.5rem;line-height:1.34;color:var(--ink)}
.quote .ln{display:inline}
.quote .br{display:none}
.quote .w{display:inline-block}
.story-text{margin:1.5rem 0 0}
.shot{position:relative;z-index:2;margin:-5.75rem 0 0 4rem;aspect-ratio:4/5;overflow:clip}
.story-more{margin:1.25rem 0 0}
.shot picture,.shot img{width:100%;height:100%;object-fit:cover}

/* photo panels */
.panel{position:relative;width:100%;display:flex;flex-direction:column;overflow:clip;background:#3d4247}
.panel picture{position:absolute;inset:0;display:block}
.panel picture img{width:100%;height:100%;object-fit:cover}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none}
.veil-top::after{background:linear-gradient(180deg,rgba(255,255,255,.82) 0,rgba(255,255,255,.62) 30%,rgba(255,255,255,0) 58%)}
.panel-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;padding:calc(var(--nav-h) + 2.5rem) max(var(--gutter),env(safe-area-inset-right)) 2.5rem max(var(--gutter),env(safe-area-inset-left))}
.tone-cream{color:var(--light)}
.tone-cream h1,.tone-cream h2,.tone-cream h3{color:var(--light)}
.tone-ink{color:var(--ink)}
.scrim-left::after{background:rgba(20,17,13,.42)}
.scrim-low::after{background:linear-gradient(180deg,rgba(20,17,13,0) 30%,rgba(20,17,13,.55) 70%,rgba(20,17,13,.72) 100%)}
.scrim-all::after{background:linear-gradient(180deg,rgba(20,17,13,.18) 0,rgba(20,17,13,.1) 40%,rgba(20,17,13,.5) 100%)}

.panel-head{aspect-ratio:4/5;min-height:30rem}
.panel-head-short{aspect-ratio:4/3;min-height:22rem}
.head-in{justify-content:flex-start;gap:1rem}
.panel-head-short .head-in,.head-low{justify-content:flex-end}
.head-sky .display{font-size:clamp(3.25rem,.5rem + 13vw,5rem)}
.panel-band{aspect-ratio:4/5;min-height:28rem}
.band-in{justify-content:flex-end}
.band-in p{max-width:32rem}
.band-in .display{margin-bottom:.75rem}

/* plain paper */
.lead-line{padding:clamp(2.5rem,1.5rem + 3vw,4.5rem) 0 0}
.lead-line .say{margin:0}
.lead-line + .plain{padding-top:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.plain{padding:clamp(3.5rem,2rem + 6vw,8rem) 0}
.plain-rule{padding-top:0}
.plain-rule>.wrap{border-top:1px solid var(--hair);padding-top:clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.plain-top{padding-top:calc(var(--nav-h) + clamp(3rem,2rem + 4vw,6rem))}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right));max-width:96rem;margin-inline:auto}
.plain-rule>.wrap{margin-inline:max(var(--gutter),env(safe-area-inset-left));padding-inline:0}
.entry{display:grid;gap:1.5rem}
.facts{font-size:clamp(1.25rem,1.1rem + .4vw,1.5rem);line-height:1.42;margin:0;max-width:34rem;color:var(--ink)}
.entry-text{max-width:40rem}
.entry-text h3{margin:2.25rem 0 1rem}
.say{font-style:italic;font-size:clamp(1.5rem,1.25rem + .9vw,1.875rem);line-height:1.3;color:var(--ink);margin:0 0 .5rem}
.mail-big{font-size:clamp(1.25rem,.2rem + 5vw,2.75rem);line-height:1.15;color:var(--ink);margin:1.5rem 0;overflow-wrap:anywhere}
.doing-grid{display:grid;gap:2rem;align-items:center}
.doing-pic img{width:100%;height:auto}
.doing-text .display{margin-bottom:1.25rem}
.coming .display-3{margin-bottom:2.5rem}
.listing{list-style:none;margin:0;padding:0;display:grid;gap:2.5rem}
.listing li{border-top:1px solid var(--hair);padding-top:1.5rem}
.listing h3{margin:0 0 .25rem}
.listing h3 a{display:inline-block;padding:.5rem 0}
.listing p{margin:0;max-width:34rem}
.day{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.day li{display:grid;grid-template-columns:4.5rem 1fr;padding:.45rem 0;border-bottom:1px solid var(--hair)}
.day time{font-weight:500;color:var(--ink)}
.prices{margin:0 0 1.5rem;display:grid;gap:0;max-width:40rem}
.prices div{border-bottom:1px solid var(--hair);padding:1rem 0}
.prices dt{font-weight:500;color:var(--ink)}
.prices dd{margin:0}
.prices .sum{font-size:clamp(1.25rem,1.1rem + .4vw,1.5rem);color:var(--ink);margin:.125rem 0 .25rem}
.faq{margin:0;display:grid;gap:1.5rem;max-width:40rem}
.faq dt{font-weight:500;color:var(--ink)}
.faq dd{margin:0}
.fact-list{margin:0;display:grid;gap:.75rem;max-width:40rem}
.fact-list div{display:grid;grid-template-columns:5rem 1fr;gap:.5rem;border-bottom:1px solid var(--hair);padding-bottom:.75rem}
.fact-list dt{font-weight:500;color:var(--ink)}
.fact-list dd{margin:0}
.included{list-style:none;margin:0;padding:0;display:grid;gap:2rem;max-width:44rem}
.included h3{margin:0 0 .5rem}
.included p{margin:0}
.opening p:first-child,.opening p:nth-child(2){font-size:clamp(1.625rem,1.25rem + 1.3vw,2.5rem);line-height:1.2;color:var(--ink)}
.legal .measure{max-width:44rem;margin:0 auto 0 0}
.legal h1{margin-bottom:1.5rem}
.legal h2{font-size:1.75rem;line-height:1.15;margin:2.25rem 0 .75rem}
.legal ul{padding-left:1.25rem}
.legal li{margin-bottom:.5rem}

/* form */
.form{margin:1.5rem 0;display:grid;gap:1.25rem}
.field label{display:block;font-weight:500;color:var(--ink);margin-bottom:.375rem}
.field input,.field select,.field textarea{width:100%;font:300 1.0625rem/1.4 var(--face);color:var(--ink);background:var(--paper);border:1px solid var(--field);border-radius:0;padding:.75rem .875rem;min-height:3rem}
.field select{appearance:auto}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.field .bad{border-color:#a3321a}
.err{color:#a3321a;margin:.375rem 0 0;font-size:1rem}
.hint{font-size:1rem;margin:.375rem 0 0}
.trap{position:absolute;left:-200vw;width:1px;height:1px;overflow:hidden}
.note{background:#f6f4ef;padding:1rem}

/* footer */
.foot{border-top:1px solid var(--hair);padding:2.25rem 0 max(2.5rem,env(safe-area-inset-bottom));font-size:1rem;line-height:1.55}
.foot-grid{display:grid;gap:1rem}
.foot a{display:inline-block;padding:.7rem 0;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:0 1.5rem}

@media (min-width:760px){
  :root{--edge:40px;--nav-h:88px}
  .hero-copy{padding-bottom:max(9vh,44px)}
  .hero h1{font-size:2.375rem;margin-bottom:1.875rem}
  .story-grid{display:grid;grid-template-columns:repeat(12,1fr);max-width:1400px;margin:0 auto;padding:0 var(--edge);align-items:start}
  .frame{grid-column:1 / 10;grid-row:1;margin:0;padding:calc(clamp(70px,7vw,104px) + var(--w)) calc(clamp(32px,4.6vw,68px) + var(--w)) calc(clamp(64px,7vw,104px) + var(--w))}
  .frame h2{left:clamp(16px,3.2vw,48px);font-size:3.625rem;gap:18px;padding:0 18px 0 10px}
  .frame h2::before{width:44px}
  .frame .quote,.frame .story-text,.frame .story-more{max-width:calc(72% - 16px)}
  .quote{font-size:1.6875rem}
  .story-text{margin-top:1.875rem}
  .shot{grid-column:8 / 13;grid-row:1;margin:clamp(56px,8vw,118px) 0 0;aspect-ratio:4/5}
  .panel-head{aspect-ratio:16/9;min-height:34rem;max-height:92svh}
  .panel-head-short{aspect-ratio:21/9;min-height:24rem}
  .head-right{align-items:flex-end;padding-right:11vw}
  .head-sky .display{font-size:clamp(4.5rem,.5rem + 6.4vw,8rem)}
  .panel-band{aspect-ratio:21/9;min-height:30rem}
  .band-right{align-items:flex-end;text-align:right}
  .band-right .actions,.band-right p{margin-left:auto}
  .scrim-side-r::after{background:linear-gradient(270deg,rgba(20,17,13,.62) 0,rgba(20,17,13,.42) 38%,rgba(20,17,13,0) 66%)}
  .scrim-side-l::after{background:linear-gradient(90deg,rgba(20,17,13,.62) 0,rgba(20,17,13,.42) 45%,rgba(20,17,13,0) 72%)}
  .entry{grid-template-columns:5fr 7fr;column-gap:clamp(2rem,4vw,5rem);row-gap:1.25rem;align-items:start}
  .entry>.display{grid-column:1;grid-row:1 / span 3}
  .entry>*:not(.display){grid-column:2}
  .page-contact .entry>.entry-text,.plain-top .entry>.entry-text{grid-column:1 / -1}
  .page-sent .entry,.page-not-sent .entry{grid-template-columns:1fr}
  .page-sent .entry>.display,.page-not-sent .entry>.display{grid-row:auto}
  .doing-grid{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem)}
  .listing{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,5rem)}
}
@media (min-width:1040px){
  .top{display:block;padding-inline:var(--edge)}
  .wordmark{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + var(--nav-h) / 2);transform:translate(-50%,-50%);font-size:1.0625rem;letter-spacing:.34em;margin-right:-.34em}
  .nav-wide{display:flex;align-items:center;gap:30px;height:100%}
  .nav-wide a:nth-child(2){margin-right:auto}
  .nav-narrow{display:none}
}
@media (max-width:359px){.hero h1{font-size:1.5rem}.btn{padding-inline:1em}}
@media (max-height:520px){
  .hero{min-height:360px}
  .hero-copy{padding-bottom:20px}
  .hero h1{font-size:1.5rem;max-width:none;margin-bottom:.875rem}
}

/* upcoming retreats: one card per retreat */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:3rem}
.card-pic{display:block;aspect-ratio:4/3;overflow:clip;margin-bottom:1.25rem;background:var(--hair)}
.card-pic img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){.card-pic img{transition:transform .6s var(--ease)}.card:hover .card-pic img{transform:scale(1.025)}}
.card h3{margin:0 0 .25rem}
.card h3 a{text-decoration:none;display:inline-block;padding:.6rem 0}
.card h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.card p{margin:0 0 .5rem;max-width:34rem}
.activities{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem 1.5rem;color:var(--ink)}
.activities li{padding:.35rem 0;border-bottom:1px solid var(--hair)}
.gallery-band{padding-top:0}
.gallery{display:grid;gap:1rem}
.gallery figure{margin:0;aspect-ratio:4/5;overflow:clip}
.gallery img{width:100%;height:100%;object-fit:cover}
.pillars{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.75rem}
.pillars h3{margin:0 0 .375rem}
.pillars p{margin:0}
.founders h2{margin:0 0 2.5rem}
.founders-grid{display:grid;gap:2.5rem}
.founders-pic{margin:0;aspect-ratio:4/5;overflow:clip}
.founders-pic img{width:100%;height:100%;object-fit:cover}
.founder h3{margin:0 0 1rem}
.quals{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.quals li{border:1px solid var(--hair);padding:.25rem .75rem;font-size:1rem;color:var(--ink)}
@media (min-width:760px){
  .cards{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,5rem)}
  .gallery{grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,2rem)}
  .pillars{grid-column:2;grid-template-columns:1fr 1fr;gap:2rem 3rem}
  .founders-grid{grid-template-columns:5fr 4fr 4fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
}
@media (max-width:420px){.activities{grid-template-columns:1fr}}


/* MOTION (14 Nov 2026, his ask: "smooth, silky almost"). Time-based and played once, never scrubbed by the scroll, and only
   transform, opacity and a little blur, which the compositor runs off the main thread. JavaScript adds .anim to Our Story
   before it is seen and .in when it arrives; without JavaScript, or with reduced motion, everything is simply there. */
:root{--silk:cubic-bezier(.16,1,.3,1);--draw:cubic-bezier(.65,0,.35,1)}
.wordmark .wm-w{display:inline-block;white-space:nowrap}
.wordmark .l{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  /* the name gathers as the home page loads: letters start spread out and soft, and close in */
  .page-home .wordmark .l{animation:wm-in 1.6s var(--silk) both;animation-delay:calc(.12s + var(--i) * 38ms)}
  @keyframes wm-in{from{opacity:0;transform:translateX(calc((var(--i) - 9.5) * .16em));filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
  .page-home .hero h1,.page-home .hero .btn{animation:hero-in 1.1s var(--silk) both}
  .page-home .hero h1{animation-delay:.3s}
  .page-home .hero .btn{animation-delay:.45s}
  @keyframes hero-in{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}

  /* Our Story: the frame draws in one line, top, right, bottom, left; the words lift out of a soft blur; the photo settles */
  .story.anim .rule-t,.story.anim .rule-b{transform:scaleX(0)}
  .story.anim .rule-r,.story.anim .rule-l{transform:scaleY(0)}
  .story.anim .quote .w,.story.anim .story-text,.story.anim .story-more{opacity:0;transform:translateY(.45em);filter:blur(5px)}
  .story.anim .shot img{opacity:0;transform:translateY(5%) scale(1.07)}
  .story.anim.in .rule{transform:none;transition:transform .7s var(--draw)}
  .story.anim.in .rule-r{transition-delay:.5s}
  .story.anim.in .rule-b{transition-delay:.95s}
  .story.anim.in .rule-l{transition-delay:1.4s}
  .story.anim.in .quote .w{opacity:1;transform:none;filter:none;transition:opacity .9s var(--silk),transform 1.2s var(--silk),filter .9s var(--silk);transition-delay:calc(.35s + var(--d) * 55ms)}
  .story.anim.in .story-text,.story.anim.in .story-more{opacity:1;transform:none;filter:none;transition:opacity 1s var(--silk),transform 1.2s var(--silk),filter 1s var(--silk);transition-delay:1.15s}
  .story.anim.in .story-more{transition-delay:1.3s}
  .story.anim.in .shot img{opacity:1;transform:none;transition:opacity 1.1s var(--silk),transform 1.8s var(--silk);transition-delay:.45s}
}
.d0{--d:0}.d1{--d:1}.d2{--d:2}.d3{--d:3}.d4{--d:4}.d5{--d:5}.d6{--d:6}.d7{--d:7}.d8{--d:8}.d9{--d:9}.d10{--d:10}.d11{--d:11}.d12{--d:12}.d13{--d:13}.d14{--d:14}.d15{--d:15}.d16{--d:16}.d17{--d:17}.d18{--d:18}.d19{--d:19}.d20{--d:20}.d21{--d:21}.d22{--d:22}.d23{--d:23}

/* THE JOURNEY (14 Nov 2026, his ask, after RØAM's "day as a journey"; then "like a windey road"): a faint line winds
   from side to side down the home page behind everything, and draws itself as you scroll with
   a dot riding its tip. site.js measures the page and writes the path; the browser's own scroll timeline draws it, so no
   script runs while scrolling. Reduced motion: the whole line, still. No scroll timelines: the line, no ride. */
main{position:relative}
main>section{position:relative;z-index:1}
.journey{position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:0;overflow-x:clip;overflow-y:visible}
.journey-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.journey-line{fill:none;stroke:#d3ccbd;stroke-width:1.75;stroke-linecap:round}
.journey-dot{display:none;position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(47,44,38,.07)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .journey.live .journey-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:journey-draw linear both;animation-timeline:scroll(root)}
    @keyframes journey-draw{to{stroke-dashoffset:0}}
    .journey.live .journey-dot{display:block;offset-path:var(--path);offset-rotate:0deg;animation:journey-ride linear both;animation-timeline:scroll(root)}
    @keyframes journey-ride{from{offset-distance:0%}to{offset-distance:100%}}
  }
}

/* The end of the road (his ask, 14 Nov: "end with a pfff of dust and disappear"): when the page bottom is reached the
   dot bursts into dust and the whole line fades away; scroll back up and it returns. Time-based, so it is soft. */
.journey-line{transition:opacity 1.2s var(--silk) .15s}
.journey .puff{position:absolute;left:var(--ex,0);top:var(--ey,0);width:0;height:0}
.journey .dust{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle,#8f877a 0,rgba(143,135,122,.55) 55%,rgba(143,135,122,0) 72%);opacity:0;transform:translate(-50%,-50%)}
.dust.d0{--dx:69px;--dy:-28px;width:12px;height:12px;animation-delay:0ms}
.dust.d1{--dx:83px;--dy:29px;width:8px;height:8px;animation-delay:22ms}
.dust.d2{--dx:72px;--dy:11px;width:14px;height:14px;animation-delay:44ms}
.dust.d3{--dx:26px;--dy:68px;width:7px;height:7px;animation-delay:66ms}
.dust.d4{--dx:23px;--dy:27px;width:10px;height:10px;animation-delay:88ms}
.dust.d5{--dx:-44px;--dy:46px;width:9px;height:9px;animation-delay:0ms}
.dust.d6{--dx:-28px;--dy:45px;width:13px;height:13px;animation-delay:22ms}
.dust.d7{--dx:-103px;--dy:15px;width:6px;height:6px;animation-delay:44ms}
.dust.d8{--dx:-63px;--dy:11px;width:11px;height:11px;animation-delay:66ms}
.dust.d9{--dx:-96px;--dy:-40px;width:8px;height:8px;animation-delay:88ms}
.dust.d10{--dx:-91px;--dy:-28px;width:15px;height:15px;animation-delay:0ms}
.dust.d11{--dx:-65px;--dy:-94px;width:7px;height:7px;animation-delay:22ms}
.dust.d12{--dx:-45px;--dy:-56px;width:10px;height:10px;animation-delay:44ms}
.dust.d13{--dx:14px;--dy:-98px;width:9px;height:9px;animation-delay:66ms}
.dust.d14{--dx:-2px;--dy:-81px;width:12px;height:12px;animation-delay:88ms}
.dust.d15{--dx:85px;--dy:-77px;width:6px;height:6px;animation-delay:0ms}
.dust.d16{--dx:49px;--dy:-64px;width:11px;height:11px;animation-delay:22ms}
.dust.d17{--dx:98px;--dy:-22px;width:8px;height:8px;animation-delay:44ms}
@media (prefers-reduced-motion:no-preference){
  .journey.poofed .journey-line{opacity:0}
  .journey.poofed .journey-dot{animation:none;opacity:0;transform:scale(.2);transition:opacity .35s ease-out,transform .35s ease-out;offset-distance:100%}
  .journey.poofed .dust{animation:pfff 1.3s cubic-bezier(.1,.75,.25,1) forwards}
  @keyframes pfff{0%{opacity:0;transform:translate(-50%,-50%) scale(.4);filter:blur(0)}12%{opacity:.95}
    100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(2.4);filter:blur(4px)}}
}

/* The road dims under the words (his ask: "feinter behind the writing"): each block of writing sits on a soft, feathered
   veil of paper, so the line still shows in the open space but whispers where it passes behind text. */
.page-home .frame,.page-home .doing-text,.page-home .coming h2,.page-home .card{background:rgba(255,255,255,.78);box-shadow:0 0 28px 22px rgba(255,255,255,.78)}
.page-home .card .card-pic{box-shadow:none}

/* page changes: a plain cross-fade */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s var(--ease) both}
::view-transition-new(root){animation:vt-in .28s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(*),::view-transition-new(*){animation:none}
  .btn{transition:none}
}
.lead-gap{margin-bottom:1.5rem}
.founder .say{margin-bottom:1.25rem}
.facts-pic{margin:.5rem 0 0;aspect-ratio:4/5;overflow:clip;max-width:28rem}
.facts-pic img{width:100%;height:100%;object-fit:cover}
.l0{--i:0}.l1{--i:1}.l2{--i:2}.l3{--i:3}.l4{--i:4}.l5{--i:5}.l6{--i:6}.l7{--i:7}.l8{--i:8}.l9{--i:9}.l10{--i:10}.l11{--i:11}.l12{--i:12}.l13{--i:13}.l14{--i:14}.l15{--i:15}.l16{--i:16}.l17{--i:17}.l18{--i:18}.l19{--i:19}
/* audit 14 Nov: the header must fit a 320px screen (WCAG 1.4.10): wordmark 247px + Menu + edges was 357px */
@media (max-width:359px){.wordmark{letter-spacing:.12em;font-size:.72rem}.nav-narrow summary{padding-left:.5rem}}
.price-note{margin:1rem 0 0;font-size:1rem}
.credit{margin:.25rem 0 0;font-size:.75rem;letter-spacing:.02em;color:#757064}
.credit a{padding:.6rem 0;color:inherit}
/* audit 14 Nov: tap targets on the 404 page's links */
.page-404 .lead-line a{display:inline-block;padding:.5rem 0}
/* print: everything that waits for a scroll to appear is simply there on paper */
@media print{
  .story.anim .quote .w,.story.anim .story-text,.story.anim .story-more,.story.anim .shot img{opacity:1!important;transform:none!important;filter:none!important}
  .story.anim .rule{transform:none!important}
  .journey,.nav-narrow,.skip{display:none!important}
  .top{position:static}
}