/* ==========================================================================
   BAGHAJATIN.COM — Editorial components
   Reusable compositions; every page combines them differently.
   ========================================================================== */

/* ---------- BREADCRUMB ---------- */
.crumb{
  font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);
  display:flex;flex-wrap:wrap;align-items:center;gap:.55em;
}
.crumb a{color:inherit;transition:color .3s var(--ease)}
.crumb a:hover,.crumb a:focus-visible{color:var(--chapter)}
.crumb li{display:flex;align-items:center;gap:.55em}
.crumb li+li::before{content:"/";color:var(--chapter);opacity:.6}
.crumb [aria-current]{color:var(--chapter)}

/* ==========================================================================
   PAGE HEADS — four distinct opening compositions
   ========================================================================== */
.phead{position:relative;overflow:hidden}
.phead__in{position:relative;z-index:2}
.phead__no{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  font-family:var(--f-display);
  font-size:clamp(11rem,42vw,34rem);
  line-height:.72;font-weight:400;
  color:var(--chapter);opacity:.07;
  right:-.06em;bottom:-.2em;
  letter-spacing:-.05em;
}

/* A — SPLIT: type left, portrait plate right */
.phead--split{background:var(--ink-900);padding-block:clamp(3.4rem,8vw,7rem)}
.phead--split .phead__grid{
  display:grid;gap:clamp(2rem,4vw,4rem);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:940px){
  .phead--split .phead__grid{grid-template-columns:1.28fr .72fr}
}
.phead__kicker{margin-bottom:clamp(1.1rem,2.2vw,1.8rem)}
.phead__h{
  font-size:clamp(2.5rem,6.6vw,5.6rem);
  line-height:.98;letter-spacing:-.022em;
  color:var(--ivory-050);
}
.phead__sub{
  margin-top:clamp(1.2rem,2.4vw,2rem);
  max-width:56ch;
}

/* B — STACK: pure typography, no image */
.phead--stack{
  background:var(--ink-900);
  padding-block:clamp(4rem,10vw,9rem) clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(243,239,229,.14);
}
.phead--stack .phead__h{
  font-size:clamp(2.8rem,10vw,8.5rem);
  line-height:.9;letter-spacing:-.035em;
}
.phead--stack .phead__meta{
  margin-top:clamp(2rem,4vw,3.4rem);
  display:grid;gap:clamp(1.2rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  padding-top:clamp(1.4rem,3vw,2.2rem);
  border-top:1px solid rgba(243,239,229,.16);
}

/* C — PLATE BAND: wide artefact image with type overlaid on a dark scrim */
.phead--band{background:var(--ink-900);position:relative;min-height:clamp(420px,62vh,660px);display:grid}
.phead--band .phead__bg{
  position:absolute;inset:0;z-index:0;
}
.phead--band .phead__bg img{
  width:100%;height:100%;
  object-fit:cover;object-position:var(--focal,center);
  filter:grayscale(1) contrast(1.02) brightness(.62);
}
.phead--band::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,11,16,.96) 0%,rgba(8,11,16,.82) 42%,rgba(8,11,16,.46) 100%);
}
.phead--band .phead__in{
  align-self:end;width:100%;
  padding-block:clamp(3rem,7vw,5.5rem);
}

/* D — LEDGER: light parchment, ruled like an archival register */
.phead--ledger{
  background:var(--parch-200);
  padding-block:clamp(3.2rem,7vw,6rem) clamp(2.4rem,5vw,4rem);
  border-bottom:1px solid rgba(8,11,16,.16);
}
.phead--ledger .phead__h{
  font-size:clamp(2.4rem,7vw,6rem);
  line-height:.94;letter-spacing:-.028em;color:var(--ink-900);
}
.phead--ledger .phead__rules{
  margin-top:clamp(2rem,4vw,3rem);
  display:grid;gap:0;
  border-top:1px solid rgba(8,11,16,.2);
}
.phead__rule{
  display:grid;gap:.3rem 1.6rem;
  grid-template-columns:1fr;
  padding:.85rem 0;
  border-bottom:1px solid rgba(8,11,16,.12);
}
@media (min-width:640px){.phead__rule{grid-template-columns:minmax(140px,.28fr) 1fr}}
.phead__rk{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-600);opacity:.8;padding-top:.25rem;
}
.phead__rv{font-size:var(--t-small);color:var(--ink-800);line-height:1.6}

/* ---------- FACT BAR — catalogue-card strip ---------- */
.factbar{
  display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  border-top:1px solid var(--line);
}
.factbar__i{
  padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1rem,2vw,1.6rem) clamp(1.2rem,2.4vw,1.8rem) 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:720px){
  .factbar__i{border-bottom:0;border-right:1px solid var(--line);padding-left:clamp(1rem,2vw,1.6rem)}
  .factbar__i:first-child{padding-left:0}
  .factbar__i:last-child{border-right:0}
}
.factbar__k{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chapter);
  display:block;margin-bottom:.7rem;
}
.factbar__v{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,2vw,1.55rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--fg);
}
.factbar__n{
  display:block;margin-top:.5rem;
  font-size:.82rem;line-height:1.55;color:var(--fg-mute);
}

/* ---------- BIG STATEMENT ---------- */
.pullbig{
  font-family:var(--f-display);
  font-size:clamp(1.6rem,4.4vw,3.5rem);
  line-height:1.16;letter-spacing:-.022em;
  max-width:22ch;
}
.pullbig--wide{max-width:30ch}
.pullbig em{font-style:normal;color:var(--chapter)}

/* ---------- MEGA NUMERAL ---------- */
.bigyear{
  font-family:var(--f-display);
  font-size:clamp(5rem,22vw,18rem);
  line-height:.8;font-weight:400;
  letter-spacing:-.045em;
  font-variant-numeric:lining-nums;
  display:block;
}
.bigyear--outline{
  color:transparent;
  -webkit-text-stroke:1px var(--chapter);
  text-stroke:1px var(--chapter);
  opacity:.85;
}

/* ---------- EDITORIAL COLUMNS ---------- */
.cols2{
  display:grid;gap:clamp(1.6rem,3.4vw,3.2rem);
  grid-template-columns:1fr;
}
@media (min-width:820px){.cols2{grid-template-columns:1fr 1fr}}
.cols2 p{max-width:56ch}

.split{display:grid;gap:clamp(1.8rem,4vw,4.5rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .split{grid-template-columns:var(--split,1fr 1fr)}
  .split--mid{align-items:center}
}
.split--rev > :first-child{order:2}
@media (max-width:899px){.split--rev > :first-child{order:0}}

/* Sticky side column for long-form pages */
@media (min-width:1000px){
  .sticky-side{position:sticky;top:calc(var(--nav-h) + 40px)}
}

/* ---------- BLEED PLATES ---------- */
.bleed-r{margin-right:calc(var(--gut) * -1)}
@media (min-width:1600px){.bleed-r{margin-right:0}}
.plate--tall{--ar:3/4}
.plate--sq{--ar:1/1}
.plate--wide{--ar:16/9}
.plate--land{--ar:3/2}

/* ---------- HISTORICAL MARKERS (interactive strip) ---------- */
.markers{
  display:grid;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:700px){.markers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.markers{grid-template-columns:repeat(4,1fr)}}
.marker{
  background:var(--bg);
  padding:clamp(1.4rem,2.6vw,2.1rem);
  display:flex;flex-direction:column;gap:.85rem;
  text-align:left;width:100%;
  transition:background-color .45s var(--ease);
  position:relative;
  min-height:100%;
}
.marker::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--chapter);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.marker:hover,.marker:focus-visible,.marker.is-on{background:var(--surface)}
.marker:hover::before,.marker:focus-visible::before,.marker.is-on::before{transform:scaleX(1)}
.marker__y{
  font-family:var(--f-display);
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  line-height:1;color:var(--chapter);letter-spacing:-.02em;
}
.marker__t{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg);line-height:1.5;
}
/* The description is always present — a marker that reads as an empty card
   until hovered is worse for comprehension, touch and search than one that
   simply states its content. Interaction adds emphasis, not the text itself. */
.marker__d{
  font-size:.9rem;line-height:1.6;color:var(--fg-mute);
  transition:color .4s var(--ease);
}
.marker:hover .marker__d,.marker:focus-visible .marker__d,.marker.is-on .marker__d{
  color:var(--fg-soft);
}
.marker__y{transition:letter-spacing .5s var(--ease-out)}
.marker:hover .marker__y,.marker:focus-visible .marker__y,.marker.is-on .marker__y{
  letter-spacing:.01em;
}

/* ---------- CONCEPT / NETWORK GRID ---------- */
.netgrid{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:1fr;
}
@media (min-width:640px){.netgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.netgrid{grid-template-columns:repeat(3,1fr)}}
.netcell{
  background:var(--bg);
  padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:.9rem;
  position:relative;
  transition:background-color .4s var(--ease);
}
.netcell:hover{background:var(--surface)}
.netcell__n{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--chapter);
}
.netcell h3{font-size:clamp(1.08rem,1.55vw,1.32rem);letter-spacing:-.005em}
.netcell p{font-size:.94rem;line-height:1.65;color:var(--fg-mute);max-width:44ch}

/* ---------- NOTICE / SOURCE QUALIFICATION ---------- */
.notice{
  border-left:2px solid var(--chapter);
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.1rem,2.4vw,1.9rem);
  background:rgba(176,114,46,.07);
  max-width:74ch;
}
.notice__k{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chapter);
  display:block;margin-bottom:.6rem;
}
.notice p{font-size:.94rem;line-height:1.68;color:var(--fg-soft)}
.notice p + p{margin-top:.7rem}
.on-dark .notice{background:rgba(176,114,46,.12)}

/* ---------- PULL QUOTE (attributed, sourced) ---------- */
.quote{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:clamp(1.8rem,4vw,3rem);
  max-width:60ch;
}
.quote blockquote{
  font-family:var(--f-display);
  font-size:clamp(1.25rem,2.6vw,2rem);
  line-height:1.28;letter-spacing:-.015em;
  color:var(--fg);
}
.quote figcaption{
  margin-top:1.2rem;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--chapter);line-height:1.7;
}
.quote figcaption span{display:block;color:var(--fg-mute);letter-spacing:.08em;text-transform:none;margin-top:.4rem}

/* ---------- KEY/VALUE LEDGER LIST ---------- */
.ledger{border-top:1px solid var(--line)}
.ledger__row{
  display:grid;gap:.35rem 1.8rem;grid-template-columns:1fr;
  padding:clamp(.95rem,2vw,1.35rem) 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:680px){.ledger__row{grid-template-columns:minmax(150px,.26fr) 1fr}}
.ledger__k{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chapter);padding-top:.28rem;
}
.ledger__v{font-size:var(--t-small);line-height:1.68;color:var(--fg-soft)}
.ledger__v strong{color:var(--fg)}

/* ---------- STRIPE FIELD (abstract, tiger-inspired geometry) ---------- */
.stripes{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    74deg,
    rgba(176,114,46,.13) 0px,
    rgba(176,114,46,.13) 2px,
    transparent 2px,
    transparent 26px
  );
  -webkit-mask-image:radial-gradient(120% 85% at 78% 42%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 85% at 78% 42%,#000 0%,transparent 72%);
}
.stripes--dense{
  background-image:repeating-linear-gradient(
    74deg,
    rgba(176,114,46,.16) 0px,
    rgba(176,114,46,.16) 3px,
    transparent 3px,
    transparent 17px
  );
}

/* ---------- CHAPTER NAV (bottom of every page) ---------- */
.chapnav{
  background:var(--ink-900);color:var(--ivory-100);
  border-top:1px solid rgba(176,114,46,.28);
}
.chapnav__grid{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:rgba(243,239,229,.13);
}
@media (min-width:760px){.chapnav__grid{grid-template-columns:1fr 1fr}}
.chapnav__a{
  background:var(--ink-900);
  padding:clamp(1.9rem,4.5vw,3.4rem) clamp(1.3rem,3vw,2.6rem);
  display:flex;flex-direction:column;gap:.85rem;
  transition:background-color .45s var(--ease);
  min-height:100%;
}
.chapnav__a:hover,.chapnav__a:focus-visible{background:var(--ink-800)}
.chapnav__a--next{align-items:flex-end;text-align:right}
.chapnav__k{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper-lt);
  display:flex;align-items:center;gap:.6em;
}
.chapnav__t{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,3vw,2.3rem);
  line-height:1.1;letter-spacing:-.015em;color:var(--ivory-050);
  transition:transform .5s var(--ease-out);
}
.chapnav__a:hover .chapnav__t{transform:translateX(6px)}
.chapnav__a--next:hover .chapnav__t{transform:translateX(-6px)}
.chapnav__d{font-size:.88rem;color:var(--fog-400);max-width:40ch;line-height:1.6}

/* ---------- CTA BAND ---------- */
.cta{
  position:relative;overflow:hidden;
  background:var(--ink-900);color:var(--ivory-100);
  padding-block:clamp(4rem,10vw,8rem);
  text-align:center;
}
.cta__h{
  font-size:clamp(2rem,6.5vw,5rem);
  line-height:1;letter-spacing:-.03em;color:var(--ivory-050);
  max-width:16ch;margin-inline:auto;
}
.cta__p{
  margin-top:1.6rem;max-width:56ch;margin-inline:auto;
  color:var(--fog-300);font-size:var(--t-lede);line-height:1.5;
}
.cta__row{
  margin-top:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;
}

/* ---------- SECTION HEADER (shared) ---------- */
.shead{
  display:grid;gap:clamp(1rem,2.4vw,2rem);
  grid-template-columns:1fr;
  align-items:end;
  margin-bottom:clamp(2.2rem,5vw,4rem);
}
@media (min-width:900px){
  .shead{grid-template-columns:1fr auto;gap:clamp(2rem,5vw,5rem)}
}
.shead__h{max-width:20ch}
.shead__p{max-width:52ch;color:var(--fg-mute);font-size:var(--t-small);line-height:1.7}

/* ---------- RECORD vs RETELLING (source-criticism comparison) ---------- */
.vs{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);grid-template-columns:1fr;
}
@media (min-width:860px){.vs{grid-template-columns:1fr 1fr}}
.vs__col{
  background:var(--bg);
  padding:clamp(1.6rem,3.2vw,2.6rem);
  position:relative;
}
.on-dark .vs__col{background:var(--ink-850)}
.vs__col::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
}
.vs__col--a::before{background:var(--chapter)}
.vs__col--b::before{background:var(--fog-500);opacity:.6}
.vs__h{
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--chapter);line-height:1.5;
}
.vs__col--b .vs__h{color:var(--fg-mute)}
.vs__list{margin-top:1.3rem;display:grid;gap:.85rem;padding:0;list-style:none}
.vs__list li{
  position:relative;padding-left:1.7em;
  font-size:var(--t-small);line-height:1.7;color:var(--fg-soft);
}
.vs__list li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:9px;height:1px;background:var(--chapter);
}
.vs__col--b .vs__list li::before{background:var(--fg-mute);opacity:.7}
.vs__list li em{font-style:italic}