/* ─────────────────────────────────────────────────────────
   DOSSIER № 042 — MAO·SAN ATELIER
   A personal codex. Editorial / archival aesthetic.
   ───────────────────────────────────────────────────────── */

:root {
  --paper:       #efe6d3;
  --paper-soft:  #e7dcc1;
  --paper-deep:  #d8cdb3;
  --paper-edge:  #c6b896;
  --ink:         #16110b;
  --ink-soft:    #3a2f25;
  --ink-mute:    #6c5e4b;
  --vermillion:  #b8412c;
  --rust:        #8a3520;
  --teal:        #345355;
  --gold:        #a8843a;

  --serif:       "Fraunces", "Noto Serif SC", "Songti SC", serif;
  --sans:        "Bricolage Grotesque", system-ui, sans-serif;
  --mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cn-serif:    "Noto Serif SC", "Songti SC", serif;

  --pad-x:       clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--vermillion); color: var(--paper); }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--cn-serif);
  font-feature-settings: "ss01", "kern", "liga";
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain — fixed overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(ellipse at 50% -20%, rgba(120,90,50,.06) 0%, transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0 0.03  0 0 0 0.18 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size: auto, 240px 240px;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 100;
  opacity: 0.55;
}

/* edge vignette */
body::after {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(60,40,20,.14) 100%);
  pointer-events: none;
  z-index: 99;
}

/* ─── MASTHEAD ─────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: 28px;
  align-items: center;
  padding: 12px var(--pad-x);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.m-mark {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.m-glyph {
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 11px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
}
.m-nav { display: flex; gap: 22px; justify-self: center; }
.m-nav a {
  color: var(--ink-mute);
  text-decoration: none;
  position: relative;
  transition: color .3s;
}
.m-nav a:hover { color: var(--vermillion); }
.m-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--vermillion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.7,.0,.3,1);
}
.m-nav a:hover::after { transform: scaleX(1); }
.m-meta { color: var(--ink-mute); }
.m-meta b { font-weight: 700; color: var(--ink); }
.m-clock { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ─── HERO ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.hero-frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 48px;
}
.tag {
  padding: 4px 10px;
  border: 1px solid var(--ink);
  display: inline-flex; align-items: center;
}
.tag-redacted {
  background: var(--ink);
  color: var(--paper);
}

.hero-title {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0;
  line-height: .92;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-line {
  display: block;
  font-size: clamp(56px, 12vw, 184px);
  font-variation-settings: "opsz" 96, "wght" 280;
}
/* short three-letter mark — boost size + spread, give it stage presence */
.hero-line-mark {
  font-size: clamp(96px, 22vw, 280px);
  letter-spacing: 0;
  font-variation-settings: "opsz" 144, "wght" 240;
  line-height: .85;
}
.hero-line-mark .ch { padding-right: .04em; }
.hero-line .ch {
  display: inline-block;
  font-variation-settings: "opsz" 96, "wght" 280;
  transition: font-variation-settings .5s cubic-bezier(.2,.8,.3,1),
              transform .4s cubic-bezier(.2,.8,.3,1),
              color .3s;
  will-change: font-variation-settings, transform;
}
.hero-line .ch:hover {
  font-variation-settings: "opsz" 144, "wght" 880;
  transform: translateY(-6px);
  color: var(--vermillion);
}
.hero-line-cn {
  font-family: var(--cn-serif);
  font-weight: 300;
  font-size: clamp(36px, 7vw, 100px);
  letter-spacing: .04em;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 8px;
}
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.3vw, 17px);
  letter-spacing: .005em;
  color: var(--ink-mute);
  margin-top: 18px;
  font-variation-settings: "opsz" 14, "wght" 320;
}

.hero-meta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.hero-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 24, "wght" 380;
  max-width: 32ch;
}
.hero-quote::before { content: "“"; color: var(--vermillion); margin-right: 4px; }
.hero-quote::after  { content: "”"; color: var(--vermillion); margin-left: 4px; }

.hero-spec {
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-spec li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--ink-mute);
  align-items: baseline;
}
.hero-spec li:last-child { border-bottom: none; }
.hero-spec span { color: var(--ink-mute); }
.hero-spec b {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: none;
  font-variation-settings: "opsz" 24, "wght" 480;
}

/* wax seal */
.hero-seal {
  position: absolute;
  right: 0; top: -8px;
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1;
  color: var(--vermillion);
  opacity: 0;
  transform: rotate(-30deg) scale(2);
  filter: blur(3px);
  animation: seal-stamp 1.4s cubic-bezier(.2,.8,.3,1) .4s forwards;
  pointer-events: none;
}
@keyframes seal-stamp {
  0%   { opacity: 0;    transform: rotate(-30deg) scale(2.6); filter: blur(4px); }
  60%  { opacity: 1;    transform: rotate(-6deg)  scale(.94); filter: blur(0); }
  80%  { opacity: .92;  transform: rotate(-9deg)  scale(1.02); }
  100% { opacity: .85;  transform: rotate(-8deg)  scale(1);   filter: blur(0); }
}
.hero-seal-rotor {
  animation: seal-rotate 28s linear infinite;
  transform-origin: 100px 100px;
}
@keyframes seal-rotate { to { transform: rotate(360deg); } }

/* ticker */
.ticker {
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 14px 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ticker-track {
  display: flex;
  animation: ticker 80s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.ticker-track > span { padding-right: 48px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ─── SECTION HEAD ─────────────────────────────────────── */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(24px, 3vw, 32px);
  border-bottom: 1px solid var(--ink);
}
.sect-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--vermillion);
  font-weight: 600;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 52px);
  font-variation-settings: "opsz" 60, "wght" 320;
  letter-spacing: 0;
  font-style: italic;
}
.section-head h2 .cn {
  font-family: var(--cn-serif);
  font-style: normal;
  font-weight: 400;
  margin-right: 16px;
  letter-spacing: 0;
}
.section-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─── MANIFEST ─────────────────────────────────────────── */
.manifest { padding: clamp(56px, 7vw, 96px) var(--pad-x); position: relative; }
.manifest-body {
  max-width: 600px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  position: relative;
  font-family: var(--cn-serif);
  font-size: 18px;
  line-height: 1.85;
}
.manifest-body p + p { margin-top: 24px; }
.dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 5.4em;
  float: left;
  line-height: .82;
  margin: 8px 14px 0 0;
  color: var(--vermillion);
  font-variation-settings: "opsz" 144, "wght" 700;
}
.manifest-body em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 36, "wght" 480;
}
.margin-note {
  position: absolute;
  right: -240px;
  top: 32px;
  width: 200px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
  border-left: 1px solid var(--vermillion);
  padding-left: 12px;
}
.margin-note .arrow {
  display: block;
  font-size: 22px;
  color: var(--vermillion);
  margin-bottom: 4px;
  line-height: 1;
}

/* ─── FILES ────────────────────────────────────────────── */
.files { padding-bottom: clamp(56px, 6vw, 80px); }
.files-list {
  list-style: none;
  padding: 0 var(--pad-x);
}
.file {
  border-bottom: 1px solid var(--ink);
  position: relative;
  transition: background .35s;
}
.file:hover { background: var(--paper-soft); }
.file a {
  display: grid;
  grid-template-columns: 80px 130px 1fr auto;
  gap: 32px;
  padding: 28px 0;
  text-decoration: none;
  color: var(--ink);
  align-items: start;
}
.file-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--vermillion);
  font-weight: 600;
  padding-top: 4px;
}
.file-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  padding-top: 4px;
}
.file-title {
  font-family: var(--cn-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 12px;
  transition: color .3s;
}
.file-title i {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: .58em;
  color: var(--ink-mute);
  margin-top: 6px;
  font-variation-settings: "opsz" 60, "wght" 320;
  letter-spacing: 0;
}
.file:hover .file-title { color: var(--vermillion); }
.file-tease {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 70ch;
  margin-bottom: 14px;
}
.file-tags {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.file-tags > span { position: relative; }
.file-tags > span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px; top: 50%;
  width: 1px; height: 9px;
  background: var(--ink-mute);
  transform: translateY(-50%);
}
.file-arrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink-mute);
  align-self: center;
  transform: translateX(0);
  transition: transform .35s, color .3s;
}
.file:hover .file-arrow {
  color: var(--vermillion);
  transform: translateX(8px);
}

/* draft / unpublished file */
.file-draft a { cursor: not-allowed; }
.file-draft .file-no { color: var(--ink-mute); }
.file-draft .file-date {
  color: var(--paper);
  background: var(--ink-mute);
  padding: 2px 6px;
  font-weight: 700;
  align-self: start;
  margin-top: 4px;
  display: inline-block;
  width: fit-content;
}
.file-draft .file-title { color: var(--ink-mute); }
.file-draft .file-title i { color: var(--ink-mute); opacity: .8; }
.file-draft .file-tease { color: var(--ink-mute); }
.file-draft:hover { background: transparent; }
.file-draft:hover .file-title { color: var(--ink-mute); }
.file-draft:hover .file-arrow { color: var(--ink-mute); transform: none; }

/* ─── DESK ─────────────────────────────────────────────── */
.desk { padding-bottom: clamp(56px, 6vw, 80px); }
.desk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) 0;
}
.desk-card {
  border: 1px solid var(--ink);
  padding: 28px;
  background: var(--paper);
  position: relative;
  transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
}
.desk-card:nth-child(1) { transform: rotate(-.3deg); }
.desk-card:nth-child(2) { transform: rotate(.5deg);  }
.desk-card:nth-child(3) { transform: rotate(.4deg);  }
.desk-card:nth-child(4) { transform: rotate(-.5deg); }
.desk-card:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 6px 6px 0 var(--ink);
  z-index: 2;
}
.desk-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 6px;
  background: var(--paper-deep);
  border-left: 1px solid var(--ink-mute);
  border-right: 1px solid var(--ink-mute);
  opacity: .6;
}
.desk-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vermillion);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.desk-card h4 {
  font-family: var(--cn-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 10px;
  letter-spacing: 0;
}
.desk-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ─── WORKSHOP HOME ───────────────────────────────────── */
.workshop-hero {
  background:
    linear-gradient(108deg, rgba(52,83,85,.12), transparent 30%, transparent 70%, rgba(184,65,44,.08)),
    radial-gradient(circle at 84% 18%, rgba(168,132,58,.26), transparent 27%),
    radial-gradient(circle at 8% 76%, rgba(52,83,85,.14), transparent 24%),
    var(--paper);
}
.workshop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(52,83,85,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,83,85,.28) 1px, transparent 1px),
    linear-gradient(rgba(184,65,44,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184,65,44,.18) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px, 176px 176px, 176px 176px;
  opacity: .18;
  pointer-events: none;
}
.workshop-hero .hero-frame {
  z-index: 1;
}
.workshop-hero .tag {
  background: rgba(239,230,211,.76);
  box-shadow: 2px 2px 0 rgba(22,17,11,.14);
}
.workshop-hero .hero-line-mark {
  color: var(--ink);
  text-shadow: 5px 5px 0 rgba(52,83,85,.12);
}
.workshop-hero .hero-line-cn {
  color: var(--teal);
}
.workshop-hero .hero-quote {
  max-width: 36ch;
}
.workshop-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--ink);
  background: rgba(239,230,211,.72);
  box-shadow: 8px 8px 0 rgba(52,83,85,.18);
}
.workshop-rail span {
  min-height: 78px;
  padding: 16px 18px;
  border-right: 1px dashed rgba(22,17,11,.45);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.workshop-rail span:last-child { border-right: none; }
.workshop-rail b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: .95;
  font-style: italic;
  color: var(--vermillion);
  letter-spacing: 0;
  font-variation-settings: "opsz" 96, "wght" 620;
}
.workshop-copy {
  max-width: 720px;
}
.bench-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.bench-stat {
  min-height: 118px;
  border: 1px solid var(--ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.24), transparent 44%),
    var(--paper-soft);
  padding: 16px 14px;
  position: relative;
}
.bench-stat::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -1px;
  width: 34px;
  height: 5px;
  background: var(--gold);
}
.bench-stat b {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 9px;
}
.bench-stat span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.projects {
  background:
    linear-gradient(180deg, transparent 0, rgba(52,83,85,.08) 100%),
    var(--paper);
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) 0;
}
.project-grid-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
  margin: 0 auto;
}
.project-card {
  min-height: 420px;
  border: 1px solid var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), transparent 46%),
    var(--paper);
  padding: 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px 0 rgba(22,17,11,.16);
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, background .35s;
}
.project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(22,17,11,.11) 0),
    linear-gradient(transparent calc(100% - 1px), rgba(22,17,11,.11) 0);
  background-size: 22px 22px;
  pointer-events: none;
  opacity: .26;
}
.project-card::after {
  content: "";
  position: absolute;
  right: 18px;
  top: -1px;
  width: 54px;
  height: 8px;
  background: var(--paper-deep);
  border-left: 1px solid var(--ink-mute);
  border-right: 1px solid var(--ink-mute);
  opacity: .8;
}
.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 9px 9px 0 rgba(22,17,11,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 44%),
    var(--paper-soft);
}
.project-top,
.project-card h3,
.project-card p,
.project-specs,
.project-tags,
.project-open {
  position: relative;
  z-index: 1;
}
.project-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.project-no {
  color: var(--vermillion);
  font-weight: 700;
}
.project-status {
  border: 1px solid var(--ink);
  padding: 3px 8px;
  color: var(--paper);
  background: var(--ink);
  box-shadow: 2px 2px 0 rgba(184,65,44,.28);
}
.project-card h3 {
  font-family: var(--cn-serif);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 14px;
}
.project-card p {
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.project-specs {
  margin-top: auto;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.project-specs div {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(22,17,11,.38);
  align-items: baseline;
}
.project-specs div:last-child { border-bottom: none; }
.project-specs dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.project-specs dd {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  font-variation-settings: "opsz" 24, "wght" 470;
}
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.project-tags span {
  border: 1px solid rgba(22,17,11,.44);
  padding: 3px 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: rgba(239,230,211,.6);
}
.project-open {
  width: fit-content;
  border: 1px solid var(--ink);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  transition: color .25s, background .25s, transform .25s;
}
.project-open:hover {
  color: var(--paper);
  background: var(--vermillion);
  transform: translateX(4px);
}
.project-open-muted {
  color: var(--ink-mute);
  background: transparent;
}
.project-card-live .project-status { background: var(--teal); }
.project-card-build .project-status { background: var(--vermillion); }
.project-card-lab .project-status { background: var(--rust); }
.project-card-prototype .project-status { background: var(--gold); color: var(--ink); }
.project-card-research .project-status { background: var(--ink-soft); }
.project-card-archive .project-status { background: var(--paper-deep); color: var(--ink); }
.project-card-feature {
  min-height: 0;
  padding: clamp(28px, 4vw, 56px);
}
.project-card-feature::after {
  width: clamp(90px, 14vw, 180px);
  height: 10px;
}
.project-card-feature .project-top {
  margin-bottom: clamp(26px, 3vw, 42px);
}
.project-card-feature h3 {
  max-width: 820px;
  font-size: clamp(38px, 6vw, 76px);
}
.project-card-feature p {
  max-width: 900px;
  font-size: clamp(15px, 1.45vw, 18px);
}
.project-card-feature .project-specs {
  max-width: 940px;
  margin-top: clamp(20px, 3vw, 36px);
}
.project-card-feature .project-specs div {
  grid-template-columns: minmax(88px, 120px) 1fr;
}
.project-card-feature .project-tags {
  max-width: 920px;
}
.project-card-feature .project-open {
  margin-top: 4px;
}
.materials {
  background:
    linear-gradient(90deg, rgba(184,65,44,.08), transparent 28%, transparent 72%, rgba(52,83,85,.10)),
    var(--paper);
}
.materials-grid .desk-card {
  min-height: 218px;
  transform: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 50%),
    var(--paper-soft);
}
.materials-grid .desk-card:hover {
  transform: translateY(-4px);
}
.materials-grid .desk-card h4 {
  font-size: 20px;
  color: var(--teal);
}

/* ─── COLOPHON ─────────────────────────────────────────── */
.colophon {
  border-top: 1px solid var(--ink);
  background: var(--paper-deep);
  padding-bottom: 32px;
}
.colophon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: clamp(40px, 5vw, 64px) var(--pad-x);
}
.colophon-grid h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vermillion);
  margin-bottom: 14px;
  font-weight: 600;
}
.colophon-grid p {
  font-family: var(--cn-serif);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.colophon-grid a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--vermillion);
}
.colophon-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--pad-x) 0;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ─── INK MARGIN LINE ──────────────────────────────────── */
.ink-line {
  position: fixed;
  left: 16px;
  top: 80px;
  width: 4px;
  height: calc(100vh - 110px);
  z-index: 20;
  color: var(--vermillion);
  pointer-events: none;
}

/* ─── READING INDICATOR ────────────────────────────────── */
.reading-indicator {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 30;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  padding: 6px 12px;
  border: 1px solid var(--ink);
}
.reading-prog {
  width: 80px;
  height: 1px;
  background: var(--ink-mute);
  position: relative;
}
.reading-prog::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: var(--p, 0%);
  height: 3px;
  background: var(--vermillion);
  transition: width .15s;
}

/* ─── REDACTION ────────────────────────────────────────── */
[data-redact] {
  position: relative;
  cursor: help;
}
[data-redact]::after {
  content: "";
  position: absolute;
  left: -2px; top: 0; right: -2px; bottom: 0;
  background: var(--ink);
  transition: clip-path .55s cubic-bezier(.7,.0,.3,1);
  clip-path: inset(0 0 0 0);
  pointer-events: none;
}
[data-redact]:hover::after { clip-path: inset(0 100% 0 0); }

/* ─── ARTICLE PAGE ─────────────────────────────────────── */
.article {
  padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 7vw, 96px);
  position: relative;
}
.article-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x) clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--ink);
}
.article-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 32px;
}
.article-meta b { color: var(--vermillion); }
.article-title {
  font-family: var(--cn-serif);
  font-weight: 500;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 20px;
}
.article-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 2vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 36, "wght" 320;
  margin-bottom: 32px;
  max-width: 40ch;
}
.article-byline {
  display: flex;
  flex-wrap: wrap; gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.article-byline > span { position: relative; }
.article-byline > span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px; top: 50%;
  width: 1px; height: 10px;
  background: var(--ink-mute);
  transform: translateY(-50%);
}
.article-body {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--pad-x) 0;
  font-family: var(--cn-serif);
  font-size: 18px;
  line-height: 1.9;
}
.article-body p { margin-bottom: 26px; }
.article-body p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 5em;
  float: left;
  line-height: .82;
  margin: 6px 14px 0 0;
  color: var(--vermillion);
  font-variation-settings: "opsz" 144, "wght" 700;
}
.article-body h2 {
  font-family: var(--cn-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 56px 0 20px;
  letter-spacing: 0;
  position: relative;
  line-height: 1.3;
}
.article-body h2::before {
  content: attr(data-no);
  position: absolute;
  left: -76px; top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--vermillion);
  font-weight: 600;
}
.article-body em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 36, "wght" 480;
}
.article-body strong {
  font-weight: 700;
  color: var(--ink);
}
.article-body blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--vermillion);
  padding-left: 24px;
  margin: 36px 0;
  font-variation-settings: "opsz" 36, "wght" 380;
}
.article-body code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--paper-deep);
  padding: 2px 6px;
  border-radius: 1px;
}
.article-body pre {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--ink);
  color: var(--paper);
  padding: 22px 24px;
  margin: 28px 0;
  overflow-x: auto;
  line-height: 1.6;
  border-left: 3px solid var(--vermillion);
}
.article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--vermillion);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .25s;
}
.article-body a:hover { color: var(--vermillion); }
.article-body hr {
  border: none;
  text-align: center;
  margin: 48px 0;
  color: var(--vermillion);
}
.article-body hr::before {
  content: "❦";
  font-size: 22px;
  font-family: var(--serif);
}
.article-foot {
  max-width: 640px;
  margin: clamp(56px, 6vw, 80px) auto 0;
  padding: 28px var(--pad-x) 0;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.article-foot a {
  color: var(--vermillion);
  text-decoration: none;
  transition: letter-spacing .3s;
}
.article-foot a:hover { letter-spacing: .2em; }

/* ─── REVEAL ANIMATIONS ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.2,.8,.3,1), transform .9s cubic-bezier(.2,.8,.3,1);
}
.reveal.in { opacity: 1; transform: none; }

/* ─── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 980px) {
  .masthead { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 16px; }
  .m-nav, .m-meta:not(.m-coord) { display: none; }
  .m-coord { display: none; }
  .m-clock { font-size: 10px; }

  .hero-meta { grid-template-columns: 1fr; gap: 32px; }
  .hero-seal { right: 8px; top: 8px; }

  .ink-line { display: none; }

  .files-list { padding: 0 16px; }
  .file a { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .file-arrow { display: none; }
  .file-no, .file-date { padding-top: 0; }
  .file-no::after { content: " ·"; color: var(--ink-mute); }

  .desk-grid { grid-template-columns: 1fr; gap: 16px; }
  .workshop-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-rail span:nth-child(2) { border-right: none; }
  .workshop-rail span:nth-child(-n+2) { border-bottom: 1px dashed rgba(22,17,11,.45); }
  .bench-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 16px; padding-right: 16px; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  .colophon-bottom { flex-direction: column; gap: 12px; padding: 24px 16px; text-align: center; }

  .margin-note {
    position: relative;
    right: 0; top: 0;
    width: 100%;
    margin-top: 28px;
  }

  .reading-indicator { bottom: 12px; right: 12px; padding: 4px 8px; }
  .reading-prog { width: 50px; }

  .article-body h2::before {
    position: relative; left: 0; top: 0;
    display: block;
    margin-bottom: 6px;
  }
}

/* ─── MODE SWITCH (segmented control, top center) ──────── */
.mode-switch {
  position: fixed;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink-mute);
}
.ms-chip {
  padding: 7px 18px;
  text-decoration: none;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .25s, background .25s, letter-spacing .25s;
}
.ms-chip:hover {
  color: var(--vermillion);
  letter-spacing: .26em;
}
.ms-chip.ms-active {
  background: var(--ink);
  color: var(--paper);
  pointer-events: none;
}
.ms-chip.ms-active::before {
  content: "●";
  color: var(--vermillion);
  font-size: 7px;
  letter-spacing: 0;
}

/* hide masthead nav now that we have mode-switch */
.masthead .m-nav { display: none !important; }
/* keep masthead clean by giving the bar more padding-top to clear mode-switch */
.masthead { padding-top: 14px; }

@media (max-width: 700px) {
  .mode-switch { top: 8px; font-size: 9px; padding: 2px; }
  .ms-chip { padding: 6px 12px; }
  .workshop-rail { grid-template-columns: 1fr; }
  .workshop-rail span { border-right: none; border-bottom: 1px dashed rgba(22,17,11,.45); }
  .workshop-rail span:last-child { border-bottom: none; }
  .bench-strip, .project-grid { grid-template-columns: 1fr; }
  .project-card { min-height: 0; }
  .project-specs div { grid-template-columns: 68px 1fr; }
}

/* ─── INK MODE (Konami easter egg) ─────────────────────── */
.ink-mode {
  --paper:       #1a140e;
  --paper-soft:  #221a13;
  --paper-deep:  #2a201a;
  --paper-edge:  #3a2e23;
  --ink:         #f0e6cc;
  --ink-soft:    #d4c8a8;
  --ink-mute:    #a89878;
  --vermillion:  #e8714a;
  --rust:        #c8552c;
}
.ink-mode body::after {
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%);
}
.ink-mode body::before {
  opacity: .35;
  mix-blend-mode: screen;
}
.ink-mode .tag-redacted {
  background: var(--ink);
  color: var(--paper);
}

/* ─── PRINT (it IS a dossier after all) ────────────────── */
@media print {
  body::before, body::after, .masthead, .ticker,
  .ink-line, .reading-indicator, .hero-seal { display: none !important; }
  .file:hover, .desk-card:hover { transform: none !important; box-shadow: none !important; }
  body { background: white; color: black; }
  [data-redact]::after { display: none; }
  a { color: black; }
}

/* ─── BASTION CABIN OVERRIDE: WORKSHOP BAY ─────────────── */
body.bastion-cabin {
  --void:        #03060d;
  --abyss:       #07101e;
  --steel:       #121c2e;
  --steel-2:     #1a2740;
  --frame:       #2c3d56;
  --line:        #1f2c42;
  --hud-text:    #d6dee8;
  --hud-dim:     #7a8aa0;
  --hud-mute:    #46556a;
  --amber:       #ffb500;
  --amber-soft:  #ffce4d;
  --cyan:        #4fd6ff;
  --cyan-soft:   #8ce5ff;
  --green:       #00ff88;
  --red:         #ff2c4a;
  --paper:       var(--void);
  --paper-soft:  var(--steel);
  --paper-deep:  var(--abyss);
  --ink:         var(--hud-text);
  --ink-soft:    var(--hud-dim);
  --ink-mute:    var(--hud-mute);
  --vermillion:  var(--amber);
  --teal:        var(--cyan);
  --gold:        var(--amber);
  background: var(--void);
  color: var(--hud-text);
  font-family: var(--cn);
}

body.bastion-cabin::before {
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.22) 3px, transparent 4px);
  mix-blend-mode: multiply;
  opacity: .56;
  z-index: 95;
}

body.bastion-cabin::after {
  background:
    radial-gradient(2px 2px at 20% 30%, var(--hud-dim), transparent),
    radial-gradient(1px 1px at 80% 20%, var(--cyan), transparent),
    radial-gradient(1.5px 1.5px at 60% 75%, var(--hud-text), transparent),
    radial-gradient(1px 1px at 35% 85%, var(--amber), transparent),
    radial-gradient(ellipse at 50% 100%, rgba(255,181,0,.05), transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(79,214,255,.04), transparent 55%),
    var(--void);
  z-index: -1;
  opacity: 1;
}

.bastion-cabin .masthead {
  background: rgba(8,16,30,.88);
  border-bottom: 1px solid var(--frame);
  color: var(--hud-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  grid-template-columns: auto 1fr auto auto auto auto;
}

.bastion-cabin .m-mark {
  color: var(--hud-text);
}

.bastion-cabin .m-glyph {
  border-radius: 0;
  border-color: var(--amber);
  background: var(--abyss);
  color: var(--amber);
  font-family: var(--mono);
}

.bastion-cabin .m-meta b,
.bastion-cabin .m-clock {
  color: var(--cyan);
}

.bastion-cabin .mode-switch {
  background: rgba(8,16,30,.94);
  border: 1px solid var(--amber);
  color: var(--hud-dim);
  box-shadow: 0 0 32px -6px var(--amber), 0 0 0 1px rgba(255,181,0,.16);
}

.bastion-cabin .mode-switch::before,
.bastion-cabin .mode-switch::after {
  border-color: var(--amber);
}

.bastion-cabin .ms-chip {
  color: var(--hud-dim);
}

.bastion-cabin .ms-chip:hover {
  color: var(--amber);
}

.bastion-cabin .ms-chip.ms-active {
  background: var(--amber);
  color: var(--void);
  text-shadow: none;
}

.bastion-cabin .hero,
.bastion-cabin .workshop-hero {
  min-height: calc(100vh - 48px);
  background:
    linear-gradient(transparent 96%, rgba(79,214,255,.18) 100%),
    linear-gradient(90deg, transparent 96%, rgba(79,214,255,.12) 100%),
    radial-gradient(ellipse at 82% 24%, rgba(79,214,255,.12), transparent 44%),
    radial-gradient(ellipse at 18% 88%, rgba(255,181,0,.10), transparent 42%),
    var(--void);
  background-size: 44px 44px, 44px 44px, auto, auto, auto;
  border-bottom: 1px solid var(--frame);
}

.bastion-cabin .workshop-hero::before {
  opacity: .28;
  background-image:
    linear-gradient(rgba(79,214,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,214,255,.14) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
}

.bastion-cabin .hero-tags .tag {
  background: rgba(8,16,30,.72);
  border-color: var(--frame);
  color: var(--hud-dim);
  box-shadow: none;
}

.bastion-cabin .hero-tags .tag:first-child,
.bastion-cabin .tag-redacted {
  border-color: var(--amber);
  background: rgba(255,181,0,.12);
  color: var(--amber);
}

.bastion-cabin [data-redact]::after {
  background: var(--steel);
}

.bastion-cabin .hero-line-mark {
  font-family: var(--mono);
  color: var(--hud-text);
  text-shadow: 1px 0 0 var(--cyan), -1px 0 0 var(--red), 0 0 28px rgba(255,181,0,.26);
}

.bastion-cabin .hero-line-cn,
.bastion-cabin .hero-sub {
  color: var(--amber);
}

.bastion-cabin .hero-meta {
  border-top-color: var(--frame);
}

.bastion-cabin .hero-quote,
.bastion-cabin .hero-spec b {
  color: var(--hud-text);
}

.bastion-cabin .hero-quote::before,
.bastion-cabin .hero-quote::after {
  color: var(--cyan);
}

.bastion-cabin .hero-spec li {
  border-bottom-color: rgba(79,214,255,.24);
}

.bastion-cabin .workshop-rail,
.bastion-cabin .bench-stat,
.bastion-cabin .project-card,
.bastion-cabin .desk-card,
.bastion-cabin .colophon-grid > div {
  background:
    linear-gradient(135deg, rgba(79,214,255,.08), transparent 42%),
    rgba(8,16,30,.78);
  border: 1px solid var(--frame);
  box-shadow: inset 2px 0 0 rgba(255,181,0,.65), 0 18px 48px -30px rgba(0,0,0,.9);
}

.bastion-cabin .workshop-rail b,
.bastion-cabin .bench-stat b,
.bastion-cabin .project-no,
.bastion-cabin .desk-label,
.bastion-cabin .sect-no,
.bastion-cabin .section-meta {
  color: var(--amber);
}

.bastion-cabin .manifest,
.bastion-cabin .projects,
.bastion-cabin .materials,
.bastion-cabin .colophon {
  background:
    linear-gradient(90deg, rgba(79,214,255,.04), transparent 32%, transparent 70%, rgba(255,181,0,.04)),
    var(--void);
}

.bastion-cabin .section-head {
  border-bottom-color: var(--frame);
}

.bastion-cabin .section-head h2,
.bastion-cabin .section-head h2 .cn {
  color: var(--hud-text);
}

.bastion-cabin .manifest-body,
.bastion-cabin .manifest-body em,
.bastion-cabin .bench-stat span,
.bastion-cabin .project-card h3,
.bastion-cabin .project-card p,
.bastion-cabin .project-specs dd,
.bastion-cabin .desk-card h4,
.bastion-cabin .desk-card p,
.bastion-cabin .colophon-grid p {
  color: var(--hud-text);
}

.bastion-cabin .project-card::before {
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgba(79,214,255,.08) 0),
    linear-gradient(transparent calc(100% - 1px), rgba(79,214,255,.08) 0);
}

.bastion-cabin .project-card::after,
.bastion-cabin .bench-stat::before {
  background: var(--amber);
}

.bastion-cabin .project-status {
  border-color: var(--frame);
  color: var(--void);
  background: var(--amber);
}

.bastion-cabin .project-specs {
  border-color: var(--frame);
}

.bastion-cabin .project-specs div {
  border-bottom-color: rgba(79,214,255,.22);
}

.bastion-cabin .project-tags span,
.bastion-cabin .project-open {
  border-color: var(--frame);
  background: rgba(79,214,255,.08);
  color: var(--cyan-soft);
}

.bastion-cabin .project-open:hover {
  background: var(--amber);
  color: var(--void);
}

.bastion-cabin .project-open-muted {
  color: var(--hud-dim);
  background: transparent;
}

.bastion-cabin .reading-indicator {
  background: rgba(8,16,30,.92);
  border-color: var(--frame);
  color: var(--hud-dim);
}

.bastion-cabin .reading-prog::after {
  background: var(--amber);
}

@media (max-width: 980px) {
  .bastion-cabin .masthead {
    grid-template-columns: 1fr auto;
  }
}