@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-garamond-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}

:root{
  --ink:#0d1117;
  --night:#0b1222;
  --bone:#f4efe7;
  --bone-dim:#d9d2c6;
  --amber:#e8b36a;
  --amber-deep:#c8853a;
  /* amber-deep is 2.67:1 on bone, so it cannot carry text on the light bands.
     amber-ink is the same hue dropped until it clears 4.5:1 (it measures 5.46). */
  --amber-ink:#8a5418;
  --ink-soft:#4a5159;
  --rule:rgba(232,179,106,.42);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:auto}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--bone);color:var(--ink);padding:.75rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.5rem clamp(1.25rem,4vw,3.5rem);
  background:linear-gradient(to bottom,rgba(7,11,20,.78) 0%,rgba(7,11,20,.5) 55%,rgba(7,11,20,0) 100%);
  transition:background-color .25s ease;
}
/* Past the hero the header crosses the bone bands, where its own gradient
   fades to clear and the nav would be bone on cream. So once nothing but the
   page is underneath it, it takes a solid bar of its own. */
.site-head.is-solid{
  background:var(--night);
  border-bottom:1px solid rgba(244,239,231,.12);
}
.wordmark{
  font-family:var(--sans);font-weight:500;font-size:.9rem;
  letter-spacing:.42em;text-transform:uppercase;text-decoration:none;
  color:var(--bone);white-space:nowrap;
}
.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem)}
.site-nav a{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);padding:.4rem 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--amber)}
.head-cta{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:#17120a;background:var(--amber);padding:.7rem 1.3rem;border:1px solid var(--amber);
}
.head-cta:hover,.head-cta:focus-visible{background:#f0c488;border-color:#f0c488}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  background:#0b1222;
}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 54%}
.hero-still{display:none}
/* the clip sits over the still and is revealed only once it is actually
   playing, so a refused autoplay or a failed fetch leaves the still showing */
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 54%;
  opacity:0;transition:opacity .6s ease;
}
.hero-video.is-playing{opacity:1}
/* Everything worth looking at in this frame (the sign, the lit windows, the
   string lights, the igloos) lives in the upper part of it, so the scrim is
   bottom weighted and nearly clear above the copy.

   The stops are in PX, not percentages, on purpose. The copy block is 394 to
   446px tall across every desktop viewport measured, a 52px spread, while as a
   fraction of the hero it swings from 41% to 57%. Percentage stops therefore
   slid out from under the eyebrow on short viewports and it measured 3.74:1 at
   1366x768. Anchoring in px makes the strong zone track the text instead. */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(5,9,17,.90) 0,rgba(5,9,17,.80) 120px,rgba(5,9,17,.68) 240px,rgba(5,9,17,.52) 360px,rgba(5,9,17,.34) 470px,rgba(5,9,17,.17) 560px,rgba(5,9,17,.06) 680px,rgba(5,9,17,.03) 820px,rgba(5,9,17,.08) 100%),
    linear-gradient(to right,rgba(5,9,17,.55) 0%,rgba(5,9,17,.48) 26%,rgba(5,9,17,.34) 44%,rgba(5,9,17,.16) 58%,rgba(5,9,17,.04) 70%,rgba(5,9,17,0) 80%);
}
.hero-inner{
  position:relative;z-index:2;
  width:100%;max-width:1320px;margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3.5rem) clamp(3rem,6vw,5rem);
}
.eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:#f0ebe2;margin:0 0 1.1rem;
}
.eyebrow::after{content:'';flex:0 0 clamp(2rem,6vw,5rem);height:1px;background:var(--rule)}
/* The headline carries the hero on its own, so it is sized to be read across the
   room rather than scanned. Weight 400 rather than 300: at this size the light cut
   goes thin and silvery against the photograph, and the roman has the body the
   brief asked for without turning into a heavy sans. */
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,5.4vw,4.75rem);
  line-height:1.03;letter-spacing:-.015em;
  margin:0 0 1.15rem;color:#fdfaf4;
}
.hero h1 em{display:block;font-style:italic;font-weight:300;color:var(--amber)}
.hero-sub{
  font-size:clamp(1.02rem,1.45vw,1.2rem);line-height:1.5;
  max-width:46ch;margin:0 0 1.9rem;color:#efe9df;
}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;margin:0 0 .35rem}
.btn{
  display:inline-block;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding:1.05rem 2rem;border:1px solid transparent;
}
.btn-solid{background:var(--amber);color:#17120a;border-color:var(--amber)}
.btn-solid:hover,.btn-solid:focus-visible{background:#f0c488;border-color:#f0c488}
.btn-ghost{color:#fdfaf4;border-color:rgba(244,239,231,.5)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--amber);color:var(--amber)}

/* the offerings strip, now its own band under the photograph */
.strip{background:var(--night);border-bottom:1px solid rgba(244,239,231,.1)}
.offerings{
  width:100%;max-width:1320px;margin:0 auto;list-style:none;
  padding:1.15rem clamp(1.25rem,4vw,3.5rem);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
}
.offerings li{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:#ded6c8;
}

/* The pause control has to sit with the motion it controls, but it is a utility and
   not a third call to action, so it sits out of the reading column rather than in it. */
.motion-toggle{
  position:absolute;z-index:3;right:clamp(1.25rem,4vw,3.5rem);bottom:clamp(1.25rem,3vw,2.2rem);
  font-family:inherit;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);background:rgba(5,9,17,.55);border:1px solid rgba(244,239,231,.38);
  padding:.52rem .9rem;cursor:pointer;white-space:nowrap;
}
.motion-toggle:hover,.motion-toggle:focus-visible{border-color:var(--amber);color:var(--amber)}

/* ---------- bands ---------- */
.band{padding:clamp(3.5rem,7.5vw,6.75rem) 0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}

.kicker{
  margin:0 0 1.1rem;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
}
.band h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.85rem,3.4vw,2.7rem);
  line-height:1.14;letter-spacing:-.005em;
  margin:0 0 1.5rem;max-width:26ch;
}
.band h2 em{font-style:italic}
.band-sub{max-width:62ch;margin:0 0 clamp(2rem,4vw,3rem);font-size:1.04rem}

/* light bands */
.b-welcome,.b-menu,.b-team{background:var(--bone);color:var(--ink)}
.b-welcome .kicker,.b-menu .kicker,.b-team .kicker,
.b-welcome h2 em,.b-menu h2 em,.b-team h2 em{color:var(--amber-ink)}
.b-welcome .band-sub,.b-menu .band-sub,.b-team .band-sub{color:var(--ink-soft)}

/* dark bands */
.b-plates,.b-bar,.b-visit{background:var(--ink);color:var(--bone)}
.b-plates .kicker,.b-bar .kicker,.b-visit .kicker,
.b-plates h2 em,.b-bar h2 em,.b-visit h2 em{color:var(--amber)}
.b-plates .band-sub,.b-bar .band-sub,.b-visit .band-sub{color:var(--bone-dim)}

/* a hairline between two dark bands would be invisible, so the rule only goes
   where the background actually changes */
.b-welcome{border-top:1px solid var(--rule)}

.two-col{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
}
.two-col p{margin:0 0 1rem}
.two-col p:last-child{margin-bottom:0}
.lede{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.38;
  margin:0;
}

/* ---------- plates ---------- */
/* the sources are 4:3 and 3:4, so the frame is square: it keeps 75% of the
   width of one and 75% of the height of the other, and nothing else is fair to
   both. Variation is in object-position only, never in frame shape. */
.plate-feature{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;
  margin:0 0 clamp(1.75rem,3.5vw,3rem);
}
.plate-feature img{aspect-ratio:1/1;object-fit:cover;object-position:50% 56%}
.plate-feature h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.2;margin:0 0 .65rem;
}
.plate-feature p{margin:0 0 1rem;color:var(--bone-dim);max-width:38ch}
.price{font-size:.78rem;letter-spacing:.18em;color:var(--amber)}

.plates{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.plate img{aspect-ratio:1/1;object-fit:cover}
.plate:nth-child(1) img{object-position:50% 45%}
.plate:nth-child(2) img{object-position:50% 50%}
.plate:nth-child(3) img{object-position:50% 38%}
.plate:nth-child(4) img{object-position:50% 58%}
.plate-cap h3{
  font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.25;
  margin:.95rem 0 .4rem;
}
.plate-cap p{margin:0 0 .5rem;font-size:.85rem;line-height:1.5;color:var(--bone-dim)}

/* ---------- menu ---------- */
.menu-cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 clamp(2rem,5vw,4.5rem);
}
.menu-col h3{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:500;
  color:var(--amber-ink);margin:0 0 .4rem;
}
.menu-col h3 + .dishes{border-top:1px solid rgba(13,17,23,.16)}
.menu-col > h3:not(:first-child){margin-top:2.2rem}
.dishes{list-style:none;margin:0;padding:0}
.dishes li{
  display:grid;grid-template-columns:auto minmax(1.5rem,1fr) auto;
  align-items:baseline;gap:0 .55rem;
  padding:.85rem 0;border-bottom:1px solid rgba(13,17,23,.1);
}
.d-name{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.3}
.d-dots{border-bottom:1px dotted rgba(13,17,23,.4);transform:translateY(-.3em)}
.d-price{font-size:.88rem;letter-spacing:.06em;color:var(--amber-ink);white-space:nowrap}
.d-desc{grid-column:1/-1;margin-top:.3rem;font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.menu-note{max-width:72ch;margin:1.6rem 0 2rem;font-size:.78rem;line-height:1.6;color:var(--ink-soft)}
.btn-dark{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn-dark:hover,.btn-dark:focus-visible{background:var(--night);border-color:var(--night)}

/* ---------- patio ---------- */
.b-patio{
  padding:0;background:var(--night);color:var(--bone);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch;
}
.patio-media img{height:100%;min-height:clamp(300px,36vw,540px);object-fit:cover;object-position:50% 54%}
.patio-copy{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,4vw,4rem);
}
.b-patio .kicker,.b-patio h2 em{color:var(--amber)}
.patio-copy p{margin:0 0 1.75rem;max-width:44ch;color:var(--bone-dim)}

/* ---------- team ---------- */
.people{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
}
.people li{border-top:1px solid rgba(13,17,23,.18);padding-top:1.25rem}
.people h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.2;margin:0 0 .25rem}
.role{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-ink);margin:0 0 .9rem}
.people p:last-child{margin:0;font-size:.92rem;line-height:1.62;color:var(--ink-soft)}

/* ---------- visit ---------- */
.visit-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:start;
}
.facts{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:0 clamp(1.25rem,3vw,2.5rem);margin:0 0 2rem;
}
.facts dt{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone-dim);padding:.9rem 0;border-top:1px solid rgba(244,239,231,.16);
}
.facts dd{margin:0;padding:.9rem 0;font-size:.98rem;line-height:1.55;border-top:1px solid rgba(244,239,231,.16);overflow-wrap:anywhere}
.facts a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(232,179,106,.45)}
.facts a:hover,.facts a:focus-visible{border-bottom-color:var(--amber)}
.visit-actions{display:flex;flex-wrap:wrap;gap:.8rem 1rem}
.map-frame{position:relative;aspect-ratio:4/3;border:1px solid rgba(244,239,231,.18)}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- footer ---------- */
.site-foot{
  background:var(--night);color:var(--bone-dim);
  border-top:1px solid rgba(244,239,231,.12);
  padding:clamp(2.5rem,5vw,4rem) 0 1.75rem;
}
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.75rem 3rem}
.foot-mark{
  margin:0 0 .65rem;color:var(--bone);
  font-weight:500;font-size:.9rem;letter-spacing:.42em;text-transform:uppercase;
}
.foot-addr{margin:0;font-size:.9rem;line-height:1.7}
.foot-addr a{text-decoration:none;border-bottom:1px solid rgba(217,210,198,.35)}
.foot-addr a:hover,.foot-addr a:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
.foot-nav{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.65rem 1.4rem;max-width:32rem}
.foot-nav a{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--amber);border-bottom-color:var(--amber)}
.foot-fine{
  margin:clamp(2rem,4vw,3rem) 0 0;text-align:center;color:#9a9284;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}

/* ---------- privacy and accessibility pages ---------- */
.doc{
  max-width:720px;margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.25rem,4vw,2rem) clamp(3rem,6vw,5rem);
}
.doc h1{
  font-family:var(--serif);font-weight:300;line-height:1.1;
  font-size:clamp(2rem,4.5vw,2.9rem);margin:0 0 .5rem;
}
.doc-updated{
  margin:0 0 2.5rem;color:var(--bone-dim);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
}
.doc h2{
  font-family:var(--serif);font-weight:400;font-size:1.45rem;line-height:1.25;
  color:var(--amber);margin:2.6rem 0 .7rem;
}
.doc p{font-size:.97rem;line-height:1.72;margin:0 0 1rem}
.doc ul{margin:0 0 1rem;padding-left:1.25rem}
.doc li{font-size:.97rem;line-height:1.72;margin:0 0 .85rem}
.doc strong{font-weight:500;color:#fdfaf4}
.doc a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(232,179,106,.45)}
.doc a:hover,.doc a:focus-visible{border-bottom-color:var(--amber)}
.doc-back{
  display:inline-block;margin-top:2.5rem;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--bone);border-bottom:1px solid var(--rule);
}
.doc-back:hover,.doc-back:focus-visible{border-bottom-color:var(--amber)}

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

/* Band breakpoints run widest first so a narrower rule always wins. Column
   counts follow the RENDERED size of a photo, not the number of photos: four
   squares stop being plates and start being thumbnails around 1040. */
@media (max-width:1040px){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .b-patio{grid-template-columns:minmax(0,1fr)}
  .patio-media img{min-height:0;aspect-ratio:16/9}
  .visit-grid{grid-template-columns:minmax(0,1fr)}
  .map-frame{aspect-ratio:16/10}
}
@media (max-width:760px){
  .two-col,.menu-cols,.people,.plate-feature{grid-template-columns:minmax(0,1fr)}
  .plate-feature img{aspect-ratio:4/3}
  .menu-col:last-child > h3:first-child{margin-top:2.2rem}
  .band h2{max-width:none}
}
@media (max-width:620px){
  .plates{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .plate img{aspect-ratio:4/3}
  /* once a dish name wraps, the leader is a three dot stub beside a two line
     title, which reads as damage rather than as a menu */
  .d-dots{display:none}
  /* a max-content label column leaves about 200px for the value, which the
     email address cannot sit in */
  .facts{grid-template-columns:minmax(0,1fr);gap:0}
  .facts dt{padding-bottom:0;border-bottom:0}
  .facts dd{padding-top:.35rem;border-top:0}
}

@media (max-width:900px){
  .site-nav{display:none}
}
@media (max-width:600px){
  /* on phones the header overlays the top of the portrait still, which is the
     lit sign, so the header's own gradient has to carry the wordmark alone */
  .site-head{
    padding:1.1rem 1.25rem;
    background:linear-gradient(to bottom,rgba(7,11,20,.86) 0%,rgba(7,11,20,.66) 60%,rgba(7,11,20,.18) 100%);
  }
  .wordmark{letter-spacing:.3em;font-size:.78rem}
  .head-cta{padding:.6rem 1rem;font-size:.68rem}
  /* a 16:9 drone frame cover-crops to a sliver on a 0.46 phone viewport, so the
     phone gets a framed still stacked above the copy instead of text over photo */
  .hero{min-height:0;display:block;background:var(--night)}
  .hero-media{position:relative;inset:auto}
  .hero-landscape{display:none}
  /* never laid out and, because the script gates on the same breakpoint, never fetched */
  .hero-video{display:none}
  /* crop to the top: the fixed header overlays the first 74px of this still, and
     anywhere lower puts the APERITIVO sign board behind it */
  .hero-media img.hero-still{display:block;width:100%;height:46svh;object-fit:cover;object-position:50% 0}
  .hero-media::after{
    content:'';position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
    background:linear-gradient(to top,var(--night) 0%,rgba(11,18,34,.82) 32%,rgba(11,18,34,0) 100%);
  }
  .hero::before{display:none}
  .hero-inner{padding-top:1.6rem}
  /* the full location line wraps to two at .3em tracking, which puts a stray
     "COLORADO" on its own line directly above the headline */
  .eyebrow{letter-spacing:.17em;font-size:.66rem}
  .hero h1{font-size:clamp(2.3rem,9.6vw,3.2rem);line-height:1.06;margin-bottom:.9rem}
  .hero-sub{font-size:1rem;margin-bottom:1.8rem}
  .hero-actions{margin-bottom:1.8rem;gap:.7rem}
  .btn{padding:.95rem 1.5rem;flex:1 1 auto;text-align:center}
  /* the phone never loads the clip, so the control it pauses does not exist here */
  .motion-toggle{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}