/* ============================================================
   Buraq House — DARK / VIBRANT concept (House lane only)
   Owner-directed 12 Sep 2026. Loads AFTER brand.css; overrides
   tokens + components for the House pages only. Does NOT edit the
   locked shared tokens.css/brand.css. Preview-only concept.
   ============================================================ */
:root{
  --page:#0E0B09;
  --copy:#ECE3D3;
  --ink:#0C0A07;
  --muted:#AE9E8C;
  --white:#17120F;
  --elevated:#17120F;
  --elevated-2:#201813;
  --cream-2:#130F0C;
  --cream-3:#1B1510;
  --line:rgb(245 234 216 / .13);
  --line-2:rgb(245 234 216 / .07);
  --heading:#F5EDDE;
  --divider:rgb(245 234 216 / .12);
  --shadow:0 26px 64px -30px rgb(0 0 0 / .78);
}
html{background:var(--page)}
body{background:transparent}
/* ambient glow on a fixed pseudo-element (no background-attachment:fixed — janks Android, ignored on iOS) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
    radial-gradient(120% 80% at 82% -12%, rgba(191,96,2,.12), transparent 58%),
    radial-gradient(95% 70% at -12% 18%, rgba(126,31,46,.14), transparent 55%)}
::selection{background:var(--gold);color:#1b1206}

/* header + nav */
header.site{background:rgba(14,11,9,.84);background:color-mix(in srgb,#0E0B09 84%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
html{scroll-padding-top:calc(65px + .75rem)}   /* anchors + skip link clear the sticky header */
nav.main a.lnk{color:var(--copy)}
nav.main a.lnk:hover{border-bottom-color:var(--gold)}
nav.main .tel{color:var(--gold)}

/* wordmark — brightened for dark ground */
.wordmark{color:#ECC49A}
.wordmark .sub{color:var(--gold)}
[data-brand="table"] .wordmark .sub,.sub.table{color:#B4CB63}
.descriptor{color:var(--muted)}
footer.site .brand .wordmark{color:var(--cream)}
footer.site .brand .wordmark .sub{color:var(--gold)}

/* kickers, labels, small caps → gold */
.kicker,.trust .k,.ccard .k,.zone-h,.cert-body .kicker,.dish .tag,.clients .ck{color:var(--gold-2)}   /* 11–13px labels: --gold-2 reaches 7:1 on dark */
.zone-h .dot{background:var(--gold)}
.zone-h .dot.soon{background:transparent;border-color:var(--muted)}

/* links + accents */
a.inline,.doc a:not(.btn){color:var(--gold)}
.voice cite{color:#F0D9A0}
.faq summary::after{color:var(--gold)}
.same.accent{color:#F0D9A0}
section.band strong{color:#F3D488}
.hero .support{color:var(--muted)}

/* vibrant buttons — the red end is #E0521F so #1c1206 text stays >= 4.5:1 at every stop */
:root{--cta-grad:linear-gradient(135deg,var(--gold) 0%,#E0521F 100%)}
.btn-solid{background:var(--cta-grad);color:#1c1206;border-color:transparent;box-shadow:0 12px 32px -12px rgba(224,82,31,.5)}
.btn-solid:hover{filter:brightness(1.08)}
.btn-line{color:var(--gold);border-color:var(--gold);background:transparent}
.btn-line:hover{background:var(--gold);color:#1c1206}

/* trust strip + cards */
.trust{background:var(--elevated);border-color:var(--line)}
@media (hover:hover){.portal:hover{box-shadow:0 34px 66px -26px rgba(0,0,0,.75),0 0 0 1px rgba(233,164,48,.5)}}
.portal h3{color:var(--heading)}
.craft li::before{background:var(--gold)}
.cert-ph{background:#0c0a07}
.cert-open{background:#0c0a07;color:var(--cream)}
.ccard:hover{border-color:var(--gold)}

/* the brand name band — richer, glowing */
section.band{background:
  radial-gradient(80% 120% at 15% 0%, rgba(233,164,48,.16), transparent 55%),
  linear-gradient(135deg,#5E1522 0%,#7E1F2E 55%,#4A1119 100%)}

/* section tint stays a touch lighter than page */
section.tint{background:var(--cream-2)}

/* footer */
footer.site{background:#0A0806}
footer.site .fcol h4,footer.site .fcol h3,footer.site .clients .ck{color:var(--gold-2)}
footer.site .fcol h3{font-family:var(--font-sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:.6rem;font-variation-settings:"wdth" 82;line-height:1.2}

/* ---- the food showcase (dishes) ---- */
.dishes .sec-head{margin-bottom:.4rem}
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.8rem}
@media (max-width:860px){.dish-grid{grid-template-columns:1fr}}
.dishcard{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#0c0a07;box-shadow:var(--shadow)}
.dishcard picture{display:block;aspect-ratio:7/5;overflow:hidden}
/* the image is taller than its frame so it can pan on scroll (inner parallax) and zoom on hover */
.dishcard img{width:100%;height:116%;margin-top:-8%;object-fit:cover;display:block;transition:scale .6s var(--ease)}
@media (hover:hover){.dishcard:hover img{scale:1.06}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes dishPan{from{translate:0 -4%}to{translate:0 4%}}
    .dishcard img{animation:dishPan linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
.dishcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.2rem 1.1rem;background:linear-gradient(to top,rgba(8,6,4,.97) 0,rgba(8,6,4,.92) 40%,rgba(8,6,4,.6) 72%,transparent)}
.dishcard h3{font-family:var(--font-display);font-weight:600;font-size:1.4rem;color:var(--heading);line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.dishcard p{color:#D9CDBA;font-size:.9rem;margin-top:.3rem;max-width:34ch;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.dishcard .pill{position:absolute;top:.8rem;left:.8rem;z-index:2;font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#1c1206;background:var(--cta-grad);padding:.34rem .62rem;border-radius:var(--radius-pill);font-variation-settings:"wdth" 82}

/* ---- 3D scroll reveal: three tiers, individual transform properties (compose with the tilt's `transform`) ---- */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
main>section,.doc{perspective:1200px}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform-origin:50% 100%;transition:opacity .6s var(--ease) var(--d,0ms),translate .6s var(--ease) var(--d,0ms),rotate .6s var(--ease) var(--d,0ms),scale .6s var(--ease) var(--d,0ms);will-change:opacity,translate}
  .reveal.t1{translate:0 28px;rotate:x 5deg;scale:.98;transition-duration:.8s}
  .reveal.t2{translate:0 18px;transition-duration:.6s}
  .reveal.t3{translate:0 12px;transition-duration:.5s}
  .reveal.in{opacity:1;translate:0 0;rotate:x 0deg;scale:1}
  .reveal.t1 img{transition:scale 1.2s var(--ease) var(--d,0ms)}
  .reveal.t1:not(.in) img{scale:1.06}
  /* hero load choreography + scroll-linked recede (transform/opacity only, LCP-safe) */
  @keyframes rise{from{opacity:0;translate:0 18px}}
  @keyframes settle{from{scale:1.06}}
  .hero .kicker,.hero .h1,.hero .lede,.hero .cta-row,.hero .support{animation:rise .6s var(--ease) both}
  .hero .h1{animation-delay:.08s}.hero .lede{animation-delay:.16s}.hero .cta-row{animation-delay:.24s}.hero .support{animation-delay:.32s}
  .hero .photo{animation:settle 1.4s var(--ease) .1s both;transform-origin:50% 40%}
  @supports (animation-timeline: scroll()){
    @keyframes heroOut{to{scale:.92;opacity:.35;translate:0 -6vh}}
    @keyframes heroTextOut{to{opacity:.15;translate:0 -4vh}}
    .hero .photo{animation:settle 1.4s var(--ease) .1s both,heroOut linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
    .hero .wrap>div:first-child{animation:heroTextOut linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  }
  /* touch devices get a zero-JS scroll driver instead of the pointer parallax */
  @supports (animation-timeline: view()){
    @media (hover:none){
      @keyframes heroPan{from{translate:0 -4%}to{translate:0 4%}}
      .hero3d .h3-plane{animation:heroPan linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    }
  }
}
@media print{.reveal,.reveal.in{opacity:1!important;translate:none!important;rotate:none!important;scale:none!important}.tilt3d,.tilt3d picture{transform:none!important}}
.tilt3d{transition:transform .16s ease-out,box-shadow .2s ease}
.tilt3d picture,.tilt3d .cert-ph{transition:transform .16s ease-out}

/* ---- secondary pages (privacy / terms / allergens / 404) ---- */
.doc h2{color:#F0D9A0}
.doc h3{color:var(--copy)}
.doc .updated{color:var(--muted)}
.callout{background:var(--elevated-2);border:1px solid var(--line)}
.callout.milk{border-left:4px solid var(--gold)}
table.ledger th{color:var(--gold-2);border-bottom-color:rgba(233,164,48,.5)}
table.ledger td.yes{color:#F0B84A}
table.ledger td{border-bottom-color:var(--line-2)}
table.ledger td:first-child,table.ledger th:first-child{background:var(--elevated);box-shadow:1px 0 0 var(--line)}
.tablewrap{background:var(--elevated);border-color:var(--line)}
.tablefade::after{background:linear-gradient(to right,rgba(23,18,15,0),var(--elevated) 85%)}
.btn-ghost{color:var(--copy);border-color:var(--line)}

/* ---- dark-theme leaks (audit 12 Sep): text that still inherited the light theme's ink/maroon ---- */
.voice p{color:var(--heading)}
.voice{border-left-color:var(--gold)}
.launch .date{color:#F0D9A0}
.cert-body h3{color:var(--heading)}
.welsh{color:#F0D9A0}
/* Mr Flash on dark */
.mf-fab{background:#17120F;color:#F0D9A0;border-color:rgba(233,164,48,.55);visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.mf-fab.show{visibility:visible;transition-delay:0s}   /* out of the tab order + AT while hidden */
.mf-panel{background:#14100D;border-color:var(--line)}
.mf-head{background:#17120F;border-color:var(--line)}
.mf-head .t{color:#F0D9A0}
.mf-head .x{color:var(--muted)}
.mf-bub.bot{background:#1F1813;border-color:var(--line);color:var(--copy)}
.mf-bub.me{background:#C0341A;color:#fff}
.mf-form{background:#17120F;border-color:var(--line)}
.mf-form input{background:#0E0B09;color:var(--copy);border-color:var(--line)}
.mf-form button{background:#C0341A;color:#fff}
.mf-disc{color:var(--muted)}
/* italic accent re-uses the Cormorant italic already on the page (drops the 100 KB Archivo-italic request) */
em{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.08em}

/* ---- mobile hardening (audit 12 Sep) ---- */
.mf-fab,.mf-panel,.toast{bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
.wrap,header.site .bar{padding-left:max(clamp(1.1rem,4vw,2.2rem),env(safe-area-inset-left,0px));padding-right:max(clamp(1.1rem,4vw,2.2rem),env(safe-area-inset-right,0px))}
footer.site{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom,0px))}
/* invisible hit-area expansion for small inline links (no line-height change) */
.trust .v a.inline,.faq p a.inline,#deliver p a.inline,footer.site .legal a,.doc p a{display:inline-block;padding:.65rem 0;margin:-.65rem 0}
.btn-sm{min-height:2.75rem}
.brand{min-height:44px}
/* motion pause control (WCAG 2.2.2) — sits on the hero, outside the role="img" scene */
.h3-pause{position:absolute;right:.7rem;bottom:.7rem;z-index:6;min-height:44px;padding:0 .9rem;border-radius:var(--radius-pill);border:1.5px solid rgba(233,164,48,.6);background:rgba(14,11,9,.72);color:#F0D9A0;font-size:.78rem;font-weight:700;letter-spacing:.04em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer}
.h3-pause:hover{background:rgba(14,11,9,.92)}
@media (prefers-reduced-motion:reduce){.h3-pause{display:none}}

/* ---- premium type scale + rhythm (House-only; brand.css untouched) ---- */
.h1{font-size:clamp(2.8rem,6.6vw,5.6rem);line-height:.96;letter-spacing:-.015em}
.h2{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02}
.h2.xl{font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.98;max-width:14ch}
.lede{font-size:clamp(1.1rem,1.7vw,1.32rem);max-width:48ch}
section{padding:clamp(3rem,8vw,6.5rem) 0}
.hero{padding-top:clamp(2.4rem,6vw,4.6rem)}

/* ---- de-card: space and hairlines instead of bordered panels ---- */
:root{--radius:6px;--radius-s:4px}
.craft,.std{gap:2.2rem 2rem;margin-top:2.6rem}
.craft li,.std li{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.1rem 0 0}
.craft li::before{display:none}
.ccard{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:1rem 0 0}
.ccard:hover{border-top-color:var(--gold)}
.zones.live li{background:transparent;border-left:2px solid var(--gold-2);border-radius:0}
.zones.soon li{border-radius:var(--radius-pill)}

/* ---- food chapters: full-bleed, edge-to-edge, scroll-driven parallax ---- */
.chapters{padding-bottom:0}
.chapters .sec-head{margin-bottom:2.2rem}
.chapter{position:relative;min-height:82svh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
@media (max-width:860px){.chapter{min-height:70svh}}
.ch-img{position:absolute;inset:0;z-index:0}
.ch-img picture{display:block;width:100%;height:100%}
.ch-img img{display:block;width:100%;height:118%;object-fit:cover;margin-top:-9%}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes chPan{from{translate:0 -5%}to{translate:0 5%}}
    .ch-img img{animation:chPan linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  }
}
.chapter::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,6,4,.94) 0,rgba(8,6,4,.48) 42%,rgba(8,6,4,0) 72%)}
.ch-copy{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(2rem,6vw,5rem) clamp(1.1rem,4vw,2.2rem)}
.ch-copy .kicker{color:var(--gold-2)}
.ch-copy h3{margin-top:.5rem;color:var(--heading);text-shadow:0 2px 12px rgba(0,0,0,.45)}
.ch-copy .lede{max-width:44ch;color:#E2D7C4;margin-top:.8rem;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.chapter.alt .ch-copy{text-align:right}
.chapter.alt .ch-copy .lede,.chapter.alt .ch-copy h3{margin-left:auto}

/* ---- sticky order bar (appears once the hero has gone, yields to the footer) ---- */
.orderbar{position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(110%);transition:transform .35s var(--ease);background:rgba(14,11,9,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom,0px))}
.orderbar.show{transform:none}
.orderbar .ob-in{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem);display:flex;align-items:center;gap:1rem}
.orderbar .ob-k .wordmark{font-size:1.05rem}
.orderbar .ob-p{color:var(--muted);font-size:.9rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orderbar .ob-p .price{color:var(--copy);font-size:1.05rem}
@media (max-width:720px){.orderbar .ob-p,.orderbar .ob-team{display:none}.orderbar .ob-in{justify-content:space-between}}
.orderbar.show ~ .mf-fab,.orderbar.show ~ .mf-panel{bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}

/* ---- hero as the first screen (cinematic stage), trust strip below the fold ---- */
.hero{min-height:calc(100svh - 65px);display:flex;align-items:center}
.hero>.wrap{width:100%}
.hero .grid-2{grid-template-columns:1fr 1.15fr}
@media (max-width:860px){.hero{min-height:auto;display:block}.hero .grid-2{grid-template-columns:1fr}}

/* ---- the seven mains: edge-to-edge scroll-snap rail, keyboard scrollable, no JS ---- */
.rail{padding-top:clamp(2.4rem,6vw,4.5rem)}
.mains{list-style:none;margin:1.6rem 0 0;padding:0 clamp(1.1rem,4vw,2.2rem);scroll-padding-inline:clamp(1.1rem,4vw,2.2rem);display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--gold-2) transparent;-webkit-overflow-scrolling:touch}
.mains:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.mains li{flex:0 0 min(78vw,300px);scroll-snap-align:start;border-top:1px solid var(--line);padding:1.1rem 0 1.4rem}
.mains .mn{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--gold-2)}
.mains h3{font-size:1.35rem;margin:.5rem 0 .3rem;color:var(--heading)}
.mains p{color:var(--muted);font-size:.92rem;max-width:30ch}
.rail-note{margin-top:1.4rem;color:var(--muted);font-size:.95rem;max-width:60ch}
.rail-note .price{color:var(--copy);font-size:1.1rem}

/* ---- closing call ---- */
.close{padding-bottom:clamp(4rem,10vw,8rem)}
.close .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
@media (max-width:600px){.close .cta-row{flex-direction:column}.close .cta-row .btn{width:100%}}