/* ============================================================
   samoxy.com — core stylesheet
   Palette is locked. Change these four values and the whole
   site follows.
   ============================================================ */

:root {
  --base:      #2E0A12;   /* page background */
  --primary:   #6E1423;   /* burgundy */
  --accent:    #E8B9A0;   /* warm sand */
  --ink:       #F6E7DE;   /* body text */
  --ink-dim:   #B9968C;   /* secondary text */
  --line:      rgba(232, 185, 160, 0.16);

  --display: "Fraunces", Georgia, serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 34rem;
}

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

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

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The bloom. Fixed warm light source behind everything —
   this is what keeps the page from reading as flat dark mode. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle 40rem at 50% -8%,
      rgba(110, 20, 35, 0.55) 0%,
      rgba(110, 20, 35, 0.34) 26%,
      rgba(110, 20, 35, 0.18) 46%,
      rgba(110, 20, 35, 0.08) 66%,
      rgba(110, 20, 35, 0.03) 84%,
      rgba(110, 20, 35, 0) 100%);
  opacity: 1;
}

a { color: inherit; }

::selection { background: var(--accent); color: var(--base); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

h1 { font-size: clamp(3rem, 11vw, 8.5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; }
h3 { font-size: 1.5rem; line-height: 1.2; }

p { margin: 0 0 1.15em; max-width: var(--measure); }

.lede {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
  line-height: 1.5;
}

.dim { color: var(--ink-dim); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.75rem;
  display: block;
}

/* Numbered steps (How it runs). The default .eyebrow margin was
   built for page headers: inside a step it pushed the label away
   from its own body and left it sitting closer to the step above,
   so the four steps read as the wrong pairs. Tighten the label to
   its body, and space the steps apart from each other. */
.step { margin: 0 0 2.5rem; }
.step:last-of-type { margin-bottom: 1.5rem; }
.step .eyebrow { margin: 0 0 0.55rem; }

/* ---------- Signup confirmation (/learn, /free/tells) ----------
   A soft spotlight settles over the confirmation and stays, like
   the lamp pool on the homepage desk. It fades up once on a fresh
   signup and then rests: no flash, nothing to watch happen. */

.notify-done {
  position: relative;
  padding: 1.25rem 0;
  text-align: center;
}

.notify-done h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.08;
  margin: 0 0 0.7rem;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.notify-done p {
  position: relative;
  z-index: 1;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* the pool of light, centered on the block rather than a corner */
.notify-done::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 220%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(232, 185, 160, 0.16) 0%,
    rgba(232, 185, 160, 0.07) 34%,
    rgba(110, 20, 35, 0.05) 58%,
    transparent 76%
  );
}

.notify-done.celebrate::before { animation: lamp-up 1600ms ease-out forwards; }
.notify-done.celebrate h3 { animation: lamp-rise 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.notify-done.celebrate p  { animation: lamp-rise 900ms cubic-bezier(0.2, 0.7, 0.3, 1) 140ms both; }

@keyframes lamp-up {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes lamp-rise {
  from { opacity: 0; transform: translateY(0.4rem); }
  to   { opacity: 1; transform: none; }
}

/* a visitor returning to an already-confirmed page sees the light
   already resting, without it fading up again */
.notify-done:not(.celebrate)::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .notify-done.celebrate::before { animation: none; opacity: 1; }
  .notify-done.celebrate h3,
  .notify-done.celebrate p { animation: none; opacity: 1; transform: none; }
}

/* ---------- Shell ---------- */

.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.narrow { max-width: 46rem; }

/* ---------- Nav ---------- */

.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 2rem 0;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links a {
  text-decoration: none;
  color: var(--ink-dim);
  transition: color 0.25s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--accent); }

/* ---------- Hero ---------- */

.hero { padding-block: clamp(3rem, 9vh, 5rem) clamp(2rem, 5vh, 3.25rem); }

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  margin-bottom: 1.4rem;
}

.hero .lede { max-width: 32rem; margin-bottom: 0; }

/* ---------- Doors (home nav cards) ---------- */

.doors {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 5rem;
}

.door {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: clamp(1rem, 4vw, 3rem);
  align-items: center;
  padding: 1.5rem clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.16);
  text-decoration: none;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.door:hover, .door:focus-visible {
  border-color: var(--accent);
  background: rgba(110, 20, 35, 0.42);
  transform: translateX(6px) rotate(-0.5deg) scale(1.012);
}

.door:nth-child(even):hover { transform: translateX(6px) rotate(0.5deg) scale(1.012); }

.door-title {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.4rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.door-note {
  display: block;
  color: var(--ink-dim);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 30rem;
}

.door:hover .door-title { transform: translateX(2px); }

.door-key {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  align-self: start;
}

.door-arrow {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink-dim);
  flex: none;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.door:hover .door-arrow {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--base);
  transform: rotate(360deg) scale(1.12);
}

.door-arrow { transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease,
              transform 0.55s cubic-bezier(0.34, 1.56, 0.5, 1); }

/* ---------- The index of tutorials — the signature ----------
   No photography anywhere on this site, so the words are the
   artwork. Each title is set large and lights from within. */

.lots { border-top: 1px solid var(--line); }

.lot {
  display: block;
  text-decoration: none;
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.lot-word {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  color: var(--ink);
  transition: color 0.35s ease, text-shadow 0.35s ease, transform 0.35s ease;
  display: block;
}

.lot-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-top: 0.7rem;
  display: block;
  max-width: 40rem;
  text-transform: uppercase;
}

.lot:hover .lot-word,
.lot:focus-visible .lot-word {
  color: var(--accent);
  text-shadow: 0 0 46px rgba(232, 185, 160, 0.42);
  transform: translateX(10px);
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(3.5rem, 9vh, 6rem); }

.section + .section { border-top: 1px solid var(--line); }

.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 5vw, 4rem);
}

@media (max-width: 720px) {
  .pair { grid-template-columns: 1fr; }
  .door { grid-template-columns: 1fr auto; gap: 0.75rem 1rem; align-items: start; }
  .door-key { grid-column: 1 / -1; }
  .door-arrow { width: 2rem; height: 2rem; font-size: 0.85rem; }
  .door-title { font-size: 1.45rem; }
  .sticker { display: inline-block; margin: 0.35rem 0 0 0.5rem; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.9rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn:hover {
  background: var(--accent);
  color: var(--base);
  box-shadow: 0 0 40px rgba(232, 185, 160, 0.28);
}

.btn-solid {
  background: var(--accent);
  color: var(--base);
}

.btn-solid:hover {
  box-shadow: 0 0 46px rgba(232, 185, 160, 0.4);
}

/* ---------- Tutorial body ---------- */

.tut-header { padding-block: clamp(3.5rem, 10vh, 6rem) 2.5rem; }

.tut-header h1 {
  text-transform: lowercase;
  font-size: clamp(3.5rem, 13vw, 9rem);
  margin-bottom: 1.5rem;
}

.tut-body { padding-bottom: 6rem; max-width: 42rem; }

.tut-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); }

.tut-body ul { padding-left: 1.1rem; max-width: var(--measure); }
.tut-body li { margin-bottom: 0.5rem; }

/* Copy-this block */
.copy {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: rgba(0, 0, 0, 0.22);
  padding: 1.4rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 1.5rem 0;
}

/* Why-annotation */
.why {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  line-height: 1.6;
  padding-left: 1.4rem;
  text-indent: -1.4rem;
  margin: 0 0 1.5rem;
  max-width: var(--measure);
}

.why::before { content: "↳  "; color: var(--accent); }

.drill {
  border-top: 1px solid var(--line);
  margin-top: 3.5rem;
  padding-top: 2rem;
}

/* ---------- Email gate ---------- */

.gate {
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  padding: clamp(1.75rem, 5vw, 3rem);
  max-width: 34rem;
  margin-block: 2rem 5rem;
}

.gate h2 { font-size: 1.75rem; margin-bottom: 0.75rem; }

.gate p { font-size: 0.95rem; }


.gate-manual {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.gate-manual input {
  flex: 1 1 15rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.95rem 1rem;
}

.gate-manual input::placeholder { color: var(--ink-dim); }
.gate-manual input:focus { border-color: var(--accent); outline: none; }

.gate-error {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent);
  margin-top: 0.9rem;
  min-height: 1.2em;
}

[hidden] { display: none !important; }

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 4rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.foot a { text-decoration: none; }
.foot a:hover { color: var(--accent); }

/* ---------- Motion ---------- */

.rise {
  animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.24s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MOTION AND MARK — added Aug 2026
   The site had no movement and nothing to look at. Everything
   below is typography, the cat, and motion. Still no imagery.
   ============================================================ */

/* --- the mark ------------------------------------------------ */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.mark-cat {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: block;
  flex: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.mark:hover .mark-cat { transform: rotate(-8deg) scale(1.06); }

/* --- numbered nav, lifted from the reference ----------------- */

.nav-links a { position: relative; }

.nav-links a sup {
  font-size: 0.58em;
  margin-left: 0.15em;
  color: var(--ink-dim);
  opacity: 0.65;
  vertical-align: super;
}

/* --- the marquee --------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-block: 1.15rem;
  margin-bottom: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  flex: none;
}

.marquee-group span {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}

.marquee-group img {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  flex: none;
}

@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- the spinning seal --------------------------------------- */

.seal {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  width: 6.4rem;
  height: 6.4rem;
  z-index: 40;
  text-decoration: none;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.5, 1);
  pointer-events: none;
}

.seal.on { opacity: 1; transform: scale(1); pointer-events: auto; }
.seal:hover { transform: scale(1.07); }

/* One constant speed. Changing animation-duration on hover remaps
   the animation clock and makes the ring jump to a new angle. */
.seal svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.seal text { font-family: var(--mono); font-size: 8.8px; letter-spacing: 0.26em; fill: var(--accent); text-transform: uppercase; }

.seal img {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- scroll reveal ------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.5, 1),
              transform 0.9s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.reveal.seen { opacity: 1; transform: none; }

/* --- the prompt bench (interactive) --------------------------- */

.bench { margin-bottom: 4.5rem; }

.bench-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.bench-head h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  margin: 0;
}

.bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.4rem 2rem;
  margin-bottom: 2rem;
}

.bench-row > p {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 0.6rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip {
  font-family: var(--body);
  font-size: 0.82rem;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.chip:hover { color: var(--ink); border-color: var(--accent); }

.chip[aria-pressed="true"] {
  color: var(--base);
  background: var(--accent);
  border-color: var(--accent);
}

.bench-out { position: relative; }

.bench-out .copy { margin: 0; min-height: 7.5rem; }

.bench-copy {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.bench-copy:hover { color: var(--accent); border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .seal svg { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- drifting dust, cursor-reactive ------------------------- */

#dust {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: -1;
  pointer-events: none;
  display: block;
}

@media (prefers-reduced-motion: reduce) { #dust { display: none; } }

/* --- the garble. Type misbehaving like a bad render. -------- */

.garble .gw { display: inline-block; white-space: nowrap; }
.garble .gw > span { display: inline-block; will-change: transform; }

.garble span.off {
  animation: slip 0.42s cubic-bezier(0.3, 0, 0.2, 1);
}

@keyframes slip {
  0%   { transform: none; opacity: 1; }
  18%  { transform: translate(0.055em, -0.02em) skewX(-9deg) scaleX(1.13); opacity: 0.62; }
  34%  { transform: translate(-0.045em, 0.015em) skewX(5deg) scaleY(0.9); opacity: 0.85; }
  56%  { transform: translate(0.02em, 0) skewX(-3deg); opacity: 0.7; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .garble span.off { animation: none; }
}

/* ============================================================
   WHIMSY PASS — the cat smokes, so the site should have a
   sense of humour. Bounce, tilt, stickers.
   ============================================================ */

/* the mark gets a proper wobble */
.mark:hover .mark-cat {
  animation: wobble 0.6s cubic-bezier(0.34, 1.56, 0.5, 1);
}

@keyframes wobble {
  0%   { transform: rotate(0) scale(1); }
  25%  { transform: rotate(-13deg) scale(1.14); }
  55%  { transform: rotate(9deg) scale(1.08); }
  80%  { transform: rotate(-4deg) scale(1.03); }
  100% { transform: rotate(0) scale(1.04); }
}

/* stickers — rotated, hand-slapped-on labels */
.sticker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--base);
  background: var(--accent);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  transform: rotate(-4deg);
  margin-left: 0.55rem;
  vertical-align: middle;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.door:hover .sticker { transform: rotate(6deg) scale(1.1); }

.sticker-quiet {
  color: var(--accent);
  background: transparent;
  border: 1px dashed var(--line);
}



/* the giant tutorial words tilt when you touch them */
.lot-word { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.5, 1), color 0.35s ease; display: inline-block; }
.lot:hover .lot-word { transform: rotate(-1.4deg) translateX(0.6rem) scale(1.03); }
.lot:nth-child(even):hover .lot-word { transform: rotate(1.4deg) translateX(0.6rem) scale(1.03); }

/* chips pop */
.chip:hover { transform: rotate(-2deg) scale(1.06); }
.chip { transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1); }
.chip[aria-pressed="true"] { transform: rotate(-1.5deg); }

/* the marquee cats tumble */
.marquee-group img { animation: tumble 9s ease-in-out infinite; }
.marquee-group img:nth-child(4n) { animation-delay: -3s; }
.marquee-group img:nth-child(6n) { animation-delay: -6s; }

@keyframes tumble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* buttons bounce */
.btn { transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease,
       transform 0.4s cubic-bezier(0.34, 1.56, 0.5, 1); }
.btn:hover { transform: translateY(-2px) rotate(-1deg); }

@media (prefers-reduced-motion: reduce) {
  .marquee-group img, .mark:hover .mark-cat { animation: none; }
  .door:hover, .lot:hover .lot-word, .btn:hover, .chip:hover { transform: none; }
}

/* ============================================================
   THE DESK — the homepage.
   Top-down studio desk at 2am. Objects are doors; the rest is
   furniture, there so the scene reads as a place.
   ============================================================ */

.desk-wrap {
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.desk-stage {
  position: relative;
  max-width: 1180px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: visible;
  isolation: isolate;
  margin-bottom: 6rem;
}

/* the surface: wood grain, then a pool of lamplight */
.desk-top {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid rgba(232, 185, 160, 0.14);
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.14) 0 1px, transparent 1px 4px, rgba(255,255,255,0.012) 4px 5px, transparent 5px 11px),
    linear-gradient(172deg, #4a1a1d 0%, #3d1418 40%, #2c0d13 78%, #23090e 100%);
  box-shadow:
    inset 0 1px 0 rgba(232, 185, 160, 0.1),
    inset 0 -34px 46px rgba(0, 0, 0, 0.45),
    0 30px 60px rgba(0, 0, 0, 0.5);
}

/* the front edge of the desk — this is what tells you it's a
   surface with a near side, not a dark rectangle */
.desk-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.1rem;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, #5a2124 45%, #3a1417 100%);
  box-shadow: inset 0 1px 0 rgba(232, 185, 160, 0.22);
}

.desk-lamp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 66% at 44% 30%,
      rgba(232, 185, 160, 0.13) 0%,
      rgba(232, 185, 160, 0.07) 34%,
      rgba(232, 185, 160, 0.028) 58%,
      rgba(232, 185, 160, 0) 78%);
}

/* --- objects ------------------------------------------------ */

.obj {
  position: absolute;
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.5, 1);
  will-change: transform;
}

a.obj { cursor: pointer; }

.obj .tag {
  position: absolute;
  left: 50%;
  bottom: -1.85rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(12, 3, 6, 0.82);
  border: 1px solid rgba(232, 185, 160, 0.34);
  border-radius: 999px;
  padding: 0.26rem 0.72rem;
  pointer-events: none;
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.tag em { font-style: normal; color: var(--ink); }

a.obj:hover .tag, a.obj:focus-visible .tag {
  color: var(--base);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(-50%) scale(1.06) rotate(-1.5deg);
}

a.obj:hover .tag em, a.obj:focus-visible .tag em { color: var(--base); }

.obj-sheet .tag, .obj-cat .tag, .obj-lens .tag, .obj-mail .tag {
  bottom: auto;
  top: -1.85rem;
}

/* --- the scrap with the line on it -------------------------- */

.obj-scrap { left: 4.5%; top: 7%; width: 37%; max-width: 440px; }

.scrap {
  display: block;
  position: relative;
  padding: 1.5rem 1.6rem 1.7rem;
  background: linear-gradient(158deg, rgba(246,231,222,0.11), rgba(246,231,222,0.045));
  border: 1px solid rgba(232, 185, 160, 0.26);
  border-radius: 1px;
  transform: rotate(-1.2deg);
  box-shadow: 0 18px 34px rgba(0,0,0,0.45);
}

.tape {
  position: absolute;
  width: 3.4rem;
  height: 1.1rem;
  background: rgba(232, 185, 160, 0.19);
  border-left: 1px solid rgba(232,185,160,0.12);
  border-right: 1px solid rgba(232,185,160,0.12);
}

.tape-1 { top: -0.55rem; left: -0.9rem; transform: rotate(-38deg); }
.tape-2 { bottom: -0.55rem; right: -0.9rem; transform: rotate(-38deg); }

.scrap-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.75rem;
}

.scrap-line {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.7vw, 3.15rem);
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 0.95rem;
}

.scrap-sub {
  display: block;
  font-size: clamp(0.76rem, 1.05vw, 0.95rem);
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 30rem;
}

/* --- contact sheet → /free ---------------------------------- */

.obj-sheet { left: 3.5%; bottom: 12%; width: 19%; max-width: 225px; }

.sheet {
  display: block;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(232, 185, 160, 0.22);
  border-radius: 1px;
  transform: rotate(2.2deg);
  box-shadow: 0 14px 26px rgba(0,0,0,0.4);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.5, 1), border-color 0.4s ease;
}

.obj-sheet:hover .sheet { transform: rotate(-1deg) scale(1.05); border-color: var(--accent); }

.sheet-head {
  display: block;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.17em;
  color: var(--ink-dim);
  margin-bottom: 0.55rem;
}

.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }

.sheet-grid i {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(232, 185, 160, 0.42);
  border-radius: 1px;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.obj-sheet:hover .sheet-grid i { border-color: var(--accent); }
.obj-sheet:hover .sheet-grid i:nth-child(3) { background: rgba(232, 185, 160, 0.16); }

/* --- sticky note → /hire ------------------------------------ */

.obj-note { left: 45%; top: 8%; width: 13%; max-width: 150px; min-width: 104px; }

.note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.34rem;
  aspect-ratio: 1;
  padding: 0 12%;
  text-align: left;
  background: linear-gradient(158deg, #f2d2ba 0%, var(--accent) 44%, #dfab8d 100%);
  border-radius: 1px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
}







/* --- lens → /learn ----------------------------------------- */

.obj-lens { left: 31%; bottom: 15%; width: 10%; max-width: 118px; min-width: 76px; }

.lens { display: block; position: relative; }

.lens-ring {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 2px solid rgba(232, 185, 160, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(232,185,160,0.2), rgba(0,0,0,0.62) 72%);
  box-shadow: 0 14px 26px rgba(0,0,0,0.5);
  transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.lens-glass {
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(232, 185, 160, 0.34);
  background: rgba(110, 20, 35, 0.55);
}

.obj-lens:hover .lens-ring { border-color: var(--accent); transform: rotate(18deg) scale(1.07); }

.lens-mm {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

/* --- envelope → email --------------------------------------- */

.obj-mail { right: 6.5%; bottom: 15%; width: 13%; min-width: 96px; }

.envelope {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  background: rgba(246, 231, 222, 0.1);
  border: 1px solid rgba(232, 185, 160, 0.3);
  border-radius: 1px;
  transform: rotate(-5deg);
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.5, 1), border-color 0.4s ease;
}

.envelope::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 62%;
  border-bottom: 1px solid rgba(232, 185, 160, 0.3);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: rgba(232, 185, 160, 0.07);
}

.obj-mail:hover .envelope { transform: rotate(3deg) scale(1.07); border-color: var(--accent); }

/* --- the cat → /about --------------------------------------- */

.obj-cat { left: 47%; bottom: 15%; width: 11.5%; max-width: 136px; min-width: 86px; }

.obj-cat img {
  display: block;
  width: 100%;
  border-radius: 50%;
  box-shadow: 0 16px 30px rgba(0,0,0,0.5);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.obj-cat:hover img { transform: rotate(-7deg) scale(1.07); }







.mug {
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(232, 185, 160, 0.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,20,35,0.34), transparent 68%);
}



/* ---- the pencil, in the gap between the scrap and the mug ----
   Sits at the mug's own eye level so the two read as things left
   on a surface, not a row of icons. Positioned to keep clear air
   on both sides: the ring ends at 42.5%, the mug starts at 59%. */

.obj-pencil {
  left: 46.5%;
  top: 48.5%;
  bottom: auto;
  width: 9%;
  max-width: 112px;
  min-width: 66px;
  /* resting angle, matching data-rot. Kept here rather than only in
     desk.js so the pencil is already lying at an angle on first paint
     and when the parallax script doesn't run at all. */
  transform: rotate(-17deg);
}

.pencil {
  display: block;
  position: relative;
  height: 7px;
  border-radius: 1px 2px 2px 1px;
  /* barrel, ferrule, eraser: left to right */
  background: linear-gradient(90deg,
    #b98d6a 0% 66%,
    #8d6a52 66% 74%,
    #c9b3a6 74% 82%,
    #b8827b 82% 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
}

/* the flat top facet, so the barrel reads as a hexagonal shaft */
.pencil::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 26%;
  top: 1px;
  height: 2px;
  border-radius: 1px;
  background: rgba(246, 231, 222, 0.22);
}

/* sharpened cone and graphite point */
.pencil::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-right: 13px solid #e2cbb4;
  filter: drop-shadow(-3px 0 0 rgba(46, 10, 18, 0.9));
}

@media (max-width: 900px) {
  .pencil { height: 6px; }
  .pencil::before { border-right-width: 10px; }
}

.obj-clip { left: 65%; top: 20%; width: 3.4%; min-width: 22px; }

.clip {
  display: block;
  aspect-ratio: 1 / 2.1;
  border: 1.5px solid rgba(232, 185, 160, 0.3);
  border-radius: 999px;
  transform: rotate(28deg);
}

/* --- swatches: the palette, lying on the desk --------------- */

.swatch { display: flex; transform: rotate(-6deg); box-shadow: 0 12px 22px rgba(0,0,0,0.4); }

.swatch i {
  flex: 1;
  aspect-ratio: 1 / 1.5;
  border: 1px solid rgba(0,0,0,0.35);
}

.swatch i:nth-child(1) { background: #2E0A12; }
.swatch i:nth-child(2) { background: #6E1423; }
.swatch i:nth-child(3) { background: #B9968C; }
.swatch i:nth-child(4) { background: #E8B9A0; }
.swatch i:nth-child(5) { background: #F6E7DE; }

/* --- mobile: the desk becomes a list ------------------------ */

.desk-fallback { display: none; }

@media (max-width: 880px) {
  .desk-stage { display: none; }
    .desk-fallback { display: block; margin-bottom: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke i { animation: none; opacity: 0; }
  .obj { transition: none; }
}

/* --- desk lamp pool, shadows, extra props ------------------- */

.desk-pool {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 10px;
  background:
    radial-gradient(46% 58% at 26% 12%,
      rgba(255, 226, 190, 0.20) 0%,
      rgba(255, 214, 175, 0.10) 34%,
      rgba(232, 185, 160, 0.04) 60%,
      transparent 82%),
    radial-gradient(96% 96% at 50% 46%, transparent 34%, rgba(0, 0, 0, 0.5) 100%);
}

.scrap, .sheet, .note, .call { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42); }
.obj-cat img, .lens-ring { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); }

.scrap { position: relative; }

.tape {
  position: absolute;
  top: -0.55rem;
  width: 3.2rem;
  height: 1.05rem;
  background: rgba(246, 231, 222, 0.13);
  border: 1px solid rgba(246, 231, 222, 0.08);
}

.tape-l { left: 6%; transform: rotate(-6deg); }
.tape-r { right: 6%; transform: rotate(5deg); }

.obj-call { right: 5%; top: 10%; width: 24%; max-width: 290px; }

.call {
  display: block;
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 2px;
  transform: rotate(1.6deg);
}

.call-head, .call-row, .call-foot {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  line-height: 1.95;
}

.call-head {
  color: var(--ink);
  letter-spacing: 0.16em;
  margin-bottom: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.call-row b { color: var(--accent); font-weight: 400; margin-right: 0.5rem; }

.call-foot {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
  font-size: 0.54rem;
  text-transform: uppercase;
}

.sw { aspect-ratio: 0.72; border-radius: 1px; }
.sw-1 { background: #2E0A12; box-shadow: inset 0 0 0 1px rgba(232,185,160,0.25); }
.sw-2 { background: #6E1423; }
.sw-3 { background: #B9968C; }
.sw-4 { background: #E8B9A0; }

.sw-label {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  padding-top: 0.4rem;
}



.obj-ring { left: 37%; top: 47%; width: 5.5%; max-width: 60px; }

/* --- what we make ------------------------------------------ */

.makes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
}

.make-n {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.7rem;
}

.make h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 0.6rem; }
.make p { font-size: 0.95rem; }

/* --- the closer -------------------------------------------- */

.closer {
  border-top: 1px solid var(--line);
  padding-block: 4rem 5rem;
  margin-top: 2rem;
}

.closer h2 { margin: 0 0 0.8rem; }
.closer p { max-width: 34rem; }

/* ============================================================
   RESPONSIVE AUDIT PASS
   The headline and lede now live outside the desk, so they
   survive at every width. On desktop they're placed back over
   the desk as the taped scrap.
   ============================================================ */

.desk-frame { position: relative; }

.desk-frame .obj-scrap {
  position: absolute;
  z-index: 3;
  top: 7%;
  left: max(4.5%, calc(50% - 590px + 2rem));
}

.scrap-line {
  margin: 0 0 0.9rem;
  max-width: none;
}

.scrap-sub { margin: 0; max-width: none; }

.desk-alt { display: none; }

/* --- tablet and phone: no desk, real content instead -------- */

@media (max-width: 880px) {
  .desk-alt { display: block; margin-bottom: 4rem; }

  .desk-frame .obj-scrap,
  .desk-wrap .desk-frame .obj-scrap {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 36rem;
    margin: 0 0 2.5rem !important;
    transform: none !important;
    z-index: auto;
  }

  .scrap {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
  }

  .tape { display: none; }

  .scrap-line { font-size: clamp(2.3rem, 9vw, 3.6rem); }
  .scrap-sub { font-size: 1.05rem; }
}

/* --- narrow phones ------------------------------------------ */

@media (max-width: 560px) {
  .nav { gap: 0.9rem; padding-block: 1.5rem 0; }
  .nav-links { gap: 1rem; font-size: 0.68rem; }
  .wordmark { font-size: 1.2rem; }
  .mark-cat { width: 1.8rem; height: 1.8rem; }

  /* the seal was covering the footer links on small screens */
  .seal { width: 4.4rem; height: 4.4rem; }
  .seal text { font-size: 11px; }
  .seal img { width: 2.1rem; height: 2.1rem; }

  /* prompt blocks were overflowing their box on narrow screens */
  .copy { font-size: 0.72rem; padding: 1rem 1.05rem; }
  .bench-out .copy { min-height: 0; }
  .bench-copy { position: static; display: block; margin: 0.75rem 0 0; width: 100%; }

  .foot { gap: 0.6rem; }
  .marquee { margin-bottom: 3.5rem; }
  .closer { padding-block: 3rem 4rem; }
  .btn { padding: 0.85rem 1.4rem; font-size: 0.72rem; }
}

/* --- very short landscape phones ---------------------------- */

@media (max-height: 480px) and (orientation: landscape) {
  .seal { display: none; }
}

/* --- anything that can't hover: no parallax, no dust -------- */

@media (hover: none) {
  .obj { transition: none; }
}

/* ============================================================
   THE MINI DESK — the desk, portrait, for phones and tablets.
   Same objects, scattered on a grid instead of a scene, so
   nothing collides at 393px wide.
   ============================================================ */

.mini {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem 1.4rem;
  padding: 2.4rem 1.5rem 2.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,0.16) 0 2px, transparent 2px 7px),
    linear-gradient(168deg, #3a1018 0%, #2a0910 58%, #1f070c 100%);
  overflow: hidden;
}

.mini-pool {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 40% at 30% 14%, rgba(232, 185, 160, 0.1) 0%, transparent 72%),
    radial-gradient(92% 92% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.4) 100%);
}

.mini-obj {
  position: relative;
  z-index: 1;
  display: block;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.5, 1);
}





.mini-obj .note,
.mini-obj .sheet,
.mini-obj .lens-ring,
.mini-cat img { box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45); }


.mini-obj .sheet { transform: none; }
.mini-obj .lens { display: block; width: 78%; margin: 0 auto; }
.mini-cat img { display: block; width: 78%; margin: 0 auto; border-radius: 50%; }

.mini-tag {
  display: block;
  margin-top: 0.85rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.5;
}

.mini-tag em { font-style: normal; color: var(--ink); }

@media (max-width: 400px) {
  .mini { gap: 2.2rem 1rem; padding: 2rem 1.1rem 2.4rem; }
  .mini-tag { font-size: 0.55rem; }
}

/* --- top-of-page breathing room on small screens ----------- */

@media (max-width: 880px) {
  .nav { row-gap: 0.85rem; }
  .nav-links { width: 100%; justify-content: flex-start; }

  .desk-frame .obj-scrap,
  .desk-wrap .desk-frame .obj-scrap { margin-top: 2.75rem !important; }

  .scrap-eyebrow { margin-bottom: 1.1rem; }
  .desk-alt { margin-top: 3rem; }
}

/* --- the mug: unmistakable from above ---------------------- */

.mug {
  display: grid;
  place-items: center;
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, #f3e6dd 0%, #d8c3b7 60%, #b59a8d 100%);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.5);
}

.mug-coffee {
  width: 68%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #6b3a24 0%, #3a1d12 70%, #2a1209 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

/* the handle — the detail that makes it a mug and not a coaster */
.mug::after {
  content: "";
  position: absolute;
  right: -26%;
  top: 50%;
  width: 40%;
  aspect-ratio: 1.15;
  transform: translateY(-50%);
  border: 5px solid #d8c3b7;
  border-left-color: transparent;
  border-radius: 50%;
}

/* --- the business card: the fifth door -------------------- */

.obj-card { right: 4%; bottom: 15%; width: 20%; max-width: 240px; min-width: 148px; transform: rotate(-2deg); }

.card {
  display: block;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 3px;
  background: linear-gradient(158deg, #f6e7de 0%, #e8d4c8 100%);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.obj-card:hover .card { transform: rotate(2deg) scale(1.05); }

.card-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  color: var(--base);
  line-height: 1;
  margin-bottom: 0.45rem;
}

.card-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: #6b4038;
  line-height: 1.7;
}

.card-rule {
  display: block;
  height: 1px;
  background: rgba(46, 10, 18, 0.22);
  margin: 0.5rem 0;
}



/* palette moves out of the way of the card */
/* the marquee already provides the break — the section under it
   doesn't need a full pad on top as well */
.makes-section { padding-block: clamp(2.25rem, 5vh, 3.25rem) clamp(2.5rem, 5.5vh, 3.5rem); }

.obj .tag { max-width: 15rem; white-space: normal; text-align: center; }

/* --- the intake form --------------------------------------- */

.form { margin-top: 0; }

.f-row { margin-bottom: 1.5rem; }

.f-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

@media (max-width: 620px) { .f-two { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.6rem;
}

.f-hint { text-transform: none; letter-spacing: 0.04em; opacity: 0.65; }

.form input,
.form textarea,
.form select {
  width: 100%;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form textarea { resize: vertical; line-height: 1.6; }

.form select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%),
                    linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form select option { background: #2a0910; color: var(--ink); }

.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: rgba(0, 0, 0, 0.4);
}

.form input::placeholder,
.form textarea::placeholder { color: rgba(185, 150, 140, 0.5); }

.f-error {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  min-height: 1.2rem;
  margin: 0 0 0.5rem;
}

.f-note { font-size: 0.85rem; margin-top: 1rem; }

/* --- labels stagger so two can never sit on the same line --- */

.obj .tag { font-size: 0.58rem; padding: 0.22rem 0.6rem; }

/* alternating above and below, so two labels can never meet */
.obj-sheet .tag { top: -1.9rem; bottom: auto; }
.obj-lens .tag  { top: auto; bottom: -1.9rem; }
.obj-cat .tag   { top: -1.9rem; bottom: auto; }
.obj-card .tag  { top: -1.9rem; bottom: auto; }
.obj-note .tag  { top: auto; bottom: -1.9rem; }

/* the section under the marquee is a band: equal air above and below */
.makes-section { padding-block: clamp(2.25rem, 5vh, 3.25rem); }

/* ============================================================
   LABEL LEGIBILITY AND STACKING
   The objects use transforms, which create their own stacking
   contexts and paint over an untouched label. Labels now sit
   above everything on the desk, and read as labels.
   ============================================================ */

.obj .tag {
  z-index: 8;
  white-space: nowrap !important;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: rgba(20, 5, 9, 0.9);
  border: 1px solid rgba(232, 185, 160, 0.35);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
  padding: 0.3rem 0.75rem;
  backdrop-filter: blur(2px);
}

.obj .tag em { color: var(--accent); font-weight: 500; }

a.obj:hover .tag, a.obj:focus-visible .tag {
  color: var(--base);
  background: var(--accent);
  border-color: var(--accent);
}

a.obj:hover .tag em, a.obj:focus-visible .tag em { color: var(--base); }

/* labels need room, so the note sits a little higher */
.obj-note .tag { bottom: -2.1rem; }





.hero-cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 2rem; }

/* ============================================================
   SPACING AND FORMATTING AUDIT
   One rhythm across every page and every width. The goal is
   that nothing needs hunting for at any size.
   ============================================================ */

/* --- 1. line length. Long measures are the main readability
       failure on tablets, where the column gets wide but the
       type stays small. --- */

.tut-body p, .tut-body ul { max-width: 38rem; }
.pair p, .pair ul { max-width: 34rem; }
.make p { max-width: 26rem; }

/* --- 2. headline sizing that doesn't overshoot on tablets --- */

@media (min-width: 721px) and (max-width: 1024px) {
  .hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.2rem); }
  .tut-header h1 { font-size: clamp(3rem, 10vw, 6rem); }
  .lot-word { font-size: clamp(2.4rem, 7.6vw, 4.6rem); }
  .section { padding-block: clamp(3rem, 7vh, 4.5rem); }
}

/* --- 3. tablet: two columns of pair collapse sooner, because
       a 1.6fr column at 800px leaves the label column cramped --- */

@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; gap: 0.9rem; }
  .pair h2 { margin-bottom: 0.35rem; }
}

/* --- 4. phones: consistent vertical rhythm everywhere --- */

@media (max-width: 560px) {
  .hero { padding-block: 2.25rem 1.75rem; }
  .hero h1 { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero .lede { font-size: 1.02rem; }

  .section { padding-block: 2.5rem; }
  .tut-header { padding-block: 2.25rem 1.5rem; }
  .tut-header h1 { font-size: clamp(3rem, 17vw, 4.5rem); }
  .tut-body { padding-bottom: 3.5rem; }
  .tut-body h2 { margin: 2.25rem 0 0.75rem; }

  .lot { padding-block: 1.1rem; }
  .lot-word { font-size: clamp(2.2rem, 13vw, 3.2rem); }

  .gate { padding: 1.4rem 1.25rem; margin-block: 1.5rem 3rem; }
  .drill { padding: 1.4rem 1.25rem; }

  .makes { gap: 2rem; }
  .closer { padding-block: 2.5rem 3rem; }

  .foot {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 2rem 3rem;
  }
}

/* --- 5. the seal must never sit on top of a button or a form
       field on small screens --- */

@media (max-width: 720px) {
  .seal { right: 0.75rem; bottom: 0.75rem; }
  .form { padding-bottom: 5rem; }
}

/* --- 6. forms are the highest friction surface on a phone.
       Bigger targets, no iOS zoom-on-focus (needs 16px). --- */

@media (max-width: 620px) {
  .form input,
  .form textarea,
  .form select { font-size: 16px; padding: 0.85rem 0.9rem; }

  .form label { font-size: 0.7rem; }
  .f-row { margin-bottom: 1.25rem; }
  .chip { padding: 0.5rem 0.9rem; font-size: 0.88rem; }
  #fSend { width: 100%; text-align: center; }
}

/* --- 7. tap targets. Anything clickable clears 44px. --- */

@media (hover: none) {
  .nav-links a { padding-block: 0.35rem; }
  .btn { padding: 0.95rem 1.5rem; }
  .lot { padding-block: 1.35rem; }
}

/* --- 8. the success state after a brief is sent --- */

.f-done { padding: 0 0 1rem; }
.f-done h3 { font-family: var(--display); font-weight: 300; font-size: 1.9rem; margin: 0 0 0.6rem; }

/* --- 9. long words and prompt blocks can never push the page
       sideways --- */

body { overflow-x: hidden; }
.copy { overflow-wrap: anywhere; }
.tut-body a, .pair a { overflow-wrap: break-word; }

/* --- an unchosen select should look unchosen ---------------- */

.form select:invalid,
.form select:has(option[value=""]:checked) { color: rgba(185, 150, 140, 0.55); }

/* --- mobile nav shares the row with the mark ---------------- */

@media (max-width: 700px) {
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: nowrap;
  }

  .nav-links {
    width: auto;
    display: flex;
    gap: 0.85rem;
    justify-content: flex-end;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  /* the superscript numbers are decoration, and decoration is
     what you cut first when space is tight */
  .nav-links sup { display: none; }

  .mark { gap: 0.5rem; }
  .wordmark { font-size: 1.15rem; }
  .mark-cat { width: 1.7rem; height: 1.7rem; }
}

@media (max-width: 380px) {
  .wordmark { display: none; }
  .nav-links { gap: 0.7rem; font-size: 0.6rem; }
}

/* --- paired fields align on their controls, not their labels
       ("Do you have a clean photo of the product?" wraps to two
       lines and was pushing its select down out of line) ------ */

.f-two {
  grid-template-rows: auto auto;
  align-items: start;
}

.f-two .f-row {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0.6rem;
}

.f-two .f-row label { margin-bottom: 0; align-self: end; }

/* browsers without subgrid: reserve two lines for every label
   in a pair so the controls still line up */
@supports not (grid-template-rows: subgrid) {
  .f-two .f-row { display: block; }
  .f-two .f-row label { min-height: 2.4em; display: flex; align-items: flex-end; }
}

@media (max-width: 620px) {
  .f-two .f-row { display: block; }
  .f-two .f-row label { min-height: 0; margin-bottom: 0.6rem; }
}

/* --- the "something else" field --------------------------- */

.f-other {
  margin-top: 0.75rem;
  animation: otherIn 0.35s cubic-bezier(0.34, 1.56, 0.5, 1);
}

@keyframes otherIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.chip-other[aria-pressed="true"]::after { content: " +"; }

/* ============================================================
   INLINE LINKS
   The wavy underline read as a spellcheck error. A link should
   announce itself before you touch it and reward you when you
   do: warm sand, a quiet underline that fills in on hover.
   ============================================================ */

.tut-body a:not(.btn),
.pair a:not(.btn),
.narrow a:not(.btn),
.bench a:not(.btn),
.closer a:not(.btn),
.f-note a:not(.btn),
.gate a:not(.btn),
.lede a:not(.btn) {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 0.1em;
  transition: background-size 0.28s ease, color 0.25s ease, background-position 0.28s ease;
}

.tut-body a:not(.btn):hover,
.pair a:not(.btn):hover,
.narrow a:not(.btn):hover,
.bench a:not(.btn):hover,
.closer a:not(.btn):hover,
.f-note a:not(.btn):hover,
.gate a:not(.btn):hover,
.lede a:not(.btn):hover {
  color: var(--ink);
  background-size: 100% 100%;
  background-position: 0 100%;
  color: var(--base);
}

/* keyboard users get the same signal */
a:focus-visible,
.btn:focus-visible,
.chip:focus-visible,
.door:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* footer and nav links keep their own quieter treatment */
.foot a, .nav-links a, .mark { background-image: none; }

/* the peel on the mini desk, scaled for a small card */
.mini-obj { position: relative; }





/* the seal is a permanent fixture now, so it should sit quietly
   until you look at it */
.seal { opacity: 0; }
.seal.on { opacity: 0.92; }
.seal.on:hover { opacity: 1; }

/* ============================================================
   THE MINI DESK, MADE OF WOOD
   The desktop version reads as a desk because of three things:
   a lit front edge, objects at odd angles, and furniture you
   can't click. The mobile version now has all three, and the
   tap targets are untouched.
   ============================================================ */

.mini {
  padding-bottom: 3rem;
  border-radius: 10px;
  border: 1px solid rgba(232, 185, 160, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(232, 185, 160, 0.1),
    inset 0 -30px 40px rgba(0, 0, 0, 0.4),
    0 24px 44px rgba(0, 0, 0, 0.45);
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.14) 0 1px, transparent 1px 4px, rgba(255,255,255,0.012) 4px 5px, transparent 5px 11px),
    linear-gradient(172deg, #4a1a1d 0%, #3d1418 40%, #2c0d13 78%, #23090e 100%);
}

/* the front edge of the desk: the single strongest cue that
   this is a surface with a near side */
.mini::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1rem;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, #5a2124 45%, #3a1417 100%);
  box-shadow: inset 0 1px 0 rgba(232, 185, 160, 0.22);
  z-index: 3;
}

.mini-pool {
  background:
    radial-gradient(52% 34% at 28% 12%,
      rgba(255, 226, 190, 0.19) 0%,
      rgba(255, 214, 175, 0.09) 36%,
      transparent 74%),
    radial-gradient(96% 92% at 50% 46%, transparent 38%, rgba(0, 0, 0, 0.46) 100%);
}

/* things dropped on a desk don't line up */
.mini-obj {
  --rot: 0deg;
  --press: 1;
  transform: rotate(var(--rot)) scale(var(--press));
  transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), filter 0.28s ease;
}

.mini-obj:nth-child(2) { --rot: -3.5deg; margin-top: 0.35rem; }
.mini-obj:nth-child(3) { --rot: 2.4deg; margin-top: 1.4rem; }
.mini-obj:nth-child(4) { --rot: -1.8deg; margin-top: 0.9rem; }
.mini-obj:nth-child(5) { --rot: 3deg; }

.mini-obj:active { --press: 0.955; }

.mini-obj:active .sheet {
  border-color: var(--accent);
  background: rgba(232, 185, 160, 0.1);
  box-shadow: 0 0 0 1px rgba(232, 185, 160, 0.25),
              0 0 22px rgba(232, 185, 160, 0.22);
}

.mini-obj:active .sheet-grid i {
  border-color: rgba(232, 185, 160, 0.8);
  background: rgba(232, 185, 160, 0.07);
}
.mini-obj:active .sheet-head { color: var(--ink); }

.mini-obj:active .lens-ring {
  border-color: var(--accent);
  background: radial-gradient(circle at 38% 32%, rgba(232,185,160,0.22), rgba(0,0,0,0.5) 70%);
  box-shadow: 0 0 22px rgba(232, 185, 160, 0.2);
}

.mini-obj:active img { filter: brightness(1.12); }
.mini-obj:active .note { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55)) brightness(1.05); }

.mini-obj:active .mini-tag { color: var(--ink); }
.mini-obj:active .mini-tag em { color: var(--accent); }

/* --- the note peels here too ------------------------------- */







.mini-obj .tape {
  top: -0.4rem;
  left: 14%;
  width: 2.4rem;
  height: 0.85rem;
  z-index: 3;
  display: block;
}

/* --- furniture: sits in the reserved strip, never on a link - */

.mini-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mini-mug {
  position: absolute;
  left: 38%;
  top: 47.5%;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, #f3e6dd 0%, #d8c3b7 60%, #b59a8d 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5);
}

.mini-mug-coffee {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #6b3a24 0%, #3a1d12 70%, #2a1209 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

.mini-mug::after {
  content: "";
  position: absolute;
  right: -22%;
  top: 50%;
  width: 38%;
  height: 44%;
  transform: translateY(-50%);
  border: 4px solid #d8c3b7;
  border-left-color: transparent;
  border-radius: 50%;
}

.mini-pencil {
  position: absolute;
  right: 9%;
  bottom: 6.5%;
  width: 4rem;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ink-dim) 0 14%, var(--accent) 14% 88%, #4a2a1e 88%);
  transform: rotate(-14deg);
  opacity: 0.55;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}



@media (max-width: 400px) {
  .mini { padding-bottom: 2.6rem; }
  .mini-mug { width: 2.4rem; height: 2.4rem; right: 5%; }
  .mini-pencil { width: 3.8rem; }
}

/* ============================================================
   THE STICKY NOTE AND ITS PEEL

   One wrapper holds both, and the wrapper carries the tilt, so
   the note and the folded corner can never drift out of
   alignment. The flap is a small square anchored to the corner:
   its diagonal IS the crease, and the triangle above that
   diagonal is the underside of the paper folded back over the
   note face. The corner it came from is left empty, showing
   desk, which is what makes it read as a peel and not a cut.
   ============================================================ */

.note-holder {
  position: relative;
  display: block;
  transform: rotate(4deg);
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.obj-note:hover .note-holder { transform: rotate(-1.5deg) scale(1.04); }

.note {
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
  transition: clip-path 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.obj-note:hover .note {
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
}

/* the shadow the lifted flap casts on the note face */
.note-holder::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(315deg, rgba(70, 28, 32, 0.42) 0%, rgba(70, 28, 32, 0.14) 30%, transparent 52%);
  transition: all 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}

.obj-note:hover .note-holder::after { width: 52%; height: 52%; }

/* the flap. Its box is the cut square; the crease runs corner
   to corner across it at 50% of the gradient line. */
.peel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18%;
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;

  /* keep only the half above the crease: the folded underside */
  clip-path: polygon(100% 0, 0 100%, 0 0);

  background: linear-gradient(315deg,
    transparent 0 49.4%,
    rgba(255, 248, 240, 0.98) 50%,
    #f7e3d2 54%,
    #e9c6ab 66%,
    #cfa384 82%,
    #a97a5b 100%);

  border-radius: 0 0 0 2px;
  filter: drop-shadow(2px 2px 5px rgba(35, 10, 14, 0.6));
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1),
              filter 0.45s ease;
}

.obj-note:hover .peel {
  width: 26%;
  filter: drop-shadow(3px 3px 7px rgba(35, 10, 14, 0.62));
}

/* the note was too large for what it says, so it read as an empty
   card. Smaller paper, bigger words. */

.mini-obj .note-holder {
  width: 84%;
  margin-inline: auto;
}

.mini-obj 

.mini-obj 

.mini-obj .tape { left: 20%; }

/* ============================================================
   THE TO-DO NOTE
   A sticky note on a 2am desk says what's left to do. The
   second item is the pitch, and it ticks itself when you
   reach for it.
   ============================================================ */

.note-head {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(46, 10, 18, 0.5);
  margin-bottom: 0.3rem;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.82rem, 1.35vw, 1.02rem);
  line-height: 1.15;
  color: var(--base);
  position: relative;
  transition: opacity 0.35s ease;
}

.box {
  flex: none;
  width: 0.72em;
  height: 0.72em;
  border: 1.5px solid rgba(46, 10, 18, 0.55);
  border-radius: 1px;
  position: relative;
}

/* a hand-drawn tick */
.box::after {
  content: "";
  position: absolute;
  left: 12%;
  top: 6%;
  width: 46%;
  height: 78%;
  border-right: 1.6px solid var(--base);
  border-bottom: 1.6px solid var(--base);
  transform: rotate(38deg) scale(0);
  transform-origin: 60% 70%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.5, 1);
}

.note-item.done .box::after { transform: rotate(38deg) scale(1); }

.note-item.done {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* the pitch ticks itself when you reach for the note */
.obj-note:hover .note-item.hire .box::after,
.mini-obj:active .note-item.hire .box::after { transform: rotate(38deg) scale(1); }

.obj-note:hover .note-item.hire,
.mini-obj:active .note-item.hire { opacity: 1; }

.mini-obj .note { padding: 0 13%; gap: 0.4rem; }
.mini-obj .note-item { font-size: clamp(0.86rem, 3.6vw, 1.05rem); }
.mini-obj .note-head { font-size: 0.58rem; }

/* the mini note inherits the to-do styling explicitly, so no
   layout rule elsewhere can quietly outrank it */

.mini-obj .note { text-align: left; }

.mini-obj .note-head { color: rgba(46, 10, 18, 0.5); }

.mini-obj .note-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--base);
}

.mini-obj .box {
  flex: none;
  width: 0.78em;
  height: 0.78em;
  border: 1.5px solid rgba(46, 10, 18, 0.55);
  border-radius: 1px;
}

/* ---- the palette, defined once ---------------------------- */
/* Three separate rules had accumulated here. One set top, another
   set bottom, so the box was stretched the height of the desk and
   the aspect-ratio on the chips blew them up sideways. */

.obj-swatch {
  left: 61.5%;
  bottom: 21%;
  top: auto;
  right: auto;
  height: auto;
  width: 12%;
  max-width: 138px;
  min-width: 84px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-content: start;
  gap: 2px;
  transform: rotate(-4deg);   /* resting angle, matching data-rot */
}

.obj-swatch .sw {
  aspect-ratio: 0.72;
  height: auto;
  border-radius: 1px;
}

/* ---- the mug, defined once, in the top gap ---------------- */

.obj-mug {
  left: 59%;
  top: 41%;
  bottom: auto;
  width: 6.8%;
  max-width: 82px;
  min-width: 52px;
}

/* the strapline above the desk is gone, so the desk carries its own
   air below the nav instead of inheriting the line's margin */
@media (min-width: 881px) {
  .desk-frame { margin-top: clamp(1.25rem, 3.5vh, 2.75rem); }
}

/* ============================================================
   THE BRIEF-RECEIVED TICK
   The sticky note on the homepage shows "hire samoxy" unchecked.
   When a brand actually does it, the same line ticks itself.
   ============================================================ */

.f-done .todo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.f-done .todo .box {
  flex: none;
  width: 0.72em;
  height: 0.72em;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  position: relative;
}

.f-done .todo .box::after {
  content: "";
  position: absolute;
  left: 14%;
  top: 4%;
  width: 46%;
  height: 80%;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(38deg) scale(0);
  transform-origin: 60% 70%;
  animation: tickIn 0.45s cubic-bezier(0.34, 1.56, 0.5, 1) 0.45s forwards;
}

.f-done .todo span {
  position: relative;
  animation: tickFade 0.6s ease 0.75s forwards;
}

/* the strike draws left to right, like a pen */
.f-done .todo span::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 56%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  animation: strikeIn 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.7s forwards;
}

@keyframes tickIn {
  from { transform: rotate(38deg) scale(0); }
  to   { transform: rotate(38deg) scale(1); }
}

@keyframes strikeIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes tickFade {
  from { opacity: 1; }
  to   { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .f-done .todo .box::after { animation: none; transform: rotate(38deg) scale(1); }
  .f-done .todo span::after { animation: none; transform: scaleX(1); }
  .f-done .todo span { animation: none; opacity: 0.5; }
}