/* Casta's Rum Bar · Hispanic Heritage Month 2026 · Poured Through Time */

@font-face{
  font-family:'Bebas Kai';
  src:url('../fonts/BebasKai.woff2?v=96930e2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---- design tokens, sampled from Ian's artwork ---- */
:root{
  --teal:        #8fcabf;  /* aged teal paper, the page ground */
  --teal-deep:   #79c6bc;
  --kraft:       #ebd99f;  /* cream page-edge strips */
  --kraft-warm:  #deb87e;
  --cream:       #f5ecc2;
  --ink:         #2b2118;  /* body copy, warm near-black */
  --rum:         #c8552f;  /* accent, sampled from the title lockups */
  --sand:        #f4ae3b;  /* CTA fill */
  --frame-w:     min(100vw, 460px);
  --seq-ratio:   0.6486;   /* 768 / 1184 */
  --wall:        #8a6d4a;  /* kraft-warm darkened, outside the column on desktop */
}

*,*::before,*::after{ box-sizing:border-box; }

/* Native scroll only. No scroll-behavior on the root, ever. */
html{ -webkit-text-size-adjust:100%; background:var(--teal); }   /* overscroll colour on phones */
@media (min-width:768px){ html{ background:var(--wall); } }

body{
  margin:0;
  background:transparent;          /* never paint the body: an in-flow body background sits above the fixed .ground layer */
  color:var(--ink);
  font-family:'Bebas Kai','Bebas Neue','Oswald',sans-serif;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.02em;
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  /* no overflow rule here or on .frame/.stage/.stage-content: position:sticky dies under any non-visible overflow ancestor */
}

/* ---- page ground: fixed layer, built in CSS, never a tiled frame ---- */
.ground{
  position:fixed; inset:0; z-index:-1;
  background:var(--wall);
}
.ground::before{ /* soft inner vignette on the wall (only visible on desktop, outside the column) */
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.42) 100%);
}
.ground__paper{
  position:absolute; top:0; bottom:0; left:50%;
  width:var(--frame-w);
  transform:translateX(-50%);
  background-color:var(--teal);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .06 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, var(--kraft) 0 1.8%, transparent 1.8% 98.2%, var(--kraft) 98.2% 100%),
    linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
  background-repeat:repeat, no-repeat, no-repeat;
  background-size:180px 180px, 100% 100%, 100% 100%;
}
@media (min-width:768px){
  .ground__paper{ box-shadow:0 0 80px rgba(0,0,0,.35); }
}

/* ---- the frame: everything lives in one centered column ---- */
.frame{
  width:var(--frame-w);
  margin:0 auto;
  position:relative;
}

/* ---- the stage: one sticky canvas under the whole page ---- */
.stage{ position:relative; }
.stage-sticky{
  position:sticky; top:0;          /* sticky, not fixed: fixed layers stall during iOS momentum scroll */
  height:100vh;                    /* large viewport, so no ground strip appears when the iOS toolbar collapses */
  z-index:0;
  overflow:hidden;
  will-change:transform;           /* keep it on its own layer for the whole scroll */
  transform:translateZ(0);
}
.stage-sticky canvas{
  display:block;
  width:100%; height:100%;         /* transparent outside the drawn image: the CSS ground shows through */
}
.stage-content{
  margin-top:-100vh;               /* content starts at the same scroll position as the pinned canvas */
  position:relative;
  z-index:1;
}
.spacer{
  --h:100;                         /* vh, set from LAYOUT.ranges by main.js */
  height:calc(var(--h) * 1vh);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .spacer{ height:100vh; }         /* no scrub: each range is one screen of its held frame */
}

/* ---- loader: gates on the intro frames only ---- */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--kraft);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition:opacity .4s ease;
}
.loader.is-done{ opacity:0; pointer-events:none; }
.loader__mark{ width:min(52vw, 240px); height:auto; }
.loader__rule{ width:min(46vw, 210px); height:1px; background:rgba(43,33,24,.22); overflow:hidden; }
.loader__bar{
  height:100%; background:var(--ink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .15s linear;
}
.loader__text{ margin:0; font-size:13px; letter-spacing:.16em; color:var(--ink); }

/* ---- type scale ---- */
.t-name { font-size:34px; line-height:1.05; }
.t-ing  { font-size:17px; line-height:1.3; }
.t-price{ font-size:20px; line-height:1.2; }
.t-chip { font-size:13px; color:var(--rum); }
.t-body { font-size:15px; line-height:1.5; max-width:34ch; margin:0 auto; text-align:center; }
.chip{
  display:inline-block;
  color:var(--rum);
  font-size:13px;
  letter-spacing:.06em;
  border-top:1px solid var(--kraft-warm);
  padding-top:6px;
}

/* ---- week sections: ordinary flow under a sticky head; a sticky paper lid hides what passes under it ---- */
:root{
  --title-w:78%;                   /* week title lockup width, % of the column */
  --head-top:12px;                 /* sticky offset of the week head */
  --head-h:0px;                    /* fallback; each .week carries its own --head-h, measured by main.js */
  --lid-feather:40px;              /* LAYOUT.lid.featherPx via main.js */
  --gap-top:0;                     /* vh, LAYOUT.week.gapTopVh: lid edge -> blurb */
  --gap-item:10;                   /* vh, LAYOUT.week.gapItemVh: blurb -> drink, drink -> drink */
  --gap-bottom:21;                 /* vh, LAYOUT.week.gapBottomVh: after the last drink */
  --pad-x:18px;                    /* LAYOUT.week.padX: side inset of the week rows */
}
/* --lid-h is declared on .week so it resolves against that week's own --head-h */
.week{ position:relative; scroll-margin-top:0; --lid-h:calc(var(--head-h) + var(--head-top) + var(--lid-feather)); }
/* the lid: the same paper pixels as the big canvas, copied once per paper paint, soft at the bottom */
.week__lid{
  position:sticky; top:0; z-index:2;
  height:var(--lid-h);
  pointer-events:none;
  will-change:transform;
  -webkit-mask-image:linear-gradient(#000 calc(100% - var(--lid-feather)), transparent);
          mask-image:linear-gradient(#000 calc(100% - var(--lid-feather)), transparent);
}
.week__lid canvas{ display:block; width:100%; height:100%; }
/* the head sits over the lid's flow box (negative margin), so the lid adds no height to the week */
.week__head{
  position:sticky; top:var(--head-top); z-index:3;
  height:var(--head-h);
  margin-top:calc(-1 * var(--lid-h));
  will-change:transform;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-bottom:6px;
}
.week__title{ display:block; width:var(--title-w); height:auto; }
/* the body starts below the lid's feather and simply scrolls */
.week__body{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:calc(var(--gap-item) * 1vh);
  padding:calc(var(--head-top) + var(--lid-feather) + var(--gap-top) * 1vh) var(--pad-x) calc(var(--gap-bottom) * 1vh);
}
.blurb{ margin:0; padding:0 16px; font-size:15px; line-height:1.5; text-align:center; max-width:calc(34ch + 32px); }
/* a drink is one row: cropped art beside one text block, centred on the art, flush toward it */
:root{ --art-w:44%; --row-gap:4%; }
.cocktail{ display:flex; align-items:center; gap:var(--row-gap); width:100%; margin:0; }
.cocktail__art{ flex:0 0 var(--art-w); width:var(--art-w); height:auto; display:block; }
.cocktail__copy{ flex:1 1 auto; min-width:0; margin:0; }
.cocktail[data-side="left"]{  flex-direction:row-reverse; text-align:right; }   /* text on the left of the art */
.cocktail[data-side="right"]{ flex-direction:row;         text-align:left;  }   /* text on the right of the art */
.cocktail__name{ margin:0 0 6px; font-size:clamp(24px, 7vw, 30px); line-height:.92; font-weight:400; }
.cocktail__ing{ margin:0 0 6px; font-size:14px; line-height:1.3; }
.cocktail__price{ margin:0 0 10px; font-size:17px; line-height:1.2; color:var(--rum); }
.cocktail__blurb{ margin:0; font-size:13px; line-height:1.45; }
/* availability note (Part 11 §4): the old date chip's voice, last line of the block, aligned with it */
.cocktail__avail{ margin:10px 0 0; font-size:13px; letter-spacing:.06em; line-height:1.2; color:var(--rum); }

/* ---- week rail: four numerals pinned bottom-centre, driven by the loop ---- */
:root{ --rail-fade:200ms; }        /* LAYOUT.rail.fadeMs via main.js */
.rail{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:20;
  display:flex; gap:2px; padding:6px;
  border-radius:999px;
  background:var(--kraft);         /* opaque: content passes behind it, no backdrop-filter */
  opacity:0; pointer-events:none;
  transition:opacity var(--rail-fade) ease;
}
.rail.is-on{ opacity:1; pointer-events:auto; }
.rail button{
  width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--ink);
  font:inherit; font-size:15px; letter-spacing:.02em; line-height:1;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.rail button.is-active{ background:var(--rum); color:var(--cream); }
.rail button:focus-visible{ outline:2px solid var(--rum); outline-offset:2px; }

/* ---- language toggle: EN | ES, one pill pinned bottom-right of the column beside the rail, above head, lid and rail.
   Not top-right: a stuck lockup is 78% of the column at the same 12px top, so the pill would cover its last letter. ---- */
.lang{
  position:fixed; bottom:calc(22px + env(safe-area-inset-bottom));   /* the rail's centre line: its 48px pill and this 36px one share it */
  right:max(12px, calc(50% - var(--frame-w) / 2 + 12px));   /* 12px inside the column's right edge, on any viewport */
  z-index:30;
  display:flex; align-items:center; height:36px; padding:0 4px;
  border-radius:999px;
  background:var(--kraft);         /* opaque, the rail's pill */
  transition:opacity var(--rail-fade) ease;
}
.is-loading .lang{ opacity:0; pointer-events:none; }   /* hidden while the loader is up; shown on lift, then always */
.lang button{
  width:36px; height:36px; padding:0; border:0; background:transparent;
  font:inherit; font-size:15px; letter-spacing:.06em; line-height:1;
  color:rgba(43,33,24,.7);         /* --ink at 70% */
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.lang button[aria-pressed="true"]{ color:var(--rum); }
.lang button:focus-visible{ outline:2px solid var(--rum); outline-offset:-2px; border-radius:50%; }
.lang__bar{ color:rgba(43,33,24,.35); font-size:15px; line-height:1; }   /* --ink at 35% */

/* ---- scroll cue: on the paper under the poster, shown on lift, gone after the first few px of scroll ---- */
.cue{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:15;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:14px; letter-spacing:.12em; line-height:1; color:var(--rum);
  opacity:0; pointer-events:none;
  transition:opacity 200ms ease;
}
.cue.is-on{ opacity:1; }
.cue svg{ display:block; width:14px; height:14px; animation:cue-bob 1.6s ease-in-out infinite; }
@keyframes cue-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ---- ending: on the paper, everything a real element ---- */
.ending{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:48px 20px 64px;
  text-align:center;
}
.ending__in{ display:flex; flex-direction:column; align-items:center; gap:18px; max-width:calc(34ch + 40px); }
.ending__line{ margin:0; font-size:15px; line-height:1.5; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:52px; padding:0 30px; border-radius:999px;
  background:var(--sand); color:var(--ink);
  font-size:18px; letter-spacing:.06em; text-decoration:none;
}
.ending__address, .ending__phone{ color:var(--ink); font-size:15px; line-height:1.4; text-decoration:none; border-bottom:1px solid var(--kraft-warm); }
.ending__hours{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:auto auto; column-gap:18px; row-gap:4px; font-size:15px; }
.ending__hours li{ display:contents; }
.ending__day{ text-align:right; } .ending__time{ text-align:left; }
.ending__links{ margin:0; display:flex; gap:22px; font-size:15px; }
.ending__links a{ color:var(--rum); text-decoration:none; }
.ending__fine{ margin:6px 0 0; font-size:12px; letter-spacing:.12em; opacity:.75; }

/* ---- reduced motion: nothing scrubs, nothing fades; the lid is static, the flow is the flow ---- */
@media (prefers-reduced-motion: reduce){
  .rail, .lang{ transition:none; }
  .cue svg{ animation:none; }
}