/* סרטון האול. The site picks up where the visitor left the feed: a profile
   grid of real items, and each item opens as a vertical post with burned-in
   captions, a yellow price sticker and an action rail. One night-feed theme
   (the scene is a phone in the evening, straight from a short-video app).
   Shape rule: grid frames 10px (the reel and the player 14px on a desktop),
   stickers 6px, panels 12px, buttons are pills, the profile tabs are
   underlined the way a profile's are, avatar and rail buttons are circles. No borrowed app brand: no logos, no
   brand colours; only the grammar every vertical feed shares. */

/* Self-hosted faces (assets/fonts, Fontsource woff2, OFL): Hebrew and Latin
   subsets each, so a page fetches only the scripts its words use. ₪ sits in
   the Hebrew subset. */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/fredoka-hebrew-500-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/fredoka-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/fredoka-hebrew-600-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/fredoka-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/fredoka-hebrew-700-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/fredoka-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/noto-sans-hebrew-hebrew-400-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/noto-sans-hebrew-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/noto-sans-hebrew-hebrew-600-normal.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Noto Sans Hebrew'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/noto-sans-hebrew-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --night: #0d0d0f;
  --raise: #17171b;
  --raise-2: #212127;
  --line: #2a2a30;
  --ink: #f5f5f2;
  --dim: #a7a7ae;
  --sticker: #ffe14d;
  --sticker-ink: #111111;
  --cap: 'Fredoka', 'Varela Round', 'Arial Hebrew', Arial, sans-serif;
  --text: 'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
  --gutter: 14px;
  --wide: 1180px;
  --top-h: 52px;
  color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 28px; --top-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--raise-2) var(--night); }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 1rem/1.65 var(--text); caret-color: var(--sticker); -webkit-font-smoothing: antialiased; }
::selection { background: var(--sticker); color: var(--sticker-ink); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--dim); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--sticker); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--cap); font-weight: 600; line-height: 1.2; margin: 0; }
h2 { font-size: clamp(1.25rem, 3.8vw, 1.6rem); margin-block-end: 0.8em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
bdi { unicode-bidi: isolate; }
code { font: 600 0.95em var(--cap); letter-spacing: 0.03em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: var(--gutter); top: -100px; z-index: 100; background: var(--sticker); color: var(--sticker-ink); padding: 0.5em 1em; border-radius: 999px; font: 600 1rem var(--cap); }
.skip:focus { top: 8px; }
.ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The caption sticker: the feed's own way of putting a word on a picture. */
.sticker {
  display: inline-block; background: var(--sticker); color: var(--sticker-ink);
  font: 700 0.95rem/1 var(--cap); padding: 0.32em 0.5em 0.28em; border-radius: 6px; white-space: nowrap;
}

/* -------------------------------------------------------------- top --- */

.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--night) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); }
.top-in { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); height: var(--top-h); display: flex; align-items: center; gap: 24px; }
/* The mark (lib/logo.mjs): "m", the eyes as the double o, "tagim". The eyes
   look into the page; a hover turns them to the visitor. */
.mark { font: 700 1.5rem/1 var(--cap); text-decoration: none; color: var(--ink); letter-spacing: -0.01em; }
.wm { display: inline-flex; align-items: baseline; direction: ltr; unicode-bidi: isolate; }
/* A touch taller than the x-height: googly enough to read as eyes, bottoms on the baseline. */
.wm-eyes { height: 0.74em; width: auto; margin-inline: 0.02em 0.03em; position: relative; top: 0.05em; }
.eyes .sclera { fill: var(--ink); }
.eyes .pupil { fill: var(--night); }
.eyes .glint { fill: var(--ink); }
.mark .pupil, .mark .glint { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.mark:hover .pupil, .mark:hover .glint, .mark:focus-visible .pupil, .mark:focus-visible .glint { transform: translateX(7px); }
@media (prefers-reduced-motion: reduce) { .mark .pupil, .mark .glint { transition: none; } }
.top-nav { display: none; gap: 6px; margin-inline-start: auto; }
.top-nav a { font: 500 0.95rem var(--cap); text-decoration: none; color: var(--dim); padding: 0.4em 0.9em; border-radius: 999px; }
.top-nav a:hover { color: var(--ink); background: var(--raise); }
.top-nav a[aria-current] { color: var(--ink); background: var(--raise-2); }
@media (min-width: 960px) { .top-nav { display: flex; } }
/* A category page carries the same links as tabs right under the bar. */
@media (min-width: 960px) { .is-cat .top-nav { display: none; } .is-cat .seek-open { margin-inline-start: auto; } }
.seek-open { margin-inline-start: auto; font: 600 0.95rem var(--cap); color: var(--ink); background: var(--raise); border: 0; padding: 0.5em 1.2em; border-radius: 999px; cursor: pointer; }
@media (min-width: 960px) { .seek-open { margin-inline-start: 0; } }
.seek-open:hover { background: var(--raise-2); }
/* Join the channel: the one yellow pill in the bar, beside the search. */
.tg-join { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font: 600 0.95rem var(--cap); color: var(--sticker-ink); background: var(--sticker); text-decoration: none; padding: 0.45em 1em 0.45em 0.9em; border-radius: 999px; }
.tg-join .ico { width: 18px; height: 18px; }
.tg-join:hover { background: var(--ink); }
.top-in { gap: 12px; }
@media (min-width: 960px) { .top-in { gap: 18px; } }
/* The narrowest phones keep the plane and drop the words. */
@media (max-width: 359.98px) { .tg-join span:not(.vh) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .tg-join { padding: 0.5em; } }

/* ----------------------------------------------------------- search --- */

.seek { position: fixed; inset: 0; z-index: 50; background: var(--night); overflow-y: auto; overscroll-behavior: contain; }
.seek[hidden] { display: none; }
.seek-in { max-width: 920px; margin-inline: auto; padding: 12px var(--gutter) 48px; }
.seek-form { display: flex; gap: 10px; position: sticky; top: 0; background: var(--night); padding-block: 10px; z-index: 1; }
.seek-form input { flex: 1; min-width: 0; font: 400 1.05rem var(--text); color: var(--ink); background: var(--raise); border: 1px solid var(--line); border-radius: 999px; padding: 0.7em 1.1em; }
.seek-form input:focus { border-color: var(--dim); outline: none; }
.seek-form input::placeholder { color: var(--dim); opacity: 1; }
.seek-close { font: 600 0.95rem var(--cap); color: var(--ink); background: transparent; border: 0; padding: 0 0.6em; cursor: pointer; }
.seek-say { color: var(--dim); font-size: 0.92rem; margin-block: 10px 14px; }
.seek-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
@media (min-width: 720px) { .seek-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ----------------------------------------------------------- layout --- */

main { display: block; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); padding-block-end: 72px; }
.block { margin-block-start: 56px; }
.crumbs { font-size: 0.88rem; color: var(--dim); padding-block: 14px 4px; }
.crumbs a { color: var(--dim); }

/* ---------------------------------------------------------- profile --- */

.profile { display: grid; justify-items: center; text-align: center; gap: 6px; padding-block: 28px 18px; }
.avatar {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sticker); color: var(--sticker-ink); font: 700 3rem/1 var(--cap);
  box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--ink);
  margin-block-end: 10px;
}
/* On the yellow disc the eyes are white with an ink ring: the avatar and the favicon. */
.avatar .eyes { width: 66%; height: auto; }
.avatar .sclera { fill: #fff; stroke: var(--sticker-ink); stroke-width: 2.6; }
.avatar .pupil { fill: var(--sticker-ink); }
.avatar .glint { fill: #fff; }
.profile h1 { font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 700; }
.handle { color: var(--dim); font: 500 0.95rem var(--cap); margin: 0; direction: ltr; }
.stats { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; gap: 28px; }
.stats li { display: grid; justify-items: center; line-height: 1.25; }
.stats b, .stats .stat-price { font: 700 1.2rem var(--cap); }
.stats .stat-l { color: var(--dim); font-size: 0.85rem; }
.bio { max-width: 40ch; margin: 6px 0 0; color: var(--ink); }

/* ------------------------------------------------------------- reel --- */

/* The home opens the way the feed it came from does: an upright supplier clip
   already playing, its caption and price on it, the next one queued. On a
   phone the reel fills the screen but for a strip, so the profile under it
   shows; on a desktop it stands as a portrait player beside the profile. */
.home-hero { display: grid; margin-inline: calc(var(--gutter) * -1); }
/* On a phone the reel already wears the avatar; a second, cut in half by the
   fold, would read as a glitch. */
@media (max-width: 959.98px) { .home-hero .profile .avatar { display: none; } .home-hero .profile { padding-inline: var(--gutter); } }
@media (min-width: 960px) {
  .home-hero { margin-inline: 0; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 28px 12px; }
  .home-hero .profile { justify-items: start; text-align: start; padding-block: 0; align-self: center; }
  .home-hero .bio { max-width: 46ch; }
}
.reel { position: relative; height: calc(100svh - var(--top-h) - 64px); min-height: 460px; max-height: 900px; background: #000; overflow: hidden; isolation: isolate; }
@media (min-width: 960px) { .reel { height: min(80svh, 760px); min-height: 0; aspect-ratio: 9 / 16; border-radius: 14px; } }
.reel-slides { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.reel-slides::-webkit-scrollbar { display: none; }
/* Press and hold pauses the reel; no callout or text selection may answer it. */
.reel-slides { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.reel-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden; background: var(--img) center / cover no-repeat; }
.reel-slide video { width: 100%; height: 100%; object-fit: cover; }
/* A sideways or square clip: a square window cut from the middle, where the
   supplier always films the item, over a fill of its own colour (the blurred
   poster first, then the moving ambient canvas once the clip plays). */
.reel-slide.is-sq { background: #000; isolation: isolate; }
.reel-slide.is-sq::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(30px) brightness(0.75) saturate(1.3); }
.reel-win { position: absolute; inset-inline: 0; top: 44%; transform: translateY(-50%); aspect-ratio: 1; overflow: hidden; }
.reel-win video { width: 100%; height: 100%; object-fit: cover; }
.reel .cap { padding-inline-end: 16px; padding-block-end: 20px; }
.reel-t { font: 600 clamp(1.1rem, 4.6vw, 1.35rem)/1.35 var(--cap); margin: 0; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.reel-go { display: inline-flex; align-items: center; min-height: 46px; margin-block-start: 14px; padding: 0 1.4em; border-radius: 999px; background: var(--sticker); color: var(--sticker-ink); font: 700 1.02rem var(--cap); text-decoration: none; }
.reel-go:hover { background: var(--ink); }
.reel-go:active { transform: translateY(1px); }

/* Segments, the identity line and the pause button ride a scrim at the top. */
.reel-top { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 2; padding: 10px 12px 34px; background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0)); pointer-events: none; }
.reel-top .segs { position: static; inset: auto; }
.reel-top .segs span { overflow: hidden; }
.reel-top .segs span[aria-current='true'] { background: rgb(255 255 255 / 0.28); }
.reel-segs i { display: block; height: 100%; background: var(--ink); transform-origin: right center; transform: scaleX(var(--p, 0)); }
.reel-who { display: flex; align-items: center; gap: 10px; margin-block-start: 12px; }
.avatar-s { width: 34px; height: 34px; font-size: 1.05rem; margin: 0; box-shadow: 0 0 0 2px var(--ink); }
.reel-name { font: 600 1rem var(--cap); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.reel-pause { pointer-events: auto; margin-inline-start: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 0.45); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.reel-pause[hidden] { display: none; }
.reel-pause svg { width: 18px; height: 18px; fill: currentColor; }
.reel-play { position: absolute; inset: 0; margin: auto; z-index: 2; width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 0.5); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.reel-play[hidden] { display: none; }
.reel-play svg { width: 32px; height: 32px; fill: currentColor; }
/* Each new caption's sticker is slapped on as the clip starts: the reel's one
   flourish, an exponential ease-out with no overshoot. */
@media (prefers-reduced-motion: no-preference) {
  .reel-slide.is-in .sticker { animation: land 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  @keyframes land { from { transform: scale(0.82) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Desktop: the reel's items beside it, the one playing ringed in yellow. */
.queue { display: none; }
@media (min-width: 960px) {
  .queue { display: block; margin-block-start: 26px; width: 100%; max-width: 460px; }
  .queue h2 { font-size: 1rem; color: var(--dim); margin-block-end: 10px; }
  .queue ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .queue a { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--raise); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.2s ease; }
  .queue img { width: 100%; height: 100%; object-fit: cover; }
  .queue .sticker { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; font-size: 0.8rem; }
  .queue a[aria-current='true'] { outline-color: var(--sticker); }
  .queue a:hover img { opacity: 0.85; }
}

.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); position: sticky; top: var(--top-h); z-index: 10; background: var(--night); }
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .tabs { justify-content: center; } }
.tabs a { flex: 0 0 auto; font: 600 0.98rem var(--cap); color: var(--dim); text-decoration: none; padding: 12px 14px 10px; border-block-end: 2px solid transparent; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-block-end-color: var(--ink); }
.tabs bdi { font-weight: 400; color: var(--dim); margin-inline-start: 0.35em; font-size: 0.85em; }

.cat-head { text-align: center; padding-block: 26px 10px; max-width: 70ch; margin-inline: auto; }
.cat-about { max-width: 72ch; margin-inline: auto; }
.cat-about p { color: var(--dim); }
.cat-head h1 { font-size: clamp(1.5rem, 5.6vw, 2.3rem); font-weight: 700; }
.lede { margin: 12px 0 0; color: var(--ink); }
.tools { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-block: 14px 16px; }
.tools[hidden] { display: none; }
.sortkey { font: 600 0.9rem var(--cap); color: var(--dim); background: var(--raise); border: 0; padding: 0.45em 1em; border-radius: 999px; cursor: pointer; }
.sortkey:hover { color: var(--ink); }
.sortkey[aria-pressed='true'] { color: var(--sticker-ink); background: var(--ink); }
.tools-n { color: var(--dim); font-size: 0.9rem; margin-inline-start: 6px; }

/* ------------------------------------------------------------ posts --- */

/* The profile grid: tight gutters, portrait frames, the caption under the
   frame and the price as a sticker on it, where a feed would print a count. */
.feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 4px; margin-block-start: 4px; }
@media (min-width: 640px) { .feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .feed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 10px; } }
@media (min-width: 1200px) { .feed { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.post { min-width: 0; }
.post a { display: grid; gap: 7px; text-decoration: none; }
.frame { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--raise); isolation: isolate; }
/* A landscape photo inside a portrait frame, over a blurred fill of itself:
   how every feed shows footage shot the other way. */
/* Barely dimmed: most supplier photos sit on white, and a grey band around a
   white photo reads as dirt, not as a frame. */
.frame::before { content: ''; position: absolute; inset: -12%; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(18px) brightness(0.92) saturate(1.05); }
.frame img { width: 100%; height: 100%; object-fit: contain; }
.frame.is-tall img { object-fit: cover; }
.frame .sticker { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); }
.frame .clip { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / 0.55); display: grid; place-items: center; }
.frame .clip svg { width: 12px; height: 12px; fill: var(--ink); }
.post a:hover .frame img, .post a:focus-visible .frame img { transform: scale(1.03); }
.frame img { transition: transform 0.25s ease; }
.post-cap { font-size: 0.9rem; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Pinned posts: the guide and the size tool, set as text posts. */
.pin .frame { background: var(--sticker); color: var(--sticker-ink); display: grid; align-content: center; padding: 14px; text-align: center; }
.pin .frame::before { content: none; }
.pin-t { font: 700 clamp(1.05rem, 4vw, 1.35rem)/1.25 var(--cap); }
.pin-tag { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; background: var(--sticker-ink); color: var(--sticker); font: 600 0.75rem/1 var(--cap); padding: 0.35em 0.6em; border-radius: 6px; }

.more { display: flex; justify-content: center; margin-block-start: 28px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem var(--cap); text-decoration: none; padding: 0.7em 1.4em; border-radius: 999px; background: var(--raise); color: var(--ink); }
.pill:hover { background: var(--raise-2); }

/* ------------------------------------------------------------ steps --- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 10px; }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps li { counter-increment: step; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; background: var(--raise); border-radius: 10px; padding: 16px; }
.steps .n { grid-row: span 2; font: 700 1.5rem/1 var(--cap); color: var(--sticker); }
.steps h3 { margin-block: 2px 4px; }
.steps p { margin: 0; color: var(--dim); }
.honest { max-width: 70ch; margin-inline: auto; text-align: center; }
.honest p { color: var(--dim); }

/* ------------------------------------------------------------ player --- */

.pp { display: grid; gap: 18px; margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 960px) { .pp { margin-inline: 0; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: start; padding-block-start: 18px; } }

.stage { position: relative; }
@media (min-width: 960px) {
  .stage { display: flex; align-items: flex-end; gap: 14px; position: sticky; top: calc(var(--top-h) + 18px); }
}
.player { position: relative; height: calc(100svh - var(--top-h)); max-height: 940px; background: #000; overflow: hidden; isolation: isolate; }
@media (min-width: 960px) { .player { height: min(84svh, 880px); aspect-ratio: 9 / 16; border-radius: 14px; } }
.slides { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.slide::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(26px) brightness(0.5); }
.slide img { width: 100%; height: 100%; object-fit: contain; }
/* Transparent, so a landscape clip sits on the blurred fill of its own poster
   instead of between two black bands. */
.slide video { width: 100%; height: 100%; object-fit: contain; background: transparent; }
.slide-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgb(0 0 0 / 0.5); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.slide-play svg { width: 30px; height: 30px; fill: currentColor; }
.slide-play[hidden] { display: none; }

/* Story-style segments: one per slide, the current one lit. */
.segs { position: absolute; inset-block-start: 10px; inset-inline: 12px; z-index: 2; display: flex; gap: 3px; pointer-events: none; }
.segs span { flex: 1; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.28); }
.segs span[aria-current='true'] { background: var(--ink); }
.segs-n { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; z-index: 2; margin: 0; pointer-events: none; font: 600 0.85rem/1 var(--cap); color: var(--ink); background: rgb(0 0 0 / 0.5); padding: 0.4em 0.7em; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* The moving fill behind a sideways clip: painted by app.js, blurred here. */
.amb { position: absolute; inset: -10%; width: 120%; height: 120%; z-index: -1; filter: blur(30px) brightness(0.85) saturate(1.7); opacity: 0; transition: opacity 0.6s ease; }
.amb.is-on { opacity: 1; }

/* Opening a post: the tapped tile grows into the player (cross-document view
   transitions; browsers without them simply navigate). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .is-prod .player { view-transition-name: post; }
  ::view-transition-group(post) { animation-duration: 0.38s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}

/* Captions sit on a scrim at the foot of the frame: legibility, not mood. */
.cap { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 70px 16px 18px; padding-inline-end: 84px; background: linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0)); pointer-events: none; }
@media (min-width: 960px) { .cap { padding-inline-end: 16px; } }
.cap > * { pointer-events: auto; }
.cap .handle { margin-block-end: 4px; color: var(--ink); text-align: start; }
.cap h1 { font-size: clamp(1.1rem, 4.6vw, 1.35rem); line-height: 1.35; font-weight: 600; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.cap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.sticker-big { font-size: 1.35rem; }
.cap-sizes { font: 500 0.92rem var(--cap); color: var(--ink); text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }

/* On a phone the rail floats over the frame, so its labels carry their own
   dark plate: a white product photo would swallow white text. On a desktop it
   stands beside the player and needs neither plate nor shadow. */
.rail { position: absolute; inset-inline-end: 8px; inset-block-end: 22px; z-index: 3; display: grid; gap: 12px; justify-items: center; }
@media (min-width: 960px) { .rail { position: static; padding-block-end: 8px; gap: 16px; } }
.rail-btn { display: grid; justify-items: center; gap: 5px; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font: 600 0.75rem var(--cap); }
.rail-btn .disc { width: 48px; height: 48px; border-radius: 50%; background: rgb(0 0 0 / 0.55); display: grid; place-items: center; }
.rail-l { background: rgb(0 0 0 / 0.55); border-radius: 6px; padding: 1px 6px; line-height: 1.5; }
@media (min-width: 960px) {
  .rail-btn .disc { background: var(--raise); }
  .rail-l { background: none; padding: 0; color: var(--dim); }
}
.rail-btn:hover .disc { background: var(--raise-2); }
.rail-buy .disc { background: var(--sticker); color: var(--sticker-ink); }
.rail-buy:hover .disc { background: var(--ink); }

/* The details sheet: everything the frame cannot hold, in reading order. */
.sheet { padding: 4px var(--gutter) 0; min-width: 0; }
@media (min-width: 960px) { .sheet { padding: 0; } }
.sheet .crumbs { padding-block: 0 8px; }
.sheet .title-2 { font: 600 1.25rem/1.35 var(--cap); margin-block-end: 8px; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-block-end: 12px; }
.price-note { color: var(--dim); font-size: 0.9rem; }
.desc { color: var(--ink); }

.pick { margin-block: 16px 4px; scroll-margin-top: calc(var(--top-h) + 14px); }
/* A buy tap that came too early lands here, and the line says what is missing. */
.pick.is-asking .pick-say { color: var(--sticker); }
.pick-row { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.pick-row legend { font: 600 1rem var(--cap); padding: 0; margin-block-end: 10px; }
.pick-help { font: 400 0.88rem var(--text); color: var(--dim); margin-inline-start: 10px; }
.pick-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-width: 52px; min-height: 44px; padding: 0 14px; font: 600 0.95rem var(--cap); color: var(--ink); background: var(--raise); border: 1px solid transparent; border-radius: 999px; cursor: pointer; }
.opt:hover { background: var(--raise-2); }
.opt[aria-pressed='true'] { background: var(--ink); color: var(--sticker-ink); }
.opt.is-out { color: var(--dim); text-decoration: line-through; border-color: var(--line); border-style: dashed; background: transparent; }
.pick-name { font-family: var(--text); font-weight: 400; margin-inline-start: 0.4em; }
.pick-say { color: var(--dim); font-size: 0.88rem; min-height: 1.6em; margin-block: 2px 14px; }

.btn-buy { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 54px; background: var(--sticker); color: var(--sticker-ink); text-decoration: none; font: 700 1.1rem var(--cap); padding: 0.6em 1.4em; border-radius: 999px; transition: background 0.15s ease; }
.btn-buy:hover { background: var(--ink); }
.btn-buy:active { transform: translateY(1px); }
.buy-note { color: var(--dim); font-size: 0.86rem; margin-block: 12px 0; }

.sec { background: var(--raise); border-radius: 12px; padding: 18px; }
.sec + .sec { margin-block-start: 14px; }
.sec > p { color: var(--dim); }
.sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sheet-list img, .chart-img img { border-radius: 8px; background: var(--night); }
.chart-img { overflow-x: auto; }
.about-model p { color: var(--ink); }
.sources { padding-inline-start: 1.2em; color: var(--dim); font-size: 0.88rem; }
.tablewrap { overflow-x: auto; max-width: 520px; }
.foot-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.foot-table th, .foot-table td { text-align: start; padding: 8px 12px; border-block-end: 1px solid var(--line); }
.foot-table thead th { font: 600 0.92rem var(--cap); color: var(--dim); }

.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--night) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block-start: 1px solid var(--line); }
.dock[hidden] { display: none; }
.dock .btn-buy { flex: 1; min-height: 48px; }
@media (min-width: 960px) { .dock { display: none !important; } }
.is-prod main { padding-block-end: 104px; }

/* -------------------------------------------------------------- faq --- */

.faq { max-width: 72ch; margin-inline: auto; display: grid; gap: 8px; }
.faq details { background: var(--raise); border-radius: 12px; }
.faq summary { cursor: pointer; font: 600 1rem/1.5 var(--cap); padding: 14px 16px; list-style-position: inside; }
.faq summary::marker { color: var(--sticker); }
.faq p { color: var(--dim); margin: 0; padding: 0 16px 16px; }

/* ------------------------------------------------------------- docs --- */

.doc article { max-width: 68ch; margin-inline: auto; padding-block: 14px 0; }
.doc h1 { font-size: clamp(1.6rem, 5.4vw, 2.4rem); font-weight: 700; margin-block-end: 10px; }
.doc h2 { margin-block: 40px 12px; }
.doc-date { color: var(--dim); font-size: 0.88rem; }
.doc .lede { font-size: 1.1rem; }
.ticks { padding-inline-start: 1.2em; }
.ticks li { margin-block-end: 8px; }
.ticks li::marker { color: var(--sticker); }
.seq { padding-inline-start: 1.6em; }
.seq li { margin-block-end: 10px; padding-inline-start: 4px; }
.seq li::marker { font: 700 1rem var(--cap); color: var(--sticker); }
.note { color: var(--dim); font-size: 0.92rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; gap: 0.4em; font: 600 0.95rem var(--cap); text-decoration: none; background: var(--raise); padding: 0.5em 1.1em; border-radius: 999px; }
.chips a:hover { background: var(--raise-2); }
.chips bdi { color: var(--dim); font-weight: 400; }
.calc { display: grid; gap: 10px; max-width: 440px; background: var(--raise); border-radius: 12px; padding: 18px; }
.calc[hidden] { display: none; }
.calc label { font: 600 1rem var(--cap); }
.calc input { font: 600 1.4rem var(--cap); color: var(--ink); background: var(--night); border: 1px solid var(--line); border-radius: 999px; padding: 0.4em 0.9em; width: 100%; }
.calc input:focus { border-color: var(--dim); outline: none; }
.calc-out { min-height: 1.7em; }
.calc-out strong { font: 700 1.6rem var(--cap); color: var(--sticker); }

/* The contact form: the same raised panel as the calculator. */
.contact-form { display: grid; gap: 8px; max-width: 560px; background: var(--raise); border-radius: 12px; padding: 18px; margin-block: 22px 26px; }
.contact-form label { font: 600 1rem var(--cap); margin-block-start: 8px; }
.contact-form .opt-l { font: 400 0.88rem var(--text); color: var(--dim); }
.contact-form input, .contact-form textarea { font: 400 1rem/1.5 var(--text); color: var(--ink); background: var(--night); border: 1px solid var(--line); border-radius: 12px; padding: 0.7em 0.9em; width: 100%; }
.contact-form textarea { resize: vertical; min-height: 8.5em; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--dim); outline: none; }
.contact-form .btn-buy { border: 0; cursor: pointer; margin-block-start: 6px; }
.contact-form .btn-buy:disabled { opacity: 0.6; cursor: progress; }
.contact-note { color: var(--dim); font-size: 0.88rem; margin: 4px 0 0; }
.contact-say { min-height: 1.6em; margin: 0; }
.contact-say.is-ok { color: var(--sticker); font-weight: 600; }
.contact-about { margin: 0 0 4px; }
.contact-about[hidden] { display: none; }
/* Off the page for people, there for bots (functions/api/contact.js). */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Scriptless failures come back as /contact#err-<why>; only the target shows. */
.contact-err { display: none; margin: 0; color: var(--sticker); font-weight: 600; }
.contact-err:target { display: block; }
.ask-line { color: var(--dim); font-size: 0.92rem; margin-block: 6px 0; }

/* ----------------------------------------------------------- footer --- */

.foot { border-block-start: 1px solid var(--line); }
.foot-in { max-width: var(--wide); margin-inline: auto; padding: 30px var(--gutter) 44px; display: grid; gap: 22px; }
@media (min-width: 960px) { .foot-in { grid-template-columns: 1fr 1fr 1.4fr; } }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot a { color: var(--dim); text-decoration: none; padding-block: 6px; display: inline-block; font-size: 0.92rem; }
.foot a:hover { color: var(--ink); }
.foot-about { display: grid; gap: 12px; }
.foot-note { color: var(--dim); font-size: 0.86rem; margin: 0; }
.foot-tg a { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}