/* Direction A — "After dark" : beer hall at night.
   Signature: accordion bellows pleats as the structural divider.
   Photo policy: the evening warmth is kept — it is what this direction is —
   but every photo is now the original file off the CDN, white-balanced off
   the red house lights and with the shadows lifted, so Gary is visible. */

:root{
  color-scheme:dark;
  /* primitives */
  --carbon-950:#12100D; --carbon-900:#1B1712; --carbon-800:#2A231B; --carbon-700:#3A3125;
  --brass-500:#D8A544;  --brass-300:#EBC77E;  --brass-700:#8A6A2A;
  --cream-100:#F4EADA;  --cream-400:#C4B49B;
  --stage-600:#B03A2E;

  /* semantic */
  --bg:var(--carbon-950); --bg-surface:var(--carbon-900); --bg-raised:var(--carbon-800);
  --text:var(--cream-100); --text-secondary:var(--cream-400);
  --accent-solid:var(--brass-500); --accent-text:var(--brass-300); --accent-quiet:var(--brass-700);
  --rule:#332B21; --rule-strong:#4A3F30;
  --focus:var(--brass-300);

  /* type scale */
  --t-hero:clamp(2.5rem,7.4vw,5.25rem);
  --t-h2:clamp(1.75rem,4.2vw,2.75rem);
  --t-h3:1.25rem;
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-label:0.75rem;

  --measure:64ch;
  --gutter:clamp(1.25rem,5vw,4rem);
  --stack:clamp(3.5rem,8vw,6.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:80px; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Lora,Georgia,"Times New Roman",serif;
  font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:2px}

.wrap{max-width:1120px; margin-inline:auto; padding-inline:var(--gutter)}
.narrow{max-width:var(--measure)}

/* ---- type roles ---- */
.wordmark{
  font-family:"Grenze Gotisch",Georgia,serif; font-weight:500;
  letter-spacing:.01em; line-height:1; text-transform:none;
}
h1,h2,h3{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase; font-weight:800; letter-spacing:-.015em;
  line-height:1.05; text-wrap:balance; margin:0;
}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3); letter-spacing:.0em}
p{margin:0 0 1em; text-wrap:pretty}
.lede{font-size:clamp(1.0625rem,2.1vw,1.3125rem); color:var(--text); max-width:52ch}
.eyebrow{
  font-family:Archivo,sans-serif; font-size:var(--t-label); font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--accent-text);
  margin:0 0 1rem;
}
.muted{color:var(--text-secondary)}
.small{font-size:var(--t-small)}

/* ---- SIGNATURE: bellows ---- */
.bellows{
  height:46px; border-block:1px solid var(--rule);
  background:
    repeating-linear-gradient(90deg,
      rgba(216,165,68,.00) 0px,
      rgba(216,165,68,.07) 7px,
      rgba(216,165,68,.13) 13px,
      rgba(0,0,0,.55) 13.5px,
      rgba(216,165,68,.02) 14px,
      rgba(216,165,68,.00) 22px);
}
.bellows--tall{height:74px}

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(18,16,13,.94); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.site-header .wrap{display:flex; align-items:center; gap:1.5rem; min-height:66px; flex-wrap:wrap}
.site-header .wordmark{font-size:1.5rem; color:var(--cream-100); text-decoration:none; margin-right:auto}
.nav{display:flex; gap:1.25rem; flex-wrap:wrap; font-family:Archivo,sans-serif; font-size:var(--t-small)}
.nav a{color:var(--text-secondary); text-decoration:none}
.nav a:hover{color:var(--accent-text)}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:Archivo,sans-serif; font-size:1rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  padding:.9rem 1.6rem; border-radius:2px; text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary{background:var(--accent-solid); color:var(--carbon-950)}
.btn--primary:hover{background:var(--brass-300)}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--accent-text); color:var(--accent-text)}

/* ---- hero ---- */
.hero{position:relative; isolation:isolate; padding-block:clamp(4rem,11vw,8rem) clamp(3rem,7vw,5rem); min-height:min(86vh,44rem); display:flex; align-items:center}
.hero__media{position:absolute; inset:0; z-index:-2; overflow:hidden}
.hero__media picture{display:block; width:100%; height:100%}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 24%;
  filter:saturate(1.02) contrast(1.06) brightness(.97);
}
/* Gary is centred in this photograph and his head fills a third of the frame,
   so a gradient scrim across the whole hero would always land on his face.
   On desktop the photograph is given the right half of the hero instead and
   the seam is dissolved into the carbon; the words never cross him. */
.hero__scrim{position:absolute; inset:0; z-index:-1}

/* HERO BREAKPOINTS — the photograph is a portrait of a man whose head fills a
   third of the frame, so the only question at every width is whether the words
   can stand clear of him. Two answers, and the switch is at 68rem because that
   is the width below which a side-by-side leaves the text column too narrow to
   set the blackletter wordmark.
   Below 68rem: stack. Photo band on top, words underneath on flat carbon.
   At and above:  split. Photo takes the right, dissolving at its own left edge.
   The text column is also capped in vw, so the two can never meet. */

/* ---- stacked: phones, tablets, small laptops ---- */
@media (max-width:67.99rem){
  .hero{display:block; min-height:0; padding-block:0 clamp(2.5rem,6vw,3.5rem)}
  .hero__media{
    position:relative; inset:auto; z-index:0;
    width:100%;
    /* A portrait photo in a very wide short band crops to a letterbox slot and
       cuts his chin off, so the band grows with the viewport — but never past
       36vh, or the booking button leaves the first screen on a 768px-tall window. */
    height:min(clamp(15rem,42vw,26rem), 36vh);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,1) 76%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg, rgba(0,0,0,1) 76%, rgba(0,0,0,0) 100%);
  }
  .hero__media img{object-position:50% 44%}
  .hero__scrim{display:none}
  .hero .wrap{padding-top:clamp(1.25rem,4vw,2rem)}
  .hero__col{max-width:44rem}
}
/* Landscape phones and short tablet windows: a tall photo band would push the
   booking button off the first screen, so the band is capped by viewport height. */
@media (max-width:67.99rem) and (max-height:34rem){
  .hero__media{height:min(9rem,28vh)}
}

/* ---- split: real desktop ---- */
@media (min-width:68rem){
  .hero__media{left:auto; right:0; width:44%}
  .hero__media img{object-position:50% 18%}
  .hero__media{
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 14%, rgba(0,0,0,1) 34%);
            mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 14%, rgba(0,0,0,1) 34%);
  }
  .hero__scrim{
    background:
      linear-gradient(90deg, rgba(18,16,13,.5) 54%, rgba(18,16,13,.12) 74%, rgba(18,16,13,.28) 100%),
      linear-gradient(180deg, rgba(18,16,13,.20) 0%, rgba(18,16,13,0) 32%,
        rgba(18,16,13,.5) 88%, rgba(18,16,13,.94) 100%);
  }
  /* 48vw is the belt: the photo starts at 56%, so the words stop well short of
     it at every width, not only at the one the design was drawn at. */
  .hero__col{max-width:min(34rem,48vw)}
}
/* The hero .wrap is a flex item: without width:100% it shrink-wraps its
   content and the headline never lines up with the left edge of any section
   below it. */
.hero .wrap{max-width:1120px; width:100%}

/* SIGNATURE LOCKUP: the positioning line and the name are one sentence.
   Blackletter carries the name only. */
.hero h1{
  margin:0 0 1.25rem; color:var(--cream-100);
  display:flex; flex-direction:column; gap:.1em;
}
.hero h1 .h1-lead{
  font-size:.46em; letter-spacing:.02em; font-weight:700; color:var(--brass-300);
}
.hero h1 .wordmark{
  font-size:1em; text-transform:none; font-weight:500; letter-spacing:0;
  color:var(--cream-100);
}
.hero .lede{margin-bottom:1.75rem}
.cta-row{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; margin-bottom:1.5rem}
.contact-inline{font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary)}
.contact-inline a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--accent-quiet)}
.contact-inline a:hover{color:var(--accent-text)}
.area{
  font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary);
  border-top:1px solid var(--rule); padding-top:1rem; margin:0; max-width:46ch;
}

/* ---- sections ---- */
section{padding-block:var(--stack)}
.section-head{margin-bottom:2.5rem}
.section-head h2{margin-bottom:.6rem}
.section-head p{color:var(--text-secondary); max-width:56ch; margin:0}

/* ---- listen ---- */
.listen{background:var(--bg-surface); border-block:1px solid var(--rule)}
.tracks{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:2rem}
.track{
  display:flex; align-items:center; gap:1rem; background:var(--carbon-900);
  padding:1rem 1.25rem; flex-wrap:wrap;
}
.track__btn{
  flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--accent-quiet);
  background:transparent; color:var(--accent-text); cursor:pointer;
  display:grid; place-items:center; font-size:.9rem;
}
.track__btn:hover{background:var(--accent-solid); color:var(--carbon-950); border-color:var(--accent-solid)}
.track__meta{flex:1 1 12rem; min-width:0}
.track__title{font-family:Archivo,sans-serif; font-weight:600; font-size:1rem; margin:0}
.track__kind{margin:0; font-size:var(--t-small); color:var(--text-secondary)}
.track__time{font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary); font-variant-numeric:tabular-nums}
/* Video dropped 11 Sep — the two players and the photo Gary chose now share the
   row, so the section has no dead space where the clip used to be. */
.listen__pair{display:grid; gap:clamp(1.25rem,3vw,2rem); grid-template-columns:1fr; align-items:start}
@media (min-width:56rem){ .listen__pair{grid-template-columns:1.05fr .95fr} }
.listen__pair .tracks{margin-bottom:0}
.shot{margin:0; border:1px solid var(--rule); background:var(--carbon-950)}
.shot .shot-open{display:block; width:100%}
.shot img{width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 34%}
.shot figcaption{
  padding:.75rem 1rem; border-top:1px solid var(--rule);
  font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary);
}

/* ---- event types ---- */
.events{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.event{border:1px solid var(--rule); padding:1.75rem 1.5rem; background:var(--bg-surface)}
.event h3{color:var(--brass-300); margin-bottom:.5rem}
.event p{margin:0; color:var(--text-secondary); font-size:var(--t-small)}

/* ---- line-up: solo or band ---- */
.lineup{background:var(--bg-surface); border-block:1px solid var(--rule)}
.picks{display:grid; gap:1.25rem; grid-template-columns:1fr}
@media (min-width:52rem){ .picks{grid-template-columns:1fr 1fr} }
/* Whole card is the link. No filled button here — the page already has one. */
.pick{
  display:block; text-decoration:none; color:var(--text);
  border:1px solid var(--rule); background:var(--bg-raised);
  transition:border-color .15s ease;
}
.pick img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:50% 28%}
/* a single pleat of the bellows as the seam between photo and words */
.pick__body{border-top:1px solid var(--rule); padding:1.5rem}
.pick__body::before{
  content:""; display:block; height:10px; margin:-1.5rem -1.5rem 1.25rem;
  background:
    repeating-linear-gradient(90deg,
      rgba(216,165,68,.00) 0px, rgba(216,165,68,.07) 7px, rgba(216,165,68,.13) 13px,
      rgba(0,0,0,.55) 13.5px, rgba(216,165,68,.02) 14px, rgba(216,165,68,.00) 22px);
}
.pick h3{color:var(--brass-300); margin-bottom:.5rem}
.pick p{color:var(--text-secondary); font-size:var(--t-small); margin:0 0 1.1rem}
.pick__cta{
  font-family:Archivo,sans-serif; font-size:var(--t-small); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--brass-300);
  border-bottom:1px solid var(--accent-quiet); padding-bottom:.15rem;
}
.pick__cta::after{content:" \2192"}
.pick:hover{border-color:var(--accent-text)}
.pick:hover .pick__cta{border-bottom-color:var(--accent-text)}

/* ---- venues ---- */
.venue-list{list-style:none; margin:0; padding:0; columns:2; column-gap:2.5rem}
.venue-list li{
  break-inside:avoid; padding:.55rem 0; border-bottom:1px solid var(--rule);
  font-family:Archivo,sans-serif; font-size:var(--t-small);
}
.venue-list li{display:flex; align-items:baseline; gap:.75rem; justify-content:space-between}
.venue-list .place{flex:none; color:var(--accent-text); font-size:.875rem; letter-spacing:.02em}

/* ---- repertoire ---- */
.rep{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.rep section{padding:0}
.rep h3{font-size:1rem; color:var(--brass-300); padding-bottom:.5rem; border-bottom:1px solid var(--rule-strong); margin-bottom:.75rem}
.rep ul{list-style:none; margin:0; padding:0; font-size:var(--t-small); color:var(--text-secondary)}
.rep li{padding:.18rem 0}

/* ---- comments ---- */
.comments{background:var(--bg-surface); border-block:1px solid var(--rule)}
.quote-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); margin-bottom:2.5rem}
blockquote{margin:0; border-left:2px solid var(--accent-quiet); padding-left:1.25rem}
blockquote p{margin:0 0 .6rem}
blockquote footer{font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary)}
.note{
  font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary);
  border:1px dashed var(--rule-strong); padding:.75rem 1rem; margin:0 0 2rem;
}

/* ---- forms ---- */
.form{display:grid; gap:1.1rem; max-width:34rem}
.field{display:grid; gap:.4rem}
.field label{font-family:Archivo,sans-serif; font-size:var(--t-small); font-weight:600}
.field .hint{font-size:var(--t-small); color:var(--text-secondary)}
input,select,textarea{
  font-family:Archivo,sans-serif; font-size:1rem; /* 16px: no iOS zoom */
  background:var(--carbon-950); color:var(--text);
  border:1px solid var(--rule-strong); border-radius:2px; padding:.75rem .85rem;
  width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent-text)}
textarea{min-height:7rem; resize:vertical}
.success{
  border:1px solid var(--accent-quiet); background:rgba(216,165,68,.07);
  padding:1.25rem 1.5rem; max-width:34rem;
}
.success h3{color:var(--brass-300); margin-bottom:.4rem}
.success p{margin:0; color:var(--text-secondary)}

/* ---- booking split ---- */
.book-grid{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr}
@media (min-width:64rem){ .book-grid{grid-template-columns:1.1fr .9fr} }
.aside{border:1px solid var(--rule); padding:1.75rem 1.5rem; background:var(--bg-surface); align-self:start}
.aside h3{margin-bottom:.75rem; color:var(--brass-300)}
.aside dl{margin:0; display:grid; gap:.85rem}
.aside dt{font-family:Archivo,sans-serif; font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; color:var(--text-secondary)}
.aside dd{margin:0}
.aside dd a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--accent-quiet)}

/* ---- footer ---- */
.site-footer{background:var(--carbon-950); border-top:1px solid var(--rule); padding-block:3rem 5.5rem}
.footer-grid{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); margin-bottom:2rem}
.site-footer .wordmark{font-size:1.75rem; margin:0 0 .5rem}
.site-footer h3{font-size:var(--t-label); letter-spacing:.14em; color:var(--text-secondary); margin-bottom:.75rem}
.site-footer a{color:var(--text); text-decoration:none}
.site-footer a:hover{color:var(--accent-text)}
.site-footer ul{list-style:none; margin:0; padding:0; font-size:var(--t-small); display:grid; gap:.45rem}
.colophon{border-top:1px solid var(--rule); padding-top:1.5rem; font-size:var(--t-small); color:var(--text-secondary); font-family:Archivo,sans-serif; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem}
.site-footer .credit a{color:var(--text-secondary); text-decoration:underline; text-underline-offset:.2em}
.site-footer .credit a:hover{color:var(--accent-text)}

/* ---- gallery + photo viewer ---- */
/* Fixed column counts, not auto-fit: eight photographs and an auto grid gives a
   row of six and an orphan row of two. 2 or 4 always divides eight cleanly. */
.gallery{
  display:grid; gap:.75rem; grid-template-columns:repeat(2,1fr);
  list-style:none; margin:0; padding:0;
}
@media (min-width:48rem){ .gallery{grid-template-columns:repeat(4,1fr)} }
.gallery li{margin:0}
.shot-open{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:zoom-in; -webkit-appearance:none; appearance:none;
}
.gallery .shot-open img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%;
  filter:saturate(.88) contrast(1.05) brightness(.95);
  transition:filter .25s ease, transform .25s ease;
}
.gallery .shot-open:hover img{filter:saturate(1) contrast(1.02) brightness(1.04)}
.shot .shot-open{cursor:zoom-in}

/* An author-level display always beats the UA's [hidden]{display:none}, so the
   overlay has to opt out explicitly or it covers the page from first paint. */
.viewer[hidden]{display:none}
.viewer{
  position:fixed; inset:0; z-index:60;
  background:rgba(9,8,6,.94);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  cursor:zoom-out;
}
.viewer__frame{margin:0; max-width:min(96rem,100%); display:grid; gap:.9rem; justify-items:center}
.viewer__frame img{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border:1px solid var(--rule-strong); background:var(--carbon-950);
}
.viewer__frame figcaption{
  font-family:Archivo,sans-serif; font-size:var(--t-small); color:var(--text-secondary);
  text-align:center; max-width:50ch;
}
.viewer__close,
.viewer__nav{
  position:absolute; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--rule-strong); background:rgba(18,16,13,.82); color:var(--text);
  line-height:1; cursor:pointer; display:grid; place-items:center;
  font-family:Archivo,sans-serif;
}
.viewer__close{top:clamp(.5rem,2vw,1.25rem); right:clamp(.5rem,2vw,1.25rem); font-size:1.6rem}
.viewer__nav{top:50%; transform:translateY(-50%); font-size:2rem; padding-bottom:.18em}
.viewer__nav--prev{left:clamp(.35rem,2vw,1.5rem)}
.viewer__nav--next{right:clamp(.35rem,2vw,1.5rem)}
.viewer__close:hover,
.viewer__nav:hover{border-color:var(--accent-text); color:var(--accent-text)}
.viewer__count{
  position:absolute; bottom:clamp(.5rem,2vw,1.25rem); left:0; right:0; margin:0;
  text-align:center; font-family:Archivo,sans-serif; font-size:var(--t-small);
  color:var(--text-secondary); font-variant-numeric:tabular-nums;
}
/* On a phone the arrows sit at the bottom, out from under a thumb holding the
   photo, and swiping does the work anyway. */
@media (max-width:34rem){
  .viewer__nav{top:auto; bottom:3.25rem; transform:none}
  .viewer__frame{padding-bottom:2rem}
}

/* ---- scroll reveals ----
   The hidden state is applied by JS, never in CSS. If the GSAP CDN is blocked or
   the file fails to load, nothing is ever hidden and the page reads normally —
   a stylesheet that starts everything at opacity 0 turns a failed script into a
   blank site. */
/* will-change is not set here. Putting it on every [data-reveal] at once
   promotes dozens of compositor layers for the life of the page and is
   what made the reveals hitch on scroll. GSAP promotes the layer itself
   while a tween is running. */

.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; position:fixed; z-index:99; background:var(--accent-solid); color:var(--carbon-950); padding:.7rem 1.1rem}

@media (max-width:40rem){
  .venue-list{columns:1}
}
/* Comment form behind a disclosure: the home page shows no open form,
   so nothing competes with the booking action. */
.disclosure{margin-top:2rem; border-top:1px solid var(--rule); padding-top:1.5rem}
.disclosure>summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.6rem;
  font-family:Archivo,sans-serif; font-size:1rem; font-weight:700;
  padding:.8rem 1.4rem; border:1px solid var(--rule-strong); border-radius:2px;
  color:var(--text); text-transform:uppercase; letter-spacing:.06em;
}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary::marker{content:""}
.disclosure>summary::after{content:"+"; font-weight:400; opacity:.7}
.disclosure[open]>summary::after{content:"\2013"}
.disclosure>summary:hover{border-color:var(--accent-text); color:var(--accent-text)}
.disclosure__body{margin-top:1.75rem}

/* Mobile header: the wrapped nav was eating a third of the first screen.
   Below 48rem it collapses to wordmark + the booking action; a menu button
   is a v1 build item, not a prototype decision. */
@media (max-width:48rem){
  .site-header .nav{display:none}
  .site-header .wrap{min-height:56px; gap:.6rem; flex-wrap:nowrap}
  .site-header .wordmark{font-size:1.3rem}
  .site-header .btn{padding:.6rem .9rem; font-size:.9375rem}
}

/* ---- phone menu ----
   A word, not a hamburger icon: the people booking Gary are not all fluent in icons. */
.menu-btn{
  display:none; align-items:center; flex:none;
  font-family:Archivo,sans-serif; font-size:.9375rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  padding:.6rem .8rem; border-radius:2px; border:1px solid var(--rule-strong);
  background:transparent; color:var(--text); cursor:pointer;
}
.menu-btn[aria-expanded="true"]{border-color:var(--accent-text); color:var(--accent-text)}
.header-call{display:none}
/* On a phone the header holds two buttons of exactly the same size: Menu, and Call —
   the phone is how Gary is actually reached. Booking is the first thing inside the menu. */
@media (max-width:48rem){
  .site-header .header-cta{display:none}
  .menu-btn,
  .site-header .header-call{
    display:inline-flex; justify-content:center; align-items:center;
    flex:none; width:5.75rem; height:44px; padding:0; line-height:1;
    font-family:Archivo,sans-serif; font-size:.9375rem; font-weight:700; letter-spacing:.06em;
  }
}
/* the narrowest phones: both buttons shrink together, never one without the other */
@media (max-width:22rem){
  .site-header .wordmark{font-size:1.1rem}
  .site-header .wrap{gap:.45rem}
  .menu-btn,
  .site-header .header-call{width:4.6rem; font-size:.8125rem; letter-spacing:.03em}
}

.mobile-nav{
  position:absolute; left:0; right:0; top:100%;
  background:var(--carbon-950); border-bottom:1px solid var(--rule-strong);
  box-shadow:0 18px 30px rgba(0,0,0,.45);
  display:flex; flex-direction:column; padding:.5rem var(--gutter) 1.25rem;
  max-height:calc(100vh - 56px); overflow-y:auto;
}
.mobile-nav>a{
  font-family:Archivo,sans-serif; font-size:1.125rem; font-weight:600;
  color:var(--text); text-decoration:none; padding:.85rem 0; border-bottom:1px solid var(--rule);
}
.mobile-nav>a:active{color:var(--accent-text)}
.mobile-nav__cta{display:grid; gap:.6rem; margin:.75rem 0 .5rem}
.mobile-nav__cta .btn{justify-content:center}
@media (min-width:48.01rem){ .mobile-nav{display:none!important} }

/* ---- back to top ---- */
.to-top{
  position:fixed; z-index:30;
  right:max(1rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom));
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(18,16,13,.92); color:var(--brass-300); border:1px solid var(--brass-700);
  font-size:1.35rem; line-height:1; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.to-top:hover{border-color:var(--accent-text); color:var(--cream-100)}

/* .form and the viewer buttons set display themselves, which beats the browser's own [hidden]. */
[hidden]{display:none!important}
/* focused by script only so screen readers land on it; a ring round a thank-you reads as an error */
.success:focus{outline:none}

/* ---- guest book ----
   The newest comment sits under a warm stage light beside an invitation to add one, so a
   single comment fills its row with a purpose instead of a stretched card. The rest follow
   in a grid, each signed like a guest book — a name, not an avatar. */
.guest{margin:0; position:relative}
.guest blockquote{margin:0; padding:0; border:0}
/* a pasted link or a long unbroken word must wrap instead of pushing the card wider */
.guest blockquote p{margin:0; text-wrap:pretty; overflow-wrap:anywhere}
.guest__sig{overflow-wrap:anywhere}

.guestwall{display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); margin-bottom:1.25rem}
.guestwall>.more-row{margin:0}
@media (min-width:56rem){
  .guestwall{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .guestwall>.guest--lead{grid-column:1; grid-row:1}
  .guestwall>.invite{grid-column:2; grid-row:1}
  .guestwall>.guestbook,
  .guestwall>.more-row{grid-column:1 / -1}
}
/* Older comments wait behind "Read more" — fewer on a phone, where each card is a full screen
   width. Only with JavaScript: without it there is no button, so everything shows. */
.js .guestbook:not(.is-open) .d-extra{display:none}
@media (max-width:47.99rem){ .js .guestbook:not(.is-open) .m-extra{display:none} }
@media (min-width:48rem){ .more-row--phone{display:none} }
.js .gallery:not(.is-open) .extra{display:none}

.guest--lead{
  padding:clamp(2.75rem,5vw,3.25rem) clamp(1.5rem,4vw,2.5rem) clamp(1.75rem,3.5vw,2.25rem);
  border:1px solid var(--rule-strong); overflow:hidden;
  background:
    radial-gradient(110% 85% at 0% 0%, rgba(216,165,68,.16), rgba(216,165,68,0) 58%),
    var(--carbon-800);
}
.guest--lead::before{
  content:"\201C"; position:absolute; top:-.35rem; left:clamp(.75rem,2.5vw,1.5rem);
  font-family:Lora,Georgia,serif; font-size:clamp(4.5rem,8vw,6rem); line-height:1;
  color:var(--brass-500); opacity:.4; pointer-events:none;
}
.guest--lead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:10px;
  background:
    repeating-linear-gradient(90deg,
      rgba(216,165,68,.00) 0px, rgba(216,165,68,.08) 7px, rgba(216,165,68,.16) 13px,
      rgba(0,0,0,.55) 13.5px, rgba(216,165,68,.02) 14px, rgba(216,165,68,.00) 22px);
}
.guest--lead blockquote p{
  font-family:Lora,Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,2.1vw,1.625rem); line-height:1.42; color:var(--cream-100);
  max-width:38ch; margin-bottom:1.5rem;
}
.guest--long blockquote p{font-size:clamp(1.125rem,1.6vw,1.3125rem); max-width:50ch}

/* signed with a short brass stroke, the way a name is signed under an entry */
.guest__sig{display:grid; gap:.15rem; padding-left:2.25rem; position:relative}
.guest__sig::before{
  content:""; position:absolute; left:0; top:.62em; width:1.5rem; height:1px; background:var(--brass-500);
}
.guest__name{
  font-family:Archivo,sans-serif; font-weight:700; font-size:var(--t-small);
  text-transform:uppercase; letter-spacing:.07em; color:var(--cream-100);
}
.guest__where{font-family:Archivo,sans-serif; font-size:.875rem; color:var(--text-secondary)}

.invite{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.75rem;
  padding:clamp(1.5rem,3vw,2rem); border:1px dashed var(--rule-strong);
}
.invite h3{color:var(--brass-300)}
.invite p{margin:0 0 .5rem; color:var(--text-secondary); font-size:var(--t-small)}

.guestbook{list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; grid-template-columns:1fr}
.guestbook li{display:flex}
.guestbook li>.guest{flex:1; display:flex; flex-direction:column}
.guestbook li>.guest blockquote{flex:1}
@media (min-width:48rem){ .guestbook{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:68rem){ .guestbook{grid-template-columns:repeat(3,minmax(0,1fr))} }
.guestbook li{margin:0}
.more-row{margin:1.5rem 0 0}
.again{font-family:Archivo,sans-serif; font-size:var(--t-small)}
/* with JavaScript the invitation card opens the form, so the second button is redundant */
.js .guest-form>summary{display:none}
.js .guest-form:not([open]){margin:0; padding:0; border:0}
.guestbook .guest{
  padding:2.25rem 1.5rem 1.4rem; border:1px solid var(--rule); background:var(--carbon-950);
}
.guestbook .guest::before{
  content:"\201C"; position:absolute; top:.1rem; left:1.1rem;
  font-family:Lora,Georgia,serif; font-size:3.5rem; line-height:1; color:var(--brass-500); opacity:.45;
}
.guestbook blockquote p{
  font-family:Lora,Georgia,serif; font-size:1.0625rem; line-height:1.6; color:var(--cream-100);
  margin-bottom:1.25rem;
}

/* spam trap: people never see it, form-filling bots do */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-error{
  margin:0; padding:.75rem 1rem; border:1px solid var(--stage-600);
  background:rgba(176,58,46,.12); color:var(--cream-100);
  font-family:Archivo,sans-serif; font-size:var(--t-small);
}
button:disabled{opacity:.6; cursor:progress}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  /* belt and braces: if the reveal script ran before the query was consulted */
  [data-reveal]{opacity:1!important; transform:none!important}
}