*,*::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(92vh,900px);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 16%}
.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,.80);backdrop-filter:blur(6px);padding:clamp(24px,3.2vw,44px);
  max-width:min(60ch,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 logo ---------- */
.wordmark{display:inline-flex;align-items:center;gap:13px;font-family:var(--serif);
          font-size:22px;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)}

/* ---------- 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 ---------- */
/* Visible by default. Only a running script is allowed to hide it, and only
   briefly. If JavaScript never arrives, nothing is hidden at all. */
body.js [data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--d,0ms)}
body.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}