:root {
  --cream: #f3ecdf;
  --cream-deep: #e8dece;
  --ink: #090909;
  --red: #e52a1d;
  --green: #8fb34b;
  --pink: #e7a6b2;
  --nrpi: #d982a8;
  --opus: #315da8;
  --blood: #670810;
  --gray: #a7a7a2;
  --town: #805a43;
  --mother: #c9a092;
  --pull: #e13a2f;
  --lunar-red: #8b1016;
  --lunar-gold: #d8ba77;
  --rule: rgba(9,9,9,.42);
  --light-rule: rgba(243,236,223,.42);
  --serif: "Bodoni Moda", "Times New Roman", serif;
  --condensed: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; font-family: var(--condensed); background: var(--cream); color: var(--ink); text-rendering: geometricPrecision; }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--red); color: var(--ink); }

/* INDEX / HOME */
.index-page { min-height: 100svh; background: var(--cream); }
.index-shell { min-height: 100svh; display: grid; grid-template-rows: minmax(150px, 23vh) 1fr 42px; }
.index-masthead { background: var(--ink); color: var(--cream); padding: 14px 20px 16px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.index-topline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 18px; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
.index-topline > span:nth-child(2) { text-align: center; }
.index-topline a { justify-self: end; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.index-wordmark { display: none; }
.index-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.index-identity .brand-mark { width: 31px; height: 28px; flex: 0 0 auto; }
.brand-mark, .brand-wordmark { display: inline-block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.brand-mark { -webkit-mask-image: url("brand/face-logo-mask.png"); mask-image: url("brand/face-logo-mask.png"); }
.brand-wordmark { -webkit-mask-image: url("brand/wordmark-mask.png"); mask-image: url("brand/wordmark-mask.png"); }
.brand-wordmark-hero { align-self: end; width: 100%; height: clamp(72px, 10.6vw, 166px); -webkit-mask-position: left bottom; mask-position: left bottom; }
.brand-mark-nav { width: 26px; height: 24px; vertical-align: middle; }
.brand-wordmark-small { width: 154px; height: 30px; -webkit-mask-position: left center; mask-position: left center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.index-grid { padding: 14px 20px 18px; display: grid; grid-template-columns: 1.06fr 1fr .74fr; gap: 16px; min-height: 0; }
.index-column { min-width: 0; display: flex; flex-direction: column; }
.index-label { min-height: 32px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); font-size: 10px; letter-spacing: .2em; font-weight: 600; text-transform: uppercase; }
.index-list { flex: 1; display: flex; flex-direction: column; }
.index-item { flex: 1; min-height: 58px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--rule); text-decoration: none; transition: background .14s ease, color .14s ease, padding .14s ease; }
.index-item.tone-nrpi:hover, .index-item.tone-nrpi:focus-visible { background: var(--nrpi); color: var(--ink); }
.index-item.tone-opus:hover, .index-item.tone-opus:focus-visible { background: var(--opus); color: var(--cream); }
.index-item.tone-trinity:hover, .index-item.tone-trinity:focus-visible { background: var(--ink); color: var(--cream); }
.index-item.tone-bloodbound:hover, .index-item.tone-bloodbound:focus-visible { background: var(--blood); color: var(--cream); }
.index-item.tone-gray:hover, .index-item.tone-gray:focus-visible { background: var(--gray); color: var(--ink); }
.index-item.tone-town:hover, .index-item.tone-town:focus-visible { background: var(--town); color: var(--cream); }
.index-item.tone-mother:hover, .index-item.tone-mother:focus-visible { background: var(--mother); color: var(--ink); }
.index-item.tone-lunar:hover, .index-item.tone-lunar:focus-visible { background: var(--lunar-red); color: var(--ink); }
.index-item.tone-pull:hover, .index-item.tone-pull:focus-visible { background: var(--pull); color: var(--ink); }
.index-item.tone-email:hover, .index-item.tone-email:focus-visible { background: var(--ink); color: var(--cream); }
.index-item.tone-links:hover, .index-item.tone-links:focus-visible { background: var(--green); color: var(--ink); }
.index-item:hover, .index-item:focus-visible { padding: 0 8px; outline: none; }
.index-no, .index-meta { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.index-name { min-width: 0; font-family: var(--condensed); font-size: clamp(21px, 2.55vw, 41px); line-height: .82; letter-spacing: -.025em; font-weight: 600; text-transform: uppercase; }
.index-meta { text-align: right; max-width: 112px; line-height: 1.2; }
.index-footer { background: var(--ink); color: var(--cream); padding: 0 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.index-footer a { text-decoration: none; }

/* SHARED DETAIL */
.detail-page { min-height: 100svh; }
.detail-shell { min-height: 100svh; display: grid; grid-template-rows: 48px 1fr auto; }
.detail-nav { padding: 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid currentColor; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.detail-nav a { text-decoration: none; }
.detail-brand-home, .links-brand-home { display: inline-flex; align-items: center; color: currentColor; }
.detail-main { padding: 18px; display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.detail-index { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.detail-title { margin: 0; align-self: center; font-family: var(--condensed); font-size: clamp(82px, 17vw, 274px); font-weight: 700; letter-spacing: -.045em; line-height: .62; text-transform: uppercase; overflow-wrap: anywhere; }
.detail-title.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.075em; line-height: .7; }
.detail-foot { border-top: 1px solid currentColor; display: grid; grid-template-columns: 1fr 1fr; }
.detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.fact { min-height: 94px; padding: 13px 18px; border-right: 1px solid currentColor; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.fact span:first-child { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.fact span:last-child { font-size: clamp(17px, 1.65vw, 26px); line-height: .9; font-weight: 600; text-transform: uppercase; }
.detail-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.detail-link { min-height: 94px; padding: 13px 18px; border-left: 1px solid currentColor; text-decoration: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: clamp(22px, 2.5vw, 39px); line-height: .82; font-weight: 600; text-transform: uppercase; transition: background .14s ease, color .14s ease; }
.detail-link:hover, .detail-link:focus-visible { background: var(--cream); color: var(--ink); outline: none; }
.detail-link.disabled { opacity: .42; pointer-events: none; }
.detail-link .arr { font-size: .65em; font-weight: 400; }

.theme-black { background: var(--ink); color: var(--cream); }
.theme-red { background: var(--red); color: var(--ink); }
.theme-green { background: var(--green); color: var(--ink); }
.theme-pink { background: var(--pink); color: var(--ink); }
.theme-cream, .theme-bone, .theme-stone { background: var(--cream); color: var(--ink); }
.theme-oxblood { background: var(--blood); color: var(--cream); }
.theme-tobacco { background: var(--town); color: var(--cream); }
.theme-brass { background: var(--green); color: var(--ink); }
.theme-nrpi { background: var(--nrpi); color: var(--ink); }
.theme-opus { background: var(--opus); color: var(--cream); }
.theme-bloodbound { background: var(--blood); color: var(--cream); }
.theme-gray { background: var(--gray); color: var(--ink); }
.theme-town { background: var(--town); color: var(--cream); }
.theme-mother { background: var(--mother); color: var(--ink); }
.theme-pull { background: var(--pull); color: var(--ink); }
.theme-lunar { background: var(--lunar-red); color: var(--ink); }
.theme-lunar .detail-main { background: var(--lunar-red); }
.theme-lunar .detail-link:hover, .theme-lunar .detail-link:focus-visible { background: var(--ink); color: var(--lunar-red); }

/* SOCIAL / LINKS */
.links-page { min-height: 100svh; background: var(--ink); color: var(--cream); }
.links-shell { min-height: 100svh; padding: 16px 18px; display: grid; grid-template-rows: auto 1fr auto; }
.links-head, .links-foot { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.links-head { padding-bottom: 12px; border-bottom: 1px solid var(--light-rule); }
.links-head a, .links-foot a { text-decoration: none; }
.links-list { align-self: stretch; display: grid; grid-template-rows: repeat(4, minmax(70px,1fr)) minmax(100px,1.2fr); border-top: 3px solid var(--cream); }
.links-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; border-bottom: 1px solid var(--light-rule); text-decoration: none; transition: background .14s ease, color .14s ease, padding .14s ease; }
.links-row:nth-child(1):hover, .links-row:nth-child(1):focus-visible { background: var(--green); color: var(--ink); }
.links-row:nth-child(2):hover, .links-row:nth-child(2):focus-visible { background: var(--red); color: var(--ink); }
.links-row:nth-child(3):hover, .links-row:nth-child(3):focus-visible { background: var(--pink); color: var(--ink); }
.links-row:nth-child(4):hover, .links-row:nth-child(4):focus-visible { background: var(--cream); color: var(--ink); }
.links-row:hover, .links-row:focus-visible { padding: 0 10px; outline: none; }
.links-row .n { font-size: 10px; letter-spacing: .18em; }
.links-row .name { font-family: var(--serif); font-size: clamp(42px, 7.4vw, 120px); font-weight: 400; line-height: .67; letter-spacing: -.065em; text-transform: uppercase; }
.links-row .arr { font-size: 28px; }
.links-email { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; align-items: center; border-bottom: 1px solid var(--light-rule); }
.links-email .n { font-size: 10px; letter-spacing: .18em; }
.links-email-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; min-width: 0; }
.links-email-form input { min-width: 0; width: 100%; border: 0; background: transparent; color: var(--cream); outline: none; padding: 12px 0 8px; font-family: var(--serif); font-size: clamp(38px, 6vw, 94px); letter-spacing: -.055em; line-height: .7; }
.links-email-form input::placeholder { color: rgba(243,236,223,.52); }
.links-email-form button { border: 0; border-left: 1px solid var(--light-rule); background: var(--red); color: var(--ink); padding: 0 20px; cursor: pointer; font-size: 11px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.links-email-form button:hover { background: var(--green); }
.links-foot { padding-top: 14px; }

/* EMAIL */
.email-page { min-height: 100svh; background: var(--cream); color: var(--ink); }
.email-shell { min-height: 100svh; display: grid; grid-template-rows: 48px 1fr 48px; }
.email-nav, .email-bottom { padding: 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.email-nav { border-bottom: 1px solid var(--ink); }
.email-bottom { border-top: 1px solid var(--ink); }
.email-nav a, .email-bottom a { text-decoration: none; }
.email-core { display: grid; grid-template-columns: 1.25fr .75fr; min-height: 0; }
.email-mark { border-right: 1px solid var(--ink); padding: 18px; display: flex; align-items: center; background: var(--red); }
.email-mark h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(92px, 17vw, 270px); letter-spacing: -.08em; line-height: .62; text-transform: uppercase; }
.subscribe-panel { padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.subscribe-form { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); display: grid; grid-template-columns: 1fr auto; }
.subscribe-form input { min-width: 0; border: 0; background: transparent; color: var(--ink); outline: 0; padding: 18px 0; font-family: var(--serif); font-size: clamp(27px, 4vw, 64px); }
.subscribe-form input::placeholder { color: rgba(9,9,9,.35); }
.subscribe-form button { border: 0; border-left: 1px solid var(--ink); background: var(--ink); color: var(--cream); padding: 0 18px; cursor: pointer; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.subscribe-form button:hover { background: var(--green); color: var(--ink); }

@media (max-width: 820px) {
  .index-shell { grid-template-rows: 142px auto 40px; }
  .index-masthead { padding: 12px 12px 16px; }
  .index-topline { grid-template-columns: 1fr auto; font-size: 9px; }
  .index-topline > span:nth-child(2) { display: none; }
  .brand-wordmark-hero { height: clamp(66px, 20vw, 92px); }
  .index-identity .brand-mark { width: 24px; height: 22px; }
  .index-grid { padding: 10px 12px 14px; grid-template-columns: 1fr; gap: 12px; }
  .index-column { min-height: auto; }
  .index-label { min-height: 27px; }
  .index-item { min-height: 50px; flex: none; grid-template-columns: 24px minmax(0,1fr) auto; }
  .index-name { font-size: clamp(23px, 7.2vw, 32px); }
  .index-meta { font-size: 8px; max-width: 86px; }
  .index-footer { padding: 0 12px; font-size: 8px; }

  .detail-shell { grid-template-rows: 44px 1fr auto; }
  .detail-nav, .detail-main { padding-left: 12px; padding-right: 12px; }
  .detail-title { font-size: clamp(70px, 24vw, 128px); line-height: .61; }
  .detail-title.serif { line-height: .67; }
  .detail-foot { grid-template-columns: 1fr; }
  .detail-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fact { min-height: 70px; padding: 10px 12px; }
  .fact:nth-child(2n) { border-right: 0; }
  .fact:last-child { border-top: 1px solid currentColor; }
  .detail-links { border-top: 1px solid currentColor; }
  .detail-link { min-height: 70px; padding: 10px 12px; border-left: 0; border-right: 1px solid currentColor; }
  .detail-link:last-child { border-right: 0; }

  .links-shell { padding: 12px; }
  .links-list { grid-template-rows: repeat(4, minmax(70px,1fr)) minmax(118px,1.25fr); }
  .links-row { grid-template-columns: 24px 1fr auto; gap: 9px; }
  .links-row .name { font-size: clamp(38px, 13vw, 68px); }
  .links-email { grid-template-columns: 24px minmax(0,1fr); gap: 9px; }
  .links-email-form { grid-template-columns: 1fr; }
  .links-email-form input { font-size: clamp(32px, 10vw, 52px); padding: 10px 0; }
  .links-email-form button { border-left: 0; border-top: 1px solid var(--light-rule); padding: 10px 0; text-align: left; background: transparent; color: var(--cream); }
  .links-email-form button:hover { background: transparent; color: var(--green); }

  .email-shell { grid-template-rows: 44px 1fr 44px; }
  .email-nav, .email-bottom { padding: 0 12px; }
  .email-core { grid-template-columns: 1fr; }
  .email-mark { border-right: 0; border-bottom: 1px solid var(--ink); min-height: 45vh; padding: 12px; }
  .email-mark h1 { font-size: clamp(92px, 31vw, 170px); }
  .subscribe-panel { padding: 12px; min-height: 36vh; }
  .subscribe-form { grid-template-columns: 1fr; }
  .subscribe-form button { border-left: 0; border-top: 1px solid var(--ink); padding: 13px 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* V5 — tactile index system / controlled asymmetry */
:root {
  --lunar-red: #d2231c;
  --snap: cubic-bezier(.16, 1, .3, 1);
  --press: cubic-bezier(.2, .85, .25, 1);
}

/* Keep the wordmark dead-center: the surrounding system can misbehave instead. */
.brand-wordmark-hero {
  justify-self: center;
  width: min(94%, 1480px);
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

/* Tiny optical displacements make the index feel typeset, not templated. */
@media (min-width: 821px) {
  .index-column:nth-child(1) { transform: translateY(3px); }
  .index-column:nth-child(2) { transform: translateY(12px); }
  .index-column:nth-child(3) { transform: translateY(6px); }

  .index-column:nth-child(1) .index-label { padding-right: 7px; }
  .index-column:nth-child(2) .index-label { padding-left: 11px; }
  .index-column:nth-child(3) .index-label { padding-right: 4px; }
}

/* Mechanical key interaction. Colour rises like a physical insert rather than a template hover. */
.index-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: 0;
  transition:
    color 90ms linear,
    transform 72ms var(--press),
    border-color 90ms linear;
}
.index-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px 0;
  background: var(--tone-bg, var(--ink));
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  transform: scaleY(.035);
  transform-origin: 50% 100%;
  transition: transform 170ms var(--snap);
}
.index-item:nth-child(even)::before {
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
  transform-origin: 50% 0%;
}
.index-item::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity 80ms linear, transform 160ms var(--snap);
}
.index-item > span {
  position: relative;
  z-index: 1;
  transition: transform 165ms var(--snap), letter-spacing 165ms var(--snap);
}
.index-item:hover,
.index-item:focus-visible {
  color: var(--tone-fg, var(--cream));
  outline: none;
}
.index-item:hover::before,
.index-item:focus-visible::before { transform: scaleY(1); }
.index-item:hover::after,
.index-item:focus-visible::after { opacity: .72; transform: translate(0, -50%); }
.index-item:hover .index-no,
.index-item:focus-visible .index-no { transform: translateX(7px); }
.index-item:hover .index-name,
.index-item:focus-visible .index-name { transform: translateX(10px); letter-spacing: -.025em; }
.index-item:hover .index-meta,
.index-item:focus-visible .index-meta { transform: translateX(-19px); }
.index-item:active { transform: translateY(2px) scale(.997); }
.index-item:active::before { transform: scaleY(.93); transition-duration: 55ms; }

.index-item.tone-nrpi { --tone-bg: var(--nrpi); --tone-fg: var(--ink); }
.index-item.tone-opus { --tone-bg: var(--opus); --tone-fg: var(--cream); }
.index-item.tone-trinity { --tone-bg: var(--ink); --tone-fg: var(--cream); }
.index-item.tone-bloodbound { --tone-bg: var(--blood); --tone-fg: var(--cream); }
.index-item.tone-gray { --tone-bg: var(--gray); --tone-fg: var(--ink); }
.index-item.tone-town { --tone-bg: var(--town); --tone-fg: var(--cream); }
.index-item.tone-mother { --tone-bg: var(--mother); --tone-fg: var(--ink); }
.index-item.tone-lunar { --tone-bg: var(--lunar-red); --tone-fg: var(--ink); }
.index-item.tone-pull { --tone-bg: var(--pull); --tone-fg: var(--ink); }
.index-item.tone-email { --tone-bg: var(--ink); --tone-fg: var(--cream); }
.index-item.tone-links { --tone-bg: var(--green); --tone-fg: var(--ink); }

/* Override V4's direct hover blocks: the physical insert above now owns the colour. */
.index-item.tone-nrpi:hover, .index-item.tone-nrpi:focus-visible,
.index-item.tone-opus:hover, .index-item.tone-opus:focus-visible,
.index-item.tone-trinity:hover, .index-item.tone-trinity:focus-visible,
.index-item.tone-bloodbound:hover, .index-item.tone-bloodbound:focus-visible,
.index-item.tone-gray:hover, .index-item.tone-gray:focus-visible,
.index-item.tone-town:hover, .index-item.tone-town:focus-visible,
.index-item.tone-mother:hover, .index-item.tone-mother:focus-visible,
.index-item.tone-lunar:hover, .index-item.tone-lunar:focus-visible,
.index-item.tone-pull:hover, .index-item.tone-pull:focus-visible,
.index-item.tone-email:hover, .index-item.tone-email:focus-visible,
.index-item.tone-links:hover, .index-item.tone-links:focus-visible {
  background: transparent;
  background-image: none;
  color: var(--tone-fg);
}

/* Lunar Revel: flat chunlian red, black ink. No decorative web-pattern treatment. */
.theme-lunar,
.theme-lunar .detail-main {
  background: var(--lunar-red);
  background-image: none;
  color: var(--ink);
}
.theme-lunar .detail-link:hover,
.theme-lunar .detail-link:focus-visible {
  background: var(--ink);
  color: var(--lunar-red);
}

/* Links page gets the same tactile logic, but every key travels from a different edge. */
.links-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  transition: color 90ms linear, transform 72ms var(--press), padding 165ms var(--snap);
}
.links-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px 0;
  background: var(--link-fill, var(--cream));
  transform: scaleX(.018);
  transform-origin: left center;
  transition: transform 190ms var(--snap);
}
.links-row:nth-child(even)::before { transform-origin: right center; }
.links-row:nth-child(1) { --link-fill: var(--green); --link-ink: var(--ink); }
.links-row:nth-child(2) { --link-fill: var(--red); --link-ink: var(--ink); }
.links-row:nth-child(3) { --link-fill: var(--pink); --link-ink: var(--ink); }
.links-row:nth-child(4) { --link-fill: var(--cream); --link-ink: var(--ink); }
.links-row:hover,
.links-row:focus-visible {
  color: var(--link-ink);
  padding-inline: 12px 8px;
  outline: none;
}
.links-row:hover::before,
.links-row:focus-visible::before { transform: scaleX(1); }
.links-row .n,
.links-row .name,
.links-row .arr { transition: transform 175ms var(--snap); }
.links-row:hover .name,
.links-row:focus-visible .name { transform: translateX(7px); }
.links-row:hover .arr,
.links-row:focus-visible .arr { transform: translate(-7px, -2px) rotate(4deg); }
.links-row:active { transform: translateY(2px) scale(.998); }
.links-row:active::before { transform: scaleX(.965); transition-duration: 55ms; }

/* Button/link presses throughout the rest of the site feel like short-travel switches. */
.detail-link,
.links-email-form button,
.subscribe-form button,
.index-topline a,
.detail-nav a,
.email-nav a,
.email-bottom a {
  transition: transform 75ms var(--press), background 145ms var(--snap), color 90ms linear;
}
.detail-link:active,
.links-email-form button:active,
.subscribe-form button:active,
.index-topline a:active,
.detail-nav a:active,
.email-nav a:active,
.email-bottom a:active { transform: translateY(2px) scale(.99); }

/* A quiet input-focus snap: useful because email capture is the conversion action. */
.links-email-form,
.subscribe-form { transition: box-shadow 160ms var(--snap), transform 160ms var(--snap); }
.links-email-form:focus-within { box-shadow: inset 0 -3px 0 var(--red); }
.subscribe-form:focus-within { box-shadow: inset 0 -4px 0 var(--red); transform: translateY(-2px); }

@media (hover: none) {
  .index-item::before { transform: scaleY(0); }
  .index-item:active::before { transform: scaleY(1); }
  .index-item:active { color: var(--tone-fg); }
  .links-row::before { transform: scaleX(0); }
  .links-row:active::before { transform: scaleX(1); }
  .links-row:active { color: var(--link-ink); }
}

@media (max-width: 820px) {
  .brand-wordmark-hero { width: 96%; -webkit-mask-position: center bottom; mask-position: center bottom; }
  .index-column { transform: none !important; }
  .index-item:hover .index-meta,
  .index-item:focus-visible .index-meta { transform: translateX(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .index-item::before,
  .index-item::after,
  .links-row::before { transition: none !important; }
}

/* V6 — supplied emblem hero + project-specific title typography */
.hero-emblem {
  align-self: center;
  justify-self: center;
  display: block;
  width: auto;
  height: min(16.5vh, 156px);
  max-width: min(66vw, 520px);
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* NRPI: intentionally blunt, editorial, and very readable. */
.nrpi-title {
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  font-size: clamp(66px, 13.2vw, 220px);
  line-height: .92;
  letter-spacing: -.065em;
  overflow-wrap: normal;
  word-break: normal;
}
.nrpi-title > span,
.mother-title > span { display: block; }

/* Bloodbound: hard blackletter rather than decorative serif. */
.bloodbound-title {
  font-family: "UnifrakturCook", "Old English Text MT", "Lucida Blackletter", fantasy;
  font-weight: 700;
  font-size: clamp(82px, 16.5vw, 270px);
  line-height: .78;
  letter-spacing: -.035em;
  text-transform: none;
}

/* More air between the two title lines, without loosening the rest of the page. */
.mother-title {
  font-size: clamp(72px, 14vw, 230px);
  line-height: .93 !important;
  letter-spacing: -.065em;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 820px) {
  .hero-emblem {
    height: min(15vh, 120px);
    max-width: 72vw;
  }
  .nrpi-title { font-size: clamp(58px, 18vw, 108px); line-height: .96; letter-spacing: -.055em; }
  .bloodbound-title { font-size: clamp(70px, 22vw, 140px); line-height: .84; }
  .mother-title { font-size: clamp(62px, 18vw, 114px); line-height: .98 !important; }
}

/* V8 — email capture backend: invisible anti-bot honeypot + submit states */
.hp-field {
  position: fixed !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.subscribe-form button:disabled,
.links-email-form button:disabled {
  cursor: wait;
  opacity: .72;
}