/* ============================================================
   LVX IN TENEBRIS — AI dispatches from the dark
   A dark broadsheet. The amber accent is the "light".
   ============================================================ */

/* ---- Self-hosted fonts (no external dependency) ---- */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/newsreader-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/newsreader-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:500; font-display:swap; src:url("fonts/newsreader-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root{
  --ink:#0e0e10;
  --type:#ece6dc;        /* warm newsprint white */
  --type-dim:#b6afa3;
  --muted:#827d73;
  --lux:#f0a23c;         /* amber lamplight — the light */
  --lux-soft:#caa26a;
  --ember:#ff6b35;       /* hot accent, used sparingly */
  --rule:#27272d;
  --rule-strong:#3a3a42;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw:1180px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--ink);
  color:var(--type);
  font-family:var(--serif);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint lamplight pooling at the top — the one ambient flourish */
body::before{
  content:""; position:fixed; inset:0 0 auto 0; height:60vh; pointer-events:none; z-index:0;
  background:radial-gradient(120% 80% at 50% -18%, rgba(240,162,60,.085), rgba(240,162,60,0) 60%);
}

a{ color:inherit; text-decoration:none; }

.container{
  position:relative; z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:34px 28px 80px;
}

/* =================== MASTHEAD =================== */
.masthead{ text-align:center; }
.masthead .topline{ border-top:1px solid var(--rule-strong); }
.masthead .ears{
  display:flex; align-items:flex-end; justify-content:space-between;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding:14px 2px 6px;
}
.masthead .ears span{ flex:1; }
.masthead .ears .left{ text-align:left; }
.masthead .ears .right{ text-align:right; }
.nameplate{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(40px, 9vw, 96px); line-height:.92; letter-spacing:.01em;
  margin:2px 0 4px; color:var(--type);
}
.nameplate .lux{ color:var(--lux); }
.rule-double{
  border:0; height:0;
  border-top:3px solid var(--type); border-bottom:1px solid var(--type);
  padding-bottom:3px; margin:10px 0 0;
}
.masthead .dateline{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding:11px 0 0;
}
.masthead .dateline .tag{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:.02em; text-transform:none; font-size:15px; color:var(--lux-soft); }
.masthead .dateline .dot{ color:var(--rule-strong); }
/* Making-of pointer — rides along with the story count rather than standing
   alone, because it describes this issue. Set smaller than the surrounding
   dateline and in sentence case (the dateline is uppercase) so it reads as a
   parenthetical aside, and underlined in amber so it is unmistakably a link. */
.masthead .dateline .mk-note{
  font-size:9.5px; letter-spacing:.03em; text-transform:none;
  color:var(--muted); white-space:nowrap;
}
.masthead .dateline .mk-beta{
  font-size:8.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lux-soft);
}
/* Serif italic, not sans: the dateline already uses that treatment for its
   tagline one slot to the left, so a phrase in the same voice reads as part of
   the masthead rather than bolted onto it. text-transform is reset explicitly
   here as well as on .mk-note — the dateline's uppercase must not reach it. */
.masthead .dateline .mk-link{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:12px; letter-spacing:.01em; text-transform:none;
  color:var(--lux);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-color:rgba(240,162,60,.45);
  transition:color .18s ease, text-decoration-color .18s ease;
}
.masthead .dateline .mk-link:hover{ color:var(--type); text-decoration-color:var(--type); }
@media (max-width:560px){
  .masthead .dateline .mk-note{ white-space:normal; }
}
.devocracy-credit{
  text-align:center;
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:.04em;
  color:var(--muted);
  margin-top:2px;
  margin-bottom:0;
}
.devocracy-credit a{
  color:var(--lux-soft);
  font-weight:500;
  padding:1px 7px;
  border:1px solid var(--rule);
  border-radius:3px;
  display:inline-block;
  transition:color .18s ease, border-color .18s ease;
}
.devocracy-credit a:hover{
  color:var(--lux);
  border-color:var(--lux-soft);
}
.masthead .rule-thin{ border:0; border-top:1px solid var(--rule); margin:13px 0 0; }

/* =================== NOTICE =================== */
.notice{
  font-family:var(--sans); font-size:13px; color:var(--type-dim);
  border-left:3px solid var(--ember); background:rgba(255,107,53,.05);
  padding:11px 16px; margin:26px 0 0; border-radius:2px;
}
.notice b{ color:var(--ember); font-weight:600; }

/* =================== LEAD STORY (full-width feature) =================== */
.lead-zone{ margin-top:30px; }
.lead a{ display:block; transition:color .18s ease; }
.lead-grid{ display:grid; grid-template-columns:1.45fr 1fr; gap:0 52px; align-items:end; }
.kicker{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember);
  display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
}
.kicker::before{ content:""; width:22px; height:2px; background:var(--ember); display:inline-block; }
.lead h1{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(33px, 4.6vw, 58px); line-height:1.0; letter-spacing:-.014em;
  margin:0; color:var(--type); text-wrap:balance;
}
.lead .deck{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(17px,1.35vw,20px); line-height:1.5;
  color:var(--type-dim); margin:0 0 18px;
}
.byline{
  font-family:var(--sans); font-size:11.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.byline .src{ color:var(--type-dim); }
.byline .more{ color:var(--lux); font-weight:600; transition:color .18s ease; }
.lead a:hover h1{ color:#fff; }
.lead a:hover .more{ color:var(--ember); }

/* =================== TOP STORIES (3-up, full width) =================== */
.topstories{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:32px; padding:30px 0 34px;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong);
}
.topstories .story{ padding:0 24px; border-left:1px solid var(--rule); }
.topstories .story:first-child{ padding-left:0; border-left:0; }
.topstories .story:last-child{ padding-right:0; }
.story h3{
  font-family:var(--serif); font-weight:600;
  font-size:21px; line-height:1.16; letter-spacing:-.006em; margin:0 0 9px; color:var(--type);
}
.story p{ font-family:var(--serif); font-size:15px; line-height:1.46; color:var(--type-dim); margin:0 0 11px; }
.story .byline{ font-size:10.5px; }
.story a{ display:block; transition:color .18s ease; }
.story a:hover h3{ color:var(--lux); }

/* =================== SECTIONS =================== */
.sections{ margin-top:4px; }
.section{ margin-top:40px; }
.section-head{ display:flex; align-items:center; gap:16px; margin:0 0 22px; }
.section-head h2{
  font-family:var(--sans); font-weight:700;
  font-size:13.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--lux);
  margin:0; white-space:nowrap;
}
.section-head .line{ flex:1; height:1px; background:var(--rule-strong); }
.section-head .n{ font-family:var(--sans); font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.08em; }
.section-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px 0; }
.item{ padding:0 24px; border-left:1px solid var(--rule); }
.item:nth-child(3n+1){ padding-left:0; border-left:0; }
.item h4{
  font-family:var(--serif); font-weight:600;
  font-size:18.5px; line-height:1.2; letter-spacing:-.004em; margin:0 0 8px; color:var(--type);
}
.item p{ font-family:var(--serif); font-size:14.5px; line-height:1.45; color:var(--type-dim); margin:0 0 10px; }
.item .byline{ font-size:10px; }
.item a{ display:block; transition:color .18s ease; }
.item a:hover h4{ color:var(--lux); }

/* ---- Lead image (full-width hero above 2-column grid) ---- */
.lead a > .lead-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:22px;
  opacity:0.92;
  filter:brightness(0.88) contrast(1.06) sepia(0.18) saturate(0.92);
  position:relative;
  box-shadow:0 2px 12px rgba(0,0,0,0.4), inset 0 0 40px rgba(140,100,60,0.08);
}

/* Aged paper overlay — subtle sepia/vintage tint */
.lead a > .lead-image::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(180,140,90,0.08) 0%, rgba(120,90,60,0.12) 50%, rgba(80,60,40,0.15) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* ---- Section hero banner (full-width image above 3-column grid) ---- */
.section-hero{
  display:block;
  width:100%;
  margin:0 0 18px;
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.section-hero-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/7;
  object-fit:cover;
  opacity:0.90;
  filter:brightness(0.86) contrast(1.08) sepia(0.20) saturate(0.90);
  box-shadow:0 2px 10px rgba(0,0,0,0.35), inset 0 0 30px rgba(140,100,60,0.10);
}

/* Aged paper overlay for section hero */
.section-hero::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(180,140,90,0.06) 0%, rgba(120,90,60,0.10) 50%, rgba(80,60,40,0.14) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}
.section-hero .hero-title{
  position:absolute;
  left:0; right:0; bottom:0;
  margin:0;
  padding:28px 20px 16px;
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  line-height:1.25;
  color:var(--type);
  background:linear-gradient(to top, rgba(14,14,16,.92) 0%, rgba(14,14,16,.55) 70%, rgba(14,14,16,0) 100%);
  pointer-events:none;
  letter-spacing:-.004em;
}
.section-hero:hover .section-hero-img{ opacity:1; }
.section-hero:hover .hero-title{ color:var(--lux); }

@media (max-width:900px){
  .section-hero .hero-title{ font-size:18px; }
}

/* =================== IN BRIEF (full-width band) =================== */
.inbrief{ margin-top:48px; }
.inbrief .section-head h2{ color:var(--type); }
.qh-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 36px;
}
.qh-list li{ border-top:1px solid var(--rule); padding:13px 0; }
.qh-list a{ display:flex; flex-direction:column; gap:6px; transition:color .18s ease; }
.qh-list a:hover .qh-title{ color:var(--lux); }
.qh-title{ font-family:var(--serif); font-weight:500; font-size:16px; line-height:1.28; color:var(--type); }
.qh-src{
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:7px;
}
.qh-src::before{ content:""; width:5px; height:5px; background:var(--lux); display:inline-block; transform:rotate(45deg); flex:0 0 auto; }

/* =================== FOOTER =================== */
.colophon{ margin-top:60px; padding-top:22px; border-top:3px double var(--rule-strong); text-align:center; }
.colophon .mark{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--lux-soft); margin:0 0 6px; }
.colophon .meta{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0; }
.colophon a{ color:var(--muted); border-bottom:1px solid var(--rule-strong); transition:color .18s ease; }
.colophon a:hover{ color:var(--lux); }

/* =================== PAGE-LOAD REVEAL =================== */
@keyframes rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.lead-zone, .topstories, .section, .inbrief{ animation:rise .55s ease both; }
.topstories{ animation-delay:.06s; }
.section:nth-of-type(1){ animation-delay:.1s; }
.section:nth-of-type(2){ animation-delay:.14s; }
.section:nth-of-type(3){ animation-delay:.18s; }

/* =================== RESPONSIVE =================== */
@media (max-width:900px){
  .lead-grid{ grid-template-columns:1fr; gap:20px 0; align-items:start; }
  .lead h1{ font-size:clamp(30px,7vw,46px); }
  .section-grid{ grid-template-columns:repeat(2,1fr); }
  .item:nth-child(3n+1){ padding-left:24px; border-left:1px solid var(--rule); }
  .item:nth-child(2n+1){ padding-left:0; border-left:0; }
  .qh-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .container{ padding:24px 18px 64px; }
  .topstories{ grid-template-columns:1fr; gap:0; padding:22px 0 26px; }
  .topstories .story{ padding:18px 0; border-left:0; border-top:1px solid var(--rule); }
  .topstories .story:first-child{ padding-top:0; border-top:0; }
  .section-grid{ grid-template-columns:1fr; gap:0; }
  .item, .item:nth-child(3n+1), .item:nth-child(2n+1){ padding:18px 0; border-left:0; border-top:1px solid var(--rule); }
  .item:first-child{ border-top:0; padding-top:0; }
  .qh-list{ grid-template-columns:1fr; }
}

/* =================== ACCESSIBILITY =================== */
a:focus-visible{ outline:2px solid var(--lux); outline-offset:3px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }

/* =================== TRENDING (dual-column minimal) =================== */
.trending-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--rule-strong);
  position: relative;
}

/* central divider */
.trending-wrap::before {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule);
}

/* Variant for when trending-wrap sits inside a .section that already has its
   own .section-head title + rule (e.g. Free Models) — the wrap's own
   top border/margin/divider-offset would just double that rule. */
.trending-wrap--in-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.trending-wrap--in-section::before { top: 0; }

.trending-col {
  padding: 0 32px;
}

.trending-col:first-child { padding-left: 0; }
.trending-col:last-child { padding-right: 0; }

.trending-col .t-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}

.trending-col .t-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lux);
  margin: 0;
  white-space: nowrap;
}

.trending-col .t-line {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.trending-col .t-link {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.trending-col .t-link:hover { color: var(--lux); }

.trending-col .t-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trending-col .t-list li {
  border-top: 1px solid var(--rule);
  padding: 7px 0;
}

.trending-col .t-list li:first-child { border-top: 0; padding-top: 0; }

.trending-col .t-list a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0 6px;
  align-items: baseline;
  transition: color 0.18s ease;
}

.trending-col .t-list a:hover .t-name { color: var(--lux); }

.t-ranking {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  color: var(--lux-soft);
  letter-spacing: 0.04em;
}

.t-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.25;
  color: var(--type);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-meta {
  grid-column: 2 / 3;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: -1px;
}

.section-note {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .trending-wrap {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .trending-wrap::before { display: none; }
  .trending-col {
    padding: 0;
    margin-bottom: 36px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rule);
  }
  .trending-col:last-child {
    border-bottom: 0;
    margin-bottom: 0;
  }
}