/* Jai Sellers blog — obsidian, foil gold, garnet. Single dark theme by design. */
:root{
  --obsidian:#0C0C0E;
  --onyx:#16151A;
  --gold:#C9A84C;
  --champagne:#E8D5A8;
  --garnet:#6B1220;
  --garnet-lit:#A3283A;
  --ivory:#F3EEE3;
  --ivory-dim:#B9B2A4;
  --rule:rgba(201,168,76,.28);
  --display:"Bodoni Moda",Didot,"Bodoni 72","Times New Roman",serif;
  --body:"Fraunces",Georgia,"Times New Roman",serif;
  --meta:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--obsidian);color:var(--ivory);font-family:var(--body);font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--meta);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.foil{background:linear-gradient(100deg,#8C6A22 0%,var(--gold) 28%,var(--champagne) 48%,var(--gold) 64%,#7D5E1C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
nav.site{position:sticky;top:0;z-index:5;background:rgba(12,12,14,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark svg{width:38px;height:38px;flex:none}
.mark span{font-family:var(--meta);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory)}
nav.site ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-family:var(--meta);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase}
nav.site ul a{text-decoration:none;color:var(--ivory-dim);transition:color .2s}
nav.site ul a:hover{color:var(--champagne)}

/* hero */
.hero{text-align:center;padding-block:88px 72px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto;height:520px;background:radial-gradient(ellipse at center,rgba(201,168,76,.13),transparent 62%);pointer-events:none}
.crest{width:132px;height:132px;margin:0 auto 34px;display:block}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(3rem,10vw,6.6rem);line-height:.95;letter-spacing:-.01em;margin:18px 0 0;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:700}
.hero .lede{font-style:italic;font-weight:300;font-size:1.25rem;color:var(--ivory-dim);max-width:34ch;margin:28px auto 0;text-wrap:balance}
.ornament{display:flex;align-items:center;justify-content:center;gap:18px;margin:44px auto 0;max-width:420px}
.ornament::before,.ornament::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ornament i{width:9px;height:9px;transform:rotate(45deg);background:var(--garnet-lit);box-shadow:0 0 0 3px var(--obsidian),0 0 0 4px var(--gold)}

/* sections */
section{padding-block:72px}
.section-label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:8px}
.section-label h2{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(2rem,5vw,3rem);margin:6px 0 0;line-height:1.05}

/* essays ledger */
.essay{display:grid;grid-template-columns:150px 1fr;gap:32px;padding-block:36px;border-bottom:1px solid var(--rule)}
.essay .meta{font-family:var(--meta);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);display:flex;flex-direction:column;gap:10px}
.tag{display:inline-block;align-self:flex-start;padding:4px 10px;border:1px solid var(--garnet-lit);background:rgba(107,18,32,.35);color:var(--champagne);font-family:var(--meta);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.essay>div:last-child{min-width:0}
.essay h3{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.6vw,2.3rem);line-height:1.12;margin:0;text-wrap:balance}
.essay h3 a{text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .35s}
.essay h3 a:hover{background-size:100% 1px}
.essay p{margin:14px 0 0;color:var(--ivory-dim);max-width:62ch;font-weight:300}
.read{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--meta);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.read::after{content:"";width:28px;height:1px;background:currentColor;transition:width .3s}
.read:hover::after{width:48px}

/* series */
.series{background:linear-gradient(180deg,var(--onyx),var(--obsidian))}
.series .intro{font-style:italic;font-weight:300;color:var(--ivory-dim);max-width:60ch;margin:22px 0 10px}
.series-list{display:flex;flex-direction:column}
.series-item{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:24px;padding-block:26px;border-bottom:1px solid var(--rule);text-decoration:none}
.numeral{font-family:var(--display);font-style:italic;font-weight:700;font-size:3rem;line-height:1;text-align:center}
.series-item h4{font-family:var(--display);font-weight:500;font-size:1.45rem;margin:0;line-height:1.2;text-wrap:balance}
.series-item .body{min-width:0}
.series-item .body small{display:block;margin-top:6px;font-family:var(--meta);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim)}
.status{font-family:var(--meta);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--rule);color:var(--ivory-dim);white-space:nowrap}
.series-item.live .status{border-color:var(--gold);color:var(--obsidian);background:var(--gold)}
a.series-item:hover h4{color:var(--champagne)}
.series-item.pending .numeral{opacity:.35}
.series-item.pending h4{color:var(--ivory-dim);font-style:italic}
.series-item.current{background:rgba(201,168,76,.06)}

/* about */
.about .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.about blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.2;text-wrap:balance}
.about blockquote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;color:var(--garnet-lit)}
.about p{margin:0 0 16px;font-weight:300;color:var(--ivory-dim);max-width:60ch}
.about p:first-child{color:var(--ivory)}

/* article */
.article-head{text-align:center;padding-block:72px 48px;position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.article-head::before{content:"";position:absolute;inset:-40% -10% auto;height:480px;background:radial-gradient(ellipse at center,rgba(163,40,58,.18),transparent 60%);pointer-events:none}
.article-head .crest{width:72px;height:72px;margin-bottom:26px}
.article-head h1{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.02;margin:18px auto 0;max-width:18ch;text-wrap:balance}
.article-head .dek{font-style:italic;font-weight:300;font-size:1.2rem;color:var(--ivory-dim);max-width:46ch;margin:22px auto 0;text-wrap:balance}
.byline{margin-top:28px;font-family:var(--meta);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-dim);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.byline span+span::before{content:"\25C6";color:var(--garnet-lit);margin-right:14px;font-size:.6rem;vertical-align:1px}
.prose{max-width:66ch;margin:0 auto;padding-block:56px 24px;font-size:1.14rem;line-height:1.78}
.prose p{margin:0 0 1.15em}
.prose>p:first-of-type::first-letter{font-family:var(--display);font-weight:700;font-style:italic;float:left;font-size:4.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--gold)}
.prose>p:first-of-type::after{content:"";display:block;clear:both}
.prose strong{color:var(--champagne);font-weight:600}
.prose em{font-style:italic}
.prose a{color:var(--champagne);text-decoration-color:var(--gold);text-underline-offset:3px}
.prose blockquote{margin:2em 0;padding:8px 0 8px 28px;border-left:2px solid var(--garnet-lit);font-family:var(--display);font-style:italic;font-size:1.65rem;line-height:1.3;color:var(--ivory);text-wrap:balance}
.prose blockquote p{margin:0}
.prose hr{border:0;height:1px;margin:3em auto;max-width:220px;background:linear-gradient(90deg,transparent,var(--gold),transparent);overflow:visible;position:relative}
.prose hr::after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;transform:rotate(45deg);background:var(--garnet-lit);box-shadow:0 0 0 3px var(--obsidian),0 0 0 4px var(--gold)}
.prose h2,.prose h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:2em 0 .6em;color:var(--ivory)}
.prose ul,.prose ol{padding-left:1.3em}
.post-series{padding-block:40px 24px}
.post-series .series-item{grid-template-columns:72px 1fr auto}
.post-series .numeral{font-size:2.3rem}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-block:40px 72px}
.pager a{display:block;text-decoration:none;padding:22px 0;border-top:1px solid var(--rule)}
.pager a:last-child{text-align:right}
.pager a h5{font-family:var(--display);font-weight:500;font-size:1.25rem;margin:8px 0 0;line-height:1.25;text-wrap:balance}
.pager a:hover h5{color:var(--champagne)}

/* footer */
footer.site{border-top:1px solid var(--rule);text-align:center;padding-block:64px 56px}
footer.site svg{width:64px;height:64px;margin:0 auto 18px;display:block}
footer.site .line1{font-family:var(--display);font-size:1.5rem;font-style:italic}
footer.site .line2{margin-top:8px;font-family:var(--meta);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-dim)}

@media (prefers-reduced-motion:no-preference){
  .hero .crest{animation:seal 1.4s cubic-bezier(.2,.7,.2,1) both}
  .crest .ring{stroke-dasharray:300;animation:draw 2s .2s ease-out both}
  @keyframes seal{from{transform:scale(.92) rotate(-8deg)}to{transform:none}}
  @keyframes draw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
}

@media (max-width:720px){
  nav.site ul{gap:16px}
  nav.site ul li:nth-child(n+3){display:none}
  .hero{padding-block:56px 48px}
  .essay{grid-template-columns:1fr;gap:12px}
  .essay .meta{flex-direction:row;align-items:center;flex-wrap:wrap}
  .series-item,.post-series .series-item{grid-template-columns:56px 1fr;gap:16px}
  .series-item .status{grid-column:2;justify-self:start}
  .numeral{font-size:2.2rem}
  .about .wrap{grid-template-columns:1fr;gap:32px}
  section{padding-block:52px}
  .article-head{padding-block:48px 36px}
  .prose{font-size:1.06rem;padding-block:40px 16px}
  .prose blockquote{font-size:1.35rem;padding-left:18px}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left}
}