/* Vista Fresh Cut Barbershop
 *
 * Lifted from mockup v3_1 unchanged apart from four things, all marked ADDED
 * or CHANGED below:
 *   - @font-face now points at self-hosted files instead of base64 blobs
 *   - the three inline style="" attributes in the mockup became real rules
 *   - a print stylesheet
 *   - the hidden-until-JS status and today-row rules
 *
 * Design tokens live in :root. Six raw hex values below are deliberate and
 * documented at their use site; everything else references a token.
 */

/* ---------- fonts, self-hosted, Latin subset ---------- */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bebas-neue-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-500.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/dm-sans-700.woff2) format("woff2")}

:root{
  --ink:#14140E; --ink-2:#1D1D15; --ink-3:#2A2A20;
  --cream:#F7F3E4; --paper:#EFE9D6;
  --gold:#C6A15B; --gold-bright:#D2AE6A; --bronze:#6E5518;
  --muted:#605C4C; --muted-dark:#A9A492;
  --line:#DDD5BE; --line-dark:#38382C;
  --r:14px;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --sec:clamp(3.5rem,6.4vw,6rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.display{
  font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;
  letter-spacing:.012em;line-height:.92;margin:0;text-transform:uppercase;
}
h1{font-size:clamp(3.2rem,9.2vw,6.6rem)}
h2{font-size:clamp(2.5rem,6.2vw,4.6rem)}
h3{font-size:clamp(1.28rem,2.2vw,1.6rem);line-height:1.05}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:.8rem 1.2rem;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:4px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.72rem var(--pad);
  background:rgba(247,243,228,.93);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%;flex:none}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.32rem;letter-spacing:.05em;text-transform:uppercase}
.brand-name span{font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-top:.24rem}
.nav-links{display:flex;align-items:center;gap:1.15rem;min-width:0}
.nav-links>a{font-size:.87rem;text-decoration:none;color:var(--ink);opacity:.82;white-space:nowrap;padding:.32rem .18rem;display:inline-flex;align-items:center;min-height:26px}
.nav-links>a:hover{opacity:1;color:var(--bronze)}
.ig-link,.lang{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;background:none;border:0;cursor:pointer;font:inherit;font-size:.8rem;color:var(--ink);opacity:.82;padding:.32rem .32rem;min-width:28px;min-height:28px}
.ig-link:hover,.lang:hover{opacity:1;color:var(--bronze)}
.ig-link svg,.lang svg{width:19px;height:19px;flex:none}
/* CHANGED from the mockup: `:not(.lang)` added.
 * The language control was a <button> in the mockup, so this "hide the text
 * links" rule did not match it. It is an <a> now, because the toggle has to be
 * a real link to the other rendered page, and that made it start matching here
 * and disappear entirely below 1080px. On a site that exists in two languages
 * for a bilingual market, losing the language switch on phones is not a styling
 * detail. The label still collapses to the globe icon alone via `.lang span`. */
@media (max-width:1080px){.nav-links{gap:.9rem}.nav-links>a:not(.btn):not(.ig-link):not(.lang){display:none}.lang span{display:none}}
/* below 760 the sticky bottom bar already carries Call + Book, so the nav button is redundant */
@media (max-width:760px){.nav-links>.btn{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;
  border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease;
  white-space:nowrap;line-height:1;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--gold-bright);color:#14140E;border-color:var(--gold-bright)}
.btn-solid:hover{background:var(--gold)}
.btn-line{border-color:currentColor;color:inherit;background:none}
.dark .btn-line{color:var(--cream)}
.dark .btn-line:hover{background:var(--cream);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}

/* ---------- sections ---------- */
section{padding:var(--sec) var(--pad)}
.dark{background:var(--ink);color:var(--cream)}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.tint{background:var(--paper)}
.eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);font-weight:700;margin:0 0 1.1rem}
.dark .eyebrow{color:var(--gold)}
.note{
  display:inline-block;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:.44rem .95rem;
}
.dark .note{color:var(--muted-dark);border-color:var(--line-dark)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem;margin-bottom:3.2rem}
.rule{height:1px;background:var(--line);border:0;margin:0}
.dark .rule{background:var(--line-dark)}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4.5rem);
  align-items:center;padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem);
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-lede{font-size:clamp(1.02rem,1.55vw,1.18rem);color:var(--muted-dark);max-width:44ch;margin:1.6rem 0 2.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero-status{display:flex;align-items:center;gap:.55rem;margin:1.9rem 0 0;font-size:.9rem;color:var(--muted-dark)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted-dark);flex:none}
.dot.open{background:#79B36B;box-shadow:0 0 0 4px rgba(121,179,107,.18)}
.dot.closed{background:#B8654A;box-shadow:0 0 0 4px rgba(184,101,74,.18)}
.hero-figure{position:relative}
.hero-figure img{width:100%;border-radius:var(--r);aspect-ratio:4/3;object-fit:cover;object-position:50% 34%}
.tag{
  position:absolute;left:1.1rem;bottom:1.1rem;background:var(--gold-bright);color:#14140E;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.6rem 1.05rem;border-radius:999px;
}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-figure{order:-1}}

/* ---------- ticker ---------- */
.ticker{background:var(--gold);color:#14140E;overflow:hidden;padding:.72rem 0;border-block:1px solid #14140E}
.ticker-track{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;animation:slide 42s linear infinite}
.ticker-track span{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.06rem;letter-spacing:.13em;text-transform:uppercase}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- intro ---------- */
.intro{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4.5vw,4.5rem);align-items:center}
.intro img{width:100%;border-radius:var(--r);aspect-ratio:16/10;object-fit:cover}
.intro .lede{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(1.75rem,3.5vw,2.7rem);line-height:1;text-transform:uppercase;margin:.9rem 0 1.3rem}
.intro .body{color:var(--muted);max-width:52ch;margin:0}
.facts{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:2.2rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.fact b{display:block;font-family:"Bebas Neue",Impact,sans-serif;font-size:2.1rem;line-height:1;color:var(--bronze)}
.fact span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media (max-width:860px){.intro{grid-template-columns:1fr}}

/* ---------- services ---------- */
.services .sec-head,.service-list{max-width:1080px}
.service{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;padding:1.5rem 0;border-top:1px solid var(--line)}
.service:last-child{border-bottom:1px solid var(--line)}
.service-num{font-family:"Bebas Neue",Impact,sans-serif;font-size:.95rem;color:var(--bronze);letter-spacing:.1em}
.service h3{margin:0 0 .28rem}
.service p{margin:0;color:var(--muted);font-size:.94rem;max-width:56ch}
.price{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.9rem;white-space:nowrap}
.price sup{font-family:"DM Sans",sans-serif;font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-left:.22rem;vertical-align:super;font-weight:700}
@media (max-width:620px){.service{grid-template-columns:auto 1fr;gap:.9rem}.price{grid-column:2;margin-top:.4rem}}

/* ---------- barbers ---------- */
.barbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.1rem}
.barber{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.35rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start}
.barber .role{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);font-weight:700}
.barber h3{margin:.1rem 0}
.barber .num{color:var(--muted);font-size:.92rem;font-variant-numeric:tabular-nums}
.barber .btn{margin-top:.9rem;padding:.62rem 1.05rem;font-size:.68rem}
.split{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(1.6rem,4vw,4rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.rev-top{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-bottom:2.6rem}
.stars{display:flex;gap:.2rem}
.stars svg{width:22px;height:22px;fill:var(--gold)}
.rev-score{font-family:"Bebas Neue",Impact,sans-serif;font-size:2.5rem;line-height:1;color:var(--cream)}
.rev-count{font-size:.88rem;color:var(--muted-dark)}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.1rem}
.quote{border:1px solid var(--line-dark);border-radius:var(--r);padding:1.7rem 1.5rem;background:var(--ink-2);display:flex;flex-direction:column;gap:1rem}
.quote p{margin:0;font-size:1.02rem;line-height:1.55}
.quote footer{
  all:unset;display:block;margin-top:auto;
  font-family:"DM Sans",system-ui,sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.quote footer span{display:block;color:var(--muted-dark);letter-spacing:.1em;margin-top:.34rem;font-weight:400}

/* ---------- work grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.grid figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.grid img{width:100%;height:100%;object-fit:cover}
.grid .a{aspect-ratio:4/5}
.grid .b{aspect-ratio:4/5;align-self:end}
.grid .c{aspect-ratio:4/5}
.grid .b img{object-position:22% 50%}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid .b{grid-column:span 2;aspect-ratio:16/9}}
.ig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem;margin-top:1rem}
.ig-grid>div{aspect-ratio:1;border-radius:10px;background-size:cover;background-position:center;filter:saturate(.85);min-width:0}
.ig-ph{
  border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:.5rem;line-height:1.5;filter:none;overflow-wrap:anywhere;background:var(--paper);
}
.dark .ig-ph{border-color:var(--line-dark);color:var(--muted-dark);background:none}
.social .stack{justify-content:flex-start;margin-top:1.6rem}
@media (max-width:760px){.ig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- booking ---------- */
.book-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:start}
@media (max-width:900px){.book-grid{grid-template-columns:1fr}}
.book-lede{color:var(--muted-dark);max-width:50ch;margin:1.3rem 0 2rem;font-size:1.04rem}
.how{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;gap:1.05rem}
.how li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline}
.how b{font-family:"Bebas Neue",Impact,sans-serif;font-size:1.05rem;color:var(--gold);letter-spacing:.08em}
.how span{color:var(--muted-dark);font-size:.97rem}
.slot-box{border:1px dashed var(--line-dark);border-radius:var(--r);padding:1.7rem 1.5rem;background:var(--ink-2)}
.slot-box h3{font-size:1.15rem;margin:1rem 0 .5rem;color:var(--cream)}
.slot-box p{margin:0;color:var(--muted-dark);font-size:.93rem}
.plat{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.plat span{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--line-dark);border-radius:999px;padding:.42rem .85rem;color:var(--muted-dark)}
.stack{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}

/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:860px){.visit-grid{grid-template-columns:1fr}}
.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.5rem,2.6vw,2.2rem)}
.label{font-size:.65rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem;font-weight:700}
.hours{width:100%;border-collapse:collapse;font-size:.96rem}
.hours th{text-align:left;font-weight:400;color:var(--muted);padding:.58rem 0;border-bottom:1px solid var(--line)}
.hours td{text-align:right;padding:.58rem 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours tr.today th,.hours tr.today td{color:var(--ink);font-weight:700}
.addr{margin:0 0 1.3rem;font-size:1.06rem;line-height:1.5}
.addr a{color:var(--bronze);text-decoration-thickness:1px;text-underline-offset:3px}
.visit .card{display:flex;flex-direction:column}
.visit .card .stack{margin-top:auto;padding-top:1.6rem}

/* ---------- mobile bar + footer ---------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{
    display:flex;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:110;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(20,20,14,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line-dark);
  }
  .mbar .btn{flex:1;padding:.85rem .6rem;font-size:.7rem}
  .mbar .btn-line{color:var(--cream)}
  /* extend the footer rather than the body, so the spacer stays dark */
  body>footer{padding-bottom:calc(3.6rem + 4.8rem)}
}
body>footer{background:var(--ink);color:var(--muted-dark);padding:3.2rem var(--pad) 3.6rem;border-top:1px solid var(--line-dark)}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem;padding-bottom:2rem;border-bottom:1px solid var(--line-dark)}
.foot-logo{display:flex;align-items:center;gap:1rem}
.foot-logo img{width:66px;height:66px;border-radius:50%}
.foot-logo b{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:.05em;color:var(--cream);text-transform:uppercase;display:block}
.foot-logo span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.82rem;padding-top:1.7rem}
body>footer a{color:var(--gold);text-decoration:none}
body>footer a:hover{text-decoration:underline}

/* ---------- ADDED: rules that replace the mockup's inline style="" ---------- */
/* mockup had style="background:var(--ink-2)" on the work section */
.work{background:var(--ink-2)}
/* mockup had style="color:var(--muted);font-size:.96rem;margin:0" on this note */
.visit-note{color:var(--muted);font-size:.96rem;margin:0}
/* mockup had style="margin:0" on the footer stack and style="color:var(--cream)"
 * on the footer call button */
.foot-stack{margin:0}
.foot-call{color:var(--cream)}

/* ---------- ADDED: server-rendered hours + progressive status ---------- */
/* The table is rendered at build time. JS only adds .today, so the highlight
 * must not be the thing that makes the row readable. */
.hours tr.today th::after{content:" ·";color:var(--bronze)}

/* Upcoming dated closures, rendered server-side so they survive JS being off. */
.closures{margin:1.4rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:.55rem}
.closures .label{margin:0 0 .3rem}
.closures li{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;font-size:.9rem;color:var(--muted)}
.closures time{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}

/* ---------- ADDED: print ---------- */
/* A printed page is somebody taking the address and hours to the car. Keep the
 * name, the address, the phone and the hours. Drop everything else. */
@media print{
  .nav,.ticker,.mbar,.hero-figure,.hero-actions,.hero-status,.grid,.ig-grid,
  .social .stack,.quotes,.rev-top,.slot-box,.how,.stack,.facts,.intro img,
  .note,.skip,body>footer .foot-stack{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  section{padding:0 0 1.2rem;break-inside:avoid}
  .dark,.tint,.card,.barber{background:#fff!important;color:#000!important}
  .dark h1,.dark h2,.dark h3{color:#000!important}
  h1{font-size:22pt}
  h2{font-size:16pt}
  .hero{display:block}
  .visit-grid,.book-grid,.split{display:block}
  a[href^="tel:"]::after{content:""}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .hours th,.hours td{border-bottom:1px solid #ccc}
}

/* ---------- ADDED: Instagram placeholder tiles ----------
 * The mockup painted these with inline style="background-image:url(...)".
 * They are real <img> now, for three reasons: a style attribute is blocked by
 * the CSP, a background image cannot carry alt text, and an <img> can be
 * responsive. The tile keeps the square crop the grid expects.
 */
.ig-tile{overflow:hidden}
.ig-tile img,.ig-tile picture{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- CHANGED: target sizes, to meet the documented floor ----------
 * v3 rendered buttons at 42px and the two icon controls at 28x29, against a
 * spec of 48px and 44x44. These are the sizes people actually have to hit on a
 * phone, one-handed, often outside. Raised to the floor.
 *
 * min-height rather than more padding, so the type scale and the horizontal
 * padding stay exactly as the mockup drew them; only the box grows.
 */
.btn{min-height:48px}
/* The barber card button is the one deliberately smaller variant in the mockup.
 * It still has to clear the floor, so it keeps its smaller type and padding but
 * not its smaller height. */
.barber .btn{min-height:48px}
/* The nav's "Book a cut" needs the same specificity escape as the icon controls:
 * `.nav-links>a{min-height:26px}` is (0,1,1) and beats a bare `.btn` at (0,1,0),
 * so without this the one button most likely to be clicked on desktop stays 27px.
 * It is hidden below 760px, which is why a phone-width check does not catch it. */
.nav-links>a.btn{min-height:48px}
/* Scoped to `.nav-links > a` deliberately. The nav sets `.nav-links>a{min-height:26px}`,
 * which is (0,1,1); a bare `.ig-link` selector is (0,1,0) and loses, so the
 * width would grow to 44px while the height stayed at 29px. The language
 * control only started matching that nav rule when it became an <a>. */
.nav-links>a.ig-link,.nav-links>a.lang{min-width:44px;min-height:44px}

/* ---------- FIXED: footer clearance under the fixed mobile bar ----------
 * The mockup already intended this. Its rule sat inside the max-width:760px
 * block ABOVE the base `body>footer` declaration, at equal specificity, so the
 * base rule won on source order and the override never applied. The result was
 * the fixed bar sitting on top of the last line of the footer.
 *
 * Same declaration, moved below the base rule so it actually takes effect.
 */
@media (max-width:760px){
  body>footer{padding-bottom:calc(3.6rem + 4.8rem)}
}

/* ---------- ADDED: holding page ----------
 * Only used while site.yml `coming_soon` is true. Reuses the same tokens, the
 * same fonts and the same .hours / .btn / .label rules as the full site, so
 * there is no second design system to keep in step.
 */
.soon-body{background:var(--ink);color:var(--cream)}
.soon{
  max-width:660px;margin:0 auto;padding:clamp(2.5rem,7vw,4.5rem) var(--pad) clamp(3rem,8vw,5rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.soon-logo{width:clamp(96px,22vw,132px);height:auto;border-radius:50%;margin-bottom:1.8rem}
.soon .eyebrow{color:var(--gold);margin-bottom:.7rem}
.soon h1{font-size:clamp(2.6rem,8vw,4.2rem);color:var(--cream);line-height:.92}
.soon h1 span{
  display:block;margin-top:.6rem;font-family:"DM Sans",system-ui,sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.19em;color:var(--muted-dark);
}
.soon-status{display:inline-flex;align-items:center;gap:.55rem;margin:1.6rem 0 0;font-size:.95rem;color:var(--muted-dark)}
.soon-lede{margin:.9rem 0 0;font-size:clamp(1.02rem,1.6vw,1.15rem);color:var(--cream);max-width:38ch}
.soon-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.7rem}
.soon-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;margin-top:2.8rem;text-align:left}
@media (max-width:620px){.soon-grid{grid-template-columns:1fr}}
.soon-card{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r);padding:1.5rem 1.35rem}
.soon-card .label{color:var(--muted-dark)}
.soon-card .addr{color:var(--cream);font-size:1rem}
.soon-card .addr a{color:var(--gold)}
.soon-card .visit-note{color:var(--muted-dark);font-size:.9rem;margin:0}
/* the shared .hours rules assume a light card, so re-tint for the dark one */
.soon-card .hours th{color:var(--muted-dark);border-bottom-color:var(--line-dark)}
.soon-card .hours td{color:var(--cream);border-bottom-color:var(--line-dark)}
.soon-card .hours tr.today th,.soon-card .hours tr.today td{color:var(--gold-bright)}
.soon-card .hours tr.today th::after{color:var(--gold)}
.soon-card .closures{border-top-color:var(--line-dark);color:var(--muted-dark)}
.soon-card .closures time{color:var(--cream)}
.soon-note{margin:2.8rem 0 0;color:var(--muted-dark);font-size:.98rem;max-width:46ch;line-height:1.6}
.soon-follow{margin:2.4rem 0 0;color:var(--muted-dark);font-size:.92rem}
.soon-lang{margin:2.6rem 0 0;padding-top:1.8rem;border-top:1px solid var(--line-dark);width:100%}
.soon-lang .lang{color:var(--muted-dark);text-decoration:none;font-size:.82rem;letter-spacing:.06em}
.soon-lang .lang:hover{color:var(--cream)}