:root {
  --bg: #f3f1ea;
  --ink: #1a1917;
  --muted: #5f5a50;
  --line: #d4cdbf;
  --accent: #2a44c4;
  --lift-shadow: rgb(40 30 10 / .22);
  --hover: rgb(40 30 10 / .045);
  --thumb-edge: rgb(40 30 10 / .08);
  /* Brick letters */
  --brick: #1f1e1b; --brick-edge: #45423c; --brick-edge2: #2f2d29;
  --stud: #2a2824; --stud-hi: #4b4740; --stud-lo: #1c1b18;
  --stud-rim-hi: rgb(255 255 255 / .22); --stud-rim-lo: rgb(0 0 0 / .35);
  --stud-side: #121110; --stud-contact: rgb(0 0 0 / .45);
  /* Baseplate */
  --plate: #e6e1d5; --plate-stud: #ebe7dc; --plate-stud-lo: #dcd6c9; --plate-stud-hi: rgb(255 255 255 / .75);
  --plate-stud-side: #cbc4b4; --plate-side: #d2cbbc;
  color-scheme: light;
}

/* Dark follows the system unless the visitor picked a theme with the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141310;
    --ink: #efece4;
    --muted: #a29b8e;
    --line: #34302a;
    --accent: #93a5ff;
    --lift-shadow: rgb(0 0 0 / .6);
    --hover: rgb(255 250 240 / .05);
    --thumb-edge: rgb(255 250 240 / .08);
    --brick: #ebe7de; --brick-edge: #b6afa2; --brick-edge2: #9a9386;
    --stud: #f3f0e9; --stud-hi: #ffffff; --stud-lo: #dcd6ca;
    --stud-rim-hi: rgb(255 255 255 / .9); --stud-rim-lo: rgb(120 110 95 / .35);
    --stud-side: #c4bdaf; --stud-contact: rgb(60 50 35 / .35);
    --plate: #1f1d1a; --plate-stud: #262420; --plate-stud-lo: #1c1b18; --plate-stud-hi: rgb(255 255 255 / .09);
    --plate-stud-side: #100f0d; --plate-side: #0c0b09;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141310;
  --ink: #efece4;
  --muted: #a29b8e;
  --line: #34302a;
  --accent: #93a5ff;
  --lift-shadow: rgb(0 0 0 / .6);
  --hover: rgb(255 250 240 / .05);
  --thumb-edge: rgb(255 250 240 / .08);
  --brick: #ebe7de; --brick-edge: #b6afa2; --brick-edge2: #9a9386;
  --stud: #f3f0e9; --stud-hi: #ffffff; --stud-lo: #dcd6ca;
  --stud-rim-hi: rgb(255 255 255 / .9); --stud-rim-lo: rgb(120 110 95 / .35);
  --stud-side: #c4bdaf; --stud-contact: rgb(60 50 35 / .35);
  --plate: #1f1d1a; --plate-stud: #262420; --plate-stud-lo: #1c1b18; --plate-stud-hi: rgb(255 255 255 / .09);
  --plate-stud-side: #100f0d; --plate-side: #0c0b09;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

main {
  position: relative;   /* holds the reset button */
  width: min(720px, 100% - 32px);
  margin: 0 auto;
  padding: clamp(76px, 12vw, 120px) 0 64px;   /* phones: clears the theme toggle */
}

/* The greeting sits on a studded baseplate. Sizes are in em of the greeting's
   font size, so the plate's studs match the letters' studs (letters.js). */
.plate {
  position: relative;   /* the letters game measures positions from here */
  font-size: clamp(30px, 6.2vw, 54px);
  margin: 0 0 56px;
  padding: .2625em .2625em 1.75em;   /* 1.5 studs, with room to build below the text */
  border-radius: 8px;
  background-color: var(--plate);
  background-image:
    radial-gradient(circle at calc(50% - .014em) calc(50% - .016em), var(--plate-stud-hi) 0, transparent .03em),
    radial-gradient(circle at 50% 50%, var(--plate-stud) .046em, var(--plate-stud-lo) .062em, transparent calc(.062em + .6px)),
    radial-gradient(circle at calc(50% + .008em) calc(50% + .022em), var(--plate-stud-side) .062em, transparent calc(.062em + .6px));
  background-size: .175em .175em;
  box-shadow: 0 3px 0 var(--plate-side);
}
h1 {
  font: 900 1em/1.16 "Rubik", system-ui, sans-serif;
  letter-spacing: 0.02em;
  margin: 0;
  text-wrap: balance;
}

ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }

.row {
  display: grid; grid-template-columns: 152px 1fr 20px; gap: 20px; align-items: center;
  margin-inline: -12px; padding: 12px; border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: background-color .2s;
}
@media (hover: hover) { .row:hover { background: var(--hover); } }
.thumb {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: 8px; background: var(--line);
  outline: 1px solid var(--thumb-edge); outline-offset: -1px;
}
.text { display: grid; gap: 3px; min-width: 0; }
.name {
  font: 700 20px/1.2 "Archivo", system-ui, sans-serif; letter-spacing: -0.01em;
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  transition: color .2s;
}
.desc { color: var(--muted); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.arrow {
  width: 20px; height: 20px; color: var(--accent);
  opacity: 0; translate: -6px 6px;
  transition: opacity .2s, translate .3s cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) {
  .row:hover .name { color: var(--accent); }
  .row:hover .arrow { opacity: 1; translate: 0 0; }
}
.row:focus-visible .arrow { opacity: 1; translate: 0 0; }
.row:active { background: var(--hover); }
.row:focus-visible { outline-offset: 0; border-radius: 14px; }

footer {
  margin-top: 48px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px;
}
footer a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
footer svg { width: 16px; height: 16px; flex: none; }
/* Icon-only link: a 44px tap target, with the icon still aligned to the content edge. */
footer a[aria-label] { min-width: 44px; justify-content: center; margin-inline: -14px; }
footer a:hover { color: var(--ink); }

@media (max-width: 520px) {
  .row { grid-template-columns: 104px 1fr; gap: 14px; padding: 10px 12px; }
  .arrow { display: none; }
  .name { font-size: 18px; }
  .desc { font-size: 15px; }
}

/* Brick letters (letters.js) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.letters { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.word { white-space: nowrap; }
.ch {
  display: inline-block; position: relative; cursor: grab; touch-action: none;
  will-change: transform;   /* each letter on its own layer, so moving one never repaints the plate */
  color: var(--brick);
  /* a stepped edge reads as moulded depth */
  /* in em so the depth scales with the text (about 4px at desktop size) */
  /* --rx/--ry and --dx/--dy are screen right and down in the letter's own
     frame (letters.js updates them when a letter turns), so the edge and the
     shadows always fall down-right. */
  --rx: 1; --ry: 0; --dx: 0; --dy: 1;
  --ex: calc(var(--rx) + var(--dx)); --ey: calc(var(--ry) + var(--dy));
  text-shadow:
    calc(var(--ex) * .018em) calc(var(--ey) * .018em) 0 var(--brick-edge),
    calc(var(--ex) * .036em) calc(var(--ey) * .036em) 0 var(--brick-edge),
    calc(var(--ex) * .052em) calc(var(--ey) * .052em) 0 var(--brick-edge),
    calc(var(--ex) * .066em) calc(var(--ey) * .066em) 0 var(--brick-edge2);
  transition: translate .25s cubic-bezier(.34, 1.56, .64, 1), scale .2s ease-out, filter .25s;
}
.ch { z-index: calc(1 + var(--lvl, 0)); }
/* Stacked bricks stand higher, so they cast a longer shadow. */
.ch.is-stacked {
  --sa: calc(var(--lvl) * .02em); --sb: calc(var(--lvl) * .05em);
  filter: drop-shadow(calc(var(--sa) * var(--rx) + var(--sb) * var(--dx)) calc(var(--sa) * var(--ry) + var(--sb) * var(--dy)) calc(var(--lvl) * .03em) var(--lift-shadow));
}
@media (hover: hover) {
  .ch:not(.is-held):hover { translate: 0 -3px; filter: drop-shadow(calc(var(--dx) * 6px) calc(var(--dy) * 6px) 6px var(--lift-shadow)); }
}
.ch.is-held { cursor: grabbing; z-index: calc(100 + var(--lvl, 0)); translate: 0 -5px; filter: drop-shadow(calc(.04em * var(--rx) + .14em * var(--dx)) calc(.04em * var(--ry) + .14em * var(--dy)) .1em var(--lift-shadow)); transition: translate .15s ease-out, filter .2s; }
.ch.is-flying { z-index: 100; filter: drop-shadow(calc(.04em * var(--rx) + .16em * var(--dx)) calc(.04em * var(--ry) + .16em * var(--dy)) .12em var(--lift-shadow)); transition: none; }

/* A stud: a short cylinder lit from the upper left. */
.stud {
  position: absolute; border-radius: 50%; pointer-events: none;
  rotate: calc(var(--rot, 0deg) * -1);   /* a round stud looks the same turned; keep its light fixed */
  background: linear-gradient(140deg, var(--stud-hi) 0%, var(--stud) 42%, var(--stud-lo) 100%);
  box-shadow:
    inset 1px 1px 0.5px var(--stud-rim-hi),
    inset -1px -1.2px 0.5px var(--stud-rim-lo),
    0 2px 0 var(--stud-side),
    0.8px 3.5px 2.5px var(--stud-contact);
}

/* Where the held letter will land. */
.ghost { position: absolute; left: 0; top: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .15s; }
.ghost.is-on { opacity: .3; }
.ghost .ch { cursor: default; text-shadow: none; }
.ghost .stud { box-shadow: none; }


.reset {
  position: absolute; right: 0; z-index: 3;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer;
  opacity: 0; visibility: hidden; scale: .7;
  transition: opacity .2s, scale .35s cubic-bezier(.34, 1.56, .64, 1), visibility 0s linear .35s, color .2s, border-color .2s;
}
.reset.is-on { opacity: 1; visibility: visible; scale: 1; transition-delay: 0s; }
.reset:hover { color: var(--accent); border-color: currentColor; }
.reset svg { width: 18px; height: 18px; transition: rotate .5s cubic-bezier(.16, 1, .3, 1); }
.reset:hover svg { rotate: -270deg; }
@media (prefers-reduced-motion: reduce) { .ch, .reset, .reset svg { transition: none; } }

/* Theme toggle, top-right corner */
.theme-toggle {
  position: absolute; top: 20px; right: 20px; z-index: 5;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle svg { width: 20px; height: 20px; grid-area: 1 / 1; }
.theme-toggle[data-current="dark"] .moon, .theme-toggle[data-current="light"] .sun { display: none; }
.theme-toggle.spin svg { animation: toggle-spin .42s cubic-bezier(.22, 1, .36, 1); }
@keyframes toggle-spin { from { rotate: -120deg; scale: .4; opacity: 0; } to { rotate: 0deg; scale: 1; opacity: 1; } }
@media (max-width: 520px) { .theme-toggle { top: 12px; right: 12px; } }

/* The theme switch spreads out from the toggle as a circle (theme.js). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .theme-toggle.spin svg { animation: none; } }