/* bettingapp.in — hand-written design system. Archetype: app-store storefront directory.
   Palette family: ocean (peacock + saffron on cool near-white). No framework. */

@layer reset, tokens, base, layout, components, signature, utilities;

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  font-weight: 300 800; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  font-weight: 400 700; font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('/fonts/martian-mono-latin.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  h1, h2, h3, h4 { overflow-wrap: break-word; }
  /* the [hidden] attribute must always win over a class's own display value
     (.btn/.oiq-offer/.bc-leaf etc. set display:inline-block/flex/grid at the
     same specificity as the UA [hidden] rule, and author CSS loads after the
     UA sheet — without this, hidden interactive elements render anyway) */
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    /* ocean family — peacock + saffron */
    --ink: #122730;
    --ink-soft: #3d5560;
    --ink-mute: #61797f;
    --bg: #f6fafb;
    --surface: #ffffff;
    --line: #dfeaee;
    --line-strong: #c3d6dc;
    --peacock: #0e6e8c;
    --peacock-deep: #0a5069;
    --peacock-night: #0c2e3c;   /* dark panels (App of the Month) */
    --peacock-tint: #e3f1f5;
    --saffron: #e8930c;
    --saffron-deep: #b56f04;
    --saffron-tint: #fdf1dd;
    --danger: #ad3a2d;

    /* type */
    --f-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
    --f-body: 'Instrument Sans', system-ui, sans-serif;
    --f-num: 'Martian Mono', ui-monospace, monospace;

    /* motion — stagger-cascade personality */
    --tempo: cubic-bezier(.22, .58, .26, 1);
    --tick-1: 130ms;
    --tick-2: 300ms;
    --tick-3: 560ms;
    --cascade: 55ms;

    --radius-icon: 14px;   /* squircle app icons */
    --radius-pill: 999px;
    --radius-panel: 10px;
    --shell: 1120px;
  }
  ::selection { background: var(--peacock); color: #fff; }
  :focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; border-radius: 2px; }
}

@layer base {
  html { scrollbar-color: var(--peacock) var(--bg); scroll-behavior: smooth; }
  body {
    font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.65;
    background: var(--bg); color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.15; letter-spacing: -0.015em; }
  h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 750; }
  h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; margin-block: 2.2rem .9rem; }
  h3 { font-size: 1.14rem; font-weight: 650; margin-block: 1.4rem .5rem; }
  p { margin-block: 0 1rem; }
  ul, ol { padding-inline-start: 1.3rem; margin-block: 0 1.1rem; }
  li { margin-block-end: .35rem; }
  li::marker { color: var(--peacock); }
  ul li::marker { content: '● '; font-size: .62em; }  /* cricket-ball dot marker */
  .num { font-family: var(--f-num); font-weight: 500; font-size: .92em; letter-spacing: -0.02em; }
  a { color: var(--peacock-deep); }
  table { border-collapse: collapse; width: 100%; margin-block: 1rem 1.4rem; font-size: .95rem; }
  th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
  th { font-family: var(--f-display); font-weight: 650; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
  .tblwrap { overflow-x: auto; }
  @media (max-width: 640px) {
    /* stacked label:value cards — sideways scroll hides whole columns on phones,
       so this is the only accepted mobile treatment, not a fallback for it */
    .tblwrap { overflow-x: visible; }
    .tblwrap table { display: block; }
    .tblwrap thead { display: none; }
    .tblwrap tbody { display: block; }
    .tblwrap tr { display: block; border: 1px solid var(--line); border-radius: var(--radius-icon); padding: .2rem .9rem; margin-block-end: .7rem; }
    .tblwrap tr:last-child { margin-block-end: 0; }
    /* block, not flex: label + value must wrap as ordinary text — a flex row with
       both a label and a long value fighting to stay on one line is what overflowed here */
    .tblwrap td { display: block; padding: .5rem 0; border-bottom: 1px dashed var(--line); }
    .tblwrap td:last-child { border-bottom: 0; }
    .tblwrap td::before { content: attr(data-th) ": "; font-family: var(--f-display); font-weight: 650; font-size: .78rem; color: var(--ink-soft); }
    /* a blank <th> marks a row-label column (e.g. comparison tables) — render as a card title, not a label:value line */
    .tblwrap td[data-th=""] { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: var(--ink); border-bottom-style: solid; }
    .tblwrap td[data-th=""]::before { content: none; }
  }

  /* stumps-and-bails divider — signature moment #2 */
  hr.stumps {
    border: 0; height: 26px; margin: 2.6rem auto; width: min(360px, 80%);
    background:
      radial-gradient(circle 3px at 24% 4px, var(--saffron) 98%, transparent),
      radial-gradient(circle 3px at 76% 4px, var(--saffron) 98%, transparent),
      linear-gradient(var(--line-strong), var(--line-strong)) 50% 100% / 100% 1px no-repeat,
      linear-gradient(var(--peacock) 0 0) calc(50% - 26px) 100% / 4px 18px no-repeat,
      linear-gradient(var(--peacock) 0 0) 50% 100% / 4px 18px no-repeat,
      linear-gradient(var(--peacock) 0 0) calc(50% + 26px) 100% / 4px 18px no-repeat;
    background-repeat: no-repeat;
  }
}

@layer layout {
  .shell { max-width: var(--shell); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.6rem); }
  .skiplink { position: absolute; left: -9999px; top: 0; background: var(--peacock-night); color: #fff; padding: .6rem 1rem; z-index: 99; }
  .skiplink:focus { left: 0; }

  .masthead { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
  .masthead-in { display: flex; align-items: center; gap: 1.1rem; min-height: 62px; }
  .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); margin-right: auto; }
  .brand-mark { border-radius: 9px; }
  .brand-word { font-family: var(--f-display); font-weight: 750; font-size: 1.18rem; letter-spacing: -0.02em; }
  .brand-tld { color: var(--peacock); }
  .dock { display: flex; gap: .15rem; flex-wrap: wrap; }
  .dock a {
    position: relative; text-decoration: none; color: var(--ink-soft);
    font-size: .93rem; font-weight: 550; padding: .45rem .65rem; border-radius: var(--radius-pill);
    transition: color var(--tick-1) var(--tempo), background-color var(--tick-1) var(--tempo);
  }
  .dock a::after {  /* sliding dot indicator */
    content: ''; position: absolute; left: 50%; bottom: -1px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--saffron); transform: translateX(-50%) scale(0);
    transition: transform var(--tick-1) var(--tempo);
  }
  .dock a:hover, .dock a[aria-current="page"] { color: var(--peacock-deep); background: var(--peacock-tint); }
  .dock a:hover::after, .dock a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
  .dock-toggle { display: none; background: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: .35rem .7rem; align-items: center; gap: .4rem; color: var(--ink-soft); cursor: pointer; }
  .agechip { font-family: var(--f-num); font-size: .72rem; font-weight: 700; border: 1.5px solid var(--danger); color: var(--danger); border-radius: 6px; padding: .12rem .34rem; }

  @media (max-width: 860px) {
    .dock-toggle { display: inline-flex; }
    .dock { display: none; width: 100%; order: 9; padding-block: .6rem; border-top: 1px solid var(--line); }
    .dock.dock--open { display: flex; }
    .masthead-in { flex-wrap: wrap; }
    .no-js .dock { display: flex; }  /* no-JS: nav always visible */
  }

  .basefoot { background: var(--peacock-night); color: #cfe2e9; margin-top: 4rem; padding-block: 2.6rem 1.4rem; font-size: .92rem; }
  .basefoot a { color: #e7f2f6; text-decoration: none; display: block; padding-block: .18rem; }
  .basefoot a:hover { color: var(--saffron); }
  .basefoot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 1.6rem; }
  .basefoot-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8fb4c1; margin-block: 0 .5rem; font-family: var(--f-display); }
  .basefoot-brand p { color: #9dbcc7; }
  .basefoot .brand-word { color: #fff; }
  .basefoot-legal { display: flex; gap: .9rem; align-items: flex-start; border-top: 1px solid #1d4557; margin-top: 1.8rem; padding-top: 1.2rem; color: #9dbcc7; }
  .basefoot-legal .agechip { flex: none; border-color: var(--saffron); color: var(--saffron); }
  .basefoot-copy { color: #6e93a1; margin-top: 1rem; }
  @media (max-width: 860px) { .basefoot-grid { grid-template-columns: 1fr 1fr; } }
}

@layer components {
  /* ---- storefront hero ---- */
  .storefront { display: grid; grid-template-columns: 1.25fr .95fr; gap: 2.2rem; align-items: center; padding-block: clamp(1.8rem, 4vw, 3.2rem) 1.6rem; }
  .storefront > * { min-width: 0; }
  .storefront .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; }
  .kicker { font-family: var(--f-num); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--peacock); display: block; margin-bottom: .7rem; }
  .hl { color: var(--peacock); }
  @media (max-width: 860px) { .storefront { grid-template-columns: 1fr; } }

  /* App of the Month — dark feature card */
  .aotm { background: var(--peacock-night); color: #fff; border-radius: var(--radius-panel); padding: 1.4rem; position: relative; overflow: hidden; }
  .aotm::before { content: ''; position: absolute; inset: auto -30% -55% auto; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232,147,12,.28), transparent 65%); }
  .aotm-flag { position: absolute; top: 0; right: 0; background: var(--saffron); color: var(--peacock-night); font-family: var(--f-num); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .6rem; border-radius: 0 0 0 var(--radius-panel); }
  .aotm-head { display: flex; gap: .9rem; align-items: center; margin-bottom: .8rem; }
  .aotm-head img { border-radius: var(--radius-icon); background: var(--peacock-tint); }
  .aotm-name { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; }
  .aotm-sub { color: #a9c8d3; font-size: .88rem; }
  .aotm-offer { font-family: var(--f-display); font-size: 1.5rem; font-weight: 750; color: var(--saffron); margin-block: .2rem .9rem; }
  .aotm-offer small { display: block; font-family: var(--f-num); font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #8fb4c1; margin-bottom: .25rem; }

  /* ---- the ledger (ranked app rows) ---- */
  .ledger { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; }
  .listing { display: grid; grid-template-columns: auto auto 1.35fr 1.5fr auto; grid-template-areas: "pos icon id facts act" "pos icon wn wn wn"; gap: .3rem 1.1rem; align-items: center; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--line); position: relative; margin: 0; }
  .listing:last-child { border-bottom: 0; }
  .listing::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--saffron); transform: scaleY(0); transform-origin: top; transition: transform var(--tick-1) var(--tempo); }
  .listing:hover::before { transform: scaleY(1); }
  .pos { grid-area: pos; font-family: var(--f-num); font-weight: 700; font-size: 1.05rem; color: var(--line-strong); }
  .listing:nth-child(-n+3) .pos { color: var(--saffron); }
  .appicon { grid-area: icon; }
  .appicon img { border-radius: var(--radius-icon); border: 1px solid var(--line); background: var(--peacock-tint); }
  .listing-id { grid-area: id; min-width: 0; }
  .appname { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); text-decoration: none; }
  .appname:hover { color: var(--peacock-deep); }
  .scoreline { display: flex; flex-wrap: wrap; row-gap: .2rem; align-items: center; gap: .25rem; margin-block: .15rem .3rem; }
  .star { flex: none; }
  .score { font-weight: 700; color: var(--ink); margin-left: .2rem; }
  .scale, .esthint { color: var(--ink-mute); font-size: .8rem; }
  .esthint { margin-left: .4rem; }
  .tagset { display: flex; gap: .3rem; flex-wrap: wrap; }
  .tag { font-size: .72rem; font-weight: 600; color: var(--peacock-deep); background: var(--peacock-tint); border-radius: var(--radius-pill); padding: .12rem .55rem; }
  .listing-facts { grid-area: facts; display: flex; gap: 1.2rem; flex-wrap: wrap; }
  .fact { display: grid; gap: .05rem; font-size: .88rem; }
  .fact-k { font-family: var(--f-num); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-mute); }
  .fact-v { font-weight: 600; }
  .payset { display: flex; gap: .25rem; flex-wrap: wrap; }
  .pay { font-family: var(--f-num); font-size: .66rem; font-weight: 600; border: 1px solid var(--line-strong); border-radius: 5px; padding: .1rem .38rem; color: var(--ink-soft); background: var(--bg); }
  .pay--more { border-style: dashed; }
  .listing-act { grid-area: act; display: grid; justify-items: center; gap: .35rem; }
  .offer { font-family: var(--f-display); font-weight: 700; font-size: .95rem; color: var(--saffron-deep); text-align: center; max-width: 15ch; line-height: 1.25; }
  .fineprint { font-size: .8rem; color: var(--ink-mute); }
  .whatsnew { grid-area: wn; font-size: .85rem; margin-top: .3rem; }
  .whatsnew summary { list-style: none; cursor: pointer; display: inline-flex; gap: .45rem; align-items: center; color: var(--ink-mute); }
  .whatsnew summary::-webkit-details-marker { display: none; }
  .wn-badge { font-family: var(--f-num); font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--peacock); border: 1px solid var(--peacock-tint); background: var(--peacock-tint); padding: .08rem .45rem; border-radius: 4px; }
  .whatsnew[open] .wn-badge { background: var(--peacock); color: #fff; }
  .whatsnew p { margin: .5rem 0 .2rem; color: var(--ink-soft); max-width: 75ch; }
  .wn-caveat { color: var(--saffron-deep); }
  @media (max-width: 860px) {
    .listing { grid-template-columns: auto auto 1fr auto; grid-template-areas: "pos icon id act" "pos icon facts act" "wn wn wn wn"; }
    .listing-facts { gap: .8rem; }
  }
  @media (max-width: 560px) {
    /* score line, bonus and CTA each get their own full-width row — no shared track to overlap into */
    .listing { grid-template-columns: auto 1fr; grid-template-areas: "icon id" "facts facts" "act act" "wn wn"; row-gap: .55rem; }
    .pos { display: none; }
    .listing-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .4rem .9rem; }
    .listing-act .offer { flex: 1 1 auto; max-width: none; text-align: left; }
    .listing-act .getapp { flex: 0 0 auto; }
    .listing-act .fineprint { flex: 1 0 100%; }
  }

  /* ---- buttons: key-cap physics ---- */
  .getapp, .btn {
    display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
    font-family: var(--f-display); font-weight: 700; font-size: .95rem;
    background: var(--peacock); color: #fff; border: 0; border-radius: 9px;
    padding: .55rem 1.25rem; position: relative; overflow: hidden;
    box-shadow: 0 3px 0 var(--peacock-deep);
    transition: transform var(--tick-1) var(--tempo), box-shadow var(--tick-1) var(--tempo), background-color var(--tick-1) var(--tempo);
  }
  .getapp:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--peacock-deep); }
  .getapp:active, .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--peacock-deep); transition-duration: 60ms; }
  .btn--saffron { background: var(--saffron); color: var(--peacock-night); box-shadow: 0 3px 0 var(--saffron-deep); }
  .btn--saffron:hover { box-shadow: 0 4px 0 var(--saffron-deep); }
  .btn--saffron:active { box-shadow: 0 1px 0 var(--saffron-deep); }
  .btn--ghost { background: transparent; color: var(--peacock-deep); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--peacock); transform: none; }
  /* install progress state — signature moment #1 (JS adds .is-installing) */
  .getapp::before { content: ''; position: absolute; inset: 0; background: var(--saffron); transform: translateX(-101%); z-index: 0; }
  .getapp > * , .getapp { z-index: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .getapp.is-installing::before { animation: install-sweep 650ms var(--tempo) forwards; }
  }
  .getapp.is-installing { color: var(--peacock-night); }
  @keyframes install-sweep { to { transform: translateX(0); } }

  /* ---- content links: chip-inflate (site link treatment) ---- */
  main p a, main li a, .chiplink {
    position: relative; z-index: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; color: var(--peacock-deep); border-radius: var(--radius-pill);
  }
  main p a::before, main li a::before, .chiplink::before {
    content: ''; position: absolute; inset: -2px -7px; border-radius: var(--radius-pill); z-index: -1;
    background: var(--peacock-tint); opacity: 0; transform: scale(.92);
    transition: opacity var(--tick-1) var(--tempo), transform var(--tick-1) var(--tempo);
  }
  main p a:hover::before, main li a:hover::before, .chiplink:hover::before { opacity: 1; transform: scale(1); }
  main p a:hover, main li a:hover, .chiplink:hover { text-decoration: none; }

  /* ---- category tiles ---- */
  .catrail { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-block: 1.4rem; }
  .cat { display: grid; gap: .3rem; justify-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1rem; text-decoration: none; color: var(--ink); transition: border-color var(--tick-1) var(--tempo), transform var(--tick-1) var(--tempo); }
  .cat:hover { border-color: var(--peacock); transform: translateY(-2px); }
  .cat svg { color: var(--peacock); }
  .cat b { font-family: var(--f-display); font-weight: 650; }
  .cat span { font-size: .8rem; color: var(--ink-mute); }
  @media (max-width: 860px) { .catrail { grid-template-columns: repeat(2, 1fr); } }

  /* ---- panels / sections ---- */
  .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: clamp(1.1rem, 2.5vw, 1.7rem); }
  .panel--night { background: var(--peacock-night); border-color: var(--peacock-night); color: #dcebf1; }
  .panel--night h2, .panel--night h3 { color: #fff; }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

  /* site-specific note treatment (NOT the border-l-4 callout) */
  .fieldnote { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; background: var(--saffron-tint); border-radius: var(--radius-panel); padding: .9rem 1rem; margin-block: 1.1rem; font-size: .95rem; }
  .fieldnote::before { content: ''; width: 18px; height: 18px; margin-top: .15rem; border-radius: 4px; background: var(--saffron); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

  /* ---- FAQ: app-icon +/× toggle ---- */
  .faq { border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; padding: .95rem .2rem; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary h3 { margin: 0; font-size: 1.02rem; }
  .faq summary::before {
    content: ''; width: 22px; height: 22px; border-radius: 7px; background: var(--peacock-tint);
    background-image: linear-gradient(var(--peacock-deep), var(--peacock-deep)), linear-gradient(var(--peacock-deep), var(--peacock-deep));
    background-size: 10px 2px, 2px 10px; background-position: center; background-repeat: no-repeat;
    transition: transform var(--tick-1) var(--tempo);
  }
  .faq details[open] summary::before { transform: rotate(45deg); }
  .faq details > p, .faq details > div { padding: 0 .2rem 1rem 2.35rem; color: var(--ink-soft); }

  /* hero photo strip (homepage, below the ranking) */
  .heroshot { margin: 2.4rem 0; }
  .heroshot picture, .heroshot img { border-radius: var(--radius-panel); overflow: hidden; display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; }
  .heroshot figcaption { margin-top: .5rem; font-size: .85rem; color: var(--ink-mute); text-align: center; }

  /* cornerstone header thumbnail (hub + review pages) */
  .topicshot { float: right; margin: 0 0 1rem 1.4rem; width: 128px; height: 128px; border-radius: var(--radius-panel); overflow: hidden; }
  .topicshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 640px) { .topicshot { float: none; margin: 0 auto 1.2rem; } }

  /* dynamic-queue release list (updates hub + guides "newest additions") */
  .updatelist { list-style: none; padding: 0; margin: 0 0 1.4rem; border-top: 1px solid var(--line); }
  .updatelist:empty { display: none; }
  .updatelist .guide-item { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .updatelist .guide-item a { font-weight: 600; }
  .updatelist .guide-item .meta { font-family: var(--f-num); font-size: .82rem; color: var(--ink-mute); white-space: nowrap; }

  /* guides teasers */
  .teasers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .teaser { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 1.1rem; text-decoration: none; color: var(--ink); display: grid; gap: .4rem; align-content: start; transition: border-color var(--tick-1) var(--tempo); }
  .teaser:hover { border-color: var(--peacock); }
  .teaser time { font-family: var(--f-num); font-size: .7rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; }
  .teaser b { font-family: var(--f-display); font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
  .teaser span { font-size: .88rem; color: var(--ink-soft); }
  @media (max-width: 860px) { .teasers { grid-template-columns: 1fr; } }

  /* ---- review-index cards (apps.html) ---- */
  .applist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-block: 1.2rem 1.6rem; }
  .applist-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .appcard { display: grid; align-content: start; }
  .appcard .aotm-head img { border-radius: var(--radius-icon); background: var(--peacock-tint); }
  .appcard .aotm-name a:hover { color: var(--peacock-deep); }

  /* article layout */
  .prose { max-width: 74ch; }
  .prose > h2 { scroll-margin-top: 80px; }
  .bylinebar { display: flex; flex-wrap: wrap; row-gap: .3rem; gap: .8rem; align-items: center; color: var(--ink-mute); font-size: .85rem; font-family: var(--f-num); margin-block: .6rem 1.6rem; }
  .bylinebar time { color: var(--ink-soft); }
}

@layer signature {
  /* reveal: clip-wipe rows, stagger-cascade (JS adds .wipe-wait/.wipe-in; no-JS sees everything) */
  .wipe-wait { clip-path: inset(0 100% 0 0); opacity: .001; }
  .wipe-in {
    clip-path: inset(0 0 0 0); opacity: 1;
    transition: clip-path var(--tick-2) var(--tempo), opacity var(--tick-2) var(--tempo);
    transition-delay: calc(var(--i, 0) * var(--cascade));
  }
  @media (prefers-reduced-motion: reduce) {
    .wipe-wait { clip-path: none; opacity: 1; }
  }
}

@layer utilities {
  .mt-0 { margin-top: 0; }
  .mb-2 { margin-bottom: 1.4rem; }
  .center { text-align: center; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
}