/* ===========================================================================
   jmryansound.com — design tokens + primitives (v1 "Workshop")
   Project: personalbrand (#47) · DH #571 · ported 2026-07-26 (slt-personal)
   Namespace: --jmr-*
   Authority: this file is the canonical look for the personalbrand product.
   Amendment v1.2 (founder 2026-07-26): the reel is never a hero; Bench and
   Credits carry equal weight. See personalbrand/ENCYCLOPEDIA.md.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* --- Surface: warm near-black. Post rooms are dark; this one is warm-dark,
         not the blue-black "tech" wash. Four steps only. ------------------- */
  --jmr-bg:            #121211;
  --jmr-bg-raise:      #161514;
  --jmr-panel:         #1A1917;
  --jmr-panel-hover:   #171615;

  /* --- Rules. Hairlines do all the structural work; no shadows anywhere. -- */
  --jmr-line:          #2B2926;
  --jmr-line-soft:     #211F1D;
  --jmr-line-strong:   #4A4540;

  /* --- Ink: warm off-white, three weights of quiet. -------------------- */
  --jmr-text:          #EDE8DE;
  --jmr-text-2:        #DDD7CC;
  --jmr-text-3:        #C7C0B5;
  --jmr-muted:         #9C958A;
  --jmr-muted-2:       #6E6862;
  --jmr-inactive:      #3A3733;

  /* --- Accent: ONE. Sodium amber — the lamp on a tape machine. --------- */
  --jmr-accent:        #D98A3E;
  --jmr-accent-wash:   rgba(217, 138, 62, .22);

  /* --- Type: two families. Serif for language, mono for machine output. - */
  --jmr-font-text:     Newsreader, Georgia, "Times New Roman", serif;
  --jmr-font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --jmr-size-h1:       clamp(38px, 6.4vw, 74px);
  --jmr-size-h1-page:  clamp(30px, 4.4vw, 48px);
  --jmr-size-lead:     clamp(24px, 3.2vw, 34px);
  --jmr-size-h2:       24px;
  --jmr-size-body-lg:  20px;
  --jmr-size-body:     19px;
  --jmr-size-body-sm:  17px;
  --jmr-size-caption:  16px;
  --jmr-size-label:    10px;
  --jmr-size-mono:     11px;

  --jmr-weight-light:  300;
  --jmr-weight-reg:    400;
  --jmr-weight-med:    500;

  --jmr-lh-display:    1.05;
  --jmr-lh-title:      1.1;
  --jmr-lh-body:       1.6;
  --jmr-track-display: -.02em;
  --jmr-track-label:   .16em;

  /* --- Space: 4pt base, page rhythm in clamps: one layout, no breakpoints. */
  --jmr-s-1:  4px;
  --jmr-s-2:  8px;
  --jmr-s-3:  12px;
  --jmr-s-4:  18px;
  --jmr-s-5:  26px;
  --jmr-s-6:  40px;
  --jmr-gutter:       clamp(18px, 4vw, 44px);
  --jmr-section-gap:  clamp(28px, 4vw, 44px);
  --jmr-page-top:     clamp(40px, 7vw, 88px);
  --jmr-measure:      1080px;
  --jmr-measure-read: 66ch;

  /* --- Shape: near-square. 3px maximum; pills are banned. -------------- */
  --jmr-radius:      3px;
  --jmr-radius-sm:   2px;

  /* --- Motion: shimmer for async placeholders, and the hold clock. ------ */
  --jmr-shimmer-dur:  1.15s;
  --jmr-hold-dur:     900ms;
  --jmr-ease:         cubic-bezier(.2, .6, .2, 1);
}

/* ---------------------------------------------------------------- base --- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--jmr-bg);
  color: var(--jmr-text);
  font-family: var(--jmr-font-text);
  font-size: var(--jmr-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--jmr-text); text-decoration: none; }
a:hover { color: var(--jmr-accent); }
::selection { background: var(--jmr-accent); color: var(--jmr-bg); }
input, select, textarea, button { font: inherit; color: inherit; }
img, iframe { max-width: 100%; }

/* ------------------------------------------------------------ primitives - */

/* Mono label — every machine-produced string on the site uses this. */
.jmr-label {
  font-family: var(--jmr-font-mono);
  font-size: var(--jmr-size-label);
  letter-spacing: var(--jmr-track-label);
  text-transform: uppercase;
  color: var(--jmr-muted);
}
.jmr-label-accent { color: var(--jmr-accent); }

.jmr-mono {
  font-family: var(--jmr-font-mono);
  font-size: var(--jmr-size-mono);
  letter-spacing: .08em;
  color: var(--jmr-muted);
}

/* Frame + rhythm */
.jmr-frame { max-width: var(--jmr-measure); margin: 0 auto; padding-left: var(--jmr-gutter); padding-right: var(--jmr-gutter); }
.jmr-main  { padding-top: var(--jmr-page-top); }
.jmr-read  { max-width: var(--jmr-measure-read); }

/* Header */
.jmr-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(18, 18, 17, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--jmr-line);
}
.jmr-header-in {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: baseline; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
.jmr-wordmark { display: flex; flex-direction: column; gap: 1px; }
.jmr-wordmark-name {
  font-family: var(--jmr-font-mono); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
}
.jmr-wordmark-sub {
  font-family: var(--jmr-font-mono); font-size: var(--jmr-size-label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--jmr-muted);
}
.jmr-nav { display: flex; flex-wrap: wrap; gap: 4px 2px; margin-left: auto; }
.jmr-nav a {
  font-family: var(--jmr-font-mono); font-size: var(--jmr-size-mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 11px; border-bottom: 1px solid transparent;
}
.jmr-nav a:hover { border-bottom-color: var(--jmr-accent); }
.jmr-nav a[aria-current="page"] { color: var(--jmr-text); border-bottom-color: var(--jmr-line-strong); }

/* Display type */
.jmr-h1 {
  margin: 0 0 var(--jmr-section-gap);
  max-width: 22ch;
  font-weight: var(--jmr-weight-light);
  font-size: var(--jmr-size-h1);
  line-height: 1.03;
  letter-spacing: var(--jmr-track-display);
  text-wrap: pretty;
}
.jmr-h1-page {
  margin: 0 0 20px; max-width: 26ch;
  font-weight: var(--jmr-weight-light);
  font-size: var(--jmr-size-h1-page);
  line-height: 1.08; letter-spacing: -.015em;
}
.jmr-eyebrow { margin: 0 0 10px; font-family: var(--jmr-font-mono); font-size: var(--jmr-size-label); letter-spacing: .18em; text-transform: uppercase; color: var(--jmr-muted); }
.jmr-h2 { margin: 0; font-weight: var(--jmr-weight-reg); font-size: var(--jmr-size-h2); letter-spacing: -.01em; }
.jmr-lead { font-weight: var(--jmr-weight-light); font-size: var(--jmr-size-lead); line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; }

.jmr-prose { font-size: var(--jmr-size-body-lg); line-height: var(--jmr-lh-body); color: var(--jmr-text-2); }
.jmr-dim   { color: var(--jmr-muted); }
.jmr-dim-2 { color: var(--jmr-text-3); }

/* Sections separated by hairlines — nothing floats. */
.jmr-section { border-top: 1px solid var(--jmr-line); padding: 28px 0 var(--jmr-section-gap); }
.jmr-section-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }

/* Ruled rows — the structural workhorse (credits, notes, proof rows). */
.jmr-rows { border-top: 1px solid var(--jmr-line); max-width: 900px; }
.jmr-row {
  display: grid; grid-template-columns: minmax(120px, 150px) 1fr auto;
  gap: 8px 28px; align-items: baseline;
  padding: 26px 4px; border-bottom: 1px solid var(--jmr-line);
}
a.jmr-row:hover { background: var(--jmr-panel-hover); color: inherit; }
.jmr-row-claim { font-size: var(--jmr-size-body); }
.jmr-row-go { font-family: var(--jmr-font-mono); font-size: var(--jmr-size-label); letter-spacing: .14em; text-transform: uppercase; color: var(--jmr-accent); }
.jmr-row-inert .jmr-row-claim { color: var(--jmr-text-3); }

/* Panel — used only where a machine surface is implied. */
.jmr-panel { background: var(--jmr-panel); border: 1px solid var(--jmr-line); border-radius: var(--jmr-radius); padding: clamp(18px, 3vw, 26px); }

/* Button — square, outlined, never a pill, never filled with accent. */
.jmr-btn {
  display: inline-block; border: 1px solid var(--jmr-line-strong);
  border-radius: var(--jmr-radius-sm); padding: 11px 18px;
  font-family: var(--jmr-font-mono); font-size: var(--jmr-size-mono);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  background: none;
}
.jmr-btn:hover { border-color: var(--jmr-accent); color: var(--jmr-accent); }

/* Inline link that reads as prose */
.jmr-link { color: var(--jmr-text); border-bottom: 1px solid var(--jmr-line-strong); padding-bottom: 1px; }

/* Amber-ruled aside — degradation notices, confirmations. Never a dialog. */
.jmr-note { margin: 14px 0 0; padding: 12px 14px; border-left: 2px solid var(--jmr-accent); background: var(--jmr-panel); font-size: var(--jmr-size-caption); color: var(--jmr-text-3); max-width: 70ch; }

/* Two-column stretch — responsive without breakpoints. */
.jmr-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px, 4vw, 56px); align-items: start; }

/* Form fields */
.jmr-field { display: flex; flex-direction: column; gap: 8px; }
.jmr-input, .jmr-select, .jmr-textarea {
  background: var(--jmr-panel); border: 1px solid var(--jmr-line);
  border-radius: var(--jmr-radius-sm); padding: 11px 12px;
  font-size: 18px; outline: none; width: 100%;
}
.jmr-input:focus, .jmr-select:focus, .jmr-textarea:focus { border-color: var(--jmr-accent); }
.jmr-textarea { resize: vertical; font-family: var(--jmr-font-text); }
.jmr-input[type="number"] { font-family: var(--jmr-font-mono); }
.jmr-check { display: flex; gap: 10px; align-items: baseline; font-size: 18px; cursor: pointer; }
.jmr-check input { accent-color: var(--jmr-accent); width: 17px; height: 17px; }
.jmr-fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.jmr-fieldset legend { padding: 0; margin-bottom: 4px; }

/* Hold-to-commit — the site's single verb. */
.jmr-hold {
  position: relative; overflow: hidden; width: 100%;
  background: var(--jmr-panel); border: 1px solid var(--jmr-line-strong);
  border-radius: var(--jmr-radius-sm); padding: 15px 18px;
  cursor: pointer; user-select: none; touch-action: none;
  min-height: 44px;
}
.jmr-hold:hover { border-color: var(--jmr-accent); }
.jmr-hold-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--jmr-accent-wash); pointer-events: none; }
.jmr-hold-label { position: relative; font-family: var(--jmr-font-mono); font-size: var(--jmr-size-mono); letter-spacing: var(--jmr-track-label); text-transform: uppercase; color: var(--jmr-text); }
.jmr-hold[disabled] { opacity: .55; cursor: default; }
.jmr-hold[disabled]:hover { border-color: var(--jmr-line-strong); }

/* Footer */
.jmr-footer { margin-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--jmr-line); }
.jmr-footer-in { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; justify-content: space-between; padding: 26px 0 40px; }
.jmr-footer a, .jmr-footer span { font-family: var(--jmr-font-mono); font-size: var(--jmr-size-label); letter-spacing: .14em; text-transform: uppercase; color: var(--jmr-muted); }
.jmr-footer .jmr-footer-mark { color: var(--jmr-muted-2); }
.jmr-footer-links { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* --- Async placeholders: every shimmer occupies its final box, so credits
       JSON lands with zero layout shift. ---------------------------------- */
@keyframes jmr-shimmer {
  0%   { background-position: -420px 0; }
  100% { background-position:  420px 0; }
}
.jmr-shimmer {
  display: block;
  border-radius: var(--jmr-radius-sm);
  background: linear-gradient(90deg, #1C1B19 0%, #26241F 50%, #1C1B19 100%);
  background-size: 420px 100%;
  animation: jmr-shimmer var(--jmr-shimmer-dur) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .jmr-shimmer { animation: none; background: #1C1B19; }
}

/* --- Do-not list, kept with the tokens on purpose -------------------------
   No gradient fields. No glow. No emoji or line-icon bullets. No icon-feature
   grid. No pricing table, feature grid, signup CTA, or testimonial carousel.
   No recolored keyword in a headline. No pill buttons. No third typeface.
   No blue. Swipe is not an input — click and hold is.
   ---------------------------------------------------------------------- */