/* ===========================================================
   THE HORNSMAN GROUP — site stylesheet
   Ivory ground, forest panels, near-black plates, gold hairlines.
   Garamond throughout, self-hosted. No external resources.
   =========================================================== */

:root{
  /* ground */
  --ivory:#f7f4ec;
  --ivory-2:#efeadd;
  --ivory-3:#e6e0d1;

  /* ink */
  --ink:#1c1e19;
  --ink-soft:#4a4c44;
  --ink-faint:#83857a;

  /* forest */
  --forest:#173f26;
  --forest-2:#1f5432;
  --forest-deep:#0e2617;
  --forest-mid:#2c4a38;

  /* accent */
  --gold:#9a8850;              /* hairlines and ornament on the ivory ground */
  --gold-lt:#bda76a;           /* text weight of the same gold, for dark grounds:
                                  #9a8850 on forest is only 3.39:1 and fails AA */
  --gold-soft:rgba(189,167,106,.45);

  /* lines */
  --line:rgba(28,30,25,.16);
  --line-soft:rgba(28,30,25,.09);
  --line-dark:rgba(247,244,236,.16);

  /* type */
  --disp:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;
  --mark:"Cinzel",Georgia,"Times New Roman",serif;

  /* metrics */
  --wrap:1200px;
  --pad:clamp(1.25rem,5vw,4rem);
  --bar:44px;   /* notice bar */
  --head:68px;  /* masthead */

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --quick:240ms;
  --mid:420ms;
  --slow:620ms;
  --crawl:1200ms;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 1rem);
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--forest);color:var(--ivory)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);width:100%}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forest);color:var(--ivory);
  padding:.75rem 1.25rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------------------------------------------------------
   Shared type primitives
   --------------------------------------------------------- */

/* Letterspaced overline that sits above every headline */
.over{
  font-family:var(--body);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--forest-2);
  display:block;
}
.panel .over,.plate .over{color:var(--gold-lt)}

/* Weight-contrast headline: <b> carries the bold line, the rest stays light.
   Weight alone is too quiet in Garamond, so the light line also steps back
   in tone — the same two-tone move the brief asked for. */
.hl{
  font-family:var(--disp);
  font-weight:400;
  line-height:1.1;
  letter-spacing:.005em;
  font-size:clamp(2.1rem,5.2vw,3.9rem);
  text-transform:uppercase;
  color:var(--ink-faint);
}
.hl b{font-weight:600;color:var(--ink)}
.hl--lg{font-size:clamp(2.6rem,7vw,5.4rem)}
.hl--sm{font-size:clamp(1.7rem,3.4vw,2.6rem)}

.prose p{color:var(--ink-soft);margin-bottom:1.05rem;max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose p.lead{color:var(--ink);font-size:1.18rem;line-height:1.55}
.panel .prose p,.plate .prose p{color:rgba(247,244,236,.78)}
.panel .prose p.lead,.plate .prose p.lead{color:rgba(247,244,236,.94)}

/* Arrow link — the site's primary call to action, in place of buttons */
.arw{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--body);font-weight:500;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--forest-2);
  padding-block:.35rem;
  transition:color var(--quick) ease-out;
}
.arw::after{
  content:"";width:1.6rem;height:1px;background:currentColor;
  transition:transform var(--quick) var(--ease),width var(--quick) var(--ease);
}
.arw:hover,.arw:focus-visible{color:var(--ink)}
.arw:hover::after,.arw:focus-visible::after{transform:translateX(4px);width:2.2rem}
.panel .arw,.plate .arw{color:var(--gold-lt)}
.panel .arw:hover,.plate .arw:hover,
.panel .arw:focus-visible,.plate .arw:focus-visible{color:var(--ivory)}

/* A stacked list of arrow links with rules between */
.arwlist{list-style:none;border-top:1px solid var(--line-dark)}
.arwlist li{border-bottom:1px solid var(--line-dark)}
.arwlist .arw{
  display:flex;justify-content:space-between;width:100%;
  padding-block:1.05rem;letter-spacing:.2em;
}
.arwlist .arw::after{align-self:center}

/* Rule ornament */
.rule{width:44px;height:1px;background:var(--gold);margin-block:1.5rem}
.rule--c{margin-inline:auto}

/* Spacing helpers.
   These exist as classes rather than style="" attributes because the site's
   Content-Security-Policy sets style-src 'self', which blocks inline styles. */
.mt-xs{margin-top:.6rem}
.mt-sm{margin-top:1.1rem}
.mt-md{margin-top:1.2rem}
.mt-lg{margin-top:1.4rem}
.mt-xl{margin-top:1.6rem}

/* ---------------------------------------------------------
   Notice bar + masthead
   --------------------------------------------------------- */

.notice{
  background:var(--forest-mid);color:rgba(247,244,236,.82);
  font-size:.72rem;letter-spacing:.06em;text-align:center;
  min-height:var(--bar);display:flex;align-items:center;justify-content:center;
  padding:.6rem var(--pad);line-height:1.45;
}
.notice a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.mast{
  position:sticky;top:0;z-index:90;
  background:var(--ivory);
  border-bottom:1px solid var(--line-soft);
  height:var(--head);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-inline:clamp(.9rem,3vw,1.8rem);
  transition:background var(--quick) ease-out,border-color var(--quick) ease-out;
}
.mast__crest{justify-self:center}
.mast__crest img{height:38px;width:auto}
.mast__right{justify-self:end}
.mast__right .arw{font-size:.68rem}
@media(max-width:700px){.mast__right{display:none}}

/* Hamburger */
.burger{
  justify-self:start;
  width:44px;height:44px;border:0;background:none;cursor:pointer;
  display:grid;place-content:center;gap:6px;padding:0;
}
.burger span{
  display:block;width:26px;height:1.5px;background:var(--ink);
  transition:transform var(--mid) var(--ease),opacity var(--quick) ease-out;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------------------------------------------------------
   Full-screen overlay menu
   --------------------------------------------------------- */

.menu{
  position:fixed;inset:0;z-index:80;
  background:var(--ivory);
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;
  gap:clamp(.55rem,1.8vh,1.3rem);
  padding:calc(var(--head) + 1.5rem) var(--pad) 2.5rem;
  opacity:0;visibility:hidden;
  transition:opacity var(--mid) var(--ease),visibility 0s linear var(--mid);
  overflow-y:auto;
}
/* Safe centring, done with auto margins rather than `justify-content:safe
   center`. The `safe` keyword needs Safari 17.6+; below that the declaration
   is invalid, so the browser discards the whole line and the list is stranded
   at the top of the screen. Auto margins absorb the free space when there is
   any and collapse to nothing when the list is taller than the viewport, so
   the first item is never pushed out of reach. Supported in every engine. */
.menu > :first-child{margin-top:auto}
.menu > :last-child{margin-bottom:auto}
.menu[data-open="true"]{
  opacity:1;visibility:visible;
  transition:opacity var(--mid) var(--ease),visibility 0s;
}
.menu a{
  font-family:var(--body);font-weight:500;
  font-size:clamp(.78rem,1.5vw,.86rem);
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);
  padding:.5rem 1rem;
  text-align:center;text-wrap:balance;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease),color var(--quick) ease-out;
}
.menu[data-open="true"] a{opacity:1;transform:none}
.menu a:hover,.menu a:focus-visible{color:var(--forest-2)}
.menu a[aria-current="page"]{color:var(--forest-2)}

/* The four specialisms read as one group, so a second line looks deliberate
   rather than like a label that has come adrift. */
.menu__group{
  font-family:var(--body);font-weight:500;
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-top:clamp(1rem,2.4vh,1.8rem);
  padding-top:clamp(.9rem,2vh,1.4rem);
  border-top:1px solid var(--line-soft);
  width:min(300px,62vw);text-align:center;
  opacity:0;transition:opacity var(--slow) var(--ease) 380ms;
}
.menu[data-open="true"] .menu__group{opacity:1}
.menu a.sub{
  font-size:clamp(.7rem,1.3vw,.76rem);
  letter-spacing:.2em;
  color:var(--ink-soft);
  padding-block:.4rem;
}
.menu a.sub:hover,.menu a.sub:focus-visible{color:var(--forest-2)}

.menu__foot{
  margin-top:1.6rem;text-align:center;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  opacity:0;transition:opacity var(--slow) var(--ease) 260ms;
}
.menu[data-open="true"] .menu__foot{opacity:1}

body[data-lock="true"]{overflow:hidden}
/* While the menu is open the notice bar is hidden, which puts the masthead at
   the very top. The masthead sits above the menu in the stacking order so that
   its close control stays clickable, and without this it covered the first
   item in the list. */
body[data-lock="true"] .notice{display:none}

/* ---------------------------------------------------------
   Hero — split ground / photograph, crest tile on the seam
   --------------------------------------------------------- */

.hero{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  min-height:clamp(480px,74vh,760px);
  background:var(--ivory);
}
.hero__text{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,5rem);
}
.hero__text .over{margin-bottom:1.5rem}
.hero__text .hl{max-width:23ch}
/* The motto's supporting line, directly beneath the heading */
.hero__sub{
  font-family:var(--disp);font-style:italic;
  font-size:clamp(1.06rem,1.9vw,1.34rem);
  line-height:1.45;color:var(--forest-2);
  margin-top:1.15rem;max-width:38ch;
}
.hero__text .prose{margin-top:1.8rem;max-width:44ch}
.hero__text .prose p{font-size:1.06rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2rem}

.hero__img{position:relative;overflow:hidden;background:var(--forest-deep)}
.hero__img img{
  width:100%;height:100%;object-fit:cover;
}

/* The crest tile straddling the seam, with its hairline leader */
/* White plate so the crest reads in its own colours rather than knocked out */
.seal{
  position:absolute;top:50%;left:50%;
  width:clamp(104px,12vw,160px);height:clamp(104px,12vw,160px);
  transform:translate(-50%,-50%);
  background:#fff;
  box-shadow:0 2px 28px rgba(14,38,23,.18);
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
/* Absolute width, not a percentage: a percentage resolved against an
   auto-sized track collapses to the intrinsic width and hangs left. */
.seal img{width:clamp(76px,8.8vw,118px);height:auto}
/* Hairline leader running down-left out of the tile's bottom corner */
.seal::before{
  content:"";position:absolute;
  left:-104px;bottom:0;width:104px;height:1px;
  background:var(--ink);opacity:.45;
  transform:rotate(45deg);transform-origin:100% 50%;
}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__img{height:clamp(240px,46vw,380px);order:-1}
  /* Straddle the bottom edge of the photograph, held to the right so it
     never lands on the left-aligned copy below. */
  .seal{
    top:clamp(240px,46vw,380px);bottom:auto;
    left:auto;right:var(--pad);
    transform:translateY(-50%);
  }
  .seal::before{display:none}
  .hero__text{padding-top:clamp(3.5rem,11vw,5rem)}
}

/* ---------------------------------------------------------
   Statement — oversized centred type on the ivory ground
   --------------------------------------------------------- */

.statement{
  padding-block:clamp(3.5rem,9vw,7rem);
  text-align:center;
  border-bottom:1px solid var(--line-soft);
}
.statement .hl{max-width:18ch;margin-inline:auto}
.statement .prose{margin:2rem auto 0;max-width:58ch}
.statement .prose p{margin-inline:auto}
/* About: a wider measure in two columns, so the copy runs shorter down the page */
.statement--about .cols2{
  max-width:1080px;margin:clamp(2rem,4vw,3rem) auto 0;
  text-align:left;align-items:start;
  gap:clamp(2rem,4vw,3.6rem);
}
.statement--about .prose p{max-width:none;margin-inline:0}
.statement--about .hl{margin-inline:auto}

/* Runs straight into the deck below it, so no rule and no bottom padding */
.statement--flush{border-bottom:none;padding-bottom:0}
/* Two-column, left-aligned variant (the standards block) */
.statement .cols2--left{text-align:left;align-items:start}
.statement .cols2--left .hl,
.statement .cols2--left .prose p{margin-inline:0;max-width:none}

/* ---------------------------------------------------------
   Page head — the opening block on interior pages
   --------------------------------------------------------- */

.page-head{
  text-align:center;
  padding-block:clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--line-soft);
}
.page-head .over{margin-bottom:1.3rem}
.page-head .hl{margin-inline:auto;max-width:18ch}
.page-head .lede{
  font-family:var(--disp);font-style:italic;
  font-size:clamp(1.08rem,2vw,1.4rem);line-height:1.45;
  color:var(--forest-2);margin:1.3rem auto 0;max-width:48ch;
}

/* Long-form document column (privacy, terms) */
.doc{max-width:74ch;margin-inline:auto;text-align:left}
.doc .over{display:block;color:var(--ink-faint);margin-bottom:2rem}
.doc .hl{text-align:left;margin-inline:0}
/* Numbered clause headings sit quieter than a section headline */
.doc .hl--sm{font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.22;color:var(--ink)}
.doc .prose p{max-width:none}
.doc ul{list-style:none;margin:1rem 0 1.2rem}
.doc ul li{position:relative;padding-left:1.7rem;margin-bottom:.7rem;color:var(--ink-soft);line-height:1.6}
.doc ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border:1px solid var(--gold)}
.doc a{color:var(--forest-2);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--ink)}

/* ---------------------------------------------------------
   Call to action block
   --------------------------------------------------------- */

.cta{
  border:1px solid var(--line);
  padding:clamp(1.8rem,4vw,3rem);
  text-align:center;max-width:720px;margin-inline:auto;
}
.panel .cta,.plate .cta{border-color:var(--gold-soft)}
.cta .over{margin-bottom:1.1rem}
.cta__addr{
  display:inline-block;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.3rem,3.4vw,2.1rem);
  letter-spacing:.01em;color:var(--forest-2);
  margin-block:.4rem 1rem;overflow-wrap:anywhere;
  transition:color var(--quick) ease-out;
}
.cta__addr:hover,.cta__addr:focus-visible{color:var(--ink)}
.panel .cta__addr,.plate .cta__addr{color:var(--gold-lt)}
.panel .cta__addr:hover,.plate .cta__addr:hover{color:var(--ivory)}
.cta__note{font-size:.98rem;color:var(--ink-soft)}
.panel .cta__note,.plate .cta__note{color:rgba(247,244,236,.72)}

/* Plain checked list used for document requirements */
.reqs{list-style:none;margin-top:1.4rem}
.reqs li{
  position:relative;padding-left:1.7rem;margin-bottom:.85rem;
  color:var(--ink-soft);line-height:1.55;
}
.panel .reqs li,.plate .reqs li{color:rgba(247,244,236,.78)}
.reqs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:9px;height:9px;border:1px solid var(--gold);
}
.panel .reqs li::before,.plate .reqs li::before{border-color:var(--gold-lt)}

/* ---------------------------------------------------------
   Panels — forest ground
   --------------------------------------------------------- */

.panel{background:var(--forest);color:var(--ivory);position:relative;overflow:hidden}
.panel--deep{background:var(--forest-deep)}
.panel .wrap{position:relative;z-index:1}
.panel__inner{padding-block:clamp(3.5rem,8vw,6.5rem)}

/* Oversized ghost word set into the panel */
.ghost{
  position:absolute;top:clamp(1rem,4vw,3rem);right:clamp(1rem,4vw,3rem);
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.5rem,11vw,9rem);line-height:.92;letter-spacing:.02em;
  color:rgba(247,244,236,.055);
  text-align:right;pointer-events:none;user-select:none;z-index:0;
}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
@media(max-width:860px){.cols2{grid-template-columns:1fr}}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.4rem)}
@media(max-width:900px){.cols3{grid-template-columns:1fr;gap:2.4rem}}
.cols3 .over{margin-bottom:.9rem}
.cols3 p{color:rgba(247,244,236,.78);font-size:1rem;line-height:1.6}
.cols2 h2,.cols2 h3,.cols3 h2,.cols3 h3{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.1rem;
}

/* Near-black plate, gold hairlines */
.plate{background:var(--ink);color:var(--ivory);position:relative;overflow:hidden}
.plate__inner{padding-block:clamp(3.5rem,8vw,6.5rem)}
.plate .hl b{color:var(--ivory)}
.plate .hl{color:rgba(247,244,236,.62)}

/* ---------------------------------------------------------
   Full-bleed photographic band
   --------------------------------------------------------- */

.band{position:relative;height:clamp(220px,34vw,440px);overflow:hidden;background:var(--forest-deep)}
.band img{
  width:100%;height:100%;object-fit:cover;
}
/* Scrim so the caption stays legible over lit buildings */
.band::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(14,38,23,.78),rgba(14,38,23,0));
  pointer-events:none;
}
.band__cap{
  z-index:1;
  position:absolute;left:0;right:0;bottom:clamp(1rem,3vw,2rem);
  text-align:center;color:rgba(247,244,236,.85);
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------
   Capped section — overline + two-tone headline, centred
   --------------------------------------------------------- */

.capsec{text-align:center;max-width:44ch;margin:0 auto clamp(2.5rem,5vw,3.6rem)}
.capsec .over{margin-bottom:1.2rem}
.capsec .hl{margin-inline:auto}
.capsec .prose{margin-top:1.4rem}
.capsec .prose p{margin-inline:auto;text-align:center}
/* Left-hung variant used on the dark plate */
.capsec--left{text-align:left;margin-left:0;margin-right:auto;max-width:34ch}
.capsec--left .hl,.capsec--left .prose p{margin-inline:0;text-align:left}

/* ---------------------------------------------------------
   Deck — overlapping staggered plates, horizontally scrolled
   --------------------------------------------------------- */

.deck{
  display:flex;align-items:center;justify-content:flex-start;
  gap:0;padding:clamp(1.5rem,4vw,3rem) 0 clamp(2.5rem,5vw,4rem);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  padding-inline:var(--pad);
}
.deck::-webkit-scrollbar{display:none}
/* --dy carries each tile's resting offset so the reveal can compose with it
   instead of overwriting it — both animate the same transform property. */
.deck__item{
  --dy:0px;
  display:block;color:inherit;
  position:relative;flex:0 0 auto;
  width:clamp(196px,25vw,290px);
  margin-right:-32px;
  scroll-snap-align:center;
  transform:translateY(var(--dy));
  transition:transform var(--mid) var(--ease);
}
/* The same safe-centring trick as the menu: the row centres while it fits and
   falls back to a plain left-aligned scroll once it does not. `auto` also
   cancels the -32px overlap that every other tile carries. */
.deck__item:first-child{margin-left:auto}
.deck__item:last-child{margin-right:auto}
.deck__item:nth-child(odd){--dy:-26px}
.deck__item:nth-child(even){--dy:18px}
.deck__item:hover,.deck__item:focus-within{
  z-index:5;transform:translateY(calc(var(--dy) - 14px));
}
.deck__item figure{
  position:relative;overflow:hidden;
  background:var(--forest-deep);aspect-ratio:3/4;
  outline:1px solid rgba(247,244,236,.14);outline-offset:-1px;
}
.deck__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--crawl) var(--ease);
}
.deck__item:hover img,.deck__item:focus-within img{transform:scale(1.04)}
/* Caption sits inside its own plate so overlapping tiles never collide */
.deck__item figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:2.6rem 2.4rem 1.1rem 1.1rem;
  background:linear-gradient(to top,
    rgba(14,38,23,.96) 0%,rgba(14,38,23,.78) 52%,rgba(14,38,23,0) 100%);
}
.deck__item .k{
  font-family:var(--disp);font-weight:600;font-size:1.08rem;
  text-transform:uppercase;letter-spacing:.03em;line-height:1.2;
  color:var(--ivory);
}
.deck__item .v{font-size:.78rem;color:rgba(247,244,236,.72);margin-top:.3rem;line-height:1.4}
/* Hairline that extends on hover, so a tile reads as something you can follow */
.deck__item .k::after{
  content:"";display:block;height:1px;width:1.6rem;
  background:var(--gold-lt);margin-top:.7rem;
  transition:width var(--quick) var(--ease);
}
.deck__item:hover .k::after,
.deck__item:focus-visible .k::after{width:2.8rem}
.deck__item:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------------------------------------------------------
   Cards — horizontal scroller with counter and arrows
   --------------------------------------------------------- */

.rail{position:relative}
.rail__track{
  display:flex;gap:clamp(1rem,2.4vw,1.8rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.5rem;
}
.rail__track::-webkit-scrollbar{display:none}
.card{
  flex:0 0 auto;width:clamp(248px,32vw,360px);
  scroll-snap-align:start;
}
.card figure{overflow:hidden;background:var(--forest-deep);aspect-ratio:4/3;margin-bottom:1.1rem}
.card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--crawl) var(--ease);
}
.card:hover img{transform:scale(1.04)}
.card h3{
  font-family:var(--disp);font-weight:600;
  font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.25;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.6rem;
}
.plate .card h3{color:var(--ivory)}
.card p{font-size:.96rem;color:var(--ink-soft);margin-bottom:.9rem}
.plate .card p{color:rgba(247,244,236,.7)}

.rail__nav{
  display:flex;align-items:center;justify-content:flex-end;gap:1.1rem;
  margin-top:clamp(1.2rem,3vw,2rem);
}
.rail__nav button{
  width:38px;height:38px;border:1px solid var(--line);background:none;cursor:pointer;
  display:grid;place-content:center;color:inherit;
  transition:border-color var(--quick) ease-out,background var(--quick) ease-out;
}
.plate .rail__nav button{border-color:var(--gold-soft)}
.rail__nav button:hover{border-color:var(--gold);background:rgba(154,136,80,.12)}
.rail__nav button:disabled{opacity:.3;cursor:default}
.rail__nav button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.2}
.rail__count{
  font-size:.74rem;letter-spacing:.2em;color:var(--ink-faint);
  font-variant-numeric:tabular-nums;margin-right:auto;
}
.plate .rail__count{color:rgba(247,244,236,.55)}

/* ---------------------------------------------------------
   Contact block
   --------------------------------------------------------- */

.getintouch{padding-block:clamp(3.5rem,8vw,6rem)}
.getintouch .grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
@media(max-width:860px){.getintouch .grid{grid-template-columns:1fr}}
.getintouch figure{overflow:hidden;background:var(--forest-deep);aspect-ratio:4/3}
.getintouch img{width:100%;height:100%;object-fit:cover}
.deets{list-style:none;margin-top:1.8rem;border-top:1px solid var(--line)}
.deets li{
  display:flex;justify-content:space-between;gap:1.5rem;
  padding-block:.85rem;border-bottom:1px solid var(--line-soft);
  font-size:.96rem;
}
.deets .k{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:.25rem;
}
.deets a:hover{color:var(--forest-2)}

/* ---------------------------------------------------------
   Back to top + footer
   --------------------------------------------------------- */

.totop{
  text-align:center;padding-block:clamp(2rem,5vw,3.2rem);
  border-top:1px solid var(--line-soft);
}
.totop a{
  display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
  transition:color var(--quick) ease-out;
}
.totop a:hover{color:var(--ink)}
.totop svg{width:14px;height:22px;stroke:currentColor;fill:none;stroke-width:1.1}
.totop a:hover svg{transform:translateY(-3px);transition:transform var(--quick) var(--ease)}

footer.site{
  background:var(--forest-deep);color:rgba(247,244,236,.72);
  padding-block:clamp(3rem,6vw,4.5rem);text-align:center;
}
footer.site .crest{
  width:64px;margin:0 auto 1.4rem;
  filter:brightness(0) invert(1);opacity:.28;
}
footer.site .name{
  font-family:var(--mark);font-size:1.3rem;letter-spacing:.14em;
  color:var(--ivory);text-transform:uppercase;
}
footer.site .motto{
  font-family:var(--disp);font-style:italic;
  font-size:1.12rem;color:var(--gold-lt);margin-top:.75rem;
}
footer.site .motto-sub{
  font-size:.92rem;color:rgba(247,244,236,.66);
  margin-top:.45rem;max-width:46ch;margin-inline:auto;line-height:1.5;
}
footer.site .tag{
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(247,244,236,.5);margin-top:.7rem;
}
footer.site nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem clamp(1rem,3vw,2rem);margin:2.2rem auto;max-width:760px;
}
footer.site nav a{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,244,236,.72);transition:color var(--quick) ease-out;
}
footer.site nav a:hover{color:#fff}
footer.site .legal{
  font-size:.78rem;line-height:1.7;color:rgba(247,244,236,.45);
  max-width:62ch;margin-inline:auto;
  border-top:1px solid var(--line-dark);padding-top:1.6rem;
}

/* ---------------------------------------------------------
   Motion
   One primitive, applied to overlines, headlines and plates only.
   Body copy, navigation and links never animate.
   --------------------------------------------------------- */

.js-anim .rv{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
}
.js-anim .rv.in{opacity:1;transform:none}

/* Stagger inside genuine groups, declared here rather than written onto
   elements from script: style-src 'self' forbids inline styles, so the
   delays belong in the stylesheet. Capped at five so a long row never
   leaves the reader waiting on the last item. */
[data-stagger] > *:nth-child(1){transition-delay:0ms}
[data-stagger] > *:nth-child(2){transition-delay:80ms}
[data-stagger] > *:nth-child(3){transition-delay:160ms}
[data-stagger] > *:nth-child(4){transition-delay:240ms}
[data-stagger] > *:nth-child(5){transition-delay:320ms}

/* Menu links draw in behind the panel fade */
.menu a{transition-delay:0ms}
.menu[data-open="true"] a:nth-of-type(1){transition-delay:134ms}
.menu[data-open="true"] a:nth-of-type(2){transition-delay:168ms}
.menu[data-open="true"] a:nth-of-type(3){transition-delay:202ms}
.menu[data-open="true"] a:nth-of-type(4){transition-delay:236ms}
.menu[data-open="true"] a:nth-of-type(5){transition-delay:270ms}
.menu[data-open="true"] a:nth-of-type(6){transition-delay:304ms}
.menu[data-open="true"] a:nth-of-type(7){transition-delay:338ms}
.menu[data-open="true"] a:nth-of-type(8){transition-delay:372ms}
.menu[data-open="true"] a:nth-of-type(9){transition-delay:406ms}
.menu[data-open="true"] a:nth-of-type(10){transition-delay:440ms}

/* Deck tiles keep their resting offset through the reveal */
.js-anim .deck__item.rv{transform:translateY(calc(var(--dy) + 16px))}
.js-anim .deck__item.rv.in{transform:translateY(var(--dy))}
.js-anim .deck__item.rv.in:hover,
.js-anim .deck__item.rv.in:focus-within{transform:translateY(calc(var(--dy) - 14px))}

/* Plates settle out of a slight overscale on first reveal */
.js-anim .rv-img{overflow:hidden}
.js-anim .rv-img > img{
  transform:scale(1.06);
  transition:transform var(--crawl) var(--ease),opacity var(--slow) var(--ease);
  opacity:0;
}
.js-anim .rv-img.in > img{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js-anim .rv,.js-anim .rv-img > img{opacity:1;transform:none}
  .js-anim .deck__item.rv,.js-anim .deck__item.rv.in{transform:translateY(var(--dy))}
}

/* ---------------------------------------------------------
   Placeholder plate — shown wherever photography is still to come
   --------------------------------------------------------- */
.ph{
  width:100%;height:100%;
  background:
    linear-gradient(135deg,rgba(247,244,236,.05) 0%,transparent 55%),
    var(--forest-deep);
  display:grid;place-content:center;gap:.8rem;
  color:rgba(247,244,236,.32);
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;text-align:center;
  padding:1.5rem;min-height:160px;
}
.ph svg{width:34px;height:34px;margin-inline:auto;stroke:currentColor;fill:none;stroke-width:.9}
/* Lift the placeholder clear of the caption scrim inside deck tiles */
.deck__item .ph{padding-bottom:5.5rem}