/*
==============================================================================
  AVAVA | Radio Station HTML Template
  about.css — styles of the About page (loaded after style.css)
==============================================================================

  TABLE OF CONTENTS

  01. (intro lives in style.css as the shared page intro)
  02. Process — "A night, hour by hour"
  03. Studio — "The room and the gear"
  04. Partners — "Kept on air by listeners"
  05. Contact — "work with us"
  06. Responsive

==============================================================================
*/

.sec--shows-about { padding-top: 12px; }

/* ============================================================================
   02. Process
   ========================================================================= */
.h2--s { font-size: clamp(28px, 3.4vw, 56px); line-height: .96; letter-spacing: -.045em; }
.pr-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 22px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.pr-clock { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 28px); }
.pr-clock .now { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pr-clock .now .row { display: flex; align-items: flex-end; gap: 10px; }
.pr-clock .now .eq { height: 16px; color: var(--accent); }
.pr-clock .now b { font: 800 clamp(30px, 3.4vw, 50px) / 1 Archivo, sans-serif; letter-spacing: -.04em; color: var(--accent); }
.pr-clock .split { display: flex; flex-direction: column; gap: 6px; padding-left: clamp(16px, 2vw, 26px); border-left: 1px solid var(--i2); }

.pr-grid { position: relative; padding-top: 26px; }
.pr-cols, .pr-row, .pr-axis { display: grid; grid-template-columns: 34px clamp(150px, 18%, 240px) minmax(0, 1fr) 124px; gap: clamp(14px, 2vw, 28px); }
.pr-cols { position: absolute; inset: 0; pointer-events: none; }
.pr-cols .lane { position: relative; min-width: 0; }
.pr-needle { position: absolute; top: 0; bottom: 26px; left: 92.63%; width: 2px; background: linear-gradient(180deg, var(--accent), var(--i45)); box-shadow: 0 0 10px rgba(201, 80, 42, .35); }
.pr-needle .mono { position: absolute; top: -22px; left: 0; transform: translateX(-50%); padding: 3px 7px; background: var(--accent); color: #fff; white-space: nowrap; }
.pr-rows { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.pr-row { align-items: center; padding: clamp(15px, 1.7vw, 24px) 0; border-bottom: 1px solid var(--i12); min-width: 0; position: relative; transition: background .18s ease; }
.pr-row:hover { background: var(--hover); }
.pr-row .no { letter-spacing: .1em; color: var(--i45); }
.pr-row.is-live { background: linear-gradient(90deg, rgba(201, 80, 42, .1), transparent 64%); }
.pr-row.is-live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.pr-row.is-live .no { color: var(--accent); padding-left: 12px; }
.pr-name { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pr-name .t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px; }
.pr-name h3 { font: 700 clamp(15px, 1.5vw, 21px) / 1.15 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.pr-row.is-live h3, .pr-row.is-live .pr-name .sub { color: var(--accent); }
.pr-name .sub { color: var(--i45); }
.pr-chip { flex: none; padding: 3px 7px; border: 1px solid var(--i2); color: var(--i5); letter-spacing: .12em; }
.pr-chip--on { border: 0; background: var(--accent); color: #fff; }
.pr-track { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-bar { position: relative; height: 18px; }
.pr-bar .base { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--i14); }
.pr-bar .seg { position: absolute; top: 5px; height: 8px; background: var(--i5); }
.pr-bar .seg--hatch { background: repeating-linear-gradient(90deg, rgba(201, 80, 42, .4) 0 5px, transparent 5px 10px); }
.pr-bar .seg--hatch-dim { background: repeating-linear-gradient(90deg, var(--i35) 0 5px, transparent 5px 10px); }
.pr-bar .seg--on { background: var(--accent); }
.pr-track p { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .06em; line-height: 1.5; color: var(--i55); }
.pr-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.pr-meta .mono { letter-spacing: .12em; color: var(--i55); white-space: nowrap; }
.pr-meta .mono.ink { color: var(--ink); }
.pr-meta .mono.accent { color: var(--accent); }
.pr-axis { padding-top: 10px; }
.pr-axis .lane { min-width: 0; }
.pr-axis .ticks { display: flex; justify-content: space-between; align-items: flex-start; }
.pr-axis .ticks > span { width: 1px; height: 5px; background: var(--i22); flex: none; }
.pr-axis .ticks > span:nth-child(3n+1) { height: 10px; background: var(--i45); }
.pr-axis .labels { display: flex; justify-content: space-between; padding-top: 6px; }
.pr-axis .labels > span { letter-spacing: .1em; color: var(--i4); }
.pr-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px, 2vw, 26px); padding-top: 16px; border-top: 1px solid var(--i16); }
.pr-foot .bar { flex: 1; min-width: 140px; height: 6px; background: var(--i12); }
.pr-foot .bar > span { display: block; height: 6px; width: 53%; background: var(--accent); }

/* ============================================================================
   03. Studio
   ========================================================================= */
.st-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 380px); gap: clamp(20px, 2.6vw, 40px); align-items: end; margin-bottom: clamp(20px, 2.4vw, 32px); }
.st-meters { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-left: clamp(16px, 2vw, 26px); border-left: 1px solid var(--i2); }
.meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meter .row { display: flex; align-items: baseline; gap: 10px; }
.meter .row .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--i5); }
.meter .row .v { flex: none; margin-left: auto; letter-spacing: .14em; color: var(--accent); }
.meter .bar { height: 4px; background: var(--i12); }
.meter .bar > span { display: block; height: 4px; background: var(--accent); }
.st-frames { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr) minmax(0, .86fr); gap: clamp(12px, 1.6vw, 24px); align-items: end; }
.st-frames figure { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.frame { position: relative; width: 100%; border: 1px solid var(--i22); overflow: hidden; background: var(--i10); transition: border-color .2s ease, transform .2s ease; }
.frame:hover { border-color: var(--accent); transform: translateY(-3px); }
.frame--43 { aspect-ratio: 4 / 3; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--11 { aspect-ratio: 1 / 1; }
.frame--live { border-color: var(--accent); }
.frame img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.frame .c { position: absolute; width: 14px; height: 14px; border: 0 solid var(--i35); z-index: 1; }
.frame .c--tl { left: 10px; top: 10px; border-left-width: 1px; border-top-width: 1px; }
.frame .c--tr { right: 10px; top: 10px; border-right-width: 1px; border-top-width: 1px; }
.frame .c--bl { left: 10px; bottom: 10px; border-left-width: 1px; border-bottom-width: 1px; }
.frame .c--br { right: 10px; bottom: 10px; border-right-width: 1px; border-bottom-width: 1px; }
.frame .tag { position: absolute; left: 0; top: 18px; z-index: 1; padding: 5px 10px; background: rgba(12, 12, 13, .78); color: #f5f4f1; white-space: nowrap; }
.frame .tag--on { background: var(--accent); color: #fff; }
.frame .live { position: absolute; right: 14px; top: 18px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.st-frames figcaption { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.st-frames figcaption .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .14em; color: var(--i55); }
.st-frames figcaption .r { flex: none; margin-left: auto; letter-spacing: .14em; color: var(--i4); }
.st-gear { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(22px, 2.6vw, 36px); padding-top: clamp(16px, 2vw, 24px); border-top: 2px solid var(--ink); }
.gear { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 0 clamp(14px, 1.6vw, 22px); border-right: 1px solid var(--i14); transition: background .18s ease; }
.gear:first-child { padding-left: 0; }
.gear:last-child { padding-right: 0; border-right: 0; }
.gear:hover { background: var(--hover); }
.gear .row { display: flex; align-items: baseline; gap: 8px; }
.gear .row .no { letter-spacing: .14em; color: var(--i45); }
.gear h3 { font: 700 clamp(14px, 1.4vw, 17px) / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.gear .row .dot { margin-left: auto; }
.gear p { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; line-height: 1.55; color: var(--i6); }
.gear .f { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--i14); letter-spacing: .14em; color: var(--i5); }
.gear--on .row .no, .gear--on .f { color: var(--accent); }
.gear--on .f { border-top-color: rgba(201, 80, 42, .45); }
.st-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: clamp(16px, 2vw, 24px); padding-top: 14px; border-top: 1px solid var(--i16); }

/* ============================================================================
   04. Partners
   ========================================================================= */
.pt-head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 28vw, 400px); gap: clamp(20px, 2.6vw, 40px); align-items: end; margin-bottom: clamp(20px, 2.4vw, 32px); }
.pt-lead { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-left: clamp(16px, 2vw, 26px); border-left: 1px solid var(--i2); }
.pt-lead .serif { font-size: clamp(16px, 1.7vw, 21px); line-height: 1.45; color: var(--i75); }
.pt-lead .row { display: flex; align-items: baseline; gap: 14px; }
.pt-lead .row .sl { color: var(--i28); }
.pt-wrap { border-top: 2px solid var(--ink); padding-top: clamp(16px, 2vw, 24px); }
.pt-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 calc(-1 * clamp(12px, 1.4vw, 20px)); }
.partner { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 0 clamp(12px, 1.4vw, 20px); border-right: 1px solid var(--i14); transition: background .18s ease; cursor: pointer; }
.partner:last-child { border-right: 0; }
.partner:hover { background: var(--hover); }
.partner .card { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--i22); background: var(--i10); display: grid; grid-template-rows: auto minmax(0, 1fr); transition: border-color .2s ease, transform .2s ease; }
.partner:hover .card { border-color: var(--accent); transform: translateY(-3px); }
.partner .card img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.partner .card .yr { position: relative; z-index: 1; padding: 4px 8px; background: rgba(12, 12, 13, .78); color: #f5f4f1; letter-spacing: .12em; text-align: left; }
.partner .card .nm { display: grid; place-items: center; min-height: 0; letter-spacing: .06em; color: var(--i5); padding: 4px 8px; text-align: center; text-wrap: pretty; overflow-wrap: anywhere; overflow: hidden; }
.partner--on .card { border-color: rgba(201, 80, 42, .5); }
.partner--on .card .yr { background: var(--accent); color: #fff; }
.partner h3 { font: 700 clamp(13px, 1.3vw, 16px) / 1.2 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; text-wrap: pretty; }
.partner p { font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; line-height: 1.5; color: var(--i55); text-wrap: pretty; }
.partner .f { box-sizing: content-box; margin-top: auto; min-height: 2.6em; padding-top: 9px; border-top: 1px solid var(--i14); letter-spacing: .14em; color: var(--i5); }   /* the prototype counts the 2.6em on the text box alone */
.partner--on .f { border-top-color: rgba(201, 80, 42, .45); color: var(--accent); }
.pt-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 2.6vw, 44px); align-items: end; margin-top: clamp(22px, 2.6vw, 36px); padding-top: clamp(18px, 2.2vw, 28px); border-top: 2px solid var(--ink); }
.pt-sum { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.pt-sum .big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; }
.pt-sum .big b { font: 800 clamp(40px, 5.4vw, 84px) / .9 Archivo, sans-serif; letter-spacing: -.05em; }
.pt-sum .big .lbl { display: flex; flex-direction: column; gap: 4px; }
.pt-sum .big .lbl .grot { font-size: clamp(14px, 1.4vw, 17px); line-height: 1; letter-spacing: -.02em; }
.pt-split { display: flex; height: 10px; gap: 2px; }
.pt-split .a { flex: 1 1 66%; background: var(--accent); }
.pt-split .b { flex: 1 1 34%; background: var(--i45); }
.pt-sum .row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; }
.pt-goal { position: relative; height: 6px; background: var(--i12); margin-top: 5px; }
.pt-goal > span { display: block; height: 6px; width: 71%; background: var(--accent); }
.pt-goal > i { position: absolute; top: -4px; left: 71%; width: 2px; height: 14px; background: var(--ink); }
.pt-tiers { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; gap: clamp(10px, 1.2vw, 16px); }
.tier { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tier .lbl { letter-spacing: .14em; color: var(--i55); white-space: nowrap; }
.tier--on .lbl { color: var(--accent); }
.tier button { padding: 13px 18px; border: 1px solid var(--i28); color: var(--ink); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; white-space: nowrap; text-align: center; }
.tier button:hover { border-color: var(--accent); color: var(--accent); }
.ct-btn { border: 0; background: var(--accent); color: #fff; }
.tier .ct-btn { border: 0; color: #fff; }
.tier .ct-btn:hover { color: #fff; }
:root[data-theme="dark"] .tier .ct-btn:hover { color: #0c0c0d; }
.ct-btn:hover { background: #141110; color: #fff; }
:root[data-theme="dark"] .ct-btn:hover { background: #fff; color: #0c0c0d; }
.pt-donate { padding: 13px 4px 13px 10px; letter-spacing: .18em; color: var(--ink); border-bottom: 1px solid var(--i4); white-space: nowrap; }
.pt-donate:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================================
   05. Contact
   ========================================================================= */
.sec--contact { background: var(--hero-bg); padding-bottom: 60px; }
.ct-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--i16); }
.ct-bar--b { border-bottom: 0; border-top: 1px solid var(--i16); gap: 10px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; }
.ct-l { min-width: 0; padding: clamp(26px, 3vw, 46px) clamp(22px, 2.4vw, 40px) clamp(24px, 2.6vw, 38px) 0; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); border-right: 1px solid var(--i16); }
.ct-r { min-width: 0; padding: clamp(26px, 3vw, 46px) 0 clamp(24px, 2.6vw, 38px) clamp(22px, 2.4vw, 40px); display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
.ct-title { display: flex; flex-direction: column; gap: clamp(2px, .5vw, 8px); }
.ct-title .serif { font-size: clamp(24px, 3vw, 50px); line-height: 1; color: var(--i84); }
.ct-title h2 { align-self: flex-start; padding: clamp(2px, .6vw, 10px) clamp(12px, 1.4vw, 24px); background: var(--accent); color: #fff; font: 700 clamp(44px, 7.4vw, 138px) / .92 'Bricolage Grotesque', sans-serif; letter-spacing: -.05em; text-transform: uppercase; }
.ct-title p { margin-top: clamp(8px, 1.2vw, 18px); font: 400 clamp(15px, 1.5vw, 20px) / 1.5 Archivo, sans-serif; color: var(--i75); max-width: 46ch; text-wrap: pretty; }
.ct-jobs { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.job { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: clamp(12px, 1.5vw, 20px); align-items: start; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--i16); min-width: 0; cursor: pointer; transition: background .18s ease; color: inherit; }
.job:hover { background: var(--hover); }
.job--on { padding-left: 14px; }
.job--on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.job .no { letter-spacing: .14em; color: var(--i5); padding-top: 3px; }
.job--on .no { color: var(--accent); }
.job .body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.job h3 { font: 700 clamp(15px, 1.5vw, 21px) / 1.15 'Bricolage Grotesque', sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.job .when { line-height: 1.5; letter-spacing: .1em; color: var(--i55); text-wrap: pretty; }
.job .apps { display: flex; align-items: center; gap: 10px; min-width: 0; }
.job .apps .bar { flex: 1; min-width: 40px; height: 3px; background: var(--i14); }
.job .apps .bar > span { display: block; height: 3px; background: var(--accent); }
.job .apps .bar > span.dim { background: var(--i4); }
.job .apps .mono { flex: none; letter-spacing: .12em; color: var(--i55); white-space: nowrap; }
.job .side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.job .state { padding: 6px 10px; background: var(--accent); color: #fff; letter-spacing: .14em; white-space: nowrap; }
.job .state--off { background: none; border: 1px solid var(--i28); color: var(--i6); }
.job .due { letter-spacing: .12em; color: var(--i5); white-space: nowrap; }
.ct-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(14px, 1.8vw, 28px); }
.ct-info > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-info .v { font: 600 clamp(14px, 1.35vw, 18px) / 1.35 Archivo, sans-serif; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
.ct-info .v:hover { color: var(--accent); }
/* The card is read as two parts: the application above, what happens after it
   below. The 38% below is the third the owner asked for: the block's own
   padding and the gap above it are not counted in a percentage height, so the
   figure runs a little ahead of what is measured on the card. On a wide screen the card is stretched to the column of jobs beside
   it, and the height left over is split between them — three quarters to the
   form, a quarter to the steps — instead of falling into one gap. The figure below
   reads 27.5% because a percentage height is taken from the card's content box,
   which is the card less its own padding; on the card it measures as the
   quarter asked for, and the steps keep their spacing. */
.ct-form { flex: 1; border: 1px solid var(--i2); padding: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(15px, 1.4vw, 26px); }
.ct-form > .head { display: flex; flex-direction: column; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid var(--i2); }
.ct-form > .head .row { display: flex; align-items: baseline; gap: 12px; }
.ct-form > .head h3 { font: 700 clamp(18px, 1.9vw, 26px) / 1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.ct-form .step { display: flex; align-items: center; gap: 11px; }
.ct-form .step .bar { flex: 1; min-width: 40px; height: 3px; background: var(--i14); }
.ct-form .step .bar > span { display: block; height: 3px; width: 25%; background: var(--accent); }
.ct-form .pair { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); }
.ct-form .pair .field { flex: 1 1 180px; }
.ct-form .field label { color: var(--i55); }
.ct-form .field .lr { display: flex; align-items: baseline; gap: 10px; }
.ct-form .field .lr > span.mono { margin-left: auto; letter-spacing: .12em; color: var(--i45); white-space: nowrap; }
.ct-form .field .lr label { letter-spacing: .2em; }
.ct-form .field input { border-bottom-color: var(--i45); }
.ct-form .field input::placeholder { color: var(--i55); }
.ct-send { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 24px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
/* The card stretches to match the column of jobs beside it, and on a wide
   screen that leaves a good deal of height over. It goes into the three steps
   rather than sitting as a hole above them: the list takes the slack and its
   rows spread, which reads as a timeline with room instead of a gap. */
.ct-next { min-height: 27.5%; padding-top: clamp(14px, 1.8vw, 24px); border-top: 1px solid var(--i2); display: flex; flex-direction: column; gap: 13px; flex: 0 0 auto; }
.ct-next ol { display: flex; flex-direction: column; justify-content: space-between; gap: 13px; flex: 1 1 auto; list-style: none; }
.ct-next .head { display: flex; align-items: baseline; gap: 12px; }
.ct-next li { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ct-next li .row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.ct-next li p { min-width: 0; font: 400 clamp(13px, 1.15vw, 15px) / 1.5 Archivo, sans-serif; color: var(--i75); text-wrap: pretty; }
.ct-next li .bar { height: 2px; background: var(--i14); margin-left: 38px; }
.ct-next li .bar > span { display: block; height: 2px; background: var(--accent); }
.ct-knock { display: flex; align-items: center; gap: 12px; }
.ct-knock .eq { height: 13px; color: var(--accent); }
.ct-knock .mono { color: var(--i6); text-wrap: pretty; }
.role { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--i28); color: var(--ink); font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; white-space: nowrap; }
.role > span { opacity: .7; }
.role:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================================
   06. Responsive
   ------------------------------------------------------------------------
   HD desktops 1101–2000px: the intro is tightened (the 5.4vw title filled a
   1920 screen); above 2000px nothing changes.
   ========================================================================= */
@media (min-width: 1101px) and (max-width: 2000px) {
  .sec--shows-about { padding-top: 0; }
  .sec--shows-about .h2 { font-size: clamp(28px, 3.3vw, 60px); }
}

@media (max-width: 1100px) {
  .st-gear, .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .gear:nth-child(3), .partner:nth-child(3) { border-right: 0; padding-right: 0; }
  .gear:nth-child(4) { padding-left: 0; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); }
  .ct-l { border-right: 0; padding-right: 0; }
  .ct-r { padding-left: 0; }
}

@media (max-width: 760px) {
  .pr-cols, .pr-row, .pr-axis { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .pr-cols { display: none; }
  .pr-row .pr-track { grid-column: 2; }
  .pr-row .pr-meta { grid-column: 2; align-items: flex-start; }
  .pr-axis .lane { grid-column: 2; }
  .pr-axis > span:nth-child(2), .pr-axis > span:nth-child(4) { display: none; }
  .st-head, .pt-head, .pt-money { grid-template-columns: minmax(0, 1fr); }
  .st-meters, .pt-lead { padding-left: 0; border-left: 0; }
  .st-frames { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-frames figure:first-child { grid-column: 1 / -1; }
  .st-gear, .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gear:nth-child(2n), .partner:nth-child(2n) { border-right: 0; padding-right: 0; }
  .gear:nth-child(3), .partner:nth-child(3) { border-right: 1px solid var(--i14); padding-right: clamp(14px, 1.6vw, 22px); }
  .gear:nth-child(2n+1) { padding-left: 0; }
  .pt-tiers { justify-content: flex-start; }
  .ct-title h2 { font-size: clamp(44px, 18vw, 96px); }
  .job { grid-template-columns: 26px minmax(0, 1fr); }
  .job .side { grid-column: 2; flex-direction: row; align-items: center; }
}

@media (max-width: 420px) {
  .pr-foot .nowrap { white-space: normal; }
  .st-frames { grid-template-columns: minmax(0, 1fr); }
  .st-gear, .pt-grid { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .gear, .partner { border-right: 0; padding: 0; }
  .gear:nth-child(3), .partner:nth-child(3) { border-right: 0; padding-right: 0; }
  .pt-sum .big b { font-size: 40px; }
}