/* The Sober Bartender · ink mode (site-wide dark theme)
   Semantic tokens: light values in :root, night values under html.ink.
   Brand rules carried into the dark: berry, gold, coral, oxblood surfaces and
   the plum photo scrims NEVER flip; gold text stays gold (it finally gets the
   whole room); former ink bands become deep plum so the banding survives.
   Toggle: the moon button in the site header (persists via localStorage sb_ink). */
:root {
  /* surfaces */
  --s-page:   #F4E9DA;
  --s-card:   #FBF2E1;
  --s-white:  #ffffff;
  --s-dark:   #111111;
  --s-veil:   rgba(244,233,218,0.92);

  /* text */
  --t-ink:    #111111;
  --t-body:   #3A2A24;
  --t-body2:  #4A3A32;
  --t-mut:    #6A5A4C;
  --t-mut2:   #7A6A5C;
  --t-mut3:   #6E5F51;
  --t-accent: #9C2D59;
  --t-berry:  #C43E73;
  --t-ox:     #762124;
  --t-pass:   #2F5B1B;
  --t-fail:   #B8374F;

  /* borders */
  --b-warm10: rgba(118,33,36,0.1);
  --b-warm12: rgba(118,33,36,0.12);
  --b-warm14: rgba(118,33,36,0.14);
  --b-warm16: rgba(118,33,36,0.16);
  --b-warm20: rgba(118,33,36,0.2);
  --b-warm25: rgba(118,33,36,0.25);
  --b-ink16:  rgba(16,16,16,0.16);
  --b-ink18:  rgba(16,16,16,0.18);
  --b-ink20:  rgba(16,16,16,0.2);
  --b-ink25:  rgba(16,16,16,0.25);
  --b-strong: #111111;
  --b-sand:   #E7D9C4;

  /* washes */
  --w-warm06:  rgba(118,33,36,0.06);
  --w-warm08:  rgba(118,33,36,0.08);
  --w-berry10: rgba(156,45,89,0.1);
  --w-berry12: rgba(196,62,115,0.12);

  /* shadows */
  --sh-warm:  rgba(118,33,36,0.5);
  --sh-warm6: rgba(118,33,36,0.6);

  /* mesh gradients — smooth corner-mesh (colors anchored at corners, blending
     edge-to-edge in curves) in the brand palette. Fixed; same in both themes. */
  --grad-dark: radial-gradient(at 8% 8%, rgba(244,185,66,0.5) 0px, transparent 52%), radial-gradient(at 102% 4%, rgba(156,45,89,0.5) 0px, transparent 52%), radial-gradient(at 94% 106%, rgba(156,45,89,0.5) 0px, transparent 54%), #111111;
  --grad-berry: radial-gradient(at 104% 108%, #9C2D59 0px, transparent 60%), radial-gradient(at -4% 106%, #9C2D59 0px, transparent 54%), radial-gradient(at 100% 2%, #F4B942 0px, transparent 40%), #C43E73;
  --grad-warm-veil: radial-gradient(at 104% -4%, rgba(244,185,66,0.36) 0px, transparent 54%), radial-gradient(at -4% 104%, rgba(196,62,115,0.16) 0px, transparent 56%), radial-gradient(at 58% 62%, rgba(231,111,97,0.13) 0px, transparent 52%);
  --grad-light: radial-gradient(at 8% 8%, #F4B942 0px, transparent 52%), radial-gradient(at 102% 4%, #E76F61 0px, transparent 52%), radial-gradient(at 94% 106%, #E76F61 0px, transparent 54%), #FBF2E1;
  /* photo-hero scrim: the approved dark-gradient arrangement (gold top-left, berry deep doubled
     right) made translucent over a midnight legibility fade. Bottom stays >=0.92 dark for text.
     Never flips in ink mode. */
  --grad-hero-scrim: radial-gradient(at 8% 8%, rgba(244,185,66,0.18) 0px, transparent 52%), radial-gradient(at 102% 4%, rgba(156,45,89,0.38) 0px, transparent 52%), radial-gradient(at 94% 106%, rgba(156,45,89,0.42) 0px, transparent 54%), linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.58) 55%, rgba(17,17,17,0.78) 78%, rgba(17,17,17,0.93) 100%);
}

html.ink {
  color-scheme: dark;

  /* surfaces: the bar at night */
  --s-page:   #14100E;
  --s-card:   #1D1713;
  --s-white:  #241D18;
  --s-dark:   #200F16;   /* former ink bands go deep plum so sections still band */
  --s-veil:   rgba(20,15,13,0.92);

  /* text: cream carries the room */
  --t-ink:    #F4E9DA;
  --t-body:   #DACEC1;
  --t-body2:  #CBBDAE;
  --t-mut:    #B3A292;
  --t-mut2:   #A2917E;
  --t-mut3:   #AB9A88;
  --t-accent: #E390B4;   /* berry deep, lifted for dark fields */
  --t-berry:  #E06C9F;
  --t-ox:     #D99FA0;
  --t-pass:   #8FBF7A;
  --t-fail:   #E27389;

  /* borders: cream lines instead of oxblood */
  --b-warm10: rgba(244,233,218,0.1);
  --b-warm12: rgba(244,233,218,0.13);
  --b-warm14: rgba(244,233,218,0.15);
  --b-warm16: rgba(244,233,218,0.17);
  --b-warm20: rgba(244,233,218,0.22);
  --b-warm25: rgba(244,233,218,0.26);
  --b-ink16:  rgba(244,233,218,0.2);
  --b-ink18:  rgba(244,233,218,0.22);
  --b-ink20:  rgba(244,233,218,0.24);
  --b-ink25:  rgba(244,233,218,0.28);
  --b-strong: #F4E9DA;
  --b-sand:   #3A3028;

  --w-warm06:  rgba(244,233,218,0.07);
  --w-warm08:  rgba(244,233,218,0.09);
  --w-berry10: rgba(224,108,159,0.16);
  --w-berry12: rgba(224,108,159,0.18);

  --sh-warm:  rgba(0,0,0,0.55);
  --sh-warm6: rgba(0,0,0,0.65);
}

/* the memphis skyline photograph multiplies into nothing on dark; flip it to line art */
html.ink img[src*="memphis-skyline"] {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
  opacity: 0.16;
}

/* light islands: brand specimens stay printed-light even at night.
   Redefining the tokens inside these subtrees restores daylight for every
   descendant, however it was tokenized. */
html.ink [data-keep],
html.ink .bh-menu-card, html.ink .bh-ig, html.ink .bh-prop-cover,
html.ink .bh-card3d, html.ink .bh-abuse .tile, html.ink .bh-stage .field {
  --s-page:#F4E9DA; --s-card:#FBF2E1; --s-white:#ffffff; --s-dark:#111111;
  --t-ink:#111111; --t-body:#3A2A24; --t-body2:#4A3A32; --t-mut:#6A5A4C;
  --t-mut2:#7A6A5C; --t-mut3:#6E5F51; --t-accent:#9C2D59; --t-berry:#C43E73;
  --t-ox:#762124; --t-pass:#2F5B1B; --t-fail:#B8374F;
  --b-warm10:rgba(118,33,36,0.1); --b-warm12:rgba(118,33,36,0.12);
  --b-warm14:rgba(118,33,36,0.14); --b-warm16:rgba(118,33,36,0.16);
  --b-warm20:rgba(118,33,36,0.2); --b-warm25:rgba(118,33,36,0.25);
  --b-ink16:rgba(16,16,16,0.16); --b-ink18:rgba(16,16,16,0.18);
  --b-ink20:rgba(16,16,16,0.2); --b-ink25:rgba(16,16,16,0.25);
  --b-strong:#111111; --b-sand:#E7D9C4;
  --w-warm06:rgba(118,33,36,0.06); --w-warm08:rgba(118,33,36,0.08);
  --w-berry10:rgba(156,45,89,0.1); --w-berry12:rgba(196,62,115,0.12);
  --sh-warm:rgba(118,33,36,0.5); --sh-warm6:rgba(118,33,36,0.6);
}

/* ---- 4-column grids collapse 4 -> 2x2 -> 1, never a 3+orphan state ---- */
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .g4 { grid-template-columns: 1fr; } }

/* ---- animated mesh gradients: keep the corner-mesh (liquid look), gently float/breathe it ---- */
@keyframes sbGradFloat {
  0%,100% { transform: scale(1.06) translate(0,0) rotate(0deg); }
  33%     { transform: scale(1.14) translate(-3%,2.6%) rotate(1.6deg); }
  66%     { transform: scale(1.09) translate(2.6%,-2.4%) rotate(-1.6deg); }
}
.grad-anim-dark, .grad-anim-berry, .grad-anim-light { position:relative; isolation:isolate; overflow:hidden; }
.grad-anim-dark::before, .grad-anim-berry::before, .grad-anim-light::before {
  content:""; position:absolute; inset:-22%; z-index:-2; will-change:transform;
  animation: sbGradFloat 34s ease-in-out infinite;
}
.grad-anim-dark::before  { background: var(--grad-dark); }
.grad-anim-berry::before { background: var(--grad-berry); }
.grad-anim-light::before { background: var(--grad-light); }
/* subtle film grain over the drifting gradient, below content (the "grainient" look) */
.grad-grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:0.13; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:140px 140px;
}
@media (prefers-reduced-motion: reduce) {
  .grad-anim-dark::before,.grad-anim-berry::before,.grad-anim-light::before { animation:none; }
}

/* ---- shared scroll-reveal + ambient motion (pages opt in via html.sb-motion + data-reveal) ---- */
/* keep sticky header working: clip horizontal bleed WITHOUT creating a scroll
   container (overflow:hidden would break position:sticky on the header) */
body{ overflow-x:clip; }
/* the dc-import wraps the shared Header in a short .sc-host box; position:sticky can only
   stick within its parent, so that short wrapper makes the header scroll away. Collapse
   the wrapper's box so the header's sticky parent becomes the full-height page body. */
.sc-host:has(> header){ display:contents; }

html.sb-motion [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease-out, transform .7s ease-out; will-change:opacity,transform; }
html.sb-motion [data-reveal="kinetic"]{ transform:translateY(40px) scale(.9); transition:opacity .85s ease-out, transform .85s cubic-bezier(.2,.7,.3,1); }
html.sb-motion [data-reveal="left"]{ transform:translateX(-5vw) scale(.96); transition:opacity .9s ease-out, transform .9s cubic-bezier(.2,.7,.3,1); }
html.sb-motion [data-reveal="right"]{ transform:translateX(5vw) scale(.96); transition:opacity .9s ease-out, transform .9s cubic-bezier(.2,.7,.3,1); }
html.sb-motion [data-reveal].sb-in{ opacity:1 !important; transform:none !important; }
@keyframes sbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@keyframes sbFloatRot{ 0%{ transform:translateY(7px) rotate(-3deg); } 100%{ transform:translateY(-9px) rotate(3deg); } }
@keyframes sbTwinkle{ 0%,100%{ opacity:1; transform:scale(1) rotate(0); } 50%{ opacity:.3; transform:scale(.72) rotate(18deg); } }
.sb-float{ animation:sbFloat 6s ease-in-out infinite; will-change:transform; }
.sb-float-rot{ animation:sbFloatRot 4.6s ease-in-out infinite alternate; will-change:transform; }
.sb-spark{ animation:sbTwinkle 3.2s ease-in-out infinite; will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce){
  html [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .sb-float,.sb-float-rot,.sb-spark{ animation:none !important; }
}

/* ---- ambient morphing "bob" blobs (the brand-hub motion-recipe animation, used as soft floats) ---- */
/* crisp filled circles (matches the print brand: solid circles, crisp edges, NOT blurred blobs).
   Fill color comes from each span's inline background; motion floats + breathes so it reads
   as alive without nagging. */
@keyframes sbBob { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(10px,-40px) scale(1.12); } }
.sb-blobs { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.sb-blob { position:absolute; border-radius:50%; opacity:0.3; will-change:transform;
  animation:sbBob 8s ease-in-out infinite; }
.sb-blob.b-slow { animation-duration:11s; animation-delay:-3s; }
.sb-blob.b-slower { animation-duration:14s; animation-delay:-7s; }
@media (prefers-reduced-motion:reduce){ .sb-blob{ animation:none; } }