/* ================================================================
   mujun.cafe — Swiss instrument panel for a café that does not
   believe its own menu. Earthy duotone, real grid, magnetic motion.
   ================================================================ */

:root{
  --paper:#F4ECDD;
  --ink:#2A2622;
  --vermilion:#B5483A;
  --clay:#8A7E66;
  --kraft:#E4D6BC;

  --grid-line: rgba(42,38,34,0.07);
  --grid-line-strong: rgba(42,38,34,0.18);
  --hair: rgba(42,38,34,0.45);

  --font-disp: "Commissioner", "Inter", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --baseline: 8px;
  --gutter: 24px;
  --pad-x: clamp(20px, 4vw, 64px);

  --col-count: 12;
}

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

html,body{
  margin:0; padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-disp);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","kern";
}

body{
  position:relative;
  overflow-x:hidden;
}

/* ----------------------------------------------------------------
   PAPER GRAIN (whisper-faint noise) and HAIRLINE COLUMN GRID
   ---------------------------------------------------------------- */

.paper-grain{
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  opacity:0.06;
  mix-blend-mode:multiply;
}

.grid-overlay{
  position:fixed; inset:0;
  pointer-events:none; z-index:2;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  padding:0 var(--pad-x);
  gap:var(--gutter);
}
.grid-overlay .grid-col{
  border-left:1px solid var(--grid-line);
  border-right:1px solid var(--grid-line);
  height:100%;
}
@media (max-width: 900px){
  .grid-overlay{ grid-template-columns:repeat(6, 1fr); }
  .grid-overlay .grid-col:nth-child(n+7){ display:none; }
}
@media (max-width: 560px){
  .grid-overlay{ grid-template-columns:repeat(2, 1fr); }
  .grid-overlay .grid-col:nth-child(n+3){ display:none; }
}

/* ----------------------------------------------------------------
   DOCUMENT WRAPPER + REGISTERS
   ---------------------------------------------------------------- */

.document{
  position:relative;
  z-index:3;
  width:100%;
  max-width:none;
  padding:0;
}

.register{
  position:relative;
  padding:calc(var(--baseline)*8) var(--pad-x) calc(var(--baseline)*10);
}
.register-rule{
  height:1px;
  background:var(--ink);
  width:calc(100% - var(--pad-x)*2);
  margin-left:var(--pad-x);
  position:absolute; left:0; right:0;
}
.register-rule.top{ top:0; }
.register-rule.bottom{ bottom:0; }
.register-rule.thin{
  background:var(--hair);
  position:relative;
  margin:0 0 calc(var(--baseline)*4);
}

/* Section number — diagram-label voice */
.reg-num{
  display:inline-block;
  font-family:var(--font-disp);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:0 0 4px;
  margin-bottom:calc(var(--baseline)*3);
  will-change:transform;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1);
}

.reg-head{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
  margin-bottom:calc(var(--baseline)*5);
}
.reg-head .reg-num{ grid-column:1 / span 3; align-self:start; }
.reg-head .reg-title{
  grid-column:5 / span 7;
  font-size:clamp(20px, 2.4vw, 28px);
  font-weight:300;
  line-height:1.25;
  letter-spacing:-0.005em;
  color:var(--ink);
  align-self:end;
}

@media (max-width: 900px){
  .reg-head{ grid-template-columns:repeat(6, 1fr); }
  .reg-head .reg-num{ grid-column:1 / -1; }
  .reg-head .reg-title{ grid-column:1 / -1; }
}

.reg-foot{
  margin-top:calc(var(--baseline)*5);
  font-size:13px;
  color:var(--clay);
  letter-spacing:0.02em;
}
.reg-foot .bracket{ color:var(--vermilion); padding:0 0.2em; }
.reg-foot.mono{ font-family:var(--font-mono); font-size:12px; }

/* ----------------------------------------------------------------
   1.0  MASTHEAD
   ---------------------------------------------------------------- */

.masthead{
  padding-top:calc(var(--baseline)*6);
  padding-bottom:calc(var(--baseline)*6);
}

.masthead-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
  align-items:end;
  padding-top:calc(var(--baseline)*4);
  padding-bottom:calc(var(--baseline)*5);
}
.masthead-grid .reg-num{ grid-column:1 / span 3; align-self:start; }
.masthead-domain{ grid-column:1 / span 8; }
.calibration-clock{ grid-column:10 / span 3; align-self:start; }

.display{
  font-family:var(--font-disp);
  font-weight:760;
  font-stretch:100%;
  font-size:clamp(2.8rem, 7vw, 6.5rem);
  line-height:0.98;
  letter-spacing:-0.02em;
  margin:0 0 calc(var(--baseline)*2) 0;
  color:var(--ink);
}
.display .dot{ color:var(--vermilion); }

.abstract{
  font-size:clamp(18px, 1.6vw, 22px);
  line-height:1.4;
  font-weight:300;
  margin:0;
  max-width:42ch;
  color:var(--ink);
}

.calibration-clock{
  font-family:var(--font-mono);
  border:1px solid var(--ink);
  padding:calc(var(--baseline)*1.5) calc(var(--baseline)*2);
  background:transparent;
}
.clock-label{
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--clay);
  margin-bottom:6px;
}
.clock-label .bracket{ color:var(--vermilion); }
.clock-digits{
  font-size:30px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.clock-digits .sep{ color:var(--vermilion); padding:0 1px; }
.clock-foot{
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--clay);
  margin-top:6px;
}
.clock-foot .muted{ color:var(--clay); opacity:0.75; }

.masthead-meta{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gutter);
  border-top:1px solid var(--hair);
  padding-top:calc(var(--baseline)*2);
  margin-top:calc(var(--baseline)*4);
}
.meta-cell{
  display:flex; flex-direction:column;
  gap:2px;
  font-size:13px;
}
.meta-cell .lbl{
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--clay);
}
.meta-cell .val{ color:var(--ink); font-weight:500; }

@media (max-width: 900px){
  .masthead-grid{ grid-template-columns:repeat(6, 1fr); }
  .masthead-grid .reg-num{ grid-column:1 / -1; }
  .masthead-domain{ grid-column:1 / -1; }
  .calibration-clock{ grid-column:1 / span 4; margin-top:calc(var(--baseline)*3); }
  .masthead-meta{ grid-template-columns:repeat(2, 1fr); row-gap:calc(var(--baseline)*2); }
}
@media (max-width: 560px){
  .masthead-grid{ grid-template-columns:repeat(2, 1fr); }
  .calibration-clock{ grid-column:1 / -1; }
  .masthead-meta{ grid-template-columns:1fr; }
}

/* ----------------------------------------------------------------
   2.0  PARADOX INDEX  (small multiples)
   ---------------------------------------------------------------- */

.paradox-index{
  background:var(--kraft);
}

.small-multiples{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:calc(var(--baseline)*5) var(--gutter);
}
@media (max-width: 720px){ .small-multiples{ grid-template-columns:1fr; } }

.chart-cell{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:calc(var(--baseline)*1.5);
  border-top:1px solid var(--hair);
  padding-top:calc(var(--baseline)*2);
}

.chart-caption{
  display:grid;
  grid-template-columns: auto 1fr;
  column-gap:calc(var(--baseline)*2);
  row-gap:2px;
  font-size:12px;
  letter-spacing:0.04em;
  align-items:baseline;
}
.chart-caption .fig{
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  font-size:11px;
}
.chart-caption .legend{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.chart-caption .legend .dot{
  width:8px; height:8px; border-radius:50%;
  display:inline-block; margin-right:3px;
  background:var(--ink);
  will-change:transform;
  transition:transform 280ms cubic-bezier(.2,.7,.2,1);
}
.chart-caption .legend .dot.b{ background:var(--vermilion); }
.chart-caption .legend .sep{ color:var(--clay); }
.chart-caption .legend .up{ color:var(--vermilion); font-size:10px; }
.chart-caption .leans{
  grid-column:1 / -1;
  font-style:italic;
  font-variation-settings:"slnt" -10;
  color:var(--clay);
  font-size:12.5px;
  letter-spacing:0;
  padding-top:2px;
}

.chart{
  width:100%;
  height:auto;
  display:block;
  background:transparent;
  overflow:visible;
}
.chart .grid line{ stroke:var(--ink); stroke-width:1; }
.chart .grid line.dotted{ stroke:var(--clay); stroke-width:0.6; stroke-dasharray:2 3; }
.chart .ticks text{
  font-family:var(--font-mono);
  font-size:9px;
  fill:var(--clay);
  letter-spacing:0.04em;
}
.chart .ticks text.zero,
.chart text.zero{ fill:var(--ink); }
.chart .line{
  fill:none;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chart .line.a{ stroke:var(--ink); }
.chart .line.b{ stroke:var(--vermilion); opacity:0.85; }
.chart .dp{
  fill:var(--ink);
  stroke:var(--paper);
  stroke-width:0.8;
  transform-box:fill-box;
  transform-origin:center;
  transition:transform 700ms cubic-bezier(.2,.7,.2,1), fill 700ms ease;
}
.chart .dp.wrong.shifted{
  fill:var(--vermilion);
  transform:translate(-7px, 8px);
}

/* path-draw setup — reset by JS once measured */
.chart .line{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
.chart.drawn .line{
  transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1);
  stroke-dashoffset:0;
}
.chart.drawn .line.b{ transition-delay:0.18s; }

/* ----------------------------------------------------------------
   3.0  SPECIMEN SPREADS
   ---------------------------------------------------------------- */

.specimens{
  padding-top:calc(var(--baseline)*4);
  padding-bottom:calc(var(--baseline)*8);
}

.spread{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter);
  padding:calc(var(--baseline)*5) 0 calc(var(--baseline)*8);
  border-top:0;
  align-items:start;
}
.spread .reg-num{
  grid-column:1 / span 2;
  margin-top:calc(var(--baseline)*1);
}
.spread .register-rule.thin{
  grid-column:1 / -1;
  width:100%;
  margin:0;
}

.spread-a .plate{ grid-column:3 / span 5; }
.spread-a .notes{ grid-column:9 / span 4; }

.spread-b .notes{ grid-column:3 / span 4; }
.spread-b .plate{ grid-column:8 / span 5; }

@media (max-width: 900px){
  .spread{ grid-template-columns:repeat(6, 1fr); }
  .spread .reg-num{ grid-column:1 / -1; }
  .spread-a .plate, .spread-b .plate{ grid-column:1 / -1; }
  .spread-a .notes, .spread-b .notes{ grid-column:1 / -1; }
}

.plate{
  margin:0;
  position:relative;
  will-change:transform;
  transition:transform 380ms cubic-bezier(.2,.7,.2,1);
}
.plate-frame{
  position:relative;
  background:var(--paper);
  border:1px solid var(--ink);
  padding:calc(var(--baseline)*2);
  aspect-ratio:4 / 3;
}
.plate-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(42,38,34,0.05), rgba(42,38,34,0));
}
.plate-art{
  width:100%;
  height:100%;
  display:block;
}
.plate-art .ghost{
  transform:translateX(2px);
  opacity:0.85;
  mix-blend-mode:multiply;
}
.plate-art .steam{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation:steam-rise 4.2s linear infinite;
}
.plate-art .steam:nth-of-type(2){ animation-delay:1s; }
.plate-art .steam:nth-of-type(3){ animation-delay:2.1s; }
@keyframes steam-rise{
  0%{ stroke-dashoffset:120; opacity:0; }
  20%{ opacity:0.55; }
  100%{ stroke-dashoffset:-120; opacity:0; }
}

/* registration crop-marks at corners */
.cmark{
  position:absolute;
  width:14px; height:14px;
  pointer-events:none;
}
.cmark::before, .cmark::after{
  content:""; position:absolute; background:var(--ink);
}
.cmark::before{ width:14px; height:1px; top:0; left:0; }
.cmark::after{ width:1px; height:14px; top:0; left:0; }
.cmark.tl{ top:-8px; left:-8px; }
.cmark.tr{ top:-8px; right:-8px; transform:scaleX(-1); }
.cmark.bl{ bottom:-8px; left:-8px; transform:scaleY(-1); }
.cmark.br{ bottom:-8px; right:-8px; transform:scale(-1,-1); }
/* one corner with vermilion misregistration ghost */
.cmark.tr::after{ background:var(--vermilion); transform:translate(2px,0); }

.plate-caption{
  font-size:13.5px;
  color:var(--ink);
  margin-top:calc(var(--baseline)*1.5);
  letter-spacing:0.005em;
}
.plate-caption.italic{
  font-style:italic;
  font-variation-settings:"slnt" -10;
}

/* notes column — justified body */
.notes{
  display:flex;
  flex-direction:column;
  gap:calc(var(--baseline)*2);
}
.notes-num{
  font-family:var(--font-disp);
  font-weight:600;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0;
  border-bottom:1px solid var(--hair);
  padding-bottom:4px;
}
.notes .justified{
  text-align:justify;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-size:16.5px;
  line-height:1.6;
  margin:0;
  color:var(--ink);
}
.notes em.lean{
  font-style:italic;
  font-variation-settings:"slnt" -10;
  color:var(--ink);
  background:linear-gradient(to top, rgba(181,72,58,0.18) 0 38%, transparent 38% 100%);
  padding:0 1px;
}

/* ----------------------------------------------------------------
   4.0  CONTRADICTION LEDGER (mono table)
   ---------------------------------------------------------------- */

.ledger{
  background:var(--paper);
}

.ledger-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:13.5px;
  font-variant-numeric:tabular-nums;
  table-layout:fixed;
}
.ledger-table thead th{
  text-align:left;
  font-weight:600;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding:calc(var(--baseline)*1.25) calc(var(--baseline)*1.5);
  font-family:var(--font-disp);
}
.ledger-table tbody td{
  padding:calc(var(--baseline)*1.25) calc(var(--baseline)*1.5);
  border-bottom:1px solid var(--hair);
  vertical-align:top;
  color:var(--ink);
  line-height:1.5;
}
.ledger-table tbody tr.lr:nth-child(odd) td{
  background:var(--kraft);
}

.ledger-table .col-num{ width:8%; }
.ledger-table .col-claim{ width:42%; }
.ledger-table .col-counter{ width:42%; }
.ledger-table .col-stat{ width:8%; text-align:right; }

.ledger-table td.d{
  text-align:right;
  font-weight:600;
  letter-spacing:0.02em;
}
.ledger-table td.d.up{ color:var(--ink); }
.ledger-table td.d.down{ color:var(--vermilion); }

/* ledger row reveal */
.ledger-table tbody tr.lr{
  opacity:0;
  transform:translateY(6px);
  transition:opacity 520ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
.ledger-table tbody tr.lr.in{
  opacity:1;
  transform:translateY(0);
}

.contra-counter{
  display:inline-block;
  min-width:7ch;
  text-align:right;
  font-weight:700;
  color:var(--vermilion);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.04em;
}

@media (max-width: 720px){
  .ledger-table .col-stat{ display:none; }
  .ledger-table td.d{ display:none; }
  .ledger-table .col-claim, .ledger-table .col-counter{ width:46%; }
}

/* ----------------------------------------------------------------
   5.0  COLOPHON
   ---------------------------------------------------------------- */

.colophon{
  background:var(--kraft);
  padding-bottom:calc(var(--baseline)*8);
}

.colophon-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:var(--gutter) var(--gutter);
  margin-top:calc(var(--baseline)*3);
}
.col-block{
  grid-column:span 3;
  border-top:1px solid var(--ink);
  padding-top:calc(var(--baseline)*1.5);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
}
.col-block.wide{
  grid-column:span 12;
  margin-top:calc(var(--baseline)*2);
  border-top:0;
}
.col-h{
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0 0 calc(var(--baseline)*1) 0;
  font-weight:600;
}
.closer{
  font-family:var(--font-disp);
  font-size:clamp(20px, 2.4vw, 32px);
  line-height:1.25;
  font-weight:300;
  font-style:italic;
  font-variation-settings:"slnt" -10;
  color:var(--ink);
  max-width:48ch;
}

.swatch{
  display:inline-block;
  width:10px; height:10px;
  border:1px solid var(--ink);
  vertical-align:baseline;
  margin:0 1px;
}
.swatch.s-paper{ background:var(--paper); }
.swatch.s-ink{ background:var(--ink); }
.swatch.s-vermilion{ background:var(--vermilion); }

@media (max-width: 900px){
  .colophon-grid{ grid-template-columns:repeat(6, 1fr); }
  .col-block{ grid-column:span 3; }
  .col-block.wide{ grid-column:span 6; }
}
@media (max-width: 560px){
  .colophon-grid{ grid-template-columns:repeat(2, 1fr); }
  .col-block{ grid-column:span 2; }
  .col-block.wide{ grid-column:span 2; }
}

.page-foot{
  margin-top:calc(var(--baseline)*6);
  padding-top:calc(var(--baseline)*2);
  border-top:1px solid var(--ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--gutter);
  flex-wrap:wrap;
}
.foot-link{
  font-family:var(--font-disp);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  display:inline-block;
  will-change:transform;
  transition:transform 320ms cubic-bezier(.2,.7,.2,1), color 240ms ease;
}
.foot-link:hover{ color:var(--vermilion); border-color:var(--vermilion); }
.mono.small{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--clay);
}

/* ----------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .chart .line{ stroke-dashoffset:0 !important; stroke-dasharray:none !important; }
  .ledger-table tbody tr.lr{ opacity:1 !important; transform:none !important; }
  .plate-art .steam{ animation:none !important; stroke-dashoffset:0 !important; opacity:0.3 !important; }
}