:root { color-scheme: light; --paper:#f7f4eb; --paper-deep:#efebdf; --ink:#193a30; --muted:#6d776d; --line:#d9d8cb; --moss:#72865b; --ochre:#b68645; }
/* Callweave mobile-first product system: quiet surfaces, bold hierarchy, one olive signal. */
body { background: #f4f4f2; color: #111; }
.app-shell { background: #f4f4f2; }
.rail { background: #fff; border-color: #e6e6e3; }
.wordmark, h1, .today-hero h2, .today-section h2, .day-card strong { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-weight: 800; letter-spacing: -.055em; }
.wordmark { letter-spacing: -.04em; }
.wordmark i { border-color: #50683c; }
.nav-item.is-active { background: #edf1e8; }
.page { max-width: 900px; }
h1 { color: #111; font-weight: 850; letter-spacing: -.07em; }
.kicker { color: #50683c; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--paper-deep); color:var(--ink); font:16px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif; } button { font:inherit; color:inherit; cursor:pointer; } .app-shell { min-height:100vh; display:grid; grid-template-columns:100px minmax(0,1fr); background:var(--paper); } .rail { border-right:1px solid var(--line); padding:27px 17px 22px; display:flex; flex-direction:column; } .wordmark { font-family:Georgia,serif; font-size:19px; letter-spacing:-.04em; display:flex; align-items:center; gap:7px; } .wordmark i { width:13px; height:13px; display:inline-block; border:1.7px solid var(--moss); border-radius:80% 0 80% 0; transform:rotate(-35deg); } .rail b { display:none; } .rail nav { height:100%; display:flex; flex-direction:column; gap:9px; margin-top:55px; } .nav-item { appearance:none; border:0; background:transparent; width:64px; min-height:58px; display:grid; place-items:center; gap:3px; border-radius:12px; color:var(--muted); } .nav-item svg { width:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .nav-item span { font-size:11px; } .nav-item.is-active { color:var(--ink); background:#e7eadf; } .rail-spacer { flex:1; } .main { min-width:0; } .page { max-width:1080px; margin:0 auto; padding:70px 72px 50px; } .page-title { display:flex; justify-content:space-between; align-items:end; gap:25px; } .kicker { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--moss); margin:0 0 6px; } h1 { font:500 clamp(3rem,7vw,5.5rem)/.95 Georgia,serif; letter-spacing:-.065em; margin:0; } .place-copy { color:var(--muted); margin:9px 0 0; } .place-copy span,.coverage { font-size:13px; color:var(--muted); } .coverage { margin:0 0 7px; white-space:nowrap; } .listening-canvas { min-height:490px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px 0 18px; } .listening-canvas img { width:min(340px,62vw); height:300px; object-fit:contain; } .listening-canvas p { margin:13px 0 0; font-family:Georgia,serif; font-size:19px; } .waveform,.mini-wave { display:flex; align-items:center; justify-content:center; gap:4px; height:60px; } .waveform { width:min(560px,84vw); margin-top:4px; } .waveform i,.mini-wave i { display:block; width:2px; height:var(--h); min-height:3px; background:var(--ink); border-radius:3px; opacity:.85; } .waveform i:nth-child(5n),.mini-wave i:nth-child(5n) { background:var(--ochre); } .quiet-row { display:flex; justify-content:center; gap:38px; border-top:1px solid var(--line); padding-top:21px; } .text-link { border:0; background:transparent; padding:0; font-weight:650; } .text-link span { color:var(--ochre); margin-left:7px; } .archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:58px; } .day-card { text-align:left; min-height:180px; border:1px solid var(--line); background:transparent; padding:20px; border-radius:11px; transition:background .15s; } .day-card:hover { background:#fbfaf5; } .day-card strong,.day-card span { display:block; } .day-card strong { font-family:Georgia,serif; font-size:20px; font-weight:500; margin-top:12px; } .day-card span,.review-item small { color:var(--muted); font-size:13px; margin-top:3px; } .mini-wave { justify-content:flex-start; height:45px; } .review-list { margin-top:55px; max-width:690px; border-top:1px solid var(--line); } .review-item { width:100%; background:transparent; border:0; border-bottom:1px solid var(--line); padding:21px 3px; display:grid; grid-template-columns:16px 1fr auto; gap:15px; text-align:left; align-items:center; } .review-item strong,.review-item small { display:block; } .sound-dot { width:9px; height:9px; border-radius:50%; background:var(--moss); }.sound-dot.ochre { background:var(--ochre); }.place-panel { max-width:530px; margin-top:52px; border-left:2px solid var(--moss); padding:2px 0 2px 22px; color:var(--muted); }.place-panel .text-link { margin-top:18px; color:var(--ink); }.mobile-head,.mobile-nav { display:none; }.modal-backdrop { position:fixed; inset:0; z-index:5; background:#193a3033; display:grid; place-items:center; padding:24px; }.modal { width:min(450px,100%); position:relative; background:var(--paper); padding:34px; border:1px solid var(--line); border-radius:16px; box-shadow:0 22px 80px #112b2380; }.modal h2 { font:500 31px/1.05 Georgia,serif; letter-spacing:-.04em; margin:0; }.modal p:not(.kicker) { color:var(--muted); margin:17px 0 26px; }.icon-close { position:absolute; right:18px; top:18px; width:34px; height:34px; border:0; border-radius:50%; background:#e7eadf; }.icon-close svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; } .has-modal { overflow:hidden; }
@media (max-width:680px) { .app-shell { display:block; padding-bottom:86px; }.rail { display:none; }.mobile-head { height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); }.place-button { border:0; background:transparent; color:var(--muted); font-size:13px; }.page { padding:46px 23px 25px; }.page-title { display:block; }.coverage { margin-top:16px; white-space:normal; }.listening-canvas { min-height:440px; }.listening-canvas img { width:min(310px,85vw); height:270px; }.quiet-row { display:grid; gap:18px; padding:20px 0; }.mobile-nav { position:fixed; z-index:3; bottom:0; left:0; right:0; height:86px; overflow:visible; background:#fbf9f1; border-top:1px solid var(--line); display:flex; justify-content:space-around; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); }.mobile-nav .nav-item { width:20%; min-height:55px; border-radius:9px; }.mobile-listen { width:20%; height:76px; appearance:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; margin-top:-24px; padding:0; color:var(--ink); border:0; background:transparent; }.mobile-listen:disabled { cursor:not-allowed; opacity:.42; }.mobile-listen svg { width:58px; height:58px; padding:14px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; background:var(--ink); border:3px solid var(--paper); border-radius:50%; box-shadow:0 3px 12px #193a3040; }.mobile-listen span { font-size:11px; font-weight:700; }.today-page .listening-cta { display:none !important; }.archive-grid { grid-template-columns:repeat(2,1fr); margin-top:42px; gap:10px; }.day-card { min-height:150px; padding:15px; }.review-list { margin-top:40px; }.modal { padding:30px 25px; } }