/* Voices by Night — by Intradiegetic. Shared stylesheet for voicesbynight.com and review.voicesbynight.com */
@import url('/fonts/fonts.css');
:root{
  --paper:#F3EFE7; --paper-2:#EBE5DA; --surface:#FBF9F5; --ink:#15171C; --ink-2:#3A3D45; --muted:#6E6F73;
  --line:#D9D2C5; --night:#121826; --night-2:#1B2436; --midnight:#22345A; --moon:#E9E2D3; --copper:#A8683A;
  --serif:'Erode','Iowan Old Style','Palatino Linotype',serif; --sans:'Switzer','Helvetica Neue',system-ui,sans-serif;
  --wrap:1180px; --read:68ch; --r:2px;
  --t-xs:.78rem; --t-sm:.875rem; --t-base:1.0625rem; --t-lg:1.3rem; --t-xl:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); --t-2xl:clamp(2.2rem,1.4rem + 3vw,3.6rem); --t-hero:clamp(3rem,1.6rem + 5.6vw,6.4rem);
  color-scheme:light;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-base)/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto} a{color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.eyebrow{font:600 var(--t-xs)/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.serif{font-family:var(--serif)} .ital{font-style:italic}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;margin:0;line-height:1.08;text-wrap:balance}
p{margin:0 0 1em} .muted{color:var(--muted)}

/* masthead */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:34px;height:34px;flex:none}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font:500 1.02rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.brand .wm i{font:italic 400 .82rem/1 var(--serif);color:var(--muted);margin-top:6px;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav a{text-decoration:none;font:500 var(--t-sm)/1 var(--sans);color:var(--ink-2);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--ink);color:var(--ink)}
.nav a.cta{border:1px solid var(--ink);padding:10px 16px;border-radius:var(--r)}
.nav a.cta:hover{background:var(--ink);color:var(--paper)}
.menu{display:none;background:none;border:1px solid var(--line);padding:8px 10px;font:500 var(--t-sm) var(--sans);color:var(--ink)}

/* buttons/forms */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 var(--t-sm)/1 var(--sans);letter-spacing:.02em;text-decoration:none;padding:15px 22px;border-radius:var(--r);border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer}
.btn:hover{background:var(--midnight);border-color:var(--midnight)}
.btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.light{background:var(--moon);color:var(--night);border-color:var(--moon)} .btn.light:hover{background:#fff}
.signup{display:flex;gap:8px;flex-wrap:wrap;max-width:520px}
.signup input[type=email]{flex:1 1 240px;min-width:0;font:400 1rem var(--sans);padding:14px 16px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r)}
.dark .signup input[type=email]{background:rgba(255,255,255,.06);border-color:rgba(233,226,211,.28);color:var(--moon)}
.dark .signup input::placeholder{color:#9aa0ab}
.fine{font-size:var(--t-xs);color:var(--muted);margin-top:10px;max-width:52ch;line-height:1.5}
.hp{position:absolute;left:-5000px}
.form-msg{font:500 var(--t-sm) var(--sans);margin-top:10px;min-height:1.2em}

/* hero */
.hero{position:relative;background:var(--night);color:var(--moon);overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:70% 50%;opacity:.62}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,24,38,.97) 0%,rgba(18,24,38,.86) 38%,rgba(18,24,38,.25) 75%,rgba(18,24,38,.1) 100%)}
.hero .wrap{position:relative;min-height:min(78vh,720px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:96px;padding-bottom:72px}
.hero .eyebrow{color:#B9B3A6}
.hero h1{font-size:var(--t-hero);font-weight:300;max-width:9.5em;margin:18px 0 22px;line-height:.98}
.hero h1 em{font-style:italic;color:#fff}
.hero p.deck{font:400 clamp(1.08rem,.95rem + .45vw,1.32rem)/1.55 var(--serif);max-width:36em;color:#D8D2C4}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .btn.ghost{color:var(--moon);border-color:rgba(233,226,211,.5)} .hero .btn.ghost:hover{background:var(--moon);color:var(--night)}

/* sections */
.sec{padding:clamp(56px,8vw,112px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:34px}
.sec-head h2{font-size:var(--t-xl)}
.sec-head a{font:500 var(--t-sm) var(--sans);text-decoration:none;border-bottom:1px solid var(--line)}
.rule{height:1px;background:var(--line);border:0;margin:0}

.lead-essay{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.lead-essay figure{margin:0}
.lead-essay h3{font-size:var(--t-2xl);margin:14px 0 16px}
.lead-essay p{font:400 1.14rem/1.6 var(--serif);color:var(--ink-2);max-width:34em}
.byline{font:500 var(--t-xs)/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:18px}
.byline span+span::before{content:"·";margin:0 8px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.card{text-decoration:none;display:block;border-top:1px solid var(--ink);padding-top:16px}
.card h3{font-size:1.5rem;margin:10px 0 10px;line-height:1.15}
.card p{color:var(--ink-2);font-size:.98rem;margin:0}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.tag{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}

/* review panel */
.review-band{background:var(--night);color:var(--moon)}
.review-band .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,90px)}
.review-band h2{font-size:var(--t-2xl);font-weight:300;margin:14px 0 18px}
.review-band .eyebrow{color:#A9A496;font:600 var(--t-xs)/1.3 var(--sans)}
.review-band p.fine{font:400 var(--t-xs)/1.5 var(--sans)}
.review-band p{color:#CFC9BB;font:400 1.1rem/1.6 var(--serif)}
.review-band .fine{color:#9A9588}
.issue-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(233,226,211,.22)}
.issue-list li{padding:18px 0;border-bottom:1px solid rgba(233,226,211,.14)}
.issue-list .s{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#B98B63}
.issue-list a{display:block;text-decoration:none;font:400 1.25rem/1.3 var(--serif);color:#F4EFE4;margin-top:8px}
.issue-list a:hover{text-decoration:underline;text-underline-offset:4px}
.issue-list .src{font:400 var(--t-xs) var(--sans);color:#9A9588;margin-top:6px;letter-spacing:.04em}
.issue-meta{display:flex;justify-content:space-between;font:500 var(--t-xs) var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#A9A496;margin-bottom:12px}

/* cities */
.cities{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.city figure{margin:0 0 20px;aspect-ratio:4/3;overflow:hidden;background:var(--night)}
.city figure img{width:100%;height:100%;object-fit:cover}
.city h3{font-size:var(--t-xl);margin:6px 0 14px}
.events{list-style:none;margin:0;padding:0}
.events li{display:grid;grid-template-columns:92px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.events .d{font:600 var(--t-xs)/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--copper)}
.events a{text-decoration:none;font:500 1.02rem/1.35 var(--sans)} .events a:hover{text-decoration:underline}
.events .v{font-size:var(--t-sm);color:var(--muted);margin-top:3px}

/* quote */
.manifesto{text-align:center;padding:clamp(64px,9vw,128px) 0}
.manifesto blockquote{margin:0 auto;max-width:22em;font:300 var(--t-2xl)/1.15 var(--serif);letter-spacing:-.02em}
.manifesto cite{display:block;margin-top:22px;font:500 var(--t-xs) var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-style:normal}

/* page header (interior) */
.phead{padding:clamp(56px,7vw,96px) 0 clamp(32px,4vw,48px);border-bottom:1px solid var(--line)}
.phead h1{font-size:var(--t-2xl);margin:14px 0 14px;max-width:16em}
.phead p{font:400 1.2rem/1.55 var(--serif);color:var(--ink-2);max-width:38em;margin:0}
.phead p.eyebrow,.sub-wrap p.eyebrow{font:600 var(--t-xs)/1.3 var(--sans);color:var(--muted);margin:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.filters a{font:500 var(--t-sm) var(--sans);text-decoration:none;border:1px solid var(--line);padding:8px 14px;border-radius:999px;color:var(--ink-2)}
.filters a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.essay-list{display:grid;grid-template-columns:repeat(3,1fr);gap:48px clamp(20px,3vw,40px)}
.essay-list .feature{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:28px;text-decoration:none;border-top:1px solid var(--ink);padding-top:16px}
.essay-list .feature h3{font-size:var(--t-xl);margin:10px 0}
.essay-list .feature figure{margin:0;aspect-ratio:4/3;overflow:hidden}
.essay-list .feature img{width:100%;height:100%;object-fit:cover}

/* article */
.article-head{padding:clamp(56px,7vw,100px) 0 36px;text-align:center}
.article-head h1{font-size:var(--t-hero);font-weight:300;margin:18px auto 20px;max-width:11em;line-height:1}
.article-head .standfirst{font:italic 400 1.3rem/1.5 var(--serif);color:var(--ink-2);max-width:32em;margin:0 auto}
.article-fig{margin:0 auto 56px;max-width:1180px}
.article-fig img{width:100%;aspect-ratio:16/8;object-fit:cover}
.article-fig figcaption{font-size:var(--t-xs);color:var(--muted);padding:10px clamp(20px,4vw,48px)}
.prose{max-width:var(--read);margin:0 auto;font:400 1.17rem/1.72 var(--serif);color:var(--ink)}
.prose p:first-of-type::first-letter{float:left;font-size:4.3em;line-height:.82;padding:.06em .1em 0 0;font-weight:400}
.prose p.nodrop::first-letter{float:none;font-size:inherit;padding:0;line-height:inherit}
.prose h2{font-size:1.65rem;margin:2em 0 .6em}
.prose blockquote{margin:1.8em -6ch;padding:0;font:300 1.8rem/1.25 var(--serif);text-align:center;color:var(--midnight)}
.endmark{display:flex;justify-content:center;margin:48px 0 0;color:var(--muted)}
.endmark svg{width:28px;height:28px}

/* about */
.two{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,6vw,96px)}
.principles{list-style:none;margin:0;padding:0;counter-reset:p}
.principles li{counter-increment:p;padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:48px 1fr;gap:12px}
.principles li::before{content:counter(p,upper-roman);font:400 1.1rem var(--serif);color:var(--copper)}
.principles b{display:block;font:500 1.06rem/1.35 var(--sans);margin-bottom:4px}
.principles span{color:var(--ink-2)}
.parent{display:flex;align-items:center;gap:18px;border:1px solid var(--line);padding:22px;background:var(--surface);margin-top:28px}
.parent svg{width:30px;height:34px;flex:none;color:var(--ink);--brace:var(--copper)}

/* footer */
.foot{background:var(--night);color:#B7B1A3;padding:64px 0 36px;font-size:var(--t-sm)}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot .brand{color:var(--moon)} .foot .brand .wm i{color:#9A9588}
.foot h4{font:600 var(--t-xs)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8E8a80;margin:6px 0 16px}
.foot ul{list-style:none;margin:0;padding:0} .foot li{margin:0 0 9px} .foot a{text-decoration:none;color:#D9D3C5} .foot a:hover{text-decoration:underline}
.foot .base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(233,226,211,.14);margin-top:48px;padding-top:22px;font-size:var(--t-xs);color:#8E8a80}
.foot .by{display:inline-flex;align-items:center;gap:10px}
.foot .by svg{width:16px;height:18px;--brace:#B98B63;color:#D9D3C5}

/* subscribe page */
.sub-wrap{display:grid;grid-template-columns:1.1fr 1fr;min-height:calc(100vh - 77px)}
.sub-wrap .art{background:var(--night) center/cover no-repeat;position:relative}
.sub-wrap .art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,24,38,.75),rgba(18,24,38,.1))}
.sub-wrap .art blockquote{position:absolute;z-index:1;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:clamp(24px,4vw,56px);margin:0;color:var(--moon);font:300 var(--t-xl)/1.2 var(--serif)}
.sub-wrap .form{padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.sub-wrap h1{font-size:var(--t-2xl);margin:14px 0 16px}
.checks{list-style:none;padding:0;margin:26px 0 30px} .checks li{padding:10px 0 10px 28px;border-top:1px solid var(--line);position:relative;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:6px;border-left:1.5px solid var(--copper);border-bottom:1.5px solid var(--copper);transform:rotate(-45deg)}
.state{border:1px solid var(--line);background:var(--surface);padding:28px;margin-top:20px}
.state h2{font-size:1.6rem;margin:8px 0 8px}

@media (max-width:900px){
  .lead-essay,.review-band .grid,.cities,.two,.sub-wrap{grid-template-columns:1fr}
  .grid3,.essay-list{grid-template-columns:1fr 1fr} .essay-list .feature{grid-column:span 2}
  .foot .cols{grid-template-columns:1fr 1fr} .sub-wrap .art{min-height:300px}
}
@media (max-width:640px){
  .nav a:not(.cta){display:none} .top .wrap{min-height:64px} .brand .wm b{font-size:.86rem;letter-spacing:.2em}
  .grid3,.essay-list,.essay-list .feature{grid-template-columns:1fr} .essay-list .feature{grid-column:auto}
  .hero .wrap{min-height:82vh;padding-bottom:48px} .hero .bg{background-position:72% 50%}
  .hero .bg::after{background:linear-gradient(0deg,rgba(18,24,38,.98) 25%,rgba(18,24,38,.55) 70%,rgba(18,24,38,.3))}
  .prose blockquote{margin:1.6em 0;font-size:1.45rem} .foot .cols{grid-template-columns:1fr}
  .events li{grid-template-columns:76px 1fr}
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F131C;--paper-2:#151B27;--surface:#161C28;--ink:#ECE6D9;--ink-2:#C9C3B6;--muted:#9993A3;--line:#2A3242;--midnight:#AFC0E2;color-scheme:dark}
  .nav a.cta:hover,.btn:hover{background:var(--moon);color:var(--night)} .btn{background:var(--moon);color:var(--night);border-color:var(--moon)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
  .foot,.review-band,.hero{background:#090C13}
}