/* ─────────────────────────────────────────────
   About — the portal, three takes, the mixing desk.
   ───────────────────────────────────────────── */

/* ── the portal ── */
.ab-hero {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 64px; align-items: center;
  max-width: 1240px; margin: 0 auto; padding: 140px 0 90px;
}
.ab-hero h1 { margin: 0 0 26px; font: 400 clamp(56px, 8vw, 112px)/.9 var(--f-display); letter-spacing: -.02em; }
.ab-hero h1 .script { color: var(--accent); font-size: 1.05em; filter: url(#boil); }
.ab-hero p { max-width: 54ch; color: rgba(233,225,204,.84); }
.ab-hero__lede { font: italic 400 clamp(22px, 2.4vw, 30px)/1.3 var(--f-display); color: var(--bone) !important; }

/* the portal reuses the homepage window (.chapel, .sconce from styles.css); only the inside differs */
.ab-hero .portal { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; width: min(300px, 62%); }
.portal__screen { position: absolute; inset: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.portal__screen img, .portal__screen .ascii { position: absolute; inset: 0; width: 100%; height: 100%; }
.portal__screen img { object-fit: cover; object-position: 54% 50%; opacity: 0; transition: opacity .5s steps(6); filter: sepia(.25) contrast(1.05) brightness(calc(.92 + var(--glow, .8) * .1)); }
.portal__screen .ascii { transition: opacity .5s steps(6); }
.portal__screen:hover img, .portal__screen.is-developed img { opacity: 1; }
.portal__screen:hover .ascii, .portal__screen.is-developed .ascii { opacity: 0; }
.portal .chapel__plaque { justify-content: center; gap: 14px; }

/* ── three takes ── */
.ab-process { max-width: 1240px; margin: 0 auto; padding: 90px 0 40px; border-top: 1px solid rgba(233,225,204,.12); }
.takes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.takes li { position: relative; padding: 26px 28px 30px 0; border-top: 1px solid rgba(233,225,204,.18); }
.takes li + li { padding-left: 28px; border-left: 1px dashed rgba(233,225,204,.18); }
.takes__n { display: block; font: 400 64px/1 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--accent); margin-bottom: 14px; }
.takes h3 { margin: 0; font: 400 40px/1 var(--f-display); }
.takes__sub { margin: 6px 0 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sepia); }
.takes p:last-child { margin: 0; color: rgba(233,225,204,.82); max-width: 40ch; }

/* ── the mixing desk ── */
.ab-desk { max-width: 1240px; margin: 0 auto; padding: 100px 0 40px; }
.desk { background: #0d0c0b; border: 1px solid rgba(233,225,204,.14); box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(233,225,204,.05); }
.desk__readout {
  display: grid; grid-template-columns: 140px 1fr auto; grid-template-rows: auto auto; gap: 4px 24px; align-items: baseline;
  padding: 22px 26px; border-bottom: 1px solid rgba(233,225,204,.12);
  background: repeating-linear-gradient(0deg, rgba(171,51,40,.05) 0 1px, transparent 1px 3px), #0d0c0b;
  position: sticky; top: 52px; z-index: 46;   /* stays in view above the edge blur while you play the desk */
}
.desk__label { grid-row: span 2; margin: 0; font-size: 11px; letter-spacing: .18em; color: var(--accent); }
.desk__name { margin: 0; font: 400 clamp(28px, 3vw, 40px)/1 var(--f-display); }
.desk__since { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--bone); text-align: right; font-variant-numeric: tabular-nums; }
.desk__tools { margin: 0; color: rgba(233,225,204,.75); font-size: 15px; }
.desk__used { margin: 0; font-size: 11.5px; letter-spacing: .06em; color: var(--sepia); text-align: right; }

.desk__board { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; background: #070606; }
/* each bus is its own panel, so the desk reads as separate groups */
.bus { flex: 1 1 auto; min-width: 0; padding: 16px 16px 18px; background: #0f0e0c; border: 1px solid rgba(233,225,204,.12); border-top: 2px solid rgba(171,51,40,.55); }
.bus__name { margin: 0 0 14px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(233,225,204,.55); }
.bus__channels { display: flex; gap: 6px; }
.bus { flex-shrink: 0; }
@media (max-width: 900px) { .bus { flex-shrink: 1; } }

.ch {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-rows: 150px auto auto; justify-items: center; gap: 10px;
  width: 84px; padding: 8px 5px 10px; border: 1px solid rgba(233,225,204,.1); background: #121110;
  transition: opacity .25s steps(3), border-color .25s steps(3);
}
.ch:focus-visible { outline: 1px dashed var(--accent); outline-offset: 3px; }
.ch__meter { --lvl: 0; position: relative; width: 14px; height: 100%; display: flex; flex-direction: column-reverse; gap: 3px; }
.ch__meter i { flex: 1; background: rgba(233,225,204,.08); }
.ch__meter i.on { background: var(--bone); }
.ch__meter i.on.hot { background: var(--accent); }
.ch__name { width: 100%; font: 10px/1.3 var(--f-mono); letter-spacing: 0; text-align: center; color: rgba(233,225,204,.75); min-height: 3.9em; overflow-wrap: break-word; hyphens: auto; }
.ch__since { font: 10px/1 var(--f-mono); letter-spacing: .08em; color: var(--sepia); }
.ch__solo {
  position: absolute; top: -9px; right: -6px; padding: 2px 4px; font: 9px/1 var(--f-mono); letter-spacing: .1em;
  color: var(--void); background: var(--accent); opacity: 0;
}
/* soloing dims its own bus hard and the other buses only lightly */
.desk__board.is-solo .ch:not(.is-on) { opacity: .6; }
.desk__board.is-solo .bus:has(.is-on) .ch:not(.is-on) { opacity: .3; }
.desk__board.is-solo .bus:has(.is-on) { border-color: rgba(171,51,40,.45); }
.ch.is-on { border-color: var(--accent); background: #17110f; }
.ch.is-on .ch__solo { opacity: 1; }
.ch.is-on .ch__name { color: var(--bone); }

.desk__also { margin: 0; padding: 14px 26px; border-top: 1px solid rgba(233,225,204,.1); font-size: 11.5px; line-height: 1.6; letter-spacing: .04em; color: rgba(233,225,204,.6); }
.desk__also span { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; margin-right: 10px; }

/* ── study, languages, clients ── */
.ab-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; max-width: 1240px; margin: 0 auto; padding: 90px 0 30px; }
.ab-h { margin: 0 0 16px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ab-col .ab-h + * { margin-bottom: 44px; }
.ab-list { list-style: none; margin: 0; padding: 0; border-top: 1px dashed rgba(233,225,204,.22); }
.ab-list li { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px dashed rgba(233,225,204,.22); }
.ab-list b { font: 400 21px/1.2 var(--f-display); }
.ab-list span { font: 11.5px/1.4 var(--f-mono); color: rgba(233,225,204,.55); letter-spacing: .04em; }
.ab-lang { list-style: none; margin: 0; padding: 0; }
.ab-lang li { display: grid; grid-template-columns: 110px auto 1fr; gap: 16px; align-items: center; padding: 9px 0; border-bottom: 1px dashed rgba(233,225,204,.22); }
.ab-lang b { font: 400 22px/1 var(--f-display); }
.ab-lang em { font: 11.5px var(--f-mono); color: rgba(233,225,204,.6); letter-spacing: .08em; font-style: normal; }
.lvl { display: inline-flex; gap: 3px; }
.lvl i { width: 14px; height: 10px; background: rgba(233,225,204,.12); }
.lvl i:nth-child(-n + 1) { background: var(--accent); }
.lvl[style*="--n:2"] i:nth-child(-n + 2), .lvl[style*="--n:3"] i:nth-child(-n + 3), .lvl[style*="--n:4"] i { background: var(--accent); }
.ab-credits { margin: 0; font: 13px/2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(233,225,204,.78); }
.ab-contact { position: relative; isolation: isolate; overflow: hidden; }
.rain {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .6;
  -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.ab-kitty { margin-top: 44px; font-size: 11px; letter-spacing: .1em; color: rgba(233,225,204,.45); }

/* ── responsive ── */
@media (max-width: 900px) {
  .ab-hero { grid-template-columns: 1fr; padding-top: 110px; }
  .ab-hero .portal { grid-column: 1; grid-row: auto; width: min(280px, 70%); }
  .takes { grid-template-columns: 1fr; }
  .takes li + li { padding-left: 0; border-left: 0; }
  .desk__readout { grid-template-columns: 1fr; }
  .desk__label { grid-row: auto; }
  .desk__since, .desk__used { text-align: left; }
  .bus { flex-basis: 100%; }
  .bus__channels { overflow-x: auto; padding-bottom: 6px; }
  .ab-notes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ch { flex: none; width: 80px; grid-template-rows: 110px auto auto; }
  .ch__name { font-size: 9.5px; }
  .ab-lang li { grid-template-columns: 96px auto 1fr; gap: 10px; }
}