/* ============================================================================
   AVAVA Radio — Contact
   Own styles for contact.html. Everything shared (header, crumbs, page intro,
   footer, mono/dim helpers, ember buttons) lives in style.css.

   01. Section frame and headings
   02. Reach the studio
   03. The studio: map and how to get in
   04. Write to us
   05. Ask for a record, on air
   06. Who answers
   07. Paperwork and press kit
   08. Responsive ≤1100px / ≤760px
   ========================================================================= */

/* ------------------------------------------- 01. frame and headings ----- */
.cn-sec { padding-top: 0; padding-bottom: 0; }
.cn-sec--first { padding-top: 40px; }   /* the handoff's gap from the header to the first block */
.cn-sec--last { padding-bottom: 60px; }
/* the rules between the sections of this page are a touch stronger */
.page .divider { background: var(--i18); }

.cn-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding: 16px 0; }
.cn-h { margin: 0; font: 700 clamp(24px, 3.2vw, 52px) / .95 'Bricolage Grotesque', sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.cn-h--s { font-size: clamp(20px, 2.2vw, 32px); line-height: 1; letter-spacing: -.04em; }
.cn-rule { border-top: 2px solid var(--ink); padding-top: clamp(16px, 2vw, 26px); }

.cn-x { display: block; min-width: 0; font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i6); text-wrap: pretty; }
.cn-x--m { font-size: 15px; line-height: 1.55; }

/* ---------------------------------------------- 02. reach the studio --- */
.cn-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--i18); }
.cn-reach { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 24vw, 320px); gap: clamp(20px, 2.6vw, 44px); padding-top: clamp(18px, 2.4vw, 28px); }
.cn-ways-col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); min-width: 0; }
.cn-said { font: 400 clamp(19px, 2.2vw, 30px) / 1.4 'Instrument Serif', serif; font-style: italic; text-wrap: pretty; }

.cn-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: clamp(14px, 1.8vw, 24px); list-style: none; }
.cn-way { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 20px; border: 1px solid var(--i16); }
.cn-way--on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cn-way-t { display: flex; align-items: baseline; gap: 10px; color: var(--i45); }
.cn-way-t .push { color: var(--i5); white-space: nowrap; }
.cn-way-n { font: 700 clamp(17px, 1.8vw, 23px) / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.cn-way-a { font-family: 'DM Mono', ui-monospace, monospace; font-size: 14px; line-height: normal; letter-spacing: .04em; word-break: break-word; }
.cn-way--on .cn-way-t, .cn-way--on .cn-way-t .push, .cn-way--on .cn-way-n, .cn-way--on .cn-way-a { color: var(--accent); }

.cn-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-left: clamp(14px, 1.8vw, 28px); border-left: 1px solid var(--i16); }
.cn-rails { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.cn-rail-row { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--i14); }
.cn-rail-row .push { text-align: right; }
.cn-rail-f { margin-top: auto; text-wrap: pretty; }

/* -------------------------------------- 03. the studio and the map ----- */
.cn-studio { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.cn-map { position: relative; min-width: 0; border: 1px solid var(--i16); }
/* the map is a page of its own; the dark theme inverts the whole frame */
.cn-frame { display: block; width: 100%; height: clamp(300px, 42vh, 460px); border: 0; }
[data-theme="dark"] .cn-frame { filter: invert(1) hue-rotate(180deg) saturate(.75) brightness(.95); }
.cn-map-f { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px; background: var(--shell); }
.cn-map-a { color: #fff; }   /* the strip is always dark, so this one stays white */
.cn-map-f a:hover { color: #fff; }

.cn-getin { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); min-width: 0; }
.cn-getin-h { display: flex; flex-direction: column; gap: 9px; }
.cn-gos { list-style: none; }
.cn-go { display: grid; grid-template-columns: clamp(84px, 10vw, 112px) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--i14); }
.cn-go:last-child { border-bottom: 0; }
.cn-go-x { font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i7); }
/* the hairlines between the hours are the grid's own background */
.cn-hours { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--i14); margin-top: auto; list-style: none; }
.cn-hour { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; background: var(--panel); }
.cn-hour-n { font: 800 19px / 1 Orbitron, sans-serif; }
.cn-hour--on .cn-hour-n { color: var(--accent); }

/* ----------------------------------------------- 04. write to us ------- */
.cn-form-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: stretch; }
.cn-form { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); min-width: 0; padding: clamp(18px, 2.2vw, 26px); border: 1px solid var(--i16); }
.cn-topics { display: flex; flex-direction: column; gap: 10px; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-chip { padding: 10px 14px; border: 1px solid var(--i2); background: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: normal; color: var(--i7); white-space: nowrap; cursor: pointer; }
.cn-chip:hover { border-color: var(--accent); }
.cn-chip.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }
.cn-form-row, .cn-req-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); }
.cn-field { display: flex; flex-direction: column; gap: 7px; flex: 1 1 220px; min-width: 0; }
.cn-form > .cn-field { flex: none; }
/* the fields keep the handoff's own size and a rule that shows in both themes */
.cn-form .rq, .cn-req-form .rq { padding: 12px 0; font-size: 17px; border-bottom-color: var(--i45); }
.cn-area { resize: vertical; }
.cn-send { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cn-send-b, .cn-queue-b { padding: 14px 22px; letter-spacing: .2em; line-height: normal; }
.cn-send-b:hover, .cn-queue-b:hover { background: var(--shell); color: #fff; }

.cn-after { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); min-width: 0; }
.cn-next { display: flex; flex-direction: column; gap: 11px; padding: 18px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cn-next .cn-x { color: var(--i7); }
.cn-waits { list-style: none; }
.cn-wait { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--i14); }
.cn-wait:last-child { border-bottom: 0; }
.cn-talk { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--i16); }
.cn-phone { font-family: 'DM Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: .04em; color: var(--accent); }

/* ------------------------------------------------- 05. the request ----- */
.cn-req { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 26vw, 340px); gap: clamp(20px, 2.6vw, 40px); }
.cn-req-form { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 20px); min-width: 0; }
.cn-onair { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cn-onair .push { white-space: nowrap; }
.cn-req-row { align-items: flex-end; gap: 12px; }
.cn-field--wide { flex: 1 1 260px; }
.cn-field--s { flex: 1 1 160px; }
.cn-queue-b { flex: none; padding: 14px 20px; }

.cn-line { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 18px; border: 1px solid var(--i16); }
.cn-line-h { display: flex; align-items: baseline; gap: 10px; }
.cn-qs { display: flex; flex-direction: column; gap: 11px; list-style: none; }
.cn-q { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--i14); color: var(--i45); }
.cn-q-t { min-width: 0; font: 400 14px / 1.35 Archivo, sans-serif; color: var(--i78); }
.cn-q--on { color: var(--accent); }
.cn-q--on .cn-q-t { color: var(--ink); }

/* -------------------------------------------------- 06. who answers ---- */
.cn-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(14px, 1.8vw, 24px); list-style: none; }
.cn-person { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--i16); }
.cn-person--on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
/* the portraits ship with the template; the hatching stays as the backing */
.cn-face { position: relative; display: block; aspect-ratio: 4 / 5; background: repeating-linear-gradient(135deg, var(--i10) 0 10px, var(--i16) 10px 20px); }
.cn-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-person-b { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.cn-role { color: var(--i45); }
.cn-person--on .cn-role, .cn-person--on .cn-person-m { color: var(--accent); }
.cn-person-n { font: 700 19px / 1.1 'Bricolage Grotesque', sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.cn-person-m { font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; line-height: normal; letter-spacing: .04em; color: var(--i7); word-break: break-word; }

/* --------------------------------------- 07. paperwork and press kit --- */
.cn-press { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }
/* the hairlines between the facts are the grid's own background */
.cn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--i14); list-style: none; }
.cn-fact { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--paper); }
.cn-fact-n { font: 800 clamp(24px, 2.6vw, 34px) / 1 Orbitron, sans-serif; }
.cn-fact--on .cn-fact-n { color: var(--accent); }

.cn-desc { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 18px 20px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cn-desc-b { display: flex; flex-direction: column; gap: 7px; flex: 1 1 420px; min-width: 0; }
.cn-desc-x { font: 400 clamp(16px, 1.8vw, 21px) / 1.45 'Instrument Serif', serif; font-style: italic; text-wrap: pretty; }
.cn-copy { flex: none; padding: 12px 16px; border: 1px solid var(--accent); background: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: normal; color: var(--accent); white-space: nowrap; cursor: pointer; }
.cn-copy:hover { background: var(--accent); color: #fff; }

.cn-kit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 40px); align-items: start; }
.cn-files-col, .cn-found-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.cn-files { border-top: 1px solid var(--i28); list-style: none; }
.cn-file { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--i14); color: var(--i45); }
.cn-file:last-child { border-bottom: 0; }
.cn-file:hover { border-bottom-color: var(--accent); }
.cn-file--on { color: var(--accent); }
.cn-file-t { font: 600 15px / 1.3 Archivo, sans-serif; color: var(--ink); }
.cn-all { border: 0; background: none; text-align: left; cursor: pointer; }
.cn-all:hover { color: var(--accent); }

.cn-found-card { display: flex; flex-direction: column; gap: 11px; padding: 18px; border: 1px solid var(--i18); }
.cn-founds { display: flex; flex-direction: column; gap: 11px; list-style: none; }
.cn-found { display: grid; grid-template-columns: clamp(74px, 9vw, 104px) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cn-found-v { font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.6; border-bottom: 1px dotted var(--i28); word-break: break-all; }
.cn-found-f { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 11px; border-top: 1px solid var(--i14); }
.cn-copy-s { border: 0; background: none; cursor: pointer; }

.cn-follow-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--i16); }
.cn-follows { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.cn-follow { padding: 8px 11px; border: 1px solid var(--i2); background: none; font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; line-height: normal; color: var(--i75); cursor: pointer; }
.cn-follow:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------- 08. responsive ------ */
@media (max-width: 1100px) {
  .cn-reach, .cn-studio, .cn-form-grid, .cn-req, .cn-kit { grid-template-columns: minmax(0, 1fr); }
  .cn-rail { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--i16); }
  .cn-hours { margin-top: 18px; }
}

@media (max-width: 760px) {
  .cn-sec--last { padding-bottom: 40px; }
  .cn-ways, .cn-people { grid-template-columns: minmax(0, 1fr); }
  .cn-go { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cn-queue-b, .cn-copy { align-self: flex-start; }
  .cn-frame { height: 300px; }
}