/* ==========================================================================
   PARADOX FOUNDRY — site stylesheet
   Dark register live. Light register at the foot, ready to switch on.
   No external calls. No fonts fetched. No analytics.
   Signature device: the crimson drop shadow, offset up and left.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --void:#0f0e10;
  --panel:#171518;
  --panel-2:#1e1a1e;
  --edge:#2e282e;
  --gold:#c9a84c;
  --gold-bright:#e8c874;
  --crimson:#8c1a22;
  --crimson-lift:#c0404a;
  --ink:#e8ddc4;
  --ink-dim:#a99b80;
  --meta:#6f6350;
  --tint-red:#3a1a1c;
  --tint-brown:#2a2119;

  --f-display:"Cinzel","Trajan Pro","Palatino Linotype",Palatino,serif;
  --f-edit:"Cormorant Garamond",Garamond,Georgia,serif;
  --f-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,Menlo,Consolas,monospace;

  --shadow-offset:12px;      /* the crimson drop shadow */
  --tess-strength:.05;       /* hero .10 · reading .045 · off 0 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--ink);
  font-family:var(--f-edit);font-size:1.0625rem;line-height:1.7;
  padding:calc(var(--shadow-offset) + 22px) 18px 40px;
}
img,svg{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-bright)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--gold);color:#111;padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
.visually-hidden{position:absolute;left:-9999px}

/* ==========================================================================
   THE CRIMSON DROP SHADOW — the CV feature
   A rounded panel with a hard red shadow offset UP and LEFT, so the rule
   runs the full top edge and the full left edge, rounded where they meet.
   Page-level frame. One per page.
   ========================================================================== */
.page{
  position:relative;max-width:66rem;margin:0 auto;
  background:var(--panel);border-radius:22px;
  box-shadow:
    calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) 0 0 var(--crimson),
    0 30px 70px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.inner{position:relative;z-index:1;padding:2.6rem 2.2rem 3rem}

/* the echo: same shadow at 60%, on a nested block (as the CV does on its column) */
.echo{
  border-radius:16px;background:var(--panel-2);
  box-shadow:calc(var(--shadow-offset) * -.6) calc(var(--shadow-offset) * -.6) 0 0 var(--crimson);
}

/* ---------- tessellated ground ---------- */
.page::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:var(--tess-strength);
  pointer-events:none;background-repeat:repeat;background-size:200px 150px;
  /* Replaced by assets/img/tess-tile.png when supplied — see assets/img/README.md */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150" viewBox="0 0 200 150"><g fill="none" stroke="%23ffffff" stroke-width="4"><path d="M18 38c0-11 11-17 21-11 6 4 10 11 16 15M88 38c0 11-11 17-21 11-6-4-10-11-16-15M55 42c6 4 15 4 21-4M37 26c-6-4-15-4-20 4"/><path d="M118 113c0-11 11-17 21-11 6 4 10 11 16 15M188 113c0 11-11 17-21 11-6-4-10-11-16-15M155 117c6 4 15 4 21-4M137 101c-6-4-15-4-20 4"/></g></svg>');
}
.tess-supplied .page::before{background-image:url('assets/img/tess-tile.png')}

/* ---------- image slots + fallback placeholders ---------- */
.slot{text-align:center;margin:0 auto}
.slot img{margin:0 auto;height:auto}
.slot--banner img{width:100%;max-width:920px}
.slot--mark img{max-width:min(430px,84vw)}
.ph{
  border:0;border-radius:8px;background:rgba(201,168,76,.05);
  padding:1.5rem 1.2rem;text-align:center;margin:0 auto;max-width:44rem;font-family:var(--f-ui);
}
.ph-name{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.ph-spec{font-size:.73rem;color:var(--ink-dim);margin-top:.5rem;line-height:1.75}
.ph-spec code{font-family:var(--f-mono);color:var(--gold-bright);font-size:.71rem}

/* ---------- masthead ---------- */
.masthead{margin-bottom:2.2rem}

/* ---------- red band (continuous tint, not per-line blocks) ---------- */
.band-red{
  background:var(--tint-red);border-radius:10px;padding:2rem 1.8rem;
  text-align:center;margin:0 auto 2.2rem;max-width:52rem;
}
.band-red .oscillates{
  font-family:var(--f-edit);font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.35rem);color:var(--gold-bright);letter-spacing:.02em;
}
.band-red h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.7rem,5vw,2.9rem);letter-spacing:.07em;line-height:1.15;
  color:var(--gold-bright);margin-top:.9rem;
}

/* ---------- the mark / door ---------- */
.mark-slot{text-align:center;margin:0 auto 2.4rem;max-width:46rem}
.mark-slot .caption{
  font-family:var(--f-ui);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--meta);margin-top:.9rem;
}
hr.rule{border:0;height:1px;background:var(--edge);margin:2.4rem auto;max-width:52rem}

/* ---------- brown band (continuous tint) ---------- */
.band-brown{background:var(--tint-brown);border-radius:10px;padding:2.4rem 2rem;max-width:52rem;margin:0 auto}
.band-brown h2{
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-align:center;margin:0 0 1.4rem;
}
.band-brown .body{max-width:44ch;margin:0 auto;text-align:center}
.band-brown .body p+p{margin-top:1.1rem}
.band-brown .body strong{color:var(--gold);font-weight:600}
.band-brown .sig{text-align:center;margin-top:1.6rem}
.band-brown .sig .name{
  font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-size:.9rem;
}
.band-brown .sig .strap{font-style:italic;color:var(--ink-dim);margin-top:.3rem}

/* ---------- dinkus (CV device: the mark doing typographic work) ---------- */
.dinkus{display:block;margin:2.2rem auto;width:52px;height:auto;opacity:.9}

/* ---------- closing ---------- */
.closing{
  text-align:center;margin-top:2.6rem;font-family:var(--f-display);
  font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
footer{
  max-width:66rem;margin:1.6rem auto 0;text-align:center;
  font-family:var(--f-ui);font-size:.76rem;color:var(--meta);line-height:1.9;
}

/* ---------- simple prose pages (contact, threshold) ---------- */
.page-title{
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,4vw,2.2rem);
  letter-spacing:.09em;color:var(--gold);text-align:center;margin-bottom:1.6rem;
}
.prose{max-width:46ch;margin:0 auto;text-align:center}
.prose p+p{margin-top:1.1rem}
.backlink{
  display:block;text-align:center;margin-top:2.4rem;font-family:var(--f-ui);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
}

/* ==========================================================================
   SYNTH — the Paradoxicon phase oscillator, namespaced
   ========================================================================== */
#synth{
  max-width:44rem;margin:0 auto 2.6rem;
  background:linear-gradient(180deg,#29252a,#201d21);
  border:1px solid #302b2f;border-radius:8px;padding:30px 32px 22px;
  position:relative;font-family:var(--f-edit);color:#e8e6df;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.75);
}
#synth .screw{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d3d1c8,#726f68);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
}
#synth .screw.tl{top:12px;left:12px} #synth .screw.tr{top:12px;right:12px}
#synth .screw.bl{bottom:12px;left:12px} #synth .screw.br{bottom:12px;right:12px}
#synth .plate-title{text-align:center;margin-bottom:2px}
#synth .plate-title h2{
  font-family:var(--f-display);font-size:19px;letter-spacing:.16em;
  font-weight:700;color:var(--gold);margin:0;text-transform:uppercase;
}
#synth .plate-title p{margin:4px 0 20px;font-style:italic;font-size:15px;color:#9a978f}
#synth .rack{display:flex;gap:20px;align-items:stretch;margin-bottom:18px}
#synth .hex-module{
  flex:0 0 92px;background:#151316;border:1px solid #302b2f;border-radius:4px;
  padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
#synth .hex-label{
  font-family:var(--f-ui);font-size:9px;letter-spacing:.14em;
  color:#9a978f;text-transform:uppercase;text-align:center;
}
#synth .led-stack{display:flex;flex-direction:column-reverse;gap:5px;margin:6px 0}
#synth .led{
  width:32px;height:7px;border-radius:2px;background:#1a4d1a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:background .15s ease,box-shadow .15s ease;
}
#synth .led.on{background:#33ff33;box-shadow:0 0 6px 1px rgba(51,255,51,.6),inset 0 0 0 1px rgba(0,0,0,.3)}
#synth .state-num{font-family:var(--f-mono);font-size:13px;color:#33ff33;letter-spacing:.08em}
#synth .scope-module{
  flex:1;background:#0a0a0a;border:1px solid #302b2f;border-radius:4px;
  padding:8px;display:flex;align-items:center;justify-content:center;
}
#synth .scope-module svg{width:100%;height:100px;display:block}
#synth .resolve-strip{
  background:#0a0a0a;border:1px solid #302b2f;border-radius:4px;padding:14px 16px;
  margin-bottom:22px;min-height:56px;display:flex;align-items:center;justify-content:center;
}
#synth #resolveText{
  font-family:var(--f-ui);font-size:14px;letter-spacing:.06em;text-align:center;
  color:#33ff33;text-shadow:0 0 4px rgba(51,255,51,.35);word-spacing:.15em;
}
#synth input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--crimson),#302b2f 50%,var(--gold));
  outline:none;margin:14px 0 8px;
}
#synth input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:30px;border-radius:3px;
  background:linear-gradient(180deg,#d3d1c8,#726f68);border:1px solid #4a4844;
  box-shadow:0 2px 4px rgba(0,0,0,.5);cursor:pointer;
}
#synth input[type=range]::-moz-range-thumb{
  width:20px;height:30px;border-radius:3px;border:1px solid #4a4844;
  background:linear-gradient(180deg,#d3d1c8,#726f68);
  box-shadow:0 2px 4px rgba(0,0,0,.5);cursor:pointer;
}
#synth .pole-labels{
  display:flex;justify-content:space-between;font-family:var(--f-ui);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;
}
#synth .pole-labels .left{color:var(--crimson-lift)}
#synth .pole-labels .right{color:var(--gold)}
#synth .stops{display:flex;justify-content:space-between;gap:6px;margin-bottom:20px}
#synth .stop-caption{
  flex:1;text-align:center;font-size:11.5px;font-style:italic;color:#5b5851;
  transition:color .2s ease;line-height:1.3;
}
#synth .stop-caption.active{color:#e8e6df}
#synth .synth-foot{border-top:1px solid #302b2f;padding-top:12px;text-align:center}
#synth .synth-foot .boundary{
  font-family:var(--f-ui);font-size:10.5px;letter-spacing:.1em;
  color:#9a978f;text-transform:uppercase;margin-bottom:5px;
}
#synth .synth-foot .imprint{font-size:12px;font-style:italic;color:#605d57}
#synth .synth-foot a{color:var(--gold)}

/* ---------- motion + responsive ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:700px){
  :root{--shadow-offset:8px}
  .inner{padding:1.8rem 1.2rem 2.2rem}
  #synth{padding:24px 18px 18px}
  #synth .rack{flex-direction:column}
  #synth .hex-module{flex:0 0 auto;flex-direction:row;gap:14px}
  #synth .led-stack{flex-direction:row;margin:0}
  #synth .led{width:16px}
  #synth .stops{display:none}
  .band-red,.band-brown{padding:1.5rem 1.1rem}
}

/* ==========================================================================
   LIGHT REGISTER — add class="light" to <html> to switch on.
   Ruling: never render the marks on ivory. Metallic gold measures ~2:1 there
   and goes muddy. The marks keep a dark plate in both registers; that plate
   becomes the site's recurring window motif.
   ========================================================================== */
html.light{
  --void:#f4f1e8; --panel:#ece7db; --panel-2:#e4ded0; --edge:#d3cab6;
  --gold:#8a6f1e; --gold-bright:#6f5714;
  --ink:#1f1d1a; --ink-dim:#4a4540; --meta:#8a7e68;
  --tint-red:#f0dcd6; --tint-brown:#ece0cc;
  --tess-strength:.045;
}
html.light .page::before{filter:invert(1)}
html.light .slot--banner,
html.light .slot--mark{
  background:#171518;border-radius:16px;padding:1.6rem 1.4rem;
  box-shadow:-7px -7px 0 0 var(--crimson);
}
html.light #synth{background:linear-gradient(180deg,#29252a,#201d21);color:#e8e6df}