/* ==========================================================================
   Case Files - an original Publii theme for blog.syncpundit.io
   Design language: records room / investigative dossier.
   Tokens are CSS custom properties; the five base colors are overridden
   from the Publii GUI via an inline <style> in partials/head.hbs.
   ========================================================================== */

/* ── Fonts (self-hosted; graceful fallbacks until woff2 files are added) ── */
@font-face{
  font-family:'Big Shoulders Display';
  src:url('../fonts/big-shoulders-display-variable.woff2') format('woff2');
  font-weight:700 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Courier Prime';
  src:url('../fonts/courier-prime-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Courier Prime';
  src:url('../fonts/courier-prime-400italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Courier Prime';
  src:url('../fonts/courier-prime-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  /* base palette - overridden from the Publii GUI */
  --desk:#17150f;
  --folder:#d3b877;
  --paper:#efe6cf;
  --ink:#221e14;
  --stamp:#b5311e;

  /* derived */
  --desk-2:color-mix(in srgb, var(--desk) 88%, var(--folder));
  --folder-2:color-mix(in srgb, var(--folder) 88%, var(--ink));
  --folder-3:color-mix(in srgb, var(--folder) 76%, var(--ink));
  --folder-4:color-mix(in srgb, var(--folder) 64%, var(--ink));
  --paper-2:color-mix(in srgb, var(--paper) 88%, var(--folder));
  --thread:color-mix(in srgb, var(--desk) 78%, var(--folder));
  --dim:color-mix(in srgb, var(--folder) 55%, var(--desk));
  --text-on-desk:color-mix(in srgb, var(--paper) 88%, var(--folder));
  --link-ink:color-mix(in srgb, var(--stamp) 72%, var(--ink));
  --green:#155a2e;
  --blue:#20456b;

  --font-display:'Big Shoulders Display','Archivo Narrow','Arial Narrow',sans-serif;
  --font-mono:'Courier Prime','Courier New',Courier,monospace;
  --font-body:'Archivo','Helvetica Neue',Arial,sans-serif;

  --maxw:1180px;
  --readw:860px;
}

/* ── Reset & base ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--desk);
  color:var(--paper);
  font-family:var(--font-body);
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--folder) 7%, transparent), transparent),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.15) 2px 4px);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--folder);color:var(--ink)}
:focus-visible{outline:3px solid var(--folder);outline-offset:2px}
.mono{font-family:var(--font-mono)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--ink);padding:.6rem 1rem;
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;font-size:.75rem;
}
.skip-link:focus{left:0}

/* ── Classification band ── */
.classband{
  background:var(--stamp);
  color:var(--paper);
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.35em;
  text-align:center;
  padding:.45rem .5rem;
  text-transform:uppercase;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ── Header: big (homepage) ── */
.site-header{
  border-bottom:1px solid var(--thread);
  padding:2.2rem 2.5rem 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:1.5rem;
}
.brand{text-decoration:none;display:block}
.brand .kicker{
  font-family:var(--font-mono);
  color:var(--dim);
  font-size:.8rem;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.brand .brand-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.6rem,6vw,4.6rem);
  line-height:.9;
  letter-spacing:.01em;
  color:var(--folder);
  text-transform:uppercase;
}
.brand .brand-title span{color:var(--paper)}
.brand img{max-height:110px;width:auto}

/* compact header (all non-index pages) */
.site-header.compact{padding:1.4rem 2.5rem 0}
.site-header.compact .brand-title{font-size:1.6rem;line-height:1;padding-bottom:.8rem}
.site-header.compact .brand img{max-height:48px}

/* ── Nav: folder tabs ── */
.tabs{display:flex;gap:2px;align-items:flex-end;list-style:none;flex-wrap:wrap}
.tabs a,.tabs .is-separator{
  display:block;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  background:var(--folder);
  padding:.6rem 1.3rem .9rem;
  border-radius:8px 8px 0 0;
  position:relative;
  top:1px;
  border:1px solid rgba(0,0,0,.33);
  border-bottom:none;
  transition:transform .15s ease, background .15s ease;
}
.site-header.compact .tabs a{font-size:.72rem;padding:.5rem 1.1rem .7rem}
.tabs li:nth-child(2) a{background:var(--folder-2)}
.tabs li:nth-child(3) a{background:var(--folder-3)}
.tabs li:nth-child(4) a{background:var(--folder-4)}
.tabs li:nth-child(n+5) a{background:var(--folder-4)}
.tabs a:hover{transform:translateY(-6px);background:var(--paper)}

/* ── Hero (homepage) ── */
.hero{
  padding:3.2rem 2.5rem 2.6rem;
  border-bottom:1px dashed var(--thread);
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
}
.hero .lede-wrap{font-size:1.05rem;line-height:1.65;color:var(--text-on-desk);max-width:34rem}
.hero .lede-wrap b,.hero .lede-wrap strong{color:var(--folder)}
.hero .lede-wrap p+p{margin-top:.8rem}
.stampbox{
  justify-self:end;
  transform:rotate(-7deg);
  border:4px double var(--stamp);
  color:var(--stamp);
  font-family:var(--font-mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  padding:1rem 1.6rem;
  font-size:1.15rem;
  text-align:center;
  opacity:.92;
  animation:stamp .5s cubic-bezier(.2,2.6,.4,1) .4s both;
}
@keyframes stamp{from{transform:rotate(-7deg) scale(2.4);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:.92}}
.stampbox small{display:block;font-size:.6rem;letter-spacing:.3em;margin-top:.3rem}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* redaction - usable anywhere */
.redact{
  background:var(--ink);
  color:var(--ink) !important;
  border-radius:2px;
  padding:0 .4em;
  user-select:none;
  text-decoration:none;
}

/* ── Index bar + grid ── */
.indexbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.4rem 2.5rem .6rem;
  font-family:var(--font-mono);
  color:var(--dim);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  flex-wrap:wrap;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:1.9rem 1.6rem;
  padding:1.4rem 2.5rem 4rem;
}

/* ── Folder card ── */
.case{
  position:relative;
  background:var(--folder);
  color:var(--ink);
  border-radius:4px 10px 4px 4px;
  text-decoration:none;
  box-shadow:0 10px 24px -12px #000, inset 0 0 40px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:filein .5s ease both;
  display:block;
}
.grid .case:nth-child(2){animation-delay:.06s}
.grid .case:nth-child(3){animation-delay:.12s}
.grid .case:nth-child(4){animation-delay:.18s}
.grid .case:nth-child(5){animation-delay:.24s}
.grid .case:nth-child(6){animation-delay:.30s}
.grid .case:nth-child(n+7){animation-delay:.36s}
@keyframes filein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.case .tab{
  position:absolute;
  top:-1.15rem;
  left:1rem;
  background:var(--folder);
  font-family:var(--font-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  padding:.28rem .8rem .1rem;
  border-radius:6px 6px 0 0;
  color:rgba(0,0,0,.56);
  text-transform:uppercase;
  white-space:nowrap;
}
.case.featured .tab{background:var(--paper)}
.case:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 22px 34px -14px #000}
.case-inner{
  padding:1.3rem 1.4rem 1.2rem;
  border:1px solid rgba(0,0,0,.13);
  border-radius:inherit;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.case .meta{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(0,0,0,.63);
  text-transform:uppercase;
}
.case h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.75rem;
  line-height:.98;
  text-transform:uppercase;
}
.case .case-img{
  margin:.2rem 0;
  border:1px solid rgba(0,0,0,.25);
}
.case .excerpt{font-size:.86rem;line-height:1.55;color:rgba(0,0,0,.7)}
.case .excerpt p{display:inline}
.case .foot{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  border-top:1px dashed rgba(0,0,0,.25);
  padding-top:.7rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  color:rgba(0,0,0,.56);
  text-transform:uppercase;
}
.status{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:2px solid currentColor;
  border-radius:3px;
  padding:.12rem .45rem;
  transform:rotate(-2deg);
  display:inline-block;
}
.status.closed{color:var(--stamp)}
.status.ongoing{color:var(--green)}
.status.training{color:var(--blue)}

.case.featured{background:var(--paper)}
.case.featured h2{font-size:2.6rem}
@media (min-width:821px){.case.featured{grid-column:span 2}}

/* ── Pagination ── */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  padding:0 2.5rem 4rem;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pagination a,.pagination span.current{
  text-decoration:none;
  color:var(--ink);
  background:var(--folder);
  border:1px solid rgba(0,0,0,.33);
  padding:.45rem .85rem;
  border-radius:3px;
  font-weight:700;
}
.pagination a:hover{background:var(--paper)}
.pagination span.current{background:var(--paper);transform:rotate(-2deg)}

/* ── Page headers (tag / author / tags / 404) ── */
.page-head{
  max-width:var(--readw);
  margin:0 auto;
  padding:2.6rem 1.5rem 0;
}
.page-head .over{
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
}
.page-head .over a{color:var(--folder);text-decoration:none}
.page-head .over a:hover{text-decoration:underline}
.page-head h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:.92;
  text-transform:uppercase;
  margin:.9rem 0 1rem;
}
.page-head h1 em{font-style:normal;color:var(--folder)}
.page-head .desc{color:var(--text-on-desk);line-height:1.65;max-width:60ch;margin-bottom:1rem}

/* ── Dossier header (post page) ── */
.dossier{
  max-width:var(--readw);
  margin:0 auto;
  padding:2.2rem 1.5rem 0;
}
.crumb{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none;
  margin-bottom:1.4rem;
  transition:color .15s ease;
}
.crumb b{color:var(--folder)}
.crumb:hover{color:var(--paper)}
.crumb:hover b{text-decoration:underline}
.dossier .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--dim);
  flex-wrap:wrap;
}
.dossier .row .case-no{color:var(--folder)}
.dossier h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.6rem,6.5vw,4.8rem);
  line-height:.92;
  text-transform:uppercase;
  margin:1.1rem 0 1.3rem;
}
.meta-strip{
  display:flex;
  gap:1.6rem;
  flex-wrap:wrap;
  align-items:center;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  border-top:1px dashed var(--thread);
  border-bottom:1px dashed var(--thread);
  padding:.8rem 0;
  margin-bottom:2.2rem;
}
.meta-strip b{color:var(--paper);font-weight:400}
.meta-strip a{color:var(--folder);text-decoration:none}
.meta-strip a:hover{text-decoration:underline}
.meta-strip .status{margin-left:auto}

/* ── The opened file: paper article ── */
.file{
  max-width:var(--readw);
  margin:0 auto 3rem;
  padding:0 1.5rem;
  position:relative;
}
.file .paper{
  background:var(--paper);
  color:var(--ink);
  border-radius:3px 12px 4px 4px;
  box-shadow:0 24px 50px -20px #000, inset 0 0 60px rgba(0,0,0,.06);
  padding:3rem clamp(1.4rem,5vw,3.4rem) 3.4rem;
  position:relative;
}
.file .paper .paper-tab{
  position:absolute;
  top:-1.35rem;
  left:1.4rem;
  background:var(--folder);
  color:rgba(0,0,0,.56);
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.18em;
  padding:.3rem .9rem .15rem;
  border-radius:6px 6px 0 0;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:calc(100% - 2.8rem);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ── Article content (Publii post text lands here) ── */
.paper .lede{
  font-size:1.16rem;
  line-height:1.75;
  font-weight:500;
  border-left:5px solid var(--stamp);
  padding-left:1.2rem;
  margin-bottom:2rem;
}
.entry{font-size:1rem;line-height:1.8}
.entry>*+*{margin-top:1.4rem}
.entry p,.entry li{max-width:65ch}
.entry h2,.entry h3,.entry h4{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:1;
  margin-top:2.6rem;
}
.entry h2{font-size:2rem;display:flex;align-items:center;gap:.8rem}
.entry h2::before{content:"§";font-family:var(--font-mono);color:var(--stamp);font-size:1.2rem}
.entry h3{font-size:1.5rem}
.entry h4{font-size:1.2rem}
.entry a{color:var(--link-ink);text-decoration-thickness:2px}
.entry ul,.entry ol{padding-left:1.4rem}
.entry li+li{margin-top:.4rem}
.entry hr{
  border:none;
  border-top:2px dashed rgba(0,0,0,.25);
  margin:2.4rem 0;
}
.entry strong{font-weight:700}

/* exhibits: every content figure/image becomes a photo print */
.entry figure,
.entry .post__image{
  margin:2.2rem 0;
  background:#fff;
  padding:.9rem .9rem .2rem;
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 12px 24px -14px rgba(0,0,0,.5);
  transform:rotate(-.6deg);
  max-width:100%;
}
.entry figure:nth-of-type(even),
.entry .post__image:nth-of-type(even){transform:rotate(.5deg)}
.entry figure img{margin:0 auto}
.entry figcaption{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(0,0,0,.56);
  padding:.65rem .2rem;
  text-align:left;
}
.entry figcaption::before{
  content:"Exhibit - ";
  color:var(--stamp);
}

/* evidence log: code blocks as terminal printouts */
.entry pre{
  background:var(--ink);
  color:#e8ddc0;
  border-radius:4px;
  overflow-x:auto;
  box-shadow:0 12px 24px -14px rgba(0,0,0,.75);
  padding:1.1rem 1.2rem;
  font-family:var(--font-mono);
  font-size:.85rem;
  line-height:1.7;
  position:relative;
}
.entry pre::before{
  content:"evidence log";
  display:block;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--folder);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding-bottom:.5rem;
  margin-bottom:.8rem;
}
.entry pre code{background:none;padding:0;color:inherit;font-size:inherit}
.entry code{
  font-family:var(--font-mono);
  background:rgba(0,0,0,.1);
  padding:.1em .35em;
  border-radius:2px;
  font-size:.92em;
}

/* witness statement: blockquotes as taped-on slips */
.entry blockquote{
  background:var(--paper-2);
  padding:1.6rem 1.6rem 1.2rem;
  position:relative;
  font-style:italic;
  font-size:1.02rem;
  line-height:1.75;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.45);
  transform:rotate(.4deg);
  margin-top:2.2rem;
}
.entry blockquote::before{
  content:"";
  position:absolute;
  top:-.7rem;
  left:50%;
  translate:-50% 0;
  width:110px;
  height:1.4rem;
  background:rgba(138,143,163,.5);
  transform:rotate(-2deg);
}
.entry blockquote cite,.entry blockquote figcaption{
  display:block;
  margin-top:.8rem;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(0,0,0,.56);
  background:none;border:none;box-shadow:none;padding:0;transform:none;
}
.entry blockquote figcaption::before{content:""}

/* chain of custody: opt-in timeline (Custom element on a UL) */
.entry ul.custody{
  border-left:3px solid var(--stamp);
  padding-left:1.6rem;
  list-style:none;
  margin-top:2.4rem;
}
.entry ul.custody li{
  margin-bottom:1.2rem;
  position:relative;
  line-height:1.6;
  max-width:60ch;
}
.entry ul.custody li::before{
  content:"";
  position:absolute;
  left:-1.98rem;
  top:.4rem;
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  background:var(--paper);
  border:3px solid var(--stamp);
}
.entry ul.custody li b,.entry ul.custody li strong{
  display:block;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.56);
}

/* tables: evidence sheets */
.entry table{
  border-collapse:collapse;
  width:100%;
  font-size:.9rem;
  background:#fff;
  box-shadow:0 10px 20px -12px rgba(0,0,0,.4);
}
.entry th,.entry td{
  border:1px solid rgba(0,0,0,.2);
  padding:.55rem .8rem;
  text-align:left;
}
.entry th{
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--paper-2);
}
.entry .table-wrap{overflow-x:auto}

/* inline stamp box for content */
.entry .stampbox,
.paper .stampbox{
  justify-self:auto;
  display:inline-block;
  animation:none;
  font-size:1rem;
  padding:.8rem 1.3rem;
  transform:rotate(-6deg);
  letter-spacing:.22em;
}

/* embeds */
.entry iframe{max-width:100%}
.entry .video,.entry .post__video{position:relative;aspect-ratio:16/9}
.entry .video iframe,.entry .post__video iframe{width:100%;height:100%}

/* Publii gallery */
.entry .gallery{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:2.2rem 0;
}
.entry .gallery__item{flex:1 1 200px;margin:0;transform:none;padding:.5rem .5rem .2rem}

/* ── Verdict / sign-off ── */
.verdict{
  margin-top:3rem;
  border-top:2px dashed rgba(0,0,0,.25);
  padding-top:2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  flex-wrap:wrap;
}
.verdict .sig{
  font-family:var(--font-mono);
  font-size:.8rem;
  line-height:1.8;
  color:rgba(0,0,0,.66);
  display:flex;
  gap:.9rem;
  align-items:center;
}
.verdict .sig img{
  width:52px;height:52px;
  border-radius:50%;
  border:2px solid rgba(0,0,0,.3);
  object-fit:cover;
}
.verdict .sig b{font-size:1rem;color:var(--ink)}
.verdict .sig a{color:inherit;text-decoration:none}
.verdict .sig a:hover b{text-decoration:underline}
.verdict .stampbox{opacity:1}
.verdict .stampbox.ongoing{border-color:var(--green);color:var(--green)}
.verdict .stampbox.training{border-color:var(--blue);color:var(--blue)}

/* ── Desk row: tags + share under the paper ── */
.deskrow{
  max-width:var(--readw);
  margin:0 auto;
  padding:0 1.5rem 2.5rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}
.deskrow a,.deskrow button{
  color:var(--folder);
  text-decoration:none;
  background:none;
  border:none;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  padding:0;
}
.deskrow a:hover,.deskrow button:hover{text-decoration:underline}
.deskrow .tags a{margin-right:.9rem}

/* ── Edge file tabs: prev/next case ── */
.edgetab{
  position:fixed;
  top:44%;
  z-index:20;
  text-decoration:none;
  display:flex;
  align-items:center;
  transition:transform .22s ease;
}
.edgetab .spine{
  background:var(--folder);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  writing-mode:vertical-rl;
  padding:1.1rem .45rem;
  border:1px solid rgba(0,0,0,.33);
  box-shadow:0 8px 18px -8px #000;
}
.edgetab .card{
  background:var(--paper);
  color:var(--ink);
  width:200px;
  padding:.8rem 1rem;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 14px 26px -12px #000;
}
.edgetab .card .dir{
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,0,0,.56);
}
.edgetab .card .t{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  line-height:1;
  text-transform:uppercase;
  margin-top:.3rem;
  display:block;
}
.edgetab.prev{left:0;flex-direction:row-reverse;transform:translateX(-201px)}
.edgetab.prev .spine{border-radius:0 6px 6px 0;border-left:none;transform:rotate(180deg)}
.edgetab.prev:hover,.edgetab.prev:focus-visible,.edgetab.prev:focus-within{transform:translateX(0)}
.edgetab.next{right:0;transform:translateX(201px)}
.edgetab.next .spine{border-radius:6px 0 0 6px;border-right:none}
.edgetab.next:hover,.edgetab.next:focus-visible,.edgetab.next:focus-within{transform:translateX(0)}
@media (max-width:1180px){.edgetab{display:none}}

/* ── Cross-referenced files (prev/next minis) ── */
.related{
  max-width:var(--readw);
  margin:0 auto;
  padding:0 1.5rem 4rem;
}
.related .rh{
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:1.6rem;
}
.related .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.9rem 1.4rem}
@media (max-width:680px){.related .row2{grid-template-columns:1fr}}
.mini{
  position:relative;
  background:var(--folder);
  color:var(--ink);
  border-radius:4px 10px 4px 4px;
  text-decoration:none;
  padding:1.1rem 1.2rem;
  box-shadow:0 10px 24px -12px #000, inset 0 0 40px rgba(0,0,0,.08);
  transition:transform .18s ease;
  display:block;
}
.mini .tab{
  position:absolute;
  top:-1.05rem;
  left:.9rem;
  background:var(--folder);
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  padding:.26rem .7rem .08rem;
  border-radius:6px 6px 0 0;
  color:rgba(0,0,0,.56);
  text-transform:uppercase;
}
.mini:hover{transform:translateY(-4px) rotate(-.4deg)}
.mini .dir{
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.16em;
  color:rgba(0,0,0,.56);
  text-transform:uppercase;
}
.mini h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.45rem;
  line-height:.98;
  text-transform:uppercase;
  margin-top:.35rem;
}

/* ── Comments ── */
.comments{
  max-width:var(--readw);
  margin:0 auto;
  padding:0 1.5rem 3rem;
}
.comments .inner{
  background:var(--paper);
  color:var(--ink);
  border-radius:4px;
  padding:2rem;
}

/* ── After-post banner ── */
.afterpost{
  max-width:var(--readw);
  margin:0 auto;
  padding:0 1.5rem 3rem;
  color:var(--text-on-desk);
}

/* ── Tags index: the drawers ── */
.drawers{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.9rem 1.4rem;
  padding:1.8rem 2.5rem 4rem;
  max-width:var(--maxw);
  margin:0 auto;
}
.drawer{
  position:relative;
  background:var(--folder);
  color:var(--ink);
  border-radius:4px 10px 4px 4px;
  text-decoration:none;
  padding:1.2rem 1.3rem;
  box-shadow:0 10px 24px -12px #000, inset 0 0 40px rgba(0,0,0,.08);
  transition:transform .18s ease;
  display:block;
}
.drawer .tab{
  position:absolute;
  top:-1.05rem;
  left:.9rem;
  background:var(--folder);
  font-family:var(--font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
  padding:.26rem .7rem .08rem;
  border-radius:6px 6px 0 0;
  color:rgba(0,0,0,.56);
  text-transform:uppercase;
}
.drawer:hover{transform:translateY(-4px) rotate(-.4deg)}
.drawer h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.6rem;
  line-height:.98;
  text-transform:uppercase;
}
.drawer .count{
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(0,0,0,.56);
  text-transform:uppercase;
  display:block;
  margin-top:.5rem;
}

/* ── Author page bio card ── */
.author-card{
  max-width:var(--readw);
  margin:1.6rem auto 0;
  padding:0 1.5rem;
  display:flex;
  gap:1.2rem;
  align-items:center;
  color:var(--text-on-desk);
}
.author-card img{
  width:72px;height:72px;
  border-radius:50%;
  border:2px solid var(--folder);
  object-fit:cover;
}
.author-card .bio{line-height:1.65;max-width:56ch}
.author-card .bio a{color:var(--folder)}

/* ── 404 ── */
.missing{
  min-height:52vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:4rem 1.5rem;
}
.missing .stampbox{
  justify-self:center;
  font-size:1.6rem;
  animation-delay:.15s;
}
.missing p{
  margin-top:2.2rem;
  color:var(--text-on-desk);
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.1em;
}
.missing a{color:var(--folder)}

/* ── Footer ── */
.site-footer{
  border-top:1px solid var(--thread);
  padding:2rem 2.5rem 3rem;
  font-family:var(--font-mono);
  color:var(--dim);
  font-size:.75rem;
  letter-spacing:.15em;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  text-transform:uppercase;
}
.site-footer a{color:var(--folder);text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ── Back to top: a folder tab rising from the bottom edge ── */
.totop{
  position:fixed;
  right:1.4rem;
  bottom:0;
  z-index:20;
  background:var(--folder);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.55rem 1rem .7rem;
  border-radius:8px 8px 0 0;
  border:1px solid rgba(0,0,0,.33);
  border-bottom:none;
  box-shadow:0 -6px 16px -8px #000;
  transform:translateY(110%);
  transition:transform .25s ease, background .15s ease;
}
.totop.show{transform:translateY(0)}
.totop.show:hover{background:var(--paper);transform:translateY(-4px)}
.totop:focus-visible{transform:translateY(0)}

/* ── Responsive ── */
@media (max-width:820px){
  .site-header,.site-header.compact{padding-left:1.3rem;padding-right:1.3rem}
  .hero{grid-template-columns:1fr;padding:2.4rem 1.3rem 2rem;gap:1.6rem}
  .stampbox{justify-self:start}
  .indexbar,.grid,.pagination{padding-left:1.3rem;padding-right:1.3rem}
  .drawers{padding-left:1.3rem;padding-right:1.3rem}
  .site-footer{padding-left:1.3rem;padding-right:1.3rem}
  .grid{grid-template-columns:1fr}
}