/* ============================================================================ base.css — Beatles Answers (v9) ---------------------------------------------------------------------------- This file controls the look of EVERY page (typography, colors, layout, cards, tables, footer). It is loaded first; images.css runs on top of it. HOW THIS FILE IS ORGANIZED (read top to bottom): 1. Design tokens — colors, fonts, sizes you'll probably want to tweak 2. Reset + base — default styling for , ,

3. Hero / infobox — the page-top title block + Wikipedia-style sidebar 4. Essay + charts — body copy, section headings, embedded charts 5. Cards + lists — track listings, related-link cards, tags, badges 6. Mobile rules — overrides for narrow screens (max-width 780px) 7. v4 additions — compact home hero, slow-scroll carousel 8. v5 style overlay— classy serif headings, soft shadows, rounded cards BEGINNER TIPS: • To change site-wide colors, edit the variables in :root { ... } below. • To change a font, edit --font or --font-headline in :root. • CSS is "cascade" — later rules override earlier ones. The v5 overlay block near the bottom intentionally overrides some v4 / base values. • Don't delete sections; if a class isn't used, it just sits idle. ============================================================================ */ /* ---- 1. DESIGN TOKENS (CSS custom properties / variables) ------------------ Change these to re-skin the site. Anywhere you see var(--bg) etc. below, the value here is what gets used. ---------------------------------------------------------------------------- */ :root{ --bg:#f6f4ee; /* page background (off-white, paper feel) */ --paper:#ffffff; /* card / infobox background */ --ink:#202122; /* body text color */ --ink-soft:#54595d; /* secondary text (captions, meta) */ --rule:#c8c8c8; /* hairline border color */ --rule-soft:#e8e6e0; /* lighter border (table row dividers) */ --link:#3366cc; /* link blue */ --link-visited:#795cb2; /* visited-link purple */ --accent:#a82820; /* brand accent — gets overridden per page by the data-palette attribute in images.css */ --accent-soft:#a8282010; /* same accent at ~6% opacity (transparent fill) */ --font:'Inter','Helvetica Neue','Liberation Sans','Arial',sans-serif; } /* ---- 2. RESET + BASE TYPOGRAPHY ------------------------------------------- */ *{box-sizing:border-box} /* sane sizing */ html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.65;font-size:15.5px;-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} a:visited{color:var(--link-visited)} /* Sticky site header (the bar with brand + nav at the top of every page). */ header.site{background:var(--paper);border-bottom:1px solid var(--rule);padding:.55rem 1rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;position:sticky;top:0;z-index:100} header.site .brand{font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:.01em} header.site .brand:hover{color:var(--accent);text-decoration:none} header.site nav{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:.85rem;margin-left:auto} header.site nav a{color:var(--ink-soft)} header.site nav a:hover{color:var(--accent);text-decoration:none} /* Page container — wraps all main content, centered, max width ~1180px. */ .container{max-width:1180px;margin:0 auto;padding:1.4rem 1.4rem 4rem} .crumbs{font-size:.78rem;color:var(--ink-soft);margin-bottom:.4rem} .crumbs a{color:var(--ink-soft)} /* ---- 3. HERO BLOCK (page-top title + tagline) ----------------------------- */ .hero{padding:0 0 1rem;margin:0 0 1.2rem;border-bottom:1px solid var(--rule)} .hero .top-band{height:5px;background:var(--accent);margin:0 -1.4rem 1rem} /* coloured strip at very top */ .hero h1{margin:.2rem 0 .3rem;font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-.01em} .hero .subhead{font-size:.95rem;color:var(--ink-soft);margin:0 0 .25rem} .hero .era-tone{font-size:.85rem;color:var(--ink-soft);font-style:italic;opacity:.85} /* Wikipedia-style infobox — floats right on desktop, full-width on mobile. */ .infobox{float:right;width:320px;margin:0 0 1rem 1.6rem;background:var(--paper);border:1px solid var(--rule);font-size:.85rem;line-height:1.45} .infobox .ib-title{background:var(--accent);color:#fff;padding:.6rem .8rem;font-weight:700;font-size:.9rem;text-align:center} .infobox .ib-cover{padding:.7rem;text-align:center;background:var(--bg)} .infobox .ib-cover img{max-width:100%;height:auto;border:1px solid var(--rule)} .infobox table{width:100%;border-collapse:collapse} .infobox th,.infobox td{padding:.45rem .6rem;border-bottom:1px solid var(--rule-soft);vertical-align:top;text-align:left} .infobox th{width:38%;color:var(--ink-soft);font-weight:600;font-size:.8rem;background:var(--bg)} .infobox .ib-section-h{padding:.4rem .6rem;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--rule-soft)} .infobox .ib-foot{padding:.5rem .7rem;font-size:.75rem;color:var(--ink-soft);background:var(--bg);text-align:center} /* ---- 4. ESSAY LAYOUT (generous body type, drop cap on first paragraph) --- */ .lead-paragraph{font-size:1.06rem;margin:.4rem 0 1rem;max-width:68ch;color:var(--ink);font-weight:400} .essay{max-width:70ch;font-size:1rem;line-height:1.75} .essay p{margin:.7rem 0 1rem} .essay p:first-of-type::first-letter{font-size:2.4em;float:left;line-height:.95;padding:.05em .12em 0 0;font-weight:700;color:var(--accent)} /* drop cap */ .essay-section{margin:1.8rem 0 1rem} .essay-section h2{font-size:1.18rem;font-weight:700;border-bottom:1px solid var(--rule);padding-bottom:.4rem;margin:0 0 .9rem} /* "Distinctive" pull-quote / highlight box — uses the accent color softly. */ .distinctive{margin:1rem 0 1.4rem;padding:.85rem 1.1rem;background:var(--accent-soft);border-left:3px solid var(--accent);font-size:.95rem;border-radius:0 4px 4px 0} .distinctive h3{margin:0 0 .35rem;font-size:.78rem;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;font-weight:700} /* Generic section / subsection headings used outside .essay. */ h2.section{font-size:1.18rem;font-weight:700;border-bottom:1px solid var(--rule);padding-bottom:.4rem;margin:1.8rem 0 .9rem} h3.subsection{font-size:1rem;font-weight:600;margin:1.2rem 0 .5rem} /* ---- 4b. CHARTS GRID + INFOGRAPHIC TILES (.ig) ---------------------------- */ .charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1rem 0 1.5rem;clear:both} .charts-grid .ig{margin:0} .ig{background:var(--paper);border:1px solid var(--rule);padding:.85rem 1rem;font-size:.85rem;border-radius:2px} .ig figcaption{font-size:.78rem;color:var(--ink-soft);margin-bottom:.55rem;font-weight:500} .ig svg{display:block;width:100%;height:auto} .ig-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center} .ig-legend{display:grid;grid-template-columns:1fr;gap:.2rem;font-size:.78rem;flex:1;min-width:140px} .leg-row{display:flex;align-items:center;gap:.4rem} .leg-swatch{width:11px;height:11px;border-radius:2px;display:inline-block;border:1px solid rgba(0,0,0,.1)} .leg-val{margin-left:auto;color:var(--ink-soft)} .ig-sub{font-size:.74rem;color:var(--ink-soft);margin-top:.4rem;font-style:italic} /* Personnel "chips" row — small pills showing who played on a track. */ .beatlerow{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1rem} .beatlerow .who{display:inline-flex;align-items:center;gap:.35rem;background:var(--paper);border:1px solid var(--rule);padding:.22rem .55rem;border-radius:3px;font-size:.78rem} /* Key/value table — used for "Studio: EMI Abbey Road, Take 7..." style. */ table.kv{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--paper);border:1px solid var(--rule)} table.kv th,table.kv td{padding:.42rem .65rem;border-bottom:1px solid var(--rule-soft);text-align:left;vertical-align:top} table.kv th{width:30%;color:var(--ink-soft);font-weight:600;background:var(--bg)} /* Pull-quote with optional .cite (attribution). */ .quote{margin:1rem 0;padding:.7rem 1rem;background:var(--paper);border-left:3px solid var(--ink-soft);font-style:italic;font-size:.92rem} .quote .cite{display:block;margin-top:.4rem;font-style:normal;font-size:.78rem;color:var(--ink-soft)} /* References / badges / tags / related-links / tracklist / cards / search */ .refs-section{margin-top:2rem;padding-top:.6rem;border-top:1px solid var(--rule)} .badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0} .badge{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .6rem;border:1px solid var(--rule);background:var(--paper);font-size:.78rem;color:var(--ink);border-radius:3px;text-decoration:none} .badge:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .badge-affiliate{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600} /* highlight Amazon/affiliate links */ .related{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.4rem;margin-top:.4rem} .related a{display:block;padding:.35rem .5rem;background:var(--paper);border:1px solid var(--rule);border-radius:3px;font-size:.83rem;color:var(--ink)} .related a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .tag{display:inline-block;padding:.12rem .45rem;background:var(--paper);border:1px solid var(--rule);border-radius:3px;font-size:.7rem;margin:.08rem .12rem .08rem 0;color:var(--ink-soft)} .tracklist{list-style:none;padding:0;margin:.4rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.15rem .8rem} .tracklist li{padding:.35rem .5rem;border-bottom:1px solid var(--rule-soft);font-size:.88rem;display:flex;justify-content:space-between;gap:.8rem} .tracklist li .meta{color:var(--ink-soft);font-size:.76rem} .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem} .card{display:block;background:var(--paper);border:1px solid var(--rule);padding:.9rem;color:var(--ink);text-decoration:none;border-radius:2px} .card:hover{border-color:var(--accent)} .card .ttl{font-weight:700;margin-bottom:.2rem} .card .meta{font-size:.78rem;color:var(--ink-soft)} .card .cover{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:.6rem;border:1px solid var(--rule)} .icons{display:inline-flex;gap:.2rem;align-items:center;vertical-align:middle} .search-box input{width:100%;padding:.65rem .9rem;background:var(--paper);border:1px solid var(--rule);font-size:.95rem;font-family:inherit;border-radius:3px} .adblock{margin:1.5rem 0;padding:.5rem;border:1px dashed var(--rule);text-align:center;color:var(--ink-soft);font-size:.74rem;border-radius:2px} /* legacy ad placeholder; hidden by v4 below */ footer.site{padding:2rem 1.4rem 1.5rem;text-align:center;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--rule);margin-top:3rem;background:var(--paper)} footer.site p{max-width:780px;margin:0 auto .5rem} .toc{background:var(--paper);border:1px solid var(--rule);padding:.7rem 1rem;font-size:.85rem;margin:1rem 0 1.6rem;border-radius:2px;max-width:520px;position:relative} .toc h4{margin:0 0 .35rem;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)} .toc ul{margin:0;padding-left:1.1rem;line-height:1.55} .toc-badge{position:absolute;top:.45rem;right:.6rem;display:block;line-height:0;opacity:.9} /* "See also" — related song recommendations and cross-references. */ .see-also{margin:2rem 0 1.5rem;padding:1rem;background:var(--paper);border:1px solid var(--rule);border-radius:2px} .see-also-hint{font-size:.78rem;color:var(--ink-soft);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600} .see-also-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .see-also-songs{list-style:none;padding:0;margin:0} .see-also-songs li{margin:.4rem 0} .see-also-songs a{display:block;padding:.4rem .5rem;background:var(--bg);border:1px solid var(--rule);border-radius:2px;font-size:.88rem;color:var(--ink);text-decoration:none} .see-also-songs a:hover{border-color:var(--accent);color:var(--accent)} .see-also-context{list-style:none;padding:0;margin:0} .see-also-context li{margin:.4rem 0;font-size:.84rem} .see-also-context a{color:var(--link)} .see-also-context a:hover{color:var(--accent)} /* ---- 5. MOBILE OVERRIDES (screens 780px or narrower) ---------------------- */ @media (max-width:780px){ .container{padding:1rem .9rem 3rem} .infobox{float:none;width:100%;margin:0 0 1rem} /* infobox stacks on top instead of floating */ header.site nav{font-size:.76rem;gap:.55rem;margin-left:0;width:100%} .charts-grid{grid-template-columns:1fr} .tracklist{grid-template-columns:1fr} .essay{font-size:.98rem} } /* ============================================================================ 6. v4 ADDITIONS — compact home hero + slow horizontal carousel ============================================================================ */ :root{ --hero-h1: clamp(1.4rem, 2.8vw, 1.95rem); /* responsive title size */ --tagline: clamp(0.95rem, 1.6vw, 1.05rem); } .hero h1{font-size:var(--hero-h1)} .hero .subhead{font-size:var(--tagline)} .brand-mark{display:inline-flex;align-items:center;gap:.45rem} .brand-mark .glyph{width:22px;height:22px} /* Compact home hero (used on the homepage index.html). */ .home-hero{padding:1rem 0 .8rem;text-align:center;border-bottom:1px solid var(--rule);margin:0 0 1rem} .home-hero h1{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:.1rem 0 .15rem;letter-spacing:-.01em} .home-hero .tag{font-size:1rem;color:var(--ink-soft);font-style:italic;margin:0 0 .4rem} .home-hero .stat{font-size:.78rem;color:var(--ink-soft);opacity:.85} /* Slow horizontal carousel — animates from right to left forever; pauses on hover. Respects users who prefer reduced motion (rule near end of this block). */ .carousel{overflow:hidden;position:relative;margin:.6rem 0 1rem;border:1px solid var(--rule);background:var(--paper);border-radius:4px;padding:.5rem} .carousel:hover .car-track{animation-play-state:paused} .car-track{display:flex;gap:.7rem;width:max-content;animation:scroll 60s linear infinite} /* 60s = full loop time */ .car-card{flex:0 0 220px;background:var(--bg);border:1px solid var(--rule);padding:.55rem .7rem;text-decoration:none;color:var(--ink);border-radius:3px;font-size:.84rem} .car-card:hover{border-color:var(--accent);text-decoration:none} .car-card .ttl{font-weight:600;margin-bottom:.15rem} .car-card .meta{font-size:.72rem;color:var(--ink-soft)} .car-card img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:.4rem;border:1px solid var(--rule);border-radius:2px} @keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} /* -50% works because tracks are duplicated twice */ } @media (prefers-reduced-motion: reduce){ .car-track{animation:none} /* accessibility — kill the scroll */ } /* Hero with album thumbnail next to title (used on song pages). */ .hero-thumb-row{display:flex;gap:1rem;align-items:flex-start} .hero-thumb{width:84px;height:84px;flex:0 0 84px;border:1px solid var(--rule);border-radius:3px;object-fit:cover;background:var(--bg)} .hero-thumb-row .hero-meta{flex:1;min-width:0} @media (max-width:520px){.hero-thumb{width:64px;height:64px;flex-basis:64px}} /* Tighter chart grid to reduce whitespace. */ .charts-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.75rem} .charts-grid .ig{padding:.65rem .8rem} .charts-grid figcaption{margin-bottom:.4rem} /* Suppress the legacy adblock placeholder entirely (replaced by .adsense-spot). */ .adblock{display:none !important} /* Ad-friendly content frame helper used to mark good auto-ad spots. */ .adsense-spot{margin:1.2rem 0} /* Footer mini-nav (Privacy / Terms / Contact) on legal pages. */ footer.site .legal-row{margin-top:.35rem;font-size:.74rem} footer.site .legal-row a{color:var(--ink-soft);margin:0 .3rem} footer.site .legal-row a:hover{color:var(--accent)} /* ============================================================================ 7. v5 STYLE OVERLAY — classy and quiet ---------------------------------------------------------------------------- This block RE-DEFINES many of the design tokens above (warmer cream background, softer rule color, serif headlines, rounded corners, shadows). Because it's later in the file, it WINS the cascade. To revert to v1 look, you could comment this whole block out. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap'); :root{ --bg:#f7f5ef; /* slightly warmer cream than v1 */ --paper:#ffffff; --ink:#1f2123; --ink-soft:#5a6066; --rule:#dcd8ce; --rule-soft:#ece8de; --link:#33558e; /* deeper, less saturated blue */ --link-visited:#735aa6; --shadow-sm: 0 1px 2px rgba(20,18,12,.04), 0 1px 3px rgba(20,18,12,.05); --shadow-md: 0 2px 6px rgba(20,18,12,.06), 0 6px 18px rgba(20,18,12,.08); --shadow-lg: 0 6px 24px rgba(20,18,12,.10); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --font:'Inter','Helvetica Neue','Liberation Sans','Arial',sans-serif; --font-headline:'Source Serif 4','Source Serif Pro','Georgia',serif; } html,body{font-feature-settings:"ss01","cv11"; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} body{font-size:16px;line-height:1.7} /* Headlines switch to the editorial serif (Source Serif 4). */ h1,h2,h3{font-family:var(--font-headline);letter-spacing:-.005em} h2.section{font-family:var(--font-headline);font-weight:600;border-bottom-color:var(--rule);font-size:1.24rem} .hero h1{font-family:var(--font-headline);font-weight:700;letter-spacing:-.012em} .essay-section h2{font-family:var(--font-headline)} .distinctive h3{font-family:var(--font)} /* .distinctive subtitle stays in Inter */ /* Site header — gentler border, comfortable padding, search slot at right. */ header.site{padding:.7rem 1.2rem;border-bottom:1px solid var(--rule);box-shadow:var(--shadow-sm);gap:1.2rem} header.site .brand{font-family:var(--font-headline);font-weight:700;font-size:1.1rem} header.site nav{font-size:.86rem;gap:1.05rem} header.site .header-search{order:99;width:240px;max-width:32vw} @media (max-width:780px){ header.site .header-search{width:100%;max-width:none;order:99} } .header-search input, .header-search .gsc-search-box{background:var(--bg);border:1px solid var(--rule);border-radius:999px;padding:.45rem .85rem;font-size:.85rem;width:100%} .header-search input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)} /* Round + soft-shadow ALL the major panels in one go. */ .card, .related a, .badge, .toc, .infobox, .ig, .tracklist li, .car-card, .adblock, table.kv, .search-box input, .distinctive, .quote, .carousel{ border-radius:var(--radius-md); } .tracklist li{border-radius:var(--radius-sm);padding:.4rem .65rem;border-bottom:1px solid var(--rule-soft)} /* Per-component shadow / hover lift tuning. */ .card{box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;border-color:var(--rule)} .card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--accent)} .card .cover{border-radius:var(--radius-sm)} .related a{box-shadow:var(--shadow-sm);transition:box-shadow .18s ease, border-color .18s ease;background:var(--paper);font-size:.86rem;padding:.45rem .65rem} .related a:hover{box-shadow:var(--shadow-md)} .badge{box-shadow:var(--shadow-sm);transition:box-shadow .18s ease} .badge:hover{box-shadow:var(--shadow-md)} .infobox{box-shadow:var(--shadow-md);overflow:hidden;border-color:var(--rule)} .infobox .ib-cover img{border-radius:var(--radius-sm)} .toc{box-shadow:var(--shadow-sm);background:var(--paper);border-color:var(--rule)} .ig{box-shadow:var(--shadow-sm);border-color:var(--rule);background:var(--paper)} .distinctive{border-radius:var(--radius-md);box-shadow:var(--shadow-sm)} .quote{border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)} .carousel{box-shadow:var(--shadow-sm);border-color:var(--rule)} .car-card{box-shadow:var(--shadow-sm)} .car-card:hover{box-shadow:var(--shadow-md)} /* Hero refinement — drop the bottom rule, raise the top band slightly. */ .hero{border-bottom:none;padding:1rem 0 .6rem} .hero .top-band{height:4px;border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0 -1.4rem 1rem;opacity:.9} .hero .subhead,.hero .era-tone{color:var(--ink-soft)} /* Home hero — used only on index.html. Big rounded card with serif title. */ .home-hero{padding:1.4rem 1rem 1rem;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:1.2rem} .home-hero h1{font-family:var(--font-headline);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;letter-spacing:-.014em;margin:.05rem 0 .2rem} .home-hero .tag{font-family:var(--font-headline);font-style:italic;color:var(--ink-soft);font-size:1.05rem;margin:0 0 .5rem} .home-hero .stat{font-size:.78rem;color:var(--ink-soft)} /* Body text smoothing — essays use Inter at slightly larger size. */ .essay p{font-family:var(--font);font-size:1.02rem;line-height:1.78;color:var(--ink)} .lead-paragraph{font-family:var(--font);font-size:1.08rem} /* Ad-spot wrapper styled to match cards. AdSense paints over this; the "Advertisement" label below is required by Google policy on auto-ads. */ .adsense-spot{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-md);min-height:90px;padding:.6rem;box-shadow:var(--shadow-sm)} .adsense-spot::after{content:"Advertisement";display:block;font-size:.7rem;color:var(--ink-soft);text-align:center;letter-spacing:.04em;text-transform:uppercase;opacity:.55;margin-top:.3rem} footer.site{background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -1px 0 var(--rule-soft) inset} /* Keyboard focus ring — accessibility. Don't remove without a replacement. */ a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* Dedicated /search/ page styling — matches the Google CSE widget. */ .search-hero{padding:1.4rem 1rem;text-align:center;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-md);margin-bottom:1.2rem} .search-hero h1{font-family:var(--font-headline);font-size:clamp(1.6rem,2.5vw,2rem);margin:.1rem 0 .4rem} .search-hero p{color:var(--ink-soft);margin:0 0 1rem} .gsc-control-cse, .gsc-control-cse *{font-family:var(--font) !important} .gsc-input-box{border:1px solid var(--rule) !important;border-radius:999px !important;background:var(--bg) !important;box-shadow:var(--shadow-sm) !important} .gsc-search-button-v2{background:var(--accent) !important;border-color:var(--accent) !important;border-radius:999px !important;padding:.45rem .85rem !important} .gsc-results-wrapper-overlay{border-radius:var(--radius-lg) !important;box-shadow:var(--shadow-lg) !important} .gsc-result{border-bottom:1px solid var(--rule-soft) !important;padding:.5rem 0 !important} .gs-title, .gs-title b{color:var(--link) !important;font-family:var(--font) !important} /* Tighter chart grid (final override). */ .charts-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem} /* v5 carousel cards — compact, no image, era-accent stripe. */ .carousel{padding:.55rem .55rem} .car-track{gap:.55rem} .car-card{ flex:0 0 220px; min-height:0; height:auto; padding:.65rem .8rem; background:var(--paper); font-size:.85rem; display:flex; flex-direction:column; justify-content:center; gap:.18rem; } .car-card img{display:none !important} /* defensive — kill any leftover img */ .car-card .ttl{font-weight:600;font-size:.92rem;line-height:1.25;margin:0;color:var(--ink)} .car-card .meta{font-size:.74rem;color:var(--ink-soft);margin:0} .car-card .meta-sub{font-size:.7rem;color:var(--ink-soft);opacity:.78;margin:0;font-style:italic} /* ============================================================================ v10: FAQ section (

accordion) + ad-slot wrapper ============================================================================ */ .faq-section{margin:1.6rem 0 .6rem} .faq-section .faq-item{ border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--paper); margin:.4rem 0; padding:.45rem .8rem; box-shadow:var(--shadow-sm); } .faq-section .faq-item summary{ cursor:pointer; font-weight:600; font-size:.95rem; color:var(--ink); list-style:none; padding:.15rem 0; } .faq-section .faq-item summary::-webkit-details-marker{display:none} .faq-section .faq-item summary::before{ content:"+"; display:inline-block; width:1.05em; color:var(--accent); font-weight:700; } .faq-section .faq-item[open] summary::before{content:"−"} .faq-section .faq-item p{margin:.35rem 0 .2rem;font-size:.93rem;color:var(--ink)} /* ============================================================================ v10: Homepage retention modules — Song of the day + New in this edition ============================================================================ */ .home-modules{ display:grid; grid-template-columns:1fr 1.4fr; gap:1rem; margin:0 0 1.4rem; } @media (max-width:780px){ .home-modules{grid-template-columns:1fr} } .home-modules .mod{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius-md); padding:1rem 1.1rem; box-shadow:var(--shadow-sm); } .home-modules .mod-h{ font-family:var(--font-headline); font-size:1.05rem; font-weight:700; margin:0 0 .4rem; color:var(--ink); letter-spacing:-.005em; } .home-modules .mod-sotd .mod-sub{ font-size:1.08rem; line-height:1.4; margin:.2rem 0 .55rem; color:var(--ink); } .home-modules .mod-sotd .mod-meta{color:var(--ink-soft); font-style:italic; font-size:.92rem} .home-modules .mod-cta{ display:inline-block; font-size:.86rem; font-weight:600; color:var(--accent); text-decoration:none; } .home-modules .mod-cta:hover{text-decoration:underline} .home-modules .mod-list{margin:.2rem 0 0; padding-left:1.1rem; font-size:.9rem; line-height:1.55} .home-modules .mod-list li{margin:.18rem 0; color:var(--ink)} /* ============================================================================ v10: New section types (Release context, Track-by-track context) ============================================================================ */ #release-context .essay p, #track-context .essay p { font-size:1rem; line-height:1.72 } .track-context-list{ list-style:none; padding:0; margin:.4rem 0; } .track-context-list li{ padding:.55rem .75rem .55rem 1rem; border-left:3px solid var(--accent-soft); background:var(--paper); margin:.45rem 0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; box-shadow:var(--shadow-sm); font-size:.95rem; line-height:1.55; } .track-context-list li:hover{ border-left-color:var(--accent) } .track-context-list li em{ color:var(--ink) } /* ============================================================================ v10.1: Home modules tweak — when nested INSIDE .home-hero card, restore left-alignment + space them out from the dropdown above. ============================================================================ */ .home-hero .home-modules{ margin:1.2rem 0 .2rem; text-align:left; } .home-hero .home-modules .mod{ box-shadow:none; /* parent card already has shadow; avoid double-shadow */ border-color:var(--rule-soft); background:var(--bg); } @media (max-width:780px){ .home-hero .home-modules{ margin-top:.9rem } }