/* =========================================================================
   HERO — the copy on the left, and "300 to 10" on the right (from
   hero-options-v2/09): a pile of 300 likes falls away, their ten forms
   (filled from the top, clockwise), and yours, in marigold, opens into the
   like it carries. Every rule is scoped under .hero so nothing here reaches
   the rest of the page, and the rest of the page only reaches in through
   the shared tokens on :root. Motion is driven from js/hero.js.
   ========================================================================= */
.hero{
  --maxw:1180px;   /* the same edges as every other section */
  --gut:20px;
  --bar:var(--topbar);
  --foot:0px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
.hero p{margin:0}
.hero [hidden]{display:none !important}
.hero .wrap{width:100%;max-width:var(--maxw);padding:0 var(--gut)}

/* Primary call to action: the accent. */
.hero .cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  padding:16px 26px;border:0;border-radius:14px;background:var(--accent);color:var(--ink);
  font:600 16px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;
  box-shadow:0 12px 26px -14px rgba(15,58,49,.6),inset 0 -2px 0 rgba(15,58,49,.14);
  transition:transform .18s var(--ease),box-shadow .2s ease;
}
.hero .cta:hover{transform:translateY(-1px);box-shadow:0 16px 30px -14px rgba(15,58,49,.66),inset 0 -2px 0 rgba(15,58,49,.14)}
.hero .cta:active{transform:translateY(0) scale(.98)}
.hero .cta .arrow{transition:transform .2s var(--ease)}
.hero .cta:hover .arrow{transform:translateX(3px)}
.hero .cta-sm{padding:11px 17px;font-size:14px;border-radius:12px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:48px 0 56px}
@supports (overflow-x:clip){.hero{overflow-x:clip;overflow-y:visible}}
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:48px;row-gap:48px}
.hero .copy{max-width:560px}
.hero .kicker{
  display:inline-flex;align-items:center;gap:9px;max-width:100%;margin:0 0 28px;
  padding:6px 14px 6px 11px;border:1px solid var(--hair-2);border-radius:18px;background:var(--paper);
  font-size:12.5px;line-height:1.4;color:var(--ink);
}
.hero .live-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(240,167,26,.55)}70%,100%{box-shadow:0 0 0 9px rgba(240,167,26,0)}}
/* "Never a thousand likes / to dig through." on two lines, the italic
   line whole on a third: the measure is wide enough for the first, the
   size small enough for the last to fit the copy column. */
.hero h1{
  margin:0 0 26px;max-width:22ch;font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,3.6vw + 6px,58px);line-height:1;letter-spacing:-.015em;color:var(--ink);
  text-wrap:balance;font-variant-numeric:lining-nums;
}
.hero h1 em{
  display:block;margin-top:.08em;font-style:italic;font-weight:400;font-size:.94em;
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.06em;
  text-underline-offset:.15em;text-decoration-skip-ink:auto;
}
.hero .lede{margin:0 0 32px;max-width:42ch;font-size:17.5px;line-height:1.6;color:var(--text)}
.hero .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.hero .cta-note{max-width:25ch;font-size:13.5px;line-height:1.45;color:var(--text)}
.hero .aside{
  display:flex;align-items:baseline;gap:14px;max-width:38ch;margin-top:44px;
  font-family:var(--serif);font-style:italic;font-size:19.5px;line-height:1.35;color:var(--ink);
}
.hero .aside::before{content:"";flex:none;width:28px;height:1px;background:var(--ink);transform:translateY(-6px)}

/* ---------- responsive (left column and the hero shell only) ---------- */
@media (min-width:1180px){
  .hero{min-height:calc(100vh - var(--bar) - var(--foot));min-height:calc(100svh - var(--bar) - var(--foot));display:flex;align-items:center}
}
@media (min-width:1180px) and (max-height:820px){
  .hero{padding:20px 0 24px}
  .hero .aside{margin-top:32px}
}
@media (min-width:1180px) and (max-height:700px){
  .hero{padding:12px 0 16px}
  .hero .kicker{margin-bottom:20px}
  .hero h1{margin-bottom:18px}
  .hero .lede{margin-bottom:24px}
  .hero .aside{margin-top:24px}
}
@media (max-width:1179px){
  .hero .hero-grid{column-gap:44px}
}
@media (max-width:859px){
  .hero .hero-grid{grid-template-columns:minmax(0,1fr);row-gap:52px}
  .hero .copy{max-width:620px}
  .hero .stage{width:100%}
}
@media (max-width:600px){
  .hero{padding:28px 0 44px}
  .hero .kicker{margin-bottom:22px;border-radius:14px}
  .hero h1{margin-bottom:20px}
  .hero .lede{font-size:16.5px;margin-bottom:26px}
  .hero .aside{margin-top:32px;font-size:18px}
}
@media (prefers-reduced-motion: reduce){
  .hero .live-dot{animation:none}
}

/* =========================================================================
   THE RIGHT SIDE: "300 to 10". Every rule is scoped to .hero .stage; the
   copy column is never touched. Motion runs on one clock in js/hero.js
   (so it pauses off-screen).
   ========================================================================= */
.hero .stage{
  --tt-w:500px;
  --tt-h:clamp(440px, calc(100vh - 340px), 500px);
  --tt-card:440px;
  --tt-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;width:var(--tt-w);max-width:100%;
}
@supports (height:1svh){
  .hero .stage{--tt-h:clamp(440px, calc(100svh - 340px), 500px)}
}
.hero .stage .tt{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ---------- the field: canvas (the 300), the words in the middle, the card ---------- */
.hero .stage .tt-field{
  position:relative;isolation:isolate;width:100%;min-height:var(--tt-h);
  display:grid;place-items:center;padding:20px 0;
}
/* A soft tint halo, kept inside the stage so the copy column is untouched. */
.hero .stage .tt-field::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(216,230,223,.92),rgba(216,230,223,.38) 62%,rgba(216,230,223,0));
}
.hero .stage .tt-cv{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
/* "A pool of likes" over the pile, "Their ten" inside the ring. */
.hero .stage .tt-word{
  position:absolute;left:50%;top:50%;z-index:1;margin:0;transform:translate(-50%,-52%);
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--tt-word,40px);line-height:1.04;
  letter-spacing:-.005em;color:var(--ink);text-align:center;white-space:nowrap;pointer-events:none;
}
.hero .stage .tt-word span{display:block}
/* Two matching shapes, sized from the ring's radius (--tt-R). Over the pile:
   "Everywhere else, / lost / in the pile". Inside the ring: whose ten, how
   many are taken, "of ten"; the figure rolls up by one as your like lands. */
.hero .stage .tt-w-big{
  margin:1px 0 3px;font-size:calc(var(--tt-R,113px) * .6);line-height:.95;letter-spacing:-.01em;color:var(--ink);
}
.hero .stage .tt-w-k{font-size:clamp(13px, calc(var(--tt-R,113px) * .15), 18px);line-height:1.2;color:var(--text)}
.hero .stage .tt-w-n{position:relative;height:calc(var(--tt-R,113px) * .64);margin:2px 0 1px;overflow:hidden}
.hero .stage .tt-w-n b{
  display:block;font-style:normal;font-weight:500;font-size:calc(var(--tt-R,113px) * .74);
  line-height:calc(var(--tt-R,113px) * .64);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:lining-nums;
  transition:transform .6s var(--tt-ease),opacity .45s ease;
}
.hero .stage .tt-w-n b.out{position:absolute;left:0;right:0;top:0;transform:translateY(-75%);opacity:0}
.hero .stage .tt-w-n b.in{transform:translateY(75%);opacity:0;transition:none}
.hero .stage .tt-w-of{font-size:clamp(15px, calc(var(--tt-R,113px) * .19), 22px);line-height:1.15;color:var(--ink)}

/* ---------- the card ---------- */
.hero .stage .tt-card{position:relative;z-index:2;width:min(var(--tt-card),100%);text-align:left}
.hero .stage .tt-glow{
  position:absolute;inset:0;border-radius:22px;pointer-events:none;
  box-shadow:0 50px 70px -46px rgba(10,42,35,.55),0 20px 34px -26px rgba(10,42,35,.4);
}
.hero .stage .tt-sheet{
  position:relative;display:block;overflow:hidden;padding:20px 22px 18px;
  border:1px solid var(--hair);border-radius:22px;background:var(--paper);color:var(--ink);
  font-size:14px;line-height:1.42;
}
.hero .stage .tt-seed{position:absolute;inset:0;z-index:5;background:var(--accent);opacity:0;pointer-events:none}

.hero .stage .tt-head{display:flex;align-items:center;gap:14px}
.hero .stage .tt-pt{flex:none;width:46px;height:56px;border-radius:12px;overflow:hidden;background:var(--tint)}
.hero .stage .tt-pt svg{display:block;width:100%;height:100%}
.hero .stage .tt-id{min-width:0}
.hero .stage .tt-name{display:block;font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.hero .stage .tt-name b{font-weight:600}
.hero .stage .tt-city{display:block;margin-top:5px;font-size:12.5px;line-height:1.3;color:var(--text)}

.hero .stage .tt-week{margin-top:14px;padding:10px 14px 11px;border-left:3px solid var(--ink);border-radius:12px;background:var(--tint)}
.hero .stage .tt-tag{display:block;margin-bottom:3px;font-size:10.5px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hero .stage .tt-week-t{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.18;color:var(--ink)}

/* The body holds the thread. The card's top stays put; it only ever grows
   downward, as the reply comes in. */
.hero .stage .tt-body{display:grid;margin-top:12px}
.hero .stage .tt-thread{grid-area:1/1;min-width:0}
.hero .stage .tt-thread{display:flex;flex-direction:column;gap:7px;align-self:start}
.hero .stage .tt-later{margin-top:-7px}
.hero .stage .tt-later-in{position:relative;display:flex;flex-direction:column;gap:7px;padding-top:7px}
html.js .hero .stage .tt-later{overflow:hidden}
/* With the script, the card's box is sized to the finished card and the
   paper grows inside it; the shadow is sized to the paper. */
html.js .hero .stage .tt-glow{bottom:auto}
.hero .stage .tt-me,.hero .stage .tt-bub{max-width:88%;padding:9px 13px 10px;font-size:14px;line-height:1.42;overflow-wrap:anywhere}
.hero .stage .tt-me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--ink);color:var(--on-ink)}
.hero .stage .tt-land{
  align-self:center;display:flex;align-items:center;gap:7px;margin:1px 0 2px;
  font-size:12px;line-height:1.3;color:var(--text);font-variant-numeric:lining-nums;
}
.hero .stage .tt-ring{flex:none;width:15px;height:15px;overflow:visible}
.hero .stage .tt-ring circle{fill:none;stroke:var(--ink);stroke-width:7}
.hero .stage .tt-ring circle.you{fill:var(--accent)}
.hero .stage .tt-ring circle.held{fill:var(--ink)}
.hero .stage .tt-back-k{font-size:12px;font-weight:600;line-height:1.3;color:var(--ink)}
.hero .stage .tt-them{position:relative;align-self:flex-start;max-width:88%;margin-top:-3px}
.hero .stage .tt-bub{max-width:none;border:1px solid var(--hair);border-radius:18px 18px 18px 6px;background:var(--bg);color:var(--ink)}
.hero .stage .tt-dots{
  position:absolute;left:0;top:0;display:flex;gap:4px;padding:13px 14px;
  border:1px solid var(--hair);border-radius:18px 18px 18px 6px;background:var(--bg);
}
.hero .stage .tt-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.35;animation:tt-blink 1.2s ease-in-out infinite}
.hero .stage .tt-dots i:nth-child(2){animation-delay:.15s}
.hero .stage .tt-dots i:nth-child(3){animation-delay:.3s}
@keyframes tt-blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.hero .stage .tt-convo{
  display:flex;align-items:center;gap:9px;margin-top:5px;padding-top:11px;border-top:1px solid var(--hair);
  font-size:12px;font-weight:600;line-height:1.3;color:var(--ink);font-variant-numeric:lining-nums;
}
.hero .stage .tt-five{display:flex;gap:4px}
.hero .stage .tt-five i{display:block;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink)}
.hero .stage .tt-five i:first-child{background:var(--ink)}

/* ---------- the caption ---------- */
.hero .stage .tt-cap{
  max-width:100%;min-height:1.3em;margin:14px auto 0;
  font-family:var(--serif);font-style:italic;font-size:20.5px;line-height:1.3;color:var(--ink);
  font-variant-numeric:lining-nums;text-wrap:balance;
}
/* ---------- before the script, and without it ---------- */
/* The script sets the opening frame; until then nothing flashes. */
html.js .hero .stage .tt:not(.is-live) .tt-card,
html.js .hero .stage .tt:not(.is-live) .tt-word{visibility:hidden}
/* No script: the finished like, still. */
html:not(.js) .hero .stage .tt-word,
html:not(.js) .hero .stage .tt-cv,
html:not(.js) .hero .stage .tt-dots{display:none}

/* =========================================================================
   RESPONSIVE (the stage only)
   ========================================================================= */
/* Short laptop screens: a tighter card. */
@media (min-width:1180px) and (max-height:820px){
  .hero .stage{--tt-w:480px;--tt-card:424px}
  .hero .stage .tt-field{padding:12px 0}
  .hero .stage .tt-sheet{padding:16px 20px 14px}
  .hero .stage .tt-pt{width:40px;height:50px}
  .hero .stage .tt-name{font-size:24px}
  .hero .stage .tt-week{margin-top:11px;padding:8px 12px 9px}
  .hero .stage .tt-week-t{font-size:19.5px}
  .hero .stage .tt-body{margin-top:10px}
  .hero .stage .tt-thread{gap:6px}
  .hero .stage .tt-me,.hero .stage .tt-bub{padding:8px 12px 9px;font-size:13.5px}
  .hero .stage .tt-convo{padding-top:9px}
  .hero .stage .tt-cap{margin-top:10px;font-size:19.5px}
}
/* Narrower desktops and tablets: the stage keeps to 340px. */
@media (max-width:1179px){
  .hero .stage{--tt-w:340px;--tt-card:340px;--tt-h:440px}
  .hero .stage .tt-field{padding:12px 0}
  .hero .stage .tt-sheet{padding:18px 18px 16px}
  .hero .stage .tt-week-t{font-size:19.5px}
  .hero .stage .tt-me,.hero .stage .tt-bub{font-size:13.5px}
  .hero .stage .tt-cap{font-size:19.5px}
}
/* Stacked under the copy: full width, sized for phones. */
@media (max-width:859px){
  .hero .stage{--tt-w:100%;--tt-card:440px;--tt-h:440px;justify-self:center;max-width:480px}
  .hero .stage .tt-field{padding:24px 0}
}
@media (max-width:420px){
  /* Room for the tallest sample card, so the stage keeps one height. */
  .hero .stage{--tt-h:436px}
  .hero .stage .tt-field{padding:18px 0}
  .hero .stage .tt-sheet{padding:16px 16px 14px}
  .hero .stage .tt-head{gap:12px}
  .hero .stage .tt-pt{width:40px;height:50px}
  .hero .stage .tt-name{font-size:24px}
  .hero .stage .tt-week{padding:9px 12px 10px}
  .hero .stage .tt-week-t{font-size:19px}
  .hero .stage .tt-cap{font-size:19px}
}

@media (prefers-reduced-motion: reduce){
  .hero .stage .tt-dots i{animation:none;opacity:.6}
}