/* ═══════════════════════════════════════════════════════════════
   ARTHOUSE — STYLE SYSTEM · V2
   Source of truth: Tom's V2 Style Guide (Figma 3LZ41hry0DM4nxN4N1yIXm,
   frames 01 Colors 1:12490 + Type Specimens 1:16153) and the locked
   rule docs in this folder:
     · TYPOGRAPHY-RULES.md            (pulled 2026-06-25, chip cut LOCKED)
     · SECTION-HEADER-EYEBROW-RULES.md (locked 2026-06-25)
   Rebuilt: 2026-07-02. Previous version archived at
   _Archive/arthouse-brand-v1-2026-04-23.css
   The pre-V2 references (voting-grid.css, artwork-uploader,
   financial-os) are HISTORY, not truth. Tom's Figma is truth.

   V2 headline changes vs v1:
   · Buttons are FLAT at rest. Boxed 0 3px 0 #C9B400 shadow RETIRED.
     Hover = translateY(-2px) lift, soft shadow ON HOVER ONLY.
   · Body font is Universal Sans Display Regular (was DM Sans).
   · Buttons + section-kicker eyebrows are Universal Sans Display Bold
     (were Trade Gothic). Trade Gothic survives ONLY on chips/tags,
     status eyebrow-chips, and stepper numerals (BoldCondTwenty cut).
   · Formal 11-step type scale (tokens below).
   · Brand Orange #FC4600 added (identity accent, distinct from CTA yellow).
   · Flavor palette re-hexed to Tom's V2 values.

   Scoping (unchanged): :root tokens global; every component rule is
   scoped under a .ah ancestor. Add class="ah" to a container to
   activate brand components.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800;900&display=swap');
/* DM Sans is FALLBACK ONLY as of V2. Body copy is Universal Sans Display. */

/* ── Primary face: UNIVERSAL SANS DISPLAY (Colophon, variable) ──
   For non-Liquid HTML use arthouse-fonts-local.css instead.
   Asset URLs below resolve through Liquid asset_url in the theme. */
@font-face {
  font-family: 'Universal Sans Display';
  src: url('{{ "UniversalSansDisplayGX_variable.woff2" | asset_url }}') format('woff2-variations'),
       url('{{ "UniversalSansDisplayGX_variable.woff2" | asset_url }}') format('woff2'),
       url('{{ "UniversalSansDisplayGX.woff" | asset_url }}') format('woff');
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Universal Sans Display';
  src: url('{{ "UniversalSansItalicDisplayGX_variable.woff2" | asset_url }}') format('woff2-variations'),
       url('{{ "UniversalSansItalicDisplayGX_variable.woff2" | asset_url }}') format('woff2'),
       url('{{ "UniversalSansItalicDisplayGX.woff" | asset_url }}') format('woff');
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-style: italic;
  font-display: swap;
}

/* Trade Gothic LT Bold Condensed No. 20. CANONICAL CHIP CUT
   (locked 2026-06-25, Justino). Used ONLY for chips/tags, status
   eyebrow-chips, and stepper numerals. Never buttons, never
   headlines, never body, never section-kicker eyebrows. */
@font-face {
  font-family: 'Trade Gothic Bold Cond';
  src: url('{{ "TradeGothicLT-BoldCondTwenty.woff2" | asset_url }}') format('woff2'),
       url('{{ "TradeGothicLT-BoldCondTwenty.woff" | asset_url }}') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Trade Gothic Bold Cond';
  src: url('{{ "TradeGothicLT-BoldCondTwentyObl.woff2" | asset_url }}') format('woff2'),
       url('{{ "TradeGothicLT-BoldCondTwentyObl.woff" | asset_url }}') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Core palette (Tom V2, 01 Colors) ── */
  --ah-yellow:        #FFE802;   /* Accent Yellow: primary CTAs, dashed submission borders, location labels */
  --ah-brand-orange:  #FC4600;   /* NEW V2. Identity accent: brand mark, "LOVE." callouts, avatar badges. Sparingly. */
  --ah-ink:           #0A0A0A;   /* primary text */
  --ah-black-tea:     #000000;   /* true black: hard borders on artist cards + CTAs */
  --ah-ink-soft:      #232323;   /* stepper numerals, supporting dark text */
  --ah-paper:         #FFFFFF;
  --ah-paper-2:       #F6F6F4;   /* off-white. The ONLY two page surfaces. No invented warm creams. */
  --ah-paper-near:    #FCFCFC;   /* "Your Art Here" submission card surface only */
  --ah-muted:         #6B6B6B;   /* secondary text, sublabels, captions */
  --ah-hairline:      #E8E6E1;   /* card outlines, dividers, avatar borders */
  --ah-warm-grey-2:   #D6D3CC;   /* outline border on light secondary buttons */

  /* RETIRED IN V2, DO NOT REINTRODUCE:
     --ah-yellow-shadow: #C9B400  (the boxed-button depth is gone; buttons are flat) */

  /* Legacy neutral aliases (kept so older prototypes keep rendering) */
  --ah-g1:            #F5F5F3;
  --ah-g2:            #EBEBEA;
  --ah-line:          #E8E6E1;   /* alias of --ah-hairline */
  --ah-line-strong:   #D6D3CC;   /* alias of --ah-warm-grey-2 */
  --ah-border:        #E2E2DE;

  /* ── Flavor palette (Tom V2 formal tokens; callout/tint use) ── */
  --ah-flavor-black-tea:   #0A0A0A;
  --ah-flavor-lemon-honey: #FECE00;
  --ah-flavor-mango:       #FF8300;
  --ah-flavor-peach:       #FE5466;
  --ah-flavor-raspberry:   #FD0367;
  --ah-flavor-tropical:    #24C1E2;

  /* Legacy flavor aliases, re-hexed to V2 values */
  --ah-cyan:          #24C1E2;   /* Tropical (was #2CD8FF) */
  --ah-pink:          #FD0367;   /* Raspberry */
  --ah-orange:        #FF8300;   /* Mango (flavor). NOT the brand mark; that is --ah-brand-orange. */
  --ah-red:           #EE4323;   /* alert/error semantic. ⚠ Tom has not specced semantic colors; open question. */
  --ah-green:         #7BE23A;   /* success semantic. Same caveat. */

  /* ── Can-coded accents (Tom V2) ── RESOLVED per the guide's
     "Product Cards — House Collection" band: these are the product-card
     backdrop colors. Tropical=#06D6E6, Lemon Honey=#FFE802,
     Raspberry=#FF2A8B, Peach=#FC4600 (Brand Orange doubles as Peach card). */
  --ah-accent-turquoise:   #06D6E6;
  --ah-accent-pink:        #FF2A8B;
  --ah-accent-sea-green:   #00B573;
  --ah-accent-light-white: #FAFAF7;  /* accent fill ONLY. Never a page background (off-white drift rule). */

  /* ── Overlay system (guide 01 Colors → Overlay Texture) ── */
  --ah-overlay-60:      rgba(0,0,0,.6);                       /* hover-state shade over imagery */
  --ah-slider-chip-bg:  rgba(10,10,10,.45);                   /* pagination chip bg, pair with backdrop-filter: blur(4px) */
  --ah-hero-gradient:   linear-gradient(220deg, rgba(0,0,0,0), #000);            /* mix-blend-mode: multiply over hero imagery */
  --ah-caption-shade:   linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7)); /* bottom shade on artist cards for legible captions */

  /* ── Spacing & grid (guide 02 Layout: 4px base unit) ── */
  --ah-s1: 4px;  --ah-s2: 8px;   --ah-s3: 12px; --ah-s4: 16px; --ah-s5: 24px;
  --ah-s6: 32px; --ah-s7: 48px;  --ah-s8: 64px; --ah-s9: 96px; --ah-s10: 128px;
  --ah-content-max: 1280px;      /* 12-col desktop grid at 1440 */
  /* Section rhythm: 64 → 96 → 128 (s8 → s9 → s10) */

  /* ── Radii / shape ── 6px is the core standard (guide "Radius corner");
     buttons run 5px per the component spec; hero buttons 44px tall at 5px. */
  --ah-radius:        6px;
  --ah-radius-btn:    5px;
  --ah-radius-pill:   4px;
  --ah-radius-panel:  14px;

  /* ── Motion ── */
  --ah-ease:    cubic-bezier(.2,.8,.2,1);
  --ah-bounce:  cubic-bezier(.175,.885,.32,1.275);

  /* ── Elevation (hover-only on interactive elements; nothing boxed at rest) ── */
  --ah-shadow:       0 18px 40px rgba(10,10,10,.12), 0 2px 6px rgba(10,10,10,.06);
  --ah-shadow-soft:  0 2px 24px rgba(0,0,0,.06);
  --ah-shadow-card:  0 1px 0 rgba(17,17,17,.04), 0 8px 24px -16px rgba(17,17,17,.18);
  --ah-shadow-hover: 0 6px 16px rgba(10,10,10,.14);  /* button hover lift */

  /* ── TYPE SCALE (Tom V2, 11 steps; meta labels are truth) ──
     All Universal Sans Display unless noted. Chip/tag is Trade Gothic. */
  --ah-text-display-xl-size:     120px;  /* Black 900, upper, hero H1 */
  --ah-text-display-xl-lh:       104px;
  --ah-text-display-xl-tracking: -1px;

  --ah-text-display-lg-size:     68px;   /* Black 900, upper */
  --ah-text-display-lg-lh:       57px;
  --ah-text-display-lg-tracking: -0.68px;

  --ah-text-display-md-size:     56px;   /* SECTION TITLE. Black 900, upper */
  --ah-text-display-md-lh:       53px;
  --ah-text-display-md-tracking: 0.56px;

  --ah-text-h1-size:             36px;   /* subsection heads. Black 900, upper */
  --ah-text-h1-lh:               40px;
  --ah-text-h1-tracking:         0.47px;

  --ah-text-h2-size:             26px;   /* artist names. Black 900, Title case */
  --ah-text-h2-lh:               24px;
  --ah-text-h2-tracking:         -0.26px;

  --ah-text-body-lg-size:        20px;   /* Bold 700, sentence */
  --ah-text-body-lg-lh:          24px;

  --ah-text-body-size:           16px;   /* Regular 400, sentence */
  --ah-text-body-lh:             25px;
  --ah-text-body-tracking:       0.16px;

  --ah-text-card-title-size:     16px;   /* SemiBold 600, Title case */
  --ah-text-card-title-lh:       22px;

  --ah-text-button-size:         13px;   /* Bold 700, upper */
  --ah-text-button-lh:           13px;
  --ah-text-button-tracking:     1.08px; /* component spec ("13px USD Bold UPPER, ls 1.08, padding 14x22, radius 5");
                                            the type specimen lists 1.3px — components band wins for buttons */

  --ah-text-eyebrow-size:        11px;   /* section-kicker eyebrow. Bold 700, upper */
  --ah-text-eyebrow-lh:          13px;
  --ah-text-eyebrow-tracking:    1.54px;

  --ah-text-chip-size:           12px;   /* Trade Gothic BoldCondTwenty, upper */
  --ah-text-chip-lh:             16px;
  --ah-text-chip-tracking:       2.25px;

  /* ── Font families ──
     Two families, three roles (TYPOGRAPHY-RULES.md one-line rule):
     Universal Sans Display carries display, body, UI, small labels.
     Trade Gothic handles ONLY condensed chips/tags, status
     eyebrow-chips, and stepper numerals. */
  --ah-display:     'Universal Sans Display', 'DM Sans', sans-serif;
  --ah-display-big: 'Universal Sans Display', 'DM Sans', sans-serif;  /* legacy alias */
  --ah-body:        'Universal Sans Display', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ah-font-chip:   'Trade Gothic Bold Cond', 'Universal Sans Display', sans-serif;
  /* --ah-display-ui is RETIRED (was Trade-Gothic-first small UI).
     Small UI is Universal Sans Display Bold now; chips use --ah-font-chip. */
  --ah-display-ui:  'Universal Sans Display', 'DM Sans', sans-serif;  /* neutralized alias for legacy pages */

  /* ── Brush eyebrow assets (Tom's painted brush PNGs) ──
     Point these at the *-Eyebrow-Brush.png assets per surface.
     Brush behind LIVE type; never bake type into the image. */
  --ah-brush-eyebrow: none;
}

/* ═══════════════════════════════════════════════════════════════
   OPEN QUESTIONS (do not guess past these; flag Justino/Tom)
   1. EYEBROW BOUNDARY: section-title kicker = USD Bold 11px;
      standalone status/state badge ("ON DISPLAY NOW") = Trade Gothic
      12px. Working assumption until Justino's ruling.
   2. NAV FONT: live nav renders Trade Gothic; Tom's guide implies USD
      for UI. Do NOT auto-convert the nav in either direction.
   3. CAN-CODED ACCENTS: purpose pending Tom (LTD accents? community?).
   4. SEMANTIC COLORS (success/warn/error): not specced by Tom;
      --ah-red/--ah-green are placeholders.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   HOUSE COLLECTION PATTERNS
   ⚠ V2 TRUTH: the House Collection patterns are Tom's ILLUSTRATED
   flavor-pattern artwork (doodle iconography per flavor: Peach tan,
   Mango red, Raspberry pink, Lemon Honey yellow, Black Tea black,
   Tropical sea-green). Use the real PNG assets:
     Design Assets/V2 Asset Library/figma-fills/House_pattern_*  and
     Design Assets/from-downloads-2026-05-29/House_Pattern_Flavor.zip
   Usage: <div class="ah-house-pattern ah-house-pattern--img"
               style="--ah-pattern:url('<asset>')"></div>
   The CSS-gradient variants below (h1-h6) are the PRE-V2 LEGACY
   fallback. Do not use them on new V2 surfaces.
══════════════════════════════════════════ */
.ah-house-pattern {
  position: absolute;
  inset: 0;
}
.ah-house-pattern--img {
  background-image: var(--ah-pattern);
  background-size: cover;
  background-position: center;
}
.ah-house-pattern[data-pattern="h1"] { background: repeating-linear-gradient(45deg, #0A0A0A 0 12px, #FFE802 12px 24px); }
.ah-house-pattern[data-pattern="h2"] { background: repeating-linear-gradient(0deg, #2CD8FF 0 10px, #0A0A0A 10px 20px); }
.ah-house-pattern[data-pattern="h3"] { background: radial-gradient(circle at 50% 50%, #FF8300 0 18%, #0A0A0A 18% 22%, #FF8300 22% 40%, #0A0A0A 40% 44%, #FF8300 44%); }
.ah-house-pattern[data-pattern="h4"] { background: repeating-linear-gradient(-45deg, #FD0367 0 16px, #FFE802 16px 32px); }
.ah-house-pattern[data-pattern="h5"] { background: repeating-linear-gradient(90deg, #0A0A0A 0 10px, #7BE23A 10px 20px); }
.ah-house-pattern[data-pattern="h6"] { background: conic-gradient(from 45deg, #EE4323, #FFE802, #2CD8FF, #0A0A0A, #EE4323); }

/* ══════════════════════════════════════════
   PAINTED EDGES — hand-brushed edge utility (unchanged from v1)
   Mask PNGs still pending from Tom (status 2026-04-17). Classes are
   safe no-ops until --ah-edge-* vars are filled in.
══════════════════════════════════════════ */
:root {
  --ah-edge-painted: none;
  --ah-edge-torn:    none;
  --ah-edge-stamped: none;
  --ah-edge-circle:  none;
}
.ah-edge--painted,
.ah-edge--torn,
.ah-edge--stamped,
.ah-edge--circle {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.ah-edge--painted { -webkit-mask-image: var(--ah-edge-painted); mask-image: var(--ah-edge-painted); }
.ah-edge--torn    { -webkit-mask-image: var(--ah-edge-torn);    mask-image: var(--ah-edge-torn); }
.ah-edge--stamped { -webkit-mask-image: var(--ah-edge-stamped); mask-image: var(--ah-edge-stamped); }
.ah-edge--circle  { -webkit-mask-image: var(--ah-edge-circle);  mask-image: var(--ah-edge-circle); }
.ah-edge--proc    { filter: url(#ah-painted-edge); }

.ah, .ah * { box-sizing: border-box; }
body.ah, .ah {
  font-family: var(--ah-body);
  font-weight: 400;
  color: var(--ah-ink);
  background: var(--ah-paper);
  -webkit-font-smoothing: antialiased;
  font-size: var(--ah-text-body-size);
  line-height: 1.5625; /* 16/25 per V2 body ramp */
  letter-spacing: var(--ah-text-body-tracking);
}

/* ══════════════════════════════════════════
   TYPE — the V2 ramp
   Display steps are Black 900. The old 800-weight/80%-stretch
   condensed treatment is retired with V2 (that was a Trade Gothic
   impersonation; Tom's V2 specimens are full-width Black).
══════════════════════════════════════════ */
.ah .ah-display-xl { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-display-xl-size); line-height: var(--ah-text-display-xl-lh); letter-spacing: var(--ah-text-display-xl-tracking); text-transform: uppercase; }
.ah .ah-display-lg { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-display-lg-size); line-height: var(--ah-text-display-lg-lh); letter-spacing: var(--ah-text-display-lg-tracking); text-transform: uppercase; }
.ah .ah-display-md,
.ah .ah-section-title { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-display-md-size); line-height: var(--ah-text-display-md-lh); letter-spacing: var(--ah-text-display-md-tracking); text-transform: uppercase; }

/* Legacy heading aliases mapped onto the V2 ramp */
.ah .ah-display   { font-family: var(--ah-display); font-weight: 900; letter-spacing: .01em; line-height: .95; text-transform: uppercase; }
.ah .ah-h1        { font-family: var(--ah-display); font-weight: 900; font-size: clamp(56px, 7vw, var(--ah-text-display-xl-size)); line-height: .88; letter-spacing: -.01em; text-transform: uppercase; }
.ah .ah-h2        { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-display-md-size); line-height: calc(var(--ah-text-display-md-lh) / var(--ah-text-display-md-size)); text-transform: uppercase; }
.ah .ah-h3        { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-h1-size); line-height: calc(var(--ah-text-h1-lh) / var(--ah-text-h1-size)); letter-spacing: var(--ah-text-h1-tracking); text-transform: uppercase; }
.ah .ah-h4        { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-h2-size); line-height: 1; letter-spacing: var(--ah-text-h2-tracking); text-transform: uppercase; }

/* Named V2 ramps */
.ah .ah-artist-name { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-h2-size); line-height: calc(var(--ah-text-h2-lh) / var(--ah-text-h2-size)); letter-spacing: var(--ah-text-h2-tracking); }  /* Title case, no uppercase */
.ah .ah-body-lg     { font-family: var(--ah-body); font-weight: 700; font-size: var(--ah-text-body-lg-size); line-height: calc(var(--ah-text-body-lg-lh) / var(--ah-text-body-lg-size)); }
.ah .ah-card-title  { font-family: var(--ah-body); font-weight: 600; font-size: var(--ah-text-card-title-size); line-height: calc(var(--ah-text-card-title-lh) / var(--ah-text-card-title-size)); }

/* Explicit uppercase for legacy elements (kept from v1) */
.nav__mark,
.ah-house__title,
.ah-house-card__name,
.ah-flavor-card__name,
.ah-flavor-card__price,
.ah-ltd-logo__mark,
.ah-ltd-logo__mark strong,
.ah-ltd-logo__stamp,
.ah-callout-bar__v,
.ah-feature__title,
.ah-feature__coa-copy b,
.ah-feature__coa-stamp,
.ah-roster__name,
.ah-roster-sec-label__num,
.ah-gp-sec-label__num,
.ah-merch-sec-label__num,
.ah-feature-sec-label__num,
.ah-sec-label__num,
.ah-merch__name,
.ah-proof__word,
.ah-alp__title,
.ah-manifesto__title,
.ah-canvas__title,
.ah-drop-news__title,
.ah-cs-band__m-big,
.ah-cs-step__num,
.ah-meta-card__v,
.ah-alp-tier__name,
.ah-alp-tier__line,
.ah-alp__logo strong,
.ah-bleed__title,
.ah-art__t1,
.ah-art__plus,
.ah-rp-card__title,
.ah-rp-card__price,
.ah-product__title,
.ah-product__price,
.ah-flavor-chip,
.ah-coll-pill,
.ah-edition__seg,
.ah-btn,
.ah-trust__label,
.ah-ie__headline,
.ah-ie__tab,
.ah-ingredients__headline,
.ah-footer__mark,
.ah-foot__mark,
.ah-seal b,
.seal b { text-transform: uppercase; }

.ah .ah-label        { font-family: var(--ah-body); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-ink); }
.ah .ah-label--muted { color: var(--ah-muted); }
.ah .ah-tiny         { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-muted); }
.ah .ah-number       { font-family: var(--ah-display); font-weight: 900; letter-spacing: .02em; color: var(--ah-ink-soft); }  /* numbering is Universal Sans (Justino ruling 2026-07-02) */

/* ══════════════════════════════════════════
   EYEBROWS — TWO treatments, don't conflate
   (TYPOGRAPHY-RULES.md + SECTION-HEADER-EYEBROW-RULES.md)
══════════════════════════════════════════ */
/* 1. Section-title kicker (slash style, above big section titles,
      e.g. "SERIES NO. 01 / THE ARTISTS"): Universal Sans Display Bold */
.ah .ah-eyebrow {
  font-family: var(--ah-display); font-weight: 700;
  font-size: var(--ah-text-eyebrow-size); line-height: var(--ah-text-eyebrow-lh);
  letter-spacing: var(--ah-text-eyebrow-tracking);
  text-transform: uppercase; color: var(--ah-ink);
}
.ah .ah-eyebrow--muted { color: var(--ah-muted); }

/* 2. Status/state eyebrow-chip (standalone state label,
      e.g. "ON DISPLAY NOW"): Trade Gothic BoldCondTwenty */
.ah .ah-eyebrow-chip {
  font-family: var(--ah-font-chip); font-weight: 700;
  font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ah-ink);
}

/* 3. Brush eyebrow (painted brush BEHIND live type; section/flavor
      eyebrows). NOT a pill. Brush extends past the text with real
      padding, left edge sits on the section gutter, one per element.
      Set the brush per surface:
        style="--ah-brush-eyebrow:url('...-Eyebrow-Brush.png')" */
.ah .ah-eyebrow--brush {
  display: inline-flex; align-items: center;
  padding: 10px 22px;   /* brush must breathe past the glyphs on all sides */
  background-image: var(--ah-brush-eyebrow);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--ah-display); font-weight: 800;
  font-size: var(--ah-text-eyebrow-size); letter-spacing: var(--ah-text-eyebrow-tracking);
  text-transform: uppercase;
}

/* Pulse dot (live / now indicator) */
@keyframes ah-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.ah .ah-pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ah-green); animation: ah-pulse 1.6s ease-in-out infinite; }

/* ╳ RETIRED 2026-04-22 — DO NOT USE ╳
   .ah-highlight (yellow marker behind type). Use weight, scale, the
   black-ink callout block, or the yellow table-total row instead. */
.ah .ah-highlight { background: transparent !important; padding: 0 !important; }

/* ╳ RETIRED 2026-04-22 — DO NOT USE ╳
   BRAND STRIPE (.ah-brand-stripe, orange + cyan left-edge bars).
   Retired across ALL Arthouse surfaces, internal and external. */
.ah .ah-brand-stripe,
.ah.ah-internal .ah-brand-stripe { display: none !important; }

/* ══════════════════════════════════════════
   BUTTONS — FLAT at rest, lift on hover
   (feedback_arthouse_buttons_are_flat, locked 2026-06-25.
   The v1 boxed 0 3px 0 #C9B400 shadow is RETIRED with V2.)
   Type: Universal Sans Display Bold 13/13, +1.3px, uppercase.
   Trailing arrow: match Tom's comp per instance ("SHOP THE SERIES →").
══════════════════════════════════════════ */
.ah .ah-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--ah-radius-btn); border: 1.5px solid transparent;
  font-family: var(--ah-display); font-weight: 700;
  font-size: var(--ah-text-button-size); line-height: var(--ah-text-button-lh);
  letter-spacing: var(--ah-text-button-tracking); text-transform: uppercase;
  cursor: pointer; transition: all .2s var(--ah-ease);
  background: none; color: var(--ah-ink); text-decoration: none;
  box-shadow: none;  /* flat at rest, no exceptions */
}
.ah .ah-btn:hover  { transform: translateY(-2px); box-shadow: var(--ah-shadow-hover); }  /* every button lifts */
.ah .ah-btn:active { transform: translateY(0); box-shadow: none; }

/* Primary: yellow fill, ink label */
.ah .ah-btn--primary { background: var(--ah-yellow); color: var(--ah-ink); }

/* Ghost: outlined (V2 light-secondary border) */
.ah .ah-btn--ghost { border-color: var(--ah-warm-grey-2); }
.ah .ah-btn--ghost:hover { border-color: var(--ah-ink); }

/* Ink: black fill, light label */
.ah .ah-btn--ink { background: var(--ah-ink); color: var(--ah-paper); border-color: var(--ah-ink); }

/* Alert: red fill, white label (component spec "Alert = Red / White") */
.ah .ah-btn--alert { background: var(--ah-red); color: #fff; border-color: var(--ah-red); }

/* Hero: compact against imagery — 44px height, tighter 5px radius */
.ah .ah-btn--hero { height: 44px; padding: 0 20px; border-radius: 5px; }

/* Submit (italic uppercase, uploader lineage) */
.ah .ah-btn--submit {
  background: var(--ah-ink); color: var(--ah-paper); border: none;
  padding: 16px 20px; font-style: italic; letter-spacing: .14em;
}
.ah .ah-btn--submit::after { content: '›'; font-style: normal; font-size: 20px; line-height: 1; margin-left: 4px; }

.ah .ah-btn__arrow { transition: transform .2s var(--ah-ease); }
.ah .ah-btn:hover .ah-btn__arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════
   CHIPS / PILLS / TAGS — Trade Gothic territory
══════════════════════════════════════════ */
.ah .ah-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--ah-radius-pill);
  border: 1px solid var(--ah-warm-grey-2);
  background: var(--ah-paper); color: var(--ah-ink);
  font-family: var(--ah-display); font-weight: 700; font-size: 12px;  /* filter chips are USD; TG is only tags + status chips (7-02 sweep) */
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: all .2s var(--ah-ease);
}
.ah .ah-chip:hover        { border-color: var(--ah-ink); }
.ah .ah-chip--active      { background: var(--ah-yellow); border-color: var(--ah-ink); }  /* flat; boxed shadow retired */
.ah .ah-chip--sort-active { background: var(--ah-ink); color: var(--ah-paper); border-color: var(--ah-ink); }

/* Pill (smaller filter variant) */
.ah .ah-pill {
  font-family: var(--ah-display); font-size: 11px; font-weight: 700; letter-spacing: .06em;  /* USD (7-02 TG sweep) */
  padding: 6px 13px; border-radius: 20px;
  border: 1.5px solid var(--ah-border); background: transparent;
  color: var(--ah-muted); cursor: pointer; transition: all .12s;
  text-transform: uppercase;
}
.ah .ah-pill:hover         { color: var(--ah-ink); border-color: #bbb; }
.ah .ah-pill.is-active     { color: var(--ah-ink); border-color: transparent; background: var(--ah-yellow); }
.ah .ah-pill.is-active.ink { background: var(--ah-ink); color: var(--ah-paper); }

/* Tag ("LTD · 01" and friends) */
.ah .ah-tag {
  display: inline-block;
  font-family: var(--ah-font-chip); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 4px; text-transform: uppercase;
  background: var(--ah-g2); color: var(--ah-muted);
}
.ah .ah-tag--live   { background: #dcfce7; color: #16a34a; }
.ah .ah-tag--soon   { background: rgba(255,232,2,.25); color: #7a6500; }
.ah .ah-tag--alert  { background: rgba(238,67,35,.12); color: var(--ah-red); }
.ah .ah-tag--yellow { background: var(--ah-yellow); color: var(--ah-ink); }
.ah .ah-tag--cyan   { background: var(--ah-cyan); color: var(--ah-ink); }

/* Quick Look pill (product cards): LIGHT GRAY, never dark
   (SECTION-HEADER-EYEBROW-RULES rule 4) */
.ah .ah-quicklook {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(246,246,244,.92); color: var(--ah-ink);
  border: 1px solid var(--ah-hairline);
  font-family: var(--ah-display); font-weight: 700; font-size: 11px;  /* USD (7-02 TG sweep) */
  letter-spacing: .14em; text-transform: uppercase;
}

/* ══════════════════════════════════════════
   USER AVATARS — always circles, every surface
   (feedback_arthouse_user_avatars_are_circles)
══════════════════════════════════════════ */
.ah .ah-avatar {
  border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ah-paper-2); border: 1px solid var(--ah-hairline);
}
.ah .ah-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════
   PANEL / CARD
══════════════════════════════════════════ */
.ah .ah-panel {
  background: var(--ah-paper);
  border: 1.5px solid var(--ah-border);
  border-radius: var(--ah-radius-panel);
  overflow: hidden;
}
.ah .ah-panel__hdr {
  padding: 13px 18px; background: var(--ah-g1);
  border-bottom: 1px solid var(--ah-border);
  display: flex; align-items: center; justify-content: space-between;
}
.ah .ah-panel__title { font-family: var(--ah-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.ah .ah-panel__body  { padding: 18px; }
.ah .ah-panel--alert { border-color: var(--ah-red); }
.ah .ah-panel--alert .ah-panel__hdr { background: rgba(238,67,35,.08); border-bottom-color: rgba(238,67,35,.2); }

/* Card (gallery pattern). Frame must survive hover; keep transforms
   on the card itself, never let inner media transforms clip the border. */
.ah .ah-card {
  background: var(--ah-paper); border: 1px solid var(--ah-hairline);
  border-radius: var(--ah-radius); overflow: hidden; cursor: pointer;
  transition: transform .35s var(--ah-ease), border-color .35s var(--ah-ease), box-shadow .35s var(--ah-ease);
}
.ah .ah-card:hover { transform: translateY(-4px); border-color: var(--ah-ink); box-shadow: var(--ah-shadow); }
.ah .ah-card__art  { position: relative; aspect-ratio: 6/5; background: var(--ah-paper-2); overflow: hidden; }
.ah .ah-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah .ah-card__footer { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ah-hairline); }
.ah .ah-card__title  { font-family: var(--ah-body); font-weight: 600; font-size: var(--ah-text-card-title-size); line-height: calc(var(--ah-text-card-title-lh) / var(--ah-text-card-title-size)); margin: 0 0 4px; }
.ah .ah-card__sub    { font-size: 12px; color: var(--ah-muted); }

/* ══════════════════════════════════════════
   KPI STRIP
══════════════════════════════════════════ */
.ah .ah-kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 2px solid var(--ah-ink); }
.ah .ah-kpi { padding: 16px 20px; border-right: 1px solid var(--ah-border); }
.ah .ah-kpi:last-child { border-right: none; }
.ah .ah-kpi__lbl { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ah-muted); margin-bottom: 4px; }
.ah .ah-kpi__val { font-family: var(--ah-display); font-weight: 900; font-size: 28px; letter-spacing: .02em; line-height: 1; }
.ah .ah-kpi__sub { font-size: 10px; font-weight: 600; color: var(--ah-muted); margin-top: 3px; }
.ah .ah-kpi__val.neg { color: var(--ah-red); }
.ah .ah-kpi__val.pos { color: #16a34a; }

/* ══════════════════════════════════════════
   SECTION LABEL — number badge + eyebrow + divider
   (guide "Section number badge & divider" + SECTION-HEADER-EYEBROW-RULES)
   · "Each major section is anchored by a black 50×50 badge and a 1px
     Ink hairline that runs full-width with an eyebrow + View All → link."
   · The badge is FIXED SIZE. It NEVER stretches into a full-width bar.
   · Badge, eyebrow, brush, headline, body all share ONE left gutter.
══════════════════════════════════════════ */
.ah .ah-section-label {
  font-family: var(--ah-display); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ah-ink);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
.ah .ah-section-label .num {
  flex: 0 0 auto;                            /* never stretches */
  width: 50px; height: 50px;                 /* guide spec: 50×50 */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ah-ink); color: var(--ah-paper);  /* WHITE numerals (Justino 7-02) */
  border-radius: var(--ah-radius);                    /* rounded 6px (Justino 7-02) */
  font-family: var(--ah-display); font-weight: 900;   /* numbering is UNIVERSAL SANS (Justino 7-02) */
  font-size: 20px; letter-spacing: .04em;
}
.ah .ah-section-label::after { content: ''; display: block; height: 1px; flex: 1; background: var(--ah-ink); }
.ah .ah-section-label--no-rule::after { display: none; }
.ah .ah-section-label .view-all {
  font-family: var(--ah-display); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ah-ink); text-decoration: none; white-space: nowrap;
}

/* Numbered variant */
.ah .ah-section-label--numbered {
  display: flex; align-items: center; gap: 18px;
  max-width: 1320px; margin: 80px auto 28px; padding: 0 40px;
  font-size: initial; letter-spacing: initial; text-transform: none; color: initial;
}
.ah .ah-section-label--numbered::after { display: none; }
.ah .ah-section-label__num {
  flex: 0 0 auto;
  background: var(--ah-ink); color: var(--ah-paper);  /* WHITE numerals (Justino 7-02) */
  font-family: var(--ah-display); font-weight: 900; font-size: 30px;  /* USD, not Trade Gothic */
  letter-spacing: .04em; padding: 10px 18px;
  border-radius: var(--ah-radius); line-height: 1;
}
.ah .ah-section-label__kicker {
  font-family: var(--ah-display); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ah-ink);
}
.ah .ah-section-label__kicker em { font-style: italic; color: var(--ah-muted); font-weight: 500; margin-left: 8px; }
.ah .ah-section-label__rule { flex: 1; border-top: 1.5px solid var(--ah-ink); }
.ah .ah-section-label__link {
  font-family: var(--ah-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ah-ink);
  border-bottom: 2px solid var(--ah-ink); padding-bottom: 2px;
}

/* ══════════════════════════════════════════
   TABLE
══════════════════════════════════════════ */
.ah .ah-table { width: 100%; border-collapse: collapse; border: 2px solid var(--ah-ink); font-size: 13px; }
.ah .ah-table thead tr { background: var(--ah-ink); color: var(--ah-yellow); }
.ah .ah-table thead th { padding: 12px 14px; text-align: left; font-family: var(--ah-body); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ah .ah-table tbody tr { border-bottom: 1px solid var(--ah-hairline); }
.ah .ah-table tbody tr:last-child { border-bottom: none; }
.ah .ah-table tbody td { padding: 13px 14px; vertical-align: top; }
.ah .ah-table tr.total { background: var(--ah-yellow); font-weight: 700; border-top: 2px solid var(--ah-ink); }
.ah .ah-table tr.total td { font-family: var(--ah-display); font-weight: 900; font-size: 16px; letter-spacing: .02em; }

/* ══════════════════════════════════════════
   CALLOUT — the sanctioned strong-emphasis block
══════════════════════════════════════════ */
.ah .ah-callout {
  background: var(--ah-ink); color: var(--ah-paper);
  padding: 24px 28px; border-left: 8px solid var(--ah-yellow);
  border-radius: 4px;
}
.ah .ah-callout strong {
  display: block; color: var(--ah-yellow); margin-bottom: 10px;
  font-family: var(--ah-body); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}

/* ══════════════════════════════════════════
   LISTS — orange dash bullet
══════════════════════════════════════════ */
.ah .ah-list { list-style: none; margin: 16px 0; padding: 0; }
.ah .ah-list li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--ah-hairline); position: relative; }
.ah .ah-list li:last-child { border-bottom: none; }
.ah .ah-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 14px; height: 2px; background: var(--ah-brand-orange); }

/* ══════════════════════════════════════════
   FORMS — field + dropzone
══════════════════════════════════════════ */
.ah .ah-field {
  width: 100%; border: none; border-bottom: 1.5px solid var(--ah-ink);
  background: transparent; padding: 6px 0 10px; font-family: var(--ah-body);
  font-size: 26px; font-weight: 700; color: var(--ah-ink); outline: none;
}
.ah .ah-field:focus { border-bottom-color: var(--ah-brand-orange); }
.ah .ah-field::placeholder { color: #bdbdbd; font-style: italic; font-weight: 500; }

.ah .ah-dropzone {
  border: 2px dashed var(--ah-yellow); border-radius: var(--ah-radius);
  padding: 60px 20px; text-align: center; background: var(--ah-paper-near);
  transition: all .2s var(--ah-ease); cursor: pointer;
}
.ah .ah-dropzone:hover, .ah .ah-dropzone.is-dragover { border-color: var(--ah-ink); transform: translateY(-1px); }

/* ══════════════════════════════════════════
   ANNOUNCE BAR — site-wide top strip
   ⚠ WHITE, not black (corrected 2026-07-02 per Justino + live site).
   Layout: orange-dot status left, yellow pill center, link right.
══════════════════════════════════════════ */
.ah .ah-announce {
  background: var(--ah-paper); color: var(--ah-ink);
  border-bottom: 1px solid var(--ah-hairline);
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 40px;
  font-family: var(--ah-display); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.ah .ah-announce__accent { color: var(--ah-brand-orange); }
.ah .ah-announce a { color: var(--ah-ink); text-decoration: none; }
.ah .ah-announce a:hover { color: var(--ah-brand-orange); }
.ah .ah-announce__dot { width: 6px; height: 6px; background: var(--ah-brand-orange); border-radius: 50%; display: inline-block; margin-right: 8px; }

/* ══════════════════════════════════════════
   INFO BAR
══════════════════════════════════════════ */
.ah .ah-info-bar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1.5px solid var(--ah-ink);
  border-bottom: 1.5px solid var(--ah-ink);
  background: var(--ah-paper);
}
.ah .ah-info-bar--dark { background: var(--ah-ink); color: var(--ah-paper); border-color: var(--ah-ink); }
.ah .ah-info-bar__item { padding: 18px 24px; border-right: 1px solid var(--ah-warm-grey-2); }
.ah .ah-info-bar--dark .ah-info-bar__item { border-right-color: rgba(255,255,255,.15); }
.ah .ah-info-bar__item:last-child { border-right: none; }
.ah .ah-info-bar__k { display: block; font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ah-muted); margin-bottom: 6px; }
.ah .ah-info-bar--dark .ah-info-bar__k { color: rgba(255,255,255,.55); }
.ah .ah-info-bar__v { font-family: var(--ah-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: .02em; line-height: 1; color: var(--ah-ink); }
.ah .ah-info-bar--dark .ah-info-bar__v { color: var(--ah-yellow); }
.ah .ah-info-bar__v em { font-style: italic; font-size: .6em; margin-left: 6px; letter-spacing: .1em; text-transform: uppercase; color: var(--ah-muted); }
.ah .ah-info-bar--dark .ah-info-bar__v em { color: var(--ah-paper); }
.ah .ah-info-bar--compact { padding: 14px 0; max-width: 540px; }
.ah .ah-info-bar--compact .ah-info-bar__item { padding: 0 24px; }
.ah .ah-info-bar--compact .ah-info-bar__item:first-child { padding-left: 0; }
.ah .ah-info-bar--compact .ah-info-bar__v { font-size: 22px; }

/* ── META CARD ── */
.ah .ah-meta-card { background: var(--ah-paper-2); padding: 16px 18px; border-radius: var(--ah-radius); border: 1px solid var(--ah-hairline); }
.ah .ah-meta-card__k { font-family: var(--ah-body); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ah-muted); margin-bottom: 6px; }
.ah .ah-meta-card__v { font-family: var(--ah-display); font-weight: 900; font-size: 22px; letter-spacing: .04em; color: var(--ah-ink); line-height: 1; }

/* ── CERTIFICATE OF AUTHENTICITY ── */
.ah .ah-coa {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: var(--ah-paper);
  border: 1.5px solid var(--ah-ink); border-radius: var(--ah-radius);
  position: relative;
}
.ah .ah-coa::before { content: ''; position: absolute; inset: 3px; border: 1px solid var(--ah-ink); border-radius: 3px; opacity: .35; pointer-events: none; }
.ah .ah-coa__badge { width: 64px; height: auto; flex-shrink: 0; position: relative; }
.ah .ah-coa__text { flex: 1; min-width: 0; position: relative; }
.ah .ah-coa__title { font-family: var(--ah-display); font-weight: 900; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; margin-bottom: 6px; color: var(--ah-ink); }
.ah .ah-coa__meta { font-family: var(--ah-body); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ah-muted); }

/* ── SEAL — rotated circular badge (stamp, not a button; ink depth
      allowed. Yellow-shadow token retired, so both variants sit on ink) ── */
.ah .ah-seal {
  width: 108px; height: 108px; border-radius: 50%;
  border: 2.5px solid var(--ah-ink); background: var(--ah-paper);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; font-family: var(--ah-display); font-weight: 900;
  letter-spacing: .05em; transform: rotate(-4deg);
  color: var(--ah-ink); box-shadow: 0 3px 0 var(--ah-ink);
}
.ah .ah-seal b { font-size: 18px; line-height: 1; display: block; }
.ah .ah-seal span { font-size: 9px; font-family: var(--ah-body); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; color: var(--ah-muted); padding: 0 10px; }
.ah .ah-seal--yellow { background: var(--ah-yellow); transform: rotate(5deg); box-shadow: 0 3px 0 var(--ah-ink); }
.ah .ah-seal--yellow span { color: var(--ah-ink); opacity: .7; }
.ah .ah-seal--art { padding: 0; background: transparent; border: none; box-shadow: none; overflow: hidden; }
.ah .ah-seal--art > img,
.ah .ah-seal--art > svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ── QUOTE — flavor-tinted pull quote (V2 flavor hexes) ── */
.ah .ah-quote { border-left: 4px solid var(--ah-ink); padding: 2px 0 2px 20px; margin: 0 0 10px; max-width: 520px; }
.ah .ah-quote[data-flavor="peach"] { border-left-color: var(--ah-flavor-peach); }
.ah .ah-quote[data-flavor="rasp"]  { border-left-color: var(--ah-flavor-raspberry); }
.ah .ah-quote[data-flavor="trop"]  { border-left-color: var(--ah-flavor-tropical); }
.ah .ah-quote[data-flavor="lemon"] { border-left-color: var(--ah-flavor-lemon-honey); }
.ah .ah-quote[data-flavor="mango"] { border-left-color: var(--ah-flavor-mango); }
.ah .ah-quote blockquote { font-family: var(--ah-display); font-weight: 900; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; margin: 0; color: var(--ah-ink); }
.ah .ah-quote cite { display: block; margin-top: 14px; font-family: var(--ah-body); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ah-muted); font-style: normal; }
.ah .ah-quote cite::before { content: '\2014\00a0'; }

/* ══════════════════════════════════════════
   STEPPER / PROCESS INDICATOR (guide Components)
   "Active step is filled in Accent Yellow; inactive steps sit on
   Hairline grey with Muted text." Numerals = condensed family.
══════════════════════════════════════════ */
.ah .ah-step {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ah-display); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ah-muted);
}
.ah .ah-step__num {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ah-hairline); color: var(--ah-muted);
  font-family: var(--ah-display); font-weight: 700; font-size: 12px;  /* numbering = USD (Justino ruling 2026-07-02) */
}
.ah .ah-step.is-active { color: var(--ah-ink); }
.ah .ah-step.is-active .ah-step__num { background: var(--ah-yellow); color: var(--ah-ink); }

/* ══════════════════════════════════════════
   SLIDER CONTROLS (guide Components)
   Translucent dark chip + 4px backdrop blur; active dot white 24px
   wide, inactive dots 10px at 45% white.
══════════════════════════════════════════ */
.ah .ah-slider-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--ah-slider-chip-bg);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff; font-family: var(--ah-display); font-weight: 700; font-size: 12px; letter-spacing: .12em;  /* USD, numbering ruling (7-02) */
}
.ah .ah-slider-dots { display: inline-flex; align-items: center; gap: 6px; }
.ah .ah-slider-dot { width: 10px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.45); }
.ah .ah-slider-dot.is-active { width: 24px; background: #fff; }

/* ══════════════════════════════════════════
   STICKERS / LABEL-STRIPE BADGES (guide Components "Badges & Stickers")
   "12px USD Extra Bold UPPER, +10% tracking, pill radius.
   Border = 1px Black for light fills."
   These are the section label stripes: LIMITED EDITIONS (yellow),
   COMMUNITY SERIES (cyan/turquoise), OPEN CALL (orange), HOUSE
   COLLECTION (ink), LOVED BY <artist> (accent pink/blue).
   NOTE: distinct from Trade Gothic chips (.ah-chip/.ah-tag) AND from
   the retired document brand-stripe. These are Tom's V2 web badges.
══════════════════════════════════════════ */
.ah .ah-sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--ah-display); font-weight: 800;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--ah-yellow); color: var(--ah-ink);
  border: 1px solid var(--ah-black-tea);   /* 1px black on light fills */
}
.ah .ah-sticker--community { background: var(--ah-accent-turquoise); }
.ah .ah-sticker--open-call { background: var(--ah-brand-orange); color: #fff; border-color: transparent; }
.ah .ah-sticker--house     { background: var(--ah-ink); color: #fff; border-color: transparent; }
.ah .ah-sticker--loved     { background: var(--ah-accent-pink); color: #fff; border-color: transparent; }

/* LTD chip over photography (guide "Chips & Badges"):
   slight transparency + 0.75px border to sit on imagery */
.ah .ah-ltd-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: var(--ah-radius-pill);
  background: rgba(255,255,255,.92); color: var(--ah-ink);
  border: .75px solid var(--ah-ink);
  font-family: var(--ah-font-chip); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}

/* ══════════════════════════════════════════
   PRODUCT CARDS — HOUSE COLLECTION (guide Components)
   Card backdrops use the CAN-CODED accents, not the flavor palette.
══════════════════════════════════════════ */
.ah .ah-product-bg[data-flavor="tropical"]    { background: var(--ah-accent-turquoise); }
.ah .ah-product-bg[data-flavor="lemon-honey"] { background: var(--ah-yellow); }
.ah .ah-product-bg[data-flavor="raspberry"]   { background: var(--ah-accent-pink); }
.ah .ah-product-bg[data-flavor="peach"]       { background: var(--ah-brand-orange); }
.ah .ah-product-bg[data-flavor="black-tea"]   { background: var(--ah-ink); }
.ah .ah-product-bg[data-flavor="sea-green"]   { background: var(--ah-accent-sea-green); }

/* Submission card: dashed Accent Yellow border = contributor action */
.ah .ah-submit-card {
  border: 2px dashed var(--ah-yellow); border-radius: var(--ah-radius);
  background: var(--ah-paper-near);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px; text-align: center;
  font-family: var(--ah-display); font-weight: 900; text-transform: uppercase;
}

/* ══════════════════════════════════════════
   LOGO RULES (guide "Logotype & Brand Marks")
   The Arthouse mark is a house symbol: a square framed by a 4px
   Black Tea border holding a centered glyph.
   · Use Ink #0A0A0A on light surfaces; White #FFFFFF reversed on Ink,
     Brand Orange, or photography with sufficient contrast.
   · NEVER recolor the mark in Accent Yellow, never drop the border
     frame, never apply effects (drop shadow, gradient, outline).
   Local assets:
     wordmark  01 Website/Web Assets/Arthouse typelogo.png
               (⚠ this PNG is the WHITE cut: use as-is on ink/photo,
                filter: invert(1) for ink-on-light; theme also has footer-wordmark.svg)
     A symbol  01 Website/Web Assets/A_bran symbolStencil 1.png
     LDE badge Design Assets/Logos/LDE_logo_blk.svg / LDE_logo_white.svg
     flavor icons  Design Assets/Flavor Icons/*.svg|png
══════════════════════════════════════════ */
.ah .ah-logo       { display: inline-block; }
.ah .ah-logo img   { display: block; height: 100%; width: auto; }
.ah .ah-logo--reversed { filter: invert(1); }  /* only over Ink/Brand Orange/photo per rules above */

/* ══════════════════════════════════════════
   IN THE WILD — treatments from Tom's page comps + the live site
   (mined 2026-07-02: Home comp 4463:20841 + drinkarthouse.com).
   These are patterns the style-guide frame doesn't list but the
   comps/live site use consistently.
══════════════════════════════════════════ */

/* Announce bar, live 3-part layout: left status w/ orange dot,
   CENTER YELLOW PILL headline, right link. Extends .ah-announce. */
.ah .ah-announce__pill {
  background: var(--ah-yellow); color: var(--ah-ink);
  padding: 3px 10px; border-radius: var(--ah-radius-pill);  /* 4px, NOT a full pill (Justino 7-02) */
  letter-spacing: .14em;
}

/* Hero brush sticker ("LIMITED EDITION" over photography):
   white brush + ink text + leading Brand Orange dot */
.ah .ah-eyebrow--brush .ah-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ah-brand-orange);
  display: inline-block; margin-right: 8px; flex: 0 0 auto;
}

/* ── THE BRAND HEART ──
   Canonical masked glyph (same treatment as the theme's .ah-heart in
   ah-acct.css): the ah-heart-yellow.png SHAPE cut as a mask, filled
   with currentColor. NEVER a unicode ♥ or emoji.
   Set the mask asset per surface:
     :root { --ah-heart-url: url('<path to ah-heart-yellow.png>'); }
   Theme source: assets/ah-heart-yellow.png. Color by context:
   yellow on ink, pink #FD0367 on account stats, ink on light chips. */
:root { --ah-heart-url: none; }
.ah .ah-heart {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.13em;
  background-color: currentColor;
  -webkit-mask: var(--ah-heart-url) center/contain no-repeat;
          mask: var(--ah-heart-url) center/contain no-repeat;
}

/* Love/heart count chip (gallery + product card footers).
   Copy rule: hearts, never votes. */
.ah .ah-love {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ah-paper); border: 1px solid var(--ah-hairline);
  border-radius: 999px; padding: 4px 12px;
  font-family: var(--ah-display); font-weight: 700; font-size: 12px;
  color: var(--ah-ink);
}
.ah .ah-love .ah-heart { color: var(--ah-ink); }

/* Display accent span: Brand Orange word inside an ink display
   headline ("LOVE." callouts). Sparingly, per the color rules. */
.ah .ah-display-accent { color: var(--ah-brand-orange); }

/* THE DROP newsletter band (live): red-orange field over the flavor
   doodle pattern, ink chip above the headline, email row, brush/rip
   edges top+bottom. Pattern goes in via .ah-house-pattern--img. */
.ah .ah-drop-band {
  position: relative; overflow: hidden;
  background: var(--ah-red);
  color: var(--ah-ink);
  text-align: center;
  padding: 72px 24px;
}
/* Eyebrow above the Drop headline is a BRUSH sticker, not a pill
   (corrected 7-02): black brush asset behind live USD Bold type.
   Theme asset: home-next-drop-eyebrow-brush.svg. Set per surface:
     style="--ah-brush-eyebrow:url('<path to drop brush svg>')" */
.ah .ah-drop-band__chip {
  display: inline-flex; align-items: center; justify-content: center;
  background-image: var(--ah-brush-eyebrow);
  background-size: 100% 100%; background-repeat: no-repeat;
  color: var(--ah-ink);  /* theme brush asset (home-next-drop-eyebrow-brush.svg) is WHITE; ink type on it */
  font-family: var(--ah-display); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 22px; margin-bottom: 14px;
}
.ah .ah-input {
  background: var(--ah-paper); color: var(--ah-ink);
  border: 1px solid var(--ah-hairline); border-radius: var(--ah-radius);
  padding: 14px 18px; font-family: var(--ah-body); font-size: 14px;
  outline: none; min-width: 240px;
}
.ah .ah-input:focus { border-color: var(--ah-ink); }

/* Rip-paper divider (LTD artist + House Collection comps):
   full-width transition strip between bands. Use the real rip assets. */
.ah .ah-rip-divider {
  display: block; width: 100%; height: auto;
  margin: 0; line-height: 0;
}

/* Artist quote band ("Section-Quote" frames, e.g. node 4463:582).
   CORRECTED 2026-07-02 to Tom's actual node:
   · Background is the artist's can red #FF260F (per-artist accent, NOT
     Brand Orange), with rip-paper edges top and bottom (markup imgs).
   · ALL TYPE IS INK, not white.
   · Left: 140px circle avatar (paper-2 fill, hairline ring) + brush
     location sticker + artist name (USD Black 46, ink).
   · Right: 5-star row + quote (USD BOLD 36/40, +0.4px, ink, sentence
     case) + attribution (USD Bold 20, upper, +1.54, ink).
   · Corner chips: translucent LTD tag left + "QUOTE" tag right
     (existing .ah-ltd-chip treatment).
   · Bottom center: bordered pager pill. */
.ah .ah-quote-band {
  position: relative;
  background: #FF260F;   /* Nora band value; per-artist accent, verify per comp */
  color: var(--ah-ink);
  padding: 64px 40px;
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
}
.ah .ah-quote-band__who {
  display: flex; flex-direction: column; gap: 10px; flex: 0 0 220px;
}
.ah .ah-quote-band__who .ah-avatar { width: 140px; height: 140px; background: var(--ah-paper-2); border: 2.5px solid var(--ah-hairline); }
.ah .ah-quote-band__name {
  font-family: var(--ah-display); font-weight: 900; font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.12; letter-spacing: -.01em; text-transform: uppercase;
}
.ah .ah-quote-band__q { flex: 1; min-width: 280px; }
.ah .ah-quote-band__stars { font-size: 15px; letter-spacing: 3px; margin-bottom: 10px; }
.ah .ah-quote-band blockquote {
  font-family: var(--ah-display); font-weight: 700;   /* Bold, not Black */
  font-size: clamp(22px, 2.5vw, 36px); line-height: 40px; letter-spacing: 0.4px;
  margin: 0; text-transform: none;
}
.ah .ah-quote-band cite {
  display: block; margin-top: 22px; font-style: normal;
  font-family: var(--ah-display); font-weight: 700; font-size: 20px;
  letter-spacing: 1.54px; text-transform: uppercase;
}

/* Quote band, yellow variant (About comp testimonial): same structure */
.ah .ah-quote-band--yellow { background: var(--ah-yellow); }

/* Countdown band (Gallery comp): black header strip + Tropical cyan
   field, giant USD Black numerals, tiny uppercase unit labels */
.ah .ah-countdown { text-align: center; }
.ah .ah-countdown__head {
  background: var(--ah-ink); color: var(--ah-paper);
  font-family: var(--ah-display); font-weight: 700; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; padding: 8px 16px;
}
.ah .ah-countdown__field {
  background: var(--ah-flavor-tropical); color: var(--ah-ink);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 28px 16px; gap: 8px;
}
.ah .ah-countdown__num { font-family: var(--ah-display); font-weight: 900; font-size: clamp(36px, 5vw, 64px); line-height: 1; }
.ah .ah-countdown__unit { font-family: var(--ah-display); font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-top: 6px; }

/* FAQ accordion (About + Gallery comps): ink band, yellow QUESTIONS?
   display, numbered rows (numbering = USD per ruling), hairline rules,
   yellow chevron/number accents */
.ah .ah-faq { background: var(--ah-ink); color: var(--ah-paper); padding: 56px 40px; }
.ah .ah-faq__title { font-family: var(--ah-display); font-weight: 900; font-size: var(--ah-text-display-md-size); line-height: 1; text-transform: uppercase; color: var(--ah-yellow); margin: 0 0 24px; }
.ah .ah-faq__row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16);
  font-family: var(--ah-body); font-size: 15px; cursor: pointer;
}
.ah .ah-faq__num { font-family: var(--ah-display); font-weight: 700; font-size: 10px; letter-spacing: .1em; color: var(--ah-yellow); flex: 0 0 auto; }
.ah .ah-faq__row::after { content: '›'; margin-left: auto; color: var(--ah-yellow); transform: rotate(90deg); font-size: 18px; }

/* COA strip (LTD artist product band): Accent Yellow strip,
   ink uppercase copy + Arthouse seal. Companion to the bordered .ah-coa card. */
.ah .ah-coa--strip {
  display: flex; align-items: center; gap: 16px;
  background: var(--ah-yellow); color: var(--ah-ink);
  border: none; border-radius: var(--ah-radius);
  padding: 12px 18px;
  font-family: var(--ah-display); font-weight: 800; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}
.ah .ah-coa--strip::before { display: none; }
.ah .ah-coa--strip img { width: 42px; flex-shrink: 0; }

/* Flavor band (House Collection): full-bleed flavor-pattern background,
   flavor sticker, display headline, ingredient bullets, ink CTA, cans.
   Set the pattern via .ah-house-pattern--img inside; dark variant for
   Black Tea. Rip dividers seat the transitions. */
.ah .ah-flavor-band { position: relative; overflow: hidden; padding: 72px 40px; color: var(--ah-ink); }
.ah .ah-flavor-band--dark { color: var(--ah-paper); }

/* Full-width card CTA (cross-sell cards: "SEE THE SERIES") */
.ah .ah-btn--block { width: 100%; justify-content: center; }

/* Drop band, yellow variant (LTD artist + House Collection:
   "DON'T MISS THE NEXT DROP") */
.ah .ah-drop-band--yellow { background: var(--ah-yellow); }

/* Slider dots on LIGHT surfaces (live product carousels):
   ink active bar, grey inactive */
.ah .ah-slider-dot--ink { background: var(--ah-line-strong); }
.ah .ah-slider-dot--ink.is-active { background: var(--ah-ink); }

/* Footer wordmark band (live): giant ink wordmark on the light
   paper/wood texture, hairline rule, USD link columns. Texture via
   the Pattern Texture assets; wordmark asset is the white cut, so
   invert for this band. */
.ah .ah-footer-band {
  background: var(--ah-paper-2);
  padding: 56px 40px 32px;
  border-top: 1px solid var(--ah-hairline);
}
.ah .ah-footer-band .ah-logo { height: 64px; }

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
  .ah .ah-brand-stripe { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   GLOBAL BASE OVERRIDES — applied via <body class="ah">
══════════════════════════════════════════════════════════════════ */
body.ah {
  font-family: var(--ah-body);
  color: var(--ah-ink);
  -webkit-font-smoothing: antialiased;
}
body.ah h1,
body.ah h2,
body.ah h3,
body.ah h4,
body.ah h5 {
  font-family: var(--ah-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
}
body.ah a { color: var(--ah-ink); }
body.ah .btn,
body.ah .shopify-payment-button button {
  font-family: var(--ah-display);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--ah-radius);
  box-shadow: none;
}