/* Continental Radio — brass, walnut and lamplight. Written mobile-first: the base rules are the phone, and the min-width blocks add the room a desk gets. Palette is polished brass and copper over deep walnut, parchment for anything you actually read at length, verdigris and oxblood for signals. Logo: Limelight (the wordmark, and NOTHING else — its capital G reads as a C). Display: Playfair Display. Body: Libre Caslon Text. Utility: Oswald. No images, no libraries — every rivet is a gradient. */ :root { /* --- the woods and the metals ---------------------------------- */ --walnut-deep: #1e140d; --walnut: #2c1d13; --walnut-lit: #3f2a1a; --mahogany: #4a2c19; --brass: #d9b978; --brass-lit: #f7e5b6; --brass-dark: #8a6f3c; --copper: #c1743c; --copper-lit: #e39a5c; --verdigris: #4f8f80; --verdigris-lit: #7cc0ad; --oxblood: #7b2f2a; --oxblood-lit: #bb4d3f; --amber: #f5a93c; --filament: #ffd489; --ivory: #f7eeda; --ivory-dim: #ddcaa4; --parchment: #f2e5c6; --parchment-deep: #e0cda4; --ink: #33220f; /* --- the cabinet's geometry ------------------------------------ Every panel on the station is cut from this one set of parts, so nothing reads as if it came out of a different workshop. The apparatus is the reference: its case, its panels, its keys. */ --r-case: 10px; /* an outer case (apparatus, dial, card) */ --r-panel: 7px; /* a panel screwed into a case */ --r-key: 6px; /* keys, chips, fields, tabs */ --r-glass: 4px; /* anything sitting behind glass */ --edge-lit: #7d6435; /* the lit edge of a brass panel */ --edge-dark: #4b3a1c; /* the shadowed edge of a fitting */ --lip: inset 0 1px 0 rgba(255, 240, 200, 0.32); --floor: inset 0 -18px 30px rgba(0, 0, 0, 0.45); --lift: 0 12px 30px rgba(0, 0, 0, 0.6); --lift-low: 0 5px 14px rgba(0, 0, 0, 0.5); --recess: inset 0 2px 6px rgba(0, 0, 0, 0.6); --key-lift: 0 3px 0 var(--edge-dark), 0 5px 9px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 245, 215, 0.8); --lamp: 0 0 14px rgba(245, 169, 60, 0.4); /* --- shared decoration ----------------------------------------- */ --rivet: radial-gradient(circle, var(--brass-lit) 0 1.2px, #b99a5e 1.3px 2.5px, #5f4a26 2.6px 3.3px, transparent 3.4px); --etch: repeating-linear-gradient(45deg, rgba(255, 236, 200, 0.022) 0 2px, transparent 2px 7px); --brass-face: linear-gradient(180deg, var(--brass-lit) 0%, var(--brass) 24%, #a98b4e 68%, #7a6132 100%); /* The wordmark's face, used by the wordmark alone. */ --logo: "Limelight", "Georgia", serif; --display: "Playfair Display", "Libre Caslon Text", "Georgia", serif; --body: "Libre Caslon Text", "Georgia", serif; --utility: "Oswald", "Arial Narrow", sans-serif; } * { box-sizing: border-box; } /* Controls do NOT inherit a font in any browser — left alone they fall back to the UA's Arial, which is the one face that has no business on this station. Every control starts in the house utility gothic and every field in the house text face; individual rules refine from there. */ button, select, ::file-selector-button { font-family: var(--utility); } input, textarea { font-family: var(--body); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; /* clip, not hidden: `hidden` would turn into a scroll container, and the full-bleed stage needs the page to keep owning the scroll. */ overflow-x: clip; background: radial-gradient(130% 70% at 50% -8%, rgba(193, 116, 60, 0.22) 0%, transparent 62%), radial-gradient(90% 60% at 100% 108%, rgba(79, 143, 128, 0.10) 0%, transparent 70%), linear-gradient(180deg, #33200f 0%, var(--walnut-deep) 46%, #130c08 100%); background-attachment: scroll; color: var(--ivory); font-family: var(--body); font-size: 17px; line-height: 1.6; } a { color: var(--amber); text-decoration: none; } a:hover { color: var(--copper-lit); } :focus-visible { outline: 2px solid var(--filament); outline-offset: 3px; border-radius: 2px; } /* Playfair carries every title unless a rule says otherwise (the utility gothic takes the small-caps legends, and Limelight is the wordmark's alone). A heading that forgets to ask still gets the right face. */ h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0 0 0.4em; } /* Engraved plate lettering: cut into the metal, lit from above. */ h1, .hero-title, .plate-title, .wordmark-continental { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 -1px 0 rgba(255, 226, 170, 0.10); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [hidden] { display: none !important; } /* Parchment: the reading surfaces. Ink on paper, never ivory on wood. Same radius and brass edge as every other panel on the set — the difference is the material, not the joinery. */ .prose, .letter, .empty-state { background: repeating-linear-gradient(0deg, rgba(120, 90, 50, 0.035) 0 1px, transparent 1px 3px), linear-gradient(168deg, var(--parchment) 0%, var(--parchment-deep) 100%); color: var(--ink); border: 1px solid var(--brass-dark); border-radius: var(--r-key); padding: 1.1rem 1.15rem; box-shadow: var(--lift-low), inset 0 0 34px rgba(150, 110, 60, 0.20), inset 0 1px 0 rgba(255, 250, 235, 0.7); } .prose a, .letter a, .empty-state a { color: #8a3d16; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .prose a:hover, .letter a:hover { color: var(--oxblood); } /* ------------------------------------------------------------ masthead */ /* The top rail of the cabinet: walnut, a machined brass edge, and the same rivets that hold the apparatus together. */ .masthead { position: relative; /* One rail normally; the smallest phones stack logo and keys. */ display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; padding: 0.6rem 0.7rem 0.7rem; border-bottom: 1px solid #120b06; background: var(--etch), linear-gradient(180deg, #4b3120 0%, var(--walnut) 78%, #241710 100%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), var(--lip); } /* The brass rail along the bottom edge, with a rivet at each end — the same joint as the stage's rule below the cabinet. */ .mast-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--brass-dark), var(--brass) 18%, var(--brass-lit) 50%, var(--brass) 82%, var(--brass-dark)); } .mast-rail::before, .mast-rail::after { content: ""; position: absolute; top: -4px; width: 8px; height: 8px; background-image: var(--rivet); background-size: 8px 8px; } .mast-rail::before { left: 0.55rem; } .mast-rail::after { right: 0.55rem; } .wordmark { display: flex; flex-direction: column; line-height: 1; flex: none; } .wordmark-continental { font-family: var(--logo); font-size: 1.18rem; color: var(--ivory); letter-spacing: 0.03em; } .wordmark-radio { font-family: var(--utility); font-size: 0.78rem; letter-spacing: 0.52em; color: var(--brass); margin-top: 0.2rem; padding-left: 0.15em; } .wordmark:hover .wordmark-continental { color: var(--amber); } .mast-nav { display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; white-space: nowrap; font-family: var(--utility); font-size: 0.8rem; letter-spacing: 0.07em; text-transform: uppercase; margin-left: auto; } /* Text links in the share sheet keep the rail's lit-ivory treatment. */ .mast-nav a, .mast-nav .nav-plain { color: var(--ivory); padding: 0.35rem 0.3rem; display: inline-flex; align-items: center; min-height: 44px; box-shadow: inset 0 -1px 0 transparent; } /* The SHARE trigger is a