/* The Happy Yard — Daylight.
   Generated by build/build_daylight.py. Edit build/data.py, not this file.

   One serif (Fraunces, optical size doing the work at display sizes), one
   grotesque (Inter Tight) for everything a reader has to actually read, and a
   single accent used sparingly. Rules are hairlines. Nothing has a shadow. */

:root{
  --paper:#FAF7EF;
  --paper-2:#F3EEE2;
  --ink:#171512;
  --ink-2:#5C564C;
  --ink-3:#8C8577;
  --line:rgba(23,21,18,.14);
  --accent:#F5A623;
  --yellow:#FFD400;
  --pad:clamp(1.25rem,4vw,4rem);
  --measure:33rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Lenis owns the scroll position; scroll-behavior:smooth here would be a
   second smoothing system fighting it on every anchor jump. */
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font:400 clamp(1rem,.95rem + .22vw,1.1rem)/1.62 "Inter Tight",system-ui,sans-serif;
  overflow-x:hidden;font-feature-settings:"ss01";letter-spacing:-.005em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:Fraunces,Georgia,serif;font-weight:300;
  line-height:.98;letter-spacing:-.022em}
p{margin:0 0 1.1em}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.wrap{width:min(82rem,100% - var(--pad)*2);margin-inline:auto}
.narrow{width:min(46rem,100% - var(--pad)*2);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--ink);
  color:var(--paper);padding:.7rem 1rem}
.skip:focus{left:0}

.mark{display:block;background-image:url(../assets/img/menu-04.jpg);
background-size:229.15% 389.83%;background-position:42% 6.43%;
background-repeat:no-repeat;border-radius:50%}

/* ---------- masthead ------------------------------------------------- */
.top{position:fixed;inset:0 0 auto;z-index:50;
  background:linear-gradient(rgba(250,247,239,.94),rgba(250,247,239,0));
  backdrop-filter:blur(6px);transition:background .3s}
.top .wrap{display:flex;align-items:center;gap:1.25rem;min-height:4.5rem;
  flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none}
.brand .mark{width:2.3rem;height:2.3rem;flex:none;
  outline:1px solid var(--line);outline-offset:-1px}
.brand span{font-family:Fraunces;font-size:1.02rem;letter-spacing:-.01em}
nav ul{display:flex;gap:1.4rem;list-style:none;margin:0 0 0 auto;padding:0;
  flex-wrap:wrap}
nav a{text-decoration:none;font-size:.83rem;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-2);padding-block:.3rem;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover{color:var(--ink);border-color:var(--line)}
nav a[aria-current=page]{color:var(--ink);border-color:var(--ink)}

/* ---------- opening -------------------------------------------------- */
/* The hero image is pinned and its clip-path scrubs open. The default state
   below is the finished state: fully open, no transform. JS only ever winds
   it backwards from here, so a failed boot leaves the correct picture. */
.opening{position:relative;min-height:100svh;display:grid;
  grid-template-rows:1fr auto;padding-top:5.5rem}
.shot{margin:0}
/* The clipped box is its own element so the caption sits outside it — a
   caption inside a clip-path gets cut off the moment the scrub winds back. */
.frame{display:block;position:relative;overflow:hidden;border-radius:2px;
  clip-path:inset(0% 0% 0% 0%)}
.frame img{width:100%;height:100%;object-fit:cover;min-height:min(66svh,32rem)}
.shot figcaption{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.6rem}
.opening-title{padding:clamp(1.5rem,4vw,3rem) 0 clamp(1rem,3vw,2rem)}
.kicker{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}
h1{font-size:clamp(3rem,11.5vw,9.5rem);font-weight:300;max-width:11ch}
h1 em{font-style:italic;font-weight:400}
.opening-foot{display:grid;gap:1.5rem;grid-template-columns:1fr;
  padding-bottom:clamp(2rem,5vw,4rem);border-top:1px solid var(--line);
  padding-top:1.4rem}
@media(min-width:56rem){.opening-foot{grid-template-columns:1.4fr 1fr 1fr;
  align-items:start}}
.opening-foot p{max-width:var(--measure);margin:0}
.facts{list-style:none;margin:0;padding:0;font-size:.92rem;color:var(--ink-2)}
.facts li{padding:.3rem 0;border-bottom:1px solid var(--line)}
.facts li:last-child{border-bottom:none}
.facts b{color:var(--ink);font-weight:500}

/* ---------- shared type ---------------------------------------------- */
.section{padding-block:clamp(4rem,11vw,9rem)}
.head{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-bottom:clamp(2rem,5vw,4rem)}
@media(min-width:56rem){.head{grid-template-columns:1fr 1.2fr;align-items:end}}
.head h2{font-size:clamp(2.2rem,6.5vw,5rem)}
.head p{max-width:var(--measure);margin:0;color:var(--ink-2)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:.83rem;letter-spacing:.10em;text-transform:uppercase;
  padding:.95rem 1.7rem;border:1px solid var(--ink);border-radius:999px;
  transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}

/* ---------- chapters -------------------------------------------------- */
.chapter{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;
  padding-block:clamp(2.5rem,7vw,6rem);border-top:1px solid var(--line)}
/* Three tracks: the chapter number, the prose, the photograph. Alternate by
   naming columns explicitly — `order` would slide the figure into the 6rem
   number track and squash it to a thumbnail. */
@media(min-width:56rem){
  .chapter{grid-template-columns:6rem 1fr 1fr;align-items:start}
  .chapter>.num{grid-column:1}
  .chapter>div{grid-column:2}
  .chapter>figure{grid-column:3}
  .chapter:nth-of-type(even)>div{grid-column:3}
  .chapter:nth-of-type(even)>figure{grid-column:2}
}
.chapter .num{font-family:Fraunces;font-size:.9rem;color:var(--ink-3);
  letter-spacing:.08em;position:sticky;top:6rem}
.chapter h3{font-size:clamp(1.7rem,3.6vw,2.7rem);margin-bottom:1rem}
.chapter p{color:var(--ink-2);max-width:var(--measure)}
.chapter figure{margin:0;overflow:hidden}
.chapter figure img{aspect-ratio:4/5;object-fit:cover;width:100%;
  will-change:transform}
.chapter figcaption{font-size:.74rem;letter-spacing:.06em;color:var(--ink-3);
  margin-top:.6rem;text-transform:uppercase}

/* ---------- the rail --------------------------------------------------
   Pinned and scrubbed sideways by JS. Without JS it is an ordinary
   scroll-snapping horizontal scroller, which is a perfectly good gallery. */
.rail-outer{overflow:hidden;padding-block:clamp(2rem,5vw,3rem)}
.rail{display:flex;gap:clamp(1rem,2.5vw,2rem);padding-inline:var(--pad);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.js .rail{overflow-x:visible}
.rail figure{margin:0;flex:0 0 min(78vw,30rem);scroll-snap-align:center}
.rail img{width:100%;aspect-ratio:3/2;object-fit:cover}
.rail figcaption{font-size:.78rem;color:var(--ink-2);margin-top:.7rem;
  max-width:26rem}

/* ---------- marquee ---------------------------------------------------- */
.band{border-block:1px solid var(--line);overflow:hidden;padding-block:1.1rem}
.marquee{display:flex;gap:2.5rem;width:max-content;will-change:transform;
  font-family:Fraunces;font-weight:300;font-size:clamp(1.4rem,4vw,2.6rem);
  align-items:center;white-space:nowrap}
.marquee span{display:inline-flex;align-items:center;gap:2.5rem}
.marquee span::after{content:"";width:.34rem;height:.34rem;border-radius:50%;
  background:var(--accent)}

/* ---------- menu index -------------------------------------------------- */
.index-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media(min-width:52rem){.index-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:82rem){.index-grid{grid-template-columns:repeat(3,1fr)}}
.entry{border-top:1px solid var(--ink);padding-top:1.1rem}
.entry h3{font-size:1.6rem;margin-bottom:.15rem}
.entry .note{font-size:.88rem;color:var(--ink-3);margin:0 0 1rem}
.grp{margin-bottom:1.2rem}
.grp h4{margin:0 0 .35rem;font:500 .72rem/1 "Inter Tight";letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.grp ul{margin:0;padding:0;list-style:none;font-size:.97rem;color:var(--ink-2)}
.grp li{padding:.16rem 0}

.pours{display:grid;gap:0;grid-template-columns:1fr;
  border-top:1px solid var(--line)}
@media(min-width:52rem){.pours{grid-template-columns:repeat(2,1fr)}}
@media(min-width:82rem){.pours{grid-template-columns:repeat(3,1fr)}}
.pour{border-bottom:1px solid var(--line);padding:1.15rem .25rem;
  display:flex;gap:1rem;align-items:baseline}
.pour b{font-family:Fraunces;font-weight:400;font-size:1.22rem;flex:none;
  max-width:11rem}
.pour span{font-size:.86rem;color:var(--ink-3);text-align:right;
  margin-left:auto}

.backbar{columns:3 14rem;column-gap:2.5rem;margin-top:1.5rem}
.backbar section{break-inside:avoid;margin:0 0 1.5rem}
.backbar h4{margin:0 0 .3rem;font:500 .72rem/1 "Inter Tight";letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.backbar ul{margin:0;padding:0;list-style:none;font-size:.93rem;color:var(--ink-2)}
.footnote{margin-top:2.5rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-3);list-style:none;padding-left:0}

.scans{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:52rem){.scans{grid-template-columns:repeat(3,1fr)}}
.scans figure{margin:0}
.scans img{width:100%;border:1px solid var(--line)}
.scans figcaption{font-size:.76rem;color:var(--ink-3);margin-top:.5rem}

/* ---------- gallery ---------------------------------------------------- */
/* Three columns, each given a different parallax rate by JS. On one column
   the effect is meaningless, so it is only applied from 56rem up. */
.cols{display:grid;gap:clamp(.8rem,2vw,1.6rem);grid-template-columns:1fr}
@media(min-width:40rem){.cols{grid-template-columns:repeat(2,1fr)}}
@media(min-width:56rem){.cols{grid-template-columns:repeat(3,1fr);
  align-items:start}}
.col{display:grid;gap:clamp(.8rem,2vw,1.6rem)}
.col figure{margin:0}
.col img{width:100%;object-fit:cover}
.col figcaption{font-size:.76rem;color:var(--ink-3);margin-top:.5rem;
  line-height:1.35}
.col .credit{display:block;color:var(--line);color:rgba(23,21,18,.35)}

/* ---------- visit ------------------------------------------------------ */
.two{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:56rem){.two{grid-template-columns:1fr 1fr}}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.72rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.rows span:last-child{color:var(--ink-2);text-align:right}
.rows a{text-decoration-thickness:1px;text-underline-offset:3px}
.facilities{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facilities li{padding:.9rem 0;border-bottom:1px solid var(--line)}
.facilities b{display:block;font-family:Fraunces;font-weight:400;
  font-size:1.2rem;margin-bottom:.15rem}
.facilities span{font-size:.9rem;color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:1rem 0 0;
  padding:0}
.tags li{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;
  font-size:.82rem;color:var(--ink-2)}
h3.sub{font-family:Fraunces;font-weight:300;font-size:1.5rem;
  margin:2.5rem 0 .75rem}

/* ---------- footer ----------------------------------------------------- */
footer{border-top:1px solid var(--ink);background:var(--paper-2);
  padding-block:clamp(3rem,7vw,5rem) 3rem;margin-top:clamp(4rem,10vw,8rem)}
.foot{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:56rem){.foot{grid-template-columns:1.3fr 1fr 1fr}}
.foot h4{margin:0 0 .7rem;font:500 .72rem/1 "Inter Tight";letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.foot ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.foot li{padding:.16rem 0}
.foot .big{font-family:Fraunces;font-weight:300;font-size:clamp(1.6rem,3.4vw,2.4rem);
  line-height:1.05;margin:0 0 .8rem;max-width:14ch}
.colophon{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--ink-3);max-width:54rem}

/* ---------- motion ------------------------------------------------------ */
/* The only rules that hide content. app.js drops .js from <html> if GSAP never
   arrives, which restores every one of them. */
.js .reveal>*{opacity:0}
.js .fade{opacity:0;transform:translateY(20px)}

@media(prefers-reduced-motion:reduce){
  .js .reveal>*,.js .fade{opacity:1;transform:none}
  .marquee{transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media print{.top,.band,.btn-row{display:none}}