/* Matt Mosich — one stylesheet.
   Ground is one warm neutral. Everything is a rounded card on it.
   Green is the primary at two values. Gold is buttons only. */
/* Type is self-hosted. No request leaves this domain.
   Three variable files: Archivo (weight axis), Newsreader roman and italic
   (weight + optical size). Source: Google Fonts via @fontsource-variable,
   SIL Open Font License 1.1 — see ../fonts/*-OFL.txt */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
 src:url(../fonts/archivo-var.woff2) format('woff2-variations')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
 src:url(../fonts/newsreader-var.woff2) format('woff2-variations')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
 src:url(../fonts/newsreader-italic-var.woff2) format('woff2-variations')}

/* ==========================================================================
   Built on Root's mechanics, in Matt's colours.
   Ground is one warm neutral. Everything is a rounded card floating on it.
   Green is the primary and it appears at two values. Gold is the only accent.
   Headlines are weight 500, tracking near zero, centred. Nothing is boxy.
   ========================================================================== */
:root{
/* one ground, one card, two greens, one accent */
--sand:#E4DFD1;      /* the page. dominant. */
--cream:#F6F3EC;     /* the card. most of the content. */
--sage:#C3D4BD;      /* green at its lightest */
--green:#013D27;     /* green at its deepest. used twice. */
--gold:#C98B25;      /* buttons only */
--beige:#EFC984;
--ink:#1E2A24;       /* text. green-black, never pure black. */
--ink2:#54615A;      /* secondary text */
--onlight:#1E2A24;

--sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
--serif:'Newsreader','Iowan Old Style',Palatino,Georgia,serif;

--h1:clamp(40px,5.6vw,76px);
--h2:clamp(28px,3.5vw,51px);
--h3:clamp(19px,1.6vw,22px);
--say:clamp(20px,2.3vw,30px);
--b:16.5px;

--r:26px;                        /* Root's radius */
--edge:clamp(14px,2.2vw,42px);   /* outer margin — the cards float */
--gap:clamp(12px,1.2vw,16px);    /* between cards */
--pad:clamp(30px,4vw,72px);      /* inside a card */
--rail:1340px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--sand);color:var(--ink);
 font:400 var(--b)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.w{max-width:var(--rail);margin:0 auto;padding:0 var(--edge)}
.sec{padding:clamp(34px,3.8vw,64px) 0}
.card{background:var(--cream);border-radius:var(--r);padding:var(--pad)}
.card.sage{background:var(--sage)}
.card.deep{background:var(--green);color:#E7EFE9}
.card.flush{padding:0;overflow:hidden}

h1,h2,h3{font-weight:500;letter-spacing:-.016em;line-height:1.2}
.h1{font:600 var(--h1)/1.06 var(--sans);letter-spacing:-.028em}
.h2{font:500 var(--h2)/1.2 var(--sans);letter-spacing:-.016em}
.h3{font:600 var(--h3)/1.25 var(--sans);letter-spacing:-.01em}
.say{font:300 var(--say)/1.28 var(--serif);font-style:italic;letter-spacing:-.008em}
.eyebrow{font:500 15px/1.4 var(--sans);color:var(--ink2)}
.bd{font-size:var(--b);line-height:1.62;color:var(--ink2)}
.bd+.bd{margin-top:1em}
.card.deep .bd,.card.deep .eyebrow{color:rgba(231,239,233,.76)}
.mid{text-align:center;margin-left:auto;margin-right:auto}
.m60{max-width:60ch}.m40{max-width:44ch}.m30{max-width:34ch}

.btn{display:inline-block;background:var(--gold);color:#fff;border-radius:5px;
 font:500 16px/1 var(--sans);padding:14px 21px}
.btn:hover{background:#B87C1E}
.btn.green{background:var(--green)}
.btn.green:hover{background:#02563a}
.arrow{display:inline-flex;align-items:center;gap:9px;font:500 16px/1 var(--sans);
 border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- nav ---------- */
nav{position:relative;z-index:60;background:var(--sand)}
nav .w{display:flex;align-items:center;justify-content:space-between;height:82px}
.mk{font:400 23px/1 var(--serif);color:var(--green)}
.nl{display:flex;align-items:center;gap:28px;font:500 16px/1 var(--sans)}
.nl a{color:var(--ink)}
.nl a:hover{color:var(--green)}
nav.solid{background:var(--sand)}
nav.solid .mk{color:var(--green)}
nav.solid .nl a:not(.btn){color:var(--ink)}

/* ---------- hero — the one full-bleed thing on the page ---------- */
.hero{position:relative;height:calc(100vh - 82px - var(--edge));min-height:560px;overflow:hidden;
 background:#02160E;margin:0 var(--edge);border-radius:var(--r)}
.hero .ph{position:absolute;inset:0;overflow:hidden}
.hero .ph i{position:absolute;inset:0;transform:scaleX(-1);
 background:url(../img/stage-fp.jpg) 100% 0%/min(135%,2400px) auto no-repeat}
.hero .ph:after{content:'';position:absolute;inset:0;
 background:linear-gradient(90deg,#02170F 24%,rgba(2,26,16,.86) 41%,rgba(2,26,16,0) 65%)}
.hero .in{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
 max-width:var(--rail);margin:0 auto;padding:0 clamp(30px,4vw,72px)}
.hero .t{max-width:640px}
.hero h1{color:#fff}
.hero h1 .i{display:block;font:200 clamp(24px,3.1vw,40px)/1.14 var(--serif);font-style:italic;
 letter-spacing:-.012em;color:var(--beige);margin-top:.2em}
.hero .sub{margin-top:26px;color:rgba(255,255,255,.82);font-size:18px;line-height:1.5;max-width:460px}
.hero .go{margin-top:30px}

/* ---------- grids of cards ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.duo.wide{grid-template-columns:.92fr 1.08fr}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.art{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sage);min-height:440px}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pad{display:flex;flex-direction:column;justify-content:center}

/* ---------- the story card ---------- */
.story{padding:clamp(38px,5vw,88px) clamp(24px,4vw,72px)}
.story .body{max-width:62ch;margin:0 auto}
.story .body p{color:var(--ink2);font-size:17px;line-height:1.68}
.story .body p+p{margin-top:1.05em}
.story .body .beat{color:var(--ink);font-weight:500}
.story .quote{margin:1.3em 0;padding-left:24px;border-left:2px solid rgba(1,61,39,.28)}
.story .payoff{margin-top:clamp(34px,4vw,58px);text-align:center}

/* ---------- help cards ---------- */
.claims{margin:0 0 18px}
.claims span{display:block;font:300 18px/1.35 var(--serif);font-style:italic;color:var(--ink);
 padding:9px 0;border-bottom:1px solid rgba(30,42,36,.14)}
.claims span:first-child{border-top:1px solid rgba(30,42,36,.14)}
.stat{display:block;font:500 clamp(48px,5.6vw,76px)/.9 var(--sans);letter-spacing:-.03em;
 color:var(--green);margin:2px 0 16px}
.cardtop{margin-bottom:18px}

/* ---------- steps ---------- */
.steps{margin-top:30px}
.step{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:15px 0;
 border-top:1px solid rgba(30,42,36,.13)}
.step:last-child{border-bottom:1px solid rgba(30,42,36,.13)}
.step i{font:500 14px/1.7 var(--sans);font-style:normal;color:var(--gold)}
.step p{font-size:16px;line-height:1.55;color:var(--ink2)}
.step em{font-style:normal;color:var(--ink);font-weight:500}

/* ---------- where I work ---------- */
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--sage);
 min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;
 padding:clamp(24px,2.6vw,34px);cursor:pointer;color:#fff}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile img.low{object-position:40% 52%}
.tile:after{content:'';position:absolute;inset:0;
 background:linear-gradient(0deg,rgba(6,14,10,.9) 4%,rgba(8,18,13,.42) 56%,rgba(8,18,13,.06))}
.tile>*:not(img){position:relative;z-index:2}
.tile .eyebrow{color:var(--beige);margin-bottom:8px}
/* no eyebrow on the work tiles — the title carries the block */
.tile .h3{font-size:clamp(23px,2.1vw,29px);letter-spacing:-.018em}
/* opt-in card — corner slide-in, dismissible, collapses to a tab */
.optin{position:fixed;right:var(--edge);bottom:var(--edge);z-index:60;
 width:min(370px,calc(100vw - var(--edge)*2));background:var(--cream);
 border-radius:var(--r);padding:27px 26px 24px;box-shadow:0 20px 54px rgba(30,42,36,.22);
 transform:translateY(28px);opacity:0;pointer-events:none;
 transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.optin.on{transform:none;opacity:1;pointer-events:auto}
.optin .x{position:absolute;top:13px;right:13px;width:30px;height:30px;padding:0;border:0;
 border-radius:50%;background:none;cursor:pointer;color:var(--ink2);font:400 19px/1 var(--sans)}
.optin .x:hover{background:rgba(30,42,36,.08);color:var(--ink)}
.optin .ot{font:600 19px/1.28 var(--sans);letter-spacing:-.012em;color:var(--ink);margin:0 30px 9px 0}
.optin .od{font:400 15px/1.5 var(--sans);color:var(--ink2);margin:0 0 17px}
.optin form{display:flex;flex-direction:column;gap:8px}
.optin input{flex:1;min-width:0;background:#fff;border:1px solid rgba(30,42,36,.22);
 border-radius:5px;padding:12px 13px;font:400 15px/1.1 var(--sans);color:var(--ink)}
.optin input:focus{outline:0;border-color:var(--green)}
.optin .btn{padding:12px 17px;font-size:15px;text-align:center}
.optin .fine{margin:12px 0 0;font:400 13px/1.4 var(--sans);color:var(--ink2)}
.otab{position:fixed;right:var(--edge);bottom:var(--edge);z-index:59;border:0;cursor:pointer;
 background:var(--green);color:#fff;border-radius:100px;padding:13px 19px;
 font:500 15px/1 var(--sans);box-shadow:0 12px 30px rgba(30,42,36,.2);
 transform:translateY(22px);opacity:0;pointer-events:none;
 transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.otab.on{transform:none;opacity:1;pointer-events:auto}
.otab:hover{background:#02563a}
@media(max-width:600px){.optin{padding:22px 20px 20px}}
.tile .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.tile.open .more{grid-template-rows:1fr}
.tile .more p{overflow:hidden;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.85)}
.tile.open .more p{padding-top:13px}
.tile .plus{position:absolute;z-index:2;top:24px;right:26px;width:36px;height:36px;
 border-radius:50%;background:rgba(255,255,255,.92);color:var(--green);
 display:grid;place-items:center;font:500 19px/1 var(--sans);transition:transform .3s}
.tile.open .plus{transform:rotate(45deg)}
.tile.plain{background:var(--sage);color:var(--ink)}
.tile.plain:after{display:none}
.tile.plain .eyebrow{color:var(--ink2)}
.tile.plain .more p{color:var(--ink2)}
.tile.plain .plus{background:var(--green);color:#fff}

/* ---------- proof ---------- */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.v{position:relative;cursor:pointer;overflow:hidden;border-radius:var(--r);
 background:#0B1310;aspect-ratio:16/10}
.v img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:.4s}
.v:hover img{opacity:1;transform:scale(1.03)}
.v .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;
 border-radius:50%;background:rgba(255,255,255,.94);color:var(--green);
 display:grid;place-items:center;font-size:15px;padding-left:3px}
.v .who{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;
 font:500 15px/1.35 var(--sans);background:linear-gradient(0deg,rgba(6,12,9,.92),transparent)}
.v .who em{display:block;font-style:normal;font-weight:400;font-size:13px;
 color:rgba(255,255,255,.72);margin-top:3px}
.quotes{columns:3;column-gap:var(--gap);margin-top:34px}
.q{break-inside:avoid;margin-bottom:var(--gap);padding-bottom:20px;
 border-bottom:1px solid rgba(231,239,233,.16)}
.q p{font:300 16.5px/1.45 var(--serif);font-style:italic;color:rgba(231,239,233,.92)}
.q .by{margin-top:12px;font:500 13.5px/1.4 var(--sans);color:var(--beige)}

/* ---------- who ---------- */
.pull{font:300 clamp(21px,2.2vw,29px)/1.22 var(--serif);font-style:italic;color:var(--green);
 margin:24px 0;padding-left:24px;border-left:2px solid var(--gold)}

/* ---------- close ---------- */
.run p{color:var(--ink2);line-height:1.6}
.run p+p{margin-top:1em}
.run .mid2{font:300 clamp(19px,1.9vw,25px)/1.28 var(--serif);font-style:italic;color:var(--ink)}
.run .big{font:500 clamp(23px,2.5vw,34px)/1.1 var(--sans);letter-spacing:-.022em;color:var(--ink);
 margin:1em 0}
.run .end{font:500 clamp(21px,2.2vw,29px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--green);
 margin-top:1.1em;padding-top:1.1em;border-top:1px solid rgba(30,42,36,.16);max-width:20ch}
.ask{display:flex;flex-direction:column;justify-content:center}
.ask p{margin:16px 0;max-width:44ch}
.ask .btn{align-self:flex-start;margin-top:12px}

footer{padding:clamp(40px,4vw,64px) 0 clamp(30px,3vw,48px)}
footer .w{display:flex;flex-wrap:wrap;gap:26px 60px;justify-content:space-between}
footer a{display:block;padding:4px 0;color:var(--ink2)}
footer a:hover{color:var(--green)}
footer .fm{font:400 23px/1 var(--serif);color:var(--green);margin-bottom:12px}
footer .eyebrow{margin-bottom:8px}


/* ---------- expandable rows ---------- */
.acc{padding:clamp(6px,.8vw,14px) clamp(22px,3.4vw,52px);max-width:960px;margin:0 auto}
.acc .row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;
 background:none;border:0;border-top:1px solid rgba(30,42,36,.15);cursor:pointer;
 text-align:left;padding:clamp(22px,2.4vw,30px) 0;color:var(--ink);font-family:var(--sans)}
.acc .row:first-of-type{border-top:0}
.acc .row .ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--sage);
 color:var(--green);display:grid;place-items:center;font:500 20px/1 var(--sans);
 transition:transform .32s ease}
.acc .row.on .ic{transform:rotate(45deg)}
.acc .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease}
.acc .panel.on{grid-template-rows:1fr}
.acc .panel>.inner{overflow:hidden}
.acc .panel .pad2{padding:0 0 clamp(24px,2.6vw,34px);max-width:66ch}

/* ---------- testimonials: a scroll, not a wall ---------- */
.trailwrap{position:relative;margin-top:clamp(26px,3vw,38px)}
.trail{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
 padding-bottom:8px;scrollbar-width:none}
.trail::-webkit-scrollbar{display:none}
.tcard{flex:0 0 min(410px,80vw);scroll-snap-align:start;background:rgba(255,255,255,.07);
 border-radius:18px;padding:26px;display:flex;flex-direction:column;justify-content:space-between}
.tcard p{font:300 16.5px/1.45 var(--serif);font-style:italic;color:rgba(231,239,233,.93)}
.tcard .by{margin-top:20px;font:500 13.5px/1.4 var(--sans);color:var(--beige)}
.tnav{display:flex;gap:10px;margin-top:22px}
.tnav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(231,239,233,.38);
 background:none;color:#E7EFE9;cursor:pointer;font:400 16px/1 var(--sans)}
.tnav button:hover{background:rgba(231,239,233,.13)}
.tnav.light button{border-color:rgba(30,42,36,.34);color:var(--ink)}
.tnav.light button:hover{background:rgba(30,42,36,.07)}


/* ---------- the story folds in the middle, payoff always visible ---------- */
.fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.fold.on{grid-template-rows:1fr}
.fold>.in2{overflow:hidden}
.more-btn{display:flex;justify-content:center;margin-top:26px}
.more-btn button{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
 font:500 16px/1 var(--sans);color:var(--green);border-bottom:1px solid rgba(1,61,39,.4);
 padding:0 0 5px}
.more-btn button:hover{border-bottom-color:var(--green)}
.more-btn button .ch{transition:transform .3s}
.more-btn.on button .ch{transform:rotate(180deg)}


/* ---------- mobile: side-scroll instead of a four-storey stack ---------- */
@media(max-width:1000px){
 .quad,.vids{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .quad::-webkit-scrollbar,.vids::-webkit-scrollbar{display:none}
 .quad>.tile{flex:0 0 min(330px,78vw);scroll-snap-align:start;min-height:380px}
 .vids>.v{flex:0 0 min(330px,80vw);scroll-snap-align:start}
 }
@media(min-width:1001px){.tnav.light{display:none}}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:99;background:rgba(8,14,11,.95);display:grid;place-items:center;padding:5vh 5vw}
.lb .fr{width:100%;max-width:980px;aspect-ratio:16/9;border-radius:16px;overflow:hidden}
.lb.tall .fr{max-width:min(400px,50vh);aspect-ratio:9/16}
.lb iframe{width:100%;height:100%;border:0}
.lb .x{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.92);border:0;
 color:var(--green);width:42px;height:42px;border-radius:50%;font-size:17px;cursor:pointer}

@media(max-width:1000px){
 .duo,.duo.wide,.trio,.quad,.vids{grid-template-columns:1fr}
 .quotes{columns:2}
 .art{min-height:300px;order:-1}
 .tile{min-height:300px}
}
@media(max-width:900px){
 .hero{height:auto;min-height:0;display:flex;flex-direction:column}
 .hero .in{position:relative;inset:auto;display:block;order:2;padding:44px clamp(26px,4vw,40px) 46px}
 .hero .t{max-width:none}.hero .sub{max-width:none}
 .hero .ph{position:relative;inset:auto;order:3;height:340px}
 .hero .ph i{background-size:auto 150%;background-position:46% 0%}
 .hero .ph:after{background:linear-gradient(180deg,#02170F,rgba(2,26,16,.7) 14%,rgba(2,26,16,0) 46%)}
 .hero .ph:before{display:none}

}
@media(max-width:620px){.quotes{columns:1}}

/* ---------- mobile nav ---------- */
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
 align-items:center;justify-content:center;padding:0;color:var(--ink)}
.burger span{display:block;position:relative;width:22px;height:2px;background:currentColor;
 transition:transform .3s,background .1s .15s}
.burger span:before,.burger span:after{content:'';position:absolute;left:0;width:22px;height:2px;
 background:currentColor;transition:transform .3s,top .3s .15s}
.burger span:before{top:-7px}.burger span:after{top:7px}
nav.open .burger span{background:transparent}
nav.open .burger span:before{top:0;transform:rotate(45deg)}
nav.open .burger span:after{top:0;transform:rotate(-45deg)}
@media(max-width:820px){
 nav{position:sticky;top:0}
 .burger{display:flex}
 .nl{position:absolute;left:var(--edge);right:var(--edge);top:76px;flex-direction:column;
  align-items:stretch;gap:0;background:var(--cream);border-radius:var(--r);
  padding:8px var(--pad2,22px);box-shadow:0 18px 40px rgba(30,42,36,.16);
  max-height:0;overflow:hidden;opacity:0;pointer-events:none;
  transition:max-height .32s ease,opacity .22s ease}
 nav.open .nl{max-height:420px;opacity:1;pointer-events:auto;padding-top:10px;padding-bottom:18px}
 .nl a{padding:15px 4px;font-size:17px;border-bottom:1px solid rgba(30,42,36,.12)}
 .nl a:last-child{border-bottom:0}
 .nl a.btn{margin-top:14px;text-align:center;padding:15px 21px}
}

/* ===== stories ===== */
/* ---------- stories index ---------- */
.pagehead{padding:clamp(46px,5vw,84px) 0 clamp(30px,3.4vw,48px)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);grid-auto-rows:1fr}
.sc{display:flex;flex-direction:column;background:var(--cream);border-radius:var(--r);
 padding:clamp(26px,2.6vw,36px);color:var(--ink);transition:transform .25s ease,background .25s ease}
.sc:hover{background:#FBF8F2;transform:translateY(-2px)}
.sc .ti{display:block;font:600 clamp(19px,1.7vw,23px)/1.24 var(--sans);letter-spacing:-.016em}
.sc .hk{display:block;margin-top:14px;font:300 17px/1.5 var(--serif);font-style:italic;color:var(--ink2)}
.sc .go{margin-top:auto;padding-top:clamp(22px,2.4vw,30px);font:500 15px/1 var(--sans);color:var(--green)}
@media(max-width:1000px){.grid{grid-template-columns:1fr;grid-auto-rows:auto}}

/* ===== about ===== */
/* ---------- about ---------- */
.pagehead{padding:clamp(46px,5vw,80px) 0 clamp(26px,3vw,40px)}
.banner{position:relative;overflow:hidden;border-radius:var(--r);height:clamp(300px,44vw,520px)}
.banner img{width:100%;height:100%;object-fit:cover}
.prose{max-width:62ch;margin:0 auto}
.prose p{font-size:17px;line-height:1.68;color:var(--ink2)}
.prose p+p{margin-top:1.05em}
.turn{text-align:center;max-width:34ch;margin:clamp(34px,4vw,56px) auto;color:var(--green)}
.st{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--gap);align-items:stretch}
.st.flip .art{order:2}
.st .art{align-self:start;position:sticky;top:100px;height:min(620px,74vh);min-height:420px}
.st .art.whole{height:auto;min-height:0;background:none}
.st .art.whole img{position:relative;inset:auto;width:100%;height:auto;object-fit:fill}
.st .card{padding:clamp(30px,3.4vw,56px)}
.stitle{font:600 clamp(23px,2.1vw,29px)/1.16 var(--sans);letter-spacing:-.02em;color:var(--ink);
 margin-bottom:clamp(20px,2.2vw,28px);padding-bottom:16px;
 border-bottom:1px solid rgba(30,42,36,.14)}
.st .card p{font-size:17px;line-height:1.68;color:var(--ink2)}
.st .card p+p{margin-top:1.02em}
.lil{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--gap);align-items:stretch}
.lil ul{list-style:none;margin-top:4px}
.lil li{font-size:17px;line-height:1.6;color:var(--ink2);padding:13px 0;
 border-bottom:1px solid rgba(30,42,36,.13)}

@media(max-width:1000px){.st,.st.flip,.lil{grid-template-columns:1fr}
 .st .art{position:relative;top:auto;height:auto;min-height:300px;order:-1}
 .st .art.whole{min-height:0}.st.flip .art{order:-1}}

/* ===== speaking ===== */
/* ---------- speaking ---------- */
.pagehead{padding:clamp(46px,5vw,80px) 0 clamp(30px,3.4vw,48px)}
.talk{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--gap);align-items:stretch}
.talk.flip .art{order:-1}
.talk .art{align-self:start;position:sticky;top:100px;height:min(600px,72vh);min-height:420px}
.talk .card{padding:clamp(30px,3.4vw,56px)}
.tq{font:300 clamp(19px,1.9vw,25px)/1.3 var(--serif);font-style:italic;color:var(--green);
 margin:16px 0 22px;padding-left:22px;border-left:2px solid var(--gold)}
.talk .card p{font-size:17px;line-height:1.66;color:var(--ink2)}
.leave{margin-top:28px}
.leave .lb2{font:600 15px/1 var(--sans);color:var(--ink);margin-bottom:6px}
.leave ul{list-style:none}
.leave li{font-size:16.5px;line-height:1.55;color:var(--ink2);padding:12px 0;
 border-bottom:1px solid rgba(30,42,36,.13)}
.spec{margin-top:24px;font:500 14.5px/1.5 var(--sans);color:var(--ink2)}
.banner{position:relative;overflow:hidden;border-radius:var(--r);height:clamp(280px,38vw,460px)}
.banner img{width:100%;height:100%;object-fit:cover}
.venues{columns:2;column-gap:clamp(30px,4vw,64px);margin-top:26px}
.venues li{list-style:none;font-size:16.5px;line-height:1.5;color:var(--ink2);
 padding:11px 0;border-bottom:1px solid rgba(30,42,36,.13);break-inside:avoid}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);margin-top:30px}
.pair .q2 p{font:300 17.5px/1.5 var(--serif);font-style:italic;color:rgba(231,239,233,.93)}
.pair .q2 .by{margin-top:16px;font:500 13.5px/1.45 var(--sans);color:var(--beige)}
@media(max-width:1000px){
 .talk,.talk.flip,.pair{grid-template-columns:1fr}
 .talk .art{position:relative;top:auto;height:auto;min-height:300px;order:-1}
 .talk.flip .art{order:-1}
 .venues{columns:1}
}

/* ===== story ===== */
/* ---------- one story ---------- */
.pagehead{padding:clamp(40px,4.4vw,70px) 0 clamp(26px,3vw,40px)}
.back{display:inline-flex;align-items:center;gap:9px;font:500 15px/1 var(--sans);color:var(--ink2)}
.back:hover{color:var(--green)}
.read{max-width:66ch;margin:0 auto}
.read p{font-size:17.5px;line-height:1.72;color:var(--ink2)}
.read p+p{margin-top:1.1em}
.nextup{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px}
.nextup .lb3{font:500 15px/1.4 var(--sans);color:var(--ink2)}
.nextup a{font:600 clamp(19px,1.8vw,24px)/1.28 var(--sans);letter-spacing:-.018em;color:var(--ink)}
.nextup a:hover{color:var(--green)}