/* Scholarship Baji blog. Shared by /blog/ and every post so a design tweak
   never means touching each page. Tokens are copied verbatim from index.html;
   if they change there, change them here too. */
:root{
  --canvas:#F4EADB; --paper:#E9D9BE; --card:#FFFFFF;
  --ink:#221708; --espresso:#251A10; --muted:#5A4B38;
  --terra:#CD6845; --rust:#96401E;
  --ochre:#C68A2E; --ochre-ink:#7A5410;
  --hairline:#CDB694; --rule:#B69A6E; --field:#877257; --ok:#4C6318;
  --font-head:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-script:'Caveat',cursive;
  --maxw:1120px; --pad:clamp(1.25rem,5vw,2.5rem); --radius:18px;
  /* The palette is light by design. Without this, Android and in-app browsers
     running auto-dark invert the cream to a muddy grey of their own choosing. */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem,.96rem + .3vw,1.125rem);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* Paper grain, same whisper as the front page */
body::after{content:''; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--ochre); color:var(--ink)}
h1,h2,h3{font-family:var(--font-head); font-optical-sizing:auto; margin:0 0 .4em}
h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem); font-weight:800; font-stretch:88%; line-height:1.02; letter-spacing:-.025em; max-width:22ch}
h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,2rem); font-weight:700; font-stretch:92%; line-height:1.1; letter-spacing:-.015em}
h3{font-size:1.35rem; font-weight:700; line-height:1.15; letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
section{padding-block:clamp(3.5rem,7vw,5.5rem); scroll-margin-top:5rem}
.ground{background:var(--paper)}
.band{background:linear-gradient(180deg,#2E2214,var(--espresso) 60%); color:var(--canvas)}
.band--slim{padding-block:clamp(2.25rem,5vw,3rem)}
/* Caveat's script overhang runs into the next word, so buy it a sliver of air */
.baji{font-family:var(--font-script); font-weight:700; font-size:1.15em; color:var(--ochre-ink); padding-inline-end:.06em}
.band .baji,.ft .baji{color:var(--ochre)}
.lead{font-size:clamp(1.15rem,1.05rem + .5vw,1.375rem); line-height:1.5; font-weight:400}
.section-lead{color:var(--muted); max-width:52ch; margin-top:-.2rem; margin-bottom:2rem}
/* The baji's margin notes, same signature move as the front page */
.wrap--annotated{display:grid; grid-template-columns:minmax(0,1fr) clamp(0px,14vw,200px); gap:clamp(1rem,3vw,2.5rem)}
.note{font-family:var(--font-script); font-weight:700; font-size:1.4rem; line-height:1.25;
  color:var(--rust); transform:rotate(-2.5deg); align-self:center; margin:0}
.note--inline{display:inline-block; margin-top:.75rem}
/* Hidden via opacity, not clip-path: Chromium's IntersectionObserver reports
   ratio 0 for a fully clip-pathed element, so it would never fire. */
.js .note:not(.is-in){opacity:0}
@keyframes write{from{clip-path:inset(-15% 100% -15% 0)} to{clip-path:inset(-15% 0 -15% 0)}}
.note.is-in{animation:write .55s cubic-bezier(.25,.8,.35,1) both}
.rv .note.is-in{animation-delay:.4s}
@media (max-width:900px){
  .wrap--annotated{grid-template-columns:1fr}
  .wrap--annotated .note{justify-self:start; margin-top:.5rem; padding-left:1rem; border-left:2px solid var(--terra); transform:rotate(-1.5deg)}
}
/* Scroll reveals, gentler and rarer here than on the front page */
.js .rv{opacity:0; transform:translateY(12px)}
.js .rv.is-in{opacity:1; transform:none;
  transition:opacity .5s ease var(--d,0s), transform .5s cubic-bezier(.2,.7,.3,1) var(--d,0s)}
/* A keyboard user must never wait out a reveal to see what they just focused, and
   nested reveals multiply their opacities. Beats both rules above on specificity. */
.js .rv:focus-within{opacity:1; transform:none; transition:none}
/* Buttons: hard offset shadow, print not material */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-head); font-weight:700; font-stretch:92%; font-size:1.05rem; letter-spacing:.01em;
  padding:.85rem 1.4rem; border-radius:999px; border:2px solid var(--ink);
  text-decoration:none; cursor:pointer; min-height:48px;
}
.btn--terra{background:var(--terra); color:var(--ink); box-shadow:3px 3px 0 var(--ink);
  transition:transform .14s cubic-bezier(.2,.7,.3,1), box-shadow .14s}
.btn--terra:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink)}
.btn--terra:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink)}
.btn--ghost{background:transparent; color:var(--ink); transition:background .14s}
.btn--ghost:hover{background:rgba(32,19,8,.06)}
:is(.band,.ft) .btn--terra{box-shadow:3px 3px 0 rgba(244,234,219,.9)}
:is(.band,.ft) .btn--terra:hover{box-shadow:5px 5px 0 rgba(244,234,219,.9)}
:is(.band,.ft) .btn--ghost{color:var(--canvas); border-color:var(--canvas)}
:is(.band,.ft) .btn--ghost:hover{background:rgba(244,234,219,.12)}
.btn:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
:is(.band,.ft) :is(.btn,a):focus-visible{outline:3px solid var(--canvas); outline-offset:3px}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .js .note{clip-path:none !important; opacity:1 !important}
  .js .rv{opacity:1 !important; transform:none !important}
}
/* Print gets the fully revealed page, no grain */
@media print{
  body::after{display:none}
  .js .rv{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important}
  .js .note{opacity:1 !important; clip-path:none !important; animation:none !important}
}
.skip{position:fixed; left:-999px; top:0; background:var(--ink); color:var(--canvas); padding:.6rem 1rem; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0}
/* Header, same sticky bar as the front page */
.hd{position:sticky; top:0; z-index:50; background:rgba(244,234,219,.9);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--hairline); transition:box-shadow .25s ease}
.hd--scrolled{box-shadow:0 3px 16px rgba(34,23,8,.09)}
.hd__row{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:1rem}
.hd__brand{font-family:var(--font-head); font-weight:800; font-size:1.25rem; text-decoration:none; white-space:nowrap}
.hd__nav{display:flex; align-items:center; gap:1.4rem}
.hd__nav a{text-decoration:none; font-weight:600; white-space:nowrap}
.hd__nav a:not(.btn):hover{color:var(--rust)}
/* "page" on the listing, "location" on a post (the link points at the section,
   not at the post you are reading). Both get the same rust highlight. */
.hd__nav a[aria-current]{color:var(--rust)}
.hd__nav .hd__cta{padding:.5rem 1.05rem; min-height:40px; font-size:.95rem; box-shadow:2px 2px 0 var(--ink)}
.hd__nav .hd__cta:hover{box-shadow:4px 4px 0 var(--ink)}
.hd__nav .hd__cta:active{box-shadow:1px 1px 0 var(--ink)}
.hd__burger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer; min-width:44px; min-height:44px; padding:0 9px}
.hd__burger span{width:26px; height:3px; background:var(--ink); border-radius:2px}
/* 960, not 860: the desktop nav needs ~920px, so between 861 and 919 the brand and
   every nav label used to wrap mid-phrase. Snapped half-screen windows land in there. */
@media (max-width:960px){
  .hd__burger{display:flex}
  .hd__nav{position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--canvas); border-bottom:1px solid var(--hairline); padding:.5rem var(--pad) 1.25rem;
    max-height:0; overflow:hidden; visibility:hidden;
    /* visibility flips to hidden only AFTER the collapse finishes, but back to visible
       instantly on open. Transitioning it symmetrically left the links unfocusable for
       the first frame, so a fast Enter-then-Tab escaped the panel. */
    transition:max-height .25s ease, visibility 0s linear .25s}
  .hd__nav a{padding:.75rem 0; width:100%}
  .hd__nav.open{max-height:min(80svh,40rem); overflow-y:auto; visibility:visible;
    transition:max-height .25s ease, visibility 0s linear 0s}
  .hd__nav .hd__cta{margin-top:.5rem; padding:.85rem 1.4rem; min-height:48px; font-size:1.05rem; box-shadow:3px 3px 0 var(--ink)}
  /* Scroll lock lives inside the media query on purpose: nothing clears .open on
     resize, so a class-only lock would freeze the desktop page with no visible panel. */
  html.nav-lock{overflow:hidden}
}
/* Blog index hero */
.bloghero{padding-block:clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,2.5rem)}
.bloghero h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4rem)}
/* Post list: ruled entries, print not cards */
.cards{list-style:none; margin:0; padding:0; max-width:72ch}
.cards li{border-top:1px solid var(--rule)}
.cards li:last-child{border-bottom:1px solid var(--rule)}
.card{display:block; padding:clamp(1.5rem,3vw,2rem) 0; text-decoration:none}
.card__meta{color:var(--muted); font-size:.9rem; margin:0 0 .35rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline}
.card__meta .di{color:var(--ochre-ink)}
.card :is(h2,h3){margin:0 0 .35rem; transition:color .14s}
.card:hover :is(h2,h3),.card:focus-visible :is(h2,h3){color:var(--rust)}
.card p{color:var(--muted); margin:0; max-width:62ch}
.card:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
/* Post pages */
.crumb{display:inline-block; font-family:var(--font-head); font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; color:var(--rust);
  text-decoration:none; margin-bottom:1.25rem}
.crumb:hover{text-decoration:underline}
.post{padding-top:clamp(2.5rem,6vw,4rem)}
.post__meta{color:var(--muted); font-size:.95rem; margin:0 0 1.75rem; display:flex; flex-wrap:wrap; gap:.6rem; align-items:baseline}
.post__meta .di{color:var(--ochre-ink)}
.post__body{max-width:68ch}
.post__body h2{margin-top:2.4rem}
.post__body ul,.post__body ol{margin:0 0 1rem; padding-left:1.4rem}
.post__body li{margin-bottom:.5rem}
.post__body li::marker{color:var(--rust); font-weight:700}
.post__body strong{color:var(--espresso)}
/* Closing card: the same object language as the form card on the front page */
.post__cta{background:var(--card); border:2px solid var(--ink); border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.4rem); box-shadow:6px 6px 0 var(--rule);
  margin-top:clamp(2.5rem,5vw,3.5rem); max-width:640px}
.post__cta h2{margin-top:0}
.post__cta .btn{margin:.25rem 0 .75rem}
.post__cta p:last-child{margin-bottom:0}
.post__cta .form-reassure{margin-bottom:1.1rem}
.fine{color:var(--muted); font-size:.9rem; max-width:62ch}
/* Read next: reuses the .cards list from the blog index so there is one card component */
.readnext{margin-top:clamp(2.5rem,5vw,3.5rem); max-width:640px}
.form-reassure{display:block; color:var(--muted); font-size:.95rem}
/* Footer, same as the front page */
.ft{background:var(--espresso); color:var(--canvas); padding-block:clamp(2.5rem,6vw,4rem);
  border-top:1px solid rgba(244,234,219,.15)}
.ft a{color:var(--canvas)}
.ft__grid{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ft__brand{font-family:var(--font-head); font-weight:800; font-size:1.4rem; margin-bottom:.5rem}
.ft__mission{color:rgba(244,234,219,.8); max-width:40ch}
.ft__col{display:flex; flex-direction:column; align-items:flex-start; gap:.9rem}
.ft__base{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.5rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(244,234,219,.15); color:rgba(244,234,219,.7); font-size:.9rem}
/* AlbIT-kortet, unchanged from the front page: it carries AlbIT's own profile */
.albit-kort{
  --ak-ink:#111111; --ak-gold:#C9A227; --ak-grey:#9A9A96; --ak-line:#2A2A2A;
  --ak-spring:cubic-bezier(.34,1.45,.5,1);
  position:relative; overflow:hidden;
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:22px 26px 20px;
  background:var(--ak-ink); border:1px solid var(--ak-line); border-radius:3px;
  text-align:left; text-decoration:none;
  transition:transform .25s var(--ak-spring), box-shadow .25s, border-color .25s}
.albit-kort::before{content:''; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skew(-20deg); transition:left .55s ease; pointer-events:none}
.albit-kort:hover,.albit-kort:focus-visible{transform:translateY(-4px); border-color:var(--ak-gold);
  box-shadow:0 16px 44px rgba(0,0,0,.5)}
.albit-kort:hover::before,.albit-kort:focus-visible::before{left:130%}
.ft .albit-kort:focus-visible{outline:2px solid var(--ak-gold); outline-offset:3px}
.ak-kicker{display:inline-flex; align-items:center; gap:10px;
  font-family:Montserrat,'Trebuchet MS',sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ak-grey)}
.ak-kicker::before{content:''; width:26px; height:2px; background:var(--ak-gold)}
.ak-logo{display:block; height:34px; width:auto}
.ak-rad{display:flex; align-items:baseline; justify-content:space-between; gap:28px;
  width:100%; padding-top:13px; border-top:1px solid var(--ak-line)}
.ak-tagline{font-family:Inter,Arial,sans-serif; font-size:12.5px; color:var(--ak-grey)}
.ak-cta{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;
  font-family:Montserrat,'Trebuchet MS',sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ak-gold)}
.ak-arr{display:inline-block; transition:transform .25s}
.albit-kort:hover .ak-arr,.albit-kort:focus-visible .ak-arr{transform:translate(3px,-3px)}
@media (max-width:640px){
  .albit-kort{width:100%; max-width:360px; margin:12px auto 0}
}