/* ============================================================
   namu.style — magazine-spread mid-century style guide
   Palette: warm wood tones — Teak / Walnut / Sage / Sienna /
   Cream / Olive / Charcoal. Type: Space Grotesk.
   ============================================================ */

:root {
  --teak:    #E8D8C0;
  --walnut:  #3A2A18;
  --sage:    #7A9868;
  --sienna:  #C87848;
  --cream:   #FAF5E8;
  --olive:   #6A7A48;
  --charcoal:#2A2A28;

  --pad-page: 48px;
  --gutter-rule: rgba(58, 42, 24, 0.55);

  --t-fast: 200ms cubic-bezier(.4,.0,.2,1);
  --t-mid:  400ms cubic-bezier(.4,.0,.2,1);
  --t-long: 1200ms cubic-bezier(.4,.0,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--walnut);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  counter-reset: page;
  /* CSS counter; data-page attrs override per spread */
}

em { font-style: italic; }

/* ============================================================
   SPREAD: two-page composition with visible gutter
   ============================================================ */

.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--cream);
  /* viewport-entry hook (set via JS) */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.spread.is-in {
  opacity: 1;
  transform: none;
}

/* center gutter rule */
.spread::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 0;
  background: var(--gutter-rule);
  transform: translateX(-0.5px);
  transition: height 600ms ease;
  z-index: 4;
}

.spread.is-in::before { height: 100%; }

/* page numbers: outer-bottom corners */
.page {
  position: relative;
  padding: var(--pad-page);
  min-height: 100vh;
  overflow: hidden;
}

.page--left  { border-right: 0; }
.page--right { border-left: 0; }

.page--left::after,
.page--right::after {
  position: absolute;
  bottom: 22px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--walnut);
  opacity: 0;
  transition: opacity var(--t-mid) 600ms;
}

.spread.is-in .page--left::after,
.spread.is-in .page--right::after { opacity: 1; }

.page--left::after  { content: attr(data-pn); left: 22px; }
.page--right::after { content: attr(data-pn); right: 22px; }

/* slight stagger between left/right page entry */
.spread .page--left  { transition: transform 700ms ease, opacity 700ms ease; opacity: 0; transform: translateY(8px); }
.spread .page--right { transition: transform 700ms ease 100ms, opacity 700ms ease 100ms; opacity: 0; transform: translateY(8px); }
.spread.is-in .page--left,
.spread.is-in .page--right { opacity: 1; transform: none; }

/* ============================================================
   COVER SPREAD
   ============================================================ */

.spread--cover .page--left  { background: var(--teak); }
.spread--cover .page--right { background: var(--cream); }

.page-meta {
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18vh;
  opacity: 0;
  transition: opacity var(--t-mid) 800ms;
}
.spread.is-in .page-meta { opacity: 1; }

.cover-title {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.92;
  font-size: clamp(56px, 9vw, 144px);
  color: var(--walnut);
}
.cover-title__row { display: block; }
.cover-title__row--accent { color: var(--sienna); font-style: italic; font-weight: 500; letter-spacing: -0.025em; }

.cover-tagline {
  margin-top: 28px;
  max-width: 38ch;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms 400ms, transform 600ms 400ms;
}
.spread.is-in .cover-tagline { opacity: 1; transform: none; }

.cover-coords {
  position: absolute;
  bottom: var(--pad-page);
  left: var(--pad-page);
  right: var(--pad-page);
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* ============================================================
   ILLUSTRATIONS (SVG line art)
   ============================================================ */

.page--illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cream);
}

.illo {
  width: 100%;
  max-width: 540px;
  height: auto;
  display: block;
}

.ink {
  stroke: var(--walnut);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.ink--inv {
  stroke: var(--cream);
}

/* Self-drawing animation */
.ink--draw {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset var(--t-long) ease;
}
.spread.is-in .ink--draw { stroke-dashoffset: 0; }

/* hover detail (hidden until illo hovered) */
.ink--hover {
  opacity: 0;
  stroke: var(--walnut);
  stroke-width: 1.2;
  fill: none;
  transition: opacity 600ms ease;
}
.illo:hover .ink--hover { opacity: 0.3; }

.illo-caption {
  margin-top: 14px;
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  max-width: 38ch;
}

/* ============================================================
   TYPOGRAPHIC PAGES
   ============================================================ */

.kicker {
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sienna);
  margin: 0 0 10vh 0;
  position: relative;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--sienna);
  vertical-align: middle;
  margin-right: 12px;
}

.head {
  margin: 0;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--walnut);
}

.lede {
  margin-top: 28px;
  max-width: 36ch;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.5;
}

.body {
  max-width: 42ch;
  margin-top: 18px;
}

.pullquote {
  margin-top: 36px;
  padding-left: 18px;
  border-left: 2px solid var(--sienna);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 22px);
  max-width: 38ch;
  color: var(--walnut);
}

.caption {
  margin-top: 24px;
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* ============================================================
   SWATCH GRID
   ============================================================ */

.page--swatch {
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 460px;
  height: 70vh;
}

.swatch {
  position: relative;
  background: var(--c);
  border-radius: 2px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--walnut);
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: filter var(--t-fast), transform var(--t-fast);
  overflow: hidden;
}
.swatch--wide { grid-column: 1 / -1; color: var(--cream); }
.swatch[style*="#FAF5E8"] { outline: 1px solid var(--walnut); outline-offset: -1px; }
.swatch[style*="#E8D8C0"],
.swatch[style*="#7A9868"],
.swatch[style*="#C87848"],
.swatch[style*="#6A7A48"] { color: var(--walnut); }
.swatch[style*="#3A2A18"],
.swatch[style*="#2A2A28"] { color: var(--cream); }
.swatch__name { display: block; }
.swatch__hex  { display: block; opacity: 0.65; }
.swatch:hover { filter: brightness(0.95); transform: translateY(-1px); }

/* ============================================================
   COLOR-BLOCK PAGE
   ============================================================ */

.page--colorblock {
  background: var(--block, var(--sage));
  display: flex;
  align-items: flex-end;
  transition: filter var(--t-mid);
}
.page--colorblock:hover { filter: brightness(0.95); }

.block-mark {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--cream);
}
.block-mark__num {
  font-weight: 700;
  font-size: clamp(72px, 12vw, 180px);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.block-mark__label {
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ============================================================
   FOLD-OUT (progressive disclosure)
   ============================================================ */

.fold-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 14px 0 0 0;
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--walnut);
  border-top: 1px solid rgba(58,42,24,0.25);
  width: 100%;
  text-align: left;
}
.fold-toggle__rule {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--walnut);
  transition: width var(--t-mid);
}
.fold-toggle:hover .fold-toggle__rule { width: 56px; }
.fold-toggle__label { flex: 1; }
.fold-toggle__sign {
  font-size: 18px;
  font-weight: 500;
  transition: transform var(--t-mid);
}
.fold-toggle[aria-expanded="true"] .fold-toggle__sign { transform: rotate(45deg); }

.foldout {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}
.foldout[hidden] { display: block; max-height: 0; }
.foldout.is-open { max-height: 800px; }

.foldout > .body:first-child { margin-top: 18px; }

.specimen { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.specimen__row { display: block; }

/* ============================================================
   BIG TYPE PAGE
   ============================================================ */

.page--bigtype {
  background: var(--teak);
  display: flex;
  align-items: center;
}
.bigtype {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bigtype__tag {
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sienna);
  margin-bottom: 18px;
}
.bigtype__line {
  font-weight: 700;
  font-size: clamp(80px, 14vw, 220px);
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--walnut);
}
.bigtype__line--alt {
  font-style: italic;
  font-weight: 500;
  color: var(--sienna);
}
.bigtype__meta {
  margin-top: 28px;
  font-weight: 300;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: 36ch;
}

/* ============================================================
   DARK COLOPHON SPREAD
   ============================================================ */

.spread--dark { background: var(--charcoal); }
.spread--dark .page--inverted { background: var(--charcoal); }
.spread--dark .page--mark     { background: var(--charcoal); display: flex; align-items: center; justify-content: center; }
.spread--dark::before { background: rgba(250, 245, 232, 0.35); }
.spread--dark .page--left::after,
.spread--dark .page--right::after { color: var(--cream); }

.head--inv  { color: var(--cream); }
.body--inv  { color: var(--cream); opacity: 0.85; max-width: 42ch; margin-top: 18px; }
.kicker--inv { color: var(--sienna); }
.caption--inv { color: var(--cream); opacity: 0.6; margin-top: 28px; }

.mark { width: 100%; max-width: 360px; }
.mark-word {
  fill: var(--cream);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   PATTERN STRIPS — leaf-organic textile samples
   ============================================================ */

.strip {
  width: 100%;
  height: 72px;
  position: relative;
  transform: scaleX(0.95);
  transform-origin: 50% 50%;
  transition: transform 600ms ease, opacity 300ms ease;
  opacity: 0.92;
  border-top: 1px solid rgba(58, 42, 24, 0.18);
  border-bottom: 1px solid rgba(58, 42, 24, 0.18);
}
.strip.is-in { transform: scaleX(1); }
.strip:hover { opacity: 1; }

/* Strip 1 — alternating leaf (linear-gradient stripes shaped like leaves) */
.strip--leaf-alt {
  background-color: var(--teak);
  background-image:
    radial-gradient(ellipse 18px 8px at 18px 36px, var(--sage) 60%, transparent 62%),
    radial-gradient(ellipse 18px 8px at 54px 36px, var(--olive) 60%, transparent 62%);
  background-size: 72px 72px, 72px 72px;
  background-position: 0 0, 36px 0;
  background-repeat: repeat-x, repeat-x;
}

/* Strip 2 — radial leaf arrangement */
.strip--leaf-radial {
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 24px 36px, var(--sage) 0 6px, transparent 7px),
    radial-gradient(circle at 60px 22px, var(--olive) 0 4px, transparent 5px),
    radial-gradient(circle at 60px 50px, var(--olive) 0 4px, transparent 5px),
    radial-gradient(circle at 96px 36px, var(--sage) 0 6px, transparent 7px);
  background-size: 120px 72px;
  background-repeat: repeat-x;
  transition: transform 600ms ease, opacity 300ms ease, background-size var(--t-mid);
}
.strip--leaf-radial:hover { background-size: 96px 72px; }

/* Strip 3 — flowing vines */
.strip--leaf-vine {
  background-color: var(--teak);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      var(--sage) 14px 16px,
      transparent 16px 30px,
      var(--olive) 30px 32px,
      transparent 32px 46px
    );
  transition: transform 600ms ease, opacity 300ms ease, background-size var(--t-mid);
}
.strip--leaf-vine:hover { background-color: #ECDDC6; }

/* ============================================================
   PRELOAD: cover-spread should animate gutter+text+illo on load
   ============================================================ */

.spread--cover { opacity: 1; transform: none; } /* cover visible from start */
.spread--cover .page--left,
.spread--cover .page--right { opacity: 1; transform: none; }
.spread--cover.is-loaded::before { height: 100%; }
.spread--cover::before { height: 0; }
.spread--cover.is-loaded .ink--draw { stroke-dashoffset: 0; }
.spread--cover .ink--draw { stroke-dashoffset: 2000; }
.spread--cover.is-loaded .cover-tagline,
.spread--cover.is-loaded .page-meta { opacity: 1; transform: none; }
.spread--cover .cover-tagline { opacity: 0; transform: translateY(8px); }
.spread--cover .page-meta { opacity: 0; }
.spread--cover.is-loaded .page--left::after,
.spread--cover.is-loaded .page--right::after { opacity: 1; }

/* The first pattern strip pulses once when cover finishes loading */
.strip--leaf-alt.first-strip-pulse { animation: stripPulse 300ms ease 0s 1; }
@keyframes stripPulse {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ============================================================
   RESPONSIVE — stack pages below 760px
   ============================================================ */

@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; min-height: auto; }
  .spread::before { display: none; }
  .page { min-height: 70vh; padding: 32px; }
  .page--left::after  { left: 18px; bottom: 16px; }
  .page--right::after { right: 18px; bottom: 16px; }
  .swatch-grid { height: 60vh; max-width: 100%; }
  .cover-coords { position: static; margin-top: 32px; }
  .bigtype__line { font-size: clamp(56px, 18vw, 120px); }
}