/* ==========================================================================
   Café Miracle sample: "A day at Miracle"
   Palette: cream #F7F0E2 -> chalkboard #213631, saffron #E3A02B (actions), tile turquoise #1F7A78
   Type: Brygada 1918 (display) + Instrument Sans (body). Scale 1.25: 15 / 18 / 22 / 28-35 / 39-55
   Spacing scale: 8 16 24 32 48 64 96 128
   ========================================================================== */
:root{
  --cream:#F7F0E2; --ink-dark:#1D2523; --chalk:#213631; --chalk-deep:#1A2B27;
  --saffron:#E3A02B; --tile:#1F7A78; --tile-light:#47B5B0; --cream-soft:#D9D0BD;
  --bg:var(--cream); --ink:var(--ink-dark); --em:var(--tile); --tilec:var(--tile); --muted:#4B5552;
  --s:50%; /* dusk band: where the cream-to-chalkboard blend sits, driven by js/main.js */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --fs-small:.9375rem; --fs-body:1.125rem; --fs-h3:1.375rem; --fs-h2:1.75rem; --fs-h1:2.4375rem;
  --display:'Brygada 1918',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:var(--s3); --max:1200px;
}
@media (min-width:768px){ :root{ --fs-h2:2.1875rem; --fs-h1:3.4375rem; --gutter:var(--s5);} }

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-bottom:88px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.12;margin:0}
h1{font-size:var(--fs-h1);letter-spacing:-.01em}
h2{font-size:var(--fs-h2);letter-spacing:-.005em}
h3{font-size:var(--fs-h3)}
em{font-style:italic;color:var(--em)}
p{margin:0 0 var(--s2)}
a{color:inherit}
.small{font-size:var(--fs-small);color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-80px;z-index:100;background:var(--saffron);color:var(--ink-dark);padding:var(--s1) var(--s2);font-weight:600;border-radius:2px}
.skip:focus{top:var(--s2)}
.eyebrow{font:600 var(--fs-small)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0 0 var(--s2);color:var(--ink)}

/* ---------- focus: visible everywhere, colour-aware ---------- */
a:focus-visible,.btn:focus-visible{outline:3px solid var(--saffron);outline-offset:3px;border-radius:2px}
.visit a:focus-visible{outline-color:var(--chalk)}
.hero a:focus-visible,.foot a:focus-visible{outline-color:var(--saffron)}

/* ---------- Turkish tile: SVG masks so one pattern takes any colour ---------- */
.tile{position:absolute;inset:0;background-repeat:repeat;-webkit-mask-size:64px 64px;mask-size:64px 64px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.tile--line{background:var(--tilec);-webkit-mask-image:url(../images/tile-line.svg);mask-image:url(../images/tile-line.svg)}
.tile--dot{background:var(--saffron);-webkit-mask-image:url(../images/tile-dot.svg);mask-image:url(../images/tile-dot.svg)}

/* ---------- buttons: saffron only on the primary action ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s3);font:600 var(--fs-body)/1 var(--sans);text-decoration:none;border:2px solid transparent;border-radius:2px;cursor:pointer;transition:transform .15s ease,background-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--saffron);color:var(--ink-dark);border-color:var(--saffron)}
.btn--primary:hover{background:#F0B13F}
.btn--ghost{border-color:var(--cream);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--chalk)}
.btn--ghost-dark{border-color:var(--chalk);color:var(--chalk)}
.btn--ghost-dark:hover{background:var(--chalk);color:var(--cream)}
.btn--bar{background:var(--chalk);color:var(--cream);border-color:var(--cream)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0}
@media (max-width:520px){.cta-row .btn{flex:1 1 100%}}

/* ================= HERO ================= */
.hero{position:relative;color:var(--cream);background:var(--chalk);isolation:isolate}
.hero__img{width:100%;height:46svh;min-height:300px;object-fit:cover;object-position:50% 40%}
.hero__shade{position:absolute;left:0;right:0;top:0;height:46svh;min-height:300px;z-index:1;background:linear-gradient(180deg,rgba(33,54,49,.75),rgba(33,54,49,0) 45%);pointer-events:none}
.tilestrip{position:absolute;left:0;top:0;width:32px;height:46svh;min-height:300px;background:var(--cream);z-index:2;clip-path:inset(0 0 0 0)}
.tilestrip .tile{-webkit-mask-size:32px 32px;mask-size:32px 32px;background-position:0 0}
.tilestrip .tile--line{background:var(--tile)}
.topbar{position:absolute;z-index:3;top:0;left:32px;right:0;display:flex;align-items:center;justify-content:space-between;padding:var(--s2) var(--gutter)}
.wordmark{display:inline-flex;align-items:center;min-height:44px;font:500 var(--fs-h3)/1 var(--display);text-decoration:none;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.wordmark em{color:var(--cream)}
@media (min-width:900px){.wordmark em{color:var(--saffron)}}
@media (max-width:899px){.hero__copy .cta-row{display:none}}
.topbar__links{display:none;list-style:none;margin:0;padding:0;gap:var(--s4)}
.topbar__links a{font-weight:600;font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;display:inline-block;padding:12px 0;border-bottom:2px solid transparent}
.topbar__links a:hover{border-bottom-color:var(--saffron)}
.hero__copy{position:relative;z-index:2;padding:var(--s4) var(--gutter) var(--s5) calc(var(--gutter) + 32px)}
.hero__copy .eyebrow{color:var(--saffron);display:inline-block}
.hero h1 em{color:var(--saffron)}
.lead{font-size:var(--fs-body);max-width:30em;margin-top:var(--s3);color:var(--cream)}
.hero__copy .cta-row{margin-top:var(--s3)}

@media (min-width:900px){
  .hero{min-height:min(100svh,860px);display:flex;align-items:flex-end}
  .hero__img{position:absolute;inset:0;width:100%;height:100%;min-height:0;z-index:-2;object-position:60% 45%}
  .hero__shade{position:absolute;inset:0;height:auto;min-height:0;z-index:-1;background:linear-gradient(90deg,rgba(33,54,49,.96) 0%,rgba(33,54,49,.92) 50%,rgba(33,54,49,.4) 68%,rgba(33,54,49,0) 86%),linear-gradient(180deg,rgba(33,54,49,.78),rgba(33,54,49,0) 22%),linear-gradient(0deg,rgba(33,54,49,.55),rgba(33,54,49,0) 40%)}
  .tilestrip{width:64px;height:100%}
  .tilestrip .tile{-webkit-mask-size:64px 64px;mask-size:64px 64px}
  .topbar{left:64px}
  .topbar__links{display:flex}
  .hero__copy{max-width:calc(680px + 64px + var(--gutter));padding:var(--s7) var(--gutter) var(--s7) calc(var(--gutter) + 64px)}
  .lead{margin-bottom:0}
}
/* tile strip draws in once */
.js .tilestrip{animation:draw 1.8s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* ================= THE DAY ================= */
.day{max-width:var(--max);margin:0 auto;padding:var(--s5) var(--gutter) 0;position:relative}
.timeflag{position:sticky;top:var(--s2);z-index:20;display:inline-flex;align-items:center;gap:var(--s2);background:var(--chalk);color:var(--cream);border:2px solid var(--saffron);padding:var(--s1) var(--s3) var(--s1) var(--s2);border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.timeflag__clock .hand{transform-origin:20px 20px;transition:transform .9s cubic-bezier(.3,.8,.3,1)}
.timeflag__text{display:flex;flex-direction:column;line-height:1.2}
.timeflag__label{font:500 var(--fs-h3)/1.1 var(--display)}
.timeflag__note{font-size:var(--fs-small);color:var(--cream-soft)}
.day__track{margin-top:var(--s4)}

.slot{display:grid;gap:var(--s4);padding:var(--s6) 0;align-items:start}
.slot__text{max-width:34em}
.slot__text h2{margin-bottom:var(--s3)}
.marker{color:var(--em);margin-bottom:var(--s2)}
.slot__photo{margin:0}
.slot__photo img{width:100%;object-fit:cover;box-shadow:0 18px 40px -18px rgba(29,37,35,.45)}
.slot__photo--latte img,.slot__photo--borek img,.slot__photo--front img{aspect-ratio:3/4}
.inset{margin:var(--s3) 0 0}
.inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dusk{position:relative;isolation:isolate;height:clamp(360px,62vh,560px);display:flex;align-items:center}
/* full-bleed blend band: solid cream above, solid chalkboard below, no text inside */
.dusk{border-image:linear-gradient(180deg,var(--cream) 0%,var(--cream) calc(var(--s) - 18%),var(--chalk) calc(var(--s) + 18%),var(--chalk) 100%) fill 0 / 0 / 0 100vmax}
.dusk .tile--line{background:var(--tile-light)}
/* dark sections: own solid chalkboard background, full-bleed, fixed cream text */
.on-dark{background:var(--chalk);color:var(--cream);--ink:var(--cream);--em:var(--saffron);--muted:var(--cream-soft);--tilec:var(--tile-light);box-shadow:0 0 0 100vmax var(--chalk);clip-path:inset(0 -100vmax)}
.on-dark .eyebrow{color:var(--cream)}
.band{position:relative;width:calc(100% + 2*var(--gutter));margin-left:calc(-1*var(--gutter));height:64px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

@media (min-width:900px){
  .day{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:var(--s5);padding-top:var(--s7)}
  .timeflag{align-self:start;top:var(--s4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);padding:var(--s2) var(--s3) var(--s2) var(--s2);width:100%}
  .day__track{margin-top:0}
  .slot{grid-template-columns:repeat(12,1fr);column-gap:var(--s4);padding:var(--s7) 0}
  .slot--morning .slot__text{grid-column:1 / 8}
  .slot--morning .slot__photo{grid-column:8 / 13;margin-top:var(--s7)}
  .slot--lunch .slot__photo{grid-column:1 / 6;grid-row:1}
  .slot--lunch .slot__text{grid-column:7 / 13;grid-row:1;padding-top:var(--s6)}
  .slot--lunch .inset{margin-left:calc(-1 * (var(--s7) + var(--s5)));margin-top:var(--s5);width:calc(100% + var(--s7) + var(--s5) - var(--s3))}
  .slot--later .slot__text{grid-column:1 / 8;padding-top:var(--s5)}
  .slot--later .slot__photo{grid-column:8 / 13}
}

/* ================= THE BOARD ================= */
.board-wrap{padding:var(--s7) var(--gutter);max-width:var(--max);margin:0 auto}
.board{position:relative;background:var(--chalk-deep);color:var(--cream);padding:var(--s7) var(--s3) var(--s5);border:2px solid var(--cream-soft);outline:2px dashed rgba(247,240,226,.35);outline-offset:-14px;--em:var(--saffron);--muted:var(--cream-soft)}
.board em{color:var(--saffron)}
.board__frame{position:absolute;left:0;right:0;top:0;height:64px;overflow:hidden;--tilec:var(--tile-light)}
.board__frame .tile--line{background:var(--tile-light)}
.board h2{margin:0 0 var(--s4)}
.board h3{font-size:var(--fs-small);font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);margin-bottom:var(--s2)}
.board__cols{display:grid;gap:var(--s5)}
.chalk{list-style:none;margin:0;padding:0}
.chalk li{font:500 var(--fs-h3)/1.25 var(--display);padding:var(--s1) 0;border-bottom:1px dashed rgba(247,240,226,.28);display:flex;flex-direction:column}
.chalk li .note{font:400 var(--fs-small)/1.4 var(--sans);color:var(--cream-soft)}
@media (min-width:768px){ .board{padding:var(--s8) var(--s6) var(--s6)} .board__cols{grid-template-columns:1.1fr 1fr} }

/* ================= VOICES ================= */
.voices{max-width:var(--max);margin:0 auto;padding:var(--s6) var(--gutter) var(--s7)}
.voices h2{max-width:16em;margin-bottom:var(--s5)}
.quote{margin:0}
.quote p{font-family:var(--display);font-weight:500}
.quote footer{font-size:var(--fs-small);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-top:var(--s2);color:var(--muted)}
.quote footer::before{content:"— "}
.quote--big p{font-size:var(--fs-h2);line-height:1.3;max-width:26em}
.voices__pair{display:grid;gap:var(--s5);margin-top:var(--s6);align-items:start}
.voices__pair .quote p{font-size:var(--fs-h3);line-height:1.4}
.quote{border-left:4px solid var(--saffron);padding-left:var(--s3)}
@media (min-width:900px){
  .voices__pair{grid-template-columns:1fr 1fr;margin-left:calc(200px + var(--s5))}
  .voices__pair .quote:nth-child(2){margin-top:var(--s6)}
}

/* ================= VISIT ================= */
.visit{position:relative;background:var(--cream);color:var(--ink-dark);--em:var(--tile);--muted:#4B5552}
.visit em{color:var(--tile)}
.visit__band{position:relative;height:64px;overflow:hidden;--tilec:var(--tile)}
.visit__band .tile--line{background:var(--tile)}
.visit__inner{max-width:var(--max);margin:0 auto;padding:var(--s6) var(--gutter) var(--s7);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.visit .eyebrow{color:var(--ink-dark)}
.visit h2{max-width:14em;margin-bottom:var(--s3)}
address{font-style:normal;font-size:var(--fs-h3);line-height:1.4;font-family:var(--display)}
.social{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s4) 0 0}
.social a{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-weight:600;text-decoration:none;border-bottom:2px solid transparent}
.social a:hover{border-bottom-color:var(--saffron)}
.handle{font-weight:400;color:#4B5552;overflow-wrap:anywhere}
.visit__look h3{margin-bottom:var(--s2)}
@media (min-width:900px){ .visit__inner{grid-template-columns:1.3fr 1fr;align-items:start;padding-top:var(--s7)} }

/* ================= FOOTER + STICKY BAR ================= */
.foot{background:var(--chalk-deep);color:var(--cream);text-align:left;padding:var(--s5) max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter))) calc(var(--s5) + 72px)}
.foot p{margin:0}
.foot__main{font:500 var(--fs-h3)/1.3 var(--display)}
.foot__note{font-size:var(--fs-small);color:var(--cream-soft);margin-top:var(--s1)!important}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);padding:var(--s1) var(--s1) calc(var(--s1) + env(safe-area-inset-bottom));background:var(--chalk);border-top:2px solid var(--saffron)}
.stickybar .btn{min-height:48px;width:100%}
.stickybar a:focus-visible{outline-color:var(--cream)}
@media (min-width:900px){ .stickybar{display:none} .foot{padding-bottom:var(--s5)} }

/* ================= MOTION ================= */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.js .chalk li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .board.in .chalk li{opacity:1;transform:none}
.js .board.in .chalk li:nth-child(2){transition-delay:.08s}.js .board.in .chalk li:nth-child(3){transition-delay:.16s}
.js .board.in .chalk li:nth-child(4){transition-delay:.24s}.js .board.in .chalk li:nth-child(5){transition-delay:.32s}
.js .board.in .chalk li:nth-child(6){transition-delay:.4s}
.slot__photo img{transition:transform .6s ease}
.slot__photo:hover img{transform:scale(1.02)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .chalk li{opacity:1!important;transform:none!important}
  .js .tilestrip{clip-path:none}
  .slot__photo:hover img,.btn:hover{transform:none}
}

/* visit: what to look for */
.lookfor{font-family:var(--display);font-size:var(--fs-h3);line-height:1.4;max-width:18em}
.visit__pic{margin:var(--s3) 0 0;max-width:320px}
.visit__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 55%}