/* ============================================================
   ZAAMAN — THE ARCHIVE (v4 — v1 layout, restored)
   Shared design system. Editorial / catalog / ledger logic.
   ============================================================ */

@font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces[SOFT,WONK,opsz,wght].ttf'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('fonts/SpaceGrotesk[wght].ttf'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono[wght].ttf'); font-weight: 100 800; font-display: swap; }

:root{
  --paper: #F1EFE8;
  --paper-deep: #E8E4DA;
  --ink: #14130F;
  --ink-soft: #4A473F;
  --line: #C9C4B6;
  --line-soft: #DAD6C9;
  --serif: 'Fraunces', serif;
  --sans: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --max: 1440px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
::selection{background:var(--ink); color:var(--paper);}
a{color:inherit; text-decoration:none;}
img,video{display:block; max-width:100%;}

.ledger-num{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--ink-soft); }

/* ===== MASTHEAD — single row, real logo ===== */
.masthead{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 56px; border-bottom:1px solid var(--line);
  background:rgba(241,239,232,.92); backdrop-filter:blur(8px);
}
.masthead .brand{ display:flex; align-items:center; }
.masthead .brand svg{ height:20px; width:auto; display:block; color:var(--ink); }
.masthead .nav{ display:flex; align-items:center; gap:28px; font-size:12.5px; letter-spacing:0.02em; }
.masthead .nav a{ padding-bottom:3px; border-bottom:1px solid transparent; opacity:.82; transition:.2s; white-space:nowrap; text-transform:uppercase; }
.masthead .nav a:hover, .masthead .nav a.active{ opacity:1; border-color:var(--ink); }
.masthead .nav a.cta{ border:1px solid var(--ink); padding:8px 14px; border-radius:1px; opacity:1; }
.masthead .nav a.cta:hover{ background:var(--ink); color:var(--paper); }
@media (max-width: 900px){
  .masthead{ padding:16px 22px; }
  .masthead .nav{ gap:14px; font-size:11px; flex-wrap:wrap; justify-content:flex-end; }
}

/* ===== GENERIC RAIL SECTION: label rail (left) + content (right) ===== */
.rail-section{
  display:grid; grid-template-columns: 260px 1fr;
  border-bottom:1px solid var(--line);
}
.rail-section .rail{
  border-right:1px solid var(--line);
  padding:44px 32px;
}
.rail-section .rail .fol{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:18px; text-transform:uppercase; }
.rail-section .rail .rail-title{ font-family:var(--serif); font-style:italic; font-weight:420; font-size:24px; line-height:1.28; }
.rail-section .content{ padding:56px 64px; }

@media (max-width: 900px){
  .rail-section{ grid-template-columns: 1fr; }
  .rail-section .rail{ border-right:none; border-bottom:1px solid var(--line); padding:28px 22px; }
  .rail-section .content{ padding:32px 22px; }
}

/* ===== MOBILE RESPONSIVE FIX (additive only, desktop inline styles above are untouched) ===== */
@media (max-width: 900px){
  #layering-media, #howtouse-media, #founder-media{
    grid-template-columns: 1fr !important; gap:24px !important;
  }
  #founder-photo-col, #founder-text-col{ padding:0 22px !important; }
  #founder-photo-col{ padding-top:32px !important; }
  #founder-text-col{ padding-bottom:32px !important; }
}

/* ===== HERO ===== */
.hero{
  display:grid; grid-template-columns: 260px 1fr;
  border-bottom:1px solid var(--line);
}
.hero-rail{
  border-right:1px solid var(--line); padding:40px 32px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero-rail .entry-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--ink-soft); line-height:2.1; text-transform:uppercase; }
.hero-rail .entry-label b{ color:var(--ink); font-weight:500; }
.hero-main{ padding:52px 64px 0; }
.hero-main h1{
  font-family:var(--serif); font-weight:340; font-size:clamp(38px,5vw,76px); line-height:1.04; letter-spacing:-0.01em; max-width:18ch;
}
.hero-main .sub{
  font-size:16px; line-height:1.65; color:var(--ink-soft); max-width:56ch; margin-top:28px;
}
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.btn{ font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600; padding:14px 24px; border:1px solid var(--ink); border-radius:1px; display:inline-block; transition:.2s; }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.ghost{ border-color:var(--line); }
.btn.ghost:hover{ background:var(--ink); border-color:var(--ink); }
button.btn{ -webkit-appearance:none; appearance:none; background:var(--paper); color:var(--ink); font-family:inherit; cursor:pointer; }
.hero-plate-wrap{ padding:36px 64px 0; }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .hero-rail{ border-right:none; border-bottom:1px solid var(--line); padding:24px; }
  .hero-main{ padding:32px 22px 0; }
  .hero-plate-wrap{ padding:28px 22px 0; }
}

/* ===== PLATES (images — full colour, edge-to-edge) ===== */
.plate{ border:1px solid var(--line); background:var(--paper-deep); overflow:hidden; }
.plate img, .plate video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.plate.ratio-portrait{ aspect-ratio: 3/4; }
.plate.ratio-square{ aspect-ratio: 1/1; }
.plate.ratio-tall-product{ aspect-ratio: 0.76/1; }
.plate.ratio-wide{ aspect-ratio: 16/9; }
.plate.ratio-tall{ aspect-ratio: 2/3; }
.plate.ratio-9-16{ aspect-ratio: 9/16; max-width:420px; }
.plate-caption{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.06em; color:var(--ink-soft); margin-top:12px; line-height:1.6; }

/* ===== PLATE GRID (gallery) — uniform, never cropped ===== */
.plate-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.plate-grid .cell{ background:var(--paper-deep); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; padding:0; }
.plate-grid .cell img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 900px){
  .plate-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== ESSAY COLUMNS (3-up premise style) ===== */
.essay-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:48px; }
.essay-cols .col .num{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:0.1em; margin-bottom:14px; }
.essay-cols .col h3{ font-family:var(--serif); font-weight:460; font-size:21px; margin-bottom:12px; line-height:1.22; }
.essay-cols .col p{ font-size:14px; line-height:1.7; color:var(--ink-soft); }
@media (max-width: 900px){ .essay-cols{ grid-template-columns:1fr; gap:32px; } }

/* ===== STEP ROWS (numbered process) ===== */
.step-rows{ border-top:1px solid var(--line-soft); }
.step-row{ display:grid; grid-template-columns: 70px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--line-soft); }
.step-row .n{ font-family:var(--mono); font-size:13px; color:var(--ink-soft); }
.step-row p{ font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:70ch; }
.step-row p b{ color:var(--ink); font-weight:600; }
.step-rows.dots .step-row{ grid-template-columns: 18px 1fr; }
.step-rows.dots .dot{ width:6px; height:6px; border-radius:50%; background:var(--ink); margin-top:8px; }

/* ===== CATALOG (product listing rows) ===== */
.catalog-row{ display:grid; grid-template-columns: 260px 1fr; border-bottom:1px solid var(--line-soft); }
.catalog-row:last-child{ border-bottom:none; }
.catalog-row .swatch{ border-right:1px solid var(--line); padding:14px; display:flex; align-items:center; justify-content:center; background:var(--paper-deep); }
.catalog-row .swatch img{ width:100%; height:100%; object-fit:contain; aspect-ratio: 0.76/1; }
.catalog-row .swatch img.ratio-ceramic{ aspect-ratio: 0.8/1; }
.catalog-row .entry-detail{ padding:36px 56px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.catalog-row .entry-detail .kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--ink-soft); display:flex; gap:18px; flex-wrap:wrap; }
.catalog-row .entry-detail .name{ font-family:var(--serif); font-weight:440; font-size:26px; line-height:1.2; }
.catalog-row .entry-detail .meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft); }
.catalog-row .entry-detail .meta span:not(:last-child)::after{ content:'·'; margin-left:14px; color:var(--line); }
.catalog-row .entry-detail .desc{ font-size:14.5px; line-height:1.7; color:var(--ink-soft); max-width:62ch; }
.catalog-row .entry-detail .notes{ font-size:12.5px; color:var(--ink-soft); line-height:1.6; }
.catalog-row .entry-detail .notes b{ color:var(--ink); }
.catalog-row .entry-detail .row-cta{ margin-top:6px; }
@media (max-width: 900px){
  .catalog-row{ grid-template-columns: 1fr; }
  .catalog-row .swatch{ border-right:none; border-bottom:1px solid var(--line); }
  .catalog-row .entry-detail{ padding:28px 24px; }
}

/* ===== FIELD / SPEC LIST ===== */
.field-list .field{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-soft); display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line-soft); gap:20px; }
.field-list .field b{ color:var(--ink); font-weight:500; }

/* ===== CTA BAND ===== */
.rail-section .content p, .essay-cols .col p, .step-row p, .catalog-row .entry-detail .desc, .hero-main .sub{ text-align:justify; }
.cta-band{ display:block; border-bottom:1px solid var(--line); padding:56px 64px; }
.cta-band .body{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cta-band .body h2{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:32px; max-width:16ch; }
.cta-band .body p{ font-size:14.5px; color:var(--ink-soft); max-width:44ch; margin-top:10px; }
@media (max-width: 900px){ .cta-band{ padding:32px 22px; } }

/* ===== SECTION HEAD ===== */
.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:40px; gap:24px; flex-wrap:wrap; }
.section-head h2{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:30px; }

/* ===== FORM (register) ===== */
.register-form{ display:grid; grid-template-columns: 1fr 1fr; gap:0 40px; }
.form-field{ padding:18px 0; border-bottom:1px solid var(--line-soft); }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:10px; text-transform:uppercase; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:none; background:transparent; font-family:var(--sans); font-size:16px; color:var(--ink); padding:4px 0; outline:none;
}
.form-field textarea{ resize:vertical; min-height:70px; font-size:14px; line-height:1.6; }
.form-field select{ appearance:none; cursor:pointer; }
.contact-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.contact-ctas .btn svg{ width:14px; height:14px; vertical-align:-2px; margin-right:8px; }
@media (max-width: 900px){ .register-form{ grid-template-columns:1fr; } }

/* ===== FOOTER ===== */
footer.site-footer{ display:grid; grid-template-columns: 260px 1fr; }
footer.site-footer .lbl{ padding:44px 32px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:14px; }
footer.site-footer .lbl svg{ height:18px; width:auto; color:var(--ink); }
footer.site-footer .lbl p{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-soft); line-height:1.7; text-transform:uppercase; }
footer.site-footer .cols{ padding:44px 64px; display:grid; grid-template-columns: repeat(3,1fr); gap:32px; }
footer.site-footer .cols h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--ink-soft); margin-bottom:16px; text-transform:uppercase; }
footer.site-footer .cols a, footer.site-footer .cols span{ display:block; font-size:12.5px; margin-bottom:9px; }
footer.site-footer .cols a:hover{ text-decoration:underline; }
footer.site-footer .bottom{ grid-column:1/-1; margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--ink-soft); }
@media (max-width: 900px){
  footer.site-footer{ grid-template-columns:1fr; }
  footer.site-footer .lbl{ border-right:none; border-bottom:1px solid var(--line); }
  footer.site-footer .cols{ grid-template-columns: repeat(2,1fr); padding:32px 24px; }
}