/* ==========================================================================
   PALEWICK HOME — Archive Wiki
   Brand chrome stays constant across eras; product photo placeholders
   shift palette per era (see MYTHOLOGY_BIBLE / PRODUCTION_PROMPTS).
   ========================================================================== */

:root{
  --ink:#181613;
  --ink-soft:#2a2621;
  --paper:#e9e0cb;
  --paper-dim:#cfc4a8;
  --paper-line:#4a4438;
  --accent-red:#8f2b1e;
  --accent-red-bright:#c1442f;

  --tier-light:#9a9a8f;
  --tier-medium:#c99a2e;
  --tier-severe:#b3491f;
  --tier-exceptional:#0d0c0a;

  --era1-a:#e4d9bd; --era1-b:#6f9e97; --era1-c:#f3ead8;
  --era2-a:#8a9a4e; --era2-b:#c99a2e; --era2-c:#b1573a;
  --era3-a:#8a6b83; --era3-b:#5f8a86; --era3-c:#e8e0d0;
  --era4-a:#5f8a5a; --era4-b:#eee6d3; --era4-c:#c08a3e;
  --era5-a:#ddd2c0; --era5-b:#d9b8b8; --era5-c:#c9beac;

  --font-mono: ui-monospace, "Courier New", Courier, monospace;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius: 2px;
  --maxw: 1180px;
  --maxw-wide: 1440px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  line-height:1.5;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(ellipse at 100% 110%, rgba(255,255,255,.03), transparent 55%);
}

/* film-grain overlay, fixed, cheap and consistent everywhere */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- splash / cold open (plays once per page load) ---------- */
.splash{
  position:fixed; inset:0; z-index:2000; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:1; transition:opacity .7s ease;
}
.splash.dismiss{ opacity:0; pointer-events:none; }
.splash-grain{
  position:absolute; inset:0; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.splash-mark{
  width:clamp(140px, 20vmin, 240px); height:clamp(140px, 20vmin, 240px);
  opacity:0; transform:scale(.4) rotate(-14deg);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.5));
  animation: splash-stamp .55s .3s cubic-bezier(.17,.89,.32,1.15) forwards;
}
@keyframes splash-stamp{
  0%{opacity:0; transform:scale(.4) rotate(-14deg);}
  60%{opacity:1; transform:scale(1.08) rotate(1deg);}
  100%{opacity:1; transform:scale(1) rotate(0deg);}
}
.splash-word{
  font-family:var(--font-mono); letter-spacing:.24em; text-transform:uppercase;
  font-size:1rem; font-weight:700; color:var(--paper-dim);
  white-space:nowrap; overflow:hidden; width:0; border-right:2px solid var(--paper-dim);
  animation: splash-type 1s 1.05s steps(13) forwards, splash-blink .8s step-end infinite, splash-hide-caret 0s 2.05s forwards;
}
/* +13*letter-spacing: width:13ch alone ignores the .24em gaps the
   letter-spacing below adds between characters, so the box was too
   narrow and clipped "HOME" before it finished typing in. */
@keyframes splash-type{ to{ width:calc(13ch + 13 * .24em + 4px); } }
@keyframes splash-blink{ 50%{ border-color:transparent; } }
@keyframes splash-hide-caret{ to{ border-color:transparent; } }
@media (prefers-reduced-motion: reduce){
  .splash{ transition:opacity .15s ease; }
  .splash-mark, .splash-word{ animation:none !important; opacity:1 !important; transform:none !important; width:auto !important; border-right:none !important; }
}

/* ---------- header / nav ---------- */
header.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(24,22,19,.94);
  border-bottom:1px solid rgba(233,224,203,.15);
  backdrop-filter:blur(4px);
}
.site-head .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; max-width:var(--maxw-wide); margin:0 auto; gap:16px; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:.1em;
  font-size:1.4rem;
  color:var(--paper);
  display:flex; align-items:center; gap:14px;
}
.wordmark .mark{display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
.wordmark small{
  display:block; font-weight:400; letter-spacing:.06em; font-size:.55rem;
  color:var(--paper-dim); text-transform:uppercase; margin-top:3px;
}
nav.mainnav{display:flex;gap:2px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;}
nav.mainnav a{
  padding:8px 12px; border-radius:var(--radius); color:var(--paper-dim);
  border:1px solid transparent;
}
nav.mainnav a:hover{color:var(--paper);border-color:rgba(233,224,203,.2);}
nav.mainnav a.active{color:var(--ink);background:var(--paper);}

.langswitch{display:flex;gap:2px;font-family:var(--font-mono);font-size:.72rem;}
.langswitch button{
  background:transparent;border:1px solid rgba(233,224,203,.25);color:var(--paper-dim);
  padding:6px 10px;cursor:pointer;letter-spacing:.04em;
}
.langswitch button:first-child{border-radius:2px 0 0 2px;}
.langswitch button:last-child{border-radius:0 2px 2px 0;border-left:none;}
.langswitch button.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.langswitch button:hover:not(.active){color:var(--paper);}

/* ---------- footer ---------- */
footer.site-foot{
  border-top:1px solid rgba(233,224,203,.15);
  margin-top:64px;
  padding:32px 20px 60px;
  color:var(--paper-dim);
  font-size:.85rem;
}
footer.site-foot .wrap{display:flex;flex-direction:column;gap:10px;}
footer.site-foot .fine{font-family:var(--font-mono);font-size:.72rem;opacity:.7;}

/* ---------- generic page furniture ---------- */
main{min-height:60vh;padding:36px 0 20px;}
.page-title{
  font-family:var(--font-mono);
  text-transform:uppercase; letter-spacing:.06em;
  font-size:.78rem; color:var(--paper-dim);
  border-bottom:1px dashed rgba(233,224,203,.25);
  padding-bottom:10px; margin-bottom:26px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
}
h1.hl{font-family:var(--font-serif);font-size:2rem;margin:0 0 6px;}
h2.hl{font-family:var(--font-serif);font-size:1.4rem;margin:36px 0 12px;}
p.lead{font-size:1.05rem;color:var(--paper);max-width:64ch;}
.muted{color:var(--paper-dim);}

.stamp{
  display:inline-block; font-family:var(--font-mono); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; font-size:.7rem;
  padding:4px 10px; border:2px solid var(--accent-red-bright); color:var(--accent-red-bright);
  transform:rotate(-3deg); border-radius:3px; background:rgba(143,43,30,.06);
}

/* ---------- hero (home) ---------- */
.hero{
  padding:52px 0 40px; border-bottom:1px solid rgba(233,224,203,.15);
  background:
    linear-gradient(180deg, rgba(233,224,203,.03), transparent 60%);
}
.hero .kicker{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;color:var(--paper-dim);margin-bottom:14px;display:flex;gap:10px;align-items:center;}
.hero h1{font-family:var(--font-serif);font-size:clamp(2rem,5vw,3.2rem);margin:0 0 18px;max-width:16ch;}
.hero p{max-width:62ch;color:var(--paper-dim);font-size:1.05rem;}
.hero .ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;}
.btn{
  font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  padding:11px 18px; border:1px solid var(--paper); border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:8px;
}
.btn.primary{background:var(--paper);color:var(--ink);}
.btn.primary:hover{background:#fff;}
.btn.ghost:hover{border-color:var(--paper);background:rgba(233,224,203,.06);}

.stat-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:38px;padding-top:24px;border-top:1px dashed rgba(233,224,203,.2);}
.stat{font-family:var(--font-mono);}
.stat b{display:block;font-size:1.6rem;color:var(--paper);}
.stat span{font-size:.72rem;color:var(--paper-dim);text-transform:uppercase;letter-spacing:.05em;}

.section-note{
  font-size:.85rem;color:var(--paper-dim);border-left:2px solid var(--accent-red-bright);
  padding:6px 0 6px 14px;margin:24px 0;max-width:60ch;
}

/* ---------- photo placeholder (stand-in for AI-generated product photography) ---------- */
.photo{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius);
  display:flex; align-items:flex-end; justify-content:flex-start;
  border:1px solid rgba(0,0,0,.35);
}
.photo::before{ /* vignette */
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,.45) 100%);
}
.photo::after{ /* grain */
  content:""; position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.photo .tag{
  position:relative; z-index:2; margin:12px; font-family:var(--font-mono);
  font-size:.62rem; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(0,0,0,.55); background:rgba(255,255,255,.35); padding:3px 7px; border-radius:2px;
}
.photo .glyph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-style:italic; font-size:.85rem; color:rgba(0,0,0,.28);
  text-align:center; padding:20% 14%;
}
.photo.era1{background:linear-gradient(155deg,var(--era1-a),var(--era1-b));}
.photo.era2{background:linear-gradient(155deg,var(--era2-b),var(--era2-a) 55%,var(--era2-c));}
.photo.era3{background:linear-gradient(155deg,var(--era3-c),var(--era3-a) 60%,var(--era3-b));}
.photo.era4{background:linear-gradient(155deg,var(--era4-b),var(--era4-a) 55%,var(--era4-c));}
.photo.era5{background:linear-gradient(155deg,var(--era5-a),var(--era5-b));}
.photo.wide{aspect-ratio:16/9;}
.photo.square{aspect-ratio:1/1;}
.photo.tall{aspect-ratio:3/4;}

/* ---------- real photo (once generated) replaces the placeholder above ---------- */
.photo-img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; display:none;
}
.photo.has-photo .photo-img{display:block;}
.photo.has-photo .glyph, .photo.has-photo .tag{display:none;}
.photo.has-photo{cursor:zoom-in;}
.photo::before{z-index:1;}
.photo::after{z-index:1;}
.photo .glyph{z-index:1;}

.recall-stamp{
  position:absolute; z-index:3; top:14px; right:14px;
  font-family:var(--font-mono); font-weight:700; font-size:.68rem; letter-spacing:.06em;
  color:var(--accent-red-bright); border:2px solid var(--accent-red-bright);
  padding:3px 8px; border-radius:3px; transform:rotate(6deg);
  background:rgba(233,224,203,.55);
  text-transform:uppercase;
}

/* ---------- tier stamp ---------- */
.tier{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono);
  font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px;
  border-radius:2px; border:1px solid currentColor;
}
.tier::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.tier.legkiy{color:var(--tier-light);}
.tier.sredniy{color:var(--tier-medium);}
.tier.zhutkiy{color:var(--tier-severe);}
.tier.isklyuchitelniy{color:var(--tier-exceptional); background:var(--tier-exceptional); color:var(--paper);}

/* ---------- filter bar ---------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px; margin-bottom:24px; background:rgba(233,224,203,.04);
  border:1px solid rgba(233,224,203,.12); border-radius:var(--radius);
}
.filters label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;color:var(--paper-dim);margin-right:4px;}
.filters select, .filters input[type=text]{
  background:var(--ink-soft); color:var(--paper); border:1px solid rgba(233,224,203,.25);
  padding:7px 10px; border-radius:2px; font-family:var(--font-sans); font-size:.85rem;
}
.filters .count{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--paper-dim);}

/* ---------- product grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px;}
.card{
  background:rgba(233,224,203,.03); border:1px solid rgba(233,224,203,.12);
  border-radius:var(--radius); overflow:hidden; transition:border-color .15s, transform .15s;
}
.card:hover{border-color:rgba(233,224,203,.4); transform:translateY(-2px);}
.card .num{
  position:absolute; z-index:3; top:14px; left:14px; font-family:var(--font-mono);
  font-weight:700; font-size:.72rem; color:rgba(0,0,0,.6); background:rgba(255,255,255,.4);
  padding:2px 7px; border-radius:2px;
}
.card .body{padding:12px 14px 14px;}
.card .name{font-family:var(--font-serif);font-size:.98rem;line-height:1.25;margin:0 0 6px;}
.card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:var(--paper-dim);font-family:var(--font-mono);}
.card .status{
  font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--paper-dim); margin-top:8px; opacity:.8;
}

/* ---------- product detail ---------- */
.detail-grid{display:grid; grid-template-columns:340px 1fr; gap:36px;}
@media (max-width:820px){.detail-grid{grid-template-columns:1fr;}}
.detail-head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px;}
.detail-head .num{font-family:var(--font-mono);color:var(--paper-dim);}
.detail-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 22px; font-family:var(--font-mono); font-size:.78rem; color:var(--paper-dim);}
.slogan{
  font-family:var(--font-serif); font-style:italic; font-size:1.15rem; color:var(--paper);
  border-left:2px solid var(--paper-dim); padding-left:14px; margin:20px 0;
}
.field{margin-bottom:22px;}
.field h3{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; color:var(--paper-dim); margin:0 0 8px;}
.field p{margin:0; color:var(--paper);}

.complaint{
  background:rgba(233,224,203,.03); border:1px solid rgba(233,224,203,.12);
  border-left:3px solid var(--accent-red-bright);
  padding:16px 18px; margin-bottom:14px; border-radius:0 2px 2px 0;
}
.complaint .label{font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; color:var(--accent-red-bright); letter-spacing:.06em; margin-bottom:8px; display:block;}
.complaint p{margin:0; font-family:var(--font-serif); font-size:1rem; font-style:italic;}

.hotline-outro{
  font-family:var(--font-mono); font-size:.82rem; color:var(--paper-dim);
  border-top:1px dashed rgba(233,224,203,.2); padding-top:16px; margin-top:26px;
}

.status-ribbon{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.05em; padding:5px 10px; border-radius:2px; margin-bottom:18px;
}
.status-ribbon.doc{background:rgba(178,73,31,.15); color:var(--tier-severe); border:1px solid var(--tier-severe);}
.status-ribbon.pending{background:rgba(154,154,143,.12); color:var(--paper-dim); border:1px solid rgba(233,224,203,.25);}

.prevnext{display:flex; justify-content:space-between; margin-top:44px; padding-top:20px; border-top:1px solid rgba(233,224,203,.12); font-family:var(--font-mono); font-size:.8rem;}
.prevnext a{color:var(--paper-dim);}
.prevnext a:hover{color:var(--paper);}

.comment-teaser{
  margin-top:30px; padding:16px 18px; border:1px dashed rgba(233,224,203,.25); border-radius:2px;
  font-size:.88rem; color:var(--paper-dim);
}

/* ---------- timeline ---------- */
.timeline{position:relative; margin-top:20px; padding-left:26px; border-left:2px solid rgba(233,224,203,.2);}
.tl-item{position:relative; padding-bottom:38px;}
.tl-item::before{content:""; position:absolute; left:-33px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--ink);}
.tl-item h3{font-family:var(--font-serif); font-size:1.2rem; margin:0 0 4px;}
.tl-item .yrs{font-family:var(--font-mono); font-size:.75rem; color:var(--paper-dim); margin-bottom:8px; display:block;}
.tl-item p{max-width:60ch; color:var(--paper);}

/* ---------- facility page ---------- */
.facility-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 30px;}
@media (max-width:760px){.facility-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.facility-grid{grid-template-columns:1fr;}}
.facility-grid .photo{aspect-ratio:4/3;}

/* ---------- personnel ---------- */
.personnel-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top:20px;}
.pcard .photo{aspect-ratio:3/4;}
.pcard .cap{margin-top:10px;}
.pcard .cap b{display:block; font-family:var(--font-serif); font-size:1.05rem;}
.pcard .cap span{font-family:var(--font-mono); font-size:.72rem; color:var(--paper-dim);}

.sig-list{list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.sig-list li{
  font-family:var(--font-mono); font-size:.85rem; color:var(--paper-dim);
  border:1px solid rgba(233,224,203,.15); border-radius:2px; padding:10px 14px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.sig-list li b{color:var(--paper); font-weight:600;}

/* ---------- sealed / redacted records ---------- */
.redacted-text{
  background:var(--ink); color:var(--ink); border-radius:2px; padding:1px 6px;
  user-select:none; display:inline-block;
}
.tl-item.sealed h3, .tl-item.sealed .yrs{opacity:.9;}
.tl-item.sealed::before{background:var(--ink); border-color:var(--paper-dim);}
.seal-note{font-family:var(--font-mono); font-size:.72rem; color:var(--paper-dim); text-transform:uppercase; letter-spacing:.04em; margin-top:6px;}
.photo.sealed{background:linear-gradient(155deg,#141210,#1e1b17);}
.photo.sealed::before{background:none;}
.photo.sealed .glyph{color:rgba(233,224,203,.18); font-size:1.6rem;}
.photo.sealed .tag{background:rgba(233,224,203,.12); color:var(--paper-dim);}

/* ---------- empty state ---------- */
.empty{
  padding:40px 24px; text-align:center; border:1px dashed rgba(233,224,203,.2); border-radius:2px;
  color:var(--paper-dim); font-family:var(--font-mono); font-size:.85rem;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:3000; background:rgba(10,9,7,.96);
  display:flex; flex-direction:column; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox .lb-stage{
  flex:1; display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none; position:relative;
}
.lightbox #lb-img{
  max-width:88vw; max-height:76vh; object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.6); user-select:none;
  transition:transform .08s ease-out; cursor:zoom-in;
}
.lightbox .lb-close, .lightbox .lb-nav{
  position:absolute; z-index:1; background:rgba(233,224,203,.08); color:var(--paper);
  border:1px solid rgba(233,224,203,.25); border-radius:var(--radius); cursor:pointer;
  font-family:var(--font-mono); line-height:1;
}
.lightbox .lb-close:hover, .lightbox .lb-nav:hover{background:rgba(233,224,203,.18);}
.lightbox .lb-close{top:16px; right:16px; width:38px; height:38px; font-size:1.4rem;}
.lightbox .lb-nav{top:50%; transform:translateY(-50%); width:44px; height:56px; font-size:1.2rem;}
.lightbox .lb-prev{left:16px;}
.lightbox .lb-next{right:16px;}
.lightbox .lb-bar{
  display:flex; justify-content:space-between; gap:14px; padding:12px 20px 20px;
  font-family:var(--font-mono); font-size:.78rem; color:var(--paper-dim);
}
@media (max-width:640px){
  .lightbox .lb-nav{width:36px;height:48px;}
  .lightbox #lb-img{max-width:94vw;}
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox #lb-img{transition:none;}
}