/* =========================================================================
   ATHENS ARCHIVE — bespoke case-study theme
   Blue #415FAC · Gold #FECC4C · doodle / sticker-culture energy.
   Scoped under body.athens so it never leaks to other pages.
   ========================================================================= */
.athens{
  --aa-blue:#415FAC;
  --aa-blue-deep:#36508F;
  --aa-blue-ink:#22356B;
  --aa-gold:#FECC4C;
  --aa-gold-deep:#F4B82E;
  --aa-cream:#FFF7E4;
  --aa-ink:#1C2444;

  --aa-mega: clamp(2.6rem, 9vw, 8.5rem);
  --aa-huge: clamp(2.6rem, 8.5vw, 8rem);
  --aa-big:  clamp(2rem, 5vw, 4.4rem);

  background:var(--aa-cream);
  color:var(--aa-ink);
  cursor:auto;
}
.athens ::selection{ background:var(--aa-gold); color:var(--aa-blue-ink); }

/* heavy display family already loaded site-wide (Schibsted Grotesk 400..900) */
.aa-display{
  font-family:var(--sans);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.86;
  letter-spacing:-0.035em;
  text-wrap:balance;
}
.aa-kicker{
  font-family:var(--mono);
  font-size:0.74rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
}

/* ---------- shared-chrome retheme ---------- */
.athens .exp-grain{ display:none !important; }
.athens .exp-progress{ background:var(--aa-gold); height:4px; }
.athens .exp-veil{ background:var(--aa-blue); color:var(--aa-gold); }
.athens .exp-veil__mark{ filter:none; }
.athens .exp-ambient{ display:none; }
/* nav always legible: force the paper backing on */
.athens .nav::before{ opacity:1 !important; }

/* ---------- layout helpers ---------- */
.aa-section{ padding-block: clamp(4rem, 10vw, 9rem); position:relative; }
.aa-bleed{ width:100%; position:relative; overflow:hidden; }
.athens .wrap{ position:relative; z-index:2; }

/* =====================================================================
   MARQUEE
   ===================================================================== */
.aa-marquee{ overflow:hidden; display:flex; width:100%; user-select:none; }
.aa-marquee__track{
  display:flex; flex:none; align-items:center; white-space:nowrap;
  will-change:transform;
}
.athens.aa-motion .aa-marquee__track{ animation: aa-scroll var(--dur,34s) linear infinite; }
.athens.aa-motion .aa-marquee--rev .aa-marquee__track{ animation-direction:reverse; }
.aa-marquee:hover .aa-marquee__track{ animation-play-state:paused; }
@keyframes aa-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.aa-mq-item{
  font-family:var(--sans); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.6rem,4.6vw,3.6rem); letter-spacing:-0.02em;
  padding:0 0.5em; display:inline-flex; align-items:center;
}
.aa-mq-star{ width:clamp(26px,4vw,52px); height:clamp(26px,4vw,52px); flex:none; margin:0 0.35em; }
.aa-marquee--band{ padding-block:clamp(0.7rem,1.4vw,1.1rem); }
.aa-marquee--gold{ background:var(--aa-gold); color:var(--aa-blue-ink); }
.aa-marquee--blue{ background:var(--aa-blue); color:var(--aa-gold); }
.aa-marquee--outline .aa-mq-item{ -webkit-text-stroke:2px currentColor; color:transparent; }

/* =====================================================================
   HERO
   ===================================================================== */
.aa-hero{
  background:var(--aa-blue);
  color:var(--aa-cream);
  min-height:100svh;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  padding-top: clamp(5rem, 9vh, 7rem);
}
.aa-hero__stage{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: clamp(1.5rem,4vw,3rem) var(--mx); position:relative; z-index:3;
  gap: clamp(1rem,2.4vw,2rem);
}
.aa-hero__eyebrow{
  display:inline-flex; align-items:center; gap:0.8em;
  color:var(--aa-gold);
  font-family:var(--mono); font-size:clamp(0.7rem,1vw,0.82rem);
  letter-spacing:0.28em; text-transform:uppercase;
}
.aa-hero__eyebrow::before,.aa-hero__eyebrow::after{ content:""; width:clamp(20px,4vw,52px); height:2px; background:currentColor; }
.aa-hero__mark{
  width:min(86vw, 1040px); height:auto; display:block;
  filter: drop-shadow(0 18px 0 rgba(34,53,107,0.35));
}
.aa-hero__sub{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(1rem,1.7vw,1.35rem); letter-spacing:-0.01em;
  max-width:30ch; color:var(--aa-cream);
}
.aa-hero__cta{ display:inline-flex; gap:0.9rem; flex-wrap:wrap; justify-content:center; margin-top:0.4rem; }

/* the waving badge */
.aa-badge{
  position:relative; flex:none;
  width:clamp(96px,13vw,168px); aspect-ratio:1; border-radius:50%;
  background:var(--aa-gold);
  display:grid; place-items:center;
  box-shadow: 0 14px 0 rgba(34,53,107,0.32);
}
.aa-badge img{ width:74%; height:74%; object-fit:contain; transform-origin:50% 86%; }
.athens.aa-motion .aa-badge img{ animation: aa-wave 2.4s ease-in-out infinite; }
@keyframes aa-wave{ 0%,100%{transform:rotate(-5deg) translateY(0)} 25%{transform:rotate(5deg) translateY(-4px)} 50%{transform:rotate(-3deg) translateY(0)} 75%{transform:rotate(4deg) translateY(-3px)} }

/* floating stickers in hero bg */
.aa-float{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.aa-float .aa-chip{
  position:absolute; width:var(--s,84px); aspect-ratio:1; border-radius:50%;
  background:var(--aa-gold); display:grid; place-items:center; opacity:0.92;
  will-change:transform;
}
.aa-float .aa-chip img{ width:72%; height:72%; object-fit:contain; }
.aa-float .aa-chip--ring{ background:transparent; border:3px dashed rgba(255,247,228,0.4); }
.athens.aa-motion .aa-float .aa-chip{ animation: aa-bob var(--d,6s) ease-in-out infinite; }
@keyframes aa-bob{ 0%,100%{transform:translateY(0) rotate(var(--r,0deg))} 50%{transform:translateY(-18px) rotate(calc(var(--r,0deg) + 6deg))} }

.aa-scrollcue{
  position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--aa-cream); display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.athens.aa-motion .aa-scrollcue .dot{ animation: aa-drop 1.6s ease-in-out infinite; }
@keyframes aa-drop{ 0%,100%{transform:translateY(0); opacity:0.4} 50%{transform:translateY(7px); opacity:1} }
.aa-scrollcue .dot{ width:7px; height:7px; border-radius:50%; background:var(--aa-gold); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.aa-btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  font-size:0.86rem; letter-spacing:0.02em;
  padding:1em 1.7em; border-radius:999px;
  background:var(--aa-gold); color:var(--aa-blue-ink);
  border:2px solid var(--aa-blue-ink);
  box-shadow:0 5px 0 var(--aa-blue-ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.3s;
  will-change:transform;
}
.aa-btn:hover{ transform:translateY(-2px) rotate(-1.4deg); box-shadow:0 8px 0 var(--aa-blue-ink); }
.aa-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--aa-blue-ink); }
.aa-btn--ghost{ background:transparent; color:var(--aa-cream); border-color:var(--aa-cream); box-shadow:0 5px 0 rgba(255,247,228,0.5); }
.aa-btn--ghost:hover{ box-shadow:0 8px 0 rgba(255,247,228,0.5); }
.aa-btn--blue{ background:var(--aa-blue); color:var(--aa-cream); border-color:var(--aa-blue-ink); box-shadow:0 5px 0 var(--aa-blue-ink); }

/* =====================================================================
   SECTION TYPE
   ===================================================================== */
.aa-eyebrow{
  display:flex; align-items:center; gap:1rem; margin-bottom:clamp(1.6rem,3vw,2.6rem);
}
.aa-eyebrow .t{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--aa-blue); font-weight:600; }
.aa-eyebrow .ln{ flex:1; height:3px; background:var(--aa-ink); border-radius:3px; transform-origin:left; }
.athens [data-reveal].is-in .aa-eyebrow .ln,
.aa-eyebrow.is-in .ln{ }

/* big statement, two-tone */
.aa-statement{ font-family:var(--sans); font-weight:900; text-transform:uppercase; line-height:0.9; letter-spacing:-0.035em; }
.aa-statement em{ font-style:normal; color:var(--aa-blue); }
.aa-statement .u{ color:var(--aa-gold-deep); -webkit-text-stroke:2px var(--aa-blue-ink); paint-order:stroke fill; }

/* =====================================================================
   INSIGHT (gold panel)
   ===================================================================== */
.aa-insight{ background:var(--aa-gold); color:var(--aa-blue-ink); text-align:center; }
.aa-insight .aa-statement{ font-size:var(--aa-huge); }
.aa-insight em{ color:var(--aa-cream); -webkit-text-stroke:2px var(--aa-blue-ink); paint-order:stroke fill; }
.aa-insight p{ font-family:var(--sans); font-weight:600; font-size:clamp(1rem,1.6vw,1.3rem); max-width:46ch; margin:clamp(1.6rem,3vw,2.4rem) auto 0; }

/* =====================================================================
   STICKER CARDS (brief trio)
   ===================================================================== */
.aa-stickers{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
.aa-sticker{
  background:var(--aa-cream); border:3px solid var(--aa-blue-ink); border-radius:18px;
  padding:clamp(1.4rem,2.4vw,2.2rem); position:relative;
  box-shadow:8px 8px 0 var(--aa-blue-ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.aa-sticker:nth-child(1){ transform:rotate(-2deg); }
.aa-sticker:nth-child(2){ transform:rotate(1.4deg); }
.aa-sticker:nth-child(3){ transform:rotate(-1deg); }
.aa-sticker:hover{ transform:rotate(0) translateY(-6px) scale(1.02); box-shadow:12px 14px 0 var(--aa-blue-ink); }
.aa-sticker__n{
  position:absolute; top:-22px; left:-14px; width:48px; height:48px; border-radius:50%;
  background:var(--aa-gold); border:3px solid var(--aa-blue-ink); display:grid; place-items:center;
  font-family:var(--sans); font-weight:900; font-size:1.1rem; color:var(--aa-blue-ink);
}
.aa-sticker .lab{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--aa-blue); }
.aa-sticker h3{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(1.3rem,2vw,1.8rem); line-height:0.95; letter-spacing:-0.02em; margin:0.7rem 0 0.7rem; }
.aa-sticker p{ font-family:var(--sans); font-weight:500; font-size:0.98rem; line-height:1.45; color:#3a4068; }
@media (max-width:820px){ .aa-stickers{ grid-template-columns:1fr; } .aa-sticker{ transform:rotate(0)!important; } }

/* =====================================================================
   COLOR + IDENTITY
   ===================================================================== */
.aa-colors{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.6rem); }
.aa-swatch{ border-radius:16px; border:3px solid var(--aa-blue-ink); padding:clamp(1.4rem,3vw,2.4rem); min-height:clamp(170px,26vw,300px); display:flex; flex-direction:column; justify-content:space-between; }
.aa-swatch .h{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(1.2rem,2vw,1.8rem); letter-spacing:-0.02em; }
.aa-swatch .hex{ font-family:var(--mono); font-size:0.82rem; letter-spacing:0.08em; }
.aa-swatch--blue{ background:var(--aa-blue); color:var(--aa-cream); }
.aa-swatch--gold{ background:var(--aa-gold); color:var(--aa-blue-ink); }
.aa-swatch--mini{ min-height:0; flex-direction:row; align-items:center; justify-content:space-between; }
.aa-swatch--cream{ background:var(--aa-cream); color:var(--aa-blue-ink); }
.aa-swatch--ink{ background:var(--aa-ink); color:var(--aa-cream); }
.aa-mini-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.6rem); margin-top:clamp(1rem,2vw,1.6rem); }

.aa-card{ border:3px solid var(--aa-blue-ink); border-radius:18px; overflow:hidden; background:var(--aa-cream); box-shadow:8px 8px 0 var(--aa-blue-ink); }
.aa-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.aa-cap{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--aa-blue); margin-top:0.8rem; }

.aa-meet{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.aa-meet__art{ background:var(--aa-gold); border:3px solid var(--aa-blue-ink); border-radius:24px; aspect-ratio:1; display:grid; place-items:center; box-shadow:10px 10px 0 var(--aa-blue-ink); position:relative; overflow:hidden; }
.aa-meet__art img{ width:78%; height:78%; object-fit:contain; position:relative; z-index:2; }
.athens.aa-motion .aa-meet__art img{ animation: aa-wave 3s ease-in-out infinite; transform-origin:50% 88%; }
.aa-meet h2{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:var(--aa-big); line-height:0.9; letter-spacing:-0.03em; }
.aa-meet p{ font-family:var(--sans); font-weight:500; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.5; max-width:42ch; margin-top:1.2rem; color:#3a4068; }
@media (max-width:820px){ .aa-meet{ grid-template-columns:1fr; } .aa-colors{ grid-template-columns:1fr 1fr; } }

/* =====================================================================
   PATTERN BAND
   ===================================================================== */
.aa-pattern{
  min-height:clamp(360px,60vh,640px);
  background-image:url("../assets/athens/pattern-blue.png");
  background-size:clamp(360px,38vw,560px);
  background-repeat:repeat;
  display:grid; place-items:center; position:relative;
}
.aa-pattern::after{ content:""; position:absolute; inset:0; background:radial-gradient(closest-side, rgba(65,95,172,0) 40%, rgba(54,80,143,0.55)); }
.aa-pattern__label{ position:relative; z-index:2; text-align:center; }
.aa-pattern__label .aa-display{ color:var(--aa-gold); font-size:var(--aa-huge); -webkit-text-stroke:3px var(--aa-blue-ink); paint-order:stroke fill; }
.aa-pattern__label .sub{ display:inline-block; font-family:var(--mono); letter-spacing:0.18em; text-transform:uppercase; color:var(--aa-cream); font-size:0.8rem; margin-top:1.4rem; background:var(--aa-blue-ink); padding:0.7em 1.3em; border-radius:999px; box-shadow:0 4px 0 rgba(28,36,68,0.35); }

/* =====================================================================
   COLLECTION (product panels)
   ===================================================================== */
.aa-drops{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); }
.aa-drop{ border:3px solid var(--aa-blue-ink); border-radius:20px; overflow:hidden; background:#fff; box-shadow:8px 8px 0 var(--aa-blue-ink); }
.aa-drop__img{ aspect-ratio:16/11; overflow:hidden; background:#f3f1ea; }
.aa-drop__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.7s var(--ease); }
.aa-drop:hover .aa-drop__img img{ transform:scale(1.04); }
.aa-drop__meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.4rem; border-top:3px solid var(--aa-blue-ink); }
.aa-drop__meta .nm{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(1.05rem,1.6vw,1.4rem); letter-spacing:-0.02em; }
.aa-drop__meta .px{ font-family:var(--mono); font-size:0.78rem; color:var(--aa-blue); white-space:nowrap; }
@media (max-width:760px){ .aa-drops{ grid-template-columns:1fr; } }

/* =====================================================================
   HANGTAG / RETAIL
   ===================================================================== */
.aa-retail{ background:var(--aa-ink); color:var(--aa-cream); }
.aa-retail__grid{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.aa-retail .frame{ border:3px solid var(--aa-gold); border-radius:18px; overflow:hidden; box-shadow:10px 10px 0 rgba(254,204,76,0.3); }
.aa-retail .frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.aa-retail h2{ font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:var(--aa-big); line-height:0.88; letter-spacing:-0.03em; color:var(--aa-cream); }
.aa-retail h2 em{ font-style:normal; color:var(--aa-gold); }
.aa-retail p{ font-family:var(--sans); font-weight:500; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.5; max-width:38ch; margin-top:1.3rem; color:rgba(255,247,228,0.8); }
.aa-iwasthere{ display:inline-block; margin-top:1.6rem; font-family:var(--sans); font-weight:900; text-transform:uppercase; font-size:clamp(1.4rem,3vw,2.4rem); color:var(--aa-gold); transform:rotate(-3deg); letter-spacing:-0.02em; }
@media (max-width:820px){ .aa-retail__grid{ grid-template-columns:1fr; } }

/* =====================================================================
   FINALE
   ===================================================================== */
.aa-finale{ background:var(--aa-blue); color:var(--aa-cream); text-align:center; overflow:hidden; position:relative; }
.aa-finale .aa-display{ font-size:var(--aa-mega); color:var(--aa-cream); }
.aa-finale .aa-display em{ font-style:normal; color:var(--aa-gold); }
.aa-finale__badge{ width:clamp(110px,16vw,200px); aspect-ratio:1; border-radius:50%; background:var(--aa-gold); display:grid; place-items:center; margin:0 auto clamp(2rem,4vw,3rem); box-shadow:0 14px 0 rgba(34,53,107,0.32); }
.aa-finale__badge img{ width:74%; height:74%; }
.athens.aa-motion .aa-finale__badge img{ animation: aa-wave 2.2s ease-in-out infinite; transform-origin:50% 86%; }
.aa-finale__cta{ margin-top:clamp(2rem,4vw,3rem); display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   ENTRANCE REVEAL (pop)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .athens [data-pop]{ opacity:0; transform:translateY(40px) scale(0.96); transition:opacity 0.7s var(--ease), transform 0.7s cubic-bezier(0.34,1.56,0.64,1); transition-delay:var(--d,0ms); }
  .athens [data-pop].is-in{ opacity:1; transform:none; }
}

/* mobile type easing */
@media (max-width:600px){
  .athens{ --aa-mega: clamp(2.3rem,12vw,4.2rem); --aa-huge: clamp(2.2rem,11vw,3.6rem); }
  .aa-retail__grid{ gap:2rem; }
}