/* ABOUT and CONTACT — Benny Graves, the connected site. Ported from the approved table site (../../table-site/site.css,
   table.css): tokens, the Dymo strip, the keys and pills, the About table and the Contact postcard, every rule scoped under
   .view-about / .view-contact. Dropped: the old site's top bar, its day/night card and deck, and the V1–V6 track labels.
   His photo is never filtered or drawn over: grain sits on the photo's white border only (masked away from the picture). */

/* ---------- tokens (table.css) ---------- */
:is(.view-about, .view-contact) {
  --f-wood: 'Ultra', 'Rockwell Extra Bold', 'Rockwell', Georgia, serif;
  --f-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-type: 'Courier Prime', 'Courier New', Courier, monospace;
  --f-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --lx: .45; --ly: .9;
  --c-country: #e3a33a; --c-pop: #ff8f6b; --c-gospel: #e7c96a; --c-rock: #d6453f; --c-latin: #ea769b; --c-reggae: #5fba86; --c-alternative: #72a8ea; --c-hiphop: #a98df0; --c-tbc: #b7b1a6;
  --surface: #e5dfd3;
  --surface-ink: #1d1a16;
  --surface-ink-2: #5b5349;
  --paper: #f7f3eb;
  --paper-2: #efe8db;
  --paper-edge: rgba(70, 55, 35, .16);
  --paper-ink: #1c1915;
  --paper-ink-2: #5d554b;
  --paper-ink-3: #8b8276;
  --photo-border: #f8f6f1;
  --card: #f2e9d6;
  --card-ink: #1b1713;
  --dymo: #b2311e;
  --dymo-2: #8f2414;
  --dymo-ink: #fbf3ea;
  --stamp: #b2311e;
  --key: #1f1c19;
  --key-edge: #000;
  --key-ink: #f4efe6;
  --focus: #c2401f;
  --llen: 5px; --lblur: 7px; --lcol: rgba(44, 30, 16, .26); --lcol-2: rgba(44, 30, 16, .22);
  color-scheme: light;
}
html[data-theme="night"] :is(.view-about, .view-contact) {
  --surface: #1e1d1c;
  --surface-ink: #ece6dc;
  --surface-ink-2: #a39b8f;
  --paper: #d8d0c2;
  --paper-2: #cdc3b2;
  --paper-edge: rgba(0, 0, 0, .25);
  --paper-ink: #191612;
  --paper-ink-2: #4c453c;
  --paper-ink-3: #6f675c;
  --photo-border: #dcd6cb;
  --card: #d3c8b2;
  --card-ink: #17130f;
  --dymo: #962617;
  --dymo-2: #6e1a0f;
  --dymo-ink: #f1e6da;
  --stamp: #d25a40;
  --key: #e6dfd2;
  --key-edge: #8d8478;
  --key-ink: #1a1815;
  --focus: #f08a5d;
  --llen: 14px; --lblur: 24px; --lcol: rgba(0, 0, 0, .62); --lcol-2: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- the view: a page on the table (linen by day, felt at night) ---------- */
/* the shell positions and layers the view itself (.is-on / .is-off / .is-leaving); this only isolates it, so the table
   surface below (z-index -1) stays inside it */
:is(.view-about, .view-contact) {
  isolation: isolate; overflow-x: clip;
  color: var(--surface-ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
:is(.view-about, .view-contact) *, :is(.view-about, .view-contact) *::before, :is(.view-about, .view-contact) *::after { box-sizing: border-box; }
:is(.view-about, .view-contact) button { font: inherit; color: inherit; }
:is(.view-about, .view-contact) a { color: inherit; }
:is(.view-about, .view-contact) img { display: block; max-width: 100%; }
:is(.view-about, .view-contact) .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:is(.view-about, .view-contact) :focus { outline: none; }
:is(.view-about, .view-contact) :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
:is(.view-about, .view-contact) .pg-ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
:is(.view-about, .view-contact) .surf { position: absolute; inset: -2px; transition: opacity .6s ease; }
:is(.view-about, .view-contact) .surf-day { background: #e5dfd3 url(assets/linen.webp) 0 0 / 340px 340px; }
:is(.view-about, .view-contact) .surf-night { background: #1e1d1c url(assets/felt.webp) 0 0 / 380px 380px; opacity: 0; }
html[data-theme="night"] :is(.view-about, .view-contact) .surf-night { opacity: 1; }
/* under the shell's fixed nav: --bg-nav-h is the shell's token; --pg-top (from BG.site.navHeight()) is the fallback.
   The shell already pads page views for the player dock (--bg-dock-h). */
:is(.view-about, .view-contact) .pg-inner { max-width: 1240px; margin: 0 auto; padding: calc(var(--bg-nav-h, var(--pg-top, 0px)) + 28px) max(40px, var(--sr)) calc(70px + var(--sb)) max(40px, var(--sl)); }

/* ---------- the table's objects: Dymo strip, keys, pills ---------- */
:is(.view-about, .view-contact) .dymo {
  position: absolute; left: var(--dy-x, 40%); top: var(--dy-y, 85%); transform: rotate(-3.2deg); transform-origin: 0 50%;
  display: block; padding: .6em 1.15em .58em; white-space: nowrap;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dymo) 82%, #fff) 0%, var(--dymo) 22%, var(--dymo) 70%, var(--dymo-2) 100%);
  clip-path: polygon(1.5% 0, 100% 0, 98.6% 100%, 0 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  filter: drop-shadow(calc(var(--lx) * 2px) calc(var(--ly) * 2.5px) 1.5px var(--lcol));
}
:is(.view-about, .view-contact) .dymo span {
  display: block; font: 700 var(--dy-fs, 13px)/1 var(--f-sans); font-stretch: 82%; letter-spacing: .2em; text-transform: uppercase; color: var(--dymo-ink);
  text-shadow: 0 1px 0 rgba(0,0,0,.42), 0 -1px 0 rgba(255,255,255,.22);
}
:is(.view-about, .view-contact) .key { display: inline-block; padding: 0 0 4px; border: 0; border-radius: 12px; background: var(--key-edge); cursor: pointer; text-decoration: none; min-height: 48px; box-shadow: calc(var(--lx) * 3px) calc(var(--ly) * 4px) 8px -2px var(--lcol); -webkit-user-select: none; user-select: none; }
:is(.view-about, .view-contact) .key-face {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 11px;
  background: var(--key); color: var(--key-ink); font: 700 13px/1 var(--f-sans); font-stretch: 85%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 0 rgba(0,0,0,.18);
  transition: transform .09s ease-out;
}
:is(.view-about, .view-contact) .key:hover .key-face { transform: translateY(-1px); }
:is(.view-about, .view-contact) .key:active .key-face { transform: translateY(3px); }
:is(.view-about, .view-contact) .key-ghost { background: color-mix(in srgb, var(--key-edge) 55%, transparent); }
:is(.view-about, .view-contact) .key-ghost .key-face { background: var(--paper); color: var(--paper-ink); }
:is(.view-about, .view-contact) .key:focus-visible { outline-offset: 3px; border-radius: 14px; }
:is(.view-about, .view-contact) .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  border: 1.5px solid currentColor; background: transparent; color: var(--paper-ink); font: 700 13px/1 var(--f-sans); font-stretch: 88%; letter-spacing: .06em; text-transform: uppercase;
}
:is(.view-about, .view-contact) .pill:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

/* ================================================================ ABOUT ===================================== */
.view-about .ln-country { --lane: var(--c-country); }
.view-about .ln-pop { --lane: var(--c-pop); }
.view-about .ln-gospel { --lane: var(--c-gospel); }
.view-about .ln-rock { --lane: var(--c-rock); }
.view-about .ln-latin { --lane: var(--c-latin); }
.view-about .ln-reggae { --lane: var(--c-reggae); }
.view-about .ln-alternative { --lane: var(--c-alternative); }
.view-about .ln-hiphop { --lane: var(--c-hiphop); }
.view-about .ln-tbc { --lane: var(--c-tbc); }
/* the page opens on his letter, the catalog card laid alongside it (on narrower screens, under it) */
.view-about .ab-table { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 6px 0 20px; }
.view-about .ab-letter {
  position: relative; z-index: 2; grid-column: 1 / 8; grid-row: 1; align-self: start; margin: 0; padding: 42px 46px 38px; border-radius: 2px;
  background: var(--paper); color: var(--paper-ink); font-family: var(--f-type); transform: rotate(1.3deg);
  box-shadow: 0 0 0 .5px var(--paper-edge), calc(var(--lx) * 2px) calc(var(--ly) * 3px) 3px var(--lcol-2), calc(var(--lx) * 12px) calc(var(--ly) * 16px) 34px -6px var(--lcol);
}
.view-about .ab-letter::before, .view-about .ab-facts::before { content: ''; position: absolute; inset: 0; background: url(assets/grain-a.webp) 0 0 / 240px; opacity: .6; pointer-events: none; border-radius: inherit; }
/* the heading: a small ABOUT label over his name, printed like BENNY GRAVES on Home (Anybody 900 in the cap orange,
   worn ink over an offset halftone plate). Letters this size get both effects scaled down (the finer wear FAVORITE uses
   on phones, smaller dots sitting closer) so the name stays crisp; the size follows the letter's width, one line. */
.view-about { --f-poster: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --ab-spot: #ff4a1f; --ab-plate: #181512; }
html[data-theme="night"] .view-about { --ab-spot: #ff5a2a; }
.view-about .ab-letter { container-type: inline-size; }
.view-about .ab-h { position: relative; margin: 0; font-weight: 400; }
.view-about .ab-h:focus { outline: none; }
.view-about .ab-kicker { display: block; margin: 0 0 10px; font: 800 12.5px/1 var(--f-poster); font-variation-settings: 'wdth' 92; letter-spacing: .26em; text-transform: uppercase; color: var(--paper-ink-2); }
.view-about .ab-name {
  display: grid; width: max-content; max-width: 100%; isolation: isolate; color: var(--ab-spot); white-space: nowrap; text-transform: uppercase;
  font: 900 min(78px, calc(100cqi / 5.45))/.9 var(--f-poster); font-variation-settings: 'wdth' 62; letter-spacing: 0;
}
.view-about .ab-name > span { grid-area: 1 / 1; }
.view-about .ab-name-ink { -webkit-mask: url(assets/wear-fine.png) 0 0 / 300px 300px repeat; mask: url(assets/wear-fine.png) 0 0 / 300px 300px repeat; }
.view-about .ab-name-plate {
  z-index: -1; transform: translate(.042em, .048em); color: transparent;
  background-image: radial-gradient(circle at center, var(--ab-plate) 0 33%, transparent 37%), radial-gradient(circle at center, var(--ab-plate) 0 33%, transparent 37%);
  background-size: 4px 4px; background-position: 0 0, 2px 2px;
  -webkit-background-clip: text; background-clip: text;
}
.view-about .ab-role { position: relative; margin: 12px 0 0; font: 700 13px/1.3 var(--f-poster); font-variation-settings: 'wdth' 88; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-ink); }
.view-about .ab-rule { position: relative; height: 2px; margin: 16px 0 22px; border: 0; background: var(--ab-spot); }
/* his letter: the paper simply grows with it (no fixed height anywhere) */
.view-about .letter-body { position: relative; }
.view-about .letter-body p { margin: 0 0 1.05em; font: 400 18px/1.62 var(--f-type); overflow-wrap: normal; text-wrap: pretty; }
.view-about .letter-body .letter-sign { margin: 1.3em 0 0; }
/* his signature closes the letter, signed in the paper's ink (its swash starts a touch left of the text, as a pen would) */
.view-about .ab-signature { display: block; width: min(270px, 78%); height: auto; margin-left: -6px; -webkit-user-drag: none; user-select: none; }
/* only the opening paragraph shows at first: "Read my story" unfolds the rest of the same paper (never a box of its own) */
.view-about :is(.ab-cue, .ab-story) { display: flow-root; }
.view-about :is(.ab-cue, .ab-story)[hidden] { display: none; }
.view-about .ab-story:focus { outline: none; }
.view-about .ab-btn {
  display: flex; align-items: center; gap: .5em; width: fit-content; min-height: 46px; margin: 0; padding: 0 20px; border: 1.5px solid currentColor; border-radius: 999px;
  background: transparent; color: var(--paper-ink); font: 700 16px/1 var(--f-type); letter-spacing: .01em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, transform .09s ease-out;
}
.view-about .ab-btn span { font-family: var(--f-sans); font-weight: 700; }
.view-about .ab-btn:hover { background: color-mix(in srgb, var(--paper-ink) 7%, transparent); }
.view-about .ab-btn:active { transform: translateY(1px); background: color-mix(in srgb, var(--paper-ink) 12%, transparent); }
.view-about .ab-btn:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 3px; }
/* the way in is printed in the spot ink; Show less stays the quiet outline */
.view-about .ab-read { background: var(--ab-spot); color: #181512; }
.view-about .ab-read:hover { background: color-mix(in srgb, var(--ab-spot) 90%, #000); }
.view-about .ab-read:active { background: color-mix(in srgb, var(--ab-spot) 82%, #000); }
.view-about .ab-less { margin-top: 30px; }
.view-about .ab-facts {
  position: relative; z-index: 1; grid-column: 8 / 13; grid-row: 1; align-self: start; margin: 40px 6px 0 36px; padding: 24px 24px 20px; border-radius: 2px;
  background: var(--card); color: var(--card-ink); transform: rotate(-1.8deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, #3a6ea5 24%, transparent) 25px 26px);
  background-position: 0 62px;
  box-shadow: 0 0 0 .5px var(--paper-edge), calc(var(--lx) * 2px) calc(var(--ly) * 3px) 3px var(--lcol-2), calc(var(--lx) * 10px) calc(var(--ly) * 13px) 26px -6px var(--lcol);
}
.view-about .ab-facts h2 { position: relative; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, #b2311e 55%, transparent); font: 400 25px/1 var(--f-wood); text-transform: uppercase; }
.view-about .ab-dl { position: relative; display: grid; gap: 0; margin: 0 0 18px; }
.view-about .ab-dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 26px; }
.view-about .ab-dl dt { font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink-3); }
.view-about .ab-dl dd { margin: 0; font: 400 17px/1.2 var(--f-type); text-align: right; }
.view-about .ab-dl dd small { font-size: 13px; color: var(--paper-ink-2); }
.view-about .ab-facts h3 { position: relative; margin: 0 0 8px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink-3); }
.view-about .ab-genres { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.view-about .ab-genres li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 30% 26px; align-items: center; gap: 9px; font: 400 14px/1.2 var(--f-type); }
.view-about .abg-sw { width: 12px; height: 12px; border-radius: 1px; background: var(--lane); }
.view-about .abg-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-about .abg-bar { display: block; height: 9px; background: color-mix(in srgb, var(--paper-ink) 10%, transparent); }
.view-about .abg-bar i { display: block; height: 100%; background: var(--lane); transform-origin: 0 50%; }
.view-about .ab-genres b { font: 700 14px/1 var(--f-mono); text-align: right; }

/* ================================================================ CONTACT =================================== */
.view-contact .ct-table { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 8px 0 10px; }
.view-contact .pc { position: relative; width: min(820px, 100%); aspect-ratio: 1.58; perspective: 2200px; cursor: pointer; transform: rotate(1deg); }
.view-contact .pc-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.view-contact .pc-front, .view-contact .pc-back {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 .5px var(--paper-edge), calc(var(--lx) * 2px) calc(var(--ly) * 3px) 3px var(--lcol-2), calc(var(--lx) * 12px) calc(var(--ly) * 16px) 34px -6px var(--lcol);
}
.view-contact .pc-front { padding: 16px 16px 40px; background: var(--photo-border); }
.view-contact .pc-front::after { content: ''; position: absolute; inset: 0; background: url(assets/grain-a.webp) 0 0 / 200px; opacity: .5; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 16px 16px 40px; }
.view-contact .pc-pic { display: block; width: 100%; height: 100%; overflow: hidden; }
.view-contact .pc-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.view-contact .pc-caption { position: absolute; left: 18px; bottom: 14px; font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-ink-2); }
.view-contact .pc-back { transform: rotateY(180deg); display: grid; grid-template-columns: 1.25fr 1fr; padding: 34px 34px 30px; background: var(--card); color: var(--paper-ink); cursor: default; }
.view-contact .pc-back::before { content: ''; position: absolute; inset: 0; background: url(assets/grain-a.webp) 0 0 / 240px; opacity: .6; pointer-events: none; }
.view-contact .pc-left { position: relative; padding-right: 28px; border-right: 1.5px solid color-mix(in srgb, var(--paper-ink) 26%, transparent); }
.view-contact .pc-h { margin: 0; font: 400 clamp(38px, 5.4vw, 56px)/.9 var(--f-wood); text-transform: uppercase; }
.view-contact .pc-sub { margin: 10px 0 16px; font: 400 15px/1.4 var(--f-type); color: var(--paper-ink-2); }
.view-contact .pc-paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.view-contact .pc-paths a { display: grid; gap: 3px; min-height: 56px; padding: 10px 14px; border-radius: 4px; text-decoration: none; color: var(--paper-ink); background: color-mix(in srgb, var(--paper) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper-ink) 14%, transparent); }
.view-contact .pc-paths a:hover { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper-ink); }
.view-contact .pc-paths b { font: 700 18px/1.1 var(--f-sans); font-stretch: 88%; }
.view-contact .pc-paths b::after { content: ' →'; font-weight: 500; }
.view-contact .pc-paths span { font: 500 11.5px/1.35 var(--f-mono); color: var(--paper-ink-2); }
.view-contact .pc-paths em { font-style: normal; color: var(--paper-ink); }
.view-contact .pc-right { position: relative; padding-left: 28px; display: flex; flex-direction: column; justify-content: flex-end; container-type: inline-size; }
.view-contact .pc-stamp { position: absolute; right: 0; top: 0; width: 84px; height: 100px; padding: 6px; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  -webkit-mask: radial-gradient(circle at 4px 4px, transparent 2.4px, #000 2.8px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) center / calc(100% - 7px) calc(100% - 7px) no-repeat;
  mask: radial-gradient(circle at 4px 4px, transparent 2.4px, #000 2.8px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) center / calc(100% - 7px) calc(100% - 7px) no-repeat; }
.view-contact .pc-stamp span { display: grid; place-items: center; width: 100%; height: 100%; background: var(--dymo); color: var(--dymo-ink); font: 400 30px/1 var(--f-wood); }
.view-contact .pc-postmark { position: absolute; right: 52px; top: 58px; width: 92px; height: 92px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--paper-ink) 45%, transparent); display: grid; place-items: center; text-align: center; font: 600 9px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper-ink) 55%, transparent); transform: rotate(-14deg); }
.view-contact .pc-line { display: block; padding: 14px 0 6px; border-bottom: 1.5px solid color-mix(in srgb, var(--paper-ink) 30%, transparent); font: 400 17px/1 var(--f-type); }
.view-contact .pc-line-blank { min-height: 37px; }
/* the whole address on its one line, never broken, cut or shortened: where the line is short the writing gets a little
   smaller (26 typewriter characters = 15.6em), and the line keeps its height so the rules stay evenly spaced */
.view-contact .pc-line-addr { white-space: nowrap; font-size: min(17px, calc(100cqi / 15.9)); line-height: 17px; }
.view-contact .ct-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; width: min(820px, 100%); }
.view-contact .ct-addr {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 8px 8px 16px; border-radius: 3px; background: var(--paper); color: var(--paper-ink); transform: rotate(-.6deg);
  box-shadow: 0 0 0 .5px var(--paper-edge), calc(var(--lx) * 2px) calc(var(--ly) * 3px) 3px var(--lcol-2), calc(var(--lx) * 6px) calc(var(--ly) * 8px) 16px -4px var(--lcol);
}
.view-contact .ct-k { font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink-3); }
.view-contact .ct-v { font: 700 17px/1.2 var(--f-type); -webkit-user-select: text; user-select: text; overflow-wrap: anywhere; cursor: text; }
.view-contact .ct-copy { min-width: 76px; }
.view-contact .ct-status { flex-basis: 100%; min-height: 1.4em; margin: 0; text-align: center; font: 500 12px/1.4 var(--f-mono); color: var(--surface-ink-2); }
.view-contact .pc-turn .key-face { min-width: 150px; }

/* ================================================================ NARROW DESKTOP / TABLET ================== */
/* below 1024px the card would have to cut its genre names short beside the letter, so it goes under the letter */
@media (min-width: 720px) and (max-width: 1023px) {
  .view-about .ab-table { display: flex; flex-direction: column; align-items: center; gap: 34px; max-width: 720px; margin: 0 auto; }
  .view-about .ab-letter { align-self: stretch; }
  .view-about .ab-facts { align-self: center; width: min(100%, 540px); margin: 0; }
}

/* ================================================================ PHONE ===================================== */
@media (max-width: 719px) {
  :is(.view-about, .view-contact) .pg-inner { padding: calc(var(--bg-nav-h, var(--pg-top, 0px)) + 22px) max(16px, var(--sr)) calc(44px + var(--sb)) max(16px, var(--sl)); }
  :is(.view-about, .view-contact) .key-face { padding: 0 14px; font-size: 12px; letter-spacing: .07em; }

  .view-about .ab-table { display: flex; flex-direction: column; gap: 26px; padding-top: 2px; }
  .view-about .ab-letter { margin-top: 0; padding: 32px 22px 28px; transform: rotate(.8deg); align-self: stretch; }
  .view-about .letter-body p { margin-bottom: 1.15em; font-size: 16px; line-height: 1.6; }
  .view-about .ab-kicker { margin-bottom: 9px; font-size: 11.5px; }
  .view-about .ab-name-ink { -webkit-mask-size: 220px 220px; mask-size: 220px 220px; }
  .view-about .ab-name-plate { transform: translate(.032em, .036em); background-size: 3.2px 3.2px; background-position: 0 0, 1.6px 1.6px; }
  .view-about .ab-role { margin-top: 10px; font-size: 11.5px; letter-spacing: .13em; }
  .view-about .ab-rule { margin: 14px 0 20px; }
  .view-about .ab-facts { margin: 0 4px; padding: 20px 18px 18px; transform: rotate(-1deg); }

  .view-contact .pc { aspect-ratio: .78; transform: rotate(.6deg); }
  .view-contact .pc-front { padding: 10px 10px 34px; }
  .view-contact .pc-front::after { padding: 10px 10px 34px; }
  .view-contact .pc-pic img { object-position: 80% 50%; }
  .view-contact .pc-caption { left: 12px; bottom: 12px; font-size: 9px; letter-spacing: .1em; }
  .view-contact .pc-back { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 22px 18px 18px; }
  .view-contact .pc-left { padding: 0 0 16px; border-right: 0; border-bottom: 1.5px solid color-mix(in srgb, var(--paper-ink) 26%, transparent); }
  .view-contact .pc-h { font-size: 40px; padding-right: 70px; }
  .view-contact .pc-sub { margin: 8px 0 12px; font-size: 14px; }
  .view-contact .pc-paths a { min-height: 54px; padding: 8px 12px; }
  .view-contact .pc-paths b { font-size: 16.5px; }
  .view-contact .pc-paths span { font-size: 10.5px; }
  .view-contact .pc-right { padding: 8px 0 0; }
  .view-contact .pc-stamp { width: 58px; height: 70px; top: 14px; right: 0; }
  .view-contact .pc-stamp span { font-size: 21px; }
  .view-contact .pc-right .pc-line { margin-right: 72px; }
  .view-contact .pc-postmark { display: none; }
  .view-contact .pc-line { padding: 10px 0 4px; font-size: 15px; }
  .view-contact .pc-line-blank { min-height: 26px; }
  .view-contact .pc-line-addr { font-size: min(15px, calc((100cqi - 72px) / 15.9)); line-height: 15px; }
  .view-contact .ct-addr { width: 100%; justify-content: space-between; }
  .view-contact .ct-v { font-size: 15.5px; }
}
@media (max-width: 380px) {
  :is(.view-about, .view-contact) .key-face { padding: 0 11px; }
}

/* ---------- reduced motion: a designed stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.view-about, .view-contact) .surf, :is(.view-about, .view-contact) .key-face { transition: none; }
}