/* Gold Star Behavior. One butter page, cream panels, ink text, gold stars. */

@font-face {
  font-family: "Fredoka Fallback";
  src: url("assets/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  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 Fallback";
  src: url("assets/fonts/fredoka-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: url("assets/fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --butter: #F6E27F;
  --cream: #FFF7DC;
  --gold: #D4A62A;
  --gold-light: #F2C94C;
  --ink: #2B2415;
  --pink: #F5C6D6;
  --ink-soft: rgba(43, 36, 21, 0.74);
  --ink-line: rgba(43, 36, 21, 0.14);
  --ink-wash: rgba(43, 36, 21, 0.08);

  --font: "Fredoka", "Fredoka Fallback", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;

  /* one radius scale: panel > canvas > button > segment */
  --r-panel: 32px;
  --r-canvas: 20px;
  --r-btn: 14px;
  --r-seg: 10px;

  /* the only shadow, for the two interactive cards */
  --shadow-card: 0 30px 50px -24px rgba(43, 36, 21, 0.55), 0 10px 20px -12px rgba(43, 36, 21, 0.32);

  --pad: clamp(20px, 5vw, 64px);
  --max: 1240px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--butter);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (hover: hover) and (pointer: fine) {
  body { cursor: url("assets/cursor-star.png") 16 16, auto; }
  a, button, summary, select, label, [role="tab"] { cursor: url("assets/cursor-star.png") 16 16, pointer; }
  input[type="text"], textarea { cursor: text; }
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--butter); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 70;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: var(--butter);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* only shown when index.html is opened straight from a folder */
.local-note {
  margin: 0;
  padding: 10px var(--pad);
  background: var(--ink);
  color: var(--butter);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
}

main > section,
.end > section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 112px) var(--pad);
}

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

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 32px; height: auto; }
.top-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 479px) { .top-long { display: none; } }
.top-nav { display: none; gap: 30px; }
.top-nav a {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) { .top-nav a:hover { border-bottom-color: var(--ink); } }
@media (min-width: 900px) {
  .top { padding-top: 22px; padding-bottom: 22px; }
  .top-nav { display: flex; }
}

/* ---------- section heads: big heading left, its supporting piece right ---------- */

.head {
  display: grid;
  gap: 20px 56px;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}
.head-note { max-width: 30em; font-size: clamp(19px, 2vw, 22px); line-height: 1.35; }
@media (min-width: 900px) {
  .head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; }
  .head-wall .tabs { justify-self: end; }
}

/* ---------- tape of tiny wins ---------- */

/* the band is only a little wider than the screen, so the tilt stays small
   and nothing gets clipped at the edges */
.tape-wrap { overflow: hidden; padding: clamp(22px, 4vw, 48px) 0; }
.tape {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 120vw;
  margin-left: -10vw;
  overflow: hidden;
  padding: 14px 28px;
  background: var(--ink);
  color: var(--butter);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 22px);
  white-space: nowrap;
  transform: rotate(-2deg);
}
.tape img { flex: none; width: 24px; height: auto; }

h2 {
  font-size: clamp(40px, 6.6vw, 78px);
  line-height: 0.95;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  font: 600 18px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.btn:active { transform: translateY(2px); }
.btn-ink { background: var(--ink); color: var(--butter); }
.btn-line { background: transparent; color: var(--ink); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 16px; }
@media (hover: hover) {
  .btn-ink:hover { background: #40351f; }
  .btn-line:hover { background: var(--cream); }
}

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions-center { justify-content: center; }

/* ---------- hero ---------- */

.hero {
  display: grid;
  gap: 44px;
  padding-top: clamp(12px, 3vw, 36px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}
.logo {
  width: clamp(64px, 14vw, 124px);
  height: auto;
  margin: 0 0 18px -4px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hero h1 {
  font-size: clamp(62px, 14vw, 140px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  max-width: 8ch;
}
.hero-suffix {
  margin-top: 12px;
  font-weight: 600;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.05;
}
.hero-def {
  max-width: 24em;
  margin: 24px 0 30px;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.35;
}
.hero-card {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: min(92%, 520px);
  justify-self: center;
}
/* a second post peeking out behind the live one */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 2px solid var(--ink);
  border-radius: var(--r-canvas);
  background: var(--cream);
  transform: rotate(6deg) translate(3%, 1%);
}
.card-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-canvas);
  box-shadow: var(--shadow-card);
  background: var(--cream);
}
.hero-card .card-canvas { aspect-ratio: 4 / 5; }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: 1.08fr 0.92fr;
    align-items: center;
    min-height: min(82vh, 820px);
  }
  .hero-card { transform: rotate(-2deg); }
}

/* ---------- what is ---------- */

.what h2 { max-width: 13ch; }

/* the definition, set like a real dictionary entry */
.entry {
  display: grid;
  gap: 8px;
  max-width: 34em;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.entry-word { font-weight: 700; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.05; }
.entry-pos { margin-left: 6px; font-weight: 500; font-size: 0.62em; color: var(--ink-soft); }
.entry-def { font-weight: 600; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.3; text-wrap: pretty; }
.ca-bar .btn { margin-left: auto; }
.entry-eg { font-size: 17px; line-height: 1.35; color: var(--ink-soft); }

/* the trend's story: instagram, tiktok, crypto twitter, then the star */
.story-title {
  max-width: 20ch;
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.02;
}
.flow {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.flow::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 80px;
  left: 31px;
  border-left: 3px dashed rgba(43, 36, 21, 0.35);
}
.flow li {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 18px;
  align-items: start;
  padding: 14px 0;
}
.flow li img {
  grid-row: span 2;
  width: 64px;
  height: auto;
  background: var(--butter);
}
.flow li:nth-child(1) img { transform: rotate(-8deg); }
.flow li:nth-child(2) img { transform: rotate(6deg); }
.flow li:nth-child(3) img { transform: rotate(-4deg); }
.flow-where { font-weight: 700; font-size: clamp(23px, 2.4vw, 28px); line-height: 1.05; }
.flow-what { max-width: 26em; font-size: 18px; line-height: 1.4; }
.flow-star {
  z-index: 1;
  margin-top: 10px;
  padding: 22px !important;
  border-radius: var(--r-panel);
  background: var(--ink);
  color: var(--cream);
}
.flow li.flow-star img { background: transparent; transform: rotate(-10deg); }
.flow-star .flow-where { color: var(--butter); font-size: clamp(32px, 3.8vw, 46px); }

/* real press that listed the trend */
.proof {
  display: grid;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}
.proof-title { font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; }
.proof-links { display: flex; flex-wrap: wrap; gap: 12px; }
.proof-links a {
  display: grid;
  flex: 1 1 250px;
  gap: 2px;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.proof-links strong { font-weight: 700; font-size: 17px; }
.proof-links span { font-size: 15px; color: var(--ink-soft); }
@media (hover: hover) { .proof-links a:hover { background: var(--cream); } }
@media (min-width: 900px) {
  .proof { grid-template-columns: auto 1fr; align-items: center; gap: 24px; }
  .proof-links { justify-content: flex-end; }
}
@media (min-width: 1000px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 28px; align-items: start; }
  .flow::before { top: 40px; bottom: auto; left: 40px; right: 26%; border-left: 0; border-top: 3px dashed rgba(43, 36, 21, 0.35); }
  .flow li { grid-template-columns: 1fr; gap: 12px; padding: 0; }
  .flow li img { grid-row: auto; width: 84px; }
  .flow-star { margin-top: -20px; padding: 26px !important; }
  .flow li.flow-star img { width: 96px; }
}

.trend { margin-top: 72px; }
.trend-head { display: grid; gap: 8px; margin-bottom: 20px; }
.trend h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1; }

/* tap-to-load post cards for tiktok and instagram */
.post {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: 10px;
  width: clamp(230px, 66vw, 320px);
  margin: 0;
  scroll-snap-align: start;
}

/* a post with its real preview: looks like the video, plays in place on tap */
.post-play,
.post-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--r-canvas);
  background: var(--ink);
  color: var(--cream);
  text-align: left;
}
.post-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 36, 21, 0.4) 0%, rgba(43, 36, 21, 0) 20%, rgba(43, 36, 21, 0) 52%, rgba(43, 36, 21, 0.88) 100%);
}
.post-chip {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  padding: 6px 11px;
  border-radius: var(--r-seg);
  background: var(--ink);
  color: var(--butter);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.post-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: var(--butter);
  transition: background-color 0.12s ease, transform 0.12s ease;
}
.post-icon::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 29px;
  border-style: solid;
  border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent var(--ink);
}
.post-meta {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: grid;
  gap: 4px;
}
.post-meta strong { color: var(--butter); font-weight: 700; font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; }
.post-meta span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--cream);
  font-size: 14px;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.post-play:active .post-icon { transform: scale(0.94); }
@media (hover: hover) { .post-play:hover .post-icon { background: var(--gold-light); } }
.post > .post-open { justify-self: start; color: var(--ink); font-weight: 600; }

/* desktop: the posts sit next to each other instead of scrolling */
@media (min-width: 1000px) {
  .trend .trend-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .trend .trend-strip > .post,
  .trend .trend-strip > figure:not(.post) { width: auto; }
}
.post-face {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  aspect-ratio: 4 / 5;
  padding: 22px;
  border-radius: var(--r-canvas);
  background: var(--ink);
  color: var(--cream);
}
.post-kind { color: var(--butter); font-weight: 700; font-size: 30px; line-height: 1; }
.post-credit { margin-top: 6px; font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }
.post-line { align-self: center; font-weight: 600; font-size: 21px; line-height: 1.25; }
.post-star { width: 84px; height: auto; transform: rotate(-8deg); }
.post-actions { display: grid; justify-items: start; gap: 10px; }
.post-actions .btn { border-color: var(--butter); background: var(--butter); color: var(--ink); }
.post-open { font-size: 15px; color: rgba(255, 247, 220, 0.8); text-underline-offset: 3px; }
.post-face :focus-visible { outline-color: var(--butter); }
.post-instagram.is-live { width: 340px; min-width: 325px; }
.post blockquote { margin: 0 !important; }
.trend-strip {
  display: flex;
  gap: 16px;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad) 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-color: var(--ink) transparent;
}
.trend-strip > figure:not(.post) {
  flex: 0 0 auto;
  width: clamp(210px, 62vw, 290px);
  margin: 0;
  scroll-snap-align: start;
}
.trend-strip > figure:not(.post) > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-canvas);
  background: var(--cream);
}
.trend-strip figcaption { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }

/* ---------- generator ---------- */

.gen { display: grid; gap: 30px; }

/* the card sits on an ink desk, so the generator reads as a tool */
.gen-stage {
  padding: clamp(22px, 3vw, 36px) clamp(16px, 3vw, 36px);
  border-radius: var(--r-panel);
  background: var(--ink);
  color: var(--cream);
}
.gen-stage .card-canvas { box-shadow: 0 34px 60px -28px rgba(0, 0, 0, 0.8); }
.gen-stage .gen-hint { color: rgba(255, 247, 220, 0.78); }
@media (max-width: 999px) {
  .gen-stage { margin: 0 calc(var(--pad) * -1); border-radius: 0; }
}
@media (min-width: 1000px) {
  .gen { grid-template-columns: minmax(0, 1fr) 430px; gap: 36px; align-items: start; }
  .gen-stage { position: sticky; top: 20px; }
}

.gen-canvas-wrap {
  --ar: 0.8;
  position: relative;
  width: min(100%, 580px, calc(70vh * var(--ar)));
  margin: 0 auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.gen-canvas-wrap canvas { width: 100%; height: auto; }
.gen-canvas-wrap.is-over::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px dashed var(--ink);
  border-radius: var(--r-canvas);
  pointer-events: none;
}
.cap-edit {
  position: absolute;
  z-index: 3;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: var(--r-seg);
  background: var(--cream);
  color: var(--ink);
  font: 600 16px/1.15 var(--font);
  text-align: center;
  resize: none;
  touch-action: auto;
}
.drop-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-canvas);
  background: rgba(255, 247, 220, 0.88);
  font-weight: 700;
  font-size: 28px;
  pointer-events: none;
}
.gen-hint { max-width: 34em; margin: 16px auto 0; font-size: 15px; text-align: center; }
.gen-out {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}
.gen-note { flex-basis: 100%; min-height: 1.45em; font-size: 15px; font-weight: 600; text-align: center; }

.gen-panel {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-panel);
  background: var(--cream);
}
.field {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 2px solid var(--ink-line);
}
.field:last-child { padding-bottom: 0; border-bottom: 0; }
.field legend {
  float: left;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
}
.field legend + * { clear: both; }

.tabs {
  display: inline-flex;
  gap: 4px;
  width: fit-content;
  padding: 5px;
  border-radius: var(--r-btn);
  background: var(--ink-wash);
}
.tabs [role="tab"] {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-seg);
  background: transparent;
  font: 600 17px/1 var(--font);
}
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--butter); }

.seg {
  display: flex;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.seg label { position: relative; flex: 1 1 0; min-width: 0; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; }
.seg label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 44px;
  padding: 8px 8px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
}
.seg label + label > span { border-left: 2px solid var(--ink); }
.seg small { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; opacity: 0.8; }
[data-sizes] label > span { flex-direction: column; }
.seg input:checked + span { background: var(--ink); color: var(--butter); }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: -6px; }
.seg .serif { font-family: var(--serif); font-weight: 400; font-size: 19px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; margin: 0; opacity: 0; }
.chips span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-seg);
  font-weight: 600;
  font-size: 16px;
}
.chips input:checked + span { background: var(--ink); color: var(--butter); }
.chips input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row .input { flex: 1 1 160px; width: auto; }
.input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink);
  font: 500 17px/1.2 var(--font);
}
.input::placeholder { color: var(--ink-soft); }
select.input { padding-right: 10px; }
.stack { display: grid; gap: 6px; font-weight: 600; font-size: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.file { position: relative; }
.file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.muted { font-size: 15px; color: var(--ink-soft); }
.msg { font-size: 15px; font-weight: 600; }
.msg:empty { display: none; }
.by-hand summary { font-weight: 600; }
.line-inputs { display: grid; gap: 8px; margin-top: 12px; }
.one-fields { display: grid; gap: 12px; }

/* ---------- wall ---------- */

.wall .tabs { margin: 0; }
.wall-grid { columns: 2 150px; column-gap: 14px; }
@media (min-width: 900px) { .wall-grid { columns: 4 220px; column-gap: 20px; } }
.wall-item {
  display: block;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  break-inside: avoid;
}
.wall-item img { width: 100%; height: auto; border-radius: var(--r-canvas); background: var(--cream); }
.wall-meta { display: grid; gap: 2px; margin-top: 10px; }
.wall-meta strong { font-weight: 700; font-size: 16px; line-height: 1.2; }
.wall-meta span { font-size: 15px; line-height: 1.3; }
.wall-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 26px;
}
.wall-count { font-weight: 600; color: var(--ink-soft); }
.wall-empty p { font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.15; }
.wall-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 30px;
  padding: 24px 28px;
  border-radius: var(--r-panel);
  background: var(--cream);
}
.wall-cta p { font-weight: 700; font-size: clamp(21px, 2.4vw, 30px); line-height: 1.15; }

.viewer {
  max-width: min(92vw, 720px);
  max-height: 92vh;
  padding: 18px;
  border: 0;
  border-radius: var(--r-panel);
  background: var(--cream);
  color: var(--ink);
}
.viewer::backdrop { background: rgba(43, 36, 21, 0.72); }
.viewer img { width: auto; max-height: 68vh; margin: 0 auto; border-radius: var(--r-canvas); }
.viewer p { margin: 14px 0; font-weight: 600; text-align: center; }
.viewer .actions { justify-content: center; }

/* ---------- star of the day ---------- */

.today { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) { .today { grid-template-columns: minmax(0, 540px) 1fr; gap: 60px; } }
.today-card { margin: 0; }
.today-card img { width: 100%; border-radius: var(--r-canvas); }
.today h2 { font-size: clamp(36px, 5.2vw, 64px); }
.today-for { margin-top: 16px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.2; }

/* ---------- how to get one ---------- */

.buy-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .buy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 64px; }
}
.steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding: 22px;
  border: 2px solid rgba(255, 247, 220, 0.12);
  border-radius: var(--r-panel);
  background: rgba(255, 247, 220, 0.05);
}
.steps img { width: 56px; height: 56px; }
.steps li:nth-child(1) img { transform: rotate(5deg); }
.steps li:nth-child(2) img { transform: rotate(-6deg); }
.steps li:nth-child(3) img { transform: rotate(3deg); }
.step { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.step h3 { color: var(--butter); font-size: clamp(24px, 2.6vw, 30px); line-height: 1.05; }
.step p { font-size: 17px; line-height: 1.4; color: rgba(255, 247, 220, 0.86); }
.step .btn { margin-top: 6px; }
.ca-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 8px 8px 16px;
  border-radius: var(--r-btn);
  background: var(--cream);
  color: var(--ink);
}
.ca-code {
  flex: 1 1 180px;
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.end .ca-bar .btn-ink { border-color: var(--ink); background: var(--ink); color: var(--butter); }

.ca { display: grid; justify-items: center; gap: 14px; }
.ca-star {
  position: relative;
  width: min(84vw, 480px);
  aspect-ratio: 100 / 95.71;
  padding: 0;
  border: 0;
  background: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.ca-star img { width: 100%; height: 100%; }
.ca-star:not(:disabled):active { transform: scale(0.97); }
.ca-star:disabled { cursor: default; }
.ca-text {
  color: var(--ink);
  position: absolute;
  left: 50%;
  top: 55%;
  width: 44%;
  transform: translate(-50%, -50%);
  font: 600 clamp(13px, 3.3vw, 20px)/1.25 var(--font);
  text-align: center;
  overflow-wrap: anywhere;
}
.ca-star:disabled .ca-text { font-size: clamp(34px, 8vw, 66px); font-weight: 700; line-height: 1; }
.ca-note { min-height: 1.45em; margin-top: 14px; font-weight: 600; }

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

/* the page ends dark: how to get one and the footer share one ink block */
.end,
.foot {
  background: var(--ink);
  color: var(--cream);
}
.end h2 { color: var(--butter); }
.end .steps a { text-decoration-color: var(--gold-light); }
.end .ca-note { color: var(--butter); }
.end :focus-visible,
.foot :focus-visible,
.gen-stage :focus-visible { outline-color: var(--butter); }
.end .btn-ink,
.gen-stage .btn-ink { border-color: var(--butter); background: var(--butter); color: var(--ink); }
.end .btn-line,
.gen-stage .btn-line { border-color: var(--butter); color: var(--butter); }
@media (hover: hover) {
  .end .btn-ink:hover,
  .gen-stage .btn-ink:hover { border-color: var(--gold-light); background: var(--gold-light); }
  .end .btn-line:hover,
  .gen-stage .btn-line:hover { background: rgba(246, 226, 127, 0.12); }
}

.foot {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 56px var(--pad) 132px;
  border-top: 2px solid rgba(255, 247, 220, 0.1);
  text-align: center;
}
.foot-ticker {
  color: var(--butter);
  font-weight: 700;
  font-size: clamp(56px, 13vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.foot-chain { margin-bottom: 8px; font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.foot-links a { font-weight: 600; text-underline-offset: 4px; }
.foot-claims:empty { display: none; }
.foot-legal { font-size: 15px; color: rgba(255, 247, 220, 0.74); }

/* ---------- sticky copy pill ---------- */

.pill {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 22px 10px 14px;
  border: 2px solid var(--butter);
  border-radius: 999px;
  background: var(--ink);
  color: var(--butter);
  font: 600 18px/1 var(--font);
  transform: translateX(-50%);
}
.pill img { width: 24px; height: auto; }
.pill:active { transform: translateX(-50%) translateY(2px); }
@media (min-width: 900px) {
  .pill { left: auto; right: 28px; bottom: 28px; transform: none; }
  .pill:active { transform: translateY(2px); }
}

/* ---------- five-tap star rain ---------- */

.rain-star {
  position: fixed;
  top: -80px;
  z-index: 60;
  width: var(--s);
  pointer-events: none;
  animation: fall var(--d) cubic-bezier(0.35, 0.1, 0.6, 1) var(--delay) forwards;
}
@keyframes fall {
  to { transform: translate3d(var(--x), calc(100vh + 160px), 0) rotate(var(--r)); }
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--pad);
  text-align: center;
}
.lost img { width: 120px; margin: 0 auto 22px; }
.lost h1 { font-size: clamp(48px, 10vw, 96px); line-height: 0.9; }
.lost p { margin: 16px auto 28px; font-size: 20px; max-width: 24em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .ca-star { transition: none; }
  .rain-star { display: none; }
}