/* ============================================================
   WISHLINK SHOP — STOREFRONT GTM  ·  Case study deck system
   Palette + type + shape kit + slide primitives
   ============================================================ */

:root {
  --orange:  #ff8c2d;
  --brown:   #6d2c00;
  --peach:   #ffe7d9;
  --coral:   #ff8773;
  --butter:  #ffb92e;
  --cream:   #fff4ec;
  --ink:     #3a1800;          /* warm near-black for body on light */
  --ink-soft: rgba(58,24,0,.66);
  --line:    rgba(109,44,0,.16);

  --display: "Obviously Narrow", "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body:    "Inter", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
deck-stage:not(:defined) { visibility: hidden; }
deck-stage { background: #2a1403; }

/* ---- slide frame ---------------------------------------- */
.slide {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  padding: 96px 112px;
  display: flex; flex-direction: column;
  background: var(--peach);
  color: var(--ink);
  font-family: var(--body);
}
.bg-peach  { background: var(--peach); }
.bg-cream  { background: var(--cream); }
.bg-orange { background: var(--orange); color: #fff; }
.bg-brown  { background: var(--brown);  color: var(--peach); }
.bg-butter { background: var(--butter); color: var(--brown); }
.bg-coral  { background: var(--coral);  color: #fff; }

/* ---- type primitives ------------------------------------ */
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.005em;
  margin: 0;
}
.display.w900 { font-weight: 900; }
h1.display { font-size: clamp(60px, 12vw, 176px); }
h2.display { font-size: 104px; }
.sub {
  font-family: var(--display); font-weight: 600;
  text-transform: uppercase; line-height: 0.98; letter-spacing: 0; margin: 0;
}
.body {
  font-family: var(--body); font-weight: 400;
  font-size: 26px; line-height: 1.5; color: var(--ink-soft); margin: 0;
}
.bg-orange .body, .bg-brown .body, .bg-coral .body { color: rgba(255,255,255,.86); }
.bg-brown .body { color: rgba(255,231,217,.82); }

/* eyebrow / chapter label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--body); font-weight: 600;
  font-size: 15px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--brown);
}
.bg-orange .eyebrow, .bg-coral .eyebrow { color: #fff; }
.bg-brown .eyebrow { color: var(--butter); }
.eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.eyebrow .num { font-variant-numeric: tabular-nums; }

.chapter {
  position: absolute; top: 92px; right: 112px;
  font-family: var(--display); font-weight: 800;
  font-size: 22px; letter-spacing: 0.1em; opacity: .5; text-transform: uppercase;
}

/* footer tag on every content slide */
.slide-foot {
  position: absolute; left: 112px; bottom: 60px;
  font-family: var(--body); font-size: 13px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; gap: 22px; align-items: center;
}
.bg-orange .slide-foot, .bg-coral .slide-foot { color: rgba(255,255,255,.7); }
.bg-brown .slide-foot { color: rgba(255,231,217,.6); }

/* accent run-in colours for headline words */
.c-orange { color: var(--orange); }
.c-coral  { color: var(--coral); }
.c-butter { color: var(--butter); }
.c-brown  { color: var(--brown); }
.c-peach  { color: var(--peach); }

/* ---- decorative shapes ---------------------------------- */
.shape { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.slide > .layer { position: relative; z-index: 2; }

/* spin / float helpers (respect reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  [data-deck-active] .spin  { animation: spin 26s linear infinite; }
  [data-deck-active] .spin-r{ animation: spin 30s linear infinite reverse; }
  [data-deck-active] .bob   { animation: bob 6s ease-in-out infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* ---- pills / chips / buttons ---------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 100px;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; font-size: 22px; letter-spacing: .01em;
}
.pill-orange { background: var(--orange); color: #fff; }
.pill-brown  { background: var(--brown); color: var(--peach); }
.pill-butter { background: var(--butter); color: var(--brown); }
.pill-outline{ background: transparent; border: 2px solid currentColor; }

/* card */
.card {
  background: #fff; border-radius: 26px; padding: 38px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 30px 60px -38px rgba(109,44,0,.45);
}
.card .k {
  font-family: var(--display); font-weight: 800;
  text-transform: uppercase; font-size: 30px; line-height: .96; color: var(--brown);
}
.card .v { font-size: 19px; line-height: 1.5; color: var(--ink-soft); }
.card .ix {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 26px;
}

/* grid helpers */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; }
.fill { flex: 1; }

/* ---- entrance --------------------------------------------*/
@media (prefers-reduced-motion: no-preference) {
  [data-deck-active] .rise { animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .rise2 { animation: rise .6s .08s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .rise3 { animation: rise .6s .16s cubic-bezier(.2,.7,.2,1) both; }
  [data-deck-active] .rise4 { animation: rise .6s .24s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes rise { from { transform: translateY(40px); } to { transform: none; } }

/* ---- phone mock (for IG creatives) ---------------------- */
.phone {
  width: 320px; aspect-ratio: 9/19.3; border-radius: 42px; background: #0b0b0c;
  padding: 11px; box-shadow: 0 40px 80px -34px rgba(0,0,0,.6); position: relative;
  border: 1px solid rgba(255,255,255,.12);
}
.phone .screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; position: relative; background:#111; }
.phone .notch { position:absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; background:#0b0b0c; border-radius: 0 0 14px 14px; z-index: 5; }

/* ---- research moodboard tiles --------------------------- */
.ref { border-radius: 22px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.ref-k { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 27px; line-height: .96; color: #fff; }
.ref-v { font-size: 16px; line-height: 1.35; color: rgba(255,255,255,.88); }
.ref-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.4); padding: 6px 12px; border-radius: 100px; backdrop-filter: blur(4px);
}

/* ---- colour swatches ------------------------------------ */
.sw { flex: 1; border-radius: 24px; padding: 30px 26px; display: flex; flex-direction: column; min-height: 460px; }
.sw-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 29px; line-height: .94; min-height: 56px; }
.sw-hex { font-family: var(--body); font-weight: 600; font-size: 19px; margin-top: 14px; letter-spacing: .02em; }
.sw-hex span { font-weight: 400; font-size: 13px; opacity: .8; letter-spacing: .08em; }
.sw-use { margin-top: auto; font-family: var(--body); font-weight: 500; font-size: 14px; padding: 10px 14px; border-radius: 100px; }

/* ---- typography helpers --------------------------------- */
.t-meta { font-family: var(--body); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,231,217,.55); }
.bg-cream .t-meta, .bg-peach .t-meta { color: var(--ink-soft); }
.t-scale { font-family: var(--display); font-weight: 800; color: var(--orange); line-height: .8; }
.t-w { font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--peach); border: 1px solid rgba(255,231,217,.3); padding: 7px 13px; border-radius: 100px; }

/* ---- shape tiles ---------------------------------------- */
.stile { background:#fff; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px 10px; box-shadow:0 18px 40px -30px rgba(109,44,0,.5); }
.stile img { width:84px; height:84px; object-fit:contain; }
.stile span { font-family:var(--body); font-weight:600; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.bg-brown .stile { background: rgba(255,255,255,.06); box-shadow:none; }
.bg-brown .stile span { color: rgba(255,231,217,.7); }

/* ---- CTA demos ------------------------------------------ */
.cta-demo { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.cta-lbl { font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.big-cta { font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:34px; letter-spacing:.01em; padding:18px 38px; border-radius:100px; border:none; cursor:default; display:inline-flex; align-items:center; gap:14px; line-height:1; white-space:nowrap; }
.big-cta .arr { font-family:var(--body); font-weight:700; }
.cta-note { font-family:var(--body); font-size:16px; line-height:1.45; color:var(--ink-soft); max-width:440px; }

/* ---- system toolkit ------------------------------------- */
.kit { background:rgba(255,255,255,.05); border:1px solid rgba(255,231,217,.14); border-radius:24px; padding:28px; display:flex; flex-direction:column; }
.kit-h { font-family:var(--body); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--butter); }
.chip { width:52px; height:52px; border-radius:13px; display:block; }
.micro-cap { position:absolute; bottom:13px; left:0; right:0; text-align:center; font-family:var(--body); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }

/* ---- email mockup --------------------------------------- */
.email { width:520px; flex:none; border-radius:30px; overflow:hidden; background:var(--peach); box-shadow:0 50px 90px -40px rgba(109,44,0,.6); font-family:var(--body); }
.email-head { background:var(--brown); color:#fff; text-align:center; padding:22px; font-family:var(--display); font-weight:800; font-size:34px; text-transform:uppercase; }
.email-body { padding:34px 36px 40px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }
.email-body .lead { font-family:var(--body); font-weight:700; font-size:24px; line-height:1.25; color:var(--ink); }
.email-body .hl { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:36px; color:var(--brown); line-height:.96; }
.email-photo { width:230px; height:230px; border-radius:22px; background:var(--coral); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.email-photo span { font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.9); }
.email-row { display:flex; align-items:center; gap:18px; width:100%; text-align:left; margin-top:4px; }
.email-row .big { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:54px; color:var(--orange); line-height:.86; flex:none; }
.email-row .sm { font-family:var(--body); font-size:16px; color:var(--ink-soft); line-height:1.4; }
.email-cta { background:var(--butter); color:var(--brown); font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:30px; padding:15px 0; width:100%; border-radius:100px; text-align:center; }
.email-foot { background:var(--brown); color:rgba(255,231,217,.8); font-size:11px; letter-spacing:.04em; padding:14px 20px; text-align:center; }
.email-foot b { color:#fff; }

/* ---- annotation list ------------------------------------ */
.anno { display:flex; gap:16px; align-items:flex-start; }
.anno .n { font-family:var(--display); font-weight:800; font-size:26px; color:var(--orange); flex:none; width:38px; }
.anno .t { font-family:var(--body); }
.anno .t b { display:block; font-size:19px; color:inherit; margin-bottom:2px; }
.anno .t span { font-size:15px; color:var(--ink-soft); line-height:1.4; }
.bg-orange .anno .n, .bg-brown .anno .n { color:var(--butter); }
.bg-orange .anno .t span, .bg-brown .anno .t span { color:rgba(255,255,255,.8); }
.bg-brown .anno .t span { color:rgba(255,231,217,.78); }

/* ---- IG story ------------------------------------------- */
.ig-story { position:absolute; inset:0; background:var(--orange); padding:30px 26px; display:flex; flex-direction:column; }
.ig-hook { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:42px; color:var(--brown); line-height:.92; }
.ig-card { background:#140f14; border-radius:18px; margin-top:auto; padding:18px; color:#fff; }
.ig-card .u { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; }
.ig-card .av { width:34px;height:34px;border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--butter)); flex:none;}
.ig-card .bio { font-size:14px; color:#dfe; margin-top:12px; }
.ig-card .bio b { color:#7cc0ff; font-weight:600; }
.ig-tag { align-self:center; margin-top:18px; margin-bottom:6px; background:rgba(255,255,255,.85); color:var(--brown); font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:20px; padding:9px 22px; border-radius:100px; }

/* ---- narrative timeline --------------------------------- */
.nstep { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,231,217,.16); border-radius:20px; padding:24px 22px; display:flex; flex-direction:column; gap:8px; }
.nstep .nn { font-family:var(--display); font-weight:800; font-size:24px; color:var(--butter); }
.nstep .nt { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:24px; color:#fff; line-height:.96; }
.nstep .nd { font-family:var(--body); font-size:15px; color:rgba(255,231,217,.8); line-height:1.4; }