/* ==========================================================================
   The Prop Shed — bespoke stylesheet. No CSS framework.
   Palette and rhythm carried over from the original black / white / blood-red
   workshop pages: black ground, bone-white serif body copy, red rules, and a
   drawn-in-CSS reinterpretation of the old blood-drip divider GIF.
   ========================================================================== */

:root{
  --ink:        #08080b;
  --ink-2:      #0f0f14;
  --ink-3:      #141419;
  --line:       #26262f;
  --line-soft:  #1c1c23;

  --bone:       #e9e3d9;
  --bone-dim:   #9c958a;
  --bone-faint: #6d675e;

  --blood:      #d4121f;
  --blood-lit:  #ff4038;
  --lamp:       #e9a94b;
  --rust:       #a1602d;

  --max:        1180px;
  --measure:    68ch;

  --f-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --f-body: "Spectral", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}

body{
  margin:0;
  color:var(--bone);
  background-color:var(--ink);
  /* faint cutting-mat grid — workshop bench, not a framework demo */
  background-image:
    linear-gradient(rgba(233,227,217,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,227,217,.028) 1px, transparent 1px);
  background-size:46px 46px;
  background-position:center top;
  font-family:var(--f-body);
  font-size:clamp(1rem, .955rem + .22vw, 1.075rem);
  line-height:1.74;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--blood-lit); }
a:focus-visible,
button:focus-visible{ outline:2px solid var(--lamp); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--blood); color:#fff; padding:.7rem 1.1rem;
  font-family:var(--f-head); letter-spacing:.12em; text-transform:uppercase;
  font-size:.8rem; text-decoration:none; z-index:99;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ------------------------------------------------------------ masthead --- */

.masthead{
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#101015 0%, var(--ink) 100%);
}
.masthead__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:1.6rem 1.15rem 1.05rem;
}
.brand{
  display:inline-block;
  font-family:var(--f-head);
  font-weight:600;
  font-size:clamp(1.45rem, 1.1rem + 1.9vw, 2.4rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  line-height:1;
}
.brand em{ font-style:normal; color:var(--blood); }
.brand:hover em{ color:var(--blood-lit); }
.tagline{
  margin:.55rem 0 0;
  font-size:.88rem;
  font-style:italic;
  color:var(--bone-dim);
  max-width:58ch;
  line-height:1.5;
}

/* ----------------------------------------------------------------- nav --- */

.sitenav{
  border-bottom:1px solid var(--line);
  background:rgba(8,8,11,.965);
  z-index:20;
}
@media (min-width:720px){
  .sitenav{ position:sticky; top:0; }
  @supports (backdrop-filter:blur(6px)){
    .sitenav{ background:rgba(8,8,11,.86); backdrop-filter:blur(8px); }
  }
}
.sitenav__bar{
  height:2px;
  background:var(--line-soft);
}
.sitenav__progress{
  display:block;
  height:2px;
  width:0;
  background:var(--blood);
  transition:width .12s linear;
}
.sitenav ul{
  max-width:var(--max);
  margin:0 auto;
  padding:.3rem 1.15rem;
  list-style:none;
  display:flex;
  flex-wrap:wrap;          /* never clip a link off-screen */
  min-width:0;
  gap:0 .1rem;
}
.sitenav li{ min-width:0; }
.sitenav a{
  display:block;
  padding:.62rem .72rem;
  font-family:var(--f-head);
  font-weight:400;
  font-size:.79rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bone-dim);
  text-decoration:none;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.sitenav a:hover,
.sitenav a:focus{ color:var(--bone); border-bottom-color:var(--rust); }
.sitenav a[aria-current="page"]{ color:var(--bone); border-bottom-color:var(--blood); }

@media (max-width:400px){
  .sitenav a{ padding:.5rem .5rem; font-size:.72rem; letter-spacing:.1em; }
}

/* --------------------------------------------------------------- shell --- */

.shell{
  max-width:var(--max);
  margin:0 auto;
  padding:0 1.15rem 3rem;
}

.crumbs{
  padding:1.5rem 0 0;
  font-family:var(--f-head);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-faint);
  display:flex;
  flex-wrap:wrap;
  gap:.1rem .5rem;
  align-items:baseline;
}
.crumbs a{ color:var(--bone-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--blood-lit); }
.crumbs__sep{ color:var(--blood); }

.page-head{
  padding:1.6rem 0 1.9rem;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:2.2rem;
}
.page-head h1{
  font-family:var(--f-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.04;
  font-size:clamp(1.95rem, 1.35rem + 2.7vw, 3.4rem);
  margin:0;
  color:var(--bone);
  overflow-wrap:break-word;
}
.page-head .dek{
  margin:.9rem 0 0;
  max-width:62ch;
  color:var(--bone-dim);
  font-size:1.02rem;
  line-height:1.6;
}

/* -------------------------------------------------------------- layout --- */

.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2.75rem;
  align-items:start;
}
@media (min-width:1000px){
  .layout--rail{ grid-template-columns:minmax(0,1fr) 252px; gap:3.25rem; }
}
main{ min-width:0; }

/* --------------------------------------------------------------- prose --- */

.prose{ max-width:var(--measure); }
.prose > *:first-child{ margin-top:0; }

.prose p{ margin:0 0 1.25rem; }
.prose p strong{ color:#fff; font-weight:600; }
.prose em{ color:var(--bone); }

.prose h2{
  font-family:var(--f-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:clamp(1.22rem, 1.06rem + .62vw, 1.62rem);
  line-height:1.2;
  color:var(--bone);
  margin:3.1rem 0 1.15rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow-wrap:break-word;
}
.prose h2::after{
  content:"";
  position:absolute; left:0; bottom:-1px;
  width:3.4rem; height:2px;
  background:var(--blood);
}
.prose h3{
  font-family:var(--f-head);
  font-weight:500;
  letter-spacing:.055em;
  font-size:1.1rem;
  line-height:1.35;
  color:var(--lamp);
  margin:2.3rem 0 .7rem;
  padding-left:.95rem;
  border-left:3px solid var(--blood);
  overflow-wrap:break-word;
}

.prose ul,
.prose ol{ margin:0 0 1.4rem; padding-left:1.15rem; }
.prose li{ margin:0 0 .7rem; padding-left:.25rem; }
.prose ul{ list-style:none; padding-left:1.3rem; }
.prose ul > li{ position:relative; }
.prose ul > li::before{
  content:"";
  position:absolute;
  left:-1.05rem; top:.72em;
  width:.42rem; height:.42rem;
  background:var(--blood);
  transform:rotate(45deg);
}
.prose ol{ list-style:decimal; }
.prose ol::marker,
.prose li::marker{ color:var(--blood); }

.prose a{
  color:var(--blood-lit);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,64,56,.45);
  overflow-wrap:break-word;
}
.prose a:hover,
.prose a:focus{
  color:#fff;
  background:rgba(212,18,31,.22);
  text-decoration-color:var(--blood-lit);
}

/* tables — always scroll inside their own box, never the page ------------- */
.tw{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  margin:1.7rem 0;
  border:1px solid var(--line);
  background:var(--ink-2);
}
.tw table{
  border-collapse:collapse;
  width:100%;
  min-width:30rem;
  font-size:.94rem;
  line-height:1.55;
}
.tw th{
  font-family:var(--f-head);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.73rem;
  color:var(--lamp);
  text-align:left;
  background:#15151b;
  white-space:nowrap;
}
.tw th,
.tw td{
  padding:.72rem .9rem;
  border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.tw tr:last-child td{ border-bottom:0; }
.tw td strong{ color:#fff; }

/* ------------------------------------------------------------- figures --- */

figure{ margin:2.1rem 0; }
figure img{
  width:100%;
  border:1px solid var(--line);
  background:var(--ink-2);
}
figcaption{
  margin-top:.65rem;
  padding-left:.75rem;
  border-left:2px solid var(--blood);
  font-size:.82rem;
  font-style:italic;
  line-height:1.5;
  color:var(--bone-dim);
  max-width:60ch;
}
.fig--hero{ margin:0 0 2.4rem; }
.fig--hero img{ border-color:var(--line); }

/* ---------------------------------------------- the blood-drip divider --- */
/* A CSS redraw of the original site's bloodbar.gif. Two drip layers at
   different sizes and offsets so the rhythm does not read as a tile.        */
.drip{
  position:relative;
  height:30px;
  margin:3.2rem 0 2.6rem;
  background:linear-gradient(var(--blood),var(--blood)) top left / 100% 5px no-repeat;
}
.drip::before,
.drip::after{
  content:"";
  position:absolute;
  left:0; right:0; top:4px;
  height:26px;
}
.drip::before{
  background-image:radial-gradient(circle at 50% 0, var(--blood) 47%, transparent 48%);
  background-size:38px 40px;
  background-repeat:repeat-x;
}
.drip::after{
  background-image:radial-gradient(circle at 50% 0, var(--blood) 40%, transparent 41%);
  background-size:23px 62px;
  background-position:11px 0;
  background-repeat:repeat-x;
  opacity:.85;
}

/* ---------------------------------------------------------------- rail --- */

.rail{
  min-width:0;
  font-size:.88rem;
  line-height:1.55;
}
@media (min-width:1000px){
  .rail{ position:sticky; top:5rem; }
}
.rail__block{
  border-top:2px solid var(--blood);
  background:var(--ink-2);
  padding:1.05rem 1.1rem 1.15rem;
  margin:0 0 1.15rem;
}
.rail__block--warn{
  border-top-color:var(--lamp);
  background:#131009;
}
.rail__h{
  font-family:var(--f-head);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--bone-dim);
  margin:0 0 .75rem;
}
.rail p{ margin:0; color:var(--bone-dim); }
.rail a{ color:var(--bone); text-decoration:none; border-bottom:1px solid rgba(212,18,31,.55); }
.rail a:hover{ color:#fff; border-bottom-color:var(--blood-lit); }

.rail__series,
.rail__toc{ list-style:none; margin:0; padding:0; }
.rail__series li{ margin:0 0 .55rem; }
.rail__series a{ display:flex; flex-wrap:wrap; min-width:0; gap:.6rem; align-items:baseline; border-bottom:0; }
.rail__n{
  font-family:var(--f-head);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--blood);
  border:1px solid var(--line);
  padding:0 .4rem;
  flex:0 0 auto;
}
.rail__series li.is-current > a{ color:var(--lamp); }
.rail__series li.is-current .rail__n{ background:var(--blood); color:#fff; border-color:var(--blood); }

.rail__toc li{ margin:0 0 .45rem; padding-left:.85rem; position:relative; }
.rail__toc li::before{
  content:"";
  position:absolute; left:0; top:.62em;
  width:.32rem; height:.32rem;
  background:var(--rust);
  transform:rotate(45deg);
}
.rail__toc a{ color:var(--bone-dim); border-bottom:0; }
.rail__toc a:hover{ color:var(--bone); }
.rail__back a{ font-family:var(--f-head); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; }

/* --------------------------------------------------------- part pager --- */

.pager{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.85rem;
  margin:3rem 0 0;
  max-width:var(--measure);
}
@media (min-width:640px){
  .pager{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pager__next:only-child{ grid-column:2; }
}
.pager a{
  display:block;
  min-width:0;
  padding:.95rem 1.1rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-left:3px solid var(--blood);
  text-decoration:none;
  color:var(--bone);
}
.pager a:hover{ background:var(--ink-3); border-left-color:var(--blood-lit); }
.pager__next{ text-align:right; border-left:1px solid var(--line) !important; border-right:3px solid var(--blood); }
.pager__next:hover{ border-right-color:var(--blood-lit); }
.pager__k{
  display:block;
  font-family:var(--f-head);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bone-faint);
  margin-bottom:.22rem;
}
.pager__t{ display:block; font-size:.95rem; line-height:1.35; }

.backlink{
  margin:2.6rem 0 0;
  font-family:var(--f-head);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.76rem;
}
.backlink a{ color:var(--bone-dim); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.15rem; }
.backlink a:hover{ color:var(--blood-lit); border-bottom-color:var(--blood); }

/* ------------------------------------------------------------ projects --- */

.projects{ margin-top:1rem; }
.section-h{
  font-family:var(--f-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:clamp(1.3rem,1.1rem+.8vw,1.8rem);
  margin:0 0 .9rem;
  color:var(--bone);
}
.section-lede{
  max-width:66ch;
  color:var(--bone-dim);
  margin:0 0 1.2rem;
}
.section-lede a{ color:var(--blood-lit); }

.cards{
  list-style:none;
  margin:1.8rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 224px), 1fr));
  gap:1.15rem;
}
.card{ min-width:0; }
.card > a{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
  background:var(--ink-2);
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--bone);
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.card > a:hover,
.card > a:focus{
  border-color:var(--blood);
  background:var(--ink-3);
  transform:translateY(-2px);
}
.card img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border:0;
  border-bottom:1px solid var(--line);
  filter:saturate(.92) contrast(1.04);
}
.card > a:hover img{ filter:saturate(1.05) contrast(1.06); }
.card__body{ display:block; padding:.85rem .95rem 1.05rem; }
.card__title{
  display:block;
  font-family:var(--f-head);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.9rem;
  color:var(--bone);
  margin-bottom:.4rem;
}
.card > a:hover .card__title{ color:var(--lamp); }
.card__blurb{
  display:block;
  font-size:.86rem;
  line-height:1.5;
  color:var(--bone-dim);
}

/* -------------------------------------------------------------- footer --- */

.sitefoot{
  border-top:3px solid var(--blood);
  background:#0b0b0f;
  margin-top:4rem;
  padding:2.6rem 1.15rem 3.2rem;
}
.sitefoot__inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2rem;
}
@media (min-width:820px){
  .sitefoot__inner{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:3rem; }
}
.sitefoot__brand{
  font-family:var(--f-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:1.1rem;
  margin:0;
  color:var(--bone);
}
.sitefoot__brand em{ font-style:normal; color:var(--blood); }
.sitefoot__tag{
  margin:.35rem 0 1.1rem;
  font-size:.84rem;
  font-style:italic;
  color:var(--bone-faint);
  max-width:40ch;
}
.sitefoot__nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  min-width:0;
  gap:.35rem 1.1rem;
}
.sitefoot__nav li{ min-width:0; }
.sitefoot__nav a{
  font-family:var(--f-head);
  font-size:.74rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--bone-dim);
  text-decoration:none;
}
.sitefoot__nav a:hover{ color:var(--blood-lit); }

.disclaimer{
  margin:0;
  font-size:.8rem;
  line-height:1.62;
  color:var(--bone-faint);
  max-width:78ch;
  border-left:2px solid var(--line);
  padding-left:.95rem;
}
.copyright{
  margin:1.1rem 0 0;
  font-family:var(--f-head);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

/* ------------------------------------------------------------- a11y ------ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* Safeguard: nothing on this site may depend on JavaScript to become visible. */
[data-aos]{ opacity:1 !important; transform:none !important; }