/* ============================================================
   ALGORITMIN ALTA 2026 — Julkee x Lempee
   Shared stylesheet. Work Sans only — Thin to Black, used as the display face.
   ============================================================ */

/* ---------- Work Sans, self-hosted ----------
   Variable font (wght 100–900), so one file per subset covers every weight
   the layout uses (300 numbers and italics, 400 text, 900 headlines). Self-hosting removes two third-party origins from the
   critical path (fonts.googleapis.com + fonts.gstatic.com) and keeps visitor IPs
   away from Google. unicode-range means latin-ext only downloads if a page uses
   it. Files: public/fonts/, licence OFL-1.1 (public/fonts/OFL.txt).
   Subset from the full fonts in google/fonts (ofl/worksans) with pyftsubset,
   keeping kern, liga, calt, ccmp, locl, mark, mkmk, rvrn, case and zero — the
   Google Fonts web files drop `zero`, which the slashed number zero needs. */
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/work-sans-latin-wght-normal-z.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Work Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/fonts/work-sans-latin-wght-italic-z.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/work-sans-latin-ext-wght-normal-z.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/fonts/work-sans-latin-ext-wght-italic-z.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --black: #000000;
  --blue: #0B63F6;      /* JxL blue — the one accent, replaces the layout's neon green */
  --red: #D00931;
  --grey: #EFEFEF;
  --offwhite: #EFEFEF;
  --white: #FFFFFF;

  /* type scale — five steps, used everywhere. Display tops out where the
     longest hand-broken title line still fits its six-column text block. */
  --fs-display: clamp(34px, 4vw, 58px);
  --fs-heading: clamp(26px, 2.4vw, 34px);
  --fs-sub: clamp(19px, 1.6vw, 24px);
  --fs-body: clamp(17px, 1.25vw, 19px);
  --fs-small: 13px;
  --lh-body: 1.6;
  --num-weight: 300;      /* every display number: Work Sans Light, as on the original cards */

  /* rhythm — the brand book's layout tokens (jxl-tokens.css) */
  --max: 1200px;
  --maxw: var(--max);
  --gutter: clamp(20px, 5vw, 64px);
  --pad: var(--gutter);
  --section-pad: clamp(56px, 9vw, 128px);
  --media-radius: 18px;
  --line-on-light: rgba(0,0,0,.12);
  --line-on-dark: rgba(255,255,255,.16);

  /* motion — the brand book's two curves, and only two */
  --ease-ui: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: var(--ease-ui);
  --dur-press: .2s;
  --dur-color: .2s;
  --dur-ui: .5s;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
  }
}
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.site-foot :focus-visible { outline-color: var(--white); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Work Sans", system-ui, sans-serif;
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type helpers ---------- */
.caps { text-transform: uppercase; }
.italic { font-style: italic; }

/* eyebrow: the category above a heading ("Johdanto") */
.eyebrow {
  font-size: var(--fs-small); font-weight: 500; line-height: 1;
  letter-spacing: 0.2em; text-transform: uppercase;
}

/* typeset title: hand-broken lines, Regular and Black mixed per the layout */
.ttitle { text-transform: uppercase; letter-spacing: -0.005em; }
.tl { display: block; }
.tl--r { font-weight: 400; }
.tl--b { font-weight: 900; letter-spacing: -0.015em; }

/* display numbers — Work Sans Light with its slashed zero (OpenType `zero`,
   kept in our self-hosted subset): the stroke stays inside the oval */
.num, .bignum, .tcard__num, .d-stat__value { font-feature-settings: "zero" 1; }
.bignum { font-weight: var(--num-weight); line-height: 1; letter-spacing: -0.02em; }

/* ---------- tags — brand book: outlined pill, Regular caps 12 px ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-on-light);
  font-size: 12px; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
}
.teaser--black .tag, .d-case .tag { border-color: var(--line-on-dark); }

/* ---------- buttons — brand book §3: pill, Bold 14 px, label roll ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: 999px; border: none; cursor: pointer;
  font: 700 14px/1 "Work Sans", system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  transition: background-color var(--dur-color) var(--ease-ui), color var(--dur-color) var(--ease-ui), scale var(--dur-press) var(--ease-ui);
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:is(:hover, :focus-visible) { background: #0950C9; }
.btn:active { scale: .955; }
/* the label rolls: the text leaves upward and a text-shadow copy rises in on the spring */
.btn__label { display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25em; }
.btn__roll { display: block; text-shadow: 0 1.25em 0 currentColor; transition: translate var(--dur-ui) var(--ease-spring); }
.btn__arrow { transition: translate var(--dur-ui) var(--ease-spring); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:is(:hover, :focus-visible) .btn__roll { translate: 0 -1.25em; }
  .btn:is(:hover, :focus-visible) .btn__arrow { translate: 4px 0; }
}

/* label pill (component sheet) */
.label-pill {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   SITE HEADER — the real logo, never the lettering typed live
   ============================================================ */
.site-head {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 max(var(--gutter), calc((100% - var(--max)) / 2));
  color: var(--black);
}
.site-head--home { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.site-head--trend {
  position: sticky; top: 0; z-index: 50;
  background: var(--grey); border-bottom: 1px solid var(--line-on-light);
}
.site-head__mark { display: inline-flex; padding: 8px 0; }
.site-head__mark .mark-face--logo img { height: 20px; width: auto; display: block; }
.site-head__mark .mark-face--slogan { font-size: 13px; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.site-nav__link {
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; transition: color var(--dur-color) var(--ease-ui);
}
.site-nav__link:is(:hover, :focus-visible) { color: var(--blue); }

/* Brand-mark swap (brand book: Brand moments). The box clips top and bottom
   only, so the wider slogan causes no layout shift. Out goes up on --ease-ui,
   in rises on --ease-spring, the loop leading the slogan by 50 ms. */
.mark-swap { position: relative; display: inline-block; vertical-align: middle; clip-path: inset(0 -100vw 0 0); }
.mark-face { display: block; transition: translate var(--dur-ui) var(--ease-ui), opacity var(--dur-ui) var(--ease-ui); }
.mark-face--slogan {
  position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: .55em;
  white-space: nowrap; font-weight: 800; letter-spacing: -.005em; line-height: 1; text-transform: none;
  translate: 0 100%; opacity: 0; pointer-events: none;
}
.mark-loop { height: .95em; width: auto; flex: 0 0 auto; transition: translate var(--dur-ui) var(--ease-spring); translate: 0 60%; }
.mark-slogan { display: inline-block; transition: translate var(--dur-ui) var(--ease-spring) 50ms; translate: 0 60%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.site-head__mark, .site-foot__mark):is(:hover, :focus-visible) .mark-face--logo { translate: 0 -100%; opacity: 0; }
  :is(.site-head__mark, .site-foot__mark):is(:hover, :focus-visible) .mark-face--slogan { translate: 0 0; opacity: 1; transition: translate var(--dur-ui) var(--ease-spring), opacity .3s var(--ease-ui); }
  :is(.site-head__mark, .site-foot__mark):is(:hover, :focus-visible) :is(.mark-loop, .mark-slogan) { translate: 0 0; }
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 200;
  width: 100%; height: 4px;
  background: rgba(0,0,0,0.07);
  opacity: 0; transform: translateY(-100%);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  pointer-events: none;
}
.scroll-progress.visible { opacity: 1; transform: translateY(0); }
.scroll-progress__bar {
  height: 100%; width: 100%;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.12s linear;
}

/* ============================================================
   HERO (index) — measured from the 1440 px layout
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(780px, 100svh, 980px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--grey) 0%, var(--grey) 70%, #DCDCDC 100%);
  color: var(--black);
  text-align: center;
  padding: clamp(88px, 7.6vw, 112px) var(--pad) clamp(16px, 2vw, 28px);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 5; max-width: 1100px; margin: 0 auto; }

.hero__eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 auto clamp(32px, 3.9vw, 57px);
}
.hero__rule { flex: none; width: 72px; height: 1px; background: var(--black); transform-origin: center; }
.hero__eyebrow-text {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap; padding-left: 0.2em; /* optical: balance the trailing tracking */
}
/* the brand loop, sized to the capitals and centred on them (the flex row
   centres the line box; the nudge moves it onto the cap-height middle) */
.hero__loop {
  flex: none; height: 0.72em; width: auto; color: var(--blue);
  margin: 0 0.15em;
}

.hero__lockup {
  display: flex; flex-direction: column; align-items: center;
  font-weight: 900; text-transform: uppercase; line-height: 0.8;
  user-select: none;
}
.hero__lockup .lk { display: block; }
.hero__lockup .lk-algoritmin { display: flex; justify-content: center; }
.lk-algoritmin { font-size: clamp(30px, 3.8vw, 55px); letter-spacing: 0; }
.lk-alta { font-size: clamp(82px, 10.4vw, 150px); letter-spacing: 0.015em; margin-top: 0; }
/* glyph wave (app.js): each letter keeps its real width */
.scr { display: inline-block; text-align: center; }
.hero__lockup .lk-algoritmin .scr { display: block; }
/* while the wave passes, a letter shows its raw character (lowercase,
   symbols), so the heading's uppercase transform is lifted for it */
.scr--on { text-transform: none; }

.hero__sub {
  margin: clamp(16px, 1.6vw, 23px) auto 0;
  max-width: 25em;
  font-size: var(--fs-body); font-weight: 400; line-height: 1.45;
  color: rgba(0,0,0,.62);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow-text { animation: fade-in 0.9s ease both; animation-delay: 0.42s; }
  .hero__rule { animation: aa-rule 1s var(--ease) both; animation-delay: 0.2s; }
  .lk-algoritmin { animation: aa-rise 0.9s var(--ease) both; animation-delay: 0.24s; }
  .lk-alta { animation: aa-rise 0.95s var(--ease) both; animation-delay: 0.34s; }
  .hero__sub { animation: fade-in 0.7s ease both; animation-delay: 0.5s; }
}
@keyframes aa-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aa-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__sub, .hero__eyebrow-text, .hero__rule, .lk-algoritmin, .lk-alta { animation: none !important; transform: none !important; opacity: 1 !important; }
  .reveal, .reveal-up, .d-hero__title, .d-hero__en, .d-hero__pills { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   TREND CARD — the trading card. Every size is relative to the
   card's width (cqw), so one design serves the gallery, the component
   sheet and any other size. Proportions from the 2000 px exports.
   ============================================================ */
.tcard {
  position: relative; display: block;
  width: 208px; aspect-ratio: 2000 / 2884;
  container-type: inline-size;
  isolation: isolate; /* keeps the rim (::after, z -1) inside the card's own stack */
  color: var(--black);
  text-align: left;
}
/* the face lives on a pseudo-element: cqw on .tcard itself would measure
   the parent, its children measure the card */
/* the black-bordered face, with an even light rim all round (::after) and
   a small loop sitting on the middle of its bottom line, as on the original cards */
.tcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border: 1px solid var(--black);
  border-radius: 8.7cqw;
  background: var(--white);
  /* a gap in the bottom border for the loop — cut with a mask, no box behind it */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 2cqw) no-repeat,
    linear-gradient(90deg, #000 calc(50% - 4.6cqw), transparent 0 calc(50% + 4.6cqw), #000 0) bottom / 100% 2cqw no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 2cqw) no-repeat,
    linear-gradient(90deg, #000 calc(50% - 4.6cqw), transparent 0 calc(50% + 4.6cqw), #000 0) bottom / 100% 2cqw no-repeat;
}
/* the light rim around the card; outside the mask so it stays whole */
/* the card's white margin around the black face, with a very light shadow;
   it sits under the face's loop gap, so the loop always rests on white */
.tcard::after {
  content: ""; position: absolute; inset: -1.6cqw; z-index: -1;
  border-radius: 10.3cqw;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px -10px rgba(0,0,0,.16);
}
.tcard__num {
  position: absolute; left: 6cqw; top: -0.3cqw; z-index: 3;
  font-weight: var(--num-weight); font-size: 58.8cqw; line-height: 1; letter-spacing: -0.02em;
  pointer-events: none;
}
.tcard__ascii {
  position: absolute; left: 23.8cqw; top: 38.2cqw; z-index: 1;
  width: 70.9cqw; aspect-ratio: 1; border-radius: 3.6cqw;
}
.tcard__title {
  position: absolute; left: 7.4cqw; right: 3cqw; bottom: 22cqw; z-index: 4;
  font-size: 10.9cqw; line-height: 0.945; text-transform: uppercase; letter-spacing: -0.005em;
}
.tcard__en {
  position: absolute; left: 7.4cqw; bottom: 14.6cqw;
  font-size: 5.45cqw; font-weight: 300; font-style: italic; line-height: 1;
}
.tcard__loop {
  /* centred on the face's bottom line: the 1 px border sits inside the edge,
     so its centre is half a pixel up */
  position: absolute; left: 50%; bottom: 0.5px; z-index: 4;
  width: 5.4cqw; height: auto; transform: translate(-50%, 50%);
  color: var(--black);
}

/* ============================================================
   ASCII VISUAL (ascii.js) — white glyphs on the brand blue
   ============================================================ */
.ascii {
  position: relative; overflow: hidden;
  background: var(--blue); color: var(--white);
}
.ascii canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HERO GALLERY — the cards on the inside of a ring ----------
   gallery.js positions every card (inline transform) and runs the intro,
   drag, arrows and drift. Full bleed below the title. */
.gallery {
  --gw: clamp(180px, 15vw, 230px);
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  margin: clamp(8px, 2vh, 28px) calc(-1 * var(--pad)) 0;
  min-height: calc(var(--gw) * 1.442 + 84px);
}
.gallery__stage {
  position: relative; flex: 1;
  /* perspective alone: each card is projected on its own and stacked by the
     z-index gallery.js sets. A shared preserve-3d context made Chrome blend
     the centre card (exactly on the stage plane) and wash it out. */
  perspective: 1400px; perspective-origin: 50% 45%;
  touch-action: pan-y;             /* horizontal drags belong to the gallery */
  cursor: grab; user-select: none; -webkit-user-select: none;
}
.gallery.is-dragging .gallery__stage { cursor: grabbing; }
.gallery__card {
  position: absolute; left: 50%; top: 50%;
  width: var(--gw);
  transform: translate(-50%, -50%) translate3d(0, 100vh, 0) scale(.32); /* before gallery.js: out of sight */
  -webkit-user-drag: none;
}
.gallery__card img { -webkit-user-drag: none; }
.gallery__nav {
  display: flex; justify-content: center; gap: 12px;
  padding-top: clamp(8px, 1.5vh, 16px);
}
.gallery__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--black); background: transparent; color: var(--black);
  font: 400 18px/1 "Work Sans", system-ui, sans-serif; cursor: pointer;
  transition: background-color var(--dur-color) var(--ease-ui), color var(--dur-color) var(--ease-ui), scale var(--dur-press) var(--ease-ui);
}
.gallery__arrow:is(:hover, :focus-visible) { background: var(--black); color: var(--white); }
.gallery__arrow:active { scale: .955; }

/* ============================================================
   INTRO (editorial)
   ============================================================ */
.intro {
  background: var(--white);
  padding: var(--section-pad) var(--pad);
}
.intro__inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}
/* heading across the grid on two balanced lines; the two paragraphs sit on
   the trend sections' own columns (text 1–6, image 8–12), tops aligned */
.intro__inner > :first-child { grid-column: 1 / -1; }
.intro .eyebrow { margin-bottom: 22px; }
.intro__lead {
  font-weight: 900; line-height: 1.08; letter-spacing: -0.01em;
  font-size: var(--fs-display); max-width: 20em; text-wrap: balance;
}
.intro__body {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  margin-top: clamp(32px, 4vw, 56px);
}
.intro__body p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; }
.intro__body p:first-child { grid-column: 1 / span 6; }
.intro__body p:last-child { grid-column: 8 / span 5; }
.intro__body strong { font-weight: 700; }

/* ============================================================
   TREND BAND — "10 TRENDIÄ"
   ============================================================ */
.band {
  background: var(--black); color: var(--white);
  padding: clamp(40px, 4.5vw, 64px) var(--pad);
  display: flex; align-items: center; justify-content: center;
  scroll-margin-top: 0;
}
.band__title {
  font-size: var(--fs-display); font-weight: 400; line-height: 1; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
.band__num { color: var(--blue); font-weight: 900; letter-spacing: 0; margin-right: 0.08em; }

/* ============================================================
   TREND TEASERS — grey / white / black, image side alternates
   ============================================================ */
.teasers { display: block; }
.teaser {
  position: relative;
  padding: var(--section-pad) var(--pad);
  scroll-margin-top: 0;
}
.teaser--grey  { background: var(--grey);  color: var(--black); }
.teaser--white { background: var(--white); color: var(--black); }
.teaser--black { background: var(--black); color: var(--white); }
.teaser--grey + .teaser--white { border-top: 1px solid var(--black); }

/* one 12-column grid: text 6 columns, one column of air, image 5 */
.teaser__inner {
  position: relative;
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 32px);
  align-items: center;
}
.teaser__text { grid-column: 1 / span 6; grid-row: 1; }
.teaser__viz  { grid-column: 8 / span 5; grid-row: 1; }
.teaser--flip .teaser__text { grid-column: 7 / span 6; }
.teaser--flip .teaser__viz  { grid-column: 1 / span 5; }

.teaser__title { font-size: var(--fs-display); line-height: 1.06; }
.teaser__en {
  margin-top: 10px;
  font-size: var(--fs-sub); font-weight: 300; font-style: italic; line-height: 1.25;
}
.teaser__intro {
  margin-top: 28px; max-width: 30em;
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.teaser__tags { margin-top: 24px; }
.teaser__cta { margin-top: 36px; }

.teaser__viz { position: relative; display: block; aspect-ratio: 1; }
.teaser__ascii { position: absolute; inset: 0; border-radius: var(--media-radius); }
/* big thin number overlapping the image's top-right corner, em-based so it
   scales with the box; anchored to the right edge so it never leaves the page */
.teaser__num {
  position: absolute; right: -0.14em; top: -0.43em;
  font-size: clamp(120px, 16vw, 230px); line-height: 1;
  pointer-events: none;
}
.teaser__viz:hover .teaser__ascii { box-shadow: 0 24px 50px -24px rgba(11,99,246,0.8); }

/* ============================================================
   SITE FOOTER — Julkee Blue, white logo with the brand-mark swap
   ============================================================ */
.site-foot { background: var(--blue); color: rgba(255,255,255,.85); padding: clamp(48px, 6vw, 88px) var(--pad) 28px; }
.site-foot__inner { max-width: var(--max); margin: 0 auto; }
.site-foot__top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.5vw, 32px);
  align-items: start; padding-bottom: clamp(40px, 5vw, 72px);
}
.site-foot__mark { grid-column: 1 / span 6; display: inline-flex; justify-self: start; color: var(--white); padding: 4px 0; }
.site-foot__mark .mark-face--logo img { height: 30px; width: auto; display: block; }
.site-foot__mark .mark-face--slogan { font-size: 17px; color: var(--white); }
.site-foot__about { grid-column: 8 / span 5; font-size: var(--fs-sub); line-height: 1.45; }
.site-foot__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.3); padding-top: 20px;
  font-size: var(--fs-small);
}
.site-foot__site {
  display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-weight: 700;
  transition: opacity var(--dur-color) var(--ease-ui);
}
.site-foot__site:is(:hover, :focus-visible) { opacity: .75; }
.site-foot__loop { height: 12px; width: auto; }

/* ============================================================
   DETAIL PAGE — same language as the front-page sections
   ============================================================ */
.d-hero {
  position: relative;
  background: var(--grey);
  padding: clamp(48px, 6vw, 96px) var(--pad) var(--section-pad);
  overflow: hidden;
}
.d-hero__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 32px);
  align-items: center;
}
.d-hero__text { grid-column: 1 / span 6; }
.d-hero__viz  { grid-column: 8 / span 5; }
.d-hero__title {
  font-size: var(--fs-display); line-height: 1.06;
  animation: d-hero-in .7s var(--ease) both;
}
.d-hero__meta { display: block; margin-bottom: 20px; color: rgba(0,0,0,.62); }
.d-hero__en {
  margin: 12px 0 0;
  font-size: var(--fs-sub); font-weight: 300; font-style: italic;
  animation: d-hero-in .7s var(--ease) .06s both;
}
/* the one-line teaser: the trend's point before any reading */
.d-hero__lede {
  margin: 24px 0 0; max-width: 30em;
  font-size: var(--fs-body); line-height: 1.5; font-weight: 500;
  animation: d-hero-in .7s var(--ease) .09s both;
}
.d-hero__tags { margin: 32px 0 0; animation: d-hero-in .7s var(--ease) .12s both; }
/* The hero is always on screen at load, so it animates in with CSS rather than
   waiting for app.js and an IntersectionObserver. The title is the page's
   largest text: gating it behind JavaScript delayed LCP and left it invisible
   whenever a script failed. */
@keyframes d-hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.d-hero__viz { position: relative; aspect-ratio: 1; margin-top: clamp(40px, 6vw, 90px); }
.d-hero__ascii { position: absolute; inset: 0; border-radius: var(--media-radius); }
.d-hero__num {
  position: absolute; right: -0.14em; top: -0.43em;
  font-size: clamp(120px, 16vw, 230px); line-height: 1;
  pointer-events: none;
}

/* placeholder visual */
.viz {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.06) 0 14px, rgba(0,0,0,0.0) 14px 28px);
  border: 2px dashed rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  padding: 24px;
}
.viz--ondark {
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.10) 0 14px, rgba(255,255,255,0.0) 14px 28px);
  border-color: rgba(255,255,255,0.45);
}
.viz__label {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; line-height: 1.6; opacity: 0.8;
}
.viz--card {
  background: var(--white);
  border: none;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.32);
  min-height: 380px;
}
.viz--card .viz__label { opacity: 0.55; color: #000; }
/* body section */
/* key numbers strip under the hero */
.d-stats { background: var(--white); padding: clamp(40px, 5vw, 72px) var(--pad) 0; }
.d-stats__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  column-gap: clamp(20px, 2.5vw, 32px);
}
.d-stat { margin: 0; border-top: 2px solid var(--black); padding-top: 18px; }
.d-stat__value {
  display: block; font-weight: var(--num-weight); line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(48px, 6vw, 88px); white-space: nowrap;
}
.d-stat__label { margin-top: 12px; font-size: var(--fs-body); line-height: 1.4; max-width: 18em; }
.d-stat__src {
  display: inline-block; margin-top: 12px;
  font-size: var(--fs-small); font-weight: 700; color: var(--blue);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--dur-color) var(--ease-ui);
}
.d-stat__src:is(:hover, :focus-visible) { color: var(--black); }

/* pull quote between the middle paragraphs */
.d-quote {
  margin: 1.6em 0; padding-left: 24px; border-left: 3px solid var(--blue);
  font-size: var(--fs-heading); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em;
  text-wrap: balance;
}
.d-quote p { margin: 0 !important; font-size: inherit !important; line-height: inherit !important; }
.d-quote p::before { content: "”"; }
.d-quote p::after { content: "”"; }

.d-body { background: var(--white); color: var(--black); padding: var(--section-pad) var(--pad); }
.d-body__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 60% 40%; gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.d-body__copy { max-width: 34em; font-size: var(--fs-body); }
.d-body__copy h2 {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  font-size: var(--fs-heading); line-height: 1.05; margin-bottom: 24px;
}
.d-body__copy p {
  font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; margin-bottom: 1em;
}
.d-body__copy .ph {
  color: #8a8a8a; font-size: 12.5px;
  letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 12px;
}

/* reference links under body copy */
.sources { margin-top: 2.2em; padding-top: 20px; border-top: 1px solid var(--line-on-light); }
.sources[hidden] { display: none; }
.sources__label {
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 12px;
}
.sources__list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.sources__list li::marker { font-weight: 500; color: rgba(0,0,0,.4); }
.sources__host { display: block; font-size: var(--fs-small); color: rgba(0,0,0,.5); }
/* text link — brand book: blue, bold, underline offset 4 px; hover → black */
.sources__link {
  font-size: 15px; font-weight: 700; color: var(--blue); width: fit-content;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--dur-color) var(--ease-ui);
}
.sources__link:is(:hover, :focus-visible) { color: var(--black); }

/* trend video — sticks alongside the article while it scrolls */
.d-video { align-self: start; }
@media (min-width: 1025px) {
  .d-video { position: sticky; top: 28px; }
}
.d-video__player {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; border-radius: 18px; overflow: hidden; cursor: pointer;
  background: var(--black); aspect-ratio: 16 / 9;
  font: inherit; color: var(--white);
}
.d-video__poster {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.d-video__player:hover .d-video__poster { transform: scale(1.03); opacity: 0.85; }
.d-video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--white);
  transition: transform 0.25s var(--ease);
}
.d-video__play::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--black);
}
.d-video__player:hover .d-video__play { transform: translate(-50%, -50%) scale(1.08); }
.d-video__player:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.d-video__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 10px;
  padding: 28px 18px 14px; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}
.d-video__title {
  font-size: 14px; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-video__dur {
  font-size: 11.5px;
  letter-spacing: 0.04em; opacity: 0.75; flex: none;
}
.d-video__frame {
  width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; display: block;
}
.d-video__summary {
  font-size: 14.5px; line-height: 1.6; color: #5c5c5c;
  margin-top: 14px; max-width: 46ch;
}
@media (prefers-reduced-motion: reduce) {
  .d-video__poster, .d-video__play { transition: none; }
  .d-video__player:hover .d-video__poster { transform: none; }
  .d-video__player:hover .d-video__play { transform: translate(-50%, -50%); }
}

/* comparison table — full width under the body grid */
.dtable-wrap {
  max-width: var(--maxw); margin: clamp(40px, 5vw, 72px) auto 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dtable {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: 15px; line-height: 1.5; text-align: left;
}
.dtable caption {
  font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a;
  text-align: left; padding-bottom: 14px;
}
.dtable th, .dtable td {
  padding: 16px 20px 16px 0; vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.dtable thead th {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #8a8a8a;
  border-bottom: 2px solid var(--black); padding-bottom: 12px;
}
.dtable tbody th { font-weight: 700; color: var(--black); padding-right: 32px; }
.dtable tbody td { color: #1a1a1a; }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: none; }

/* case section — black, like the front page's third tone */
.d-case { background: var(--black); color: var(--white); padding: var(--section-pad) var(--pad); }
.d-case__inner { max-width: var(--maxw); margin: 0 auto; }

.d-case h3 {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 1.02; margin: 22px 0 26px;
  text-wrap: balance;
}
.d-case p { font-size: var(--fs-body); line-height: var(--lh-body); max-width: 34em; margin-bottom: 1em; }
.d-case__viz { margin-top: clamp(32px, 5vw, 56px); }
.d-case__src { font-size: var(--fs-small); margin-top: 16px; color: rgba(255,255,255,0.68); }
.d-case__src a { color: var(--white); border-bottom: 1px solid var(--blue); }

/* signal cards — one or two per trend */
.d-case__grid {
  display: grid; gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(28px, 4vw, 44px);
}
.d-case__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.d-case__card { border-top: 1px solid rgba(255,255,255,0.35); padding-top: 22px; }
.d-case__card h3 { font-size: var(--fs-heading); margin: 14px 0 18px; }
.d-case__card p { margin-bottom: 0; max-width: 560px; }
.d-case__kicker {
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue); display: block;
}

@media (max-width: 900px) {
  .d-case__grid--two { grid-template-columns: 1fr; }
}

/* reveal helpers for body/case */
.reveal { opacity: 0; transition: opacity 0.7s var(--ease); }
.reveal.in { opacity: 1; }
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-up.in { opacity: 1; transform: translateY(0); }

/* all trends: the ten trading cards in a row, this one marked */
.d-deck { background: var(--grey); padding: var(--section-pad) 0 clamp(56px, 7vw, 96px); border-top: 1px solid var(--black); }
.d-deck__head {
  max-width: var(--max); margin: 0 auto 28px; padding: 0 var(--pad);
  box-sizing: content-box;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.d-deck__steps { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.d-deck__step {
  font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color var(--dur-color) var(--ease-ui);
}
.d-deck__step:is(:hover, :focus-visible) { color: var(--blue); }
.d-deck__row {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  padding: 30px max(var(--pad), calc((100% - var(--max)) / 2)) 28px; /* room for the lift and the frame */
  scroll-padding: 0 max(var(--pad), calc((100% - var(--max)) / 2));
}
.d-deck__card {
  flex: none; width: clamp(160px, 14vw, 200px); scroll-snap-align: start;
  transition: translate .45s var(--ease-spring);
}
.d-deck__card:is(:hover, :focus-visible) { translate: 0 -8px; }
.d-deck__card.is-current { translate: 0 -10px; }
/* you are here: a blue frame drawn clear of the card, so it never meets the loop */
.d-deck__card.is-current::after { outline: 2px solid var(--blue); outline-offset: 5px; }

/* 404 */
.nf { background: var(--grey); padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 7vw, 96px); }
.nf__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); box-sizing: content-box; }
.nf__title { margin: 22px 0 0; max-width: 14em; font-size: var(--fs-display); font-weight: 900; line-height: 1.06; letter-spacing: -0.01em; text-wrap: balance; }
.nf__text { margin: 20px 0 32px; font-size: var(--fs-body); line-height: var(--lh-body); max-width: 30em; }
.nf__row { margin-top: clamp(40px, 5vw, 64px); }

/* ============================================================
   COMPONENT SHEET
   ============================================================ */
.cs-head { background: var(--black); color: var(--white); padding: clamp(56px,8vw,110px) var(--pad) clamp(40px,6vw,72px); }
.cs-head h1 { font-weight: 700; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.025em; font-size: clamp(44px, 8vw, 120px); }
.cs-head p { margin-top: 18px; max-width: 600px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.75); }
.cs-block { padding: clamp(48px, 6vw, 88px) var(--pad); border-bottom: 1px solid #e3e3e3; }
.cs-block:nth-child(even) { background: var(--offwhite); }
.cs-block__inner { max-width: var(--maxw); margin: 0 auto; }
.cs-block__label {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(13px,1.4vw,16px); margin-bottom: 8px;
}
.cs-block__sub { font-size: 14px; color: #777; margin-bottom: 32px; max-width: 560px; line-height: 1.5; }

.cs-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 28px 20px; justify-items: center;
}
.cs-cards .tcard { width: 100%; max-width: 260px; }

.cs-pillrow { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.cs-pillrow .swatch {
  padding: 22px; border-radius: 16px; display: flex; gap: 10px; flex-wrap: wrap;
}

.cs-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.cs-swatch { border-radius: 14px; overflow: hidden; border: 1px solid rgba(0,0,0,0.08); }
.cs-swatch__chip { height: 96px; }
.cs-swatch__meta { padding: 12px 14px; background: var(--white); }
.cs-swatch__name { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.01em; }
.cs-swatch__hex { font-size: 12px; color: #888; margin-top: 3px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .d-body__grid { grid-template-columns: 1fr; gap: 40px; }
  /* single column: the video leads, so it stays high instead of
     landing under ~300 words of body copy */
  .d-body__grid .d-video { order: -1; }
  .viz--card { min-height: 300px; }
}
@media (max-width: 860px) {
  :root { --fs-display: clamp(30px, 8vw, 44px); }
  .intro__inner, .teaser__inner, .d-hero__grid, .site-foot__top { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .intro__inner > :first-child, .intro__body,
  .teaser__text, .teaser__viz, .teaser--flip .teaser__text, .teaser--flip .teaser__viz,
  .d-hero__text, .d-hero__viz, .site-foot__mark, .site-foot__about { grid-column: 1; grid-row: auto; }
  .intro__body { display: block; margin-top: 0; }
  .intro__body p + p { margin-top: 1em; }
  .teaser__inner { row-gap: 56px; }
  .teaser__viz, .d-hero__viz { order: -1; width: 100%; max-width: 440px; }
  .d-hero__viz { margin-top: 48px; }
  .d-stats__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
}

/* Phones: the same ring, bigger cards and a shallower curve (gallery.js) */
@media (max-width: 700px) {
  .hero { min-height: clamp(680px, 100svh, 820px); }
  .gallery { --gw: min(58vw, 240px); }
}

@media (max-width: 560px) {
  .hero__rule { width: 28px; }
  .hero__eyebrow { gap: 10px; }
  .hero__eyebrow-text { font-size: 11px; letter-spacing: 0.16em; gap: 8px; }
  .site-nav__link { font-size: 12px; letter-spacing: 0.08em; }
  .site-nav__link[target="_blank"] { display: none; } /* the footer carries the site link */
  .site-head__mark .mark-face--logo img { height: 18px; }
  .teaser__num, .d-hero__num { right: 0; }
}