/* =========================================================================
   go.arch — premium architecture studio template
   Dark-luxe ground · single gold accent · cinematic video · editorial type
   ========================================================================= */

:root{
  --bg:#0b0b0c;
  --bg-2:#100f11;
  --panel:#151417;
  --ink:#f4f1ea;
  --ink-dim:#c8c3b8;
  --muted:#8b877c;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --gold:#c9a15a;
  --gold-2:#e7c887;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.4rem,5vw,6rem);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#000}

/* film grain + vignette overlays -------------------------------------------------- */
.grain{
  position:fixed;inset:-50%;z-index:2000;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,2%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}
}

/* utility: wide-tracked label ----------------------------------------------------- */
.kicker{
  font-size:.72rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:.9rem;
}
.kicker::before{content:"";width:2.4rem;height:1px;background:var(--gold);opacity:.8}
.kicker.center::after{content:"";width:2.4rem;height:1px;background:var(--gold);opacity:.8}
.gold{color:var(--gold)}

.section-num{
  font-family:var(--serif);font-size:.9rem;letter-spacing:.3em;color:var(--gold);
}

/* ================= HEADER ================= */
.hdr{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem var(--pad);transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{
  padding:1rem var(--pad);background:rgba(10,10,11,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:.02em;line-height:1}
.brand b{font-weight:600}
.brand .dot{color:var(--gold)}
.brand small{
  display:block;font-family:var(--sans);font-size:.56rem;letter-spacing:.4em;
  color:var(--muted);text-transform:uppercase;margin-top:.3rem;font-weight:500;
}
.nav{display:flex;gap:2.4rem;align-items:center}
.nav a{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
  position:relative;padding:.3rem 0;transition:color .3s;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .4s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.active::after{width:100%}
.hdr-cta{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line-2);padding:.75rem 1.5rem;border-radius:40px;transition:.4s var(--ease);
}
.hdr-cta:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:6px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.4s}

/* left margin rail (social + scroll) --------------------------------------------- */
.rail{
  position:fixed;left:clamp(1rem,2vw,1.9rem);top:0;height:100vh;z-index:900;width:2.4rem;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:7rem 0 2rem;pointer-events:none;
}
.rail .idx{font-family:var(--serif);font-size:2.2rem;color:var(--ink);opacity:.9;pointer-events:auto;font-feature-settings:"lnum" 1}
.rail .idx i{color:var(--gold);font-style:normal;font-size:1rem;display:block;letter-spacing:.3em}
.rail .socials{display:flex;flex-direction:column;gap:1.1rem;pointer-events:auto}
.rail .socials a{font-size:.7rem;letter-spacing:.15em;color:var(--muted);writing-mode:vertical-rl;transition:.3s}
.rail .socials a:hover{color:var(--gold)}
.rail .scroll-cue{writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);pointer-events:auto}
.rail .scroll-cue::after{content:"";display:block;width:1px;height:3rem;background:linear-gradient(var(--gold),transparent);margin:.8rem auto 0}
@media(max-width:1100px){.rail{display:none}}

/* ================= HERO ================= */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__media{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);background-size:cover;background-position:center}
.hero__media.on{opacity:1}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__bg video{filter:saturate(.85) contrast(1.05) brightness(.62)}
.hero__media[data-slide]:not([data-slide="0"]){filter:saturate(.9) contrast(1.03) brightness(.6)}
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(8,8,9,.55) 0%,rgba(8,8,9,.15) 35%,rgba(8,8,9,.75) 100%),
    linear-gradient(90deg,rgba(8,8,9,.8) 0%,transparent 55%);
}
.hero__ghost{
  position:absolute;right:calc(var(--pad) - 1rem);top:16%;z-index:1;
  font-family:var(--serif);font-size:min(34vw,30rem);line-height:.7;color:#fff;
  opacity:.05;font-weight:600;user-select:none;pointer-events:none;
}
.hero__inner{position:relative;z-index:3;width:100%;padding:0 var(--pad) clamp(8rem,17vh,11rem);}
.hero__kicker{margin-bottom:1.6rem}
.hero__slides{position:relative;min-height:clamp(17rem,42vh,25rem)}
.hero__slide{
  position:absolute;inset:0;opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);pointer-events:none;
}
.hero__slide.on{opacity:1;transform:none;pointer-events:auto}
.hero h1{
  font-family:var(--serif);font-weight:500;letter-spacing:.02em;
  font-size:clamp(2.6rem,6.6vw,6.2rem);line-height:.96;text-transform:uppercase;
}
.hero h1 span{color:var(--gold)}
.hero__desc{
  max-width:34rem;margin-top:1.3rem;color:var(--ink-dim);font-size:1rem;font-weight:300;
}
.hero__actions{display:flex;align-items:center;gap:1.4rem;margin-top:2rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.8rem;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;padding:1.05rem 2.3rem;border-radius:44px;transition:.45s var(--ease);
}
.btn--gold{background:var(--gold);color:#0a0a0a;font-weight:600}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-3px);box-shadow:0 18px 40px -18px var(--gold)}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* hero controls (slider) */
.hero__ctrl{
  position:absolute;right:var(--pad);bottom:clamp(3rem,8vh,6rem);z-index:4;
  display:flex;align-items:center;gap:1.3rem;
}
.hero__ctrl button{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(0,0,0,.25);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.4s var(--ease);font-size:1rem;
}
.hero__ctrl button:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.hero__count{
  font-family:var(--serif);font-size:1.25rem;letter-spacing:.15em;color:var(--ink-dim);
  font-feature-settings:"lnum" 1;margin-right:.4rem;
}
.hero__count b{color:var(--gold);font-weight:600}
.hero__thumb{
  position:absolute;right:var(--pad);bottom:calc(clamp(3rem,8vh,6rem) + 5rem);z-index:4;
  width:120px;height:150px;border:1px solid var(--line-2);overflow:hidden;display:none;
}
@media(min-width:900px){.hero__thumb{display:block}}
.hero__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.hero__thumb img.on{opacity:1;animation:kb 8s ease-out forwards}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ================= reveal ================= */
[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.1s}[data-reveal].d2{transition-delay:.2s}
[data-reveal].d3{transition-delay:.3s}[data-reveal].d4{transition-delay:.4s}

/* ================= ABOUT ================= */
.about{position:relative;padding:clamp(6rem,14vh,11rem) var(--pad);overflow:hidden}
.about__ghost{
  position:absolute;left:-.5rem;top:2rem;font-family:var(--serif);font-weight:600;
  font-size:min(26vw,20rem);line-height:.8;color:#fff;opacity:.03;pointer-events:none;user-select:none;
}
.about__head{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vh,3.4rem);position:relative}
.about__statement{
  font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.2vw,3.7rem);line-height:1.04;max-width:15ch;margin-bottom:1.8rem;
}
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5.5rem);align-items:stretch}
.about__col{display:flex;flex-direction:column;justify-content:center}
.about__col p{color:var(--muted);max-width:42ch;font-weight:300;margin-bottom:2.6rem}
.about__col .spec{margin-top:.6rem}
.spec{border-top:1px solid var(--line)}
.spec__row{
  display:flex;align-items:center;gap:1.6rem;padding:1.5rem 0;border-bottom:1px solid var(--line);
  transition:.4s var(--ease);cursor:default;
}
.spec__row:hover{padding-left:1rem;border-color:var(--gold)}
.spec__row .n{font-family:var(--serif);color:var(--gold);font-size:1.1rem;min-width:2.5rem}
.spec__row h4{font-size:1.15rem;font-weight:500;letter-spacing:.02em}
.spec__row .t{margin-left:auto;color:var(--muted);font-size:.85rem;font-weight:300;max-width:16ch;text-align:right}
.about__img{position:relative;overflow:hidden;border:1px solid var(--line)}
.about__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05)}
.about__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px 20px rgba(0,0,0,.6)}
.about__img .badge{
  position:absolute;left:1.4rem;bottom:1.4rem;z-index:2;font-family:var(--serif);
  font-size:1rem;letter-spacing:.2em;color:var(--gold);background:rgba(0,0,0,.4);
  padding:.5rem 1rem;backdrop-filter:blur(4px);
}
@media(max-width:820px){.about__grid{grid-template-columns:1fr}.about__img{min-height:0;aspect-ratio:16/10;order:-1}}

/* ================= PROJECTS ================= */
.projects{padding:clamp(5rem,10vh,8rem) var(--pad) clamp(6rem,14vh,11rem);background:var(--bg-2)}
.projects__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:3.4rem}
.projects__head h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,4rem);line-height:1}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.pcard{position:relative;overflow:hidden;min-height:300px;grid-column:span 2;cursor:pointer}
.pcard.tall{grid-row:span 2;min-height:620px}
.pcard.wide{grid-column:span 4}
.pcard img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.1s var(--ease),filter .6s;filter:brightness(.72) saturate(.9)}
.pcard:hover img{transform:scale(1.08);filter:brightness(.9) saturate(1)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,7,.85) 0%,transparent 55%)}
.pcard__body{position:absolute;left:0;bottom:0;z-index:2;padding:1.8rem;width:100%;transform:translateY(12px);transition:transform .5s var(--ease)}
.pcard:hover .pcard__body{transform:none}
.pcard__cat{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;display:block}
.pcard__body h3{font-family:var(--serif);font-size:1.7rem;font-weight:500;line-height:1.05;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pcard__body h3 .arr{width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-size:.9rem;opacity:0;transform:translateX(-8px);transition:.5s var(--ease);flex-shrink:0}
.pcard:hover .pcard__body h3 .arr{opacity:1;transform:none;border-color:var(--gold);color:var(--gold)}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}.pcard,.pcard.wide{grid-column:span 1}.pcard.tall{grid-row:auto;min-height:320px}}
@media(max-width:560px){.pgrid{grid-template-columns:1fr}.pcard,.pcard.wide{grid-column:span 1}}

/* ================= STATS ================= */
.stats{padding:clamp(5rem,12vh,9rem) var(--pad);text-align:center;position:relative;overflow:hidden}
.stats__big{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.stats__big .num{
  font-family:"Playfair Display",var(--serif);font-weight:900;font-size:clamp(8.5rem,25vw,23rem);
  line-height:.74;letter-spacing:-.02em;font-feature-settings:"lnum" 1;
  /* thick numerals with an architectural image masked inside, warmed to the gold theme */
  background:
    linear-gradient(180deg,rgba(231,200,127,.55),rgba(201,161,90,.32) 55%,rgba(124,95,44,.5)),
    url("../img/num-mask.jpg") center 34%/cover;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.6));
}
.stats__big p{max-width:14ch;text-align:left;font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.8rem);line-height:1.15;color:var(--ink-dim)}
.stats__row{display:flex;justify-content:center;gap:clamp(2rem,8vw,7rem);margin-top:4rem;flex-wrap:wrap}
.stat{min-width:9rem}
.stat b{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);font-weight:600;color:var(--ink);display:block;line-height:1;font-feature-settings:"lnum" 1}
.stat>span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:.7rem;display:block}
.stat i{color:var(--gold);font-style:normal}

/* ================= CLIENTS ================= */
.clients{padding:clamp(3rem,7vh,5rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.clients .kicker{padding:0 var(--pad);margin-bottom:2.4rem}
.marquee{display:flex;gap:5rem;width:max-content;animation:scrollx 34s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee .logo{
  font-family:var(--serif);font-size:1.9rem;font-weight:500;letter-spacing:.05em;color:var(--muted);
  opacity:.55;white-space:nowrap;transition:.4s;display:flex;align-items:center;gap:.5rem;
}
.marquee .logo b{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase}
.marquee .logo:hover{color:var(--gold);opacity:1}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ================= CONTACT ================= */
.contact{padding:clamp(6rem,14vh,11rem) var(--pad);position:relative}
.contact__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,7vw,7rem)}
.contact h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.02;margin:1.6rem 0 2.4rem}
.contact h2 span{color:var(--gold)}
.cinfo{border-top:1px solid var(--line)}
.cinfo__row{display:flex;gap:1.4rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.cinfo__row .lb{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);min-width:6rem;padding-top:.3rem}
.cinfo__row .vl{font-family:var(--serif);font-size:1.3rem;color:var(--ink)}
.form{display:grid;gap:1.4rem}
.field{position:relative}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--ink);
  font-family:var(--sans);font-size:1rem;padding:1rem 0;transition:border-color .4s;resize:none;
}
.field textarea{min-height:120px}
.field label{position:absolute;left:0;top:1rem;color:var(--muted);pointer-events:none;transition:.35s var(--ease);font-size:1rem}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--gold)}
.field input:focus+label,.field textarea:focus+label,
.field input:not(:placeholder-shown)+label,.field textarea:not(:placeholder-shown)+label{
  top:-.7rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.form .btn--gold{justify-self:start;margin-top:1rem;border:0;cursor:pointer}
@media(max-width:800px){.contact__grid{grid-template-columns:1fr}}

/* ================= FOOTER ================= */
.foot{padding:clamp(3rem,7vh,5rem) var(--pad) 2.4rem;background:var(--bg-2);border-top:1px solid var(--line)}
.foot__top{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap;padding-bottom:3rem;border-bottom:1px solid var(--line)}
.foot__nav{display:flex;gap:2rem;flex-wrap:wrap}
.foot__nav a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:.3s}
.foot__nav a:hover{color:var(--gold)}
.foot__bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:2rem;color:var(--muted);font-size:.78rem;letter-spacing:.05em}
.foot__bot a:hover{color:var(--gold)}
.totop{position:fixed;right:calc(var(--pad) - .5rem);bottom:2rem;z-index:800;width:50px;height:50px;border-radius:50%;
  background:var(--gold);color:#000;display:grid;place-items:center;opacity:0;transform:translateY(20px);
  transition:.5s var(--ease);pointer-events:none;font-size:1.1rem}
.totop.show{opacity:1;transform:none;pointer-events:auto}

/* ================= mobile nav ================= */
@media(max-width:1000px){
  .burger{display:flex}
  .nav,.hdr-cta{display:none}
  .nav{
    position:fixed;inset:0;background:rgba(9,9,10,.97);backdrop-filter:blur(10px);
    flex-direction:column;justify-content:center;gap:2.4rem;transform:translateX(100%);
    transition:transform .6s var(--ease);z-index:999;
  }
  .nav.open{display:flex;transform:none}
  .nav a{font-size:1.4rem;font-family:var(--serif);letter-spacing:.1em}
  .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* ================= PORTFOLIO / PROJECTS PAGE ================= */
.page-hero{position:relative;padding:clamp(9rem,22vh,14rem) var(--pad) clamp(2.5rem,6vh,4rem);border-bottom:1px solid var(--line);overflow:hidden}
.page-hero__ghost{position:absolute;right:var(--pad);top:30%;font-family:var(--serif);font-weight:600;font-size:min(24vw,18rem);line-height:.7;color:#fff;opacity:.04;pointer-events:none;user-select:none}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(3rem,9vw,7rem);line-height:.95;text-transform:uppercase;margin-top:1.2rem}
.page-hero h1 span{color:var(--gold)}
.page-hero p{color:var(--muted);max-width:48ch;font-weight:300;margin-top:1.4rem}
.filterbar{display:flex;gap:.7rem;flex-wrap:wrap;padding:2.4rem var(--pad) 0}
.filterbar button{background:none;border:1px solid var(--line);color:var(--ink-dim);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding:.7rem 1.4rem;border-radius:40px;cursor:pointer;transition:.35s var(--ease);font-family:var(--sans)}
.filterbar button:hover{border-color:var(--line-2);color:var(--ink)}
.filterbar button.active{background:var(--gold);color:#0a0a0a;border-color:var(--gold);font-weight:600}
.portfolio{padding:2.6rem var(--pad) clamp(6rem,14vh,10rem);display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.portfolio .pcard{min-height:380px;grid-column:auto!important;grid-row:auto!important}
.portfolio .pcard.hide{display:none}
.pcard__year{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;color:var(--ink-dim);margin-top:.7rem;text-transform:uppercase}
@media(max-width:900px){.portfolio{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.portfolio{grid-template-columns:1fr}}

/* ---- project detail ---- */
.detail-hero{position:relative;height:70vh;min-height:460px;overflow:hidden;display:flex;align-items:flex-end}
.detail-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55)}
.detail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,7,.9),transparent 55%)}
.detail-hero__in{position:relative;z-index:2;padding:0 var(--pad) clamp(2.5rem,6vh,4rem);width:100%}
.detail-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,7vw,6rem);line-height:.98;text-transform:uppercase}
.detail-hero h1 span{color:var(--gold)}
.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:clamp(3rem,7vh,5rem) var(--pad);border-bottom:1px solid var(--line)}
.detail-meta .m .lb{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.6rem}
.detail-meta .m .vl{font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
@media(max-width:700px){.detail-meta{grid-template-columns:1fr 1fr}}
.detail-body{padding:clamp(4rem,9vh,7rem) var(--pad);display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
.detail-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4vw,3rem);line-height:1.05}
.detail-body p{color:var(--ink-dim);font-weight:300;margin-bottom:1.4rem}
@media(max-width:800px){.detail-body{grid-template-columns:1fr}}
.detail-gallery{padding:0 var(--pad) clamp(6rem,14vh,10rem);display:grid;grid-template-columns:2fr 1fr;gap:1.2rem}
.detail-gallery img{width:100%;height:100%;object-fit:cover;min-height:300px}
.detail-gallery .stack{display:grid;gap:1.2rem}
@media(max-width:700px){.detail-gallery{grid-template-columns:1fr}}

/* desktop: reserve a left gutter for the fixed rail so it never overlaps content */
@media(min-width:1100px){
  :root{--pad:clamp(2.5rem,6.5vw,7rem)}
  .rail .socials a,.rail .scroll-cue{font-size:.6rem;letter-spacing:.14em}
  .rail .idx{font-size:1.9rem}
}
.section-num{font-feature-settings:"lnum" 1}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}