/* Layout concept: an editorial folio — a 12-column grid with wide margins, hairline sandstone rules,
   monumental serif capitals set against quiet sans body, and one deep-umber room per page for contrast.
   Single committed look (parchment); the brand palette is the theme. */
:root{
  color-scheme:light;
  --parchment:#F0E6D7; --ivory:#F7F0E5; --ink:#231E1A; --terracotta:#A34325; --copper:#BA7355;
  --stone:#6E6257; --sandstone:#D4C5B3; --umber:#241D19; --limestone:#F0E5D6; --umber-2:#2F2621;
  --stone-on-dark:#B9AA99; --rule-on-dark:#4A3D35;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,5vw,76px); --max:1480px;
  --sec:clamp(76px,10vw,156px);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.25s; --t:.6s; --t-slow:1.2s;
  --header-h:76px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--sans);font-size:clamp(1.02rem,.3vw + .96rem,1.16rem);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:2px}
.dark :focus-visible{outline-color:var(--copper)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--limestone);padding:10px 16px;z-index:100}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
.eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--stone);display:flex;gap:.9em;align-items:center;flex-wrap:wrap}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--copper);flex:none}
.eyebrow.plain::before{display:none}
.display,.statement,.h2{font-family:var(--serif);text-transform:uppercase;line-height:.96;letter-spacing:.005em;font-weight:500}
.display{font-size:clamp(2.75rem,7.3vw,7.5rem)}
.display.page{font-size:clamp(2.6rem,6.4vw,6.6rem)}
.statement{font-size:clamp(2.4rem,5.6vw,5.6rem)}
.h2{font-size:clamp(2.1rem,4.2vw,4.1rem);line-height:1}
.h3{font-family:var(--serif);font-size:clamp(1.7rem,2.5vw,2.5rem);line-height:1.08;font-weight:500}
.h4{font-family:var(--serif);font-size:clamp(1.35rem,1.6vw,1.65rem);line-height:1.15;font-weight:600}
.display span.l,.statement span.l,.h2 span.l{display:block}
em.t{font-style:normal;color:var(--terracotta)}
.dark em.t{color:var(--copper)}
.lede{font-size:clamp(1.08rem,.5vw + 1rem,1.32rem);line-height:1.6;max-width:36em;color:var(--ink)}
.muted{color:var(--stone)}
.aside{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.2vw,2.1rem);line-height:1.25;color:var(--stone);max-width:26em}
.num{font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--copper)}
.stack{display:flex;flex-direction:column;gap:var(--g,1.4rem)}
.measure{max-width:38em}

/* ---------- links ---------- */
.cta{display:inline-flex;align-items:baseline;gap:.6em;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;padding-block:.75em;border-bottom:1px solid currentColor;transition:color var(--t-fast),gap var(--t-fast) var(--ease);min-height:44px}
.cta .ar{display:inline-block;transition:transform var(--t-fast) var(--ease)}
.cta:hover{color:var(--terracotta)} .dark .cta:hover{color:var(--copper)}
.cta:hover .ar{transform:translate(3px,-3px)} .cta.down:hover .ar{transform:translateY(4px)}
.cta.quiet{border-bottom-color:transparent;color:var(--stone)}
.cta.solid{border:1px solid var(--ink);padding:1em 1.5em}
.cta.solid:hover{background:var(--ink);color:var(--limestone)}
.ctas{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center}
.mail{font-family:var(--serif);text-decoration:none;border-bottom:1px solid var(--sandstone);transition:border-color var(--t-fast),color var(--t-fast);overflow-wrap:anywhere}
.mail:hover{color:var(--terracotta);border-color:var(--terracotta)}
.dark .mail{border-color:var(--rule-on-dark)} .dark .mail:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- header ---------- */
.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;border-bottom:1px solid transparent;transition:background var(--t-fast),border-color var(--t-fast)}
.site.scrolled{background:rgba(240,230,215,.94);backdrop-filter:blur(6px);border-bottom-color:var(--sandstone)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h)}
.brand{display:block;flex:none} .brand img{height:38px;width:auto}
.nav{display:flex;gap:clamp(14px,2vw,34px);align-items:center}
.nav a{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500;text-decoration:none;padding-block:10px;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform var(--t-fast) var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--terracotta)}
.nav a.contact{border:1px solid var(--ink);padding:9px 16px;font-weight:600}
.nav a.contact::after{display:none}
.nav a.contact:hover,.nav a.contact[aria-current=page]{background:var(--ink);color:var(--limestone)}
.menu-btn{display:none;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;min-height:44px;padding-inline:4px}
.mobile{position:fixed;inset:0;z-index:60;background:var(--parchment);padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gutter) 32px;display:flex;flex-direction:column;overflow-y:auto}
.mobile .top{display:flex;justify-content:space-between;align-items:center;height:calc(var(--header-h) - 18px)}
.mobile nav{display:flex;flex-direction:column;margin-top:5vh;border-top:1px solid var(--sandstone)}
.mobile nav a{font-family:var(--serif);font-size:clamp(2rem,9vw,3rem);text-transform:uppercase;text-decoration:none;line-height:1;padding-block:.42em;border-bottom:1px solid var(--sandstone);display:flex;justify-content:space-between;align-items:baseline}
.mobile nav a[aria-current=page]{color:var(--terracotta)}
.mobile nav a small{font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;color:var(--stone)}
.mobile .foot{margin-top:auto;padding-top:28px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
@media (max-width:1080px){.nav{display:none}.menu-btn{display:block}.brand img{height:32px}:root{--header-h:64px}}

/* ---------- sections ---------- */
.sec{padding-block:var(--sec);position:relative}
.sec.tight{padding-block:calc(var(--sec)*.62)}
.sec.ivory{background:var(--ivory)}
.sec.ruled{border-top:1px solid var(--sandstone)}
.dark{background:var(--umber);color:var(--limestone)}
.dark .eyebrow,.dark .muted{color:var(--stone-on-dark)}
.dark .lede{color:var(--limestone)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:clamp(28px,4vw,56px)}
.c-5{grid-column:span 5}.c-6{grid-column:span 6}.c-7{grid-column:span 7}.c-4{grid-column:span 4}.c-8{grid-column:span 8}.c-3{grid-column:span 3}.c-9{grid-column:span 9}
.s-2{grid-column-start:2}.s-7{grid-column-start:7}.s-8{grid-column-start:8}.s-6{grid-column-start:6}
@media (max-width:900px){.grid>*{grid-column:1/-1!important}}
.head{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,34px);margin-bottom:clamp(44px,6vw,88px)}
.art{position:relative;overflow:hidden;background:var(--sandstone)}
.art svg{width:100%;height:100%;position:absolute;inset:0}
.art.r45{aspect-ratio:4/5}.art.r32{aspect-ratio:3/2}.art.r169{aspect-ratio:16/9}.art.r11{aspect-ratio:1}
.art figcaption,.cap{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
figure{margin:0}
.rv{transform:translateY(22px);opacity:.55;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)}
.rv.in{transform:none;opacity:1}

/* ---------- home hero ---------- */
.hero{padding-block:clamp(28px,4vw,56px) clamp(56px,7vw,110px);position:relative}
.hero .grid{align-items:end}
.hero .txt{grid-column:1/8;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);padding-bottom:clamp(0px,3vw,48px);position:relative;z-index:2}
.hero .pic{grid-column:8/13;position:relative}
.hero .pic .art{aspect-ratio:4/5;margin-left:calc(-1*clamp(0px,5vw,90px))}
.hero .display{margin-right:-12%}
.hero .descriptor{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.hero .coords{position:absolute;right:0;bottom:-30px;display:flex;gap:18px}
.scrollcue{display:flex;align-items:center;gap:12px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-top:clamp(8px,2vw,28px)}
.scrollcue i{width:1px;height:44px;background:linear-gradient(var(--copper),transparent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes rise{from{transform:translateY(.5em);opacity:0}to{transform:none;opacity:1}}
@keyframes unveil{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.anim .display .l,.anim .fade{animation:rise 1.1s var(--ease) both}
.anim .display .l:nth-child(2){animation-delay:.12s}.anim .display .l:nth-child(3){animation-delay:.24s}.anim .display .l:nth-child(4){animation-delay:.36s}
.anim .fade{animation-delay:.45s}
.anim .unveil{animation:unveil 1.5s var(--ease) both .15s}
@media (max-width:900px){.hero .display{margin-right:0}.hero .pic .art{margin-left:0;aspect-ratio:5/4}}

/* ---------- page hero ---------- */
.phero{padding-block:clamp(36px,5vw,80px) clamp(56px,7vw,100px)}
.phero .txt{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px)}
.phero .band{margin-top:clamp(40px,6vw,84px)}
.phero .band .art{aspect-ratio:21/9}
@media (max-width:700px){.phero .band .art{aspect-ratio:4/3}}

/* ---------- diagram ---------- */
.diagram{margin-top:clamp(48px,7vw,100px);overflow-x:auto}
.diagram svg{min-width:640px;width:100%;height:auto}
.dg-line{stroke:var(--copper);fill:none;stroke-width:1}
.dg-txt{font-family:var(--serif);font-size:30px;fill:var(--ink);letter-spacing:.06em}
.dg-sm{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;fill:var(--stone);text-transform:uppercase}
.dark .dg-txt{fill:var(--limestone)} .dark .dg-sm{fill:var(--stone-on-dark)}
.draw .dg-line{stroke-dasharray:var(--len,1600);stroke-dashoffset:var(--len,1600);transition:stroke-dashoffset 2.2s var(--ease)}
.draw.in .dg-line{stroke-dashoffset:0}
.draw .dg-fade{opacity:.2;transition:opacity 1.2s var(--ease) .5s} .draw.in .dg-fade{opacity:1}

/* ---------- practice spreads ---------- */
.spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:center;padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--sandstone);position:relative;text-decoration:none}
.spread .pic{grid-column:1/8;grid-row:1}.spread .body{grid-column:9/13;grid-row:1}
.spread:nth-of-type(even) .pic{grid-column:6/13}.spread:nth-of-type(even) .body{grid-column:1/5}
.spread .pic .art{aspect-ratio:3/2}
.spread .pic svg{transition:transform 1.4s var(--ease)} .spread:hover .pic svg{transform:scale(1.03)}
.spread .body{display:flex;flex-direction:column;gap:1.3rem}
.spread .roman{font-family:var(--serif);font-size:clamp(3.4rem,6vw,6rem);line-height:.8;color:var(--copper)}
.spread .cta{align-self:flex-start}
.spread:hover .cta{color:var(--terracotta)} .spread:hover .ar{transform:translate(3px,-3px)}
@media (max-width:900px){.spread .pic,.spread .body,.spread:nth-of-type(even) .pic,.spread:nth-of-type(even) .body{grid-column:1/-1;grid-row:auto}.spread{row-gap:28px}}

/* ---------- tabs (shared) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px clamp(18px,3vw,44px);border-bottom:1px solid var(--sandstone)}
.dark .tabs{border-color:var(--rule-on-dark)}
.tabs button{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:16px 0;min-height:44px;position:relative;color:var(--stone);transition:color var(--t-fast);text-align:left}
.dark .tabs button{color:var(--stone-on-dark)}
.tabs button .n{font-family:var(--serif);font-size:1rem;letter-spacing:0;margin-right:.6em;color:var(--copper)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.dark .tabs button::after{background:var(--copper)}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:600} .dark .tabs button[aria-selected=true]{color:var(--limestone)}
.tabs button[aria-selected=true]::after{transform:scaleX(1)}
.tabs button:hover{color:var(--ink)} .dark .tabs button:hover{color:var(--limestone)}
.swap{animation:swap .55s var(--ease) both}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- experience gap ---------- */
.gap-stage{display:grid;grid-template-columns:1fr minmax(120px,.5fr) 1fr;gap:clamp(18px,3vw,48px);align-items:center;padding-block:clamp(40px,6vw,84px)}
.gap-stage .side{display:flex;flex-direction:column;gap:1.2rem}
.gap-stage .side.r{text-align:left}
.gap-stage q{quotes:"“" "”";font-family:var(--serif);font-size:clamp(1.7rem,3vw,3rem);line-height:1.1;display:block}
.gap-stage .side.r q{color:var(--copper);font-style:italic}
.gap-stage svg path{transition:d .9s var(--ease)}
.note{font-size:.82rem;color:var(--stone);max-width:44em} .dark .note{color:var(--stone-on-dark)}
@media (max-width:820px){.gap-stage{grid-template-columns:1fr}.gap-stage svg{max-width:220px;transform:rotate(90deg);margin:-30px auto}}

/* ---------- service rows ---------- */
.rows{border-top:1px solid var(--sandstone)}
.row{display:grid;grid-template-columns:minmax(70px,1.4fr) 5fr 5fr auto;gap:clamp(16px,3vw,48px);align-items:baseline;padding-block:clamp(26px,3.4vw,46px);border-bottom:1px solid var(--sandstone);text-decoration:none;position:relative}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--terracotta);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.row:hover::after,.row:focus-visible::after{transform:scaleX(1)}
.row .num{font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:.8}
.row .ar{font-size:1.5rem;color:var(--terracotta);transition:transform var(--t-fast) var(--ease)} .row:hover .ar{transform:translate(4px,-4px)}
.row p{color:var(--stone)}
@media (max-width:820px){.row{grid-template-columns:auto 1fr auto}.row p{grid-column:2/4}}

/* ---------- cinematic ---------- */
.cine{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;overflow:hidden;background:var(--umber);color:var(--limestone)}
.cine .bg{position:absolute;inset:-4% -2%}
.cine .bg svg{width:100%;height:100%}
.cine .mist{position:absolute;inset:0;background:radial-gradient(60% 40% at 30% 78%,rgba(240,229,214,.16),transparent 70%),radial-gradient(50% 35% at 75% 85%,rgba(186,115,85,.12),transparent 70%);animation:mist 26s ease-in-out infinite alternate}
@keyframes mist{from{transform:translateX(-3%)}to{transform:translateX(4%)}}
.cine .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,29,25,.9) 0%,rgba(36,29,25,.62) 45%,rgba(36,29,25,.08) 78%),linear-gradient(0deg,rgba(36,29,25,.75),transparent 55%)}
.cine .wrap{position:relative;width:100%;padding-block:clamp(72px,10vw,140px);display:flex;flex-direction:column;gap:28px}
.cine .statement{max-width:15em}
@media (max-width:700px){.cine .mist{animation:none}.cine .shade{background:linear-gradient(0deg,rgba(36,29,25,.94) 30%,rgba(36,29,25,.35))}}

/* ---------- process ---------- */
.process{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,80px);align-items:start}
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--copper);opacity:.6}
.steps button{text-align:left;display:flex;flex-direction:column;gap:14px;padding:0 12px 18px 0;position:relative}
.steps .dot{width:55px;height:55px;border:1px solid var(--copper);border-radius:50%;background:var(--parchment);display:grid;place-items:center;transition:background .4s,color .4s;position:relative}
.sec.ivory .steps .dot{background:var(--ivory)}
.steps .dot svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.1}
.steps button[aria-selected=true] .dot{background:var(--terracotta);border-color:var(--terracotta);color:var(--limestone)}
.steps .n{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.8rem);line-height:.9;color:var(--sandstone);transition:color .4s}
.steps button[aria-selected=true] .n,.steps button:hover .n{color:var(--ink)}
.steps .t{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.proc-panel{border-left:1px solid var(--copper);padding:6px 0 6px clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:1rem;min-height:15em}
.proc-panel li{padding-left:1.4em;position:relative;color:var(--stone)} .proc-panel li::before{content:"";position:absolute;left:0;top:.8em;width:.8em;height:1px;background:var(--copper)}
@media (max-width:900px){.process{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:6px}.steps::before{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto}.steps button{flex-direction:row;align-items:center;padding:8px 0;gap:18px}.steps .n{font-size:2.2rem;min-width:1.4em}}

/* ---------- questions / archive ---------- */
.qlist{border-top:1px solid var(--sandstone)}
.q{display:grid;grid-template-columns:minmax(60px,1fr) 6fr 4fr;gap:clamp(16px,3vw,56px);padding-block:clamp(28px,4vw,54px);border-bottom:1px solid var(--sandstone);align-items:start}
.q .num{font-size:1.5rem}
.q .side{display:flex;flex-direction:column;gap:1rem;color:var(--stone)}
@media (max-width:820px){.q{grid-template-columns:auto 1fr}.q .side{grid-column:2}}
.filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.filters button{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:10px 18px;min-height:44px;border:1px solid var(--sandstone);border-radius:100px;transition:all var(--t-fast)}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--limestone);border-color:var(--ink)}
.count{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-left:auto}
.entry{display:grid;grid-template-columns:minmax(64px,1fr) 5fr 6fr;gap:clamp(16px,3vw,56px);padding-block:clamp(28px,3.6vw,48px);border-bottom:1px solid var(--sandstone)}
.entry .meta{display:flex;flex-direction:column;gap:6px}
.entry dl{margin:0;display:grid;gap:1.1rem}
.entry dt{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:.3em}
.entry dd{margin:0;color:var(--stone)}
.tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}
.dark .tag{color:var(--copper)}
@media (max-width:820px){.entry{grid-template-columns:1fr}.entry .meta{flex-direction:row;gap:14px;align-items:baseline}}
.themes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-on-dark)}
.themes>div{padding:clamp(24px,3vw,40px) clamp(16px,2vw,32px) clamp(24px,3vw,40px) 0;border-right:1px solid var(--rule-on-dark);display:flex;flex-direction:column;gap:1.1rem;padding-left:clamp(16px,2vw,32px)}
.themes>div:first-child{padding-left:0}.themes>div:last-child{border-right:0}
.themes .roman{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--copper)}
.themes li{font-size:.92rem;color:var(--stone-on-dark);padding-block:.42em;border-top:1px solid var(--rule-on-dark)}
@media (max-width:1000px){.themes{grid-template-columns:1fr 1fr}.themes>div{border-right:0;border-bottom:1px solid var(--rule-on-dark);padding-left:0}}
@media (max-width:560px){.themes{grid-template-columns:1fr}}
.kinds{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--sandstone)}
.kinds>div{padding:22px 18px 22px 0;display:flex;flex-direction:column;gap:.6rem;font-size:.92rem;color:var(--stone)}
.kinds b{font-family:var(--serif);font-size:1.3rem;color:var(--ink);font-weight:600}
.kinds .st{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--terracotta)}
@media (max-width:1000px){.kinds{grid-template-columns:1fr 1fr}}@media (max-width:520px){.kinds{grid-template-columns:1fr}}

/* ---------- articles ---------- */
.arts{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,64px)}
.arts .rest{display:flex;flex-direction:column;gap:clamp(28px,3vw,44px)}
.card{display:flex;flex-direction:column;gap:1.1rem;text-decoration:none}
.card .art{aspect-ratio:3/2}
.card.small{display:grid;grid-template-columns:2fr 3fr;gap:clamp(16px,2vw,28px);align-items:start;padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--sandstone)}
.card.small:last-child{border-bottom:0}
.card.small .art{aspect-ratio:1}
.card .art svg{transition:transform 1.4s var(--ease)} .card:hover .art svg{transform:scale(1.035)}
.card .b{display:flex;flex-direction:column;gap:.8rem}
.card:hover .h3,.card:hover .h4{color:var(--terracotta)} .card:hover .ar{transform:translate(3px,-3px)}
.card .cta{align-self:flex-start;border-bottom:0;padding-block:.2em;min-height:0}
.card p{color:var(--stone)}
@media (max-width:900px){.arts{grid-template-columns:1fr}}
@media (max-width:480px){.card.small{grid-template-columns:1fr}.card.small .art{aspect-ratio:3/2}}
.article-head{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);padding-block:clamp(36px,5vw,72px) clamp(36px,5vw,64px)}
.article-head .display{font-size:clamp(2.4rem,5.4vw,5.4rem);max-width:15em}
.standfirst{font-family:var(--serif);font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.3;max-width:30em;color:var(--stone)}
.prose{max-width:40em;margin-inline:auto;display:flex;flex-direction:column;gap:1.35em;font-size:clamp(1.06rem,.3vw + 1rem,1.2rem);line-height:1.75}
.prose h2{font-family:var(--serif);font-size:clamp(1.8rem,2.6vw,2.4rem);line-height:1.1;margin-top:1em;font-weight:600}
.prose blockquote{margin:1em 0;padding:1.2em 0;border-block:1px solid var(--copper);font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.2;color:var(--terracotta)}
.prose .refs{font-size:.9rem;color:var(--stone);border-top:1px solid var(--sandstone);padding-top:1.4em;margin-top:1em}
.prose ul.b li{padding-left:1.4em;position:relative;margin-bottom:.5em}.prose ul.b li::before{content:"";position:absolute;left:0;top:.85em;width:.8em;height:1px;background:var(--copper)}
.back{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;font-weight:600;color:var(--stone);display:inline-flex;gap:.6em;min-height:44px;align-items:center}
.back:hover{color:var(--terracotta)}

/* ---------- index (moments) & explorer ---------- */
.index{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,88px);align-items:start}
.index .list{border-top:1px solid var(--sandstone)}
.index .list button{display:flex;justify-content:space-between;align-items:baseline;width:100%;text-align:left;font-family:var(--serif);font-size:clamp(1.7rem,2.8vw,2.7rem);line-height:1;padding-block:.5em;border-bottom:1px solid var(--sandstone);color:var(--stone);transition:color var(--t-fast),padding var(--t) var(--ease)}
.index .list button small{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;color:var(--copper)}
.index .list button[aria-selected=true]{color:var(--terracotta);padding-left:.5em}
.index .list button:hover{color:var(--ink)}
.index .panel{position:sticky;top:calc(var(--header-h) + 32px);display:flex;flex-direction:column;gap:1.3rem;padding:clamp(24px,3vw,44px);background:var(--ivory);border:1px solid var(--sandstone)}
.sec.ivory .index .panel{background:var(--parchment)}
.kv{display:grid;gap:1.2rem}
.kv>div{display:grid;gap:.35rem}
.kv .k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--copper)}
.kv li{padding-left:1.4em;position:relative;margin-bottom:.45em}.kv li::before{content:"";position:absolute;left:0;top:.8em;width:.8em;height:1px;background:var(--copper)}
@media (max-width:900px){.index{grid-template-columns:1fr}.index .panel{position:static}}
.explorer{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.explorer .out{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,4vw,72px)}
@media (max-width:900px){.explorer .out{grid-template-columns:1fr}}
.cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(24px,3.4vw,56px)}
.cols>*{display:flex;flex-direction:column;gap:.9rem;padding-top:1.4rem;border-top:1px solid var(--sandstone)}
.dark .cols>*{border-color:var(--rule-on-dark)}
.cols p{color:var(--stone)} .dark .cols p{color:var(--stone-on-dark)}
@media (max-width:900px){.cols{grid-template-columns:1fr 1fr}}@media (max-width:560px){.cols{grid-template-columns:1fr}}
.engage{display:grid;grid-template-columns:minmax(60px,1fr) 4fr 7fr;gap:clamp(16px,3vw,56px);padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--sandstone);scroll-margin-top:calc(var(--header-h) + 8px)}
.engage .num{font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:.8}
.engage .facts{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem clamp(20px,3vw,48px)}
.engage .facts>div{display:grid;gap:.35rem;align-content:start}
.engage .facts p,.engage .facts li{color:var(--stone);font-size:.98rem}
@media (max-width:900px){.engage{grid-template-columns:1fr}.engage .facts{grid-template-columns:1fr}}
.beliefs{counter-reset:b;border-top:1px solid var(--sandstone)}
.beliefs li{counter-increment:b;display:grid;grid-template-columns:minmax(48px,1fr) 11fr;gap:16px;align-items:baseline;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.1;padding-block:.55em;border-bottom:1px solid var(--sandstone)}
.beliefs li::before{content:counter(b,upper-roman);font-size:1rem;color:var(--copper)}

/* ---------- contact ---------- */
.directory{border-top:1px solid var(--sandstone)}
.dir{display:grid;grid-template-columns:minmax(60px,1fr) 4fr 7fr;gap:clamp(16px,3vw,56px);padding-block:clamp(36px,5vw,68px);border-bottom:1px solid var(--sandstone);align-items:start}
.dir .num{font-size:1.5rem}
.dir .who{display:flex;flex-direction:column;gap:.9rem} .dir .who p{color:var(--stone)}
.dir .addr{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.dir .addr .mail{font-size:clamp(1.55rem,3.6vw,3.4rem);line-height:1.1;user-select:all}
.dir .acts{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}
.copy{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--stone);min-height:44px;border-bottom:1px solid transparent}
.copy:hover{color:var(--terracotta)}
@media (max-width:820px){.dir{grid-template-columns:1fr}}

/* ---------- final cta & footer ---------- */
.final{position:relative;overflow:hidden}
.final .lines{position:absolute;right:-6%;bottom:0;width:min(58%,820px);opacity:.75;pointer-events:none}
.final .wrap{position:relative;display:flex;flex-direction:column;gap:clamp(22px,3vw,38px)}
.final .bigmail{font-size:clamp(1.5rem,3vw,2.6rem)}
@media (max-width:820px){.final .lines{width:120%;right:-40%;opacity:.35}}
footer.foot{background:var(--umber);color:var(--limestone);padding-block:clamp(56px,7vw,100px) 28px}
.foot .top{display:grid;grid-template-columns:5fr 2fr 4fr;gap:clamp(32px,5vw,80px);padding-bottom:clamp(40px,5vw,72px)}
.foot .mark{display:flex;flex-direction:column;gap:1.3rem}
.foot .mark img{width:min(420px,100%)}
.foot .desc{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-on-dark)}
.foot .tagline{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--copper)}
.foot h2{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-on-dark);font-weight:600;margin-bottom:1.2rem}
.foot nav a{display:block;text-decoration:none;padding-block:.32em;font-size:.95rem} .foot nav a:hover{color:var(--copper)}
.foot .corr{display:grid;gap:1.1rem} .foot .corr span{display:block;font-size:.82rem;color:var(--stone-on-dark)} .foot .corr .mail{font-size:1.35rem}
.foot .base{border-top:1px solid var(--rule-on-dark);padding-top:22px;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;font-size:.8rem;color:var(--stone-on-dark)}
.foot .base a{text-underline-offset:4px} .foot .base a:hover{color:var(--copper)}
@media (max-width:900px){.foot .top{grid-template-columns:1fr 1fr}.foot .mark{grid-column:1/-1}}
@media (max-width:520px){.foot .top{grid-template-columns:1fr}}
main{animation:page .5s var(--ease) both;outline:none}
@keyframes page{from{opacity:.0}to{opacity:1}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--limestone);padding:12px 20px;font-size:.8rem;letter-spacing:.08em;z-index:80}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{transform:none;opacity:1}
  .draw .dg-line{stroke-dashoffset:0}.draw .dg-fade{opacity:1}
}
.display,.statement,.h2{overflow-wrap:break-word}
.hero .display{font-size:clamp(2.6rem,6.2vw,6.4rem)}
@media (max-width:900px){.display,.display.page,.hero .display{font-size:clamp(1.9rem,9vw,4.4rem)}.statement{font-size:clamp(1.8rem,8.4vw,3.8rem)}.h2{font-size:clamp(1.7rem,7.4vw,3rem)}.article-head .display{font-size:clamp(1.8rem,7.6vw,3.4rem)}}
.arts.filtered{grid-template-columns:1fr;max-width:920px}
.eyebrow span.s::before{content:"/";margin-right:.9em;color:var(--copper)}
.c-3{grid-column:auto/span 3}.c-4{grid-column:auto/span 4}.c-5{grid-column:auto/span 5}.c-6{grid-column:auto/span 6}.c-7{grid-column:auto/span 7}.c-8{grid-column:auto/span 8}.c-9{grid-column:auto/span 9}
.s-7{grid-column-start:7}.s-8{grid-column-start:8}.s-6{grid-column-start:6}.s-10{grid-column-start:10}
.hero .display{font-size:clamp(2.6rem,6.8vw,7rem)}
@media (max-width:900px){.hero .display{font-size:clamp(1.9rem,9vw,4.4rem)}}
.steps button[aria-selected=true] .dot,.sec.ivory .steps button[aria-selected=true] .dot{background:var(--terracotta);border-color:var(--terracotta);color:var(--limestone)}
.cine .bg{inset:-4% -2% -4% 28%}
.cine .statement{max-width:11.5em}
.dg-txt{font-size:27px}
@media (max-width:700px){.cine .bg{inset:-4% -30% -4% 0}}

.foot .mark img{width:min(380px,100%);height:auto}
.brand img{object-fit:contain}
span.mail{user-select:all;cursor:text}
span.mail:hover{color:inherit;border-color:var(--sandstone)} .dark span.mail:hover{color:inherit;border-color:var(--rule-on-dark)}
.hero .display{font-size:clamp(2.35rem,6.1vw,6.3rem)}
@media (max-width:900px){.hero .display{font-size:clamp(1.7rem,8.1vw,3.95rem)}}
.hero .display{font-size:clamp(2.1rem,5.1vw,5.3rem)}
@media (max-width:900px){.hero .display{font-size:clamp(1.55rem,7vw,3.4rem)}}
:root{--header-h:88px}
.brand img{height:50px}
@media (max-width:1080px){:root{--header-h:70px}.brand img{height:40px}}