/* ==========================================================================
   BAGHAJATIN.COM — Core design system  "Archive & Ink"
   Didone display · grotesque body · mono catalogue labels · plate framing
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ink — deep midnight, the primary structural dark */
  --ink-900:#080B10;
  --ink-850:#0C1017;
  --ink-800:#121822;
  --ink-700:#1C2531;
  --ink-600:#2A3543;
  --ink-500:#3B4756;

  /* Fog — supporting neutrals */
  --fog-500:#5C6673;
  --fog-400:#8A939F;
  --fog-300:#B2B9C2;

  /* Paper — warm mineral tones */
  --stone-400:#BDB2A0;
  --stone-300:#CFC6B5;
  --parch-200:#E6DECD;
  --ivory-100:#F3EFE5;
  --ivory-050:#FAF7F0;

  /* Accents */
  --copper:#B0722E;
  --copper-lt:#D29B57;
  --copper-dk:#8B571C;
  --crimson:#8B2A28;
  --crimson-lt:#A9403A;

  /* Semantic (light surface default) */
  --bg:var(--ivory-050);
  --surface:var(--ivory-100);
  --fg:var(--ink-850);
  --fg-soft:var(--ink-600);
  --fg-mute:var(--fog-500);
  --line:rgba(8,11,16,.14);
  --line-soft:rgba(8,11,16,.08);

  /* Per-chapter accent.
     Two values exist for every chapter: one that is legible on the ivory
     surfaces and one for the ink surfaces. `--chapter` always resolves to the
     correct one because `.on-dark` re-declares it. This keeps every mono
     label, caption and link at or above WCAG AA 4.5:1 on both grounds.
     Light default #8B571C = 5.6:1 on ivory. Dark default #D29A57 = 7.7:1 on ink. */
  --chapter:#8B571C;
  --chapter-dark:#D29A57;
  /* Decorative-only copper — rules, ticks, marks. Never carries text. */
  --chapter-mark:var(--copper);

  /* Type */
  --f-display:"Bodoni Moda","Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:"Archivo","Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Fluid scale */
  --t-mega:clamp(3.4rem,13vw,12rem);
  --t-hero:clamp(2.7rem,8.2vw,7.2rem);
  --t-h1:clamp(2.2rem,5.6vw,4.6rem);
  --t-h2:clamp(1.65rem,3.6vw,3rem);
  --t-h3:clamp(1.25rem,2.2vw,1.85rem);
  --t-h4:clamp(1.08rem,1.5vw,1.3rem);
  --t-lede:clamp(1.12rem,1.65vw,1.5rem);
  --t-body:clamp(1.02rem,1.08vw,1.14rem);
  --t-small:clamp(.9rem,.95vw,.98rem);
  --t-label:clamp(.66rem,.78vw,.74rem);

  /* Rhythm */
  --gut:clamp(1.15rem,3.2vw,2.6rem);
  --sec-y:clamp(4.5rem,11vw,10.5rem);
  --sec-y-sm:clamp(3rem,7vw,6rem);
  --maxw:1560px;

  --nav-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
html,body{max-width:100%;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  padding-top:var(--nav-h);
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{fill:currentColor}
:target{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.14}
h4{font-size:var(--t-h4);line-height:1.24;letter-spacing:0}
p{text-wrap:pretty}
strong,b{font-weight:600}

.display{font-family:var(--f-display)}
.mono{font-family:var(--f-mono)}

/* Micro label — the archival catalogue-card voice used site-wide */
.label{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--fg-mute);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.label--accent{color:var(--chapter)}
.label--rule::before{
  content:"";
  width:clamp(20px,3vw,44px);
  height:1px;
  background:currentColor;
  opacity:.5;
  flex:none;
}
.label--sq::before{
  content:"";
  width:6px;height:6px;
  background:var(--chapter-mark);
  flex:none;
}

/* Chapter number — oversized didone numeral */
.chapno{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:.85;
  color:var(--chapter);
  opacity:.32;
  letter-spacing:-.03em;
  font-variant-numeric:lining-nums;
}

/* Lede — large introductory paragraph */
.lede{
  font-size:var(--t-lede);
  line-height:1.5;
  color:var(--fg-soft);
  letter-spacing:-.005em;
}
.lede--display{
  font-family:var(--f-display);
  font-size:clamp(1.3rem,2.6vw,2.15rem);
  line-height:1.32;
  letter-spacing:-.015em;
  color:var(--fg);
}

.prose > * + *{margin-top:1.15em}
.prose h3{margin-top:2.2em}
.prose h4{margin-top:2em}
.prose p{max-width:68ch}
.prose a:not([class]){
  color:var(--chapter);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:rgba(176,114,46,.5);
  transition:text-decoration-color .3s var(--ease);
}
.prose a:not([class]):hover{text-decoration-color:currentColor}
.prose ul:not([class]){padding-left:0;list-style:none}
.prose ul:not([class]) li{
  position:relative;padding-left:1.5em;margin-top:.6em;max-width:66ch;
}
.prose ul:not([class]) li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:7px;height:1px;background:var(--chapter);
}

/* Text scoped to dark surfaces.
   Re-declaring --chapter here is what keeps accent text legible on ink. */
.on-dark{
  --fg:var(--ivory-100);
  --fg-soft:#C9CFD8;
  --fg-mute:var(--fog-400);
  --line:rgba(243,239,229,.16);
  --line-soft:rgba(243,239,229,.09);
  --chapter:var(--chapter-dark);
  --chapter-mark:var(--copper-lt);
  color:var(--fg);
}

/* ---------- 4. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--narrow{max-width:1180px}
.wrap--read{max-width:820px}
.section{padding-block:var(--sec-y)}
.section--sm{padding-block:var(--sec-y-sm)}
.section--tight{padding-block:clamp(2.2rem,5vw,4rem)}

.grid{display:grid;gap:var(--gut)}
.g12{grid-template-columns:repeat(12,minmax(0,1fr))}
@media (max-width:900px){.g12{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:560px){.g12{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Surfaces */
.s-ink{background:var(--ink-900)}
.s-ink-800{background:var(--ink-800)}
.s-parch{background:var(--parch-200)}
.s-ivory{background:var(--ivory-100)}
.s-stone{background:var(--stone-300)}

/* Hairline rules with registration mark */
.hr{
  border:0;height:1px;background:var(--line);
  position:relative;margin-block:clamp(2rem,4vw,3.4rem);
}
.hr::after{
  content:"";position:absolute;left:0;top:-3px;
  width:7px;height:7px;background:var(--chapter-mark);
}

/* ---------- 5. GRAIN ---------- */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){.grain{opacity:.02}}

/* ---------- 6. PHOTOGRAPHIC PLATES ---------- */
/* A plate is the site's single, consistent way of presenting an archival image:
   hairline frame, corner registration ticks, mono caption, plate number.
   Portraits are never cropped — object-fit:contain protects faces. */
.plate{margin:0;position:relative}
.plate__frame{
  position:relative;
  background:var(--ink-850);
  overflow:hidden;
  isolation:isolate;
}
.plate__frame::after{ /* unifying warm wash, kept low so the photo stays honest */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,rgba(176,114,46,.14),rgba(8,11,16,.20));
  mix-blend-mode:multiply;opacity:.55;
}
.plate--plain .plate__frame::after{display:none}
/* <picture> must fill the frame, otherwise the img's height:100% resolves
   against a wrapper that is itself sized by the img, and the plate collapses. */
.plate__frame picture{display:block;width:100%;height:100%}
.plate__img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.04) brightness(1.02);
}
/* Fixed-ratio plates: contain keeps the whole subject visible, never cropping a face */
.plate--fit .plate__frame{
  aspect-ratio:var(--ar,4/5);
  display:grid;place-items:center;
  background:var(--ink-900);
}
.plate--fit .plate__img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
}
/* A cover crop is only ever applied to non-portrait subjects (artefacts,
   group scenes) with an explicit, verified-safe focal point. */
.plate--cover .plate__frame{aspect-ratio:var(--ar,16/9)}
.plate--cover .plate__img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--focal,center);
}
.plate__ticks::before,.plate__ticks::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;z-index:2;
  border-color:var(--chapter);border-style:solid;opacity:.85;
}
.plate__ticks::before{top:9px;left:9px;border-width:1px 0 0 1px}
.plate__ticks::after{bottom:9px;right:9px;border-width:0 1px 1px 0}
.plate__cap{
  display:flex;gap:.9em;align-items:flex-start;
  margin-top:.95rem;padding-top:.7rem;
  border-top:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:clamp(.68rem,.85vw,.78rem);
  line-height:1.55;
  letter-spacing:.02em;
  color:var(--fg-mute);
}
.plate__no{
  color:var(--chapter);font-weight:500;flex:none;
  letter-spacing:.14em;text-transform:uppercase;
}
.plate__cap em{font-style:normal;color:var(--fg-soft)}

/* ---------- 7. LINKS + BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.85em;
  font-family:var(--f-mono);
  font-size:var(--t-label);
  letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:1.05em 1.9em;
  border:1px solid currentColor;
  color:var(--fg);
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease);
  min-height:48px;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--chapter);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.btn:hover,.btn:focus-visible{color:var(--ivory-050);border-color:var(--chapter)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn__arw{transition:transform .45s var(--ease)}
.btn:hover .btn__arw{transform:translateX(5px)}
.btn--solid{background:var(--chapter);border-color:var(--chapter);color:var(--ivory-050)}
.btn--solid::before{background:var(--ink-900)}
.btn--solid:hover,.btn--solid:focus-visible{color:var(--ivory-050);border-color:var(--ink-900)}
.btn--lg{font-size:clamp(.72rem,.95vw,.84rem);padding:1.25em 2.4em}

/* Quiet inline "read on" link */
.tlink{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--chapter);
  padding-block:.45em;
  position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.tlink .arw{transition:transform .4s var(--ease)}
.tlink:hover .arw{transform:translateX(4px)}

/* ---------- 8. FOCUS + A11Y ---------- */
:focus-visible{
  outline:2px solid var(--copper-lt);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:absolute;left:.6rem;top:.6rem;z-index:10000;
  transform:translateY(-180%);
  background:var(--ink-900);color:var(--ivory-050);
  padding:.85rem 1.35rem;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--copper);
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}
.vh{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}