/* ============================================================
   DEEP LEVEL — Design system ("The Founder Review")
   Editorial ivory. Everything is namespaced under .dl so it
   never touches wp-admin, Kadence defaults, or block editor.
   Port of homepage-v2 mockup.
   ============================================================ */

/* ---- Self-hosted display font (optional) ----
   Drop woff2 files in assets/fonts/ to activate. Until then the
   old-style serif fallback stack keeps the intended look. Fraunces
   is free (OFL): https://fonts.google.com/specimen/Fraunces        */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --dl-paper:#f3efe6;
  --dl-paper-2:#ece7db;
  --dl-ink:#1c1b17;
  --dl-ink-soft:#3a382f;
  --dl-muted:#736d5f;
  --dl-rule:#d3ccbb;
  --dl-rule-strong:#bdb49f;
  --dl-accent:#8f2d2a;
  --dl-ink-panel:#181713;
  --dl-paper-panel:#efe9dc;
  --dl-maxw:1180px;
  --dl-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --dl-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dl-mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---- Scoped reset / base ---- */
.dl,.dl *{box-sizing:border-box}
.dl{
  font-family:var(--dl-serif);
  background:var(--dl-paper);
  color:var(--dl-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:oldstyle-nums;
}
.dl a{color:inherit;text-decoration:none}
.dl p{margin:0}
.dl h1,.dl h2,.dl h3,.dl h4{margin:0;font-weight:700}
.dl img{max-width:100%;height:auto;display:block}
.dl .wrap{max-width:var(--dl-maxw);margin:0 auto;padding:0 32px}

/* ---- Editorial utilities ---- */
.dl .label{
  font-family:var(--dl-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dl-muted);font-variant-numeric:normal;
}
.dl .accent{color:var(--dl-accent)}
.dl .rule{height:1px;background:var(--dl-rule);border:0}
.dl .mono{font-family:var(--dl-mono);font-variant-numeric:tabular-nums}

/* ---- Masthead ---- */
.dl .top-rule{height:5px;background:var(--dl-ink)}
.dl .mast{background:var(--dl-paper)}
.dl .mast-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:22px 0 16px}
.dl .nameplate{line-height:.9}
.dl .nameplate .name{font-family:var(--dl-serif);font-weight:700;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.01em}
.dl .nameplate .name .dot{color:var(--dl-accent)}
.dl .nameplate .kicker{font-family:var(--dl-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dl-muted);margin-top:10px}
.dl .mast-meta{text-align:right;font-family:var(--dl-mono);font-size:11.5px;letter-spacing:.06em;color:var(--dl-muted);line-height:1.7}
.dl .mast-meta b{color:var(--dl-ink)}
.dl .mast-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:2px solid var(--dl-ink);border-bottom:1px solid var(--dl-rule);padding:11px 0;position:sticky;top:0;background:var(--dl-paper);z-index:40}
.dl .mast-nav nav{display:flex;gap:30px}
.dl .mast-nav nav a{font-family:var(--dl-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dl-ink-soft)}
.dl .mast-nav nav a:hover{color:var(--dl-accent)}
.dl .sub-link{font-family:var(--dl-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--dl-ink);padding:8px 16px;color:var(--dl-ink);white-space:nowrap}
.dl .sub-link:hover{background:var(--dl-ink);color:var(--dl-paper)}

/* ---- Cover story ---- */
.dl .cover{padding:44px 0 8px}
.dl .cover-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:52px;align-items:start}
.dl .kicker-line{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.dl .kicker-line .label{color:var(--dl-accent)}
.dl .kicker-line .ln{flex:1;height:1px;background:var(--dl-rule)}
.dl .cover h1{font-family:var(--dl-serif);font-weight:700;font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.015em}
.dl .cover .standfirst{font-size:20px;line-height:1.55;color:var(--dl-ink-soft);margin-top:22px;max-width:36ch}
.dl .cover .standfirst.drop::first-letter{float:left;font-family:var(--dl-serif);font-weight:700;color:var(--dl-accent);font-size:3.1em;line-height:.72;margin:9px 12px 0 0}
.dl .byline{font-family:var(--dl-mono);font-size:12px;letter-spacing:.08em;color:var(--dl-muted);margin-top:24px}
.dl .byline b{color:var(--dl-ink)}
.dl .read-story{display:inline-block;margin-top:22px;font-family:var(--dl-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--dl-accent);padding-bottom:3px;color:var(--dl-ink)}
.dl .read-story:hover{color:var(--dl-accent)}

/* portrait frame */
.dl figure.portrait{margin:0}
.dl .frame{border:1px solid var(--dl-rule-strong);padding:10px;background:var(--dl-paper-2)}
.dl .frame .plate{aspect-ratio:4/5;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(0,0,0,.02) 7px 8px),linear-gradient(160deg,var(--dl-paper-panel),var(--dl-paper-2));display:grid;place-items:center;position:relative;border:1px solid var(--dl-rule)}
.dl .frame .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02)}
.dl .frame .plate .mono-initials{font-family:var(--dl-serif);font-size:70px;font-weight:700;color:var(--dl-ink);opacity:.14;letter-spacing:.02em}
.dl figure.portrait figcaption{font-family:var(--dl-mono);font-size:11.5px;letter-spacing:.04em;color:var(--dl-muted);margin-top:12px;line-height:1.6}
.dl figure.portrait figcaption b{color:var(--dl-ink);font-family:var(--dl-serif);font-size:14px}

/* ---- Factbox ---- */
.dl .factbox{border-top:2px solid var(--dl-ink);border-bottom:2px solid var(--dl-ink);margin-top:38px}
.dl .factbox .fb-head{font-family:var(--dl-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dl-muted);padding:9px 0;border-bottom:1px solid var(--dl-rule)}
.dl .fb-row{display:grid;grid-template-columns:repeat(5,1fr)}
.dl .fb-cell{padding:16px 18px 16px 0;border-right:1px solid var(--dl-rule)}
.dl .fb-cell:last-child{border-right:0}
.dl .fb-cell .k{font-family:var(--dl-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dl-muted)}
.dl .fb-cell .v{font-family:var(--dl-serif);font-size:23px;font-weight:700;margin-top:7px;font-variant-numeric:tabular-nums}
.dl .fb-cell .v.hl{color:var(--dl-accent)}

/* ---- Section header ---- */
.dl .sec{padding:56px 0}
.dl .sec-rule{border-top:2px solid var(--dl-ink)}
.dl .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:16px 0 26px}
.dl .sec-head .no{font-family:var(--dl-mono);font-size:12px;letter-spacing:.1em;color:var(--dl-accent)}
.dl .sec-head h2{font-family:var(--dl-serif);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.01em}
.dl .sec-head .h-left{display:flex;align-items:baseline;gap:16px}
.dl .sec-head .more{font-family:var(--dl-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dl-muted);border-bottom:1px solid var(--dl-rule-strong);padding-bottom:2px}
.dl .sec-head .more:hover{color:var(--dl-accent);border-color:var(--dl-accent)}

/* ---- The Index ---- */
.dl .index{border-top:1px solid var(--dl-rule)}
.dl .row{display:grid;grid-template-columns:56px 1fr auto;gap:24px;align-items:baseline;padding:22px 8px;border-bottom:1px solid var(--dl-rule);position:relative;transition:background .12s ease}
.dl .row:hover{background:var(--dl-paper-2)}
.dl .row .no{font-family:var(--dl-mono);font-size:14px;color:var(--dl-muted);font-variant-numeric:tabular-nums}
.dl .row:hover .no{color:var(--dl-accent)}
.dl .row .headline{font-family:var(--dl-serif);font-size:clamp(20px,2.3vw,26px);font-weight:700;line-height:1.18;letter-spacing:-.01em;max-width:30ch}
.dl .row .themes{font-family:var(--dl-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dl-muted);margin-top:9px}
.dl .row .aside{text-align:right;font-family:var(--dl-mono);font-size:12.5px;line-height:1.7;color:var(--dl-muted);white-space:nowrap}
.dl .row .aside .g{color:var(--dl-ink);font-family:var(--dl-serif);font-size:16px;font-weight:700}
.dl .row .aside .profit{color:var(--dl-accent);font-variant-numeric:tabular-nums}

/* ---- Themes strip ---- */
.dl .themes-strip{background:var(--dl-ink-panel);color:var(--dl-paper)}
.dl .themes-strip .wrap{padding:44px 32px}
.dl .themes-strip .lead{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
.dl .themes-strip .lead .label{color:#d98676}
.dl .themes-strip .lead h2{font-family:var(--dl-serif);font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--dl-paper)}
.dl .theme-list{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.15)}
.dl .theme-item{padding:22px 20px 22px 0;border-right:1px solid rgba(255,255,255,.12)}
.dl .theme-item:last-child{border-right:0}
.dl .theme-item .t{font-family:var(--dl-serif);font-size:22px;font-weight:700}
.dl .theme-item .c{font-family:var(--dl-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a49a86;margin-top:8px}
.dl .theme-item:hover .t{color:#d98676}

/* ---- Essays / Insights ---- */
.dl .essays{border-top:1px solid var(--dl-rule)}
.dl .essay{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:baseline;padding:26px 8px;border-bottom:1px solid var(--dl-rule)}
.dl .essay:hover{background:var(--dl-paper-2)}
.dl .essay .kind{font-family:var(--dl-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dl-accent);width:96px}
.dl .essay .body h3{font-family:var(--dl-serif);font-size:clamp(20px,2.2vw,25px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.dl .essay .body p{color:var(--dl-ink-soft);font-size:16.5px;margin-top:8px;max-width:62ch}
.dl .essay .rt{font-family:var(--dl-mono);font-size:11.5px;color:var(--dl-muted);white-space:nowrap}

/* ---- Subscribe panel ---- */
.dl .subscribe{background:var(--dl-ink-panel);color:var(--dl-paper)}
.dl .sub-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:64px 32px}
.dl .subscribe .label{color:#e9e0cd}
.dl .subscribe h2{font-family:var(--dl-serif);font-size:clamp(30px,4vw,46px);line-height:1.06;font-weight:700;color:#fff;margin:16px 0 18px;letter-spacing:-.01em}
.dl .subscribe p{color:#c7c1b1;font-size:17px;line-height:1.6;max-width:44ch}
.dl .sub-form{display:flex;border:1.5px solid rgba(255,255,255,.35)}
.dl .sub-form input{flex:1;background:transparent;border:0;color:#fff;padding:16px 18px;font-family:var(--dl-mono);font-size:14px;letter-spacing:.02em}
.dl .sub-form input::placeholder{color:#8f897a}
.dl .sub-form input:focus{outline:0;background:rgba(255,255,255,.04)}
.dl .sub-form button{background:var(--dl-accent);color:#fff;border:0;cursor:pointer;font-family:var(--dl-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:0 26px}
.dl .sub-form button:hover{filter:brightness(1.08)}
.dl .sub-micro{font-family:var(--dl-mono);font-size:11px;letter-spacing:.06em;color:#8f897a;margin-top:14px}

/* ---- Colophon / About ---- */
.dl .colophon{padding:58px 0}
.dl .colo-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:56px}
.dl .colophon h2{font-family:var(--dl-serif);font-size:clamp(24px,3vw,34px);font-weight:700;letter-spacing:-.01em;margin-bottom:16px}
.dl .colophon p{color:var(--dl-ink-soft);font-size:17px;line-height:1.6;margin-bottom:14px;max-width:52ch}
.dl .colophon .signoff{font-family:var(--dl-mono);font-size:12px;letter-spacing:.06em;color:var(--dl-muted);margin-top:20px}
.dl .colo-links{display:flex;gap:24px;margin-top:8px}
.dl .colo-links a{font-family:var(--dl-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--dl-rule-strong);padding-bottom:3px}
.dl .colo-links a:hover{color:var(--dl-accent);border-color:var(--dl-accent)}
.dl .ledger{border-top:2px solid var(--dl-ink)}
.dl .ledger .l-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--dl-rule)}
.dl .ledger .l-row .k{font-family:var(--dl-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dl-muted)}
.dl .ledger .l-row .v{font-family:var(--dl-serif);font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.dl .ledger .l-row .v.hl{color:var(--dl-accent)}

/* ---- Footer ---- */
.dl .site-foot{border-top:5px solid var(--dl-ink);background:var(--dl-paper-2);padding:40px 0 30px}
.dl .foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.dl .foot .name{font-family:var(--dl-serif);font-weight:700;font-size:22px}
.dl .foot .name .dot{color:var(--dl-accent)}
.dl .foot .tag{font-family:var(--dl-mono);font-size:11px;letter-spacing:.06em;color:var(--dl-muted);margin-top:10px;max-width:30ch;line-height:1.7}
.dl .foot-cols{display:flex;gap:52px;flex-wrap:wrap}
.dl .foot-col h4{font-family:var(--dl-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dl-muted);margin-bottom:14px}
.dl .foot-col a{display:block;font-size:15px;margin-bottom:9px;color:var(--dl-ink-soft)}
.dl .foot-col a:hover{color:var(--dl-accent)}
.dl .foot-bottom{border-top:1px solid var(--dl-rule);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--dl-mono);font-size:11px;letter-spacing:.06em;color:var(--dl-muted)}

/* ============================================================
   Reading templates (single interview / single post / pages)
   Reuses the tokens above. Wrap PHP template output in .dl.
   ============================================================ */
.dl .article{max-width:720px;margin:0 auto;padding:56px 0}
.dl .article .a-kicker{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.dl .article .a-kicker .ln{flex:1;height:1px;background:var(--dl-rule)}
.dl .article h1.a-title{font-family:var(--dl-serif);font-weight:700;font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.015em}
.dl .article .a-meta{font-family:var(--dl-mono);font-size:12px;letter-spacing:.06em;color:var(--dl-muted);margin-top:20px}
.dl .article .a-meta b{color:var(--dl-ink)}

/* body copy (the interview / article content) */
.dl .a-body{font-size:19px;line-height:1.72;color:var(--dl-ink-soft);margin-top:34px}
.dl .a-body > p{margin:0 0 1.15em}
.dl .a-body > p:first-of-type::first-letter{float:left;font-family:var(--dl-serif);font-weight:700;color:var(--dl-accent);font-size:3.1em;line-height:.72;margin:9px 12px 0 0}
.dl .a-body h2{font-family:var(--dl-serif);font-size:clamp(24px,3vw,32px);color:var(--dl-ink);margin:1.8em 0 .5em;letter-spacing:-.01em}
.dl .a-body h3{font-family:var(--dl-serif);font-size:22px;color:var(--dl-ink);margin:1.5em 0 .4em}
.dl .a-body a{color:var(--dl-accent);text-decoration:underline;text-underline-offset:2px}
.dl .a-body blockquote{margin:1.6em 0;padding-left:22px;border-left:3px solid var(--dl-accent);font-family:var(--dl-serif);font-size:24px;line-height:1.4;color:var(--dl-ink)}
.dl .a-body ul,.dl .a-body ol{margin:0 0 1.15em 1.2em}
.dl .a-body li{margin:.35em 0}
.dl .a-body img{margin:1.6em 0;border:1px solid var(--dl-rule)}

/* pull quote helper (add class="pull" to a paragraph) */
.dl .a-body p.pull{font-family:var(--dl-serif);font-size:27px;line-height:1.32;color:var(--dl-ink);border-top:2px solid var(--dl-ink);border-bottom:2px solid var(--dl-ink);padding:22px 0;margin:1.6em 0}

/* ---- Pagination (archive) ---- */
.dl .dl-pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;padding-top:22px;border-top:1px solid var(--dl-rule)}
.dl .dl-pagination .page-numbers{font-family:var(--dl-mono);font-size:12.5px;letter-spacing:.06em;color:var(--dl-ink-soft);border:1px solid var(--dl-rule-strong);padding:8px 14px;min-width:40px;text-align:center}
.dl .dl-pagination a.page-numbers:hover{border-color:var(--dl-accent);color:var(--dl-accent)}
.dl .dl-pagination .page-numbers.current{background:var(--dl-ink);color:var(--dl-paper);border-color:var(--dl-ink)}
.dl .dl-pagination .page-numbers.dots{border-color:transparent}

/* ---- Responsive ---- */
@media (max-width:920px){
  .dl .cover-grid{grid-template-columns:1fr;gap:36px}
  .dl figure.portrait{max-width:360px}
  .dl .fb-row{grid-template-columns:repeat(2,1fr)}
  .dl .fb-cell:nth-child(2){border-right:0}
  .dl .theme-list{grid-template-columns:1fr 1fr}
  .dl .sub-grid,.dl .colo-grid{grid-template-columns:1fr;gap:32px}
  .dl .mast-nav nav{display:none}
}
@media (max-width:560px){
  .dl .wrap{padding:0 20px}
  .dl .row{grid-template-columns:36px 1fr;gap:14px}
  .dl .row .aside{grid-column:2;text-align:left;margin-top:10px}
  .dl .essay{grid-template-columns:1fr;gap:10px}
  .dl .essay .rt{grid-column:1}
  .dl .fb-row{grid-template-columns:1fr 1fr}
  .dl .theme-list{grid-template-columns:1fr}
  .dl .theme-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .dl .mast-meta{display:none}
  .dl .ledger .l-row .v{font-size:24px}
  .dl .a-body{font-size:17.5px}
}