/* ==========================================================================
   case-sip-brand.css — Fizzy Rizzy brand skin for case-sip.html
   ----------------------------------------------------------------------------
   Loaded on every visit but dormant: every styled rule sits under
   `body.brand-on`. The toggle button (also styled here) flips that class.
   Tokens + fonts taken from project/resource/fizzy-rizzy-brand-guide.html.
   ========================================================================== */


/* -- 1. Toggle button (always visible) ---------------------------------- */

.brand-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: none;
  transition: background .25s, color .25s, border-color .25s;
}
.brand-toggle:hover {
  background: var(--acc);
  color: var(--acc-ink);
  border-color: var(--acc);
}
.brand-toggle .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc);
  transition: background .25s;
}
.brand-toggle:hover .dot { background: var(--acc-ink); }
.brand-toggle .lbl-on  { display: none; }
body.brand-on .brand-toggle .lbl-off { display: none; }
body.brand-on .brand-toggle .lbl-on  { display: inline; }


/* ============================================================================
   2. Brand-on overrides — Fizzy Rizzy palette + typography
   ============================================================================ */

body.brand-on {
  --bg:      #F4EDD6;              /* crema   */
  --bg-2:    #0F2318;              /* verde   — codecard bg */
  --ink:     #0F2318;              /* verde   */
  --ink-2:   rgba(15,35,24,0.72);
  --ink-3:   rgba(15,35,24,0.55);
  --line:    rgba(15,35,24,0.15);
  --acc:     #C8E63C;              /* lime    */
  --acc-ink: #0F2318;              /* verde   */
  --amber:   #E8841A;

  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Mono', monospace;
  transition: background .4s ease, color .4s ease;
}

/* Custom cursor is part of the nyp.at identity, not Fizzy Rizzy — hide it. */
body.brand-on .cursor-dot,
body.brand-on .cursor-ring { display: none; }
body.brand-on,
body.brand-on a,
body.brand-on button,
body.brand-on .brand-toggle { cursor: auto; }
body.brand-on a,
body.brand-on button,
body.brand-on .brand-toggle { cursor: pointer; }


/* -- 3. Topbar ---------------------------------------------------------- */

body.brand-on .topbar {
  background: #0F2318;
  border-bottom: 2px solid var(--acc);
  color: rgba(244,237,214,0.55);
}
body.brand-on .topbar a {
  color: var(--acc);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.brand-on .topbar > div:last-child {
  font-family: 'DM Mono', monospace;
  color: rgba(244,237,214,0.45);
}


/* -- 4. Hero ------------------------------------------------------------ */

body.brand-on .heroA .eyebrow {
  font-family: 'DM Mono', monospace;
  color: var(--amber);
  letter-spacing: .2em;
  border-bottom: 1px solid var(--line);
}
body.brand-on .heroA h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.0;
}
body.brand-on .heroA h1 em {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  color: var(--acc);
}
body.brand-on .heroA .lede p {
  font-family: 'Syne', sans-serif;
  color: var(--ink-2);
}
body.brand-on .heroA .lede p em,
body.brand-on .ovA .body p em {
  color: var(--acc) !important;
  font-style: italic;
}
body.brand-on .heroA .meta { border-top-color: var(--line); }
body.brand-on .heroA .meta .k {
  font-family: 'DM Mono', monospace;
  color: var(--amber);
  letter-spacing: .15em;
}
body.brand-on .heroA .meta .v {
  font-family: 'Syne', sans-serif;
  font-weight: 500;
  color: var(--ink);
}


/* -- 5. Section labels -------------------------------------------------- */

body.brand-on .section-label,
body.brand-on .section-label span {
  font-family: 'DM Mono', monospace;
  color: var(--amber);
  letter-spacing: .22em;
}
body.brand-on .section-label::before { background: var(--amber); width: 32px; }


/* -- 6. Overview -------------------------------------------------------- */

body.brand-on .ovA h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  line-height: 1.0;
}
body.brand-on .ovA h2 em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--acc);
}
body.brand-on .ovA .body p {
  font-family: 'Syne', sans-serif;
  color: var(--ink);
}
body.brand-on .ovA .body p + p { color: var(--ink-2); }


/* -- 7. Pullquote — styled like the brand's position-card --------------- */

body.brand-on .pullquote {
  background: #0F2318;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 60px);
  max-width: none;
  text-align: left;
  position: relative;
  overflow: hidden;
}
body.brand-on .pullquote::after {
  content: '"';
  position: absolute;
  top: -4rem;
  right: 2rem;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 20rem;
  color: rgba(200,230,60,0.07);
  line-height: 1;
  pointer-events: none;
}
body.brand-on .pullquote p {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  color: #F4EDD6;
  position: relative;
  z-index: 1;
}
body.brand-on .pullquote p em {
  color: var(--acc);
  font-style: normal;
  font-weight: 900;
}
body.brand-on .pullquote .attr {
  color: rgba(244,237,214,0.45);
  font-family: 'DM Mono', monospace;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}


/* -- 8. Process — white cards, lime-left-border ------------------------- */

body.brand-on .prA {
  background: transparent;
  border: none;
  gap: 14px;
}
body.brand-on .prA .step {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
  transition: transform .2s, box-shadow .2s;
}
body.brand-on .prA .step:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,35,24,0.08);
}
body.brand-on .prA .step .n {
  font-family: 'DM Mono', monospace;
  color: var(--amber);
  letter-spacing: .18em;
}
body.brand-on .prA .step .h {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
}
body.brand-on .prA .step .h em { color: var(--acc); font-style: italic; }
body.brand-on .prA .step .p {
  font-family: 'Syne', sans-serif;
  color: rgba(15,35,24,0.65);
}
body.brand-on .prA .step .p em { color: var(--amber); font-style: italic; }


/* -- 9. Gallery — lime top-border on tiles ------------------------------ */

body.brand-on .glA .tile {
  border: 1px solid var(--line);
  border-top: 3px solid var(--acc);
}
body.brand-on .glA .tile::after {
  background: rgba(15,35,24,0.88);
  color: var(--acc);
  font-family: 'DM Mono', monospace;
  letter-spacing: .15em;
}


/* -- 10. Results — big Playfair numerals -------------------------------- */

body.brand-on .rsA {
  border-top: 2px solid var(--acc);
}
body.brand-on .rsA .cell .big {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  color: var(--acc);
}
body.brand-on .rsA .cell .lbl {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .1em;
}
body.brand-on .rsA .cell .nt {
  font-family: 'Syne', sans-serif;
  font-style: normal;
  color: rgba(15,35,24,0.55);
}


/* -- 11. Credits / Next / Footer ---------------------------------------- */

body.brand-on .credits h3 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
}
body.brand-on .credits h3 em { color: var(--acc); }
body.brand-on .credits dl { border-top: 1px solid var(--line); }
body.brand-on .credits dt {
  font-family: 'DM Mono', monospace;
  color: var(--amber);
  letter-spacing: .15em;
}
body.brand-on .credits dd {
  font-family: 'Syne', sans-serif;
  color: var(--ink);
}

body.brand-on .next a {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--acc);
}
body.brand-on .next a:hover {
  background: #0F2318;
  color: var(--acc);
  border-color: var(--acc);
}
body.brand-on .next a:hover .k { color: rgba(200,230,60,0.55); }
body.brand-on .next a:hover .nm { color: var(--acc); }
body.brand-on .next .k {
  font-family: 'DM Mono', monospace;
  color: var(--amber);
}
body.brand-on .next .nm {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
}

body.brand-on footer {
  background: #0F2318;
  color: rgba(244,237,214,0.45);
  border-top: 2px solid var(--acc);
  padding: 30px 28px;
  margin: 0 -28px;
  font-family: 'DM Mono', monospace;
}


/* -- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .brand-toggle { padding: 12px 16px; font-size: 10px; gap: 10px; }
  body.brand-on .pullquote { padding: 56px 32px; }
  body.brand-on .pullquote::after { font-size: 14rem; top: -3rem; right: 1rem; }
  body.brand-on footer { margin: 0 -20px; padding: 24px 20px; }
}
@media (max-width: 640px) {
  .brand-toggle {
    right: 14px; bottom: 14px;
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: .1em;
  }
  .brand-toggle .dot { width: 6px; height: 6px; }
  body.brand-on .pullquote { padding: 44px 20px; }
  body.brand-on .pullquote::after { font-size: 10rem; top: -2rem; right: .5rem; }
  body.brand-on .prA .step { padding: 22px 20px; }
  body.brand-on footer { margin: 0 -16px; padding: 20px 16px; }
}
@media (max-width: 420px) {
  /* Stack the toggle label tighter on very small phones */
  .brand-toggle { padding: 10px 12px; letter-spacing: .08em; }
}