/* Lampline apex layout: shared stylesheet
   Navy ground. Lora headlines. Public Sans body at 16 to 17 px.
   Amber is used only for the lamp mark and sign-up buttons.
   Red is used only for Breaking. Controls are at least 48 px tall.
   Image and ad spaces are reserved in advance so nothing shifts. */

:root{
  --ground:#0B1220;
  --navy:#14213D;
  --navy-2:#1B2A4A;
  --surface:#FFFFFF;
  --surface-2:#F4F5F7;
  --ink:#14213D;
  --muted:#4A5568;
  --rule:#DCE0E7;
  --amber:#D9922A;
  --amber-dark:#B97A1E;
  --red:#B42318;
  --red-bg:#FDECEA;
  --red-ink:#7A1A12;
  --accent:#14213D;
  --f-display:"Lora", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.55;
}
body.story-page{padding-bottom:92px}
.wrap{max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px}
a{color:var(--navy)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid currentColor;outline-offset:2px}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;margin:0}
p{margin:0}

/* Top bar: date, edition, city switcher */
.topbar{background:#060B16;color:#C8D2E4;font-size:14px}
.topbar .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar .edition-name{color:#FFFFFF;font-weight:600}
.cities{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.cities a{
  color:#C8D2E4;text-decoration:none;font-weight:600;
  min-height:48px;display:inline-flex;align-items:center;padding:0 12px;
  border-bottom:3px solid transparent;
}
.cities a:hover{color:#FFFFFF}
.cities a[aria-current="page"]{color:#FFFFFF;border-bottom-color:#FFFFFF}

/* Masthead */
.masthead{background:var(--surface);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-logo{display:block;width:197px;height:auto}
.brand-logo--compact{width:123px}
.brand-city{color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.masthead .spacer{flex:1}
.signin{color:var(--ink);font-weight:600;text-decoration:none;min-height:48px;display:inline-flex;align-items:center;padding:0 8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:10px 20px;border-radius:6px;border:0;
  font-weight:700;text-decoration:none;font-size:16px;
}
.btn-navy{background:var(--navy);color:#FFFFFF}
.btn-navy:hover{background:var(--navy-2)}
.btn-amber{background:var(--amber);color:var(--navy)}
.btn-amber:hover{background:var(--amber-dark);color:#FFFFFF}

/* Beat nav */
.beatnav{background:var(--surface);border-bottom:1px solid var(--rule)}
.beatnav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.beatnav a, .beatnav button{
  background:none;border:0;color:var(--ink);font-weight:600;text-decoration:none;
  min-height:48px;display:inline-flex;align-items:center;padding:0 14px;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.beatnav a:hover, .beatnav button:hover{color:var(--accent)}
.beatnav [aria-pressed="true"]{border-bottom-color:var(--accent)}

/* Breaking bar: the only red on any page */
.breaking{background:var(--red-bg);color:var(--red-ink);border-bottom:2px solid var(--red)}
.breaking .wrap{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.breaking .flag{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.breaking a{color:var(--red-ink);font-weight:700}

/* Page sheet on the navy ground */
.sheet{padding-top:24px;padding-bottom:40px}
.panel{background:var(--surface);border-radius:8px;padding:28px}
@media (max-width:640px){.panel{padding:20px}}

/* Lead story */
.lead{display:flex;flex-direction:column;gap:14px}
.label{
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.label .type{color:var(--accent)}
.label .type.breaking-type{color:var(--red)}
.label .sample-tag{background:var(--ink);color:#FFFFFF;padding:2px 8px;border-radius:4px}
.lead h1, .lead h2{font-size:clamp(30px,4.6vw,46px);font-weight:700;max-width:24ch;text-wrap:balance}
.dek{font-size:19px;color:var(--muted);max-width:62ch}
.byline{font-size:14px;color:var(--muted)}
.byline .author{color:var(--ink);font-weight:600}
.photo{
  aspect-ratio:16/9;background:var(--surface-2);border:1px solid var(--rule);border-radius:6px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);font-size:13px;padding:16px;
}
/* Filled lead photo: archival image with its credit line. The figure keeps
   the image's own proportions; width and height attributes reserve the
   space so the page does not shift while it loads. */
.leadphoto{margin:0;width:100%;min-width:0;overflow:hidden;border-radius:6px}
.leadphoto img{
  display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;
  background:var(--surface-2);
}
.photo-credit{font-size:12.5px;color:var(--muted);margin-top:6px}
.photo-credit a{color:inherit}
.pt-where{margin-top:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 12px;
  border:1px solid var(--rule);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--surface);text-decoration:none;
}
.chip.live{border-color:var(--red);color:var(--red)}
.nextline{border-top:1px solid var(--rule);padding-top:12px;font-size:16.5px}
.nextline strong{font-weight:700}

/* Newsletter band */
.daily{background:var(--navy);color:#FFFFFF;border-radius:8px;padding:28px;margin-top:24px}
.daily h2{font-size:clamp(24px,3vw,32px);margin-bottom:6px}
.daily p{color:#C8D2E4;max-width:56ch}
.signup-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.signup-form label{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup-form input{
  flex:1 1 260px;min-height:48px;padding:10px 14px;border-radius:6px;border:1px solid var(--rule);
  font:inherit;font-size:16px;background:#FFFFFF;color:var(--ink);
}
.signup-done{margin-top:16px;font-weight:600;color:#FFFFFF}

/* Section headings */
.sec-h{
  font-family:var(--f-body);font-size:13px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#C8D2E4;margin:32px 0 14px;
}
.sec-h.on-light{color:var(--muted)}

/* Story cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{
  background:var(--surface);border-radius:8px;padding:22px;
  display:flex;flex-direction:column;gap:9px;min-width:0;
}
.card-thumb{
  display:block;width:calc(100% + 44px);max-width:none;height:auto;aspect-ratio:16/9;
  object-fit:cover;flex:none;margin:-22px -22px 3px;border-radius:8px 8px 0 0;background:var(--surface-2);
}
.card h3{font-size:23px;font-weight:600;text-wrap:balance}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.card .dek-sm{color:var(--muted);font-size:15.5px}
.meta-line{font-size:13.5px;color:var(--muted);display:flex;gap:6px 12px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.receipt{align-self:flex-start}

/* Two-column row: Your block + In brief */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}}
.duo .panel h2{font-size:26px;margin-bottom:8px}
.duo .panel p{color:var(--muted)}
.block-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.block-form label{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.block-form input{
  flex:1 1 220px;min-height:48px;padding:10px 14px;border-radius:6px;
  border:1px solid var(--rule);font:inherit;font-size:16px;
}
.block-result{margin-top:16px;border-top:1px solid var(--rule);padding-top:12px}
.block-result ul{margin:8px 0 0;padding-left:20px}
.block-result li{margin-bottom:4px}
.briefs{list-style:none;margin:0;padding:0}
.briefs li{padding:12px 0;border-bottom:1px solid var(--rule)}
.briefs li:last-child{border-bottom:0}
.briefs a{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35;display:block}
.briefs a:hover{text-decoration:underline}
.briefs .meta-line{margin-top:2px;padding-top:0}

/* Reporters Explain video row */
.videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;align-items:start}
.tile{
  background:var(--navy);border-radius:8px;color:#FFFFFF;
  display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:16px;position:relative;
}
.tile .play{
  position:static;flex:none;width:44px;height:44px;border-radius:50%;
  border:2px solid #FFFFFF;display:flex;align-items:center;justify-content:center;font-size:15px;
}
.tile .dur{position:static;align-self:flex-start;font-size:13px;font-weight:700;background:#060B16;padding:3px 8px;border-radius:4px}
.tile .t{font-weight:600;line-height:1.3;font-size:15.5px}
.tile .r{font-size:13px;color:#C8D2E4}

/* House ad: one designed unit per homepage, in the reserved ad space.
   Navy ground from the site palette, Lora headline, the two covers composed
   as an overlapping pair, amber reserved for the purchase buttons, and the
   Lampline wordmark as the sponsor signature. */
.housead{
  margin-top:28px;min-height:132px;background:var(--navy);color:#E6EBF4;
  border:1.5px solid #3A4A6B;border-radius:8px;padding:26px;
}
.housead-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.housead-label{
  font-size:12.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#8FA0BC;
}
.housead-mark{display:block;width:23px;height:30px;flex:none}
.housead-headline{
  font-family:var(--f-display);color:#FFFFFF;font-size:29px;line-height:1.2;
  margin-top:14px;max-width:27ch;text-wrap:balance;
}
.housead-stage{display:flex;gap:30px;margin-top:22px;align-items:flex-start}
.housead-covers{position:relative;width:284px;max-width:100%;flex:none;min-height:248px}
.housead-covers img{
  display:block;height:auto;border-radius:4px;border:1px solid #3A4A6B;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.housead-covers .cover-main{width:150px;position:relative;z-index:2}
.housead-covers .cover-back{
  width:142px;position:absolute;right:0;top:20px;z-index:1;transform:rotate(3deg);
}
.housead-items{display:flex;flex-direction:column;gap:22px;flex:1;min-width:0}
.housead-item h3{color:#FFFFFF;font-size:20px;line-height:1.25}
.housead-item p{margin-top:7px;font-size:15.5px;color:#C8D2E4;max-width:56ch}
.housead-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}
.housead .btn-ghost{background:transparent;border:1.5px solid #8FA0BC;color:#FFFFFF}
.housead .btn-ghost:hover{border-color:#FFFFFF}
.housead-sign{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;
  padding-top:16px;border-top:1px solid #3A4A6B;color:#8FA0BC;font-size:13.5px;
}
.housead-sign img{display:block;width:110px;height:auto}
@media (max-width:720px){.housead-stage{flex-direction:column}}
@media (max-width:480px){
  .housead-covers{width:100%;min-height:196px}
  .housead-covers .cover-main{width:118px}
  .housead-covers .cover-back{width:112px;top:16px}
}

/* Story page */
.story-panel{max-width:820px;margin:0 auto}
.story-panel h1{font-size:clamp(30px,5vw,44px);font-weight:700;text-wrap:balance}
.shortversion{
  background:var(--surface-2);border:1px solid var(--rule);border-left:5px solid var(--accent);
  border-radius:6px;padding:20px 22px;margin-top:20px;
}
.shortversion h2{
  font-family:var(--f-body);font-size:12.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.shortversion dl{margin:0;display:flex;flex-direction:column;gap:10px}
.shortversion dt{font-weight:700}
.shortversion dd{margin:0;color:var(--ink)}
.story-body{margin-top:22px;display:flex;flex-direction:column;gap:16px;font-size:17px}
.story-body h2{font-size:26px;margin-top:12px}
.papertrail{
  background:var(--navy);color:#FFFFFF;border-radius:8px;padding:22px;margin-top:24px;
}
.papertrail h2{font-size:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.papertrail h2 .count{font-family:var(--f-body);font-size:14px;font-weight:700;color:#FFFFFF}
.papertrail ul{margin:12px 0 0;padding-left:20px;color:#E6EBF4}
.papertrail li{margin-bottom:5px}
.papertrail p{color:#C8D2E4;margin-top:10px}
.papertrail a{color:#FFFFFF;text-decoration:underline;text-underline-offset:2px}
.papertrail a:hover{color:var(--amber)}
.howwe{
  margin-top:24px;border-top:1px solid var(--rule);padding-top:16px;font-size:14.5px;color:var(--muted);
}
.howwe h2{
  font-family:var(--f-body);font-size:12.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:8px;color:var(--muted);
}
.signup-box{background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;padding:22px;margin-top:24px}
.signup-box h2{font-size:24px;margin-bottom:6px}
.signup-box p{color:var(--muted)}
.signup-box .signup-form .signup-done{color:var(--ink)}
.action-row{margin-top:14px}

/* Sticky Share / Watch / Save bar on story pages */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;background:var(--navy);color:#FFFFFF;
  border-top:1px solid var(--navy-2);z-index:20;
}
.actionbar .wrap{display:flex;gap:8px;padding-top:10px;padding-bottom:10px}
.actionbar button{
  flex:1;min-height:52px;background:transparent;color:#FFFFFF;border:1px solid #3A4A6B;
  border-radius:6px;font-weight:700;font-size:15.5px;
}
.actionbar button:hover{border-color:#FFFFFF}

/* Simple pages */
.prose{max-width:760px;margin:0 auto}
.prose h1{font-size:clamp(30px,5vw,42px);margin-bottom:14px}
.prose p{margin-bottom:14px;font-size:17px}
.prose ul{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:8px;font-size:17px}
.prose h2{font-size:25px;margin:22px 0 10px}
.empty-state{
  border:1px dashed var(--rule);border-radius:8px;padding:24px;text-align:center;
  color:var(--muted);font-size:17px;margin-bottom:20px;
}

/* Footer */
footer{background:#060B16;color:#8FA0BC;margin-top:44px}
footer .wrap{padding-top:28px;padding-bottom:28px;display:flex;flex-direction:column;gap:12px}
footer nav{display:flex;gap:6px;flex-wrap:wrap}
footer nav a{
  color:#C8D2E4;text-decoration:none;font-weight:600;min-height:48px;
  display:inline-flex;align-items:center;padding:0 10px;
}
footer nav a:hover{color:#FFFFFF}
footer .sample-note{font-size:13.5px}
footer .brandline{display:flex;align-items:center;gap:10px;color:#FFFFFF;font-family:var(--f-display);font-size:20px}
footer .brandline-logo{display:block;width:148px;height:auto}

/* World headlines module: linked headlines from free, terms-verified sources */
.headlines{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.headlines{grid-template-columns:minmax(0,1fr)}}
.headline-block{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:8px;padding:22px}
.headline-block h3{font-size:21px;margin-top:6px}
.headline-list{list-style:none;margin:10px 0 0;padding:0}
.headline-list li{padding:10px 0;border-bottom:1px solid var(--rule)}
.headline-list li:last-child{border-bottom:0}
.headline-list a{font-weight:600;color:var(--ink);text-decoration:none;line-height:1.35}
.headline-list a:hover{text-decoration:underline}
.headline-sum{font-size:14px;color:var(--muted);margin-top:3px}
.source-note{font-size:13px;color:var(--muted);margin-top:12px}
.headlines-note{color:#C8D2E4;font-size:13.5px;margin-top:14px}

/* Beat nav: current section on link based navs */
.beatnav a[aria-current="page"]{border-bottom-color:var(--accent)}

/* Music releases: text listings; small cover thumbnails on review notes only */
.music-entry{padding:14px 0;border-bottom:1px solid var(--rule)}
.music-entry:last-child{border-bottom:0}
.music-entry .m-line{font-size:16.5px}
.music-entry .m-meta{font-size:13.5px;color:var(--muted);margin-top:3px}
.music-note{margin-top:8px;max-width:68ch}
.music-review{display:flex;gap:18px;align-items:flex-start}
.music-review img{width:180px;height:auto;border-radius:4px;border:1px solid var(--rule);flex:none}
@media (max-width:640px){.music-review{flex-direction:column}}
.cover-credit{font-size:13px;color:var(--muted);margin-top:8px}
.city-tag{
  display:inline-block;border:1px solid var(--rule);border-radius:999px;padding:1px 10px;
  font-size:12.5px;font-weight:700;color:var(--ink);background:var(--surface-2);
}

/* Call to action strip: two actions on a navy band, amber on buttons only */
.ctastrip{
  background:var(--navy);color:#FFFFFF;border-radius:8px;padding:28px;margin-top:24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 36px;
}
@media (max-width:720px){.ctastrip{grid-template-columns:minmax(0,1fr)}}
.ctastrip h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:6px}
.ctastrip p{color:#C8D2E4;max-width:46ch}
.ctastrip .btn{margin-top:14px}

/* Exit notice: shown once per visit, on the first link off the site.
   Navy card on a dim backdrop, amber only on Continue, layered above
   the sticky story action bar (z-index 20). The mailing list row is
   a quiet outline treatment so it never competes with Continue. */
.exit-notice{
  position:fixed;inset:0;z-index:200;background:rgba(6,11,22,.62);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.exit-notice[hidden]{display:none}
.exit-notice-card{
  background:var(--navy);color:#FFFFFF;border:1px solid var(--navy-2);
  border-radius:8px;padding:24px;width:100%;max-width:480px;
}
.exit-notice-card h2{font-size:24px;margin-bottom:8px}
.exit-notice-body{color:#C8D2E4}
.exit-notice-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.exit-notice-actions .btn{flex:1 1 180px}
.exit-notice-stay{background:transparent;border:1.5px solid #8FA0BC;color:#FFFFFF}
.exit-notice-stay:hover{border-color:#FFFFFF}
.exit-notice-join{margin-top:20px;padding-top:16px;border-top:1px solid var(--navy-2)}
.exit-notice-join p{color:#C8D2E4;font-size:14.5px;margin-bottom:10px}
.exit-notice-join-btn{background:transparent;border:1px solid #8FA0BC;color:#FFFFFF;font-weight:600}
.exit-notice-join-btn:hover{border-color:#FFFFFF}
@media (max-width:480px){
  .exit-notice-card{padding:20px}
  .exit-notice-actions{flex-direction:column}
  .exit-notice-actions .btn{flex:none;width:100%}
}