/* =====================================================================
   Dusk Enterprise — shared design system
   Extracted from the 10 source mockups in /UI Design.
   Mobile-first (mockups are 360–430px wide). Breakpoints scale up.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --plum: #171C22;        /* cards */
  --bg: #0F1216;          /* page background */
  --orange: #FE8E24;      /* accent / CTA */
  --orange-2: #D9722A;    /* gradient end */
  --lavender: #EDF1F4;    /* primary text */

  /* Text tints (sampled from mockups) */
  --muted: #93A0AC;       /* labels / subtitles */
  --muted-2: #A5B2BE;     /* hero lead paragraphs */
  --soft: #C0CBD5;        /* article body / chips */
  --dim: #78858F;         /* meta, menu numbers */
  --dimmer: #6A7680;      /* footer mono */
  --menu-bg: #131820;     /* full-screen menu overlay bg */

  /* Striped placeholder */
  --stripe-a: #202730;
  --stripe-b: #28303B;

  /* Surfaces & lines */
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.09);
  --line-soft: rgba(255,255,255,0.07);
  --fill: rgba(255,255,255,0.05);
  --fill-2: rgba(255,255,255,0.06);
  --fill-3: rgba(255,255,255,0.08);

  /* Type */
  --font-sans: 'Sora', sans-serif;            /* headings / UI */
  --font-body: 'Hanken Grotesk', sans-serif;  /* body copy */
  /* Labels / eyebrows. Name is legacy (was IBM Plex Mono) — it is no longer a
     monospace, so it carries its own weight: a proportional face at 400 reads
     far lighter than a mono did at the same size. Tune the whole label system
     from --font-mono-w. */
  --font-mono: 'Libre Franklin', sans-serif;
  --font-mono-w: 700;
  --font-code: ui-monospace, SFMono-Regular, Menlo, monospace;  /* real code only */

  /* Layout */
  --maxw: 430px;       /* mobile canvas (matches mockups) */
  --maxw-lg: 680px;    /* capped content width on wide screens */
  --pad: 20px;         /* default horizontal page padding */
  --radius-lg: 22px;
  --radius: 18px;
  --radius-sm: 16px;
  --radius-pill: 20px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; }

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

body {
  background: var(--bg);
  color: var(--lavender);
  font-family: var(--font-sans);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- App shell ---------- */
.app {
  width: 100%;
  max-width: var(--maxw);
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.app > main { flex: 1 0 auto; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: 8px; top: -48px;
  background: var(--orange);
  color: var(--plum);
  font: 600 13px/1 var(--font-sans);
  padding: 12px 16px;
  border-radius: 10px;
  z-index: 200;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =====================================================================
   Header
   ===================================================================== */
/* Smart-shrink glass header. Fixed (not sticky) so it is pinned in every
   browser regardless of ancestor overflow; the `.site-header ~ main`
   rules below reserve the space it overlays. app.js toggles .is-scrolled. */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 20px;
  background: rgba(15, 18, 22, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: var(--maxw);
  z-index: 50;
  transition: padding 0.25s ease, background-color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  padding: 11px 20px;
  background: rgba(15, 18, 22, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* Reserve the space the fixed bar overlays */
.site-header ~ main { padding-top: 76px; }
.site-header--back ~ main { padding-top: 52px; }
.site-header--search ~ main { padding-top: 78px; }
/* Back / search header variants stay compact at all times */
.site-header--back,
.site-header--search { padding: 15px 20px; }
.site-header--back.is-scrolled,
.site-header--search.is-scrolled { padding: 12px 20px; }

.brand {
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  color: var(--lavender);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand-name {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  color: var(--orange);
}
.brand-name i { font-style: normal; font-weight: 400; color: var(--muted); }
.brand-tag {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 7.5px;
  letter-spacing: 0.32em;
  color: var(--muted);
  margin-top: 2px;
  max-height: 12px;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease;
}
.site-header.is-scrolled .brand-tag { opacity: 0; max-height: 0; }
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon-only buttons (search, hamburger, close) — 34px visual, 44px tap target */
.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--fill-3);
  border: 0;
  color: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.icon-btn::after {           /* expands tap target to 44px without changing visuals */
  content: "";
  position: absolute;
  inset: -5px;
}
.icon-btn:hover { background: rgba(255,255,255,0.12); }
.icon-btn { transition: transform 0.15s ease, background-color 0.15s ease; }
.icon-btn:active { transform: scale(0.9); }

/* Hamburger glyph — two bars that morph into an ✕ while the menu is open */
.hamburger-lines {
  position: relative;
  width: 15px;
  height: 7px;
  display: block;
  pointer-events: none;
}
.hamburger-lines span {
  position: absolute;
  left: 0;
  width: 15px;
  height: 1.6px;
  background: var(--lavender);
  display: block;
  border-radius: 1px;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.25s ease;
}
.hamburger-lines span:nth-child(1) { top: 0; }
.hamburger-lines span:nth-child(2) { top: 5.1px; }

/* Open state: the header stays put above the tray; the button turns
   into the orange close ✕ in place instead of a new one sliding in. */
body.menu-open .site-header { z-index: 120; }
body.menu-open [data-menu-open] { background: var(--orange); }
body.menu-open [data-menu-open]:hover { background: var(--orange); }
body.menu-open [data-menu-open] .hamburger-lines span {
  background: var(--plum);
  top: 2.55px;
}
body.menu-open [data-menu-open] .hamburger-lines span:nth-child(1) { transform: rotate(45deg); }
body.menu-open [data-menu-open] .hamburger-lines span:nth-child(2) { transform: rotate(-45deg); }

/* Back-link header variant (article, case study) */
.site-header--back { justify-content: space-between; }
.back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-sans);
}
.back-link .arrow { color: var(--orange); }
.back-link:hover { color: var(--lavender); }

/* Search header variant (search page) */
.site-header--search { gap: 12px; }
.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fill-2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 14px;
}
.search-bar .icon { color: var(--orange); }
.search-bar input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--lavender);
  font: 14px/1 var(--font-sans);
  padding: 0;
}
.search-bar input::placeholder { color: var(--soft); }
.search-bar input:focus { outline: none; }
.search-cancel {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}
.search-cancel:hover { color: var(--lavender); }

/* =====================================================================
   Typography
   ===================================================================== */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow--tight { letter-spacing: 0.1em; }
.eyebrow--muted { color: var(--muted); }
.eyebrow--xs { font-size: 9px; letter-spacing: 0.08em; }

.h-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
.h-display .accent { color: var(--orange); }
.h-page {            /* The work / Articles page titles */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.h-article {         /* article / case-study headlines */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
.lead {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-2);
  margin: 16px 0 0;
}
.subtle {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted);
  margin: 0;
}

/* =====================================================================
   Layout sections
   ===================================================================== */
.section { padding: 0 var(--pad) 22px; }
.hero {
  position: relative;
  padding: 34px var(--pad) 26px;
}
.hero::before {          /* soft dusk glow behind the headline */
  content: "";
  position: absolute;
  inset: -80px 0 auto;   /* no horizontal bleed — avoids sideways page overflow */
  height: 340px;
  background:
    radial-gradient(60% 55% at 18% 18%, rgba(254, 142, 36, 0.14), transparent 65%),
    radial-gradient(55% 50% at 85% 8%, rgba(74, 143, 231, 0.16), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.page-head { padding: 26px var(--pad) 16px; }
.page-head--lg { padding: 26px var(--pad) 22px; }

/* =====================================================================
   Striped image placeholder + real image slots
   The striped CSS stays as a fallback behind every <img>.
   ===================================================================== */
.striped {
  background: repeating-linear-gradient(45deg,
    var(--stripe-a), var(--stripe-a) 10px,
    var(--stripe-b) 10px, var(--stripe-b) 20px);
}
.striped--sm {
  background: repeating-linear-gradient(45deg,
    var(--stripe-a), var(--stripe-a) 8px,
    var(--stripe-b) 8px, var(--stripe-b) 16px);
}
.striped--xs {
  background: repeating-linear-gradient(45deg,
    var(--stripe-a), var(--stripe-a) 7px,
    var(--stripe-b) 7px, var(--stripe-b) 14px);
}
.striped--avatar {
  background: repeating-linear-gradient(45deg,
    var(--stripe-a), var(--stripe-a) 6px,
    var(--stripe-b) 6px, var(--stripe-b) 12px);
}

/* Media slot: striped fallback shows until a real <img> loads (app.js hides
   failed/empty images so the fallback remains visible). */
.media {
  position: relative;
  overflow: hidden;
  display: block;
}
.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}
.media > img.slot-missing { opacity: 0; }  /* set by app.js on error/empty */

/* App-logo tiles (square webp icons shown in product cards / search) */
.app-media { background: var(--plum); }
.app-media > img { object-fit: cover; object-position: center; }

#zaboor-cover {
  filter: brightness(103%);
  transform: scale(1.32);
  object-position: 11% 93%;
}

#menu-cover {
  transform: scale(1.00);
  object-position: 50% 19%;
}

/* =====================================================================
   Buttons / CTAs
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
}
.btn-cta {                 /* orange pill CTA */
  background: var(--orange);
  color: var(--plum);
  font-size: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
}
.btn-cta:hover { background: #ffa040; }
.btn-cta--sq { border-radius: 8px; padding: 7px 12px; }

.badge {                   /* "FLAGSHIP" tag on hero card */
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--orange);
  color: var(--plum);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 10px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.arrow-link { color: var(--orange); font-size: 18px; line-height: 1; }

/* =====================================================================
   Cards
   ===================================================================== */
/* Flagship product card (home) */
.card-flagship {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--plum);
  border: 1px solid var(--line);
  color: var(--lavender);
  text-decoration: none;
}
.card-flagship .media { height: 160px; }
.card-flagship .card-body {
  padding: 17px 17px 19px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.card-title-lg { display: block; font-weight: 700; font-size: 20px; }
.card-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}

/* Standard product card (grid) — text-over-image: the name sits on a
   scrim over taller artwork; the art zooms gently on hover. */
.product-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--plum);
  border: 1px solid var(--line);
  color: var(--lavender);
  text-decoration: none;
}
.product-card .media { height: 150px; }
.product-card.is-wide .media { height: 175px; }
.product-card.is-tall .media { height: 175px; }
.product-card .media > img {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
  .product-card:hover .media > img { transform: scale(1.05); }
}
.product-card .card-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent 38%, rgba(14, 6, 20, 0.94));
}
.card-title { display: block; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.product-card.is-wide .card-title,
.product-card.is-tall .card-title { font-size: 18px; }
.card-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--soft);
  margin-top: 1px;
}
.product-card.is-wide .card-meta,
.product-card.is-tall .card-meta { font-size: 12px; }
.card-flagship:hover,
.product-card:hover { border-color: rgba(255,255,255,0.18); }

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.span-2 { grid-column: 1 / 3; }

/* =====================================================================
   Stats band (home)
   ===================================================================== */
.stats {
  margin: 4px var(--pad) 26px;
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 20px 22px;
  text-align: center;
}
.stat-hero-value {
  font-weight: 800;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(110deg, #FFD9AD, var(--orange) 60%, var(--orange-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-hero-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.14em;
  margin-top: 8px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  margin-top: 20px;
  padding: 16px 4px 0;
}
.stat-value {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.06em;
}

/* =====================================================================
   Article cards (articles list)
   ===================================================================== */
.article-list {
  padding: 6px var(--pad) 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.article-card {            /* featured card with image */
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: var(--plum);
  border: 1px solid var(--line);
  color: var(--lavender);
  text-decoration: none;
}
.article-card .media { height: 150px; }
.article-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
}
.article-card .a-title {
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  margin-top: 9px;
}
.article-meta {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 10px;
}
.article-card-flat {       /* text-only article card */
  display: block;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 17px;
  color: var(--lavender);
  text-decoration: none;
}
.article-card-flat .a-title {
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.25;
  margin-top: 8px;
}
.article-card:hover,
.article-card-flat:hover { border-color: rgba(255,255,255,0.18); }

/* =====================================================================
   Feature-list rows (about values)
   ===================================================================== */
.feature-list {
  padding: 0 var(--pad) 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.feature-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line-2);
  padding: 16px 0;
}
.feature-row:last-child { border-bottom: 1px solid var(--line-2); }
.feature-row .label { font-weight: 600; font-size: 15px; }
.feature-row .num {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--muted);
}

/* =====================================================================
   Job cards (careers)
   ===================================================================== */
.job-list {
  padding: 0 var(--pad) 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.job-card {
  display: block;
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 17px;
  color: var(--lavender);
  text-decoration: none;
}
.job-card .job-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.job-card .job-title { font-weight: 600; font-size: 16px; }
.job-card .job-tags {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
}
.job-card:hover { border-color: rgba(255,255,255,0.18); }

/* =====================================================================
   Article body (article, case study)
   ===================================================================== */
.article-head { padding: 20px 22px 16px; }
.article-head .h-article { margin: 0; }
.byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.byline .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.byline .by-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}
.article-hero {
  height: 200px;
  margin: 6px 22px 18px;
  border-radius: 14px;
}
.prose {
  padding: 0 22px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--soft);
}
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin: 0; }

/* CTA strip inside article */
.cta-strip {
  margin: 0 22px 30px;
  padding: 18px;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: var(--lavender);
}
.cta-strip .cta-title { display: block; font-weight: 600; font-size: 15px; margin-top: 4px; }

/* =====================================================================
   Case study
   ===================================================================== */
.case-head { padding: 22px 20px 18px; }
.case-hero {
  height: 170px;
  margin: 6px 20px 20px;
  border-radius: 14px;
}
.metric-grid {
  padding: 0 var(--pad) 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.metric-card {
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.metric-value {
  font-weight: 700;
  font-size: 30px;
  color: var(--orange);
  line-height: 1;
}
.metric-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
}

/* =====================================================================
   Search results
   ===================================================================== */
.search-section-label { padding: 18px var(--pad) 12px; }
.search-section-label.tight { padding: 14px var(--pad) 12px; }
.search-products { padding: 0 var(--pad) 8px; }
.search-result {
  display: flex;
  gap: 13px;
  align-items: center;
  padding: 11px 0;
  text-decoration: none;
  color: var(--lavender);
}
.search-result .thumb {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex: 0 0 auto;
  overflow: hidden;
}
.search-result .thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-result .r-title { display: block; font-weight: 600; font-size: 15px; }
.search-result .r-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
}
.search-articles {
  padding: 0 var(--pad) 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.search-article {
  border-top: 1px solid var(--line);
  padding: 15px 0;
  display: block;
  text-decoration: none;
  color: var(--lavender);
}
.search-article:last-child { border-bottom: 1px solid var(--line); }
.search-article .sa-title {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 12px;
  color: var(--soft);
  background: var(--fill-2);
  border-radius: var(--radius-pill);
  padding: 8px 13px;
  text-decoration: none;
}
.chip:hover { background: rgba(255,255,255,0.1); }

/* =====================================================================
   About team avatars
   ===================================================================== */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
.avatar-stack .av + .av { margin-left: -12px; }
.avatar-stack .av-more {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--plum);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid var(--bg);
  margin-left: -12px;
}

/* =====================================================================
   Newsletter
   ===================================================================== */
.newsletter-card {
  margin: 20px var(--pad) 0;
  background: linear-gradient(150deg, var(--orange), var(--orange-2));
  border-radius: 24px;
  padding: 26px 22px;
  color: var(--plum);
}
.newsletter-card .eyebrow { color: var(--plum); opacity: 0.8; margin-bottom: 12px; }
.newsletter-card h1 {
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.newsletter-card .n-sub {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 18px;
  opacity: 0.85;
}
.signup {
  background: var(--plum);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.signup input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--lavender);
  font: 13.5px/1 var(--font-sans);
}
.signup input::placeholder { color: #78858F; }
.signup input:focus { outline: none; }
.newsletter-card .form-status { color: rgba(15,18,22,0.8); font-weight: 500; }

/* Newsletter success animation (app.js swaps the pill for this on submit) */
.signup { transition: opacity 0.28s ease, transform 0.28s ease; }
.signup.is-sent { opacity: 0; transform: translateY(-8px) scale(0.97); pointer-events: none; }

.form-success {
  text-align: center;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.form-success.is-in { opacity: 1; transform: none; }
.fs-check { display: inline-block; width: 54px; height: 54px; }
.fs-check svg { display: block; width: 100%; height: 100%; }
.fs-circle {
  stroke: var(--plum);
  stroke-width: 3;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}
.fs-tick {
  stroke: var(--plum);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.form-success.is-in .fs-circle { animation: fs-draw 0.5s ease 0.05s forwards; }
.form-success.is-in .fs-tick { animation: fs-draw 0.3s ease 0.5s forwards; }
.form-success.is-in .fs-check { animation: fs-pop 0.45s ease 0.55s both; }
@keyframes fs-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.fs-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  color: var(--plum);
  margin: 8px 0 0;
}
.fs-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--plum);
  opacity: 0.8;
  margin: 5px 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .signup, .form-success { transition: none; }
  .form-success.is-in .fs-circle,
  .form-success.is-in .fs-tick { animation: none; stroke-dashoffset: 0; }
  .form-success.is-in .fs-check { animation: none; }
}

.footer-cols {
  padding: 28px var(--pad) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
}
.footer-col .col-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 12px;
}
.footer-col .col-links {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 2.1;
}
.footer-col .col-links a {
  color: var(--soft);
  text-decoration: none;
  display: block;
}
.footer-col .col-links a:hover { color: var(--lavender); }

/* =====================================================================
   Footer (shared)
   ===================================================================== */
.site-footer {
  padding: 24px var(--pad) 30px;
  border-top: 1px solid var(--line-soft);
}
.site-footer .f-brand { font-weight: 700; font-size: 15px; }
.site-footer .f-nav {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 11px;
  color: var(--dimmer);
  margin-top: 8px;
  letter-spacing: 0.06em;
  line-height: 1.8;
}
.site-footer .f-nav a { color: var(--dimmer); text-decoration: none; }
.site-footer .f-nav a:hover { color: var(--muted); }

/* Bar footer (newsletter) */
.footer-bar {
  margin-top: auto;
  padding: 28px var(--pad) 30px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bar .f-brand { font-weight: 700; font-size: 15px; }
.footer-bar .f-copy {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--dimmer);
}

/* =====================================================================
   Full-screen menu overlay
   ===================================================================== */
/* Curtain drop: the whole tray unrolls down from the top edge, then the
   links settle in beneath it. Closing runs the same move in reverse. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--menu-bg);
  color: var(--lavender);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  /* hidden state: parked just above the viewport */
  visibility: hidden;
  transform: translateY(-101%);
  transition: transform 0.52s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.52s;
}
.menu-overlay.is-open {
  visibility: visible;
  transform: none;
}
/* The overlay slides in UNDER the fixed site header (which stays put and
   morphs its hamburger into the ✕), so the tray carries no header of its
   own — just leave room for the fixed bar. */
.menu-overlay .menu-inner { padding-top: 76px; }

/* Nav links drop into place once the curtain has landed */
.menu-overlay .menu-link,
.menu-overlay .menu-articles,
.menu-overlay .menu-follow {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.28s ease,
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.menu-overlay.is-open .menu-link,
.menu-overlay.is-open .menu-articles,
.menu-overlay.is-open .menu-follow {
  opacity: 1;
  transform: none;
}
.menu-overlay.is-open .menu-link:nth-child(1) { transition-delay: 0.24s; }
.menu-overlay.is-open .menu-link:nth-child(2) { transition-delay: 0.30s; }
.menu-overlay.is-open .menu-link:nth-child(3) { transition-delay: 0.36s; }
.menu-overlay.is-open .menu-link:nth-child(4) { transition-delay: 0.42s; }
.menu-overlay.is-open .menu-link:nth-child(5) { transition-delay: 0.48s; }
.menu-overlay.is-open .menu-link:nth-child(6) { transition-delay: 0.54s; }
.menu-overlay.is-open .menu-articles { transition-delay: 0.60s; }
.menu-overlay.is-open .menu-follow { transition-delay: 0.68s; }
.menu-overlay .menu-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}
.menu-close {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--plum);
  font-size: 18px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  position: relative;
}
.menu-close::after { content: ""; position: absolute; inset: -5px; }
.menu-nav {
  padding: 22px 22px 6px;
  display: flex;
  flex-direction: column;
}
.menu-link {
  text-decoration: none;
  color: var(--lavender);
  border-top: 1px solid var(--line-2);
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu-link:last-child { border-bottom: 1px solid var(--line-2); }
.menu-link .m-label {
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.02em;
  transition: color 0.2s;
}
.menu-link .m-num {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--dim);
}
.menu-link.is-accent { color: var(--orange); }
.menu-link.is-accent .m-label { color: var(--orange); }
.menu-link .m-arrow { font-size: 17px; color: var(--orange); }
.menu-link:hover .m-label { color: var(--orange); }

/* Articles section under the nav (split-feature layout):
   labelled head, one feature card, then compact article rows */
.menu-articles { margin: 16px 22px 0; }
.menu-articles .ma-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.menu-articles .ma-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.menu-articles .ma-all {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--orange);
  text-decoration: none;
}
.menu-articles .ma-all:hover { text-decoration: underline; }
.menu-article {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--lavender);
}
.menu-article:last-child { border-bottom: 0; padding-bottom: 6px; }
.menu-article .ma2-tag {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 4px;
}
.menu-article .ma2-title {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.35;
  transition: color 0.2s;
}
.menu-article:hover .ma2-title { color: var(--orange); }
.menu-article .ma2-meta {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
  flex: none;
}

/* Feature article card (first article, billboard treatment) */
.menu-feature {
  display: block;
  margin: 0 0 4px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 110% at 84% -10%, rgba(254, 142, 36, 0.28), transparent 62%),
    radial-gradient(80% 90% at 12% 108%, rgba(74, 143, 231, 0.3), transparent 60%),
    linear-gradient(160deg, #1C222B, #14181E);
  text-decoration: none;
  color: var(--lavender);
  transition: transform 0.25s;
}
.menu-feature:hover { transform: translateY(-3px); }
.menu-feature .mf-tag {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.menu-feature .mf-title {
  display: block;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  margin-top: 8px;
}
.menu-feature .mf-meta {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--dim);
  margin-top: 8px;
}
.menu-feature .mf-cta {
  display: inline-block;
  margin-top: 14px;
  background: var(--orange);
  color: var(--plum);
  font-weight: 700;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: 20px;
}
.menu-follow { padding: 18px 22px 30px; margin-top: auto; }
.menu-follow .follow-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 12px;
}
.follow-links { display: flex; gap: 10px; }
.follow-links a {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 11px;
  color: var(--soft);
  background: var(--fill-2);
  border-radius: 10px;
  padding: 11px 0;
  text-decoration: none;
}
.follow-links a:hover { background: rgba(255,255,255,0.1); }

body.menu-open { overflow: hidden; }

/* =====================================================================
   Forms (progressive — used where styled inputs appear)
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.field input,
.field textarea {
  background: var(--fill-2);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--lavender);
  font: 14px/1.4 var(--font-sans);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.form-status { font-family: var(--font-body); font-size: 13px; color: var(--muted); }

/* =====================================================================
   Responsive — scale up from the 430px mobile canvas
   ===================================================================== */
@media (min-width: 700px) {
  .app { max-width: var(--maxw-lg); }
  .site-header { max-width: var(--maxw-lg); }

  /* Slightly larger display type on wide screens */
  .h-display { font-size: 40px; }
  .h-page { font-size: 36px; }
  .h-article { font-size: 32px; }
  .newsletter-card h1,
  .newsletter-card h2 { font-size: 32px; }
  .stat-hero-value { font-size: 66px; }
  .stat-row { padding: 18px 24px 0; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 9.5px; }

  /* Roomier gutters */
  :root { --pad: 28px; }

  /* Hero card taller to fill the wider canvas */
  .card-flagship .media { height: 220px; }

  /* Product grid → 4 columns (no orphans); large cards keep full-width feel */
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .span-2 { grid-column: span 4; }
  .span-2 .media { height: 200px; }

  /* Metric grid → 4 across */
  .metric-grid { grid-template-columns: repeat(4, 1fr); }

  /* Article images a touch taller */
  .article-card .media { height: 200px; }
  .article-hero { height: 280px; }
  .case-hero { height: 240px; }
}

@media (min-width: 1000px) {
  /* Articles list as a two-column masonry-ish layout */
  .article-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Featured (first) article spans both columns; flat cards sit side by side */
  .article-list > article:first-child { grid-column: 1 / 3; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =====================================================================
   HOMEPAGE (one-page) components
   Built from the same tokens/patterns as the rest of the site.
   ===================================================================== */

/* Hero CTAs */
.hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.btn-lg {
  font-size: 14px;
  padding: 13px 20px;
  border-radius: 14px;
}
.btn-ghost {
  background: var(--fill-3);
  color: var(--lavender);
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }

/* Section heading (eyebrow + h2 + optional link) */
.section-head {
  padding: 34px var(--pad) 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.section-head .sh-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
.section-head .sh-link {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 11px;
  color: var(--orange);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.section-head .sh-link:hover { text-decoration: underline; }

/* Projects */
.project-grid {
  padding: 6px var(--pad) 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.project-card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: var(--plum);
  border: 1px solid var(--line);
  color: var(--lavender);
  text-decoration: none;
}
.project-card .media { height: 170px; }
.project-card .card-body {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
}
.project-card .p-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  margin-top: 9px;
}
.project-card .p-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
}
.project-stats {
  display: flex;
  gap: 22px;
  margin-top: 14px;
}
.project-stats .ps-val {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: var(--orange);
  line-height: 1;
}
.project-stats .ps-label {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.project-card:hover { border-color: rgba(255,255,255,0.18); }

/* Reviews / testimonials */
.review-grid {
  padding: 6px var(--pad) 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.review-card {
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.review-card .stars {
  color: var(--orange);
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.review-quote {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--soft);
  margin: 0 0 16px;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
}
.review-author .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.review-author .ra-name { font-weight: 600; font-size: 13px; display: block; }
.review-author .ra-meta {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* Large footer (homepage) */
.site-footer-lg {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 30px var(--pad) 0;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.footer-brand .f-brand { font-weight: 700; font-size: 18px; }
.footer-brand .f-tag {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 34ch;
}
.footer-cols-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 16px;
  padding: 0;
}
.site-footer-lg .footer-bar {
  margin-top: 28px;
  padding: 22px 0 30px;
}

/* Hero trust line (stars + store rating) */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hero-trust .stars {
  color: var(--orange);
  font-size: 11px;
  letter-spacing: 2px;
}

/* Aggregate rating line under the Reviews heading */
.review-agg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.review-agg .stars { color: var(--orange); font-size: 11px; }

/* =====================================================================
   Card artwork — branded gradient scenes + app-icon glyph tiles.
   Sits behind the real <img>; the glyph tile shows only while the
   image slot is empty (app.js adds .media--empty).
   ===================================================================== */
.art { --art-a: #4A8FE7; --art-b: #2A5AA6; }
.art--platter  { --art-a: #FE8E24; --art-b: #B4511A; }
.art--zaboor   { --art-a: #8A6CFF; --art-b: #4E35A6; }
.art--falafell { --art-a: #2FB8A6; --art-b: #14705F; }
.art--cookie   { --art-a: #F06292; --art-b: #A83562; }
.art--servee   { --art-a: #4A8FE7; --art-b: #2A5AA6; }
.art--stride   { --art-a: #FF6A3D; --art-b: #B03A1D; }
.art--article  { --art-a: #7FB2E5; --art-b: #FE8E24; }

.art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 110% at 84% -10%, color-mix(in srgb, var(--art-a) 26%, transparent), transparent 62%),
    radial-gradient(80% 90% at 12% 108%, color-mix(in srgb, var(--art-b) 38%, transparent), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, #1C222B, #14181E);
}
/* App-icon glyph tile, centred in the media slot */
.media--empty.art::after {
  content: attr(data-glyph);
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--art-a), var(--art-b));
  color: #fff;
  font: 700 21px/1 var(--font-sans);
  letter-spacing: -0.02em;
  border-radius: 15px;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.media--empty.art:empty::after,
.media--empty.art:not([data-glyph])::after { content: none; }
/* Larger scenes (flagship / featured / article) get a bigger tile */
.media--empty.art--scene::after {
  width: 64px;
  height: 64px;
  font-size: 25px;
  border-radius: 18px;
}

/* Review avatars — gradient discs with an initial */
.avatar-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 15px/1 var(--font-sans);
  background: linear-gradient(145deg, var(--av-a, #8A6CFF), var(--av-b, #4E35A6));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.avatar-art::after { content: attr(data-initial); }
.avatar-art--1 { --av-a: #FE8E24; --av-b: #B4511A; }
.avatar-art--2 { --av-a: #8A6CFF; --av-b: #4E35A6; }
.avatar-art--3 { --av-a: #F06292; --av-b: #A83562; }

/* Newsletter card reused as a homepage section */
.home-newsletter { padding: 14px 0 34px; }
.newsletter-card h2 {
  font-weight: 700;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.newsletter-card .form-status:empty { display: none; }
.newsletter-card .form-status { margin: 10px 0 0; }

/* =====================================================================
   ARTICLE (immersive) — full-bleed cover, drop-cap prose,
   "mentioned in this article" app cards
   ===================================================================== */
.article-cover {
  position: relative;
  height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 18, 22, 0.38),
    rgba(15, 18, 22, 0) 30%,
    rgba(15, 18, 22, 0) 45%,
    rgba(15, 18, 22, 0.94) 90%);
}
.cover-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
}
.back-link--cover { color: var(--lavender); }
.back-link--cover:hover { color: #fff; }
.icon-btn--cover {
  background: rgba(15, 18, 22, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
/* Article pages have no fixed .site-header — the hamburger lives in the
   cover bar. While the menu tray (z: 100) is open, pin the bar above it
   (z: 120, same as the header on other pages) so the ✕ stays reachable. */
body.menu-open .cover-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  z-index: 120;
}
.cover-body { position: relative; padding: 0 20px 24px; }
.chip-row { display: flex; gap: 8px; margin-bottom: 12px; }
.chip-row .chip {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(15, 18, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--soft);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.chip-row .chip--hot {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--plum);
  font-weight: 600;
}
.cover-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
}
.cover-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
}

.prose--article {
  padding: 24px 24px 10px;
  font-size: 16px;
  line-height: 1.75;
}
.prose--article > p:first-child::first-letter {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 44px;
  float: left;
  line-height: 0.9;
  margin: 4px 8px 0 0;
  color: var(--orange);
}

.mention-block { padding: 6px 24px 30px; }
.mention-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin: 0 0 12px;
}
.mention {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--lavender);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.mention + .mention { margin-top: 10px; }
.mention:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.mention:active { transform: scale(0.985); }
.mention-name { display: block; font-weight: 600; font-size: 14px; }
.mention-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.mention-go { margin-left: auto; color: var(--orange); font-size: 16px; }

/* App icon tile as a real element (mentions, chips) */
.app-tile {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  font: 700 17px/1 var(--font-sans);
  letter-spacing: -0.02em;
  background: linear-gradient(145deg, var(--art-a, #8A6CFF), var(--art-b, #4E35A6));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.app-tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Floating share button — fixed to the bottom-right thumb zone so a
   right-handed phone user can reach it without stretching. Sits under
   the menu/search trays (z: 100) so it never blocks them. */
.share-fab {
  position: fixed;
  right: max(16px, calc(50% - (var(--maxw) / 2) + 16px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 19px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--orange);
  color: var(--plum);
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, background-color 0.2s ease;
}
.share-fab:hover { transform: translateY(-1px); }
.share-fab:active { transform: scale(0.93); }
.share-fab svg { flex: 0 0 auto; }
.share-fab.is-copied { background: #7BE0A3; }

@media (min-width: 700px) {
  .article-cover { height: 420px; }
  .cover-title { font-size: 36px; }
  .cover-body { padding: 0 var(--pad) 28px; }
  .cover-bar { padding: 18px var(--pad); }
  .prose--article { padding: 30px var(--pad) 12px; }
  .mention-block { padding: 8px var(--pad) 36px; }
  body.menu-open .cover-bar { max-width: var(--maxw-lg); }
  .share-fab { right: max(16px, calc(50% - (var(--maxw-lg) / 2) + 18px)); }
}

/* =====================================================================
   Micro-interactions
   ===================================================================== */
.btn,
.card-flagship,
.product-card,
.project-card,
.article-card,
.article-card-flat,
.review-card {
  transition: transform 0.18s ease, border-color 0.18s ease,
    background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn:active { transform: scale(0.97); }
.card-flagship:active,
.product-card:active,
.project-card:active,
.article-card:active,
.article-card-flat:active { transform: scale(0.985); }
@media (hover: hover) {
  .card-flagship:hover,
  .product-card:hover,
  .project-card:hover,
  .article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  }
}

/* Scroll-reveal (elements get .reveal from app.js; IO adds .is-in) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

@media (min-width: 700px) {
  .section-head .sh-title { font-size: 28px; }

  /* Projects → featured spans full width, rest 2-up */
  .project-grid { grid-template-columns: 1fr 1fr; }
  .project-grid > .project-card.is-featured { grid-column: 1 / 3; }
  .project-grid > .project-card.is-featured .media { height: 240px; }

  /* Reviews → 2 across, third card spans the row (no orphan) */
  .review-grid { grid-template-columns: 1fr 1fr; }
  .review-grid .review-card:nth-child(3) { grid-column: 1 / -1; }

  /* Footer → brand beside columns, columns 3 across */
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer-brand { flex: 0 0 auto; }
  .footer-cols-3 {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    flex: 1;
    max-width: 460px;
  }
}

/* =====================================================================
   Reviews — wall of love (dense masonry) + crowd (avatar cloud)
   ===================================================================== */
.love-wall {
  padding: 6px var(--pad) 0;
  columns: 2;
  column-gap: 10px;
}
.love-note {
  break-inside: avoid;
  background: var(--plum);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin: 0 0 10px;
}
.love-note .stars {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 7px;
}
.ln-q {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--soft);
  margin: 0 0 10px;
}
.ln-a { display: flex; align-items: center; gap: 8px; }
.ln-name { display: block; font-weight: 600; font-size: 11.5px; }
.ln-src {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.love-foot {
  margin: 4px var(--pad) 0;
  text-align: center;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 11px;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--soft);
}
.love-foot b { color: var(--orange); font-weight: 600; }

/* Gradient avatar discs with an initial (reviews, crowd) */
.face {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 9.5px/1 var(--font-sans);
  background: linear-gradient(145deg, var(--fa, #8A6CFF), var(--fb, #4E35A6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.face::after { content: attr(data-initial); }
.face--1 { --fa: #FE8E24; --fb: #B4511A; }
.face--2 { --fa: #8A6CFF; --fb: #4E35A6; }
.face--3 { --fa: #F06292; --fb: #A83562; }
.face--4 { --fa: #2FB8A6; --fb: #14705F; }
.face--5 { --fa: #4A8FE7; --fb: #2A5AA6; }
.face--6 { --fa: #FF6A3D; --fb: #B03A1D; }

.crowd { padding: 28px var(--pad) 4px; }
.crowd-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
}
.crowd-cloud .face { border: 2px solid var(--bg); margin: -4px; }
.crowd-cloud .s1 { width: 30px; height: 30px; font-size: 11px; }
.crowd-cloud .s2 { width: 38px; height: 38px; font-size: 13px; }
.crowd-cloud .s3 { width: 46px; height: 46px; font-size: 16px; }
.crowd-plus {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--plum);
  font: 700 11px/1 var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  margin: -4px;
}
.crowd-count {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 16px 0 0;
}
.crowd-count b { color: var(--lavender); font-weight: 700; }

@media (min-width: 700px) {
  .love-wall { columns: 3; }
}

/* =====================================================================
   Aurora parallax background (homepage)
   Colour fields on three depth layers, moved by scroll position:
   app.js writes the unitless scroll offset to --sy on <html>.
   ===================================================================== */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora-bg::after {      /* dark veil keeps text readable over the colour */
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 22, 0.35);
}
.au-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3800px;
  will-change: transform;
}
.au-far  { transform: translateY(calc(var(--sy, 0) * -0.12px)); }
.au-mid  { transform: translateY(calc(var(--sy, 0) * -0.34px)); }
.au-near { transform: translateY(calc(var(--sy, 0) * -0.60px)); }

.au {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  animation: au-breathe 16s ease-in-out infinite alternate;
}
@keyframes au-breathe { to { transform: translate(34px, 22px) scale(1.12); } }

/* far — large dim violets, barely moving */
.au-f1 { width: 360px; height: 360px; left: -12%;  top: -80px;   background: #26333F; opacity: .42; }
.au-f2 { width: 400px; height: 400px; right: -14%; top: 520px;   background: #1B2530; opacity: .50; animation-delay: 3s; }
.au-f3 { width: 380px; height: 380px; left: -12%;  top: 1000px;  background: #26333F; opacity: .40; animation-delay: 6s; }
.au-f4 { width: 360px; height: 360px; right: -12%; top: 1400px;  background: #1B2530; opacity: .48; animation-delay: 1.5s; }

/* mid — the colour: embers & roses cruising */
.au-mid .au { animation-duration: 13s; }
.au-m1 { width: 300px; height: 300px; right: -10%; top: 120px;   background: #FE8E24; opacity: .30; }
.au-m2 { width: 280px; height: 280px; left: -8%;   top: 640px;   background: #3E6FA6; opacity: .27; animation-delay: 2s; }
.au-m3 { width: 300px; height: 300px; right: -9%;  top: 1200px;  background: #FE8E24; opacity: .26; animation-delay: 5s; }
.au-m4 { width: 290px; height: 290px; left: -8%;   top: 1800px;  background: #3E6FA6; opacity: .30; animation-delay: 3.5s; }
.au-m5 { width: 280px; height: 280px; right: -10%; top: 2400px;  background: #FE8E24; opacity: .27; animation-delay: 7s; }

/* near — small bright wisps sweeping past fastest */
.au-near .au { filter: blur(40px); animation-duration: 10s; }
.au-n1 { width: 160px; height: 160px; left: 55%; top: 380px;   background: #FFB25E; opacity: .30; }
.au-n2 { width: 140px; height: 140px; left: 8%;  top: 1000px;  background: #7FB2E5; opacity: .32; animation-delay: 2.5s; }
.au-n3 { width: 170px; height: 170px; left: 60%; top: 1600px;  background: #FFD9A8; opacity: .28; animation-delay: 4.5s; }
.au-n4 { width: 150px; height: 150px; left: 12%; top: 2250px;  background: #FFB25E; opacity: .30; animation-delay: 1s; }
.au-n5 { width: 150px; height: 150px; left: 58%; top: 2900px;  background: #7FB2E5; opacity: .30; animation-delay: 6s; }
.au-n6 { width: 150px; height: 150px; left: 10%; top: 3500px;  background: #FFD9A8; opacity: .28; animation-delay: 3s; }

/* Page content rides above the aurora */
.app { position: relative; z-index: 1; background: transparent; }

/* Cards go slightly translucent so the aurora glows through */
.card-flagship,
.product-card,
.project-card,
.article-card,
.article-card-flat,
.love-note,
.review-card {
  background: rgba(23, 28, 34, 0.72);
}
.stats {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
  .au { animation: none !important; }
}

/* =====================================================================
   APP PROFILE (cover story template)
   One template per app: the page reads the app's brand colours from
   its .art--<app> class (--art-a / --art-b) and recolours itself.
   No stats by design — story, features and screenshots only.
   ===================================================================== */
.ap-cover {
  position: relative;
  text-align: center;
  padding: 34px 22px 28px;
  background:
    radial-gradient(52% 42% at 18% 8%, color-mix(in srgb, var(--art-a) 58%, transparent), transparent 70%),
    radial-gradient(48% 46% at 88% 18%, color-mix(in srgb, var(--art-b) 62%, transparent), transparent 72%),
    radial-gradient(62% 52% at 60% 96%, color-mix(in srgb, var(--art-a) 30%, transparent), transparent 72%),
    var(--bg);
}
.ap-cover .app-tile {
  width: 86px;
  height: 86px;
  font-size: 36px;
  border-radius: 24%;
  margin: 4px auto 0;
}
.ap-cover .eyebrow { margin: 20px 0 0; }
.ap-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.ap-sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--muted);
  margin: 10px 0 0;
}
.eyebrow--app { color: var(--art-a); filter: brightness(1.35); }

.ap-pull {
  margin: 2px 24px 24px;
  padding-left: 16px;
  border-left: 3px solid var(--art-a);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
}
.ap-figs { display: flex; gap: 10px; padding: 0 24px; }
.ap-figs .media { flex: 1; height: 230px; border-radius: 18px; }
.ap-figcap {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  color: var(--dim);
  letter-spacing: 0.08em;
  padding: 10px 24px 14px;
  margin: 0;
}
.ap-k { padding: 12px 24px 0; }

.ap-feats { padding: 6px 24px 10px; }
.ap-feat {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--soft);
}
.ap-feat i {
  font-style: normal;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--art-a) 18%, transparent);
  color: var(--art-a);
  filter: brightness(1.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Sticky download bar on app-profile pages: pinned to the viewport bottom
   while the article scrolls, then released above the footer. The badges sit
   inside <article> and the footer is its sibling, so `position: sticky` stops
   sticking exactly at the article's end — right above the footer. */
.store-badges {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
  padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 18, 22, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--line);
}
.store-badge {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--lavender);
  color: #0F1216;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  padding: 13px 0;
  border-radius: 13px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.store-badge:active { transform: scale(0.97); }
.store-badge--alt { background: var(--fill-3); color: var(--lavender); }

/* --- Extended app-profile blocks (native name, verse, shots, features, facts, info) --- */
.ap-native {
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 1.6;
  color: var(--soft);
  margin: 10px 0 0;
}
.ap-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 14px 0 0;
}
.ap-meta-row .star { color: var(--art-a); filter: brightness(1.35); }

.ap-verse {
  margin: 6px 24px 24px;
  padding: 20px 18px;
  border-radius: 16px;
  text-align: center;
  background: color-mix(in srgb, var(--art-a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--art-a) 26%, transparent);
}
.ap-verse-ur { font-family: var(--font-sans); font-size: 19px; line-height: 1.85; margin: 0; }
.ap-verse-en {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--soft);
  margin: 12px 0 0;
}
.ap-verse-ref {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--art-a);
  filter: brightness(1.35);
  margin: 9px 0 0;
}

.ap-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 22px 24px 4px;
  margin: 0;
}

.ap-shots {
  display: flex;
  gap: 12px;
  padding: 8px 24px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ap-shots img {
  flex: 0 0 auto;
  width: 168px;
  height: 364px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--plum);
  scroll-snap-align: start;
}

.ap-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 24px 10px; }
.ap-fact {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--soft);
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}

.ap-info { margin: 6px 24px 30px; padding: 0; }
.ap-info > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.ap-info dt {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-transform: uppercase;
  flex: 0 0 auto;
}
.ap-info dd { margin: 0; text-align: right; color: var(--soft); font-family: var(--font-body); }
.ap-info dd a { color: var(--art-a); filter: brightness(1.25); text-decoration: none; }

.ap-reviews { display: flex; flex-direction: column; gap: 10px; padding: 4px 24px 10px; }
.ap-review {
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.ap-review .stars { color: var(--art-a); filter: brightness(1.3); font-size: 11px; letter-spacing: 1px; }
.ap-review-q {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--soft);
  margin: 8px 0 0;
}
.ap-review-a {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 9px 0 0;
}

@media (min-width: 700px) {
  .ap-cover { padding-top: 44px; }
  .ap-title { font-size: 33px; }
  .ap-figs .media { height: 300px; }
}

/* =====================================================================
   Articles hub — "The Dusk Journal"
   Front-page masthead + lead story, then paper-column listings
   (ruled duo columns + dotted "in brief" list).
   ===================================================================== */
.jr-mast {
  margin: 0 var(--pad);
  padding: 26px 0 14px;
  text-align: center;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}
.jr-ed {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.3em;
  color: var(--dim);
  margin-bottom: 12px;
}
.jr-mast h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.jr-mast h1 i { font-style: normal; color: var(--orange); }
.jr-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0 0;
}

.jr-kick {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.jr-meta {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

/* Lead story */
.jr-lead {
  display: block;
  margin: 0 var(--pad);
  padding: 18px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--lavender);
}
.jr-lead .media {
  height: 170px;
  border-radius: var(--radius-sm);
  margin: 12px 0 14px;
}
.jr-lead h2 {
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  transition: color 0.2s;
}
.jr-lead:hover h2 { color: var(--orange); }
.jr-deck {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 8px 0 0;
}
.jr-lead .jr-meta { display: block; margin-top: 10px; }

/* Two ruled columns */
.jr-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--pad);
}
.jr-duo > a {
  padding: 15px 14px 18px;
  text-decoration: none;
  color: var(--lavender);
}
.jr-duo > a:first-child { border-right: 1px solid var(--line-2); padding-left: 0; }
.jr-duo > a:last-child { padding-right: 0; }
.jr-duo h3 {
  font-size: 14.5px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 6px 0 0;
  transition: color 0.2s;
}
.jr-duo > a:hover h3 { color: var(--orange); }
.jr-duo p {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 6px 0 0;
}
.jr-duo .jr-meta { display: block; margin-top: 8px; }

/* In brief — dotted list */
.jr-briefs-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin: 0 var(--pad);
  padding: 16px 0 2px;
  border-top: 1px solid var(--line-2);
}
.jr-briefs { margin: 0 var(--pad); }
.jr-brief {
  display: block;
  padding: 12px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.16);
  text-decoration: none;
  color: var(--lavender);
}
.jr-brief:last-child { border-bottom: 0; }
.jr-brief h3 {
  display: inline;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
  transition: color 0.2s;
}
.jr-brief:hover h3 { color: var(--orange); }
.jr-brief .jr-meta { margin-left: 8px; white-space: nowrap; }

/* Duo columns: small image slot (striped placeholder until real art) */
.jr-duo-media {
  display: block;
  height: 84px;
  border-radius: 10px;
  margin: 8px 0 0;
}

/* Brief rows with a square thumbnail slot on the left */
.jr-brief--thumb {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jr-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
}
.jr-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jr-brief-body { min-width: 0; }
.jr-brief--thumb .jr-meta { margin-left: 8px; white-space: nowrap; }

/* Archive — filter chips, count, month dividers, paged list */
.jr-archive { margin: 0 var(--pad); }
#archive { scroll-margin-top: 74px; }
.jr-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 14px 0 10px;
}
.jr-filter {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: var(--fill-2);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 11px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.jr-filter:hover { background: rgba(255, 255, 255, 0.1); color: var(--lavender); }
.jr-filter.is-on { background: var(--orange); color: var(--plum); font-weight: 600; }
.jr-count {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin: 0 0 2px;
}
.jr-arc-month {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: var(--orange);
  padding: 16px 0 5px;
  border-bottom: 1px solid var(--line-2);
}
.jr-archive-list .jr-brief:last-child { border-bottom: 1px dotted rgba(255, 255, 255, 0.16); }

/* Pager: newer/older + windowed page numbers */
.jr-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 0 4px;
}
.jr-page-btn {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--lavender);
  background: var(--fill-2);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.jr-page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.jr-page-btn:disabled { color: var(--dim); opacity: 0.45; cursor: default; }
.jr-page-nums { display: flex; align-items: center; gap: 2px; }
.jr-page-num {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 8px;
  min-width: 24px;
  padding: 6px 3px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.jr-page-num:hover { color: var(--lavender); background: var(--fill-2); }
.jr-page-num.is-on { color: var(--orange); font-weight: 600; }
.jr-page-gap {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  color: var(--dim);
  padding: 0 1px;
}

.jr-end {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-align: center;
  padding: 20px 0 8px;
  margin: 0;
}

@media (min-width: 700px) {
  .jr-mast h1 { font-size: 42px; }
  .jr-lead .media { height: 230px; }
  .jr-lead h2 { font-size: 30px; }
  .jr-duo-media { height: 110px; }
}

/* =====================================================================
   Studio sign-off footer — shared by every page.
   Brand + tagline, three link columns, mono © bar with sign-off line.
   ===================================================================== */
.studio-footer {
  border-top: 1px solid var(--line-2);
  padding: 26px var(--pad) 0;
  margin-top: 34px;
}
.sf-wm {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.sf-wm i { font-style: normal; font-weight: 400; color: var(--muted); }
.sf-tag {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 6px 0 0;
  max-width: 280px;
}
.sf-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 22px 0;
}
.sf-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--dim);
  margin-bottom: 10px;
}
.sf-col a {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--soft);
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.2s;
}
.sf-col a:hover { color: var(--orange); }
.sf-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 10px;
  border-top: 1px solid var(--line-2);
  padding: 14px 0 18px;
}
.sf-bar span {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.03em;
  color: var(--dimmer);
  white-space: nowrap;
}

/* =====================================================================
   Search tray — same curtain-drop + header-morph language as the menu.
   Content: live-filtered products & articles, suggested chips.
   Chips and row actions sit on the right edge for right-thumb reach.
   ===================================================================== */
/* Trigger morph: magnifier fades out, ✕ fades in, button turns orange */
body.search-open .site-header { z-index: 120; }
body.search-open [data-search-open] { background: var(--orange); }
body.search-open [data-search-open]:hover { background: var(--orange); }
[data-search-open] { overflow: visible; }
[data-search-open] svg {
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.search-open [data-search-open] svg { opacity: 0; transform: rotate(90deg) scale(0.4); }
.search-x {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  opacity: 0;
  transform: rotate(-90deg) scale(0.4);
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.search-x span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 15px;
  height: 1.6px;
  margin-top: -0.8px;
  background: var(--plum);
  border-radius: 1px;
}
.search-x span:nth-child(1) { transform: rotate(45deg); }
.search-x span:nth-child(2) { transform: rotate(-45deg); }
body.search-open [data-search-open] .search-x { opacity: 1; transform: none; }

/* The tray: identical curtain drop to .menu-overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--menu-bg);
  color: var(--lavender);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  transform: translateY(-101%);
  transition: transform 0.52s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.52s;
}
.search-overlay.is-open { visibility: visible; transform: none; }
.search-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 76px 0 30px;   /* room for the fixed site header above */
}
@media (min-width: 700px) {
  .search-inner { max-width: var(--maxw-lg); }
}

/* Items drop in after the curtain lands — same cascade as the menu */
.search-overlay .sv-form,
.search-overlay .sv-sec,
.search-overlay .sv-empty {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.28s ease,
    transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.search-overlay.is-open .sv-form,
.search-overlay.is-open .sv-sec,
.search-overlay.is-open .sv-empty {
  opacity: 1;
  transform: none;
}
.search-overlay.is-open .sv-form { transition-delay: 0.24s; }
.search-overlay.is-open .sv-sec:nth-of-type(1) { transition-delay: 0.32s; }
.search-overlay.is-open .sv-sec:nth-of-type(2) { transition-delay: 0.40s; }
.search-overlay.is-open .sv-empty { transition-delay: 0.40s; }
.search-overlay.is-open .sv-sec--chips { transition-delay: 0.48s; }

/* Search field — clear ✕ lives on the right, inside the field */
.sv-form {
  position: relative;
  display: flex;
  margin: 16px 22px 4px;
}
.sv-form input {
  flex: 1;
  background: var(--fill-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 15px 48px 15px 16px;
  color: var(--lavender);
  font: 15px/1.2 var(--font-sans);
}
.sv-form input::placeholder { color: var(--soft); }
.sv-form input:focus { outline: none; border-color: var(--orange); }
.sv-form input::-webkit-search-cancel-button { display: none; }
.sv-clear {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.sv-clear:hover { background: rgba(255, 255, 255, 0.08); color: var(--lavender); }
.sv-form.has-q .sv-clear { display: flex; }

.sv-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  padding: 20px 22px 8px;
}

/* Result rows — chevron pinned to the right edge (thumb side) */
.sv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  color: var(--lavender);
  text-decoration: none;
}
.sv-row:hover { background: var(--fill); }
.sv-row:active { background: var(--fill-2); }
.sv-tile { width: 40px; height: 40px; font-size: 16px; border-radius: 12px; }
.sv-name { display: block; font-weight: 600; font-size: 14px; }
.sv-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.sv-go { margin-left: auto; color: var(--orange); font-size: 15px; }
.sv-row--a { border-top: 1px solid var(--line-soft); }
.sv-row--a:first-of-type { border-top: 0; }
.sv-tag {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--orange);
}
.sv-title {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  margin-top: 3px;
}
.sv-min {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  color: var(--dim);
  white-space: nowrap;
}

/* Suggested chips — wrap from the right edge, closest to the thumb */
.sv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 22px 10px;
  justify-content: flex-end;
}
.sv-chip { border: 0; cursor: pointer; font-family: var(--font-sans); }
.sv-chip:hover { color: var(--lavender); }

.sv-empty {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--muted);
  padding: 18px 22px 0;
  margin: 0;
}

/* hidden must beat the display:flex on rows/sections during filtering */
.sv-row[hidden],
.sv-sec[hidden],
.sv-empty[hidden] { display: none; }

/* =====================================================================
   Projects — studio journal hub
   Full journal entries, newest first, with a "load older" reveal.
   ===================================================================== */
.pj-entry {
  display: block;
  margin: 6px var(--pad) 0;
  padding: 18px 0 22px;
  border-top: 1px solid var(--line-2);
  color: var(--lavender);
  text-decoration: none;
}
.pj-date {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pj-date .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.pj-meta {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.pj-entry h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
  transition: color 0.2s;
}
.pj-entry:hover h2 { color: var(--orange); }
.pj-story {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted-2);
  margin: 8px 0 0;
}
.pj-story b { color: var(--lavender); font-weight: 600; }
.pj-entry .media {
  height: 160px;
  border-radius: 14px;
  margin: 12px 0 0;
}
.pj-caption {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 7px;
}
.pj-outcome {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--soft);
}
.pj-outcome .k {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--orange);
  flex: none;
}
.pj-loadmore {
  display: block;
  width: calc(100% - (2 * var(--pad)));
  margin: 20px var(--pad) 10px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--fill);
  color: var(--orange);
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 14px 0;
  cursor: pointer;
  transition: background 0.2s;
}
.pj-loadmore:hover { background: rgba(255, 255, 255, 0.09); }
.pj-count {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--dim);
  padding-bottom: 6px;
  margin: 0;
}

@media (min-width: 700px) {
  .pj-entry .media { height: 230px; }
  .pj-entry h2 { font-size: 26px; }
}

/* =====================================================================
   Project page — "the full entry"
   The journal entry opened up: cover, story sections with figures,
   orange outcome box, signature, next-entry link.
   ===================================================================== */
.pe-cover { padding: 22px var(--pad) 0; }
.pe-date { display: flex; align-items: center; gap: 10px; }
.pe-date .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.pe-cover h1 {
  font-size: 30px;
  letter-spacing: -0.025em;
  margin: 10px 0 0;
}
.pe-sec { padding: 6px var(--pad) 0; }
.pe-story {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted-2);
  margin: 14px 0 0;
}
.pe-story b { color: var(--lavender); font-weight: 600; }
.pe-sec .media {
  height: 180px;
  border-radius: 14px;
  margin-top: 16px;
}
.pe-caption {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 7px;
}
.pe-outcome {
  margin: 22px var(--pad) 0;
  border: 1px solid rgba(254, 142, 36, 0.4);
  background: rgba(254, 142, 36, 0.06);
  border-radius: 14px;
  padding: 14px 15px;
}
.pe-outcome .k {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--orange);
  display: block;
}
.pe-outcome p {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--soft);
  margin: 6px 0 0;
}
.pe-signed { padding: 18px var(--pad) 0; }
.pe-signed .name {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
}
.pe-signed .meta-line {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-top: 4px;
}
.pe-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 26px var(--pad) 0;
  border-top: 1px solid var(--line-2);
  padding: 16px 0 4px;
}
.pe-next a { text-decoration: none; color: var(--lavender); }
.pe-next .lbl {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.pe-next .t {
  display: block;
  font-size: 16px;
  font-weight: 700;
  margin-top: 4px;
  transition: color 0.2s;
}
.pe-next a:hover .t { color: var(--orange); }
.pe-next .arr { color: var(--orange); font-size: 18px; }

@media (min-width: 700px) {
  .pe-cover h1 { font-size: 36px; }
  .pe-sec .media { height: 260px; }
}

/* =====================================================================
   App profile — "What's inside" as a till receipt.
   Itemised contents, double rules, TOTAL: FREE — FOREVER.
   ===================================================================== */
.ap-receipt {
  margin: 6px 24px 10px;
  background: #151A20;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 18px 16px 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.ap-receipt .rc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 3px double rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}
.ap-receipt .rc-title {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--soft);
}
.ap-receipt .rc-no {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  color: var(--dim);
}
.ap-receipt .rc-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.14);
}
.ap-receipt .rc-item:last-of-type { border-bottom: 0; }
.ap-receipt .rc-tick {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 11px;
  color: var(--orange);
  flex: none;
}
.ap-receipt .rc-bd { flex: 1; }
.ap-receipt .rc-t {
  display: block;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.ap-receipt .rc-d {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 2px;
}
.ap-receipt .rc-total {
  display: flex;
  justify-content: space-between;
  border-top: 3px double rgba(255, 255, 255, 0.2);
  margin-top: 4px;
  padding-top: 12px;
}
.ap-receipt .rc-total .l {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--soft);
}
.ap-receipt .rc-total .v {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--orange);
}
.ap-receipt .rc-foot {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-align: center;
  padding-top: 12px;
  line-height: 1.8;
}

/* =====================================================================
   The work — editorial catalogue.
   Swipeable featured carousel up top, essentials rows, icon grid.
   ===================================================================== */
.tw-head { padding: 26px var(--pad) 0; display: flex; align-items: baseline; justify-content: space-between; }
.tw-head h1 { font-size: 30px; letter-spacing: -0.025em; margin: 6px 0 0; }
.tw-count {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--dim);
}

/* Featured carousel — scroll-snap, next card peeks to invite the swipe */
.tw-feats {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 16px var(--pad) 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.tw-feats::-webkit-scrollbar { display: none; }
.tw-feat {
  flex: 0 0 calc(100% - 44px);
  scroll-snap-align: center;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--fill);
  text-decoration: none;
  color: var(--lavender);
}
.tw-feat-cover {
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(130% 120% at 80% -10%, var(--tint, rgba(254, 142, 36, 0.6)), transparent 60%),
    linear-gradient(160deg, #1F2630, #0F1216);
}
.tw-feat-cover .tw-feat-ic {
  width: 92px;
  height: 92px;
  border-radius: 26%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.tw-feat-cover .tw-feat-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-feat-cover--art {
  background:
    radial-gradient(90% 110% at 84% -10%, rgba(254, 142, 36, 0.4), transparent 62%),
    radial-gradient(80% 90% at 12% 108%, rgba(74, 143, 231, 0.32), transparent 60%),
    repeating-linear-gradient(135deg, #202730 0 14px, #28303B 14px 28px);
}
.tw-feat-bd {
  display: block;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
}
.tw-feat-kick {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.tw-feat-t {
  display: block;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.tw-feat-d {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-2);
  margin-top: 4px;
}
.tw-swipe {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-align: center;
  padding: 10px 0 0;
  margin: 0;
}

/* Section labels + essentials rows */
.tw-label {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--dim);
  padding: 24px var(--pad) 8px;
  margin: 0;
  text-transform: uppercase;
}
.tw-ess {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--pad);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: var(--lavender);
}
.tw-ess:last-of-type { border-bottom: 0; }
.tw-ess .tw-ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  flex: none;
}
.tw-ess .tw-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-ess-bd { flex: 1; min-width: 0; }
.tw-ess-t { display: block; font-weight: 700; font-size: 14px; letter-spacing: -0.01em; transition: color 0.2s; }
.tw-ess:hover .tw-ess-t { color: var(--orange); }
.tw-ess-d {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}
.tw-ess-rt {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: var(--orange);
  flex: none;
}

/* All apps — full A-Z icon grid */
.tw-more {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 12px;
  padding: 8px var(--pad) 20px;
}
.tw-mini { text-align: center; text-decoration: none; color: var(--lavender); transition: transform 0.22s; }
.tw-mini:hover { transform: translateY(-3px); }
.tw-mini .tw-ic {
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0 auto;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.tw-mini .tw-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-mini .tw-ic--art {
  background:
    radial-gradient(90% 110% at 84% -10%, rgba(254, 142, 36, 0.4), transparent 62%),
    radial-gradient(80% 90% at 12% 108%, rgba(74, 143, 231, 0.32), transparent 60%),
    repeating-linear-gradient(135deg, #202730 0 10px, #28303B 10px 20px);
}
.tw-mini-t { display: block; font-weight: 600; font-size: 12px; margin-top: 9px; letter-spacing: -0.01em; }
.tw-mini-d {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin-top: 3px;
}

@media (min-width: 700px) {
  .tw-feat { flex-basis: 520px; }
  .tw-feat-cover { height: 230px; }
  .tw-more { grid-template-columns: repeat(5, 1fr); }
}

/* --- App-profile extras for 3D Menu: full-width figures, numbered steps, offer card --- */
.ap-figure {
  margin: 10px 24px 8px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--plum);
}
.ap-figure img { display: block; width: 100%; height: auto; }

.ap-steps { padding: 8px 24px 6px; }
.ap-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.ap-step:last-child { border-bottom: 0; }
.ap-step .num {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--art-a) 45%, transparent);
  background: color-mix(in srgb, var(--art-a) 14%, transparent);
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 11px;
  color: var(--art-a);
  filter: brightness(1.35);
}
.ap-step .bd { flex: 1; }
.ap-step .t {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
}
.ap-step .d {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--soft);
  margin-top: 2px;
}

.ap-offer {
  margin: 6px 24px 24px;
  padding: 22px 18px;
  border-radius: 16px;
  text-align: center;
  background: color-mix(in srgb, var(--art-a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--art-a) 26%, transparent);
}
.ap-offer-t {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  margin: 0;
}
.ap-offer-d {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--soft);
  margin: 10px 0 0;
}
.ap-offer-ref {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--art-a);
  filter: brightness(1.35);
  margin: 12px 0 0;
}

/* =====================================================
   ARTICLE PROSE EXTENSIONS
   Elements produced by the article build (build/build.js)
   from Markdown: headings, links, lists, quotes, figures.
   ===================================================== */
.prose--article h2 {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--lavender);
  margin: 28px 0 12px;
}
.prose--article h3 {
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--lavender);
  margin: 24px 0 10px;
}
.prose--article a {
  color: var(--orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose--article strong { color: var(--lavender); font-weight: 600; }
.prose--article code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--fill);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
}
.prose--article ul,
.prose--article ol { margin: 0 0 16px; padding-left: 20px; }
.prose--article li { margin: 0 0 8px; }
.prose--article blockquote {
  margin: 20px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--orange);
  color: var(--muted-2);
  font-style: italic;
}
.prose--article hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.prose-media { margin: 22px 0 24px; }
.prose-media .media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
}
.prose-media .media > img { width: 100%; height: 100%; object-fit: cover; }
.prose-media figcaption {
  font-family: var(--font-mono);
  font-weight: var(--font-mono-w);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 7px;
}

/* Sticky "Related to this article" bar on generated article pages: same
   mechanics as .store-badges — sits inside <article>, pins to the viewport
   bottom while the article scrolls, releases right above the footer. */
.mention-block--sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin: 20px 0 0;
  padding: 12px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 18, 22, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--line);
}
/* The share fab would sit on top of the bar; lift it above on pages that have one.
   Tracks the bar's height (97px since the label was dropped) + ~11px breathing room. */
main:has(.mention-block--sticky) .share-fab {
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
}

/* =====================================================================
   Label weights (Libre Franklin)
   --font-mono-w (700) is right for the uppercase micro-labels, but too
   heavy for the sentence-case captions, meta and credit lines that also
   use the label face. Those read better at 500.
   ===================================================================== */
.pe-caption,
.pj-caption,
.ap-figcap,
.prose-media figcaption,
.footer-bar .f-copy,
.pe-signed .meta-line,
.review-author .ra-meta,
.menu-article .ma2-meta,
.menu-feature .mf-meta,
.jr-meta,
.pj-meta,
.ln-src,
.love-foot,
.crowd-count,
.ap-verse-ref,
.ap-fact,
.ap-receipt .rc-foot {
  font-weight: 500;
}