/* Beiturk — coming-soon landing page. Self-contained build.
   No dependency on the branding/ folder: deploy index.html + styles.css + assets/.

   Sections 1 and 2 are copied verbatim from the Beiturk design system
   (branding/tokens/*.css and branding/components/components.css). Do not edit them
   here — change them in branding/ and re-copy, so the system stays the source of truth.
   Section 3 is this page's own layer; every value in it resolves to a token above. */

/* =============================================================== 1. TYPEFACES */
/* NOTE: no original font binaries were supplied with the brand assets;
   these are the nearest Google Fonts matches to the logo lockup. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..600&family=Jost:ital,wght@0,300..600;1,300..500&family=Aref+Ruqaa:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ================================================================== 2. TOKENS */
/* --- branding/tokens/colors.css (verbatim) --- */
:root{
/* --- Brand base: Ottoman green (sampled from logo field #00534F) --- */
--green-950:#001F1D;--green-900:#002E2B;--green-800:#00403D;--green-700:#00534F;--green-600:#0A6660;--green-500:#1B7D75;--green-200:#B6D0CB;--green-100:#DCE8E5;--green-50:#F1F6F4;
/* --- Brand base: leaf gold (sampled from logo calligraphy gradient) --- */
--gold-800:#8A6222;--gold-700:#A87B36;--gold-600:#C79A4C;--gold-500:#CDA555;--gold-400:#E8BF72;--gold-300:#EED487;--gold-200:#F4E3AE;--gold-100:#FAF2DC;
/* --- Warm neutrals (paper & ink) --- */
--ink-900:#1A1714;--ink-800:#272320;--ink-700:#3D3833;--ink-500:#6B635A;--ink-400:#8C8277;--ink-300:#A79E92;--ink-200:#D8D1C6;--ink-100:#EDE7DC;--paper:#FAF6EF;--paper-2:#F3EDE2;--white:#FFFFFF;
/* --- Semantic status --- */
--status-success:#2E6B4F;--status-warning:#B4751E;--status-danger:#9B2C24;--status-info:#2E5E6B;
/* --- Gradients: the gold of the calligraphy, the depth of the field --- */
--gradient-gold:linear-gradient(103deg,#A87B36 0%,#EED487 28%,#C79A4C 52%,#F4E3AE 74%,#B4873F 100%); /* @kind color */
--gradient-field:linear-gradient(180deg,#00534F 0%,#002E2B 100%); /* @kind color */
--gradient-protect:linear-gradient(180deg,rgba(0,31,29,0) 0%,rgba(0,31,29,.55) 55%,rgba(0,31,29,.88) 100%); /* @kind color */

/* --- Semantic aliases: use these in product code --- */
--surface-page:var(--paper);
--surface-page-alt:var(--paper-2);
--surface-card:var(--white);
--surface-inverse:var(--green-700);
--surface-inverse-deep:var(--green-900);
--surface-sunken:var(--ink-100);
--surface-accent-soft:var(--gold-100);
--surface-accent-veil:var(--green-50);

--text-body:var(--ink-700);
--text-strong:var(--ink-900);
--text-muted:var(--ink-500);
--text-faint:var(--ink-400);
--text-on-inverse:var(--gold-100);
--text-on-inverse-muted:var(--green-200);
--text-accent:var(--gold-700);
--text-brand:var(--green-700);
--text-link:var(--green-700);
--text-link-hover:var(--gold-700);

--border-hairline:var(--ink-200);
--border-soft:var(--ink-100);
--border-strong:var(--ink-900);
--border-accent:var(--gold-500);
--border-on-inverse:rgba(238,212,135,.34);

--action-primary-bg:var(--green-700);
--action-primary-bg-hover:var(--green-800);
--action-primary-bg-active:var(--green-900);
--action-primary-fg:var(--gold-200);
--action-secondary-bg:transparent;
--action-secondary-fg:var(--green-700);
--action-gold-bg:var(--gold-500);
--action-gold-bg-hover:var(--gold-600);
--action-gold-fg:var(--green-900);
--action-disabled-bg:var(--ink-100);
--action-disabled-fg:var(--ink-300);
--focus-ring:var(--gold-600);
}

/* --- branding/tokens/typography.css (verbatim) --- */
:root{
--font-display:"Playfair Display","Hoefler Text",Georgia,serif;
--font-body:"Jost","Avenir Next",-apple-system,sans-serif;
--font-arabic:"Aref Ruqaa","Noto Naskh Arabic",serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

--text-display-1:72px;--text-display-2:56px;--text-display-3:40px;
--text-title-1:32px;--text-title-2:26px;--text-title-3:21px;
--text-body-lg:19px;--text-body:17px;--text-body-sm:15px;--text-caption:13px;--text-micro:11px;

--leading-tight:1.04;--leading-display:1.12;--leading-title:1.24;--leading-body:1.62;--leading-loose:1.8;

--tracking-display:-0.02em;--tracking-title:-0.01em;--tracking-body:0;--tracking-eyebrow:0.22em;--tracking-caps:0.12em;

--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

/* Semantic type roles */
--type-hero:var(--weight-regular) var(--text-display-1)/var(--leading-display) var(--font-display);
--type-section:var(--weight-regular) var(--text-display-3)/var(--leading-display) var(--font-display);
--type-dish:var(--weight-medium) var(--text-title-3)/var(--leading-title) var(--font-display);
--type-body:var(--weight-light) var(--text-body)/var(--leading-body) var(--font-body);
--type-eyebrow:var(--weight-medium) var(--text-micro)/1.2 var(--font-body);
--type-price:var(--weight-regular) var(--text-body)/1.2 var(--font-mono);
}

/* --- branding/tokens/spacing.css (verbatim) --- */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;--space-13:96px;--space-14:128px;--space-15:160px;

--gutter-page:32px;--gutter-page-lg:64px;
--measure-prose:62ch;--measure-narrow:44ch;
--container-wide:1360px;--container-content:1080px;--container-text:720px;

--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-pill:999px;
/* Ottoman arch motif: use on hero imagery and dish plates */
--radius-arch:48% 48% 6px 6px / 34% 34% 6px 6px;

--border-width-hair:1px;--border-width-thick:2px;--rule-gold:1px;
}

/* --- branding/tokens/elevation.css (verbatim) --- */
:root{
--shadow-none:none;
--shadow-hair:0 1px 0 0 rgba(26,23,20,.06);
--shadow-1:0 1px 2px rgba(0,46,43,.06),0 2px 8px -4px rgba(0,46,43,.10);
--shadow-2:0 2px 4px rgba(0,46,43,.05),0 12px 28px -12px rgba(0,46,43,.18);
--shadow-3:0 8px 20px -6px rgba(0,46,43,.14),0 32px 64px -24px rgba(0,46,43,.28);
--shadow-inset-hair:inset 0 0 0 1px var(--border-hairline);
--shadow-inset-gold:inset 0 0 0 1px rgba(205,165,85,.5);
--ring-focus:0 0 0 2px var(--paper),0 0 0 4px var(--focus-ring);
--veil-blur:saturate(140%) blur(14px); /* @kind other */
--overlay-scrim:rgba(0,31,29,.58); /* @kind color */
}

/* --- branding/tokens/motion.css (verbatim) --- */
:root{
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-out-soft:cubic-bezier(.16,.84,.28,1); /* @kind other */
--ease-in-out-serve:cubic-bezier(.45,.05,.2,1); /* @kind other */
--dur-instant:90ms; /* @kind other */--dur-quick:160ms; /* @kind other */--dur-base:240ms; /* @kind other */--dur-slow:420ms; /* @kind other */--dur-curtain:720ms; /* @kind other */
--transition-control:background-color var(--dur-quick) var(--ease-standard),color var(--dur-quick) var(--ease-standard),border-color var(--dur-quick) var(--ease-standard),box-shadow var(--dur-quick) var(--ease-standard); /* @kind other */
--transition-surface:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base) var(--ease-out-soft); /* @kind other */
--lift-hover:translateY(-2px); /* @kind other */--press-scale:scale(.985); /* @kind other */
}

/* ====================================== 3. DESIGN-SYSTEM COMPONENTS (subset) */
/* Only the classes this page renders against. */
.bt-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);font-family:var(--font-body);font-weight:var(--weight-medium);letter-spacing:var(--tracking-caps);text-transform:uppercase;border:var(--border-width-hair) solid transparent;border-radius:var(--radius-xs);cursor:pointer;text-decoration:none;transition:var(--transition-control),transform var(--dur-quick) var(--ease-standard)}
.bt-btn--lg{font-size:var(--text-body-sm);padding:18px var(--space-9)}
.bt-btn--gold{background:var(--action-gold-bg);color:var(--action-gold-fg)}
.bt-btn--gold:hover{background:var(--action-gold-bg-hover)}
.bt-btn--gold:active{transform:var(--press-scale)}
.bt-btn--onDark{background:transparent;color:var(--gold-300);border-color:var(--border-on-inverse)}
.bt-btn--onDark:hover{background:rgba(238,212,135,.1);border-color:var(--gold-300)}
.bt-btn:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.bt-rule{border:0;height:1px;background:var(--border-hairline)}
.bt-rule--gold{background:var(--gradient-gold)}
.bt-rule--motif{display:flex;align-items:center;gap:var(--space-4);color:var(--gold-600)}
.bt-rule--motif::before,.bt-rule--motif::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent)}
.bt-quote{font-family:var(--font-display);font-style:italic;font-weight:var(--weight-regular);font-size:var(--text-title-2);line-height:var(--leading-title);color:var(--text-strong);margin:0;max-width:var(--measure-narrow)}
.bt-quote__attr{display:block;margin-top:var(--space-6);font-family:var(--font-body);font-style:normal;font-size:var(--text-micro);font-weight:var(--weight-medium);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.bt-quote--onDark{color:var(--gold-100)}
@keyframes bt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
a{color:var(--text-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--text-link-hover)}

/* ============================================================= 4. PAGE LAYER */
/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--surface-inverse-deep);
  background-image:var(--gradient-field);
  color:var(--text-on-inverse);
  font:var(--type-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
::selection{background:var(--gold-300);color:var(--green-950)}

/* --------------------------------------------------------------- backdrop */
/* The green field stays as the base layer, so the page is correct even if the
   plate never loads. The plate sits on top of it, under the protection scrim. */
.bt-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bt-backdrop picture{display:block;width:100%;height:100%}
.bt-backdrop img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  display:block;
}
/* Mandatory under any text on photography: the flat green-black scrim,
   then the bottom-up protection gradient. Both are system values. */
.bt-backdrop__scrim{
  position:absolute;inset:0;
  background:var(--overlay-scrim);
}
.bt-backdrop__scrim::after{
  content:"";position:absolute;inset:0;
  background:var(--gradient-protect);
}

/* Everything else rides above the backdrop. */
.bt-page,.bt-foot,.bt-skip{position:relative;z-index:1}

/* ------------------------------------------------------------------ hero */
/* The plate is scoped to this section, so nothing scrolls at a second rate. */
.bt-hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
main{flex:1 0 auto}

/* Skip link — keyboard users land on content, not the logo. */
.bt-skip{
  position:absolute;left:var(--space-5);top:calc(var(--space-5) * -8);
  z-index:100;
  background:var(--action-gold-bg);color:var(--action-gold-fg);
  font-family:var(--font-body);font-size:var(--text-caption);
  font-weight:var(--weight-medium);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;text-decoration:none;
  padding:var(--space-4) var(--space-6);border-radius:var(--radius-xs);
  transition:top var(--dur-quick) var(--ease-standard);
}
.bt-skip:focus-visible{top:var(--space-5);outline:none;box-shadow:var(--ring-focus)}
.bt-skip:hover{color:var(--action-gold-fg)} /* outranks the global gold-700 a:hover */

/* --------------------------------------------------------------- layout */
.bt-page{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  width:100%;max-width:var(--container-content);
  margin:0 auto;
  padding:var(--space-12) var(--gutter-page) var(--space-11);
  gap:var(--space-7);
}
@media (min-width:1280px){
  .bt-page{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}

/* ---------------------------------------------------------------- crest */
.bt-crest{width:min(100%,300px);margin:0 auto}
.bt-crest img{display:block;width:100%}

/* --------------------------------------------------------------- motifs */
/* .bt-rule sets height:1px + a flat background; the motif variant is a flex row,
   so both are reset here and the gold fades come from the DS ::before/::after. */
.bt-rule--motif{
  width:min(100%,var(--measure-narrow));margin-inline:auto;
  height:auto;background:none;
}
.bt-rule--motif .bt-motif-glyph{flex:none;display:block}

/* ------------------------------------------------------------ type block */
.bt-place{
  font:var(--type-eyebrow);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--gold-400);
  margin:0;
}
.bt-headline{
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  /* clamps between the system's title-1 and display-1 steps — no new scale */
  font-size:clamp(var(--text-title-1),8.4vw,var(--text-display-1));
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--gold-100);
  margin:0 auto;
  max-width:var(--container-text);
  text-wrap:balance;
}
.bt-headline-ar{
  font-family:var(--font-arabic);
  font-size:var(--text-title-2);
  line-height:var(--leading-title);
  color:var(--gold-400);
  margin:0;
  direction:rtl;
}
.bt-lede{
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-body-lg);
  line-height:var(--leading-body);
  color:var(--text-on-inverse-muted);
  max-width:var(--measure-prose);
  margin:0 auto;
  text-wrap:pretty;
}

/* --------------------------------------------------------------- actions */
.bt-actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:var(--space-5);
  margin-top:var(--space-4);
}
@media (min-width:768px){
  .bt-actions .bt-btn{white-space:nowrap}
}
/* The global a:hover (gold-700) outranks the DS button colours, which left the
   gold button at 1.5:1 on hover. Buttons keep their own foreground. */
a.bt-btn--gold:hover{color:var(--action-gold-fg)}
a.bt-btn--onDark:hover{color:var(--gold-300)}
/* The phone number itself is data — mono, per the number rule. */
.bt-actions .bt-num{font-family:var(--font-mono);letter-spacing:0;text-transform:none}

/* ----------------------------------------------------------------- story */
.bt-story{
  padding:var(--space-14) var(--gutter-page) var(--space-13);
  background:var(--surface-inverse-deep);
  border-top:var(--border-width-hair) solid var(--border-on-inverse);
}
@media (min-width:1280px){
  .bt-story{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
/* The green-wall corridor in the brand arch, beside the story. Stacked
   (arch above, text centred) until there is room for two columns. */
.bt-story__inner{
  max-width:var(--container-content);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);
  justify-items:center;align-items:center;
  gap:var(--space-11);
}
.bt-story__arch{width:100%;max-width:440px}
.bt-story__text{
  max-width:var(--container-text);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:var(--space-7);
}
@media (min-width:1024px){
  .bt-story__inner{grid-template-columns:minmax(0,5fr) minmax(0,6fr);justify-items:stretch;gap:var(--space-12)}
  .bt-story__arch{max-width:none}
  .bt-story__text{align-items:flex-start;text-align:left}
  .bt-story .bt-rule--motif{margin-inline:0}
}
.bt-story__p{
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-body-lg);
  line-height:var(--leading-body);
  color:var(--text-on-inverse);
  max-width:var(--measure-prose);
  margin:0;
  text-wrap:pretty;
}
/* The closing line is the one pull-quote on the page. */
.bt-story__close{
  max-width:none;
  color:var(--gold-300);
  margin-top:var(--space-3);
}
.bt-story .bt-rule--motif{margin-top:var(--space-5)}

/* ------------------------------------------------------------------ film */
/* The house film, between the story and the table. A gold hairline frame on
   the deep field; only the poster loads until the play button is pressed. */
.bt-film{
  padding:var(--space-11) var(--gutter-page) 0;
  background:var(--surface-inverse-deep);
  text-align:center;
}
@media (min-width:1280px){
  .bt-film{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
.bt-film .bt-section-title{margin:0 auto;max-width:var(--container-text)}
.bt-film__frame{
  position:relative;
  max-width:var(--container-content);
  margin:var(--space-10) auto 0;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--green-950);
  border:var(--border-width-hair) solid var(--border-on-inverse);
  border-radius:var(--radius-xs);
  box-shadow:var(--shadow-3);
}
.bt-film__play,.bt-film__frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.bt-film__play picture{display:block;width:100%;height:100%}
.bt-film__play img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-quick) var(--ease-standard)}
.bt-film__btn{
  position:absolute;left:50%;top:50%;
  width:76px;height:76px;margin:-38px 0 0 -38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--action-gold-bg);color:var(--action-gold-fg);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--green-950) 45%, transparent), var(--shadow-3);
  transition:var(--transition-control),transform var(--dur-quick) var(--ease-standard);
}
.bt-film__btn svg{margin-left:3px} /* optical centre of the triangle */
.bt-film__play:hover .bt-film__btn{background:var(--action-gold-bg-hover);transform:scale(1.06)}
.bt-film__play:hover img{transform:scale(1.02)}
/* the frame clips, so the ring is drawn inside the poster's edge */
.bt-film__play:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-4px}
.bt-film__play:focus-visible .bt-film__btn{box-shadow:var(--ring-focus)}

/* ---------------------------------------------------------------- dishes */
/* One shared table seen from above. The real cut-out plates sit straight on
   the green field; CSS draws their shadow (overhead light, so it falls just
   below the rim). Desktop follows the hero board's dynamic symmetry: the
   three platters on the main diagonal, the two round plates on the other. */
.bt-dishes{
  padding:var(--space-11) var(--gutter-page) var(--space-13);
  background:var(--surface-inverse-deep);
  text-align:center;
}
@media (min-width:1280px){
  .bt-dishes{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
.bt-dishes .bt-section-title{margin:0 auto;max-width:var(--container-text)}
.bt-dishes__table{
  list-style:none;
  margin:var(--space-12) auto 0;padding:0;
  max-width:var(--container-wide);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:var(--space-12);
}
.bt-dish{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-2);
}
.bt-dish__plate{
  display:block;
  width:88%;height:auto;
  margin-bottom:var(--space-5);
  /* contact shadow at the rim + the soft fall-off under the plate, both green */
  filter:
    drop-shadow(0 2px 2px color-mix(in srgb, var(--green-950) 85%, transparent))
    drop-shadow(0 18px 26px color-mix(in srgb, var(--green-950) 70%, transparent));
}
.bt-dish--round .bt-dish__plate{width:68%}
.bt-dish__name{
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:var(--text-title-3);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
  color:var(--gold-100);
  margin:0;
  text-wrap:balance;
}
.bt-dish__ar{
  font-family:var(--font-arabic);
  font-size:var(--text-body-lg);
  line-height:var(--leading-body);
  color:var(--gold-400);
  margin:0;
}
.bt-dish__desc{
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-body-sm);
  line-height:var(--leading-body);
  color:var(--text-on-inverse-muted);
  max-width:32ch;
  margin:var(--space-2) 0 0;
  text-wrap:balance;
}
.bt-dishes__more{
  display:flex;justify-content:center;
  margin-top:var(--space-12);
}

/* Tablet: the mixed grill leads across both columns, the rest pair up. */
@media (min-width:640px){
  .bt-dishes__table{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-9)}
  .bt-dish--izgara{grid-column:1 / -1}
  .bt-dish--izgara .bt-dish__plate{width:62%}
  .bt-dish__plate{width:100%}
  .bt-dish--round .bt-dish__plate{width:76%}
}

/* Desktop: the table. Centrepiece spans both rows; corners stagger so the
   plates read as set down, not filed in a grid. */
@media (min-width:1024px){
  .bt-dishes__table{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--space-8);
    row-gap:var(--space-10);
    align-items:start;
  }
  .bt-dish--izgara{grid-column:5 / 9;grid-row:1 / 3;align-self:center}
  .bt-dish--izgara .bt-dish__plate{width:calc(100% + var(--space-8) * 2);max-width:none;margin-inline:calc(var(--space-8) * -1)}
  .bt-dish--urfa{grid-column:1 / 5;grid-row:1}
  .bt-dish--salad{grid-column:9 / 13;grid-row:1;margin-top:var(--space-12)}
  .bt-dish--baklava{grid-column:1 / 5;grid-row:2;margin-top:var(--space-6)}
  .bt-dish--kuzu{grid-column:9 / 13;grid-row:2;margin-top:var(--space-13)}
  .bt-dish--round .bt-dish__plate{width:74%}
}

/* ------------------------------------------------------------------ room */
/* The dining room: one wide cinematic plate under the heading. Text never
   sits on the photograph, so it needs no protection scrim. */
.bt-room{
  padding:var(--space-11) 0 var(--space-13);
  background:var(--surface-inverse-deep);
}
.bt-room__head{padding-left:var(--gutter-page);padding-right:var(--gutter-page)}
@media (min-width:1280px){
  .bt-room__head{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
.bt-room__head{
  max-width:var(--container-text);margin:0 auto;box-sizing:content-box;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  gap:var(--space-6);
}
/* Shared by the dishes and room sections. */
.bt-section-title{
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:clamp(var(--text-title-1),6vw,var(--text-display-2));
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--gold-100);
  margin:0;
  text-wrap:balance;
}
.bt-room__lede{
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-body-lg);
  line-height:var(--leading-body);
  color:var(--text-on-inverse-muted);
  max-width:var(--measure-prose);
  margin:0;
  text-wrap:pretty;
}

/* Wide plate: full bleed up to the photograph's own width, never upscaled past it. */
.bt-room__wide{
  container:room / inline-size;
  width:min(100%,1680px);
  margin:var(--space-12) auto 0;
}
.bt-room__wide-frame{
  position:relative;
  aspect-ratio:1678/937;
  overflow:hidden;
  background:var(--green-950);
}
.bt-room__wide-frame picture{display:block;width:100%;height:100%}
.bt-room__wide-frame img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
@media (min-width:1681px){
  .bt-room__wide-frame{border-radius:var(--radius-xs)}
}
@container room (max-width:1023px){
  .bt-room__wide-frame{aspect-ratio:4/3}
  .bt-room__wide-frame img{object-position:60% 50%}
}
@container room (max-width:559px){
  .bt-room__wide-frame{aspect-ratio:1/1}
  .bt-room__wide-frame img{object-position:62% 50%}
}
.bt-room__cap{
  margin-top:var(--space-5);
  padding:0 var(--gutter-page);
  font-family:var(--font-display);
  font-style:italic;
  font-size:var(--text-body-sm);
  color:var(--gold-400);
  text-align:center;
}

/* Ottoman arch frame (--radius-arch) for photographs. */
.bt-arch{
  position:relative;
  margin:0;
  aspect-ratio:4/5;
  border-radius:var(--radius-arch);
  overflow:hidden;
  background:var(--green-950);
}
.bt-arch picture{display:block;width:100%;height:100%}
.bt-arch img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
}
/* Gilded inner arch: the gold hairline traced just inside the opening. */
.bt-arch::after{
  content:"";position:absolute;inset:var(--space-4);
  border-radius:var(--radius-arch);
  box-shadow:var(--shadow-inset-gold);
  pointer-events:none;
}

/* The page's one scroll-linked moment: the wide plate opens like a curtain
   while the photograph settles from a slow push-in. The default is fully open,
   so browsers without scroll timelines lose nothing. */
@keyframes bt-curtain{from{clip-path:inset(0 12%)}to{clip-path:inset(0 0)}}
@keyframes bt-settle{from{transform:scale(1.1)}to{transform:scale(1)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Linear on purpose: the reader's scroll is the easing. */
    .bt-room__wide-frame{
      animation:bt-curtain linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 50%;
    }
    .bt-room__wide-frame img{
      animation:bt-settle linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}

/* ------------------------------------------------------------------ find */
/* Our own drawn map. The plate is a text-free SVG; names are HTML laid over
   it at the plate's own coordinates (--x/--y, percent of the 1800x1000 plate).
   Narrow screens crop the plate's sides (object-fit), and --x0/--xs re-map
   the labels onto the visible window so they stay pinned to their places. */
.bt-find{
  padding:var(--space-11) var(--gutter-page) var(--space-13);
  background:var(--surface-inverse-deep);
  text-align:center;
}
@media (min-width:1280px){
  .bt-find{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
.bt-find .bt-section-title{margin:0 auto;max-width:var(--container-text)}
.bt-find__addr{
  margin:var(--space-5) auto 0;
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:var(--text-body-lg);line-height:var(--leading-body);
  color:var(--text-on-inverse-muted);
  max-width:var(--measure-prose);
  text-wrap:balance;
}
.bt-find__map{container:find / inline-size}
.bt-map{
  --x0:0;--xs:100;
  position:relative;display:block;
  max-width:var(--container-content);
  margin:var(--space-10) auto 0;
  aspect-ratio:1800/1000;
  overflow:hidden;
  border:var(--border-width-hair) solid var(--border-on-inverse);
  border-radius:var(--radius-sm);
  background:var(--green-950);
  text-decoration:none;
  transition:var(--transition-control);
}
.bt-map:hover{border-color:var(--gold-300)}
.bt-map:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.bt-map__plate{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:45% 50%;
}
.bt-map__layer{position:absolute;inset:0;pointer-events:none}
.bt-map__layer > *{
  position:absolute;
  left:calc((var(--x) - var(--x0)) / var(--xs) * 100%);
  top:calc(var(--y) * 1%);
}

/* street names: small engraved caps on the road itself */
.bt-map__street{
  transform:translate(-50%,-50%);
  font-family:var(--font-body);font-weight:var(--weight-medium);
  font-size:var(--text-caption);line-height:1;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--gold-300);
  white-space:nowrap;
}
.bt-map__street--v{writing-mode:vertical-rl;transform:translate(-50%,-50%) rotate(180deg)}
.bt-map__street--khalifa{--x:52;--y:63}
.bt-map__street--shadin{--x:47;--y:38.8;color:var(--gold-400)}
.bt-map__street--husoun{--x:57.8;--y:20}
.bt-map__street--baladiyah{--x:68;--y:22}

/* places: a zero-size anchor at the exact spot, marks and names hang off it */
.bt-map__name{
  position:absolute;
  font-family:var(--font-body);font-weight:var(--weight-regular);
  font-size:var(--text-caption);line-height:var(--leading-title);
  color:var(--gold-100);
  white-space:nowrap;
}
.bt-map__ar{
  display:block;
  font-family:var(--font-arabic);
  font-size:var(--text-body-sm);line-height:var(--leading-title);
  color:var(--gold-400);
}
.bt-map__dot{
  position:absolute;left:-7px;top:-7px;
  width:14px;height:14px;border-radius:var(--radius-pill);
  background:var(--green-900);
  border:var(--border-width-thick) solid var(--gold-400);
}
.bt-map__spot--bakery{--x:31.8;--y:50}
.bt-map__spot--bakery .bt-map__name{right:-24px;bottom:16px;text-align:right}
.bt-map__spot--dawar{--x:68;--y:72}
.bt-map__spot--dawar .bt-map__name{left:0;top:0;transform:translateX(-50%);text-align:center}
.bt-map__spot--home{--x:38.9;--y:51.2}
.bt-map__pin{
  position:absolute;left:-16px;bottom:0;
  width:32px;height:42px;max-width:none; /* the global svg max-width:100% would collapse it on its zero-size anchor */
  filter:drop-shadow(0 4px 5px color-mix(in srgb, var(--green-950) 80%, transparent));
}
/* the brand lockup beside the pin, as on the crest: never recoloured or redrawn */
.bt-map__logo{
  position:absolute;left:20px;bottom:4px;
  width:88px;height:auto;max-width:none; /* zero-size anchor: lift the global img max-width */
  filter:drop-shadow(0 2px 3px color-mix(in srgb, var(--green-950) 85%, transparent));
}

.bt-find__route{
  margin:var(--space-8) auto 0;
  max-width:var(--measure-prose);
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:var(--text-body-lg);line-height:var(--leading-body);
  color:var(--text-on-inverse);
  text-wrap:pretty;
}
.bt-find__actions{margin-top:var(--space-8)}

/* The window onto the plate follows the section's own width (it may be a
   laptop column, a tablet or a phone): 4:3 when medium, square when narrow. */
@container find (max-width:1023px){
  .bt-map{aspect-ratio:4/3;--x0:11.67;--xs:74.07}
  .bt-map__street--shadin{display:none} /* would touch the Beiturk label in the narrower windows */
}
@container find (max-width:559px){
  .bt-map{aspect-ratio:1/1;--x0:20;--xs:55.56}
  .bt-map__street--khalifa{--x:47.5} /* clear of the roundabout ring */
  .bt-map__spot--bakery .bt-map__name{white-space:normal;width:7.5em}
  .bt-map__logo{width:72px}
}
/* Smallest phones: the bakery's name stacks three short lines, clear of the pin. */
@container find (max-width:315px){
  .bt-map__spot--bakery .bt-map__name{width:5.5em;right:-22px}
}
/* Phones: edge to edge, like the room plate: every pixel of width goes to the map. */
@media (max-width:639px){
  .bt-map{
    margin-inline:calc(var(--gutter-page) * -1);
    border-radius:0;border-left:0;border-right:0;
  }
  .bt-find__addr,.bt-find__route{font-size:var(--text-body)}
}

/* ------------------------------------------------------------- room + map */
/* From laptop width the room and the map share one band, side by side. A
   subgrid lines the two up row by row: the headings, then the photo and the
   map (same width, so the same window shape) with the directions under it. */
@media (min-width:1024px){
  .bt-duo{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    column-gap:var(--space-10);row-gap:var(--space-9);
    padding:var(--space-11) max(var(--gutter-page), (100% - var(--container-wide)) / 2) var(--space-13);
    background:var(--surface-inverse-deep);
  }
  .bt-duo > section{
    display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;
    padding:0;background:none;
  }
  .bt-duo .bt-room__head,.bt-duo .bt-find__head{padding:0;max-width:none;align-self:start}
  .bt-duo .bt-section-title{font-size:var(--text-display-3)}
  .bt-duo .bt-room__lede,.bt-duo .bt-find__addr{font-size:var(--text-body)}
  .bt-duo .bt-room__wide{width:100%;margin:0;align-self:start}
  .bt-duo .bt-room__wide-frame{
    border:var(--border-width-hair) solid var(--border-on-inverse);
    border-radius:var(--radius-sm);
  }
  .bt-duo .bt-find__body{align-self:start}
  .bt-duo .bt-map{margin:0;max-width:none}
  .bt-duo .bt-find__route{margin-top:var(--space-7);font-size:var(--text-body)}
  .bt-duo .bt-find__actions{margin-top:var(--space-6)}
}

/* ----------------------------------------------------------------- visit */
/* Three short questions before the footer: stacked on phones and tablets,
   side by side from laptop width. Same type as the dish names and lines. */
.bt-visit{
  padding:var(--space-11) var(--gutter-page) var(--space-13);
  background:var(--surface-inverse-deep);
  border-top:var(--border-width-hair) solid var(--border-on-inverse);
  text-align:center;
}
@media (min-width:1280px){
  .bt-visit{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
.bt-visit .bt-section-title{margin:0 auto;max-width:var(--container-text)}
.bt-visit__list{
  list-style:none;
  max-width:var(--container-content);
  margin:var(--space-10) auto 0;padding:0;
  display:grid;gap:var(--space-9);
}
@media (min-width:1024px){
  .bt-visit__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
}
.bt-visit__q{
  font-family:var(--font-display);
  font-weight:var(--weight-regular);
  font-size:var(--text-title-3);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
  color:var(--gold-100);
  margin:0;
  text-wrap:balance;
}
.bt-visit__a{
  font-family:var(--font-body);
  font-weight:var(--weight-light);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  color:var(--text-on-inverse-muted);
  max-width:36ch;
  margin:var(--space-4) auto 0;
  text-wrap:pretty;
}
/* the global a:hover is gold-700, which disappears on the deep field */
.bt-visit__a a{
  color:var(--gold-300);text-underline-offset:3px;border-radius:var(--radius-xs);
  /* 44px touch target around an inline link, without moving the line */
  display:inline-block;padding-block:10px;margin-block:-10px;
}
.bt-visit__a a:hover{color:var(--gold-200)}
.bt-visit__a a:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* ---------------------------------------------------------------- footer */
.bt-foot{
  flex:none;
  border-top:var(--border-width-hair) solid var(--border-on-inverse);
  width:100%;
}
.bt-foot__inner{
  max-width:var(--container-content);margin:0 auto;
  padding:var(--space-8) var(--gutter-page);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:var(--space-4) var(--space-8);
  text-align:center;
}
@media (min-width:1280px){
  .bt-foot__inner{padding-left:var(--gutter-page-lg);padding-right:var(--gutter-page-lg)}
}
.bt-foot__item{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-family:var(--font-body);font-weight:var(--weight-light);
  font-size:var(--text-body-sm);
  color:var(--text-on-inverse-muted);
  text-decoration:none;
  /* 44x44 minimum touch target without shifting the visual row */
  min-height:44px;min-width:44px;
  justify-content:center;
}
a.bt-foot__item:hover{color:var(--gold-300)}
a.bt-foot__item:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-xs)}
.bt-foot__item .bt-num{font-family:var(--font-mono)}
.bt-foot__glyph{flex:none;color:var(--gold-600)}

/* -------------------------------------------------------------- entrance */
/* 10px rise + fade, staggered. Nothing loops, nothing overshoots. */
.bt-enter{animation:bt-rise var(--dur-curtain) var(--ease-out-soft) both}
.bt-enter--1{animation-delay:0ms}
.bt-enter--2{animation-delay:90ms}
.bt-enter--3{animation-delay:180ms}
.bt-enter--4{animation-delay:270ms}
.bt-enter--5{animation-delay:360ms}
.bt-enter--6{animation-delay:450ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms !important;animation-delay:0ms !important;
    animation-iteration-count:1 !important;transition-duration:1ms !important;
  }
  .bt-skip{transition:none}
}

/* --------------------------------------------------------- small screens */
@media (max-width:767px){
  .bt-crest{width:min(100%,240px)}
  .bt-headline-ar{font-size:var(--text-title-3)}
  .bt-lede{font-size:var(--text-body)}

  /* Buttons go full width and stack; the label and the number are allowed
     to sit on separate lines rather than forcing the page wider. */
  .bt-actions{flex-direction:column;align-items:stretch;width:100%}
  .bt-actions .bt-btn{
    width:100%;
    flex-wrap:wrap;
    padding-left:var(--space-6);padding-right:var(--space-6);
  }

  .bt-foot__inner{flex-direction:column;gap:var(--space-2)}
  .bt-story{padding-top:var(--space-13);padding-bottom:var(--space-12)}
  .bt-story__p{font-size:var(--text-body)}
  .bt-story__close{font-size:var(--text-title-3)}
  /* Room: the plate goes square (container rule), framed on the coffee pour and the tower. */
  .bt-room{padding-bottom:var(--space-13)}
  .bt-room__lede{font-size:var(--text-body)}
  .bt-room__wide{margin-top:var(--space-10)}
  .bt-film__frame{margin-top:var(--space-9)}
  .bt-film__btn{width:64px;height:64px;margin:-32px 0 0 -32px}
}

/* ------------------------------------------------- short landscape screens */
/* A phone on its side is ~390px tall: at full size the crest alone filled the
   first screen. Smaller crest and tighter rhythm bring the headline and the
   call button up into view. */
@media (max-height:500px) and (orientation:landscape){
  .bt-page{padding-top:var(--space-8);padding-bottom:var(--space-9);gap:var(--space-4)}
  .bt-crest{width:min(100%,150px)}
  .bt-headline{font-size:var(--text-title-1)}
  .bt-headline-ar{font-size:var(--text-title-3)}
  .bt-lede{font-size:var(--text-body)}
  /* last in the file so it outranks the phone stack: on its side a phone has
     room for both hero buttons in one row */
  .bt-hero .bt-actions{margin-top:0;flex-direction:row;width:auto}
  .bt-hero .bt-actions .bt-btn{width:auto}

  /* No photo or map taller than the screen: each is capped at ~88% of its
     height, and the story sits beside its arch since the width allows it. */
  .bt-story__inner{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--space-9)}
  .bt-story__arch{width:min(100%, 88svh * 0.8);max-width:none}
  .bt-story__text{align-items:flex-start;text-align:left}
  .bt-story .bt-rule--motif{margin-inline:0}
  .bt-room__wide{max-width:calc(88svh * 4 / 3)}
  .bt-room__wide-frame{aspect-ratio:4/3} /* the capped width would otherwise tip it into the square window */
  /* always the 4:3 window here: a short, wide screen has room across, not down.
     Never under 460px wide, or the names crowd (it may then scroll a little). */
  .bt-map{aspect-ratio:4/3;--x0:11.67;--xs:74.07;max-width:max(88svh * 4 / 3, 460px);margin-inline:auto}
  .bt-dish__plate{max-height:85svh;object-fit:contain}
  .bt-film__frame{max-width:calc(88svh * 16 / 9)}
}