/* Tickmark v2: black, gold and cream, from the mark. Manrope throughout. */
:root {
  --bg: #0a0a0a;
  --bg-2: #121211;
  --bg-3: #1a1917;
  --line: #2a2824;
  --ink: #efe7d8;
  --muted: #a0978a;
  --gold: #d2a965;
  --gold-2: #b48c4e;
  --cream: #f4e8d2;
  --on-cream: #15130f;
  --on-cream-soft: #5e5647;

  --font: "Manrope", "Helvetica Neue", Arial, system-ui, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --step-head: clamp(2.1rem, 1.2rem + 2.8vw, 3.9rem);
  --step-display: clamp(2.5rem, 0.4rem + 4.9vw, 5.6rem);

  --m: clamp(20px, 3.4vw, 48px);
  --gap: clamp(88px, 10vw, 150px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --slope: -22.7deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--on-cream); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.soft { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- the mark and wordmark ---------- */
.m-cream { fill: var(--cream); }
.m-gold { fill: var(--gold); }
.wm, .intro-word, .foot-word span { font-weight: 700; letter-spacing: -0.035em; }
/* the i-dot is a slanted bar on the stem: measured on Manrope 700, stem top 0.34em, stem centre 0.14em */
.wm-i { position: relative; display: inline-block; line-height: 1; }
.wm-i::after { content: ""; position: absolute; left: 0.16em; top: 0.14em; width: 0.22em; height: 0.12em; background: currentColor; transform: translateX(-50%) skewY(var(--slope)); }

/* ---------- type ---------- */
.display { font-weight: 700; font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.045em; margin: 0; }
.head { font-weight: 700; font-size: var(--step-head); line-height: 1; letter-spacing: -0.04em; margin: 0; }
.lead { font-size: var(--step-lead); line-height: 1.45; color: var(--muted); max-width: 34ch; margin: 28px 0 0; }
.sec-note { margin: 0; color: var(--muted); font-size: var(--step-lead); max-width: 32ch; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--gold); color: var(--on-cream); font-weight: 700; text-decoration: none; border: 1px solid var(--gold); position: relative; overflow: hidden; isolation: isolate; transition: color 300ms var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--cream); transform: translateX(-102%) skewX(-20deg); transform-origin: left; transition: transform 500ms var(--ease); z-index: -1; width: 130%; left: -15%; }
.btn:hover::before { transform: translateX(0) skewX(-20deg); }
.btn.ghost { background: transparent; color: var(--ink); border-color: #4a4539; }
.btn.ghost::before { background: var(--gold); }
.btn.ghost:hover { color: var(--on-cream); border-color: var(--gold); }
.magnetic { will-change: transform; transition: transform 400ms var(--ease), color 300ms var(--ease); }

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 32px; padding: 18px var(--m); transition: background-color 400ms var(--ease), padding 400ms var(--ease); }
.bar.solid { background: rgba(10, 10, 10, 0.94); padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 1.375rem; color: var(--ink); }
.logo .mk { width: 24px; height: 28px; transition: transform 500ms var(--ease); }
.logo:hover .mk { transform: translateY(-2px) rotate(-4deg); }
.bar-links { display: flex; gap: 32px; margin-left: auto; font-size: 0.9375rem; font-weight: 500; }
.bar-links a { text-decoration: none; color: var(--muted); position: relative; transition: color 200ms; }
.bar-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease); }
.bar-links a:hover { color: var(--ink); }
.bar-links a:hover::after { transform: scaleX(1); transform-origin: left; }
body[data-page="notes"] .bar-links a[href="notes.html"] { color: var(--ink); }
.bar-action { font-size: 0.9375rem; font-weight: 700; padding: 10px 18px; border: 1px solid #4a4539; text-decoration: none; transition: border-color 200ms, color 200ms, background-color 200ms; }
.bar-action:hover { border-color: var(--gold); background: var(--gold); color: var(--on-cream); }
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 41; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }

/* ---------- intro (first visit) ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; place-items: center; }
.js .intro { display: grid; }
.intro-lock { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.intro-mark { width: clamp(52px, 7vw, 92px); height: auto; overflow: visible; }
.intro-word { font-size: clamp(2.6rem, 7vw, 5.6rem); display: flex; overflow: hidden; padding-bottom: 0.1em; line-height: 1; }
.intro-word > span { display: inline-block; transform: translateY(110%); }
.intro .m-cream { transform: translate(28px, -12px); opacity: 0; }
.intro .m-gold { transform: translate(-28px, 12px); opacity: 0; }
.intro.play .m-cream, .intro.play .m-gold { transform: none; opacity: 1; transition: transform 900ms var(--ease), opacity 600ms var(--ease); }
.intro.play .m-gold { transition-delay: 120ms; }
.intro.play .intro-word > span { transform: none; transition: transform 800ms var(--ease); transition-delay: calc(380ms + var(--k) * 45ms); }
.intro.out { clip-path: polygon(0 0, 100% 0, 100% 0%, 0 18%); transition: clip-path 900ms var(--ease-io); }
.intro { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.intro.gone { display: none !important; }

/* ---------- page wipe ---------- */
.wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.wipe i { position: absolute; top: -30%; bottom: -30%; left: -40%; width: 180%; transform: translateX(-120%) skewX(-22deg); }
.wipe .w1 { background: var(--gold); }
.wipe .w2 { background: var(--bg); }
.wipe.cover i { transform: translateX(0) skewX(-22deg); transition: transform 650ms var(--ease-io); }
.wipe.cover .w2 { transition-delay: 90ms; }
.arriving .wipe i { transform: translateX(0) skewX(-22deg); }
.arriving .wipe.leave i { transform: translateX(120%) skewX(-22deg); transition: transform 750ms var(--ease-io); }
.arriving .wipe.leave .w1 { transition-delay: 90ms; }

/* ---------- reveals ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .lines:not(.is-in) [data-line] { transform: translateY(110%); }
  .js .lines [data-line] { transition: transform 1000ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .js .fade-in:not(.is-in) { opacity: 0; transform: translateY(16px); }
  .js .fade-in { transition: opacity 900ms var(--ease) 350ms, transform 900ms var(--ease) 350ms; }
  .js [data-reveal]:not([data-reveal="wipe"]):not(.is-in) { opacity: 0; transform: translateY(28px); }
  .js [data-reveal] { transition: opacity 900ms var(--ease), transform 1000ms var(--ease), clip-path 950ms var(--ease-io); transition-delay: var(--d, 0ms); }
  /* the clip sits on the content, so the observed box itself stays visible to IntersectionObserver */
  .js [data-reveal="wipe"] > * { transition: clip-path 950ms var(--ease-io), transform 1000ms var(--ease); }
  .js [data-reveal="wipe"]:not(.is-in) > * { clip-path: polygon(0 112%, 100% 100%, 100% 100%, 0 112%); transform: translateY(40px); }
  .js [data-reveal="wipe"].is-in > * { clip-path: polygon(0 0, 100% -12%, 100% 100%, 0 100%); }
}

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 24px; min-height: min(100svh, 980px); padding: 120px var(--m) 72px; }
.hero-copy { padding-bottom: 12px; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.hero-media { margin: 0; align-self: center; justify-self: end; width: min(100%, 640px); aspect-ratio: 1; overflow: clip; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .hero-media video { animation: hero-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes hero-drift { to { transform: scale(1.12) translateY(6%); opacity: 0.35; } }
  }
}

/* ---------- metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 var(--m); background: var(--bg-2); }
.metric { padding: 36px 28px 32px; position: relative; }
.metric + .metric::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; background: var(--line); }
.m-v { margin: 0; font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.4rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.m-v small { font-size: 0.45em; color: var(--gold); letter-spacing: -0.02em; margin-left: 2px; }
.m-l { margin: 14px 0 0; color: var(--muted); font-size: 0.9375rem; max-width: 24ch; }

/* ---------- section heads ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.workbench { padding: var(--gap) var(--m) 0; }

/* ---------- workbench app (dark) ---------- */
.app { --a-ground: #121211; --a-sheet: #161514; --a-edge: #2a2824; --a-rule: #22201d; --a-text: #efe7d8; --a-muted: #a0978a;
  --chart-1: #d2a965; --chart-2: #efe7d8; --chart-3: #8c9a7a; --chart-muted: #4a463d; --grid: #24221f; --axis-ink: #a0978a; --ink: #efe7d8; --surface: #161514; --raised: #1d1c1a; --rule: #24221f; --negative: #e08a7a; --chart-mark: #efe7d8;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 52px 1fr; background: var(--a-ground); font-size: 14px; color: var(--a-text); min-height: 820px; }
.app-side { grid-row: 1 / 3; padding: 16px 12px; display: flex; flex-direction: column; }
.app-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin: 2px 8px 24px; letter-spacing: -0.02em; }
.app-brand .mark, .app-brand svg { width: 16px; height: 18px; }
.app-brand svg path:first-child { fill: var(--cream); stroke: none; }
.app-brand svg path:last-child { fill: var(--gold); stroke: none; }
.app-nav { display: grid; gap: 2px; position: relative; }
.nav-i { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 12px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--a-muted); position: relative; transition: color 200ms, background-color 200ms; }
.nav-i::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--gold); transform: scaleY(0); transition: transform 350ms var(--ease); }
.nav-i:hover { color: var(--a-text); background: #1a1917; }
.nav-i[aria-selected="true"] { color: var(--a-text); background: #1d1c1a; font-weight: 600; }
.nav-i[aria-selected="true"]::before { transform: scaleY(1); }
.count { font-size: 12px; min-width: 22px; height: 20px; padding: 0 6px; background: #2a2824; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.app-env { margin-top: auto; color: var(--a-muted); font-size: 12px; padding: 0 8px; line-height: 1.45; }
.app-top { display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 6px; color: var(--a-muted); }
.period { font-weight: 600; color: var(--a-text); }
.sheet { background: var(--a-sheet); border: 1px solid var(--a-edge); margin: 0 8px 8px 0; padding: 26px; min-width: 0; } /* taste-skill-ignore: data-ui fragment */
.v-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.v-title .v-h { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.v-sub { margin: 4px 0 0; color: var(--a-muted); font-size: 13px; }
.b-pri { height: 38px; padding: 0 18px; border: 0; background: var(--gold); color: var(--on-cream); font-weight: 700; cursor: pointer; white-space: nowrap; transition: background-color 200ms, transform 150ms; }
.b-pri:hover:not(:disabled) { background: var(--cream); }
.b-pri:active:not(:disabled) { transform: scale(0.97); }
.b-pri:disabled { background: #2a2824; color: #7d766a; cursor: not-allowed; }
.b-sec { height: 32px; padding: 0 12px; border: 1px solid #3a372f; background: transparent; cursor: pointer; font-weight: 600; transition: border-color 200ms, background-color 200ms, color 200ms; } /* taste-skill-ignore: data-ui fragment */
.b-sec:hover { border-color: var(--gold); color: var(--gold); }
.b-sec.sel { background: var(--gold); color: var(--on-cream); border-color: var(--gold); }
.pipe { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pipe li { position: relative; padding: 10px 12px; background: #1d1c1a; color: var(--a-muted); overflow: hidden; }
.pipe li::before { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.pipe li.done { color: var(--a-text); font-weight: 600; }
.pipe li.done::before { transform: scaleX(1); }
.pipe li.done::after { content: ""; display: inline-block; width: 9px; height: 6px; margin-left: 8px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg) translateY(-3px); } /* taste-skill-ignore: data-ui fragment */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.stat { background: #1b1a18; padding: 16px 18px; }
.stat p { margin: 0; }
.stat .s-l { color: var(--a-muted); font-size: 13px; }
.stat .s-v { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 6px; letter-spacing: -0.03em; }
.stat .s-n { color: var(--a-muted); font-size: 12px; margin-top: 2px; }
.stat.flag .s-v { color: var(--gold); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.card { background: #1b1a18; padding: 18px; min-width: 0; }
.c-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.c-t { margin: 0; font-weight: 700; font-size: 15px; }
.c-s { margin: 0; color: var(--a-muted); font-size: 12px; }
.chart { min-height: 200px; }
.queue-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-weight: 600; color: var(--a-muted); font-size: 12px; padding: 8px; border-bottom: 1px solid #2f2c27; white-space: nowrap; } /* taste-skill-ignore: data-ui fragment */
.tbl th.num { text-align: right; }
.tbl td { padding: 11px 8px; border-bottom: 1px solid var(--a-rule); vertical-align: top; } /* taste-skill-ignore: data-ui fragment */
.tbl tbody tr { transition: background-color 150ms; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover { background: #22201d; }
.tbl tbody tr.on { background: #2a251b; }
.tbl .sub { display: block; color: var(--a-muted); font-size: 12px; margin-top: 2px; }
.tbl a, .sample a { color: var(--gold); }
.pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; font-size: 12px; font-weight: 700; background: #2a2824; color: #d6cdbb; white-space: nowrap; }
.pill.ok { background: #1c2a22; color: #9fd0b0; }
.pill.neg { background: #3a1d19; color: #f0a597; }
.pill.warn { background: #33291a; color: #e8c27e; }
.ok { color: #9fd0b0; font-weight: 600; }
.warn { color: #e8c27e; font-weight: 600; }
.drawer { align-self: start; position: sticky; top: 80px; }
.d-empty { color: var(--a-muted); margin: 8px 0; }
.drawer h4 { margin: 10px 0 4px; font-size: 16px; }
.drawer dl, .rv { margin: 12px 0; display: grid; gap: 6px; }
.drawer dl div, .rv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--a-rule); padding-bottom: 6px; } /* taste-skill-ignore: data-ui fragment */
.drawer dt, .rv dt { color: var(--a-muted); }
.drawer dd, .rv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rv .sub { display: block; font-weight: 400; color: var(--a-muted); font-size: 12px; }
.rv .rv-t { border: 0; background: #2a251b; padding: 8px 10px; }
.rv .rv-t dd { color: var(--gold); }
.d-brief { background: #22201d; padding: 10px 12px; margin: 10px 0; line-height: 1.5; border-left: 2px solid var(--gold); }
.d-brief p { margin: 0; }
.d-brief .d-src { color: var(--a-muted); font-size: 12px; margin-top: 6px; }
.d-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.drawer textarea { width: 100%; min-height: 64px; margin-top: 10px; border: 1px solid #3a372f; background: #121211; padding: 8px 10px; resize: vertical; } /* taste-skill-ignore: data-ui fragment */
.drawer textarea:focus, .fq-row input:focus { outline: none; border-color: var(--gold); }
.d-hint { color: var(--a-muted); font-size: 12px; margin: 4px 0 0; }
.tol { color: var(--a-muted); display: flex; align-items: center; gap: 8px; }
.tol select { height: 34px; border: 1px solid #3a372f; padding: 0 8px; background: #121211; color: var(--a-text); } /* taste-skill-ignore: data-ui fragment */
.sample { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sample > div { background: #22201d; padding: 12px 14px; }
.sample p { margin: 0; }
.sl, .sample .sl { color: var(--a-muted); font-size: 12px; margin: 0 0 4px; }
.sl-gap { margin-top: 8px !important; }
.notice { background: #33291a; color: #e8c27e; padding: 8px 12px; font-size: 13px; margin: 0 0 12px; }
.fq { margin-top: 10px; }
.fq-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.fq-q { font-size: 17px; font-weight: 700; margin: 0 0 10px; max-width: 70ch; }
.fq-ev { margin: 2px 0 12px; background: #22201d; padding: 10px 12px; max-width: 72ch; }
.fq-try label { display: block; color: var(--a-muted); font-size: 13px; margin-bottom: 6px; }
.fq-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fq-row input { flex: 1 1 260px; height: 38px; border: 1px solid #3a372f; background: #121211; padding: 0 10px; font-variant-numeric: tabular-nums; } /* taste-skill-ignore: data-ui fragment */
.fq-out { min-height: 22px; margin: 10px 0 0; }
.view { animation: view-in 500ms var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateX(14px); } }
.flash { animation: flash 900ms var(--ease); }
@keyframes flash { from { background: #3a2f1c; } }

/* ---------- control (cream field) ---------- */
.control { margin-top: var(--gap); background: var(--cream); color: var(--on-cream); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: var(--gap) var(--m); }
.control .sec-note { color: var(--on-cream-soft); margin-top: 20px; }
.control-stage { display: grid; justify-items: end; }
.je { width: min(100%, 540px); background: #fffcf6; border: 1px solid #e2d4b9; padding: 24px 24px 20px; font-size: 14px; color: var(--on-cream); } /* taste-skill-ignore: data-ui fragment */
.je-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.je-id { margin: 0; color: var(--on-cream-soft); font-size: 13px; }
.je-memo { margin: 2px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.je .pill { background: #efe5d2; color: #4a4232; }
.je .pill.ok { background: #e1eedf; color: #2d5a3a; }
.je .pill.neg { background: #f6ddd6; color: #8a2a1c; }
.je-lines { width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; }
.je-lines th { text-align: left; font-weight: 600; color: var(--on-cream-soft); font-size: 12px; padding: 6px 0; border-bottom: 1px solid #e8dcc4; } /* taste-skill-ignore: data-ui fragment */
.je-lines th.num { text-align: right; }
.je-lines td { padding: 7px 0; border-bottom: 1px solid #f1e8d6; } /* taste-skill-ignore: data-ui fragment */
.je-lines tfoot th, .je-lines tfoot td { border: 0; padding-top: 10px; font-weight: 700; color: var(--on-cream); }
.acct { color: var(--on-cream-soft); margin-right: 6px; }
.muted { color: #7c7262; }
.je-lines input { width: 112px; text-align: right; border: 1px solid #dccdb0; padding: 5px 8px; background: #faf4e8; font-variant-numeric: tabular-nums; font-size: 14px; transition: border-color 150ms, background-color 150ms; } /* taste-skill-ignore: data-ui fragment */
.je-lines input:hover { border-color: var(--gold-2); }
.je-lines input:focus { outline: none; border-color: var(--gold-2); background: #fff; }
.checks { list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid #e8dcc4; display: grid; gap: 8px; } /* taste-skill-ignore: data-ui fragment */
.checks li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; }
.checks svg { width: 18px; height: 18px; fill: none; stroke: var(--gold-2); stroke-width: 3; stroke-linecap: square; }
.checks svg path { stroke-dasharray: 30; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease); }
.checks li.fail svg path { stroke-dashoffset: 30; }
.checks li.fail, .checks li.fail b { color: #8a2a1c; }
.checks b { font-weight: 600; color: var(--on-cream-soft); }
.je-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--on-cream-soft); }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 34px; height: 20px; background: #d9cbb0; border-radius: 999px; position: relative; transition: background-color 200ms; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 250ms var(--ease); }
.switch input:checked + .track { background: #a8432f; }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.je-release { height: 40px; padding: 0 18px; border: 0; background: var(--on-cream); color: var(--cream); font-weight: 700; cursor: pointer; transition: background-color 200ms, transform 150ms; }
.je-release:hover:not(:disabled) { background: var(--gold-2); color: var(--on-cream); }
.je-release:active:not(:disabled) { transform: scale(0.97); }
.je-release:disabled { background: #e3d6bd; color: #7c7262; cursor: not-allowed; }
.je-log { margin: 12px 0 0; color: var(--on-cream-soft); font-size: 13px; min-height: 20px; }
.je.released { border-color: var(--gold-2); }

/* ---------- contact ---------- */
.contact { padding: var(--gap) var(--m); display: grid; justify-items: start; }
.one-field { position: relative; margin-top: 36px; width: min(100%, 640px); }
.one-field input { width: 100%; height: 68px; border: 0; border-bottom: 1px solid #4a4539; background: transparent; padding: 0 64px 0 0; font-size: 1.25rem; transition: border-color 300ms; } /* taste-skill-ignore: form field */
.one-field input::placeholder { color: #6e675b; }
.one-field input:focus { outline: none; border-bottom-color: var(--gold); }
.go { position: absolute; right: 0; top: 12px; width: 44px; height: 44px; border: 0; background: var(--gold); color: var(--on-cream); font-size: 20px; cursor: pointer; transition: transform 300ms var(--ease), background-color 200ms; }
.go:hover { transform: translateX(4px); background: var(--cream); }
.ct-help { margin: 16px 0 0; color: var(--muted); font-size: 0.9375rem; }
.ct-help a { color: var(--ink); text-underline-offset: 4px; }

/* ---------- footer ---------- */
.foot { padding: 40px var(--m) 28px; overflow: hidden; }
.foot-word { margin: 0 0 32px; display: flex; align-items: center; gap: 0.18em; font-size: clamp(4rem, 15vw, 15rem); line-height: 0.9; color: var(--ink); }
.foot-word .mk { width: 0.62em; height: auto; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .foot-word { animation: foot-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes foot-rise { from { transform: translateY(30%); opacity: 0.2; } to { transform: none; opacity: 1; } }
  }
}
.foot-line { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; font-size: 0.9375rem; align-items: baseline; }
.foot-line > :last-child { text-align: right; }
.foot-links { display: flex; gap: 24px; }
.foot-links a { text-decoration: none; transition: color 200ms; }
.foot-links a:hover { color: var(--gold); }
.credits { color: var(--muted); font-size: 0.8125rem; max-width: 72ch; margin: 0 0 40px; }

/* ================= notes page ================= */
.notes-hero { padding: 168px var(--m) 72px; display: grid; gap: 40px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { padding: 8px 14px; background: var(--bg-2); text-decoration: none; font-size: 0.9375rem; color: var(--muted); transition: color 200ms, background-color 200ms; }
.toc a:hover { color: var(--on-cream); background: var(--gold); }
.principles { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
.rules li { display: grid; gap: 8px; padding-left: 36px; position: relative; }
.rules li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 18px; height: 10px; background: var(--gold); transform: skewY(var(--slope)); }
.rules b { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.02em; }
.rules span { color: var(--muted); max-width: 56ch; }

.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--gap); }
.field { min-height: 72svh; position: relative; padding: 32px 28px; display: flex; flex-direction: column; }
.f1 { background: var(--bg-2); }
.f2 { background: var(--bg-3); }
.f3 { background: #24221e; }
.f4 { background: var(--gold); color: var(--on-cream); }
.field-h { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.1rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; margin: 0; max-width: 12ch; }
.tcard { position: absolute; top: 36%; left: 50%; width: min(260px, calc(100% - 40px)); transform: translate(-50%, 0); background: #fffcf6; color: var(--on-cream); padding: 14px 16px; font-size: 14px; transition: transform 300ms var(--ease); }
.field:hover .tcard { transform: translate(-50%, -8px); }
.tcard p { margin: 0; }
.t-id { color: var(--on-cream-soft); font-size: 13px; }
.t-t { font-weight: 700; font-size: 16px; margin: 8px 0 6px !important; }
.t-m { color: var(--on-cream-soft); font-size: 13px; padding-top: 6px; border-top: 1px solid #efe5d2; margin-top: 6px !important; } /* taste-skill-ignore: data-ui fragment */
.field-c { margin: auto 0 0; font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; max-width: 16ch; }
@media (prefers-reduced-motion: no-preference) {
  .js .fields:not(.is-in) .tcard { opacity: 0; }
  .js .fields:not(.is-in) .field-c, .js .fields:not(.is-in) .field-h { opacity: 0; transform: translateY(20px); }
  .js .field .tcard, .js .field .field-c, .js .field-h { transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
  .js .f2 * { transition-delay: 100ms; } .js .f3 * { transition-delay: 200ms; } .js .f4 * { transition-delay: 300ms; }
}

.receipt { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; padding: var(--gap) var(--m); }
.rc-left { grid-column: 1 / 7; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.rc-note { margin: 20px 0 0; max-width: 40ch; color: var(--muted); }
.total { font-size: clamp(150px, 20vw, 320px); font-weight: 800; line-height: 0.8; letter-spacing: -0.07em; margin: 0; color: var(--gold); font-variant-numeric: tabular-nums; }
.total-cap { margin: 20px 0 0; max-width: 36ch; color: var(--muted); }
.slip { grid-column: 8 / 13; background: var(--cream); color: var(--on-cream); padding: 28px 28px 52px; font-size: 15px; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 95% 100%, 90% calc(100% - 12px), 85% 100%, 80% calc(100% - 12px), 75% 100%, 70% calc(100% - 12px), 65% 100%, 60% calc(100% - 12px), 55% 100%, 50% calc(100% - 12px), 45% 100%, 40% calc(100% - 12px), 35% 100%, 30% calc(100% - 12px), 25% 100%, 20% calc(100% - 12px), 15% 100%, 10% calc(100% - 12px), 5% 100%, 0 calc(100% - 12px)); }
.slip-h { margin: 0 0 18px; font-weight: 700; }
.slip .grp { font-weight: 700; margin: 16px 0 4px; }
.slip .row { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.slip .row .lead { flex: 1; height: 4px; align-self: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23a8987a'/%3E%3C/svg%3E") repeat-x; max-width: none; margin: 0; }
.slip .row.miss { color: #8a2a1c; }
.slip .row.tot { background: var(--on-cream); color: var(--cream); padding: 10px 12px; margin: 18px -12px 0; font-weight: 700; }

.ledger { position: relative; padding: var(--gap) var(--m); display: grid; grid-template-columns: 22% minmax(0, 560px) 1fr; background: var(--bg-2); }
.lg-col { grid-column: 2; }
.lg-list { list-style: none; margin: 32px 0 0; padding: 0; }
.lg-list button { width: 100%; display: grid; grid-template-columns: 55% 1fr auto; align-items: center; min-height: 50px; border: 0; background: none; text-align: left; cursor: pointer; padding: 0; transition: color 200ms, transform 300ms var(--ease); }
.lg-list .n { font-weight: 700; }
.lg-list .k, .lg-list .y { font-size: 0.875rem; color: var(--muted); }
.lg-list .y { text-align: right; min-width: 48px; font-variant-numeric: tabular-nums; }
.lg-list:hover button, .lg-list:focus-within button { color: #6e675b; }
.lg-list button:hover, .lg-list button:focus-visible, .lg-list button.on { color: var(--ink) !important; transform: translateX(6px); }
.lg-list button:hover .y, .lg-list button.on .y { color: var(--gold); }
.lg-preview { grid-column: 3; position: relative; }
.prev { position: absolute; left: 64px; width: 320px; aspect-ratio: 4 / 3; background: var(--cream); color: var(--on-cream); padding: 16px 18px; font-size: 14px; opacity: 0; transform: translateY(10px) rotate(-1deg); transition: opacity 200ms, transform 400ms var(--ease); pointer-events: none; }
.prev.on { opacity: 1; transform: none; }
.prev p { margin: 0; }
.pv-l { color: var(--on-cream-soft); font-size: 12px; margin-top: 8px !important; }
.pv-l:first-child { margin-top: 0 !important; }
.pv-q { font-weight: 700; font-size: 15px; }
.pv-bad { color: #8a2a1c; }
.pv-ok { color: #2d5a3a; font-weight: 700; margin-top: 8px !important; }

.calendar { padding: var(--gap) var(--m); }
.cal-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.calendar .head .soft { color: #6e675b; }
.cal-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 40px; margin-top: 56px; }
.days { display: grid; gap: 6px; align-content: start; }
.day { height: 64px; border: 0; background: var(--bg-2); text-align: left; padding: 0 16px; cursor: pointer; transition: background-color 200ms, color 200ms; }
.day:hover { background: var(--bg-3); }
.day b { display: block; }
.day span { font-size: 0.8125rem; color: var(--muted); }
.day[aria-selected="true"] { background: var(--gold); color: var(--on-cream); }
.day[aria-selected="true"] span { color: #4a3d22; }
.bands { display: grid; gap: 4px; align-content: start; }
.band { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 0 20px; min-height: 76px; padding: 10px 20px; background: var(--bg-2); }
.band:nth-child(even) { background: var(--bg-3); }
.band .t { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); }
.band .ti { font-size: 1.0625rem; font-weight: 700; margin: 0; }
.band .no { font-size: 0.8125rem; color: var(--muted); margin: 2px 0 0; }
.band .who { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--muted); }
.roles { display: flex; }
.roles .r { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; background: #2a2824; color: var(--ink); margin-left: -8px; border: 2px solid var(--bg-2); }
.roles .r:first-child { margin-left: 0; }
.roles .r.a { background: var(--gold); color: var(--on-cream); }
.band.in { animation: band-in 500ms var(--ease) both; animation-delay: calc(var(--k) * 60ms); }
@keyframes band-in { from { opacity: 0; transform: translateX(20px); } }

.data { padding: var(--gap) var(--m); background: var(--bg-2); }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 48px; }
.src { background: var(--bg); padding: 28px; }
.src-k { margin: 0; color: var(--gold); font-weight: 700; font-size: 0.875rem; }
.src h3 { margin: 8px 0 10px; font-size: 1.375rem; letter-spacing: -0.02em; }
.src p:last-child { margin: 0; color: var(--muted); }

.plate { margin: var(--gap) 0 0; padding: 0 var(--m); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.plate-img { height: 78svh; overflow: clip; }
.plate-img img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 20%; filter: sepia(0.15) contrast(1.05); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .plate-img img { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { transform: translateY(-9%) scale(1.05); } to { transform: none; } }
  }
}
.plate figcaption { font-size: var(--step-lead); line-height: 1.4; max-width: 26ch; color: var(--muted); }

.letter { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: var(--gap) var(--m); }
.sheet-paper { background: var(--cream); color: var(--on-cream); padding: 56px 56px 0; font-size: 1.0625rem; line-height: 1.6; }
.sheet-paper p { margin: 0 0 1.1em; }
.seal { width: 38px; height: 44px; display: block; margin-bottom: 28px; }
.seal .m-cream { fill: var(--on-cream); }
.seal .m-gold { fill: var(--gold-2); }
.sheet-paper mark { background: #ecd9b3; color: inherit; padding: 0 3px; }
.sign { font-style: italic; font-size: 1.4rem; margin: 32px 0 2px !important; }
.role { color: var(--on-cream-soft); font-size: 0.875rem; }
.tear { margin: 36px -56px 0; padding: 0 56px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Ccircle cx='3' cy='3' r='2.2' fill='%23c9b48c'/%3E%3C/svg%3E") repeat-x 0 0; }
.tear a { font-weight: 700; color: var(--on-cream); text-underline-offset: 4px; }
.letter-pic { margin: 0; }
.letter-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(0.2) contrast(1.05); }
.letter-pic figcaption { margin-top: 14px; color: var(--muted); font-size: 0.9375rem; }
.intro-h, .intro { }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .bar-links { display: none; }
  .bar-action { margin-left: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 110px; }
  .hero-media { order: -1; justify-self: center; width: min(78vw, 520px); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3)::before { display: none; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; min-height: 0; }
  .app-side, .app-top, .sheet { min-width: 0; }
  .app-side { grid-row: auto; padding: 12px; }
  .app-brand { margin-bottom: 10px; }
  .app-nav { display: flex; overflow-x: auto; gap: 4px; }
  .nav-i { flex: 0 0 auto; }
  .nav-i::before { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; height: 2px; transform: scaleX(0); }
  .nav-i[aria-selected="true"]::before { transform: scaleX(1); }
  .app-env { display: none; }
  .app-top { padding: 0 16px 8px; }
  .sheet { margin: 0 8px 8px; }
  .queue-wrap { grid-template-columns: minmax(0, 1fr); }
  .drawer { position: static; }
  .control { grid-template-columns: minmax(0, 1fr); }
  .control-stage { justify-items: start; }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .lg-col { grid-column: 1; }
  .lg-preview { display: none; }
  .receipt .rc-left, .receipt .slip { grid-column: 1 / 13; }
  .receipt .slip { margin-top: 56px; max-width: 520px; }
  .letter { grid-template-columns: minmax(0, 1fr); }
  .plate { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  :root { --m: 20px; --gap: 72px; }
  .bar { padding: 14px var(--m); }
  .logo { font-size: 1.2rem; }
  .bar-action { padding: 8px 12px; }
  .display { font-size: 9vw; }
  .hero { padding-bottom: 48px; }
  .actions .btn { flex: 1 1 100%; }
  .metrics { margin: 0; }
  .metric { padding: 26px 20px; }
  .m-v { font-size: 2.4rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two, .sample { grid-template-columns: minmax(0, 1fr); }
  .sheet { padding: 16px; max-height: 78svh; overflow: auto; overscroll-behavior: contain; }
  .v-title { flex-direction: column; }
  .tbl { display: block; overflow-x: auto; }
  .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .je { padding: 16px 14px; }
  .je-lines input { width: 96px; }
  .je-lines td:first-child { font-size: 13px; }
  .foot-line { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .foot-line > :last-child { text-align: left; }
  .foot-links { flex-wrap: wrap; gap: 8px 20px; }
  .notes-hero { padding-top: 120px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .field { min-height: 60svh; padding: 24px 20px; }
  .tcard { position: static; transform: none; margin: 28px 0 0; width: 260px; }
  .field:hover .tcard { transform: none; }
  .field-c { order: -1; margin: 16px 0 0; font-size: 1.4rem; }
  .f1 .field-c { order: 0; }
  .total { font-size: 38vw; }
  .slip { padding: 22px 18px 46px; }
  .slip .row.tot { margin: 18px -8px 0; padding: 10px 8px; }
  .lg-list button { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; padding: 6px 0; }
  .lg-list .k { grid-row: 2; grid-column: 1 / 3; font-size: 0.8125rem; }
  .cal-top { flex-direction: column; align-items: stretch; }
  .cal-body { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .days { grid-auto-flow: column; grid-auto-columns: 1fr; position: sticky; top: 56px; z-index: 2; background: var(--bg); padding: 6px 0; }
  .day { height: 56px; padding: 0 4px; text-align: center; }
  .band { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; gap: 6px 12px; }
  .band .t { grid-column: 1; font-size: 1.0625rem; }
  .band .who { grid-column: 2; grid-row: 1; }
  .band > div:nth-child(2) { grid-column: 1 / 3; }
  .band .who .wtxt { display: none; }
  .data-grid { grid-template-columns: minmax(0, 1fr); }
  .plate-img { height: 60svh; }
  .letter { padding-left: 0; padding-right: 0; }
  .sheet-paper { padding: 40px 24px 0; }
  .tear { margin: 28px -24px 0; padding: 0 24px; }
  .letter-pic { padding: 0 var(--m); }
}

/* ---------- motion components ---------- */
.bar { transition: background-color 400ms var(--ease), padding 400ms var(--ease), transform 500ms var(--ease); }
.bar.away { transform: translateY(-110%); }
.kbd { margin-left: 8px; height: 38px; padding: 0 12px; border: 1px solid #3a372f; background: transparent; color: var(--muted); font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: color 200ms, border-color 200ms; }
.kbd:hover { color: var(--ink); border-color: var(--gold); }
@media (max-width: 1100px) { .kbd { margin-left: auto; } .kbd + .bar-action { margin-left: 0; } }

.seg { position: relative; }
.seg > :not(.seg-ind) { position: relative; z-index: 1; }
.seg-ind { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; transition: transform 500ms var(--ease), width 500ms var(--ease), height 500ms var(--ease); }
.app-nav .seg-ind { background: #24221e; box-shadow: inset 2px 0 0 var(--gold); } /* taste-skill-ignore: data-ui fragment */
.app-nav .nav-i[aria-selected="true"] { background: transparent; }
.app-nav .nav-i::before { display: none; }
#days .seg-ind { background: var(--gold); }
#days .day[aria-selected="true"] { background: transparent; }
@media (max-width: 1100px) { .app-nav .seg-ind { box-shadow: inset 0 -2px 0 var(--gold); } } /* taste-skill-ignore: data-ui fragment */

.metric, .src, .stat, .card { --sx: 50%; --sy: -200px; background-image: radial-gradient(420px circle at var(--sx) var(--sy), rgba(210, 169, 101, 0.10), transparent 60%); } /* taste-skill-ignore: spotlight requested */
.je { transition: transform 500ms var(--ease), border-color 200ms; transform-style: preserve-3d; }

.skel td i { display: block; height: 10px; width: 80%; background: #24221e; margin: 4px 0; position: relative; overflow: hidden; }
.skel td i.s2 { width: 50%; }
.skel td i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(210, 169, 101, 0.16), transparent); transform: translateX(-100%); animation: shimmer 1.1s infinite; } /* taste-skill-ignore: skeleton */
@keyframes shimmer { to { transform: translateX(100%); } }

.toasts { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; gap: 8px; width: min(340px, calc(100vw - 40px)); pointer-events: none; }
.toast { background: var(--cream); color: var(--on-cream); padding: 12px 16px 12px 18px; display: grid; gap: 2px; font-size: 14px; border-left: 3px solid var(--gold-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 350ms var(--ease), transform 450ms var(--ease); } /* taste-skill-ignore: floating overlay */
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateX(30px); }
.toast span { color: var(--on-cream-soft); font-size: 13px; }

.palette { position: fixed; inset: 0; z-index: 80; background: rgba(5, 5, 5, 0.6); display: grid; place-items: start center; padding: 14vh 20px 20px; opacity: 0; transition: opacity 220ms var(--ease); }
.palette.on { opacity: 1; }
.pal-box { width: min(560px, 100%); background: var(--bg-2); border: 1px solid #3a372f; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translateY(-10px) scale(0.98); transition: transform 300ms var(--ease); } /* taste-skill-ignore: floating overlay */
.palette.on .pal-box { transform: none; }
.pal-box input { width: 100%; height: 56px; border: 0; border-bottom: 1px solid #2a2824; background: transparent; padding: 0 18px; font-size: 1.0625rem; } /* taste-skill-ignore: form field */
.pal-box input:focus { outline: none; }
#pal-list { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
#pal-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; color: var(--muted); }
#pal-list li small { color: #6e675b; }
#pal-list li[aria-selected="true"] { background: #24221e; color: var(--ink); box-shadow: inset 2px 0 0 var(--gold); } /* taste-skill-ignore: floating overlay */
#pal-list li.none { cursor: default; }
.tbl td:first-child { white-space: nowrap; }

.ct-who { margin: 28px 0 0; font-size: var(--step-lead); max-width: 40ch; }
@media (hover: none) { .kbd { display: none; } }
.palette[hidden] { display: none !important; }

/* ---------- v2.1: labelled jump button, larger 3D mark, real contact form ---------- */
.kbd { display: inline-flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.kbd kbd { font: inherit; font-size: 0.75rem; color: var(--muted); padding: 3px 7px; background: #1d1c1a; }
.kbd:hover kbd { color: var(--on-cream); background: var(--gold); }

@media (min-width: 1101px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .hero-media { width: min(100%, 84svh, 960px); justify-self: center; }
}
.hero-media video { transform: scale(1.32); }
@keyframes hero-drift { from { transform: scale(1.32); } to { transform: scale(1.46) translateY(5%); opacity: 0.35; } }

.contact { justify-items: stretch; }
.contact > * { max-width: 680px; }
.ct-who { color: var(--muted); }
.mail-form { margin-top: 40px; display: grid; gap: 22px; }
.mf-row { display: grid; gap: 8px; }
.mf-row label { font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.mf-row input, .mf-row textarea { width: 100%; border: 0; border-bottom: 1px solid #4a4539; background: transparent; padding: 10px 0; font-size: 1.125rem; color: var(--ink); resize: vertical; transition: border-color 300ms; } /* taste-skill-ignore: form field */
.mf-row input::placeholder, .mf-row textarea::placeholder { color: #6e675b; }
.mf-row input:focus, .mf-row textarea:focus { outline: none; border-bottom-color: var(--gold); }
.mf-row [aria-invalid="true"] { border-bottom-color: #e8a090; }
.mf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mf-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.mf-foot .ct-help { margin: 0; }
#ct-send:disabled { opacity: 0.7; cursor: progress; }
.contact .ok { color: #9fd0b0; font-weight: 600; }
.contact .warn { color: #e8c27e; font-weight: 600; }
.logo, .kbd, .kbd span { white-space: nowrap; }
@media (max-width: 760px) { .kbd { display: none; } .bar-action { margin-left: auto; } }
:root { --step-display: clamp(2.5rem, 0.2rem + 4.4vw, 5.6rem); }

/* ---------- v2.2: your data, exports, journal drafts ---------- */
.sec-note { display: grid; gap: 10px; justify-items: start; }
.sec-note p { margin: 0; }
.link-btn { border: 0; background: none; padding: 0; color: var(--gold); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 200ms; }
.link-btn:hover { color: var(--cream); }
.c-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.jes { margin-top: 10px; }
.nav-mine { color: var(--gold); }
.nav-mine .count { background: var(--gold); color: var(--on-cream); }
.my-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.up .up-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.up .up-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-f { background: #22201d; padding: 14px; display: grid; gap: 8px; align-content: start; }
.up-f label { font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.up-f .req { color: var(--gold); font-size: 12px; font-weight: 600; }
.up-f .opt { color: var(--a-muted); font-size: 12px; font-weight: 600; }
.up-f input[type="file"] { width: 100%; color: var(--a-muted); font-size: 13px; }
.up-f input[type="file"]::file-selector-button { margin-right: 10px; height: 32px; padding: 0 12px; border: 1px solid #3a372f; background: #161514; color: var(--a-text); font: inherit; font-weight: 600; cursor: pointer; } /* taste-skill-ignore: form field */
.up-f input[type="file"]::file-selector-button:hover { border-color: var(--gold); color: var(--gold); }
.up-cols { margin: 0; color: var(--a-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.up-state { margin: 0; font-size: 13px; min-height: 18px; }
.up-f .link-btn { justify-self: start; font-size: 13px; }
.up-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; color: var(--a-muted); }
.up-row input[type="date"], .up-row select { height: 36px; border: 1px solid #3a372f; background: #121211; color: var(--a-text); padding: 0 8px; color-scheme: dark; } /* taste-skill-ignore: form field */
.up-row .b-pri { margin-left: auto; }
.up-err { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; color: #e8c27e; font-size: 13px; max-height: 200px; overflow: auto; }
.up-err:empty { display: none; }
.my-res { margin-top: 10px; display: grid; gap: 10px; }
.my-res .stats { margin-bottom: 0; }
@media (max-width: 900px) {
  .up .up-grid, .up .up-grid.two-up { grid-template-columns: minmax(0, 1fr); }
  .up-row .b-pri { margin-left: 0; width: 100%; }
}
/* hidden always wins over a component's display */
[hidden] { display: none !important; }
.sr-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.up-pick { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px; border: 1px dashed #4a463d; color: var(--a-muted); font-size: 13px; font-weight: 600 !important; text-align: center; cursor: pointer; transition: border-color 200ms, color 200ms, background-color 200ms; } /* taste-skill-ignore: drop zone */
.up-pick:hover, .sr-file:focus-visible + .up-pick, .up-f.drag .up-pick { border-color: var(--gold); color: var(--gold); background: rgba(210, 169, 101, 0.06); }
.sr-file:focus-visible + .up-pick { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- v2.3: fuller Try a control and Contact ---------- */
.control { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.control-copy { display: grid; gap: 22px; align-content: center; }
.control .sec-note { margin-top: 0; }
.je { width: min(100%, 640px); padding: 30px 30px 24px; font-size: 15px; } /* taste-skill-ignore: data-ui fragment */
.je-memo { font-size: 20px; }
.je-lines input { width: 132px; font-size: 15px; }

.scale { margin: 6px 0 0; max-width: 520px; }
.scale svg { display: block; width: 100%; height: auto; overflow: visible; }
.sc-post, .sc-beam line, .sc-str { fill: none; stroke: var(--on-cream); stroke-linecap: round; }
.sc-post { stroke-width: 6; }
.sc-beam line { stroke-width: 7; }
.sc-beam circle { fill: var(--gold-2); }
.sc-str { stroke-width: 1.6; opacity: 0.55; }
.sc-dish { fill: var(--gold); }
.scale text { fill: var(--on-cream); font-family: var(--font); font-weight: 700; font-size: 18px; text-anchor: middle; }
.sc-beam { transform-box: view-box; transform-origin: 260px 70px; transform: rotate(var(--tilt, 0deg)); transition: transform 1100ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sc-pan-l, .sc-pan-r { transform-box: view-box; transform: rotate(calc(var(--tilt, 0deg) * -1)); transition: transform 1100ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sc-pan-l { transform-origin: 60px 70px; }
.sc-pan-r { transform-origin: 460px 70px; }
.sc-tick { fill: none; stroke: var(--gold-2); stroke-width: 6; stroke-linecap: square; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 600ms var(--ease) 300ms; }
.scale.balanced .sc-tick { stroke-dashoffset: 0; }
.sc-totals { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; margin-top: 10px; }
.sc-totals > span:last-child { text-align: right; }
.sc-totals small { display: block; color: var(--on-cream-soft); font-size: 0.8125rem; font-weight: 600; }
.sc-totals b { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sc-diff { align-self: center; padding: 6px 12px; background: #e1eedf; color: #2d5a3a; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; transition: background-color 300ms, color 300ms; }
.scale:not(.balanced) .sc-diff { background: #f6ddd6; color: #8a2a1c; }
@media (prefers-reduced-motion: reduce) { .sc-beam, .sc-pan-l, .sc-pan-r { transition: none; } }

.try { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.try-l { color: var(--on-cream-soft); font-size: 0.875rem; font-weight: 700; margin-right: 4px; }
.try-b { height: 38px; padding: 0 14px; border: 1px solid #cdbd9c; background: transparent; color: var(--on-cream); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: background-color 200ms, border-color 200ms, transform 150ms; } /* taste-skill-ignore: control */
.try-b:hover { background: var(--on-cream); color: var(--cream); border-color: var(--on-cream); }
.try-b:active { transform: scale(0.97); }

.contact { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; justify-items: stretch; min-height: min(92svh, 900px); align-content: center; }
.contact > * { max-width: none; position: relative; z-index: 1; }
.ct-mark { position: absolute !important; z-index: 0 !important; right: -4%; bottom: -14%; width: min(52vw, 700px); height: auto; opacity: 0.05; pointer-events: none; }
.ct-mark path:first-child { fill: var(--cream); }
.ct-mark path:last-child { fill: var(--gold); }
.ct-left { display: grid; gap: 28px; align-content: start; }
.ct-left .display { font-size: clamp(2.6rem, 0.6rem + 4.6vw, 5.4rem); }
.ct-who { margin: 0; font-size: var(--step-lead); max-width: 30ch; color: var(--ink); }
.ct-facts { margin: 8px 0 0; display: grid; gap: 18px; max-width: 520px; }
.ct-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.ct-facts dt { color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.ct-facts dd { margin: 0; overflow-wrap: anywhere; }
.ct-facts a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--gold); transition: color 200ms; }
.ct-facts a:hover { color: var(--gold); }
.contact .mail-form { margin-top: 8px; background: var(--bg-2); padding: clamp(24px, 3vw, 44px); gap: 24px; }
.mf-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

@media (max-width: 1100px) {
  .control { grid-template-columns: minmax(0, 1fr); }
  .scale { max-width: 460px; }
  .contact { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ct-mark { width: 80vw; bottom: -6%; }
}
@media (max-width: 640px) {
  .je { padding: 18px 14px; font-size: 14px; }
  .je-lines input { width: 100px; font-size: 14px; }
  .ct-facts div { grid-template-columns: 1fr; gap: 2px; }
  .sc-totals b { font-size: 1.35rem; }
}
@media (min-width: 1101px) {
  .control { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .scale { max-width: 640px; }
}
@media (min-width: 1101px) { .control-stage { justify-items: center; } }

/* ---------- v2.3 phone pass ---------- */
.up-l { color: var(--a-muted); }
.up-dl { color: var(--a-muted); }
@media (max-width: 760px) {
  .kbd + .bar-action, .bar-action { margin-left: auto; }
}
@media (max-width: 640px) {
  /* stat figures shrink instead of overflowing their tile */
  .stat { padding: 14px; }
  .stat .s-v { font-size: clamp(18px, 5.6vw, 24px); overflow-wrap: anywhere; }
  .pipe li { font-size: 13px; padding: 10px; }

  /* thumb-sized controls */
  .nav-i, .b-sec, .b-pri, .try-b, .je-release, .day, .toc a, #fq-pick button { min-height: 44px; }
  .b-sm { height: 40px; }
  .tol select, .up-row input[type="date"], .up-row select, .fq-row input, .je-lines input { min-height: 44px; }
  .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
  .logo { min-height: 44px; }
  .bar-action { min-height: 44px; display: inline-flex; align-items: center; }

  /* pay period as From / To columns */
  .up-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; align-items: end; }
  .up-row .up-l { grid-column: 1 / -1; font-weight: 700; color: var(--a-text); }
  .up-row label[for="up-start"] { grid-area: 2 / 1; }
  .up-row #up-start { grid-area: 3 / 1; width: 100%; }
  .up-row label[for="up-end"] { grid-area: 2 / 2; }
  .up-row #up-end { grid-area: 3 / 2; width: 100%; }
  .up-row label[for="up-window"] { grid-column: 1 / -1; }
  .up-row #up-window { grid-column: 1 / -1; width: 100%; }
  .up-row .b-pri { grid-column: 1 / -1; margin-top: 6px; }

  /* tables become cards, one per row, each value labelled */
  .tbl { display: table; overflow: visible; }
  .tbl thead { display: none; }
  .tbl tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 14px 4px; border-bottom: 1px solid var(--a-rule); } /* taste-skill-ignore: data-ui fragment */
  .tbl td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  .tbl td.num { text-align: left; }
  .tbl td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--a-muted); font-size: 11px; font-weight: 600; }
  .tbl td:not([data-label])::before { content: none; }
  .tbl td.w, .tbl td[colspan] { grid-column: 1 / -1; }
  .tbl td .b-sec + .b-sec { margin-left: 6px; }
  .tbl tbody tr.click { cursor: pointer; }
}
/* the real file input stays a 1px target inside its box (it was inheriting width: 100%) */
.up-f { position: relative; }
.up-f input.sr-file { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
@media (max-width: 640px) {
  .stat .s-v { font-size: clamp(16px, 4.9vw, 24px); overflow-wrap: normal; white-space: nowrap; letter-spacing: -0.035em; }
  .tbl td:has(.b-sec) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .tbl td:has(.b-sec)::before { flex-basis: 100%; margin-bottom: 0; }
  .tbl td .b-sec + .b-sec { margin-left: 0; }
}
/* dividers between number tiles count tiles only (the section's hidden heading is its first child) */
@media (max-width: 1100px) {
  .metric:nth-child(3)::before { display: block; }
  .metric:nth-of-type(3)::before { display: none; }
}