/* Benny Graves — ABOUT: LINER NOTES (the About since 2026-11-08; see liner.js). Every rule is under html.about-liner and
   the build's own ln- classes, so with ?about=letter (the letter it replaced) none of it applies.
   A black gatefold sleeve on the leather mat of the listening room. Sizes on a computer are in the gatefold's own pixels
   (a panel is 680 of them; liner.js scales the whole sleeve to the room and never above 1). On a phone they are real. */

.about-liner .view-about {
  --ln-cream: #efe3cc; --ln-cream-2: rgba(239, 227, 204, .74); --ln-cream-3: rgba(239, 227, 204, .5); --ln-gold: #e2c27a; --ln-spot: #ff5a2a; --ln-ink: #120c08;
  --ln-poster: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif; --ln-type: 'Courier Prime', 'Courier New', Courier, monospace; --ln-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ln-goldfoil: linear-gradient(100deg, #b8893a 0%, #f7e2a4 28%, #c99a45 46%, #fff0c2 58%, #b3843a 78%, #e9c97d 100%);
  display: flow-root; /* (the stage's top margin stays inside the page: the page is exactly the screen on a computer) */
  background: #0b0806; color: var(--ln-cream); color-scheme: dark;
}
.about-liner .view-about :focus-visible { outline: 2px solid var(--ln-gold); outline-offset: 3px; }

/* the page behind it is the dark room too (Safari tints its toolbars, and an overscroll, from it) */
html.about-liner[data-view="about"], html.about-liner[data-view="about"] body { background: #0b0806; }

/* the room: a photograph of the listening room, cropped to the screen around the mat (liner.js places it) */
.about-liner .view-about .ln-ground { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0b0806; }
.about-liner .view-about .ln-room { position: absolute; display: block; max-width: none; transform-origin: 0 0; will-change: transform; -webkit-user-drag: none; user-select: none; }
.about-liner .view-about .ln-vig { position: absolute; inset: 0; background: radial-gradient(130% 95% at 50% 45%, rgba(4, 3, 2, 0) 55%, rgba(4, 3, 2, .6) 100%); }

.about-liner .view-about .ln-stage { position: relative; margin-top: var(--bg-nav-h); perspective: 1600px; }
.about-liner .view-about .ln-stage.ln-wide { height: calc(var(--bg-vh) - var(--bg-nav-h) - var(--bg-dock-h)); overflow: hidden; }
.about-liner .view-about .ln-stage.ln-tall { padding: 14px 0 calc(var(--ln-pw) * .42 + 30px); perspective: 1200px; }

/* the gatefold: two boards on a spine. The left board is the cover: closed, it lies folded over the right one */
.about-liner .view-about .ln-gf { transform-style: preserve-3d; }
.about-liner .view-about .ln-wide .ln-gf { position: absolute; left: 0; top: 0; width: 1360px; height: 680px; transform-origin: 680px 340px; }
.about-liner .view-about .ln-tall .ln-gf { position: relative; width: var(--ln-pw); margin: 0 auto; }
.about-liner .view-about .ln-panel { transform-style: preserve-3d; }
.about-liner .view-about .ln-wide .ln-panel { position: absolute; top: 0; width: 680px; height: 680px; }
.about-liner .view-about .ln-wide .ln-L { left: 0; transform-origin: 100% 50%; }
.about-liner .view-about .ln-wide .ln-R { left: 680px; }
.about-liner .view-about .ln-tall .ln-panel { position: relative; min-height: var(--ln-pw); }
.about-liner .view-about .ln-tall .ln-L { transform-origin: 50% 100%; }

/* each board's two faces; a face only shows from its own side */
.about-liner .view-about .ln-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border-radius: 3px; transform: translateZ(0); }
.about-liner .view-about .ln-tall .ln-panel > .ln-in { position: relative; inset: auto; min-height: var(--ln-pw); }
.about-liner .view-about .ln-in {
  background: radial-gradient(120% 90% at 70% 10%, rgba(255, 236, 200, .055), transparent 60%), #151211;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, .05), inset 0 0 50px rgba(0, 0, 0, .45);
}
.about-liner .view-about .ln-wide .ln-R > .ln-in { box-shadow: inset 2px 0 0 rgba(0, 0, 0, .55), inset 3px 0 0 rgba(255, 240, 210, .07), inset 0 0 50px rgba(0, 0, 0, .45); }
.about-liner .view-about .ln-tall .ln-R > .ln-in { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .55), inset 0 3px 0 rgba(255, 240, 210, .07), inset 0 0 50px rgba(0, 0, 0, .45); }
/* the cover (the outside of the left board): black linen, his signature in gold foil */
.about-liner .view-about .ln-out {
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255, 236, 200, .08), transparent 60%), url(assets/linen.webp) 0 0 / 260px, #121010;
  background-blend-mode: normal, soft-light, normal;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, .07), inset 0 0 44px rgba(0, 0, 0, .55);
}
.about-liner .view-about .ln-wide .ln-out { transform: rotateY(180deg) translateZ(2px); }
.about-liner .view-about .ln-tall .ln-out { top: auto; bottom: 0; height: var(--ln-pw); transform: rotateX(180deg) translateZ(2px); }
.about-liner .view-about .ln-out .ln-sig { width: 64%; }
.about-liner .view-about .ln-foil { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; font: 700 15px/1 var(--ln-poster); font-variation-settings: 'wdth' 92; letter-spacing: .34em; text-transform: uppercase; color: var(--ln-gold); white-space: nowrap; }
.about-liner .view-about .ln-foil-top { position: absolute; left: 50%; top: 12%; width: 22%; height: 1.5px; translate: -50% 0; background: var(--ln-gold); opacity: .7; }
.about-liner .view-about .ln-tall .ln-foil { font-size: 9px; }
/* at rest (liner.js): one flat print, the cover's outside out of the way */
.about-liner .view-about .ln-gf.ln-flat, .about-liner .view-about .ln-flat .ln-panel { transform-style: flat; }
.about-liner .view-about .ln-flat .ln-out { display: none; }
.about-liner .view-about .ln-flat :is(.ln-face, .ln-drop) { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
/* light on a board as it turns (liner.js fades these), and the shadow each board casts on the mat */
.about-liner .view-about .ln-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #000; opacity: 0; will-change: opacity; }
.about-liner .view-about .ln-drop { position: absolute; inset: 0; pointer-events: none; border-radius: 3px; box-shadow: 0 22px 46px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .45); transform: translateZ(-4px); will-change: opacity; }
.about-liner .view-about .ln-tall .ln-drop { box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .45); }
/* the pocket the record lives in, at the board's open edge */
.about-liner .view-about .ln-pocket { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .32)); }
.about-liner .view-about .ln-tall .ln-pocket { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .32)); }

/* the gold record (its label carries the gold signature); it slides out of the pocket as the sleeve opens */
.about-liner .view-about .ln-rec { position: absolute; display: block; border-radius: 50%; box-shadow: 0 14px 26px rgba(0, 0, 0, .55), 0 3px 6px rgba(0, 0, 0, .4); }
.about-liner .view-about .ln-rec img { display: block; width: 100%; height: 100%; max-width: none; -webkit-user-drag: none; user-select: none; }
.about-liner .view-about .ln-lab { position: absolute; left: 33.6%; top: 33.6%; width: 32.8%; height: 32.8%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #1a1412 0 7%, #2a2018 8% 100%); }
.about-liner .view-about .ln-lab .ln-sig { width: 78%; }
.about-liner .view-about .ln-wide .ln-rec { width: 612px; height: 612px; left: 190px; top: 38px; transform: translateZ(-2px); }
.about-liner .view-about .ln-tall .ln-rec { width: calc(var(--ln-pw) * .78); height: calc(var(--ln-pw) * .78); left: calc(var(--ln-pw) * .15); top: calc(var(--ln-pw) * .36); transform: translateZ(-2px); }

/* his signature: the original artwork's shape (signature-mask.webp, scaled from share/src/signature-white.png), in gold */
.about-liner .view-about .ln-sig { position: relative; display: block; aspect-ratio: 1100 / 403; overflow: hidden; background: var(--ln-goldfoil);
  -webkit-mask: url(assets/signature-mask.webp) 0 0 / 100% 100% no-repeat; mask: url(assets/signature-mask.webp) 0 0 / 100% 100% no-repeat; }
.about-liner .view-about .ln-glint { position: absolute; top: 0; bottom: 0; left: 0; width: 46%; background: linear-gradient(100deg, rgba(255, 250, 232, 0), rgba(255, 250, 232, .95) 50%, rgba(255, 250, 232, 0)); transform: translateX(-110%); }

/* ---------- the inside: liner notes on the left board, the credits (and, reading, the rest of the letter) on the right ---------- */
.about-liner .view-about .ln-c { position: absolute; inset: 0; z-index: 1; padding: 54px; container-type: inline-size; }
.about-liner .view-about .ln-tall .ln-c { padding: 26px; }
.about-liner .view-about .ln-tall .ln-c { position: relative; inset: auto; }
.about-liner .view-about .ln-tall .ln-L .ln-c { padding-bottom: 30px; }
.about-liner .view-about .ln-letter, .about-liner .view-about .ln-rc { display: flow-root; margin: 0; }
.about-liner .view-about .ln-h { margin: 0; font-weight: 400; }
.about-liner .view-about .ln-h:focus { outline: none; }
.about-liner .view-about .ln-kicker { display: block; font: 800 15px/1 var(--ln-poster); font-variation-settings: 'wdth' 92; letter-spacing: .32em; text-transform: uppercase; color: var(--ln-gold); }
.about-liner .view-about .ln-name {
  display: block; width: max-content; max-width: 100%; margin-top: 14px; white-space: nowrap; text-transform: uppercase; color: var(--ln-spot);
  font: 900 min(92px, calc(100cqi / 5.45))/.88 var(--ln-poster); font-variation-settings: 'wdth' 62;
  -webkit-mask: url(assets/wear-fine.png) 0 0 / 300px 300px repeat; mask: url(assets/wear-fine.png) 0 0 / 300px 300px repeat;
}
.about-liner .view-about .ln-role { margin: 18px 0 0; font: 700 16px/1.3 var(--ln-poster); font-variation-settings: 'wdth' 88; letter-spacing: .2em; text-transform: uppercase; color: var(--ln-cream); }
.about-liner .view-about .ln-rule { height: 3px; margin: 22px 0 0; border: 0; background: var(--ln-spot); }
.about-liner .view-about :is(.ln-p0, .ln-story p, .ln-story2 p) { margin: 0 0 .9em; font: 400 var(--ln-fs, 23px)/1.62 var(--ln-type); text-wrap: pretty; overflow-wrap: normal; }
.about-liner .view-about .ln-p0 { margin-top: 26px !important; }
.about-liner .view-about .ln-cue { display: flow-root; }
.about-liner .view-about .ln-btn {
  display: inline-flex; align-items: center; gap: .55em; height: 62px; margin: 6px 0 0; padding: 0 30px; border: 0; border-radius: 31px; cursor: pointer;
  font: 700 21px/1 var(--ln-type); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .09s ease-out, background-color .15s;
}
.about-liner .view-about .ln-btn span { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; }
.about-liner .view-about .ln-read { background: var(--ln-spot); color: var(--ln-ink); box-shadow: 0 10px 26px rgba(255, 90, 42, .25); }
.about-liner .view-about .ln-read:hover { background: #ff6c40; }
.about-liner .view-about .ln-btn:active { transform: translateY(1px); }
.about-liner .view-about .ln-less { height: 52px; padding: 0 24px; margin-top: 26px; border: 1.5px solid currentColor; background: transparent; color: var(--ln-cream-2); font-size: 18px; }
.about-liner .view-about .ln-less:hover { color: var(--ln-cream); background: rgba(239, 227, 204, .06); }
.about-liner .view-about .ln-story, .about-liner .view-about .ln-story2 { display: none; }
.about-liner .view-about .ln-story:focus { outline: none; }
.about-liner .view-about .ln-sign { margin: 1.1em 0 0; }
.about-liner .view-about .ln-sign .ln-sig { width: 52%; margin-left: -4px; }

/* the credits: the catalog's own numbers */
.about-liner .view-about .ln-credits { width: 60%; color: var(--ln-cream); }
.about-liner .view-about .ln-ch { margin: 0; font: 700 15px/1 var(--ln-poster); font-variation-settings: 'wdth' 92; letter-spacing: .3em; text-transform: uppercase; color: var(--ln-gold); }
.about-liner .view-about .ln-ch + .ln-dl { margin-top: 18px; }
.about-liner .view-about .ln-dl { display: grid; gap: 10px; margin: 0 0 30px; }
.about-liner .view-about .ln-dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 8px; border-bottom: 1px dotted rgba(239, 227, 204, .45); }
.about-liner .view-about .ln-dl dt { font: 500 13.5px/1 var(--ln-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ln-cream-3); white-space: nowrap; }
.about-liner .view-about .ln-dl dd { margin: 0; font: 400 19px/1.25 var(--ln-type); text-align: right; }
.about-liner .view-about .ln-dl small { font-size: .82em; color: var(--ln-cream-2); }
.about-liner .view-about .ln-genres { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px; }
.about-liner .view-about .ln-genres li { display: grid; grid-template-columns: minmax(0, 1fr) 30% 30px; align-items: center; gap: 12px; font: 400 17.5px/1.2 var(--ln-type); }
.about-liner .view-about .lng-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.about-liner .view-about .lng-bar { display: block; height: 4px; border-radius: 2px; background: rgba(239, 227, 204, .16); }
.about-liner .view-about .lng-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ln-gold); transform-origin: 0 50%; }
.about-liner .view-about .ln-genres b { font: 600 15px/1 var(--ln-mono); text-align: right; color: var(--ln-cream-2); }

/* reading (a computer): the heading folds down to a line, the letter runs across both boards, the credits step aside */
.about-liner .view-about .ln-wide .is-story :is(.ln-role, .ln-rule, .ln-cue, .ln-credits) { display: none; }
.about-liner .view-about .ln-wide .is-story :is(.ln-story, .ln-story2) { display: block; }
.about-liner .view-about .ln-wide .is-story :is(.ln-p0, .ln-story p, .ln-story2 p) { font-size: var(--ln-sfs, 17px); }
.about-liner .view-about .ln-wide .is-story .ln-p0 { margin-top: 20px !important; }
.about-liner .view-about .ln-wide .is-story .ln-h { display: flex; gap: .55em; }
.about-liner .view-about .ln-wide .is-story .ln-kicker::after { content: ' ·'; }
.about-liner .view-about .ln-wide .is-story .ln-name { margin: 0; font: 800 15px/1 var(--ln-poster); font-variation-settings: 'wdth' 92; letter-spacing: .32em; color: var(--ln-gold); -webkit-mask: none; mask: none; }

/* ---------- a phone: the gatefold opens downward like a booklet, and the story unfolds on the top board ---------- */
.about-liner .view-about .ln-tall .ln-kicker { font-size: 11px; }
.about-liner .view-about .ln-tall .ln-name { margin-top: 10px; font-size: min(62px, calc(100cqi / 5.45)); }
.about-liner .view-about .ln-tall .ln-role { margin-top: 13px; font-size: max(10px, min(11.5px, 3.6cqi)); letter-spacing: .16em; }
.about-liner .view-about .ln-tall .ln-rule { height: 2px; margin-top: 16px; }
.about-liner .view-about .ln-tall :is(.ln-p0, .ln-story p, .ln-story2 p) { font-size: 15px; }
.about-liner .view-about .ln-tall .ln-p0 { margin-top: 18px !important; }
.about-liner .view-about .ln-tall .ln-btn { height: 46px; padding: 0 22px; border-radius: 23px; font-size: 15px; }
.about-liner .view-about .ln-tall .ln-less { height: 44px; padding: 0 20px; margin-top: 20px; font-size: 14.5px; }
.about-liner .view-about .ln-tall .ln-sign .ln-sig { width: 62%; }
.about-liner .view-about .ln-tall .is-story .ln-cue { display: none; }
.about-liner .view-about .ln-tall .is-story :is(.ln-story, .ln-story2) { display: block; }
.about-liner .view-about .ln-tall .ln-credits { width: auto; }
.about-liner .view-about .ln-tall .ln-ch { font-size: 11px; }
.about-liner .view-about .ln-tall .ln-ch + .ln-dl { margin-top: 13px; }
.about-liner .view-about .ln-tall .ln-dl { gap: 7px; margin-bottom: 20px; }
.about-liner .view-about .ln-tall .ln-dl div { padding-bottom: 6px; }
.about-liner .view-about .ln-tall .ln-dl dt { font-size: 10px; }
.about-liner .view-about .ln-tall .ln-dl dd { font-size: 13.5px; }
.about-liner .view-about .ln-tall .ln-genres { margin-top: 11px; gap: 4px; }
.about-liner .view-about .ln-tall .ln-genres li { grid-template-columns: minmax(0, 1fr) 34% 24px; gap: 10px; font-size: 12.5px; }
.about-liner .view-about .ln-tall .lng-bar { height: 3px; }
.about-liner .view-about .ln-tall .ln-genres b { font-size: 11.5px; }

@media (prefers-reduced-motion: reduce) {
  .about-liner .view-about .ln-btn { transition: none; }
}