*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* taken from the real calissa.ai capture */
  --cream:#f0efe4;
  --cream-2:#e8e6d8;
  --ink:#1d3a3a;
  --ink-soft:#41605c;
  --muted:#8a9088;
  --rule:#d5d2c2;
  --chai:#b8763a;
  --paper:#f7f6ee;

  --serif:"Hoefler Text","Baskerville","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

html{-webkit-text-size-adjust:100%}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--muted)}

/* ---------- header: tiny, wide-tracked, top right, like the reference ---------- */
header{position:absolute;top:0;left:0;right:0;z-index:20;padding:26px 0}
header .shell{display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-family:var(--serif);font-size:21px;letter-spacing:.01em;color:var(--paper)}
nav{display:flex;gap:26px;flex-wrap:wrap}
nav a{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
      color:rgba(247,246,238,.86);transition:color .2s var(--ease)}
nav a:hover,nav a[aria-current]{color:#fff}
header.solid .wordmark{color:var(--ink)}
header.solid nav a{color:var(--ink-soft)}
header.solid nav a:hover,header.solid nav a[aria-current]{color:var(--ink)}
header.solid{position:sticky;background:var(--cream);border-bottom:1px solid var(--rule);
             padding:16px 0}

/* ---------- hero: one enormous photograph, type laid over it ---------- */
.hero{position:relative;min-height:min(84vh,780px);display:flex;align-items:flex-end;
      overflow:hidden;background:#2b2a26}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
          object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(14,12,10,.34) 0%,rgba(14,12,10,0) 34%,
  rgba(14,12,10,.34) 100%)}
.hero .panel{background:rgba(14,12,10,.82);backdrop-filter:blur(7px);
  padding:clamp(22px,2.6vw,38px);max-width:min(42ch,50%);margin-right:auto}
@media (max-width:760px){.hero .panel{max-width:100%}}
.hero .shell{position:relative;z-index:5;padding-bottom:clamp(38px,6vw,76px);width:100%}
.hero h1{font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(2.4rem,6.6vw,5.4rem);line-height:1.02;letter-spacing:-.02em;max-width:20ch;
  text-shadow:0 2px 34px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.35)}
.hero .sub{margin-top:20px;color:rgba(255,255,255,.94);font-size:clamp(15px,1.5vw,19px);
           max-width:46ch;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero .meta{position:absolute;left:var(--gutter);top:clamp(84px,12vw,150px);z-index:5;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.hero .scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7)}

/* ---------- the statement: the reference does this, and it works ---------- */
.statement{padding:clamp(64px,10vw,140px) 0}
.statement blockquote{font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.statement p{margin-top:34px;max-width:58ch;color:var(--ink-soft);font-size:clamp(16px,1.4vw,18px)}

section{padding:clamp(48px,7vw,104px) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
          padding-bottom:20px;border-bottom:1px solid var(--rule);margin-bottom:clamp(30px,4vw,54px)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.7rem);
   line-height:1.06;letter-spacing:-.02em}

/* ---------- work: large photographs, minimal furniture ---------- */
.works{display:grid;gap:clamp(34px,5vw,74px)}
@media(min-width:820px){.works{grid-template-columns:1fr 1fr}}
.work{display:block}
.work .ph{overflow:hidden;background:var(--cream-2);aspect-ratio:4/3}
.work .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease),filter .5s var(--ease)}
.work:hover .ph img{transform:scale(1.035)}
.work .row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:18px}
.work h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.9rem);
         letter-spacing:-.02em}
.work .yr{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.work .ln{margin-top:8px;color:var(--ink-soft);max-width:44ch}
.work .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--muted);margin-top:12px;display:inline-block}
.work:hover .go{color:var(--ink)}

/* ---------- the bridge: a place to a place ----------
   Copied in structure from calissa.ai, which runs a From Singapore to San
   Francisco band with one wide image and a single bridging line. Ours is
   Dhaka to Oakville. */
.bridge{padding:clamp(48px,7vw,110px) 0;border-top:1px solid var(--rule)}
.bridge .banner{position:relative;overflow:hidden;background:var(--cream-2);aspect-ratio:21/8;
  margin-top:clamp(24px,3vw,40px)}
.bridge .banner img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.bridge .places{display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.bridge .from,.bridge .to{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.02em}
.bridge .to{color:var(--muted)}
.bridge .arw{font-family:var(--mono);color:var(--muted);font-size:clamp(14px,1.6vw,20px)}
.bridge .bl{margin-top:22px;max-width:56ch;color:var(--ink-soft);font-size:clamp(16px,1.4vw,18px)}

/* ---------- the work cards ----------
   A card is a card: image, icon, title, year, one line. It does not expand in
   place, because expanding in place shoved the grid around and looked broken.
   It opens the story over the top instead. */
.posts{display:grid;gap:clamp(20px,2.6vw,34px)}
@media(min-width:820px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:block}
.cardbtn{display:block;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--rule);padding:0;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .28s var(--ease),transform .28s var(--ease),
             box-shadow .28s var(--ease)}
.cardbtn:hover{border-color:var(--rule-2);transform:translateY(-3px);
  box-shadow:0 14px 34px -20px rgba(24,30,28,.45)}
.cardbtn .ph{display:block;position:relative;overflow:hidden;background:var(--cream-2);
  aspect-ratio:4/3}
.cardbtn .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform 1s var(--ease)}
.cardbtn:hover .ph img{transform:scale(1.04)}
.cardbtn .phead{display:flex;align-items:center;gap:10px;padding:18px 20px 0}
.cardbtn .pi{color:var(--chai);flex:0 0 auto;display:flex}
.cardbtn .pname{font-family:var(--serif);font-size:clamp(1.06rem,1.6vw,1.3rem);
  letter-spacing:-.015em;flex:1;line-height:1.24}
.cardbtn .pyr{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--muted)}
.cardbtn .pline{display:block;padding:9px 20px 0;color:var(--ink-soft);font-size:14.6px;
  line-height:1.5}
.cardbtn .pread{display:block;padding:14px 20px 20px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .2s var(--ease)}
.cardbtn:hover .pread{color:var(--chai)}

/* ---------- the glass sheet ----------
   The story opens over the page. The page underneath does not move, which is the
   whole point: the grid stays where the reader left it. */
.sheet{border:0;padding:0;background:transparent;max-width:min(940px,92vw);
  width:100%;max-height:90vh;overflow:visible}
.sheet::backdrop{background:rgba(16,20,19,.55);backdrop-filter:blur(7px) saturate(120%)}
.sheetin{position:relative;background:rgba(250,249,244,.93);
  backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 40px 90px -30px rgba(16,24,22,.6);max-height:90vh;overflow:auto;
  animation:sheetin .34s var(--ease) both}
@keyframes sheetin{from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheetin{animation:none}}
.sheetx{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;
  border:1px solid var(--rule);background:rgba(255,255,255,.9);color:var(--ink);
  font-size:22px;line-height:1;cursor:pointer;border-radius:50%;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.sheetx:hover{background:#fff;transform:rotate(90deg)}
.sheetimg{aspect-ratio:16/7;overflow:hidden;background:var(--cream-2)}
.sheetimg img{width:100%;height:100%;object-fit:cover;display:block}
.sheetbody{padding:clamp(24px,3.4vw,44px);display:grid;gap:26px}
.sheetbody .part{display:grid;grid-template-columns:24px 1fr;gap:15px;align-items:start}
.sheetbody .part svg{color:var(--chai);margin-top:3px}
.sheetbody .part h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:8px}
.sheetbody .part p{color:var(--ink-soft);font-size:15px;line-height:1.66;margin:0}
@media (max-width:640px){.sheetimg{aspect-ratio:4/3}}

/* ---------- the logo ---------- *//* ---------- the logo ---------- */
.wordmark{display:inline-flex;align-items:center;gap:12px;font-family:var(--serif);
          font-weight:600;font-size:24px;letter-spacing:.01em;color:var(--paper)}
.wordmark svg{display:block;flex:0 0 auto}
header.solid .wordmark{color:var(--ink)}
header.solid .wordmark svg circle{fill:var(--chai)}
footer .wordmark{color:var(--ink)}

/* ---------- inline event posts ----------
   The information lives on the page. Nothing requires a second load. */
.posts{display:grid;gap:clamp(26px,3.4vw,48px)}
@media(min-width:880px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{border:1px solid var(--rule);background:var(--paper);display:block}
.post summary{list-style:none;cursor:pointer;display:block;padding:0}
.post summary::-webkit-details-marker{display:none}
.post .ph{overflow:hidden;background:var(--cream-2);aspect-ratio:4/3}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post summary:hover .ph img{transform:scale(1.03)}
.post .phead{display:flex;align-items:center;gap:10px;padding:20px 22px 0}
.post .pi{color:var(--chai);flex:0 0 auto;display:block}
.post .pname{font-family:var(--serif);font-size:clamp(1.15rem,1.8vw,1.45rem);
             letter-spacing:-.015em;flex:1}
.post .pyr{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--muted)}
.post .pchev{width:11px;height:11px;flex:0 0 auto;position:relative}
.post .pchev::before,.post .pchev::after{content:"";position:absolute;background:var(--muted);
  transition:transform .35s var(--ease),background .2s var(--ease)}
.post .pchev::before{left:0;top:5px;width:11px;height:1.4px}
.post .pchev::after{left:5px;top:0;width:1.4px;height:11px}
.post[open] .pchev::after{transform:scaleY(0)}
.post summary:hover .pchev::before,.post summary:hover .pchev::after{background:var(--chai)}
.post .pline{padding:8px 22px 22px;color:var(--ink-soft);font-size:15px;margin:0}
.post .pbody{border-top:1px solid var(--rule);padding:22px;display:grid;gap:20px;
  animation:none}
.post .part{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start}
.post .part svg{color:var(--chai);margin-top:3px}
.post .part h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);font-weight:400;margin-bottom:7px}
.post .part p{color:var(--ink-soft);font-size:14.8px;line-height:1.6;margin:0}
.post .deep{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--rule);padding-top:16px}
.post .deep:hover{color:var(--chai)}

/* ---------- the header over dark artwork ----------
   The animation runs under the header and the top of the artwork is bright, so
   cream type on it disappeared. A scrim, not a colour change, so the header keeps
   working over the light pages too. */
body:not(.solidheader) header:not(.solid)::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,9,8,.92),rgba(10,9,8,.55) 60%,rgba(10,9,8,0));
  pointer-events:none;z-index:-1}
header:not(.solid){position:absolute;top:0;left:0;right:0;z-index:5}
.cinema .cm-hint{text-shadow:0 1px 8px rgba(0,0,0,.75)}

/* ---------- the caption, now under the video ---------- */
.cmcaption{background:var(--paper);border-bottom:1px solid var(--rule);
  padding:clamp(30px,4vw,58px) 0}
.cmcaption .cm-places{font-family:var(--serif);font-size:clamp(1.55rem,3.4vw,2.7rem);
  line-height:1;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:baseline;
  gap:clamp(12px,1.8vw,22px);flex-wrap:wrap}
.cmcaption .cm-places .to{color:var(--muted)}
.cmcaption .cm-places .arw{font-family:var(--mono);font-size:clamp(13px,1.5vw,18px);
  color:var(--chai)}
.cmcaption .cm-sub{margin-top:18px;max-width:60ch;color:var(--ink-soft);
  font-size:clamp(15px,1.4vw,18px);line-height:1.6}
.cmcaption .cm-sub strong{color:var(--ink)}

/* ---------- the portrait section ----------
   The photograph of her, given real estate straight after the animation. The
   animation sells the idea; this is the person you would actually be hiring. */
.portrait{background:var(--paper);border-bottom:1px solid var(--rule);
  padding:clamp(48px,7vw,96px) 0}
.porthd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:clamp(26px,3.4vw,44px);
  flex-wrap:wrap}
.portgrid{display:grid;gap:clamp(24px,3.4vw,52px);align-items:center}
@media(min-width:820px){.portgrid{grid-template-columns:1.15fr .85fr}}
.portimg{overflow:hidden;background:var(--cream-2)}
.portimg img{width:100%;height:auto;display:block}
.porttxt p{color:var(--ink-soft);line-height:1.65;margin-bottom:16px}
.porttxt p:last-child{margin-bottom:0}
.porttxt strong{color:var(--ink)}

/* ---------- the cinema hero ----------
   The animation is the first thing on the page. It is preload="none", so it
   costs nothing until it scrolls into view, and it loads and plays then. Muted
   on arrival, with a control to turn the sound on. */
.cinema{position:relative;height:clamp(300px,54vh,560px);background:#171512;
  overflow:hidden;display:flex;align-items:flex-end}
.cinema video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 56%}
.cinema .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,10,9,.86) 0%,rgba(12,10,9,.30) 34%,
  rgba(12,10,9,0) 62%,rgba(12,10,9,.28) 100%)}
.cinema .shell{position:relative;z-index:4;width:100%;padding-bottom:clamp(34px,5vw,64px)}
.cinema .cm-places{display:flex;align-items:baseline;gap:clamp(12px,1.8vw,22px);flex-wrap:wrap;
  font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1;
  letter-spacing:-.02em;color:#fff}
.cinema .cm-places .to{color:rgba(255,255,255,.66)}
.cinema .cm-places .arw{font-family:var(--mono);font-size:clamp(13px,1.5vw,19px);
  color:rgba(255,255,255,.5)}
.cinema .cm-sub{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.86);
  font-size:clamp(15px,1.4vw,18px);line-height:1.5}
.cinema .cm-sub strong{color:#fff}
.cinema .cm-hint{position:absolute;top:clamp(74px,10vw,120px);left:var(--gutter);z-index:4;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.cinema .soundbtn{position:absolute;right:var(--gutter);bottom:clamp(34px,5vw,64px);z-index:6;
  display:inline-flex;align-items:center;gap:9px;background:rgba(12,10,9,.62);
  border:1px solid rgba(255,255,255,.34);color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 15px;border-radius:999px;backdrop-filter:blur(6px);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.cinema .soundbtn:hover{background:rgba(12,10,9,.85);border-color:#fff}
.cinema .soundbtn svg{display:block}
.cinema .posteronly{display:none}
body.motion-off .cinema video{visibility:hidden}
body.motion-off .cinema .posteronly{display:block;position:absolute;inset:0;
  background-size:cover;background-position:center 56%}

/* ---------- the bridge animation ----------
   The still is the poster, so nothing blocks first paint and the section looks
   finished before a byte of video arrives. */
.bridgevid{width:100%;height:100%;object-fit:cover;display:block}
body.motion-off .bridgevid{visibility:hidden}

/* ---------- page heroes ----------
   An About or Services page that is only type does not earn its own URL. These
   give each one something to look at. */
.pagehero{margin:clamp(24px,3vw,40px) 0 clamp(30px,4vw,54px);overflow:hidden;
          background:var(--cream-2);aspect-ratio:16/9}
.pagehero.tall{aspect-ratio:21/9}
.pagehero img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.pagehero:hover img{transform:scale(1.02)}

/* ---------- legal pages ---------- */
.legal{max-width:70ch;padding-bottom:clamp(40px,6vw,80px)}
.legal h3{font-family:var(--serif);font-size:clamp(1.05rem,1.7vw,1.28rem);margin:32px 0 10px;
  letter-spacing:-.012em}
.legal h3:first-child{margin-top:0}
.legal p{color:var(--ink-soft);font-size:15.5px;line-height:1.68}
.legal-links button{font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- cookie consent ----------
   Off by default. Nothing is stored until it is answered, and declining is one
   click, not a maze. That is what consent actually requires. */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(20,18,16,.97);
  color:rgba(255,255,255,.92);padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  backdrop-filter:blur(8px)}
.cookie[hidden]{display:none}
.cookie p{font-size:13.5px;line-height:1.5;margin:0;max-width:66ch;
  color:rgba(255,255,255,.82)}
.cookie a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cookie-btns{display:flex;gap:10px;flex:0 0 auto}
.cbtn{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 16px;border:1px solid rgba(255,255,255,.5);background:#fff;color:#141210;
  cursor:pointer;transition:opacity .2s var(--ease)}
.cbtn:hover{opacity:.85}
.cbtn.ghost{background:transparent;color:#fff}

/* ---------- contact routes ---------- */
.routes{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
        margin-top:clamp(24px,3vw,40px)}
.routes a{background:var(--paper);padding:20px 22px;display:flex;align-items:center;
  gap:16px;transition:background .25s var(--ease)}
.routes a:hover{background:var(--cream-2)}
.routes .ri{color:var(--chai);flex:0 0 auto}
.routes .rn{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.3rem);flex:1}
.routes .rv{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--muted)}
.routes .ra{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* ---------- editorial two column ---------- */
.cols{display:grid;gap:clamp(30px,5vw,74px)}
@media(min-width:820px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.cols .lead{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.22;
            letter-spacing:-.015em;max-width:22ch}
.body p{color:var(--ink-soft);margin-bottom:18px;max-width:62ch}
.body p strong{color:var(--ink)}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
       gap:26px;margin-top:34px;border-top:1px solid var(--rule);padding-top:26px}
.fact .n{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.02em}
.fact .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
         color:var(--muted);margin-top:10px;line-height:1.6}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--rule)}
.svc .row{display:grid;grid-template-columns:1fr;gap:8px;padding:22px 0;
          border-bottom:1px solid var(--rule)}
@media(min-width:760px){.svc .row{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:40px}}
.svc h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,1.8vw,1.45rem);
        letter-spacing:-.015em}
.svc p{color:var(--ink-soft);font-size:15.5px}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,110px) 0}
.cta h2{color:var(--paper);max-width:18ch}
.cta p{color:rgba(247,246,238,.72);margin-top:18px;max-width:48ch}
.cta a.btn{display:inline-block;margin-top:32px;border:1px solid var(--paper);
  color:var(--paper);padding:15px 30px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease)}
.cta a.btn:hover{background:var(--paper);color:var(--ink)}

/* ---------- event page ---------- */
.ehero{position:relative;min-height:62vh;display:flex;align-items:flex-end;overflow:hidden;background:#2b2a26}
.ehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ehero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,18,14,.6),rgba(20,18,14,.08))}
.ehero .shell{position:relative;z-index:5;padding-bottom:clamp(34px,5vw,64px);width:100%}
.ehero h1{font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(2.1rem,5.4vw,4.2rem);line-height:1.03;letter-spacing:-.02em}
.ehero .yr{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.8);
           margin-bottom:14px}
.spine{display:grid;gap:clamp(28px,4vw,60px)}
@media(min-width:820px){.spine{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spine .step{border-top:1px solid var(--rule);padding-top:20px}
.spine h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
          color:var(--muted);font-weight:400;margin-bottom:14px}
.spine p{color:var(--ink-soft);font-size:16px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:clamp(40px,5vw,70px) 0;margin-top:clamp(48px,7vw,90px)}
footer .shell{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
footer .l{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
          color:var(--muted)}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--ink)}

/* ---------- motion: restrained, and off when asked ---------- */
/* NO SCROLL REVEAL ON THIS SITE. Removed after it hid real content three times.
   Nothing here is allowed to start at opacity 0. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}