/* ============================================================================
   CHANDLER STREET COFFEE v3 : a neighbourhood cafe site, colour-committed.
   Rebrand: edit the colour pack tokens below, swap the two Google Fonts, done.
   Type system: Young Serif (display: headlines, brand, menu item names)
                Libre Franklin (everything else: body, nav, prices, buttons)
   Radius system: 0 everywhere.
   ========================================================================== */

/* ---------- colour packs : body[data-pack] one-line switch ---------- */
:root{
  --paper:#F3EADB;        /* warm cream, default "Caramel" pack: coffee, caramel, baked goods (Mike, 2026-09-14) */
  --paper2:#EADDC7;       /* toned panel */
  --ink:#2E1F12;          /* near-black, espresso cast */
  --body:#4C3A27;
  --quiet:#6B563E;        /* captions, AA on ground */
  --spot:#96551A;         /* accent: caramel, in a few deliberate places */
  --spot-on-ink:#E0A35C;  /* the accent as used on dark panels */
  --band-ink:#FBEFDC;     /* text on the accent band */
  --rule:rgba(46,31,18,.22);
  --rule-strong:#2E1F12;
  --panel:#271910;        /* dark panel: header, boards, footer */
  --panel-ink:#F2E7D6;
  --panel-dim:#B4A28C;
  --display:"Young Serif",Georgia,serif;
  --sans:"Libre Franklin",system-ui,sans-serif;
  --gap:clamp(18px,4.2vw,56px);
}
/* ponytail: pistachio reworked — warm off-white ground, single rust accent, panels unchanged */
body[data-pack="pistachio"]{--paper:#EFF0EA;--paper2:#E2E4DC;--ink:#1C2410;--body:#3A431E;--quiet:#4E5A26;
  --spot:#8C3A15;--spot-on-ink:#E59B62;--band-ink:#F5EBDD;--rule:rgba(28,36,16,.22);--rule-strong:#1C2410;
  --panel:#1E2712;--panel-ink:#EEF0DC;--panel-dim:#A9B189}
/* ponytail: forest reworked — desaturated dark ground, single amber accent unchanged */
body[data-pack="forest"]{--paper:#1C2220;--paper2:#232B28;--ink:#EDEBDB;--body:#C6C8B4;--quiet:#9AA189;
  --spot:#E2A65B;--spot-on-ink:#E2A65B;--band-ink:#2A1D07;--rule:rgba(237,235,219,.18);--rule-strong:#EDEBDB;
  --panel:#15211A;--panel-ink:#EDEBDB;--panel-dim:#97A08C}
body[data-pack="charcoal"]{--paper:#1B1614;--paper2:#251E1B;--ink:#F0E8DC;--body:#CCC2B4;--quiet:#9C9184;
  --spot:#E76F47;--spot-on-ink:#E76F47;--band-ink:#2B0F05;--rule:rgba(240,232,220,.18);--rule-strong:#F0E8DC;
  --panel:#120E0C;--panel-ink:#F0E8DC;--panel-dim:#A2968A}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--paper);color:var(--body);font-family:var(--sans);font-size:16px;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--spot);color:var(--band-ink)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:400;line-height:1.06;
  letter-spacing:-.005em}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gap);padding-right:var(--gap)}

/* soft grain, fixed and pointer-safe */
body::after{content:"";position:fixed;inset:0;z-index:96;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* buttons and links */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;
  font-size:15px;padding:15px 26px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  cursor:pointer;white-space:nowrap;transition:background .22s,border-color .22s,color .22s}
.btn:hover{background:var(--spot);border-color:var(--spot);color:var(--band-ink)}
.btn:active{transform:translateY(1px)}
.btn.onband{background:var(--band-ink);border-color:var(--band-ink);color:var(--spot)}
.btn.onband:hover{background:transparent;color:var(--band-ink)}
.btn svg{width:15px;height:15px;flex:none}
.tlink{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);
  border-bottom:2px solid var(--spot);padding-bottom:2px;transition:color .2s}
.tlink:hover{color:var(--spot)}

/* ---------- header ---------- */
.statuschip{display:inline-flex;align-items:center;gap:8px;font-weight:600;flex:none}
.statuschip .led{width:8px;height:8px;border-radius:50%;background:var(--panel-dim);flex:none}
.statuschip.on .led{background:#7FC98B}
.statuschip.off .led{background:var(--spot-on-ink)}

.mast{position:sticky;top:0;z-index:80;background:var(--panel);color:var(--panel-ink)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:68px}
.brand{font-family:var(--display);font-size:24px;color:var(--panel-ink);line-height:1;white-space:nowrap}
.brand i{font-style:normal;display:inline-block;width:.32em;height:.32em;background:var(--spot-on-ink);margin-left:.14em}
.mnav{display:flex;gap:clamp(16px,2.4vw,30px);font-family:var(--sans);font-weight:600;font-size:14.5px}
.mnav a{color:var(--panel-dim);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.mnav a:hover{color:var(--panel-ink)}
.mnav a[aria-current="page"]{color:var(--panel-ink);border-color:var(--spot-on-ink)}
.mast-right{display:flex;align-items:center;gap:18px}
.mast .statuschip{font-size:13px;color:var(--panel-ink)}
.mast .btn.mbtn{padding:11px 18px;font-size:14px;background:var(--spot-on-ink);border-color:var(--spot-on-ink);color:var(--panel)}
.mast .btn.mbtn:hover{background:transparent;color:var(--spot-on-ink)}
@media(max-width:1100px){.mnav{display:none}}
@media(max-width:680px){.mast .btn.mbtn{display:none}}
@media(max-width:480px){.brand{font-size:17px}.mast .js-status-text{display:none}}
.burger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:9px 2px}
.burger span{width:24px;height:2.5px;background:var(--panel-ink);transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:1100px){.burger{display:flex}}

/* nav overlay (mobile) */
.contents{position:fixed;inset:0;z-index:79;background:var(--panel);color:var(--panel-dim);
  padding:110px var(--gap) 40px;transform:translateY(-102%);
  transition:transform .4s cubic-bezier(.5,0,.2,1);overflow:auto}
.contents.open{transform:none}
.contents a.pg{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.contents a.pg b{font-family:var(--display);font-weight:400;font-size:29px;color:var(--panel-ink)}
.contents a.pg span{font-family:var(--sans);font-size:13px;color:var(--panel-dim);text-align:right}
.contents a.pg[aria-current="page"] b{color:var(--spot-on-ink)}
.contents .c-meta{font-family:var(--sans);font-size:14px;margin-top:28px;line-height:2}
.contents .c-meta a{color:var(--panel-ink);font-weight:600}

/* ---------- home : hero ---------- */
/* hero-wrap: hero + ticker fill 100svh below the sticky header */
.hero-wrap{display:flex;flex-direction:column;height:calc(100svh - 68px)}
.hero{position:relative;flex:1;min-height:0;display:flex;align-items:flex-end;background:var(--panel)}
.hero .hero-img{position:absolute;inset:0}
.hero .hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(185deg,rgba(12,9,3,.10) 30%,rgba(12,9,3,.68) 88%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:56px;padding-bottom:clamp(34px,5.5vh,64px)}
.hero h1{color:#FFF9EC;font-size:clamp(36px,4.7vw,60px);max-width:26ch}
.hero .h-sub{color:rgba(255,249,236,.94);font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;
  max-width:44ch;margin-top:16px}
.hero .h-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero .btn.hbtn{background:var(--spot-on-ink);border-color:var(--spot-on-ink);color:var(--panel)}
.hero .btn.hbtn:hover{background:#FFF9EC;border-color:#FFF9EC}
.hero .btn.ghost{background:transparent;border-color:#FFF9EC;color:#FFF9EC}
.hero .btn.ghost:hover{background:#FFF9EC;color:var(--panel)}

/* the oven strip : live marquee on the accent band */
.fold{background:var(--spot);color:var(--band-ink);overflow:hidden;white-space:nowrap;position:relative}
.fold .tick{display:inline-block;padding:14px 0;font-family:var(--sans);font-weight:600;font-size:14.5px;
  animation:tickscroll 36s linear infinite;will-change:transform}
.fold:hover .tick{animation-play-state:paused}
.fold .tick b{font-weight:800}
.fold .tick i{font-style:normal;opacity:.65;padding:0 18px}
@keyframes tickscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* home : the counter through the day (photo tiles) */
.tiles{padding:clamp(46px,6vw,88px) 0}
.tiles .t-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,40px)}
.tiles h2{font-size:clamp(29px,3.8vw,48px);max-width:18ch}
.t-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.6vw,34px);align-items:stretch}
.tile .ph{overflow:hidden;border:1px solid var(--rule-strong)}
.tile .ph img{transition:transform .7s cubic-bezier(.16,.6,.2,1)}
.tile:hover .ph img{transform:scale(1.035)}
.tile h3{font-size:clamp(20px,1.9vw,25px);margin-top:14px}
.tile p{font-size:15px;line-height:1.5;margin-top:5px;color:var(--body)}
.tile.big{display:flex;flex-direction:column;min-height:0}
.tile.big .ph{flex:1;min-height:0;position:relative}
.tile.big .ph img{position:absolute;inset:0}
/* right col defines the row height; the big image flexes to bottom-align with it */
.t-col{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,30px)}
.t-col .tile .ph{aspect-ratio:16/10}
@media(max-width:820px){.t-grid{grid-template-columns:1fr}.tile.big{display:block}.tile.big .ph{aspect-ratio:16/10}}

/* home : story tease */
.inside{padding:0 0 clamp(46px,6vw,88px)}
.in-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--rule-strong)}
.in-feature .ph{overflow:hidden;aspect-ratio:4/3;min-height:0}
.in-feature .ph img{transition:transform .7s cubic-bezier(.16,.6,.2,1)}
.in-feature:hover .ph img{transform:scale(1.035)}
.in-feature .tx{padding:clamp(22px,2.8vw,36px);display:flex;flex-direction:column;gap:14px;
  justify-content:center;background:var(--paper2)}
.in-feature .tx h3{font-size:clamp(23px,2.3vw,31px);max-width:16ch}
.in-feature .tx p{font-size:15.5px;line-height:1.55;max-width:42ch}
.in-feature .tx .tlink{align-self:flex-start}
@media(max-width:820px){.in-feature{grid-template-columns:1fr}.in-feature .ph{aspect-ratio:16/9;min-height:0}}

/* band : find us (accent) */
.band{background:var(--spot);color:var(--band-ink)}
.band .wrap{padding-top:clamp(44px,5.6vw,80px);padding-bottom:clamp(44px,5.6vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center}
.band h2{color:var(--band-ink);font-size:clamp(32px,4.4vw,56px)}
.band p{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;margin-top:14px;max-width:52ch}
.band p b{font-weight:700}
.band .b-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-end}
@media(max-width:820px){.band .wrap{grid-template-columns:1fr}.band .b-actions{align-items:flex-start}}

/* ---------- shared page head ---------- */
.pagehead{padding:clamp(38px,5vw,66px) 0 clamp(8px,1.4vw,18px)}
.pagehead h1{font-size:clamp(38px,5.4vw,70px)}
.pagehead .ph-note{margin-top:clamp(12px,1.8vw,20px)}
.pagehead .ph-note p{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;max-width:56ch}
.pagehead .ph-note p b{color:var(--ink);font-weight:600}

/* ---------- menu page ---------- */
.now{padding:clamp(30px,4vw,56px) 0 clamp(36px,5vw,68px)}
.now h2{font-size:clamp(27px,3.4vw,42px)}
.asof{font-weight:600;font-size:14px;color:var(--ink);margin-top:10px}
.asof b{color:var(--spot)}
body[data-pack="forest"] .asof b,body[data-pack="charcoal"] .asof b{color:var(--spot-on-ink)}
.daytabs{display:flex;gap:clamp(18px,3vw,36px);margin-top:clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--rule);flex-wrap:wrap}
.daytabs button{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--quiet);background:none;
  border:none;border-bottom:3px solid transparent;padding:6px 2px 12px;cursor:pointer;
  transition:color .2s;text-align:left;margin-bottom:-1px}
.daytabs button small{display:block;font-size:12px;font-weight:400;margin-top:2px}
.daytabs button:hover{color:var(--ink)}
.daytabs button.on{color:var(--ink);border-color:var(--ink)}
.daypanel{display:none;padding-top:clamp(24px,3.2vw,44px)}
.daypanel.on{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3.6vw,52px);align-items:start}
.daypanel .dp-fig .ph{aspect-ratio:13/10;overflow:hidden;border:1px solid var(--rule-strong)}
.dp-items{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px) clamp(20px,3vw,40px)}
.dp-items .ent .n{font-size:clamp(19px,1.8vw,23px)}
.dp-note{grid-column:1/-1;font-size:15px;color:var(--body);border-top:1px solid var(--rule);padding-top:14px}
.dp-note b{color:var(--ink);font-weight:700}
@media(max-width:820px){.daypanel.on{grid-template-columns:1fr}.daypanel .dp-fig{max-width:440px}}
@media(max-width:520px){.dp-items{grid-template-columns:1fr}}

/* menu entry: display-face name, price alongside, note below. no dot leaders */
.ent{break-inside:avoid}
.ent .n{font-family:var(--display);font-size:18px;color:var(--ink);line-height:1.2}
.ent .p{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--spot);margin-left:9px;white-space:nowrap}
body[data-pack="forest"] .ent .p,body[data-pack="charcoal"] .ent .p{color:var(--spot-on-ink)}
.ent .d{font-size:14.5px;line-height:1.5;color:var(--body);margin-top:3px;max-width:34ch}

/* the coffee board: dark panel */
.board{background:var(--panel);color:var(--panel-ink)}
.board .wrap{padding-top:clamp(40px,5.4vw,76px);padding-bottom:clamp(40px,5.4vw,76px)}
.board .bd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3.2vw,44px)}
.board h2{color:var(--panel-ink);font-size:clamp(30px,4vw,52px)}
.board .bd-head p{font-family:var(--sans);font-size:14.5px;color:var(--panel-dim);max-width:40ch}
.board .bd-items{columns:3;column-gap:clamp(28px,4vw,60px);column-rule:1px solid rgba(255,255,255,.14)}
.board .ent{margin-bottom:clamp(16px,2vw,24px)}
.board .ent .n{color:var(--panel-ink);font-size:clamp(18px,1.7vw,22px)}
.board .ent .p{color:var(--spot-on-ink)!important}
.board .ent .d{color:var(--panel-dim)}
@media(max-width:940px){.board .bd-items{columns:2}}
@media(max-width:560px){.board .bd-items{columns:1}}

/* food categories: two staggered text columns */
.food{padding:clamp(44px,6vw,84px) 0}
.food-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}
.mcat+.mcat{margin-top:clamp(36px,4.6vw,64px)}
.mcat h3{font-size:clamp(23px,2.4vw,31px);border-top:3px solid var(--rule-strong);padding-top:12px}
.mcat .cat-note{font-family:var(--sans);font-size:13.5px;color:var(--quiet);margin-top:4px}
.mcat .ents{margin-top:clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:16px}
@media(max-width:760px){.food-grid{grid-template-columns:1fr}.mcat+.mcat,.food-grid>div+div{margin-top:0}
  .food-grid{gap:36px}}

/* beans split */
.beans{border-top:1px solid var(--rule);padding:clamp(44px,6vw,84px) 0}
.beans .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.beans .ph{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule-strong)}
.beans h2{font-size:clamp(26px,3.2vw,40px);max-width:14ch}
.beans p{margin-top:16px;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.6;max-width:46ch}
.beans p b{color:var(--ink);font-weight:600}
.beans .price-line{font-weight:700;font-size:17px;color:var(--ink);margin-top:18px}
@media(max-width:760px){.beans .wrap{grid-template-columns:1fr}.beans .ph{max-width:460px}}

.smallprint{border-top:1px solid var(--rule);padding:clamp(24px,3vw,40px) 0}
.smallprint p{font-family:var(--sans);font-size:13.5px;color:var(--quiet);line-height:1.7}
.smallprint p b{color:var(--ink);font-weight:600}

/* ---------- about page ---------- */
.article{padding:clamp(28px,4vw,52px) 0 0}
.article .a-photo{margin:0 0 clamp(28px,4vw,52px)}
.article .a-photo .ph{aspect-ratio:16/9.5;overflow:hidden;border:1px solid var(--rule-strong)}
.article .a-cols{max-width:680px;margin-left:auto;margin-right:auto}
.article .a-cols p{font-size:clamp(16px,1.5vw,18px);line-height:1.7;margin-bottom:1.4em}
.article .a-cols p b{color:var(--ink);font-weight:600}
/* the story page keeps a feature-article register: drop cap + pull quote */
.article .a-cols:first-of-type p:first-child::first-letter{font-family:var(--display);
  font-size:3.3em;line-height:.8;color:var(--ink);float:left;padding:.06em .12em 0 0}
.pull{border-left:4px solid var(--spot);max-width:680px;
  margin:clamp(26px,3.6vw,44px) auto;padding:6px 0 6px clamp(18px,2.6vw,30px)}
body[data-pack="forest"] .pull,body[data-pack="charcoal"] .pull{border-color:var(--spot-on-ink)}
.pull p{font-family:var(--display);font-size:clamp(21px,2.4vw,29px);line-height:1.3;color:var(--ink)}
.pull p b{font-weight:400;color:var(--spot)}
body[data-pack="forest"] .pull p b,body[data-pack="charcoal"] .pull p b{color:var(--spot-on-ink)}

/* photo grid */
.essay{padding:clamp(44px,6vw,84px) 0}
.essay h2{font-size:clamp(28px,3.6vw,46px)}
.e-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(26px,3.4vw,44px)}
.e-item{cursor:zoom-in}
.e-item .ph{overflow:hidden;border:1px solid var(--rule-strong);aspect-ratio:11/13}
.e-item .ph img{transition:transform .7s cubic-bezier(.16,.6,.2,1)}
.e-item:hover .ph img{transform:scale(1.03)}
.e-1{grid-column:1/4}.e-2{grid-column:4/7;margin-top:clamp(28px,4vw,60px)}
.e-3{grid-column:7/10}.e-4{grid-column:10/13;margin-top:clamp(28px,4vw,60px)}
@media(max-width:820px){.e-1,.e-3{grid-column:1/7}.e-2,.e-4{grid-column:7/13}}
@media(max-width:520px){.e-1,.e-2,.e-3,.e-4{grid-column:1/13;margin-top:0}}

/* suppliers */
.makers{background:var(--paper2);padding:clamp(44px,6vw,84px) 0}
.makers h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:clamp(22px,3vw,38px)}
.mk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,44px) clamp(28px,4vw,64px)}
.mk h3{font-size:clamp(20px,1.9vw,25px)}
.mk h3 span{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--spot);display:block;margin-bottom:12px}
body[data-pack="forest"] .mk h3 span,body[data-pack="charcoal"] .mk h3 span{color:var(--spot-on-ink)}
.mk p{font-size:15px;line-height:1.6;margin-top:8px;max-width:40ch}
@media(max-width:640px){.mk-grid{grid-template-columns:1fr}}

/* about close */
.s-close{padding:clamp(44px,6vw,84px) 0}
.s-close .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.s-close .ph{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule-strong)}
.s-close h2{font-size:clamp(26px,3.2vw,40px);max-width:15ch}
.s-close p{margin-top:16px;font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.6;max-width:44ch}
.s-close .btn{margin-top:24px}
@media(max-width:760px){.s-close .wrap{grid-template-columns:1fr}}

/* ---------- what's on : one featured slot, then listing rows the owner extends ---------- */
.wf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border:1px solid var(--rule-strong);
  margin-top:clamp(28px,4vw,48px)}
.wf .wf-img{overflow:hidden;aspect-ratio:4/3;min-height:0}
.wf .wf-body{background:var(--panel);color:var(--panel-dim);padding:clamp(24px,3.2vw,48px);
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.wf .wf-tag{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--spot-on-ink)}
.wf h2{color:var(--panel-ink);font-size:clamp(25px,2.9vw,39px);max-width:16ch}
.wf .wf-copy{font-size:15.5px;line-height:1.6;max-width:46ch}
.wf .wf-copy b{color:var(--panel-ink);font-weight:600}
.wf .wf-meta{font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--spot-on-ink)}
.wf .wf-meta a{border-bottom:1.5px solid var(--spot-on-ink)}
@media(max-width:820px){.wf{grid-template-columns:1fr}.wf .wf-img{aspect-ratio:16/9}}
/* the listing: uniform rows, add or remove a row and the page still reads complete */
.wlist{margin-top:clamp(30px,4vw,52px)}
.wl-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:10px clamp(24px,4vw,64px);
  padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid var(--rule)}
.wl-row:first-of-type{border-top:3px solid var(--rule-strong)}
.wl-row h3{font-size:clamp(21px,2vw,27px)}
.wl-row p{font-size:15.5px;line-height:1.55;max-width:52ch}
.wl-row p b{color:var(--ink);font-weight:600}
.wl-meta{display:block;font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--spot);margin-top:12px}
body[data-pack="forest"] .wl-meta,body[data-pack="charcoal"] .wl-meta{color:var(--spot-on-ink)}
.wl-meta a{border-bottom:1.5px solid var(--spot)}
body[data-pack="forest"] .wl-meta a,body[data-pack="charcoal"] .wl-meta a{border-color:var(--spot-on-ink)}
@media(max-width:640px){.wl-row{grid-template-columns:1fr}}

/* newsletter */
.sunday{background:var(--paper2);margin-top:clamp(44px,6vw,84px)}
.sunday .wrap{padding-top:clamp(44px,5.6vw,80px);padding-bottom:clamp(44px,5.6vw,80px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center}
.sunday h2{font-size:clamp(26px,3.4vw,44px);max-width:14ch}
.sunday .sd-lede{margin-top:14px;font-size:16px;line-height:1.6;max-width:44ch}
.sunform label{display:block;font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:8px}
.sunform .fr{display:flex}
.sunform input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-right:none;padding:14px 15px}
.sunform input:focus{outline:none;border-color:var(--spot)}
body[data-pack="forest"] .sunform input:focus,body[data-pack="charcoal"] .sunform input:focus{border-color:var(--spot-on-ink)}
.sunform input::placeholder{color:var(--quiet)}
.sunform .fnote{font-family:var(--sans);font-size:12.5px;color:var(--quiet);margin-top:12px;line-height:1.7}
.sun-ok{display:none;border-left:3px solid var(--spot);padding-left:18px}
body[data-pack="forest"] .sun-ok,body[data-pack="charcoal"] .sun-ok{border-color:var(--spot-on-ink)}
.sun-ok.show{display:block}
.sun-ok b{font-family:var(--display);color:var(--ink);font-size:20px;font-weight:400;display:block;margin-bottom:6px}
.sun-ok span{font-size:15px}
@media(max-width:760px){.sunday .wrap{grid-template-columns:1fr}}

/* ---------- find us page ---------- */
.visithead{padding:clamp(38px,5vw,66px) 0 clamp(30px,4vw,52px)}
.visithead .vh-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:center}
.visithead h1{font-size:clamp(40px,5.6vw,76px)}
.visithead .vh-lede{margin-top:clamp(16px,2.2vw,26px);font-size:clamp(16px,1.5vw,19px);line-height:1.6;max-width:48ch}
.visithead .vh-lede b{color:var(--ink);font-weight:600}
.opencard{justify-self:center;background:var(--panel);color:var(--panel-dim);padding:clamp(24px,2.6vw,36px) clamp(28px,3vw,44px);min-width:min(100%,260px)}
.opencard b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);color:var(--spot-on-ink);line-height:1.15}
.opencard span{display:block;font-family:var(--sans);font-weight:600;font-size:14px;margin-top:8px;color:var(--panel-ink)}
@media(max-width:760px){.visithead .vh-grid{grid-template-columns:1fr}.opencard{justify-self:start}}

.v-main{border-top:1px solid var(--rule);padding:clamp(40px,5.4vw,76px) 0}
.v-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(26px,4vw,64px);align-items:start}
.v-fig .ph{aspect-ratio:13/15;overflow:hidden;border:1px solid var(--rule-strong)}
.hoursboard h2{font-size:clamp(25px,2.8vw,36px)}
.hb-now{font-weight:700;font-size:15px;color:var(--ink);margin-top:8px}
.hgroup{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:16px 0;
  border-bottom:1px solid var(--rule)}
.hgroup:first-of-type{margin-top:18px;border-top:3px solid var(--rule-strong)}
.hgroup .hd{font-family:var(--display);font-size:clamp(18px,1.7vw,22px);color:var(--ink)}
.hgroup .ht{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--body);white-space:nowrap}
.hgroup.today .hd::after{content:"today";font-family:var(--sans);font-weight:700;font-size:12px;
  color:var(--ink);margin-left:10px;border:1.5px solid var(--ink);padding:2px 7px;position:relative;top:-2px}
.particulars{margin-top:clamp(26px,3.4vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(20px,3vw,40px)}
.pt h3{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--quiet)}
.pt p{font-size:16px;color:var(--ink);font-weight:500;margin-top:5px;line-height:1.5}
.pt p a{border-bottom:1.5px solid var(--spot)}
body[data-pack="forest"] .pt p a,body[data-pack="charcoal"] .pt p a{border-color:var(--spot-on-ink)}
.pt p a:hover{opacity:.7}
.pt p small{display:block;font-family:var(--sans);font-weight:400;font-size:13px;color:var(--quiet);margin-top:2px}
.v-grid .btn{margin-top:clamp(24px,3vw,36px)}
@media(max-width:820px){.v-grid{grid-template-columns:1fr}.v-fig{max-width:440px}}
@media(max-width:520px){.particulars{grid-template-columns:1fr}}

/* long table band */
.longtable{background:var(--panel);color:var(--panel-dim)}
.longtable .wrap{padding-top:clamp(44px,5.6vw,80px);padding-bottom:clamp(44px,5.6vw,80px);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:center}
.longtable h2{color:var(--panel-ink);font-size:clamp(28px,3.8vw,48px);max-width:13ch}
.longtable p{font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.6;margin-top:14px;max-width:44ch}
.longtable p b{color:var(--panel-ink);font-weight:600}
.longtable .lt-cta{justify-self:start}
.longtable .btn{background:var(--spot-on-ink);border-color:var(--spot-on-ink);color:var(--panel)}
.longtable .btn:hover{background:transparent;color:var(--spot-on-ink)}
.longtable .lt-sub{font-family:var(--sans);font-size:13.5px;margin-top:14px;color:var(--panel-dim)}
@media(max-width:760px){.longtable .wrap{grid-template-columns:1fr}.longtable .lt-cta{justify-self:stretch}}

/* ---------- footer ---------- */
.foot{background:var(--panel);color:var(--panel-dim);padding:clamp(48px,6vw,84px) 0 28px}
.foot .fbrand{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);color:var(--panel-ink);line-height:1}
.foot .fbrand i{font-style:normal;display:inline-block;width:.32em;height:.32em;background:var(--spot-on-ink);margin-left:.14em}
.foot .fabout{font-size:15px;line-height:1.8;max-width:46ch;margin-top:18px}
.foot .fabout b{color:var(--panel-ink);font-weight:600}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(26px,4vw,56px);
  padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.16)}
.foot h4{font-family:var(--sans);font-weight:700;font-size:13px;color:var(--panel-ink);margin-bottom:16px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-family:var(--sans);font-size:15px}
.foot ul a:hover{color:var(--panel-ink)}
.foot .fvisit{font-family:var(--sans);font-size:15px;line-height:2}
.foot .fvisit b{color:var(--panel-ink);font-weight:600}
.foot .fvisit a{border-bottom:1px solid var(--spot-on-ink)}
.foot .fvisit a:hover{color:var(--panel-ink)}
.foot-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;
  font-family:var(--sans);font-size:12.5px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* ---------- colour pack switcher ---------- */
.packs{position:fixed;right:14px;bottom:14px;z-index:95;display:flex;align-items:center;gap:8px;
  background:var(--paper);border:2px solid var(--rule-strong);padding:9px 12px}
.packs b{font-family:var(--sans);font-weight:700;font-size:11px;color:var(--quiet);margin-right:2px}
.packs button{width:20px;height:20px;border:1px solid var(--rule-strong);cursor:pointer;padding:0;transition:transform .2s}
.packs button:hover{transform:scale(1.18)}
.packs button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.packs .k1{background:linear-gradient(135deg,#F3EADB 55%,#96551A 55%)}
.packs .k2{background:linear-gradient(135deg,#EFF0EA 55%,#8C3A15 55%)}
.packs .k3{background:linear-gradient(135deg,#1C2220 55%,#E2A65B 55%)}
.packs .k4{background:linear-gradient(135deg,#1B1614 55%,#E76F47 55%)}
@media(max-width:640px){.packs{display:none}}

/* ---------- lightbox ---------- */
#lightbox{position:fixed;inset:0;background:rgba(14,12,8,.93);z-index:120;display:grid;place-items:center;
  visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s;cursor:zoom-out;padding:4vw}
#lightbox.open{visibility:visible;opacity:1;transition:opacity .3s}
#lightbox img{max-width:88vw;max-height:84vh;width:auto;height:auto;object-fit:contain;border:1px solid #EDE9DC}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
html.static *,html.static *::before,html.static *::after{transition:none!important;animation:none!important}
html.static .reveal{opacity:1!important;transform:none!important}
html.static .fold .tick{animation:none!important}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .fold .tick{animation:none!important}
  .e-item .ph img,.in-feature .ph img,.tile .ph img{transition:none!important}}

/* header chip can never push the burger out */
.mast .wrap{min-width:0}
.mast .statuschip{max-width:44vw;overflow:hidden}
.mast .js-status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}