@font-face{font-family:"InboundHand";src:url("/fonts/auzhera.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"Breathing";src:url("/fonts/breathing.ttf") format("truetype");font-weight:400;font-display:swap}

/* palette mirrors styles.css :root on the home page — keep the two in sync */
:root{
  --paper:#EFE6D8; --paper-2:#e4d9c6; --accent:#1E3FD6; --orange:#E8752B;
  --ink:#14151a; --ink-soft:#33353d; --muted:#8f9099; --line:rgba(20,21,26,.14);
  --sans:"Archivo",-apple-system,"Segoe UI",sans-serif; --serif:"Fraunces",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;position:relative;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;line-height:1.6;text-rendering:optimizeLegibility}

/* paper grain — identical to .grain in styles.css on the home page */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.15' intercept='-0.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
::selection{background:var(--accent);color:#fff}

/* ---- header ---- */
.bl-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding-block:clamp(20px,3vw,34px)}
.bl-head .bl-mark{grid-column:1;justify-self:start}
/* brush wordmark — letters at varying angles/baselines (same as hero) */
.wordmark{display:inline-flex;align-items:flex-end;gap:0;text-decoration:none;
  font-family:"InboundHand",cursive;font-weight:400;color:var(--accent);line-height:.9}
.wordmark .l{display:inline-block;text-transform:lowercase}
.l-i{font-size:calc(var(--u) * 1.02);transform:rotate(-3deg)}
.l-n{font-size:calc(var(--u) * .66);transform:translateY(.02em) rotate(2deg)}
.l-b{font-size:calc(var(--u) * 1.18);transform:translateY(.06em) rotate(-2deg);margin:0 .04em 0 .12em}
.l-o{font-size:calc(var(--u) * .7);transform:translateY(-.12em) rotate(4deg)}
.l-u{font-size:calc(var(--u) * .4);transform:translateY(-1.05em) rotate(-5deg);margin-left:.14em}
.l-n2{font-size:calc(var(--u) * .5);transform:translateY(-.12em) rotate(3deg);margin-right:.18em}
.l-d{font-size:calc(var(--u) * .78);transform:translateY(-.04em) rotate(-3deg)}
.bl-mark{--u:clamp(1.6rem,2.6vw,2.3rem)}
/* site nav — mirrors .hero__nav on the home page.
   The home page's --mono is Archivo (not a monospace), so use --sans here
   to match it; Space Mono stays for the blog's own meta/eyebrow type. */
.bl-nav{grid-column:2;justify-self:center;
  display:flex;gap:clamp(16px,3vw,48px);white-space:nowrap;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.bl-nav a{color:var(--ink-soft);text-decoration:none;transition:color .25s}
.bl-nav a:hover{color:var(--accent)}
.bl-nav a[aria-current]{color:var(--accent)}
@media (max-width:640px){
  .bl-head{grid-template-columns:1fr;gap:14px}
  .bl-nav{grid-column:1;justify-self:start;gap:12px;font-size:.54rem;letter-spacing:.1em}
}

/* ---- journal index (full-bleed card slider) ---- */
.bl-journal{--gut:clamp(22px,5vw,64px);
  --edge:calc(max(0px,(100vw - 1400px) / 2) + var(--gut))}
.bl-head--edge{padding-left:var(--edge);padding-right:var(--edge);max-width:none;margin:0}

.jr-hero{padding:clamp(26px,5vw,66px) var(--edge) clamp(30px,4.4vw,58px);overflow:hidden}
.jr-title{margin:0;font-family:var(--sans);font-weight:300;letter-spacing:-.045em;line-height:.9;
  font-size:clamp(3.2rem,15.4vw,13.5rem);display:flex;justify-content:space-between;
  white-space:nowrap;width:104%}
.jr-title span:last-child{color:var(--accent)}
.jr-lead{color:var(--ink-soft);max-width:56ch;margin:clamp(22px,2.8vw,38px) 0 0;
  font-size:clamp(1rem,1.2vw,1.16rem)}

.jr-slider{padding:0 0 clamp(60px,9vw,130px)}
.jr-track{display:flex;gap:clamp(14px,1.5vw,22px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-padding-left:var(--edge);
  padding:2px var(--gut) 8px var(--edge);
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.jr-track::-webkit-scrollbar{display:none}
.jr-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.jr-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.jr-track.is-dragging .jr-card{pointer-events:none}
.jr-card__img{-webkit-user-drag:none;user-select:none}

.jr-card{position:relative;flex:0 0 auto;width:clamp(258px,27vw,392px);aspect-ratio:3 / 4.05;
  border-radius:6px;overflow:hidden;isolation:isolate;scroll-snap-align:start;
  background:var(--paper-2);text-decoration:none;color:#fff}
.jr-card__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Cards are portrait, so a wide photo gets cropped to its middle. When the subject
   isn't in the middle of the source image that cuts them out — Reese sits to the
   right of her frame. Nudge the crop window across so she lands in the card. */
.jr-card__img--right{object-position:75% center}
.jr-card:hover .jr-card__img{transform:scale(1.05)}
.jr-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,0) 32%,rgba(14,13,11,.3) 56%,rgba(14,13,11,.86) 100%)}
.jr-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(18px,1.7vw,26px);padding-right:clamp(62px,6vw,90px)}
.jr-card__t{font-family:var(--sans);font-weight:400;margin:0 0 .95em;
  font-size:clamp(1.1rem,1.5vw,1.46rem);line-height:1.16;letter-spacing:-.02em;text-wrap:balance}
.jr-card__meta{font-family:var(--sans);font-weight:300;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.8);margin:0}
.jr-card__go{position:absolute;z-index:3;right:clamp(18px,1.7vw,26px);bottom:clamp(18px,1.7vw,26px);
  width:42px;height:42px;display:grid;place-items:center;border-radius:3px;
  background:#fff;color:var(--ink);font-size:1.55rem;line-height:1;padding-bottom:3px;
  transition:background .25s,color .25s,transform .25s cubic-bezier(.2,.7,.2,1)}
.jr-card:hover .jr-card__go{background:var(--accent);color:#fff;transform:translateX(3px)}

.jr-nav{display:flex;gap:10px;justify-content:flex-end;padding:clamp(20px,2.4vw,34px) var(--edge) 0}
.jr-arrow{width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-radius:4px;
  color:var(--ink);font-size:1rem;font-family:var(--sans);
  transition:background .22s,color .22s,border-color .22s,opacity .22s}
.jr-arrow:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.jr-arrow:disabled{opacity:.28;cursor:default}

/* ---- article ---- */
/* The hero runs the full width of .wrap; everything else sits in a centred reading
   column so the text isn't stranded against the left edge on a wide screen.
   --measure keeps the back link, meta, headline and body all on the same axis. */
.bl-article{padding-block:clamp(26px,4vw,56px) clamp(60px,10vw,120px);--measure:660px}
/* Header block (back / meta / headline) sits flush left, on the same axis as the
   hero below it. The body keeps its centred reading column. */
.bl-article__meta,.bl-article h1{max-width:var(--measure);margin-inline:0}
.bl-body{max-width:var(--measure);margin-inline:auto}
.bl-back{font-family:var(--sans);font-weight:300;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);text-decoration:none;display:block;
  width:-moz-fit-content;width:fit-content;
  margin:0 0 clamp(28px,5vw,54px)}
.bl-back:hover{color:var(--accent)}
.bl-article__meta{font-family:var(--sans);font-weight:300;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);margin:0 0 1.3rem}
.bl-article h1{font-family:var(--sans);font-weight:300;color:var(--accent);
  font-size:clamp(2rem,5.2vw,4rem);line-height:1.03;letter-spacing:-.035em;
  margin:0 0 clamp(28px,4.4vw,48px);text-wrap:balance}
/* Full-width hero at a fixed 16:9. That ratio is the native shape of several of the
   photos and a mild crop on the 3:2 ones — unlike the old 16/7, which was severe
   enough to remove a standing subject's head. object-position sits above centre
   because faces live in the upper half of these shots; keep it there. */
.bl-article__hero{margin:0 0 clamp(32px,5vw,60px);border-radius:8px;overflow:hidden;
  width:100%;aspect-ratio:16 / 9;background:var(--paper-2)}
.bl-article__hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* One post still uses a square source photo, and a 1:1 cropped to 16:9 loses far more
   height than the landscape ones do — at the shared 30% the speaker's hair met the top
   edge. Slice higher for that one until it gets a landscape photo like the others. */
.bl-article__hero--square img{object-position:center 12%}
.bl-body p{font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.75;color:var(--ink-soft);margin:0 0 1.55em}
.bl-body p.lead-p{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.5;color:var(--ink);margin-bottom:1.4em}
.bl-body h2{font-family:var(--sans);font-weight:400;color:var(--ink);
  font-size:clamp(1.22rem,2vw,1.6rem);line-height:1.22;letter-spacing:-.022em;margin:2.3em 0 .9em}
.bl-body ol{margin:0 0 1.75em;padding-left:1.5em;
  font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.7;color:var(--ink-soft)}
.bl-body li{margin:0 0 .85em;padding-left:.35em}
.bl-body li::marker{color:var(--orange);font-family:var(--mono);font-size:.82em}
.bl-body strong{color:var(--ink);font-weight:600}
.bl-body em{font-style:italic}

/* end CTA */
/* Full container width, like the hero — not capped to the reading measure. Capped at
   64ch it sat narrow against the left edge while everything above it was centred. */
.bl-cta{margin:clamp(46px,6vw,86px) 0 0;
  padding:clamp(32px,4vw,54px);background:var(--paper-2);border-radius:16px}
.bl-cta__q{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 1.2rem;text-wrap:balance}
.bl-cta__sub{color:var(--ink-soft);margin:0 0 1.6rem;font-size:clamp(.98rem,1.1vw,1.1rem);max-width:46ch}
.bl-btn{display:inline-flex;align-items:center;gap:.55em;background:var(--accent);color:#fff;
  text-decoration:none;font-weight:500;font-size:clamp(.9rem,1.05vw,1rem);letter-spacing:.02em;
  padding:.95em 1.8em;border-radius:40px;box-shadow:0 12px 32px rgba(30,63,214,.24);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,background .28s}
.bl-btn:hover{transform:translateY(-3px);background:#173bc7;box-shadow:0 18px 44px rgba(30,63,214,.34)}
.bl-btn span{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.bl-btn:hover span{transform:translateX(4px)}

/* ---- footer ---- */
.bl-foot{background:var(--paper-2);margin-top:clamp(40px,6vw,80px)}
/* padding-block only — a `padding: X 0` shorthand here cancelled .wrap's side
   padding, so the footer ran edge to edge on a phone while the home page's didn't. */
.bl-foot__in{padding-block:clamp(40px,6vw,80px);display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}
.bl-foot__mark{--u:clamp(3.2rem,6vw,5.4rem)}   /* matches .foot__mark on the home page */
/* Archivo + .14em to match .foot__fine on the home page. The blog's --mono is a real
   monospace (Space Mono) whereas the home page's --mono is Archivo, so using --mono
   here made the two footers look like different sites. */
.bl-foot__fine{font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;line-height:1.9;
  text-transform:uppercase;color:var(--muted);max-width:70ch;margin:0}

@media (max-width:820px){
  .jr-title{flex-direction:column;align-items:flex-start;width:auto;
    font-size:clamp(3.4rem,17vw,7rem);line-height:.94}
  .jr-card{width:min(76vw,330px)}
  .jr-nav{justify-content:flex-start}
  .bl-article__hero img{max-height:62vh}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .jr-card__img,.jr-card__go{transition:none}
  .jr-card:hover .jr-card__img{transform:none}
}