/* ============================================================
   Shahab Sheikh Nuri Memorial :: design tokens and base
   Palette: Paper / Ink / Evergreen / Spring / Oxide / Copper
   ============================================================ */
:root{
  --paper:#F6F2E9;
  --paper-2:#EFE9DB;
  --ink:#191E1A;
  --evergreen:#1B4D2E;
  --evergreen-deep:#143B22;
  --spring:#2F7D46;
  --oxide:#9A4A22;
  --copper:#C5642E;
  --copper-glow:#E08A52;
  --stone:#8C8271;

  --font-display:'Oswald','Reem Kufi',sans-serif;
  --font-display-ku:'Reem Kufi','Oswald',sans-serif;
  --font-body:'Source Serif 4',Georgia,serif;
  --font-body-ku:'Vazirmatn','Source Serif 4',sans-serif;
  --font-quote-ku:'Amiri',serif;

  --shadow-hard:6px 6px 0 var(--ink);
  --shadow-hard-sm:4px 4px 0 var(--ink);
  --rule:2px solid var(--ink);
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
}
html[lang="ckb"] body{font-family:var(--font-body-ku);line-height:1.9}

img{max-width:100%;display:block}
a{color:var(--oxide)}
a:hover{color:var(--copper)}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px}

/* language visibility */
html[lang="en"] .ku{display:none !important}
/* hide EN only when a Kurdish sibling exists; untranslated text stays visible */
html[lang="ckb"] .en:has(+ .ku){display:none !important}
html[lang="ckb"] .ku-note{display:block}
.ku-note{display:none;background:var(--paper-2);border:var(--rule);padding:.6rem 1rem;font-size:.85rem;margin:0 0 1.5rem}

/* ============ display type ============ */
.display{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1.05;
}
html[lang="ckb"] .display{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0;line-height:1.35}
.eyebrow{
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.8rem;
  color:var(--oxide);
  display:flex;align-items:center;gap:.75rem;
}
html[lang="ckb"] .eyebrow{font-family:var(--font-display-ku);text-transform:none;letter-spacing:.05em}
.eyebrow::before{content:"";width:2rem;height:2px;background:var(--oxide);flex:none}

/* ============ scroll thread (signature) ============ */
.thread{position:fixed;inset-inline-start:0;top:0;bottom:0;width:4px;background:color-mix(in srgb,var(--evergreen) 18%,transparent);z-index:60;pointer-events:none}
.thread-fill{position:absolute;top:0;left:0;right:0;height:0%;background:var(--oxide)}
.thread-fill::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:var(--copper)}
@media (prefers-reduced-motion:reduce){.thread{display:none}}

/* ============ header / nav ============ */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:var(--rule);
}
.site-head .bar{
  max-width:var(--maxw);margin:0 auto;padding:.65rem 1.25rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.mark svg{width:34px;height:34px;flex:none}
.mark .t{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;line-height:1.1}
html[lang="ckb"] .mark .t{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0}
.nav{display:flex;gap:.15rem;flex-wrap:nowrap;overflow-x:auto;margin-inline-start:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;font-size:.75rem;text-decoration:none;color:var(--ink);
  padding:.45rem .6rem;white-space:nowrap;border:2px solid transparent;
}
html[lang="ckb"] .nav a{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0;font-size:.85rem}
.nav a:hover{color:var(--oxide)}
.nav a[aria-current="page"]{border:var(--rule);background:var(--paper-2)}
.lang-btn{
  font-family:var(--font-display);font-weight:600;font-size:.75rem;letter-spacing:.08em;
  border:var(--rule);background:var(--evergreen);color:var(--paper);
  padding:.45rem .7rem;cursor:pointer;flex:none;
}
.lang-btn:hover{background:var(--spring)}

/* ============ hero ============ */
.hero{
  position:relative;overflow:hidden;
  background:var(--evergreen-deep);
  color:var(--paper);
  border-bottom:var(--rule);
}
.hero .rays{
  position:absolute;inset:-20% -10%;
  background:repeating-conic-gradient(from -90deg at 50% 108%,
    var(--evergreen) 0deg 5deg, var(--evergreen-deep) 5deg 10deg);
  opacity:.85;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 108%,#000 40%,transparent 78%);
          mask-image:radial-gradient(120% 110% at 50% 108%,#000 40%,transparent 78%);
}
.hero .inner{
  position:relative;max-width:var(--maxw);margin:0 auto;
  padding:3.5rem 1.25rem 4rem;text-align:center;
}
.hero .emblem{width:min(46vw,220px);margin:0 auto 1.75rem;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.hero .motto-ku{
  font-family:var(--font-quote-ku);
  font-size:clamp(2.2rem,7vw,4.2rem);
  color:var(--paper);line-height:1.5;
}
.hero .motto-ku .qm{color:var(--copper-glow)}
.hero .motto-en{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;font-size:clamp(.9rem,2.6vw,1.3rem);
  color:var(--copper-glow);margin-top:.75rem;
}
html[lang="ckb"] .hero .motto-en{font-family:var(--font-display-ku);text-transform:none;letter-spacing:.02em}
.hero .sub{
  max-width:44rem;margin:1.5rem auto 0;font-size:1.05rem;line-height:1.75;
  color:color-mix(in srgb,var(--paper) 88%,var(--evergreen));
}
.hero .years{
  font-family:var(--font-display);font-weight:500;letter-spacing:.3em;
  font-size:.8rem;color:var(--stone);margin-top:1.5rem;text-transform:uppercase;
}
.hero .cta-row{margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ============ buttons ============ */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.85rem;
  padding:.85rem 1.5rem;border:var(--rule);
  background:var(--oxide);color:var(--paper);
  box-shadow:var(--shadow-hard-sm);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
html[lang="ckb"] .btn{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0;font-size:1rem}
.btn:hover{background:var(--copper);color:var(--paper);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn.on-paper{color:var(--paper)}

/* ============ layout & sections ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
section.band{padding:3.5rem 0;position:relative}
.band.tint{background:var(--paper-2);border-top:var(--rule);border-bottom:var(--rule)}
.band.ink{background:var(--ink);color:var(--paper);border-top:var(--rule);border-bottom:var(--rule)}
.band.green{background:var(--evergreen-deep);color:var(--paper);border-top:var(--rule);border-bottom:var(--rule)}
.band h2{margin:.35rem 0 1.25rem;font-size:clamp(1.6rem,4.5vw,2.4rem)}
.band p{max-width:46rem;margin-bottom:1rem}
.lede{font-size:1.2rem;line-height:1.65}

/* giant outline year ornament */
.year-ghost{
  position:absolute;inset-inline-end:0;top:.5rem;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:600;line-height:1;
  font-size:clamp(5rem,18vw,11rem);
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--evergreen) 30%,transparent);
  user-select:none;
}
.band.ink .year-ghost,.band.green .year-ghost{-webkit-text-stroke:2px color-mix(in srgb,var(--paper) 22%,transparent)}
.band .wrap{position:relative;z-index:1}

/* chapter poster cards */
.grid{display:grid;gap:1.5rem}
@media(min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}}
.poster-card{
  border:var(--rule);background:var(--paper);
  box-shadow:var(--shadow-hard);text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;min-height:220px;position:relative;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
}
.poster-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.poster-card .num{
  font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.2em;
  background:var(--ink);color:var(--paper);align-self:flex-start;padding:.35rem .7rem;
}
.poster-card .body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.poster-card h3{font-size:1.45rem;color:var(--oxide)}
.poster-card .range{font-family:var(--font-display);font-weight:500;letter-spacing:.15em;font-size:.75rem;color:var(--stone);text-transform:uppercase}
.poster-card p{font-size:.95rem;color:color-mix(in srgb,var(--ink) 82%,var(--stone))}
.poster-card::after{
  content:"";position:absolute;inset-inline-end:-30px;bottom:-30px;width:90px;height:90px;
  background:var(--evergreen);transform:rotate(45deg);opacity:.12;
}

/* ============ quote blocks ============ */
.quote-card{
  border:var(--rule);background:var(--paper);box-shadow:var(--shadow-hard-sm);
  padding:1.5rem 1.5rem 1.25rem;position:relative;max-width:46rem;
}
.quote-card.inverse{background:var(--evergreen-deep);color:var(--paper)}
.quote-card .q{font-style:italic;font-size:1.1rem;line-height:1.7}
.quote-card .q::before{content:"« ";color:var(--copper);font-style:normal;font-weight:700}
.quote-card .q::after{content:" »";color:var(--copper);font-style:normal;font-weight:700}
.quote-card .who{
  margin-top:1rem;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;font-size:.8rem;color:var(--oxide);
}
.quote-card.inverse .who{color:var(--copper-glow)}
.quote-card .role{font-family:var(--font-display);font-weight:400;letter-spacing:.08em;font-size:.72rem;color:var(--stone);text-transform:uppercase;margin-top:.15rem}
html[lang="ckb"] .quote-card .who,html[lang="ckb"] .quote-card .role{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0}

/* voices grid */
.voices{display:grid;gap:1.5rem}
@media(min-width:760px){.voices{grid-template-columns:1fr 1fr}}
.voices .quote-card{max-width:none;margin:0}

/* ============ story blocks ============ */
.story{display:grid;gap:1.75rem;margin:2rem 0}
@media(min-width:820px){.story{grid-template-columns:180px 1fr}}
.story .marker{
  font-family:var(--font-display);font-weight:600;color:var(--oxide);
  font-size:2rem;line-height:1;border-top:4px solid var(--oxide);padding-top:.6rem;
}
.story .marker small{display:block;font-size:.75rem;letter-spacing:.18em;color:var(--stone);margin-top:.4rem;text-transform:uppercase;font-weight:500}
html[lang="ckb"] .story .marker small{letter-spacing:0}

/* photo placeholder w/ duotone-ready frame */
.photo{
  border:var(--rule);box-shadow:var(--shadow-hard-sm);background:var(--evergreen-deep);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  color:color-mix(in srgb,var(--paper) 65%,var(--evergreen));text-align:center;
  padding:1rem;position:relative;overflow:hidden;margin:1.5rem 0;
}
.photo svg{position:absolute;inset:0;width:100%;height:100%;opacity:.14}
.photo .cap{position:relative;font-family:var(--font-display);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;max-width:22rem}
html[lang="ckb"] .photo .cap{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);mix-blend-mode:luminosity;transition:filter .3s ease,mix-blend-mode .3s ease}
.photo:hover img,.photo:focus-within img{filter:none;mix-blend-mode:normal}
figcaption{font-size:.85rem;color:var(--stone);margin-top:.5rem}

/* ============ timeline ============ */
.tl{position:relative;margin:2.5rem 0;padding-inline-start:2rem;border-inline-start:3px solid var(--evergreen)}
.tl-item{position:relative;margin-bottom:1.25rem;border:var(--rule);background:var(--paper);box-shadow:var(--shadow-hard-sm)}
.tl-item::before{
  content:"";position:absolute;inset-inline-start:calc(-2rem - 3px - 7px);top:1.4rem;
  width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--oxide);
}
.tl-item.martyr::before{background:var(--paper);border-color:var(--oxide);box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 45%,transparent)}
.tl-item.rev::before{background:var(--oxide)}
.tl-item summary{
  list-style:none;cursor:pointer;display:flex;gap:1rem;align-items:baseline;
  padding:1.1rem 1.25rem;flex-wrap:wrap;
}
.tl-item summary::-webkit-details-marker{display:none}
.tl-item summary:hover{background:var(--paper-2)}
.tl-item .y{
  font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--oxide);
  min-width:4.2rem;line-height:1;
}
.tl-item .t{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;flex:1;min-width:12rem}
html[lang="ckb"] .tl-item .t{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0}
.tl-item .chev{font-family:var(--font-display);color:var(--stone);transition:transform .2s ease}
.tl-item[open] .chev{transform:rotate(90deg)}
.tl-item .panel{padding:0 1.25rem 1.4rem;border-top:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
.tl-item .panel p{margin-top:1rem;max-width:44rem}
.tl-item .panel .quote-card{margin-top:1.25rem;box-shadow:none}

/* ============ diagrams ============ */
.diagram{border:var(--rule);background:var(--paper);box-shadow:var(--shadow-hard-sm);padding:1.25rem;margin:1.75rem 0;max-width:46rem}
.diagram svg{width:100%;height:auto;display:block}
.diagram .cap{font-size:.85rem;color:var(--stone);margin-top:.75rem}

/* context strip (three revolutions) */
.strip{display:grid;gap:1rem;margin:2rem 0}
@media(min-width:720px){.strip{grid-template-columns:repeat(3,1fr)}}
.strip .cell{border:var(--rule);background:var(--paper);padding:1rem 1.1rem;box-shadow:var(--shadow-hard-sm)}
.strip .cell .y{font-family:var(--font-display);font-weight:600;color:var(--oxide);font-size:1.3rem}
.strip .cell .n{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;margin-top:.2rem}
html[lang="ckb"] .strip .cell .n{font-family:var(--font-display-ku);text-transform:none;letter-spacing:0}
.strip .cell p{font-size:.85rem;color:var(--stone);margin:.4rem 0 0}
.strip .cell.hot{background:var(--oxide);color:var(--paper)}
.strip .cell.hot .y,.strip .cell.hot p{color:var(--paper)}

/* prev/next chapter footer nav */
.chapnav{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;margin:3rem 0 0}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ footer ============ */
.site-foot{background:var(--ink);color:var(--paper);border-top:var(--rule);margin-top:4rem}
.site-foot .inner{max-width:var(--maxw);margin:0 auto;padding:2.5rem 1.25rem;display:grid;gap:1.5rem}
@media(min-width:720px){.site-foot .inner{grid-template-columns:auto 1fr auto;align-items:center}}
.site-foot .emblem{width:72px}
.site-foot .motto{font-family:var(--font-quote-ku);font-size:1.4rem}
.site-foot .fine{font-size:.8rem;color:var(--stone);line-height:1.6}
.site-foot a{color:var(--copper-glow)}