/* ============================================================
   The Operator · Spike Foundry
   v4 "masthead-as-stamp" — unified stylesheet
   Mixed-media theme: case-file dossier + whiteboard + marker plan
   ============================================================ */

:root{
  --ink:#1a1a1a;
  --ink-soft:#2e2e2e;
  --muted:#8a8a8a;
  --muted-soft:#b5b0a0;
  --paper:#faf8f2;
  --board:#f3f1ea;
  --frame:#d9d3c0;
  --rule:#e6e0cf;
  --rule-dashed:#cfc9b8;

  --marker-red:#c8351f;
  --marker-blue:#1f5eb8;
  --marker-green:#1c8a4f;

  --sticky:#fdf2a8;
  --highlight:#ffeb7a;

  --maxw:1040px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Fraunces",Georgia,"Iowan Old Style",serif;
  font-size:17px;
  line-height:1.7;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
hr{border:none;border-top:1px solid var(--rule);margin:40px 0}

::selection{background:var(--highlight);color:var(--ink)}

/* -------- Skip link (a11y) -------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--marker-red);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 3px;
  z-index: 1000;
  transition: top .15s ease;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--marker-red);
  outline-offset: 2px;
}

/* ============================================
   Masthead — stamp + dynamic FILE/STATUS overlay + editorial column + nav
   The stamp graphic at site/assets/img/masthead.jpg has an empty top zone
   into which the FILE/STATUS overlay is positioned via percentages.
   IF the masthead image is regenerated with different proportions, retune
   the .stamp-overlay percentages below.
   ============================================ */

.masthead{
  background:var(--paper);
}
.masthead-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:200px 1fr auto;
  gap:28px;
  padding:22px 40px 18px;
  align-items:flex-start;
  border-bottom:1px dashed var(--rule-dashed);
}

.masthead .stamp{position:relative;width:200px}
.masthead .stamp img{display:block;width:100%;height:auto}

.stamp-overlay{
  position:absolute;
  top:14%; left:14%; right:14%; height:24%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  color:var(--marker-red);
  text-transform:uppercase;
  letter-spacing:.08em;
  line-height:1.35;
  pointer-events:none;
}
.stamp-overlay .file-line{font-size:11px;font-weight:500}
.stamp-overlay .status-line{font-size:9.5px;font-weight:400;margin-top:3px;opacity:.85}
.stamp-overlay .status-line .val{color:var(--marker-red);font-weight:500}

.masthead-editorial{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:180px;
  padding-left:28px;
  border-left:1px dotted var(--rule-dashed);
}
.masthead-editorial .kicker{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:10px;
}
.masthead-editorial .kicker .red{color:var(--marker-red)}
.masthead-editorial .headline{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:30px;
  line-height:1.15;
  color:var(--ink);
  margin:0 0 8px;
  max-width:520px;
}
.masthead-editorial .headline em{
  font-style:italic;
  color:var(--marker-red);
}
.masthead-editorial .sub{
  font-family:"Fraunces",serif;
  font-style:italic;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
  max-width:520px;
  margin:0;
}
.masthead-editorial .pointer{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--marker-blue);
  text-transform:uppercase;
  margin-top:14px;
}
.masthead-editorial .pointer .arrow,
.masthead-editorial .pointer .dot{margin-right:6px;display:inline-block}
.masthead-editorial .pointer .arrow,
.masthead-editorial .pointer .dot{color:var(--marker-red)}
.masthead-editorial .pointer a{color:var(--marker-blue)}
.masthead-editorial .pointer a:hover{color:var(--marker-red)}

.masthead nav.main{
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  font-size:12px;
  padding-top:6px;
}

/* Post-page byline (replaces inline post-meta strip) */
.post .byline{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
}
.post .byline a{color:var(--muted);border-bottom:1px dotted #c8c2b0}
.post .byline a:hover{color:var(--marker-red);border-bottom-color:var(--marker-red)}

/* Closing stamp on post footer */
.post-footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}
.closing-stamp{
  flex:0 0 130px;
  max-width:130px;
  transform:rotate(-3deg);
  opacity:.92;
}
.closing-stamp img{
  display:block;
  width:100%;
  height:auto;
  mix-blend-mode:multiply;
}

/* Masthead mobile collapse — single column at ≤760px */
@media (max-width:760px){
  .masthead-inner{
    grid-template-columns:minmax(118px,34vw) 1fr;
    column-gap:16px;
    row-gap:14px;
    padding:18px 24px 12px;
    align-items:center;
  }
  .masthead .stamp{
    width:100%;
    max-width:150px;
    justify-self:start;
  }
  .stamp-overlay{letter-spacing:.04em}
  .stamp-overlay .file-line{font-size:clamp(6.5px,1.85vw,9px);white-space:nowrap}
  .stamp-overlay .status-line{font-size:clamp(5.5px,1.6vw,8px);white-space:nowrap}
  .masthead-editorial{
    border-left:1px dotted var(--rule-dashed);
    border-top:none;
    padding-left:14px;
    padding-top:0;
    min-height:auto;
  }
  .masthead-editorial .kicker{
    font-size:clamp(8.5px,2.25vw,10px);
    letter-spacing:.14em;
    margin-bottom:7px;
  }
  .masthead-editorial .headline{
    font-size:clamp(20px,6.2vw,24px);
    line-height:1.12;
  }
  .masthead-editorial .sub{
    font-size:clamp(13px,3.6vw,14px);
    line-height:1.42;
  }
  .masthead-editorial .pointer{
    font-size:clamp(8.5px,2.35vw,10px);
    letter-spacing:.1em;
    margin-top:10px;
  }
  .masthead nav.main{
    grid-column:1 / -1;
    width:100%;
    flex-direction:row;
    flex-wrap:nowrap;
    gap:0;
    padding-top:12px;
    border-top:1px dotted var(--rule-dashed);
    align-items:center;
    justify-content:space-between;
    font-size:11px;
    letter-spacing:.12em;
  }
  .masthead nav.main a.active svg{
    left:50%;
    top:50%;
    width:calc(100% + 14px);
    height:calc(100% + 9px);
    transform:translate(-50%,-50%);
  }
  .post-footer{padding-bottom:16px}
  .closing-stamp{flex:0 0 96px;max-width:96px}
}

/* -------- Page wrapper -------- */
.page{max-width:var(--maxw);margin:0 auto;padding:44px 40px 120px}

nav.main{
  font-family:"Inter",ui-sans-serif,sans-serif;
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:flex;
  gap:28px;
  align-items:center;
  padding-top:0;
  flex-wrap:wrap;
}
nav.main a{color:#aaa;transition:color .15s}
nav.main a:hover{color:var(--ink)}
nav.main a.active{
  color:var(--marker-red);
  position:relative;
  padding:4px 2px;
}
nav.main a.active svg{
  position:absolute;
  left:-10px;
  top:-6px;
  width:calc(100% + 20px);
  height:calc(100% + 12px);
  pointer-events:none;
}

/* -------- Board pane (home) -------- */
.board{
  position:relative;
  background:var(--board);
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.03) 1px,transparent 1px);
  background-size:30px 30px;
  border:1px solid var(--frame);
  border-radius:3px;
  padding:44px 48px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.03),0 4px 18px rgba(0,0,0,.06);
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:48px;
  align-items:start;
}
.bio p{margin:0 0 14px 0}
.bio p:last-child{margin-bottom:0}
.bio a{
  color:var(--marker-red);
  border-bottom:1px solid var(--marker-red);
}
.highlight{
  background:linear-gradient(180deg,transparent 55%,var(--highlight) 55%,var(--highlight) 92%,transparent 92%);
  padding:0 2px;
}

/* -------- Case-board layout: image is the board, bio overlays as case-notes -------- */
.board.case-board-layout{
  display:block;
  background:none;
  background-image:none;
  border:none;
  box-shadow:none;
  padding:0;
  position:relative;
  overflow:hidden;
  border-radius:3px;
}
.board.case-board-layout .case-board{
  display:block;
  width:100%;
  height:auto;
}
.board.case-board-layout picture{display:block}
.board.case-board-layout .bio{
  position:absolute;
  top:5%;
  left:3.5%;
  width:33%;
  max-width:400px;
  background:rgba(250,248,242,.9);
  padding:18px 24px;
  box-shadow:0 6px 18px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
  transform:rotate(-.5deg);
  border-radius:2px;
  font-size:14px;
  line-height:1.5;
}
.board.case-board-layout .bio p{margin:0 0 8px 0}
.board.case-board-layout .bio p:last-child{margin-bottom:0}
.board.case-board-layout .bio p.stanza{
  margin:0 0 10px 0;
  line-height:1.45;
}

@media (max-width:760px){
  .board.case-board-layout{
    background:var(--paper);
    border:1px solid var(--frame);
  }
  .board.case-board-layout picture{
    background:#f8f3e7;
  }
  .board.case-board-layout .bio{
    position:static;
    transform:none;
    background:transparent;
    box-shadow:none;
    padding:18px 20px 22px;
    width:auto;
    max-width:none;
    font-size:16px;
  }
}

/* -------- Legacy polaroid + sticky + arrow (still used by other surfaces) -------- */
.polaroid{
  position:absolute;
  top:10px;
  right:20px;
  background:#fff;
  padding:14px 14px 36px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transform:rotate(3.2deg);
  width:180px;
}
.polaroid .photo{
  width:100%;
  aspect-ratio:1/1;
  background:#bdb9ad;
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.polaroid .photo svg,
.polaroid .photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.polaroid .caption{
  font-family:"Caveat",cursive;
  font-size:17px;
  color:#2e2e2e;
  text-align:center;
  margin-top:6px;
}
.polaroid::before{
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:58px;
  height:16px;
  background:rgba(255,221,120,.78);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.sticky{
  position:absolute;
  background:var(--sticky);
  padding:16px 14px;
  font-family:"Caveat",cursive;
  font-size:18px;
  color:#3a3a3a;
  line-height:1.25;
  width:150px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.sticky::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-50%) rotate(2deg);
  width:44px;
  height:12px;
  background:rgba(255,221,120,.78);
}
.sticky.s1{top:200px;right:120px;transform:rotate(-5deg)}
.sticky.s2{
  top:320px;
  right:0px;
  transform:rotate(3deg);
  background:#c8f0d8;
  font-size:16px;
  width:130px;
}
.cluster svg.arrow{
  position:absolute;
  top:210px;
  right:60px;
  width:70px;
  height:50px;
  pointer-events:none;
}

/* -------- Section header (handwritten with underline) -------- */
.section-header{margin:70px 0 28px 0;position:relative;display:inline-block}
.section-header h2{
  font-family:"Caveat",cursive;
  font-size:44px;
  color:var(--marker-red);
  margin:0;
  transform:rotate(-1deg);
  line-height:1;
}
.section-header svg{
  position:absolute;
  left:-6px;
  bottom:-14px;
  width:calc(100% + 12px);
  height:18px;
}

/* -------- Margin chef's note (handwritten) -------- */
.note-margin{
  font-family:"Caveat",cursive;
  color:var(--marker-green);
  font-size:19px;
  margin-top:22px;
  transform:rotate(-.6deg);
  display:inline-block;
}

/* -------- Post list (index / archive) -------- */
.posts{list-style:none;padding:0;margin:0}
.posts li{
  display:grid;
  grid-template-columns:36px 1fr auto auto;
  gap:18px;
  align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.posts li:last-child{border-bottom:none}
.posts .num{
  font-family:"JetBrains Mono",monospace;
  color:var(--marker-blue);
  font-size:14px;
}
.posts .title{
  font-family:"Fraunces",serif;
  font-size:19px;
  color:var(--ink);
}
.posts .title:hover{color:var(--marker-red)}
.posts .read{
  font-family:"JetBrains Mono",monospace;
  font-size:11.5px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-right:14px;
  white-space:nowrap;
}
.posts .date{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.06em;
  white-space:nowrap;
}

/* Year group heading on archive pages */
.year-group{margin-top:48px}
.year-group:first-of-type{margin-top:18px}
.year-label{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 8px 0;
  padding-bottom:6px;
  border-bottom:1px dashed var(--rule-dashed);
}

/* -------- Individual post article -------- */
article.post{max-width:720px;margin:20px auto 0}
article.post p{margin:0 0 20px 0}
article.post .kg-card{margin:26px 0 30px}
article.post .kg-image-card img,
article.post img.kg-image,
.page .post-feature-image img,
.page img.kg-image{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:4px;
}
article.post .kg-image-card figcaption{
  margin-top:8px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
  letter-spacing:.04em;
}
article.post p em{font-style:italic;color:var(--ink-soft)}
article.post a{color:var(--marker-red);border-bottom:1px solid var(--marker-red)}
article.post h2{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:26px;
  margin:44px 0 14px 0;
  letter-spacing:-0.005em;
}
article.post h3{
  font-family:"Inter",sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:38px 0 10px 0;
}
article.post blockquote{
  margin:24px 0;
  padding:2px 0 2px 20px;
  border-left:3px solid var(--marker-red);
  font-family:"Fraunces",serif;
  font-style:italic;
  color:#3a3a3a;
}
article.post ul,article.post ol{padding-left:22px;margin:12px 0 22px 0}
article.post li{margin-bottom:8px}
article.post code{
  font-family:"JetBrains Mono",monospace;
  font-size:0.88em;
  background:#efeade;
  padding:2px 6px;
  border-radius:3px;
  color:#3a3a3a;
}
article.post pre{
  background:#232018;
  color:#f4efe1;
  padding:18px 20px;
  border-radius:5px;
  overflow-x:auto;
  font-family:"JetBrains Mono",monospace;
  font-size:13.5px;
  line-height:1.55;
  margin:24px 0;
}
article.post pre code{background:transparent;color:inherit;padding:0;font-size:inherit}
article.post .code-copy-card{
  margin:24px 0;
  border:1px solid #3a3528;
  border-radius:6px;
  overflow:hidden;
  background:#232018;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
article.post .code-copy-card pre{
  margin:0;
  border-radius:0;
  border-top:1px solid #3a3528;
}
.code-copy-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 10px 8px 14px;
  background:#1a1915;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#cfc5ae;
}
.code-copy-label{opacity:.82}
.code-copy-button{
  appearance:none;
  border:1px solid #6f6048;
  border-radius:999px;
  background:#f4efe1;
  color:#232018;
  font:inherit;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 10px;
  cursor:pointer;
}
.code-copy-button:hover,.code-copy-button.is-copied{
  background:#f2c94c;
  border-color:#f2c94c;
}
article.post .terminal{
  background:#1a1915;
  color:#9fe8a0;
  padding:16px 18px;
  border-radius:4px;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  line-height:1.55;
  margin:20px 0;
  border:1px solid #2a2822;
}
article.post .terminal::before{
  content:"$ ";
  color:#7a7a7a;
}
article.post .note{
  background:var(--sticky);
  padding:14px 18px;
  font-family:"Caveat",cursive;
  font-size:19px;
  color:#3a3a3a;
  line-height:1.35;
  margin:24px 0;
  transform:rotate(-.4deg);
  box-shadow:0 3px 8px rgba(0,0,0,.06);
  max-width:440px;
}

/* -------- Scripts page cards -------- */
.script-intro{max-width:720px;margin:8px 0 32px}
.script-intro p{margin:0 0 14px}

/* -------- Dossier list (the file page) -------- */
.dossier{list-style:none;padding:0;margin:0}
.dossier li{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.dossier li:last-child{border-bottom:none}
.dossier .field{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:2px;
}
.dossier .value{
  font-family:"Fraunces",serif;
  font-size:18px;
  color:var(--ink);
  line-height:1.55;
}
.dossier .value a{
  color:var(--marker-red);
  border-bottom:1px solid var(--marker-red);
}
.dossier .dossier-sub{
  display:block;
  font-family:"Caveat",cursive;
  font-size:20px;
  color:var(--marker-green);
  margin-top:4px;
  transform:rotate(-.4deg);
}
@media(max-width:640px){
  .dossier li{grid-template-columns:1fr;gap:4px}
  .dossier .field{padding-bottom:2px}
}

/* -------- Footer -------- */
footer.site-footer{
  margin-top:80px;
  padding-top:22px;
  border-top:1px solid var(--rule);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase;
  gap:16px;
  flex-wrap:wrap;
}
footer.site-footer .sign{
  font-family:"Caveat",cursive;
  color:var(--marker-red);
  font-size:19px;
  text-transform:none;
  letter-spacing:0;
}

/* -------- 404 -------- */
.fourofour{text-align:center;padding:80px 20px}
.fourofour .big{
  font-family:"Caveat",cursive;
  color:var(--marker-red);
  font-size:120px;
  line-height:1;
  transform:rotate(-2deg);
  display:inline-block;
}
.fourofour .msg{font-family:"Fraunces",serif;font-size:22px;margin:24px 0 8px;color:var(--ink)}
.fourofour .sub{font-family:"Inter",sans-serif;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* -------- Responsive -------- */
@media (max-width:860px){
  .board{grid-template-columns:1fr;padding:28px}
  .cluster{min-height:280px;margin-top:20px}
  .page{padding:28px 20px 80px}
  article.post{padding:0}
  article.post .kg-card{margin:20px 0 24px}
  article.post .kg-image-card img,
  article.post img.kg-image,
  .page .post-feature-image img,
  .page img.kg-image{width:100%;height:auto}
  .posts li{grid-template-columns:28px 1fr auto;gap:12px}
  .posts .read{display:none}
}

@media (max-width:480px){
  .section-header h2{font-size:34px}
}

/* -------- Reduced motion (a11y) -------- */
@media (prefers-reduced-motion: reduce) {
  .section-header h2 { transform: none; }
  .fourofour .big { transform: none; }
}

/* -------- Print -------- */
@media print{
  .masthead,nav.main,footer.site-footer,.back{display:none}
  body{background:#fff;color:#000}
  .board,.post .note,.sticky,.polaroid{box-shadow:none;background:#fff;border:1px solid #ddd}
}