/* =========================================================================
   ALTONWEAR — bespoke case-study theme
   Vintage screen-print / band-merch "drop zine".
   Bone paper + warm ink · rope gold · washed sky · faded print red.
   Scoped under body.alton.
   ========================================================================= */
.alton{
  --bone:#ECE4D2;
  --bone-2:#E4DAC2;
  --ink:#1A1613;
  --ink-soft:#4A4339;
  --gold:#EEBB2E;   /* vintage yellow — secondary pop (solid fills) */
  --sky:#2E6CB0;    /* denim blue — primary accent */
  --red:#2E6CB0;    /* folded into blue */
  --cream:#F7F2E7;
  --line:rgba(26,22,19,0.16);
  --line-2:rgba(26,22,19,0.08);

  --aw-mega: clamp(3.4rem, 14vw, 14rem);
  --aw-huge: clamp(2.6rem, 8vw, 7.5rem);
  --aw-big:  clamp(2rem, 4.6vw, 4.2rem);

  background:var(--bone);
  color:var(--ink);
  cursor:auto;
}
.alton ::selection{ background:var(--ink); color:var(--cream); }

.aw-display{ font-family:var(--sans); font-weight:900; text-transform:uppercase; line-height:0.84; letter-spacing:-0.035em; text-wrap:balance; }
.aw-skew{ display:inline-block; transform:skewX(-5deg); }
.aw-mono{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; }

/* ---------- screen-print grain + halftone ---------- */
.alton .exp-grain{ opacity:0.07; mix-blend-mode:multiply; }
.aw-halftone{ position:fixed; inset:0; z-index:55; pointer-events:none; opacity:0.05;
  background-image:radial-gradient(var(--ink) 1px, transparent 1.4px); background-size:5px 5px; mix-blend-mode:multiply; }
@media (prefers-reduced-motion: reduce){ .aw-halftone{ display:none; } }

/* ---------- shared-chrome retheme ---------- */
.alton .exp-progress{ background:var(--ink); height:4px; }
.alton .exp-veil{ background:var(--ink); color:var(--gold); }
.alton .exp-ambient{ display:none; }
.alton .nav::before{ opacity:1 !important; background:color-mix(in srgb,var(--bone) 84%, transparent); border-bottom-color:var(--line); }

.aw-section{ padding-block:clamp(4rem,9vw,8.5rem); position:relative; }
.alton .wrap{ position:relative; z-index:2; }

/* =====================================================================
   HERO
   ===================================================================== */
.aw-hero{ position:relative; padding-top:clamp(7rem,13vh,10rem); overflow:hidden; }
.aw-hero__inner{ padding-inline:var(--mx); max-width:var(--maxw); margin-inline:auto; position:relative; z-index:2; }
.aw-hero__eyebrow{ display:inline-flex; align-items:center; gap:0.7em; font-family:var(--mono); font-size:clamp(0.7rem,1vw,0.82rem); letter-spacing:0.22em; text-transform:uppercase; color:var(--red); }
.aw-hero__eyebrow::before{ content:""; width:clamp(20px,4vw,46px); height:2px; background:currentColor; }
.aw-hero__title{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:var(--aw-mega); line-height:0.8; letter-spacing:-0.04em; margin-top:0.25em; }
.aw-hero__title .star{ color:var(--sky); }
.aw-hero__row{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,3rem); align-items:flex-end; justify-content:space-between; margin-top:clamp(1.4rem,3vw,2.4rem); }
.aw-hero__tag{ font-family:var(--sans); font-weight:600; font-size:clamp(1.1rem,1.8vw,1.5rem); max-width:24ch; line-height:1.15; }
.aw-hero__tag em{ font-style:italic; color:var(--sky); }
.aw-hero__cta{ display:inline-flex; gap:0.8rem; flex-wrap:wrap; }

/* floating-tees band */
.aw-band{ position:relative; margin-top:clamp(2.5rem,5vw,4rem); overflow:hidden; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); aspect-ratio:2200/1238; background:#cdd5dc url("../assets/altonwear/hero-20tees-rgb.png") center/cover no-repeat; }
.aw-band__price{ position:absolute; top:clamp(1rem,2.5vw,2rem); left:50%; transform:translateX(-50%); z-index:3; font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(0.7rem,1vw,0.9rem); letter-spacing:0.2em; background:var(--gold); color:var(--ink); padding:0.5em 1.1em; border:2px solid var(--ink); border-radius:100px; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.aw-btn{ display:inline-flex; align-items:center; gap:0.5em; font-family:var(--sans); font-weight:800; text-transform:uppercase; font-size:0.84rem; letter-spacing:0.04em; padding:1em 1.6em; border-radius:0; background:var(--ink); color:var(--cream); border:2px solid var(--ink); box-shadow:5px 5px 0 rgba(26,22,19,0.25); transition:transform 0.16s var(--ease), box-shadow 0.16s var(--ease); }
.aw-btn:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(26,22,19,0.3); }
.aw-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(26,22,19,0.3); }
.aw-btn--ghost{ background:transparent; color:var(--ink); box-shadow:5px 5px 0 rgba(26,22,19,0.12); }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.aw-marquee{ overflow:hidden; display:flex; background:var(--ink); color:var(--cream); padding-block:clamp(0.7rem,1.4vw,1.1rem); }
.aw-marquee__track{ display:flex; flex:none; align-items:center; white-space:nowrap; }
.alton.aw-motion .aw-marquee__track{ animation: aw-scroll 32s linear infinite; }
.aw-marquee--rev .aw-marquee__track{ animation-direction:reverse; }
.aw-marquee:hover .aw-marquee__track{ animation-play-state:paused; }
@keyframes aw-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.aw-mq{ display:inline-flex; align-items:center; gap:0.6em; font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(1.1rem,2.4vw,2rem); letter-spacing:-0.01em; padding:0 0.55em; }
.aw-mq .star{ color:var(--gold); font-size:0.8em; }

/* =====================================================================
   RECEIPTS (results)
   ===================================================================== */
.aw-eyebrow{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.8rem,3vw,2.8rem); }
.aw-eyebrow .t{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); font-weight:600; white-space:nowrap; }
.aw-eyebrow .ln{ flex:1; height:2px; background:var(--ink); }
.aw-eyebrow .n{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-soft); }

.aw-receipts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
@media (max-width:760px){ .aw-receipts{ grid-template-columns:1fr; } }
.aw-receipt{ border:2px solid var(--ink); background:var(--cream); padding:clamp(1.4rem,2.6vw,2.2rem); box-shadow:6px 6px 0 var(--ink); position:relative; overflow:hidden; }
.aw-receipt .n{ font-family:var(--sans); font-weight:900; font-size:clamp(2.8rem,6vw,5.2rem); line-height:0.85; letter-spacing:-0.04em; }
.aw-receipt .c{ display:block; margin-top:0.9rem; font-family:var(--sans); font-weight:500; font-size:0.95rem; line-height:1.35; color:var(--ink-soft); max-width:24ch; }
.aw-receipt::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:repeating-linear-gradient(90deg,var(--ink) 0 8px,transparent 8px 14px); opacity:0.4; }

/* =====================================================================
   STATEMENT
   ===================================================================== */
.aw-statement{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:var(--aw-huge); line-height:0.88; letter-spacing:-0.035em; text-wrap:balance; }
.aw-statement em{ font-style:italic; color:var(--sky); }
.aw-statement .red{ color:var(--red); font-style:normal; }
.aw-lead{ font-family:var(--sans); font-weight:500; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; color:var(--ink-soft); max-width:52ch; }

/* trio cards */
.aw-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); }
@media (max-width:820px){ .aw-trio{ grid-template-columns:1fr; } }
.aw-cell{ border-top:3px solid var(--ink); padding-top:1.3rem; }
.aw-cell .lab{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); }
.aw-cell h3{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem,2.2vw,2rem); line-height:0.95; letter-spacing:-0.02em; margin:0.7rem 0 0.6rem; }
.aw-cell p{ font-family:var(--sans); font-weight:500; font-size:0.96rem; line-height:1.45; color:var(--ink-soft); max-width:32ch; }

/* =====================================================================
   THE WALL — graphic tee cards
   ===================================================================== */
.aw-wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem); }
@media (max-width:820px){ .aw-wall{ grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
.aw-graphic{ position:relative; border:2px solid var(--ink); background:var(--cream); box-shadow:7px 7px 0 var(--ink); overflow:hidden; transition:transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.aw-graphic:hover{ transform:translate(-3px,-3px); box-shadow:11px 11px 0 var(--ink); }
.aw-graphic__img{ aspect-ratio:1; overflow:hidden; }
.aw-graphic__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.8s var(--ease); }
.aw-graphic:hover .aw-graphic__img img{ transform:scale(1.06); }
.aw-graphic__foot{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:0.9rem 1.1rem; border-top:2px solid var(--ink); }
.aw-graphic__foot .nm{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(0.92rem,1.4vw,1.15rem); letter-spacing:-0.01em; line-height:1; }
.aw-tag{ font-family:var(--sans); font-weight:900; font-size:0.78rem; background:var(--gold); color:var(--ink); border:2px solid var(--ink); border-radius:100px; padding:0.3em 0.7em; transform:rotate(-4deg); white-space:nowrap; }

/* full range strip */
.aw-range{ border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); overflow:hidden; background:#fff; }
.aw-range img{ width:100%; height:auto; display:block; }

/* =====================================================================
   BRAND BAND
   ===================================================================== */
.aw-brandband{ background:var(--ink); color:var(--cream); text-align:center; overflow:hidden; position:relative; }
.aw-brandband__logo{ width:clamp(180px,26vw,340px); height:auto; margin:0 auto clamp(1.6rem,3vw,2.6rem); display:block; }
.aw-brandband .aw-display{ font-size:var(--aw-big); }
.aw-brandband .aw-display em{ font-style:italic; color:var(--gold); }

/* =====================================================================
   GROWTH
   ===================================================================== */
.aw-growth{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .aw-growth{ grid-template-columns:1fr; } }
.aw-growth__img{ border:2px solid var(--ink); box-shadow:7px 7px 0 var(--ink); overflow:hidden; order:2; }
.aw-growth__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.aw-growth h2{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:var(--aw-big); line-height:0.9; letter-spacing:-0.03em; }
.aw-growth h2 em{ font-style:italic; color:var(--sky); }
.aw-growth p{ font-family:var(--sans); font-weight:500; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.5; color:var(--ink-soft); max-width:40ch; margin-top:1.2rem; }

/* =====================================================================
   FINALE
   ===================================================================== */
.aw-finale{ background:var(--sky); color:var(--cream); text-align:center; position:relative; overflow:hidden; }
.aw-finale .aw-display{ font-size:var(--aw-mega); }
.aw-finale .aw-display em{ font-style:italic; color:var(--gold); }
.aw-finale__cta{ margin-top:clamp(2rem,4vw,3rem); display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* next project */
.alton .nextproj{ border-top:2px solid var(--ink); padding-block:clamp(3rem,6vw,5rem); }
.alton .nextproj .label{ display:block; margin-bottom:0.8rem; color:var(--red); }
.alton .nextproj .big{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:var(--aw-big); line-height:0.95; letter-spacing:-0.03em; color:var(--ink); display:inline-flex; align-items:center; gap:0.4em; }
.alton .nextproj a:hover .big{ color:var(--gold); opacity:1; }
.alton .nextproj a:hover .big .arr{ transform:translateX(10px); }
.alton .nextproj .big .arr{ transition:transform 0.4s var(--ease); }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .alton [data-pop]{ opacity:0; transform:translateY(34px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay:var(--d,0ms); }
  .alton [data-pop].is-in{ opacity:1; transform:none; }
}
@media (max-width:600px){ .alton{ --aw-mega:clamp(3rem,17vw,5.5rem); --aw-huge:clamp(2.4rem,12vw,4rem); } }