/* =========================================================================== MOBILE PAGE OVERRIDES (≤720px) --------------------------------------------------------------------------- Per-page-CSS mobile additions live here in one shared file rather than being scattered across surveillance.css, dossier.css, transmit.css. Linked AFTER the page-specific CSS in each HTML so it wins. transmission.css has its mobile rules inline already (it was the first page we did); the others use this file. =========================================================================== */ @media (max-width: 720px) { /* ===================================================================== DOSSIER PAGE ===================================================================== */ .hero--dossier { min-height: auto; } .hero--dossier .hero__content { min-height: auto; padding-top: 70px; padding-bottom: 40px; } .dossier-archive { padding: 0 16px 60px 16px; } /* Org file + personnel dossiers — both share spacing reductions */ .organization-file, .personnel-dossier { padding: 48px 0; } .organization-file__tx, .personnel-dossier__file { font-size: 11px; } .organization-file__stamp, .personnel-dossier__classification { font-size: 10px; letter-spacing: 0.18em; } /* The "Bombring is standard." inscription — scale to phone */ .organization-file__statement { font-size: clamp(18px, 6vw, 26px); padding: 20px 0 24px 0; letter-spacing: 0.06em; } /* Two-column body collapses to single — already handled at 1100px but tighten gap further on phone */ .organization-file__body, .personnel-dossier__body { gap: 28px; } /* Meta rows — two-column with tighter label */ .dossier-meta-row { grid-template-columns: 110px 1fr; gap: 8px; padding: 6px 0; font-size: 10px; } .dossier-meta-label { font-size: 9px; letter-spacing: 0.18em; } .dossier-meta-link { padding: 4px 0; min-height: 32px; display: inline-flex; align-items: center; } /* Portrait sizes down on phone */ .personnel-dossier__portrait { width: 140px; } .personnel-dossier__column-left { gap: 20px; } /* Narrative paragraphs tighten */ .personnel-dossier__narrative, .organization-file__narrative { font-size: 14.5px; line-height: 1.7; } .personnel-dossier__narrative p, .organization-file__narrative p { margin-bottom: 16px; } /* Per-dossier footer — stack on phone */ .personnel-dossier__footer { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 9px; margin-top: 32px; } /* ===================================================================== SURVEILLANCE PAGE ===================================================================== */ /* Interior page hero — let it size naturally */ .hero--interior { min-height: auto; } .hero--interior .hero__content { min-height: auto; padding-top: 70px; padding-bottom: 40px; } /* Surveillance page section header padding */ .surveillance-archive, .broadcast-section, .field-cables-section, [class*="surveillance"] { padding-left: 16px !important; padding-right: 16px !important; } /* Broadcast file rows — tighten padding */ .broadcast-file { padding: 32px 0; } /* The 2×2 still grid Code built — keep 2×2 but tighter */ .broadcast-file__still, .broadcast-stills, [class*="stills"] { gap: 4px; } /* Frame still images may need shrinking */ .broadcast-file__frame img, .broadcast-stills img { width: 100%; height: auto; } /* Field cable rows — stack columns on phone */ .field-cable { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--bomb-iron); } .field-cable__file, .field-cable__location, .field-cable__coord, .field-cable__operator, .field-cable__subject { font-size: 11px; letter-spacing: 0.16em; } .field-cable__subject { color: var(--bomb-ash); font-size: 10px; padding-top: 4px; } /* ===================================================================== TRANSMIT (CONTACT) PAGE ===================================================================== */ /* The communications notice page is mostly typographic — narrow it down, keep the document feel */ .page-transmit { /* page-level adjustments if needed */ } /* The notice container */ .communications-notice, [class*="communications"], [class*="page-transmit"] main { padding-left: 16px !important; padding-right: 16px !important; } /* Section headings */ .communications-notice__heading, [class*="notice__heading"] { font-size: 11px; letter-spacing: 0.22em; } /* Body paragraphs in notice sections */ .communications-notice__body, [class*="notice__body"] { font-size: 14.5px; line-height: 1.7; } /* The email/correspondence link */ .correspondence-channel { font-size: 13px; padding: 6px 0; word-break: break-all; } /* End-of-notice signoff */ .communications-notice__signoff { font-size: 9px; margin-top: 32px; } /* The "i can't fight no more" unfiled line */ .unfiled-line { font-size: 13px; margin-top: 60px; margin-bottom: 32px; } /* Communications routes */ .communications-routes { margin: 32px 0; } .communications-routes a { padding: 10px 0; min-height: 40px; display: inline-flex; align-items: center; } } /* Even tighter — phones below 420px (small Android / iPhone SE territory) */ @media (max-width: 420px) { /* Bandcamp embeds — one more height shrink */ .transmission-playback-unit__embed { min-height: 240px; } .transmission-playback-unit__embed iframe { min-height: 340px; } /* Dossier portrait gets smaller — these are old small JPEGs, scaling them up doesn't help anyway */ .personnel-dossier__portrait { width: 120px; } /* Hero wordmark — drop one more notch */ .hero__wordmark { font-size: clamp(38px, 12vw, 60px); } /* Interior page wordmark */ .hero--interior .hero__wordmark, .hero--transmission .hero__wordmark, .hero--dossier .hero__wordmark { font-size: clamp(34px, 11vw, 56px); } }