/* Because It's Me — Spec Sheet v3 */
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Barlow Condensed"; font-style:normal; font-weight:800;
  font-display:swap; src:url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:italic; font-weight:400;
  font-display:swap; src:url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/source-serif-4-latin-700-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root{
  --ink:#121212; --bone:#EEEAE2; --panel:#F7F5F0;
  --steel:#55524C; --rule:#C9C3B6;
  --hivis:#C8102E; --hivis-text:#8A0F1F;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
  --heavy:6px; --bold:3px; --hair:1px;
  --max:76rem; --side:18.5rem; --measure:38rem;
  --gutter:clamp(1.25rem,4vw,2.5rem); --gap:clamp(2rem,5vw,4.5rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font:400 1.125rem/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;
}
button,input{font-family:var(--mono)}
a{
  color:var(--ink);
  text-decoration:underline 2px var(--hivis);
  text-underline-offset:.2em; font-style:normal;
}
a:hover{background:var(--hivis); color:var(--ink); text-decoration:none}
:focus-visible{outline:3px solid var(--hivis); outline-offset:3px}
::selection{background:var(--hivis); color:var(--ink)}
.muted{color:var(--steel)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.layout{
  display:grid; grid-template-columns:minmax(0,1fr) var(--side);
  gap:var(--gap); align-items:start;
}

/* masthead */
.top{background:var(--ink); color:var(--bone); border-bottom:var(--heavy) solid var(--hivis)}
.top-in{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:1rem 2rem; padding:2rem 0 1.5rem;
}
.top .wrap{padding-left:max(var(--gutter),1.25rem); padding-right:max(var(--gutter),1.25rem)}
.brand{max-width:100%; overflow-wrap:anywhere}
.id{display:flex; flex-direction:column; gap:.6rem}
.brand{
  font:800 clamp(2.75rem,7vw,5rem)/.92 var(--display);
  letter-spacing:.01em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
}
.brand:hover{color:var(--bone); background:transparent; text-decoration:none}
.tag{
  font:500 .78rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone); opacity:.8;
}
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  font:500 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--hivis); text-decoration:underline 2px var(--hivis);
  text-underline-offset:.25em; padding:.8rem 0; min-height:44px;
}
.cta:hover{background:transparent; color:var(--bone); text-decoration:underline 2px var(--bone)}

/* hero */
.hero{padding:3.5rem 0 4rem}
.hero-grid{display:flex; flex-direction:column; align-items:stretch; gap:0}
.hero-prose{max-width:var(--measure); width:100%; margin:0}
.hero-label{
  display:inline-block; margin:0 0 1rem;
  font:500 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--hivis-text); border-bottom:var(--bold) solid var(--hivis); padding-bottom:.25rem;
}
.hero-prose > p:first-of-type{
  font:800 clamp(2.6rem,6.5vw,4.75rem)/.92 var(--display);
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink);
  margin:0 0 2.5rem;
}
.hero-prose > p:first-of-type strong{font-weight:800}
.hero-prose > p{
  font:400 1.2rem/1.7 var(--serif); color:var(--ink); margin:0 0 1.3em;
}
.timeline + p{
  font:700 1.9rem/1.1 var(--display); letter-spacing:.01em; text-transform:uppercase;
  margin:2.5rem 0 1rem;
}
.hero-prose > p:last-of-type{
  font:800 clamp(2.4rem,6vw,4.25rem)/1 var(--display);
  letter-spacing:.01em; text-transform:uppercase; margin:2.5rem 0 0;
  color:var(--ink);
}
.hero-prose > p:last-of-type strong{
  background:none; padding:0; color:var(--ink); font-weight:800;
}

/* timeline */
.timeline{position:relative; margin:2.5rem 0}
.timeline::before{
  content:""; position:absolute; left:5.75rem; top:.5rem; bottom:.5rem;
  width:var(--bold); background:var(--hivis);
}
.timeline p{position:relative; padding-left:7.5rem; margin:0 0 1.9rem}
.timeline p::before{
  content:""; position:absolute; left:calc(5.75rem - 5px); top:.55em;
  width:13px; height:13px; background:var(--ink);
}
.timeline .yr{
  position:absolute; left:0; top:-.1em; width:5rem; text-align:right;
  font:800 clamp(2.25rem,4vw,3rem)/1 var(--display); color:var(--ink);
}
.timeline .yr::after{
  content:"yrs ago"; display:block; margin-top:.2rem;
  font:500 .68rem/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}

/* hero photo */
.hero-photo{margin:3rem 0 0; max-width:24rem; width:100%}
.hero-photo img{
  display:block; width:100%; height:auto;
  border:var(--bold) solid var(--ink);
  filter:grayscale(1) contrast(1.08);
}
@media (prefers-reduced-motion:no-preference){
  .hero-photo img{transition:filter .3s}
}
.hero-photo:hover img,.hero-photo:focus-within img{filter:none}

/* sidebar */
.side{
  position:sticky; top:1.5rem; max-height:calc(100vh - 3rem); overflow:auto;
  padding-top:3.5rem;
}
.side .kicker{
  font:500 .78rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  background:var(--ink); color:var(--bone); padding:.7rem .85rem;
  border-bottom:var(--bold) solid var(--hivis); margin:0 0 1rem;
}
.side #q{
  appearance:none; width:100%; min-height:44px; margin:0 0 1.25rem;
  background:var(--panel); border:2px solid var(--ink);
  padding:.65rem .8rem; font:500 .9rem/1.3 var(--mono); color:var(--ink);
}
.side #q::placeholder{color:var(--steel)}
.side #q:focus{outline:none; border-color:var(--hivis)}

.fold{margin:0; border:0}
.fold summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.5rem 0;
  font:700 1.35rem/1.1 var(--display); letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink); border-top:var(--hair) solid var(--ink);
}
.fold summary::-webkit-details-marker{display:none}
.fold .num{
  font:500 .78rem/1 var(--mono); letter-spacing:.08em; color:var(--steel);
  min-width:1.6rem;
}
.fold .lab{flex:1; text-align:left}
.fold .n{
  font:500 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); margin-left:auto;
}
.fold summary::after{
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:1.6rem; height:1.6rem; margin-left:.75rem;
  font:500 1.1rem/1 var(--mono); border:2px solid var(--ink); color:var(--ink);
}
.fold[open] summary::after{content:"\2212"; background:var(--ink); color:var(--bone)}
.fold ul{list-style:none; margin:0 0 1rem; padding:0}
.fold li{margin:0; padding:0}
.fold li + li{border-top:var(--hair) solid var(--rule)}
.fold li a{
  display:block; padding:.65rem 0; min-height:44px;
  font:400 1.0625rem/1.4 var(--serif); color:var(--ink); text-decoration:none;
}
.fold li a:hover{
  background:transparent; color:var(--hivis-text);
  text-decoration:underline 2px var(--hivis); text-underline-offset:.2em;
}
.fold li a[aria-current="true"]{color:var(--hivis-text)}
.fold li.muted{font-style:italic; color:var(--steel); padding:.65rem 0}

/* modal reader */
dialog#modal{
  border:0; border-top:var(--heavy) solid var(--hivis); padding:0; margin:auto;
  width:min(60rem,100vw); max-width:100vw;
  height:min(94vh,100%); max-height:100vh;
  background:var(--panel); color:var(--ink);
}
dialog#modal::backdrop{background:rgba(18,18,18,.82)}
dialog#modal article{
  height:100%; overflow-y:auto;
  padding:4.5rem clamp(1.25rem,6vw,5rem) 5rem; position:relative;
}
.close{
  position:sticky; top:0; float:right; margin:-3.25rem -1.25rem 0 0;
  background:var(--ink); border:0; color:var(--bone);
  font:500 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  padding:.75rem 1rem; min-height:44px; cursor:pointer; z-index:2;
}
.close:hover{background:var(--hivis); color:var(--ink)}
#mbody > .sec{
  display:inline-block;
  font:500 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  background:var(--hivis); color:var(--ink); padding:.35rem .6rem;
}
#mbody > h1{
  font:800 clamp(2.4rem,5.5vw,4rem)/.92 var(--display);
  letter-spacing:.01em; text-transform:uppercase;
  margin:1rem 0 1.1rem; max-width:20ch;
}
#mbody > .meta{
  font:500 .78rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel); padding-bottom:1.25rem;
  border-bottom:var(--bold) solid var(--ink); margin:0 0 2.5rem;
}
.body{max-width:var(--measure)}
#mbody .body{font:400 1.2rem/1.7 var(--serif); color:var(--ink)}
#mbody .body p{margin:0 0 1.3em}
#mbody .body h2{
  font:700 1.6rem/1.1 var(--display); letter-spacing:.01em; text-transform:uppercase;
  border-top:var(--bold) solid var(--ink); padding-top:.5em; margin:2.4em 0 .6em;
}
#mbody .body h3{
  font:700 1.3rem/1.1 var(--display); letter-spacing:.01em; text-transform:uppercase;
  margin:2em 0 .5em;
}
#mbody .body h4{
  font:500 .78rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--hivis-text); margin:2em 0 .5em;
}
#mbody .body ul{list-style:square; padding-left:1.35em; margin:0 0 1.3em}
#mbody .body ol{padding-left:1.35em; margin:0 0 1.3em}
#mbody .body ul li::marker{color:var(--hivis)}
#mbody .body ol li::marker{font-family:var(--mono); color:var(--hivis-text)}
#mbody .body li{margin:.4em 0}
#mbody .body img{
  display:block; max-width:100%; height:auto;
  border:var(--bold) solid var(--ink); margin:2em 0;
}
#mbody .body hr{
  border:0; width:4rem; height:var(--heavy); background:var(--hivis); margin:3em 0;
}
.vid{
  position:relative; aspect-ratio:16/9; margin:0 0 2rem;
  border:var(--bold) solid var(--ink);
}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* blockquotes */
#mbody .body blockquote{
  margin:2.25em 0; padding:1.4rem 1.5rem; background:var(--bone);
  border-left:var(--heavy) solid var(--hivis);
  font-style:normal; font-size:1.1rem;
}
#mbody .body blockquote > h4:first-child{
  margin:0 0 .8rem; font:700 1.3rem/1.1 var(--display);
  letter-spacing:.01em; text-transform:uppercase; color:var(--ink);
}
#mbody .body blockquote > :last-child{margin-bottom:0}
#mbody .body blockquote:has(> p:only-child){
  background:none; border-left:0; padding:1.25rem 0;
  border-top:var(--bold) solid var(--ink); border-bottom:var(--bold) solid var(--ink);
  font:700 1.75rem/1.1 var(--display); text-transform:uppercase; letter-spacing:.01em;
}
#mbody .body blockquote blockquote{
  background:none; margin:1.25em 0; padding:.2rem 0 .2rem 1rem;
  border:0; border-left:var(--bold) solid var(--ink);
  font:italic 400 1.2rem/1.5 var(--serif); text-transform:none;
}

/* footer */
.foot{
  background:var(--ink); color:var(--bone);
  border-top:var(--heavy) solid var(--hivis); padding:2.5rem 0 3rem;
}
.foot-in{
  display:flex; flex-wrap:wrap; gap:.85rem 2rem; align-items:center;
  font:500 .78rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.foot-in span:first-child{margin-right:auto; color:var(--bone)}
.foot a{
  color:var(--bone); text-decoration:underline 2px var(--hivis); text-underline-offset:.2em;
}
.foot a:hover{background:var(--hivis); color:var(--ink); text-decoration:none}

@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .side{position:static; max-height:none; overflow:visible; padding-top:0}
}
@media (max-width:640px){
  .top-in{flex-direction:column; align-items:flex-start}
  .brand{font-size:clamp(1.85rem,11vw,2.75rem)}
  .cta{align-self:flex-start}
  body{font-size:1.125rem}
  .hero-prose > p:first-of-type{font-size:clamp(2rem,10vw,2.6rem)}
  .timeline::before{left:3.4rem}
  .timeline p{padding-left:4.75rem}
  .timeline p::before{left:calc(3.4rem - 5px)}
  .timeline .yr{width:2.9rem; font-size:1.9rem}
  .timeline .yr::after{font-size:.58rem}
  dialog#modal{width:100vw; height:100vh; height:100dvh}
  dialog#modal article{padding:4rem 1.25rem 4rem}
  .close{margin:-2.75rem -.15rem 0 0}
}