@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/fraunces-latin-wght-italic.woff2') format('woff2-variations');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('assets/fonts/schibsted-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Schibsted Grotesk';src:url('assets/fonts/schibsted-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#f6f2e9;
  --paper-bright:#fffdf8;
  --ink:#16150f;
  --ink-soft:#4a4639;
  --rule:#cfc7b4;
  --rule-strong:#16150f;
  --blue:#1f4b86;
  --blue-bright:#3c74be;
  --booth:#1d4535;
  --maxw:1180px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Newsprint stock, generated inline so it costs no request and cannot be
     blocked. Two layers, because one does not read as paper: a fine grain for
     the tooth and a slow mottle for the variation in the sheet. Both are run
     through feComponentTransfer, since plain fractalNoise averages out to a
     flat tone at 1x (a four-octave layer at 14% measured a standard deviation
     of 1.43, which is invisible).

     Measured on the painted pixels at these values: the paper band runs a mean
     of 229.8 with a standard deviation of 5.14 and a darkest pixel of
     rgb(203,200,196), putting --ink at 10.97:1 and --ink-soft at 5.66:1
     against that pixel. The brighter band sits at a mean of 238.4, 11.74:1
     and 6.05:1. Raising either opacity pushes --ink-soft toward 4.5:1. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.4' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.6' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)' opacity='0.2'/%3E%3C/svg%3E");
  --stock:var(--grain),var(--mottle);
  --stock-size:240px 240px,300px 300px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--paper);
  background-image:var(--stock);
  background-size:var(--stock-size);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:3px}

/* The scroll lock. Collapsing the scrollable extent is the only lock that also
   defeats programmatic scrolls and focus-into-view. */
html.cine,html.cine body{height:100%;overflow:hidden}

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

:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#0f0e0b;
}
.hero-film,.hero-still{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-still{display:none}

/* Resting state: the paper wash and the masthead are VISIBLE. The cine class
   hides them while the film runs, so a failed video can never trap the page. */
.hero-wash{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(246,242,233,.34) 0%,rgba(246,242,233,.46) 40%,rgba(246,242,233,.60) 76%,rgba(246,242,233,.84) 100%);
  opacity:1;
  transition:opacity 1100ms cubic-bezier(.4,0,.2,1);
}
/* The masthead is an opaque newsprint panel, not a wash. It gives the logo's
   white something to multiply against and keeps the room visible around it.
   The whole panel arrives as one piece, so the easing carries a little
   overshoot: that is the pull up. */
.hero-plate{
  position:relative;
  z-index:2;
  width:min(690px,calc(100% - 2.5rem));
  margin:0 auto;
  padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.4rem,3.4vw,2.8rem) clamp(1.5rem,3vw,2.2rem);
  text-align:center;
  background:var(--paper-bright);
  border:1px solid var(--rule);
  box-shadow:0 1px 0 0 var(--paper-bright),0 28px 70px -24px rgba(16,14,8,.55);
  opacity:1;
  transform:none;
  transition:opacity 620ms cubic-bezier(.2,.75,.3,1.22),transform 620ms cubic-bezier(.2,.75,.3,1.22);
}
.hero-plate::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid var(--rule);
  pointer-events:none;
}

html.cine .hero-wash{opacity:0}
html.cine .scrollcue{opacity:0}
/* The masthead pulls up whole on the beat the camera clears the door, with the
   fly-through still running behind it. The wash and the scroll cue stay back
   until the film ends, so the rest of the shot keeps its colour. */
html.cine .hero-plate{opacity:0;transform:translateY(26px) scale(.965)}
html.cine.doors .hero-plate{opacity:1;transform:none}

.dateline{
  font-family:var(--sans);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.rule-double{
  border:0;
  border-top:2px solid var(--rule-strong);
  border-bottom:1px solid var(--rule-strong);
  height:4px;
  margin:0 auto 1.4rem;
  max-width:540px;
}
.rule-double.below{margin:1.5rem auto 1.3rem}

.lockup{
  width:min(300px,58vw);
  height:auto;
  margin:0 auto;
  mix-blend-mode:multiply;
}
.lede{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.05rem,2.3vw,1.45rem);
  line-height:1.45;
  color:var(--ink);
  max-width:42ch;
  margin:0 auto;
}
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin:1.6rem 0 1.1rem;
}
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:500;
  font-size:.95rem;
  letter-spacing:.04em;
  padding:.85rem 1.6rem;
  border:2px solid var(--blue);
  border-radius:2px;
  text-decoration:none;
  transition:background-color 160ms ease,color 160ms ease;
}
.btn-solid{background:var(--blue);color:#fffdf8}
.btn-solid:hover{background:#163968;border-color:#163968}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:#fffdf8}
.hours{
  font-size:.86rem;
  letter-spacing:.03em;
  color:var(--ink-soft);
  margin:0;
}
.hours b{color:var(--ink);font-weight:500}
.hours .nb{display:inline-block;white-space:nowrap}

.scrollcue{
  position:absolute;
  left:50%;
  bottom:1.4rem;
  transform:translateX(-50%);
  z-index:3;
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  /* The cue sits over the film, and the floor behind it is a black and white
     checkerboard, so its own opaque chip is what keeps it readable on every
     frame rather than on the one frame that happened to be pale. */
  color:var(--ink);
  background:var(--paper-bright);
  padding:.42rem .9rem .38rem;
  border:1px solid var(--rule);
  opacity:1;
  transition:opacity 700ms ease 600ms;
}

/* ---------- BAND BELOW (proves the unlock) ---------- */
main{
  position:relative;
  z-index:1;
  /* Opaque, so the pinned hero cannot read through the page below it. */
  background-color:var(--paper);
  background-image:var(--stock);
  background-size:var(--stock-size);
}
.band{padding:clamp(3.5rem,8vw,6.5rem) 1.5rem}
.wrap{width:min(var(--maxw),100%);margin:0 auto}
.kicker{
  font-family:var(--sans);
  font-weight:500;
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 .9rem;
}
h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem,4.4vw,3rem);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 1.1rem;
}
.cols{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.6rem,4vw,3rem);
  align-items:start;
}
.cols p{margin:0 0 1rem;max-width:62ch}
.cols p:last-child{margin-bottom:0}
.drop::first-letter{
  float:left;
  font-family:var(--serif);
  font-weight:600;
  font-size:3.4em;
  line-height:.78;
  padding:.06em .1em 0 0;
  color:var(--blue);
}
.sidebar{
  border-top:2px solid var(--rule-strong);
  padding-top:1.1rem;
  font-size:.92rem;
}
.sidebar-hd{
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1rem;
}
.sidebar dt{
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:1rem;
}
.sidebar dt:first-of-type{margin-top:0}
.sidebar dd{margin:.15rem 0 0;font-family:var(--serif);font-size:1.05rem}

@media (min-width:860px){
  .cols{grid-template-columns:1.6fr .9fr}
}

/* ---------- SHARED SECTION FURNITURE ---------- */
/* The alternating bands are a brighter stock, so they re-paint the noise over
   their own colour rather than letting main's darker paper show through. */
.band-alt{
  background-color:var(--paper-bright);
  background-image:var(--stock);
  background-size:var(--stock-size);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.hed{margin-bottom:.8rem}
.rule-thin{border:0;border-top:1px solid var(--rule-strong);margin:0 0 2rem}
.standfirst{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.02rem,2vw,1.2rem);
  color:var(--ink-soft);
  max-width:60ch;
  margin:0 0 2.4rem;
}
.cta-left{justify-content:flex-start;margin:2.4rem 0 0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- MENU ---------- */
.menu-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.2rem,4vw,3.2rem);
  align-items:start;
}
.menu-col{min-width:0}
.menu-hd{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.2;
  margin:0 0 .4rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--rule-strong);
}
.menu-note{font-size:.84rem;color:var(--ink-soft);margin:0 0 .65rem;line-height:1.5}
.menu-note.pad{margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid var(--rule);font-style:italic}

.price-list{list-style:none;margin:1.1rem 0 0;padding:0}
.price-list li{
  /* flow-root is what makes the text break around a floated photograph: a box
     that establishes a block formatting context is not allowed to overlap a
     float, so each row narrows beside the picture and widens again below it.
     Without it the flex row below would run straight under the image. */
  display:flow-root;
  padding:.62rem 0;
  border-bottom:1px solid var(--rule);
}
.price-list li:last-child{border-bottom:0}
/* Name, leader and price share one baseline row, with the description on its own
   line beneath, so the dotted rule can never strike through descriptive text. */
.price-list .ln{
  display:flex;
  align-items:baseline;
  gap:.4rem;
}
.price-list .nm{
  flex:0 1 auto;
  font-family:var(--serif);
  font-size:1.03rem;
  font-weight:500;
}
/* The printed menu uses dotted leaders, so the page does too. */
.price-list .dots{
  flex:1 1 auto;
  min-width:1.5rem;
  border-bottom:1px dotted var(--rule);
  transform:translateY(-.28em);
}
.price-list li small{
  display:block;
  font-family:var(--sans);
  font-weight:400;
  font-size:.79rem;
  line-height:1.45;
  color:var(--ink-soft);
  margin-top:.12rem;
}
.price-list .pr{
  flex:0 0 auto;
  font-family:var(--sans);
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.02em;
  color:var(--ink);
  white-space:nowrap;
}

.fineprint{
  list-style:none;
  margin:2.4rem 0 0;
  padding:1.3rem 0 0;
  border-top:1px solid var(--rule);
  font-size:.79rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:80ch;
}
.fineprint li{margin-bottom:.4rem}
.fineprint li:last-child{margin-bottom:0}

/* ---------- NEWSPAPER PHOTO INSETS ----------
   The photographs sit inside the menu columns and the price lines break around
   them. The wrap is real, not a gap left by a cleared block: every price row
   carries display:flow-root, so its border box establishes a block formatting
   context and the spec forbids it from overlapping a float's margin box. Each
   row shortens beside the photograph and runs full measure below it, which is
   also why the hairline under each row stops at the photograph's edge. */
.menu-shot{
  margin:0 0 1rem;
  border:1px solid var(--rule-strong);
  background:var(--paper-bright);
  padding:.45rem .45rem .15rem;
}
.menu-shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}
/* The overhead spread is the one photograph a 4:3 frame cannot hold without
   losing a plate off the top or the bottom, so it keeps its own shape. */
.menu-shot img[src$="food-spread.jpg"]{aspect-ratio:1024/819}
.menu-shot figcaption{
  font-family:var(--sans);
  font-size:.72rem;
  line-height:1.45;
  color:var(--ink-soft);
  margin-top:.5rem;
  padding:.4rem 0 .45rem;
  border-top:1px solid var(--rule);
}

/* ---------- VISIT ---------- */
.visit{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.8rem,4vw,3rem);
  align-items:start;
}
.hours-table{width:100%;border-collapse:collapse;margin:0 0 1.6rem}
.hours-table th,.hours-table td{
  text-align:left;
  padding:.7rem 0;
  border-bottom:1px solid var(--rule);
  font-weight:400;
}
.hours-table th{font-family:var(--sans);font-weight:500;font-size:.92rem}
.hours-table td{font-family:var(--serif);font-size:1.05rem;text-align:right}
.visit-dl{margin:0;font-size:.92rem}
.visit-dl dt{
  font-family:var(--sans);
  font-weight:500;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:1.1rem;
}
.visit-dl dt:first-of-type{margin-top:0}
.visit-dl dd{margin:.15rem 0 0;font-family:var(--serif);font-size:1.05rem}

/* Nothing third party loads until the visitor asks for it, so the page stays
   cookieless by default and needs no banner. */
.map-slot{min-width:0}
.map-load{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  padding:1.5rem;
  background:var(--paper);
  border:1px dashed var(--rule-strong);
  border-radius:2px;
  cursor:pointer;
  font-family:var(--sans);
  color:var(--ink);
  text-align:center;
  transition:background-color 160ms ease;
}
.map-load:hover{background:#efe9dc}
.map-load-hd{
  display:block;
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:.02em;
  margin-bottom:.5rem;
  text-decoration:underline;
  text-underline-offset:4px;
}
.map-load-sub{display:block;font-size:.8rem;line-height:1.55;color:var(--ink-soft);max-width:34ch;margin:0 auto}
.map-slot iframe{width:100%;aspect-ratio:4/3;border:1px solid var(--rule);display:block}
.map-alt{font-size:.82rem;margin:.8rem 0 0}

/* ---------- FOOTER ---------- */
.foot{
  background-color:var(--paper);
  background-image:var(--stock);
  background-size:var(--stock-size);
  padding:0 1.5rem clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--rule);
}
.foot .rule-double{max-width:none;margin:0 0 1.6rem}
.foot-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:baseline;
  justify-content:space-between;
}
.foot-name{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.25rem;
  margin:0;
}
.foot-slug{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.95rem;
  color:var(--ink-soft);
  margin-left:.4rem;
}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot-nav a{
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
}
.foot-nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.foot-fine{font-size:.82rem;color:var(--ink-soft);margin:1.4rem 0 0}

/* ---------- LEGAL PAGES ---------- */
.legal{padding:clamp(2.5rem,6vw,4.5rem) 1.5rem}
.legal .wrap{max-width:68ch}
.legal h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem,4.4vw,2.7rem);
  line-height:1.12;
  margin:0 0 .7rem;
}
.legal h2{font-size:clamp(1.2rem,2.6vw,1.5rem);margin:2.4rem 0 .7rem}
.legal p,.legal li{max-width:none;margin:0 0 1rem}
.legal ul{padding-left:1.2rem}
.legal li{margin-bottom:.5rem}
.legal .updated{font-size:.8rem;color:var(--ink-soft);letter-spacing:.04em}
.legal .back{
  display:inline-block;
  margin-top:2.5rem;
  font-family:var(--sans);
  font-size:.84rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- WIDER ---------- */
@media (min-width:720px){
  .visit{grid-template-columns:1fr 1fr}
}

/* The float only turns on once the column is wide enough that the text beside
   the photograph still holds a readable line. Below this the photograph runs
   full width and nothing wraps. */
@media (min-width:620px){
  .menu-shot{
    width:clamp(180px,38%,355px);
    margin-bottom:.9rem;
  }
  .shot-right{float:right;margin-left:1.4rem}
  .shot-left{float:left;margin-right:1.4rem}
}

@media (min-width:1000px){
  /* Two columns rather than three: a third column is too narrow to break text
     around a photograph, which is the whole point of the insets. The curries
     run the full measure underneath. */
  .menu-grid{grid-template-columns:1fr 1fr}
  .menu-col-wide{grid-column:1 / -1}
  .menu-col-wide .menu-hd{font-size:1.65rem}
  .menu-col-wide .menu-shot{width:clamp(240px,27%,360px)}
}

/* ---------- PHONES ---------- */
@media (max-width:600px){
  .hero-film{display:none}
  .hero-still{display:block}
  .hero-wash{
    background:linear-gradient(180deg,rgba(246,242,233,.46) 0%,rgba(246,242,233,.58) 45%,rgba(246,242,233,.74) 100%);
  }
  .hero-plate{
    width:calc(100% - 1.75rem);
    padding:1.35rem 1rem 1.25rem;
  }
  .hero-plate::before{inset:5px}
  .dateline{font-size:.6rem;letter-spacing:.12em;margin-bottom:.85rem}
  .rule-double{max-width:none;margin-bottom:1.1rem}
  .rule-double.below{margin:1.2rem auto 1rem}
  .lockup{width:min(230px,64vw)}
  .lede{font-size:1rem;max-width:30ch}
  .cta{flex-direction:column;align-items:stretch;margin:1.25rem 0 .9rem}
  .btn{width:100%}
  .hours{font-size:.76rem;letter-spacing:.01em;line-height:1.5}

  .price-list .dots{min-width:.75rem}
  .price-list .pr{
    flex:0 0 auto;
    font-size:.82rem;
    color:var(--ink-soft);
  }
  .cta-left{flex-direction:column;align-items:stretch}
  .foot-row{flex-direction:column;gap:1.1rem}
  .foot-slug{display:block;margin:.2rem 0 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}