/* ==========================================================================
   subpage-uniqueness.css · r43
   Per-subpage character for bensachwitz.com subpages (post-r40 uniqueness pass).
   Loads LAST (after design-system.css) on subpages + index (de-gold corrections).
   Direction: white/light. Accents: ink + oxblood only. No gold, no yellow.
   make-interfaces-feel-better adoptions are marked [mifb].
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. DE-GOLD CORRECTIONS (site-wide wherever this sheet loads)
   Live gold found on subpages: .btn-gold + .booking-gold-bar (booking modal),
   .spotlight-host::after (gold mouse glow on #career / #arcade), .gradient-text
   (ox/gold/ox shimmer), .loader-bar + .loader-text em, .cert-modal-gold-bar,
   .proj:hover .proj-num. Arcade-cabinet-internal game accents (.game-btn-primary,
   .touch-btn) intentionally untouched: functional game UI.
   -------------------------------------------------------------------------- */
.btn-gold {
  background: var(--ds-ink); color: var(--ds-bone); border-color: transparent;
}
.btn-gold:hover {
  background: #232327; color: var(--ds-bone); border-color: transparent;
  transform: translateY(-2px); box-shadow: 0 12px 24px rgba(11,11,12,.25);
}
.btn-gold:active { transform: translateY(0) scale(.96); }
.booking-gold-bar, .cert-modal-gold-bar {
  background: linear-gradient(90deg, var(--ds-ox), rgba(140,29,24,.25)) !important;
}
body .spotlight-host::after {
  background:
    radial-gradient(600px circle at var(--mx) var(--my), rgba(140,29,24,.10), transparent 55%),
    radial-gradient(500px circle at 85% 75%, rgba(11,11,12,.06), transparent 55%) !important;
}
@media (hover: none) {
  body .spotlight-host::after {
    background:
      radial-gradient(600px circle at 20% 30%, rgba(140,29,24,.06), transparent 55%),
      radial-gradient(500px circle at 85% 75%, rgba(11,11,12,.05), transparent 55%) !important;
  }
}
.gradient-text {
  background: linear-gradient(135deg, var(--ds-ox), var(--ds-ink) 50%, var(--ds-ox));
  background-size: 200% 200%; background-clip: text; -webkit-background-clip: text;
  color: transparent;
}
.loader-bar { background: var(--ds-ink) !important; }
.loader-text em { color: var(--ds-ox); font-style: italic; }
.proj:hover .proj-num { color: var(--ds-ox) !important; }

/* --------------------------------------------------------------------------
   B. SHARED UNIQUENESS PRIMITIVES
   -------------------------------------------------------------------------- */
.uq-hero {
  position: relative; overflow: hidden;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
}
.uq-hero .display-h, .uq-hero h1 { text-wrap: balance; }          /* [mifb] */
.uq-hero p { text-wrap: pretty; }                                 /* [mifb] */
.uq-hero .eyebrow { margin-bottom: .9rem; }

/* photo figures: intentional crops, pure-black light-mode outline [mifb] */
.uq-fig { margin: 0; }
.uq-fig img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  outline: 1px solid oklch(0 0 0 / 0.1); outline-offset: -1px;   /* [mifb] */
  background: var(--ds-bone-2);
}
.uq-fig figcaption {
  font-family: var(--ds-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ds-ink-soft); margin-top: .55rem;
}

/* tabular numerals wherever numbers update or align [mifb] */
.uq-num, .uq-stamp, .uq-range { font-variant-numeric: tabular-nums; }

/* tactile press on new interactive elements: exactly 0.96 [mifb] */
.uq-pressable {
  transition-property: transform, box-shadow, background-color, color, border-color;
  transition-duration: .25s; transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
.uq-pressable:active { transform: scale(.96); }

/* concentric radii helper: frame 18 = inner 10 + 8 padding [mifb] */
.uq-frame {
  background: #fffdf9; border: 1px solid var(--ds-line);
  border-radius: 18px; padding: 8px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -22px rgba(11,11,12,.28);
}
.uq-frame > img { border-radius: 10px; }

/* section label plate */
.uq-plate {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--ds-mono); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ds-ink);
  border: 1px solid var(--ds-line); border-radius: 999px;
  padding: .45rem 1rem; background: rgba(255,253,249,.7);
}
.uq-plate::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-ox); flex: none;
}

/* date stamp chip */
.uq-stamp {
  display: inline-block; font-family: var(--ds-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ds-ink);
  border: 1px solid var(--ds-ink); border-radius: 6px; padding: .35rem .7rem;
  transform: rotate(-2deg); background: rgba(255,253,249,.8);
}

/* --------------------------------------------------------------------------
   C. PER-PAGE CHARACTER
   -------------------------------------------------------------------------- */

/* ---- ABOUT: the portrait. Split hero, photo triptych, staggered tilts ---- */
.uq-hero-about { background:
  radial-gradient(42vmax 30vmax at 88% 8%, rgba(11,11,12,.045), transparent 70%); }
.uq-grid-2 {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.uq-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.uq-trio .uq-fig {
  background: #fffdf9; border: 1px solid var(--ds-line);
  border-radius: 16px; padding: 7px 7px 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 16px 34px -20px rgba(11,11,12,.3);
  transition-property: transform, box-shadow; transition-duration: .3s;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
.uq-trio .uq-fig img { border-radius: 9px; aspect-ratio: 3 / 4; }  /* 16 = 9 + 7 */
.uq-trio .uq-fig:nth-child(1) { transform: rotate(-2.2deg) translateY(10px); }
.uq-trio .uq-fig:nth-child(2) { transform: rotate(1.4deg); }
.uq-trio .uq-fig:nth-child(3) { transform: rotate(-1.1deg) translateY(18px); }
.uq-trio .uq-fig:hover { transform: rotate(0) translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 44px -20px rgba(11,11,12,.38); }
.uq-trio figcaption { text-align: center; }
@media (max-width: 900px) {
  .uq-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .uq-trio { max-width: 560px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- TIMELINE: the record. Centered hero, mono year rail on entries ---- */
.uq-hero-timeline { text-align: center; background:
  linear-gradient(180deg, rgba(11,11,12,.035), transparent 55%); }
.uq-hero-timeline .eyebrow { justify-content: center; }
.uq-hero-timeline .eyebrow::before { display: none; }
.uq-range {
  display: inline-block; margin-top: 1.1rem; font-family: var(--ds-mono);
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ds-ink); border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line); padding: .6rem 1.4rem;
}
body.uq-timeline .ds-timeline { position: relative; padding-left: 2.2rem; }
body.uq-timeline .ds-timeline::before {
  content: ""; position: absolute; left: .55rem; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--ds-line);
}
body.uq-timeline .ds-tl-row { position: relative; }
body.uq-timeline .ds-tl-row::before {
  content: ""; position: absolute; left: -2.2rem; top: .5rem;
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--ds-bone); border: 2px solid var(--ds-ink);
  transform: translateX(.24rem);
}
body.uq-timeline .ds-tl-date { color: var(--ds-ox); font-weight: 600; }

/* ---- CAREER: the ledger. Dossier hero; ink bands converted to light ---- */
.uq-hero-career { background:
  repeating-linear-gradient(180deg, transparent 0 34px, rgba(11,11,12,.05) 34px 35px); }
.uq-hero-career .uq-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.uq-hero-career .uq-fig img { border-radius: 9px; aspect-ratio: 4 / 3; }
.uq-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.uq-chip {
  font-family: var(--ds-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ds-ink);
  border: 1px solid var(--ds-line); background: rgba(255,253,249,.8);
  border-radius: 999px; padding: .5rem 1rem;
}
.uq-chip b { font-weight: 700; margin-right: .35em; font-variant-numeric: tabular-nums; }
/* ledger rows: ruled, mono markers */
body.uq-career .tl-row { border-top: 1px solid var(--ds-line); }
body.uq-career .tl-row:last-child { border-bottom: 1px solid var(--ds-line); }
body.uq-career .tl-marker { color: var(--ds-ox) !important; font-weight: 600; }
@media (max-width: 900px) { .uq-hero-career .uq-wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---- CONTACT: the correspondence. Letterhead hero, postage stamp ---- */
.uq-hero-contact { background:
  radial-gradient(36vmax 26vmax at 12% 0%, rgba(140,29,24,.05), transparent 70%); }
.uq-hero-contact .uq-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.uq-stamp { position: relative; max-width: 340px; margin-left: auto; transform: rotate(2.5deg); }
.uq-stamp .uq-perf {
  background: #fffdf9; padding: 14px; border-radius: 6px;
  -webkit-mask: radial-gradient(circle 7px at 7px 7px, transparent 98%, #000) -7px -7px / 22px 22px;
  mask: radial-gradient(circle 7px at 7px 7px, transparent 98%, #000) -7px -7px / 22px 22px;
  box-shadow: 0 18px 40px -22px rgba(11,11,12,.35);
}
.uq-stamp img { border-radius: 2px; aspect-ratio: 4 / 5; }
.uq-postmark {
  position: absolute; top: -26px; right: -18px; width: 108px; height: 108px;
  border: 2px solid var(--ds-ox); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--ds-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ds-ox); transform: rotate(-10deg);
  background: rgba(255,253,249,.55); padding: .8rem; line-height: 1.5;
  pointer-events: none;
}
body.uq-contact .ds-form {
  background: #fffdf9; border: 1px solid var(--ds-line); border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 50px -28px rgba(11,11,12,.3);
}
@media (max-width: 900px) {
  .uq-hero-contact .uq-wrap { grid-template-columns: minmax(0, 1fr); }
  .uq-stamp { margin: 1rem auto 0; }
}

/* ---- ARCADE: the break room. Light hero, animated ticket marquee ---- */
.uq-hero-arcade { background:
  linear-gradient(180deg, rgba(11,11,12,.04), transparent 60%); text-align: center; }
.uq-hero-arcade .eyebrow { justify-content: center; }
.uq-hero-arcade .eyebrow::before { display: none; }
.uq-marquee {
  margin-top: 1.6rem; border-top: 1px solid var(--ds-ink); border-bottom: 1px solid var(--ds-ink);
  overflow: hidden; background: rgba(255,253,249,.6);
}
.uq-marquee-track {
  display: flex; gap: 0; width: max-content;
  animation: uq-marq 30s linear infinite;
}
.uq-marquee-track span {
  font-family: var(--ds-mono); font-size: .74rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ds-ink); white-space: nowrap;
  padding: .8rem 1.6rem;
}
.uq-marquee-track span i { font-style: normal; color: var(--ds-ox); padding-right: 3.2rem; }
@keyframes uq-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* cabinet keeps its dark game screen; the page around it stays light */
body.uq-arcade #arcade { border-top: 1px solid var(--ds-ink); border-bottom: 1px solid var(--ds-ink); }

/* ---- NOW: the logbook. Stamped hero, ruled log rows ---- */
.uq-hero-now .uq-wrap { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; }
body.uq-now .space-y-10 > .reveal {
  border-top: 1px solid var(--ds-line); padding-top: 1.8rem;
}
body.uq-now .space-y-10 > .reveal:last-child { border-bottom: 1px solid var(--ds-line); padding-bottom: 1.8rem; }
body.uq-now .space-y-10 .eyebrow {
  font-family: var(--ds-mono); letter-spacing: .18em; color: var(--ds-ox);
}

/* ---- PRESS: the press kit. Document cards ---- */
.uq-hero-press { text-align: center; background:
  radial-gradient(40vmax 26vmax at 50% -4vmax, rgba(11,11,12,.05), transparent 70%); }
.uq-hero-press .eyebrow { justify-content: center; }
.uq-hero-press .eyebrow::before { display: none; }
.uq-docrow { display: flex; justify-content: center; gap: .9rem; margin-top: 1.8rem; flex-wrap: wrap; }
.uq-doc {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  background: #fffdf9; border: 1px solid var(--ds-line); border-radius: 14px;
  padding: .8rem 1.1rem; color: var(--ds-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 26px -18px rgba(11,11,12,.3);
  transition-property: transform, box-shadow, border-color;
  transition-duration: .25s; transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
.uq-doc svg { width: 20px; height: 20px; stroke: var(--ds-ox); flex: none; }
.uq-doc b { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
.uq-doc small { display: block; font-family: var(--ds-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ds-ink-soft); }
.uq-doc:hover { transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 34px -18px rgba(11,11,12,.4); }
.uq-doc:active { transform: scale(.96); }

/* ---- USES: the workbench. Shelf cards with square ox markers ---- */
.uq-hero-uses { background: linear-gradient(180deg, rgba(11,11,12,.035), transparent 60%); }
body.uq-uses .space-y-10 > .reveal {
  background: #fffdf9; border: 1px solid var(--ds-line); border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 16px 34px -24px rgba(11,11,12,.3);
}
body.uq-uses .space-y-10 > .reveal .eyebrow { margin-bottom: .8rem; }
body.uq-uses .space-y-10 ul li { position: relative; padding-left: 1.15rem; }
body.uq-uses .space-y-10 ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--ds-ox);
}

/* ---- RESUME: the document. Paper sheet, print CTA ---- */
.uq-hero-resume .uq-wrap { display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.uq-print { display: inline-flex; align-items: center; gap: .6rem; }
body.uq-resume .uq-sheet {
  background: #fffdf9; border: 1px solid var(--ds-line); border-radius: 14px;
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 30px 60px -30px rgba(11,11,12,.35);
}
body.uq-resume .uq-sheet h2 { text-wrap: balance; }
@media print {
  header#nav, #mmenu, footer, .booking-modal, .uq-print, .skip-link { display: none !important; }
  body.uq-resume .uq-sheet { box-shadow: none; border: none; }
  main#main { padding-top: 0 !important; }
}

/* ---- BOOKING: the front desk. Topic cards that open the scheduler ---- */
.uq-hero-booking { background:
  radial-gradient(40vmax 26vmax at 85% 0%, rgba(140,29,24,.05), transparent 70%); }
.uq-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 2.2rem; }
.uq-topic {
  text-align: left; background: #fffdf9; border: 1px solid var(--ds-line);
  border-radius: 14px; padding: 1rem 1.1rem; cursor: pointer; color: var(--ds-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.uq-topic b { display: block; font-size: .86rem; font-weight: 600; letter-spacing: .01em; margin-bottom: .25rem; }
.uq-topic small { font-family: var(--ds-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ds-ink-soft); }
.uq-topic:hover { transform: translateY(-2px); border-color: var(--ds-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 32px -20px rgba(11,11,12,.4); }
.uq-topic:hover small { color: var(--ds-ox); }
@media (max-width: 900px) { .uq-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- CHANGELOG: the release log. Rail + mono date tags ---- */
.uq-hero-changelog .uq-wrap { display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
body.uq-changelog .cl-entry {
  position: relative; padding-left: 1.7rem; padding-bottom: 2.2rem;
  border-left: 2px solid var(--ds-line);
}
body.uq-changelog .cl-entry:last-child { padding-bottom: 0; }
body.uq-changelog .cl-entry::before {
  content: ""; position: absolute; left: -7px; top: .3rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ds-bone); border: 2px solid var(--ds-ox);
}
body.uq-changelog .cl-entry .font-mono { color: var(--ds-ox); font-weight: 600; }

/* ---- PROJECTS: the portfolio. Index numbers, hover lift ---- */
.uq-hero-projects { background:
  repeating-linear-gradient(90deg, transparent 0 46px, rgba(11,11,12,.045) 46px 47px); }
body.uq-projects .proj {
  transition-property: transform, box-shadow, border-color;
  transition-duration: .3s; transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
body.uq-projects .proj:hover { transform: translateY(-3px); }
body.uq-projects .proj-num { font-variant-numeric: tabular-nums; color: var(--ds-ox); }

/* ---- APPS: the shelf. Light section, dark screenshot stages kept ---- */
.uq-hero-apps { background:
  radial-gradient(44vmax 28vmax at 10% 0%, rgba(140,29,24,.05), transparent 70%); }
body.uq-apps .app-card:hover .app-visual {
  border-color: var(--ds-ink);
  box-shadow: 0 32px 68px rgba(11,11,12,.35), 0 12px 28px rgba(140,29,24,.14);
}
body.uq-apps .apptag { border-color: var(--ds-line); color: var(--ds-ink-soft); }
body.uq-apps .app-visual img {
  outline: 1px solid oklch(1 0 0 / 0.14); outline-offset: -1px;   /* dark stage: white outline [mifb] */
}

/* ---- WORK (case studies): the case file. Accent band + figure ---- */
.uq-caseband {
  height: 6px; border-radius: 3px; margin-bottom: 2.2rem;
  background: linear-gradient(90deg, var(--ds-ox), var(--ds-ink));
}
.uq-casefig { margin: 0 0 2.2rem; max-width: 520px; }
.uq-casefig .uq-frame > img { aspect-ratio: 16 / 9; }
body.uq-work h1 { text-wrap: balance; }

/* ---- app-store-strip: light conversion (was dark + gold) ---- */
.app-store-strip {
  background: var(--ds-bone-2); color: var(--ds-ink);
  border-top: 1px solid var(--ds-ink); border-bottom: 1px solid var(--ds-ink);
}
.app-store-strip::before {
  background:
    radial-gradient(circle at 82% 10%, rgba(140,29,24,.08), transparent 36%),
    linear-gradient(90deg, transparent, rgba(11,11,12,.04), transparent);
}
.app-store-strip .text-gold { color: var(--ds-ox); }
.app-store-strip .text-bone { color: var(--ds-ink); }
.app-store-strip .text-bone\/60 { color: rgba(11,11,12,.6); }
.app-store-strip-links a {
  color: var(--ds-ink); border: 1px solid var(--ds-line);
  background: rgba(255,253,249,.7); border-radius: 10px;
  transition-property: border-color, background-color, transform, box-shadow;
  transition-duration: .25s; transition-timing-function: cubic-bezier(.2,.7,.2,1);
}
.app-store-strip-links a span { color: var(--ds-ox); }
.app-store-strip-links a:hover {
  background: #fffdf9; border-color: var(--ds-ink); transform: translateX(3px);
  box-shadow: 0 10px 24px -16px rgba(11,11,12,.4);
}
.app-store-strip-links a:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 3px; }
.app-store-strip-links a:active { transform: translateX(3px) scale(.96); }

/* ---- press downloads become document cards (built by transform) ---- */
.uq-docgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
@media (max-width: 640px) { .uq-docgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- reduced motion: still every animated surface [mifb] ---- */
@media (prefers-reduced-motion: reduce) {
  .uq-marquee-track { animation: none; }
  .uq-trio .uq-fig, .uq-doc, .uq-topic, body.uq-projects .proj,
  .app-store-strip-links a, .uq-pressable { transition: none; }
  .uq-trio .uq-fig:nth-child(1), .uq-trio .uq-fig:nth-child(2),
  .uq-trio .uq-fig:nth-child(3) { transform: none; }
  .uq-stamp { transform: none; }
  .uq-stamp .uq-postmark { transform: rotate(-10deg); }
}