/* v3 · editorial. The site laid out like a magazine: two-page spreads, photos that run
   to the edge of the screen, headlines set on top of the pictures, figure numbers and
   captions, and a sideways strip of photographs. Same brand, same motion as v1. */

/* ---------- type, a size up, with a rule after each kicker ---------- */
h2 { font-size: clamp(48px, 7.4vw, 118px); }
.kicker { align-items: center; }
.kicker::after { content: ""; width: 72px; height: 1px; background: currentColor; opacity: .3; }

figcaption, .bleed-cap { font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
figcaption b, .bleed-cap b { font-weight: 400; opacity: .6; margin-right: 6px; }

/* ---------- the idea, as a spread ---------- */
.idea.spread { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding: 0; }
.spread-photo { position: relative; margin: 0; min-height: 100vh; overflow: hidden; }
.spread-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spread-photo figcaption { position: absolute; left: var(--pad); bottom: 26px; color: var(--paper); }
.spread-text { align-self: center; padding: 16vh clamp(28px, 6vw, 96px) 12vh; }
.spread .idea-text { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.22; max-width: 21em; }
.dropcap::first-letter { float: left; font: 300 4.6em/.78 var(--serif); margin: .08em .1em 0 -.02em; color: var(--rust); }
.spread .define { grid-template-columns: 1fr; gap: 18px; margin-top: 9vh; }

/* ---------- full-bleed photographs ---------- */
.bleed { position: relative; height: 94vh; min-height: 560px; overflow: hidden; color: var(--paper); background: var(--ink); }
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(28, 26, 21, .05) 35%, rgba(28, 26, 21, .62)); pointer-events: none; }
.bleed-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 10vh; z-index: 1; max-width: 1100px; }
.bleed-copy h2 { margin: 0; }
.bleed-copy h2 em, .bleed .kicker > span:first-child { color: var(--straw); }
.bleed-quote { margin: 0; font: 300 italic clamp(40px, 6.2vw, 100px)/1.04 var(--serif); letter-spacing: -.025em; max-width: 14em; }
.bleed-cap { position: absolute; right: var(--pad); bottom: 26px; z-index: 1; margin: 0; opacity: .8; }

/* ---------- the tree, edge to edge on the left ---------- */
.tree { padding: 0; }
.tree-grid { max-width: none; padding: 0; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.tree-photo { max-width: none; max-height: none; width: 100%; height: 100vh; aspect-ratio: auto; border-radius: 0; justify-self: stretch; }
.tree-photo img { height: 100%; object-position: center 28%; }
.tree-copy { align-self: center; padding: 14vh clamp(28px, 6vw, 96px); }
.tree-toggle { left: var(--pad); bottom: 26px; }

/* ---------- gallery: a strip you scroll sideways ---------- */
.gallery { padding-bottom: 12vh; }
.strip-wrap { position: relative; margin-top: 7vh; }
.strip { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 22px; scroll-padding: 0 var(--pad); scrollbar-width: thin; scrollbar-color: rgba(28, 26, 21, .3) transparent; outline: none; }
.strip figure { flex: none; margin: 0; scroll-snap-align: start; }
.strip img { height: min(72vh, 680px); width: auto; display: block; }
.strip figcaption { margin-top: 12px; opacity: .75; }
.strip-nav { display: flex; gap: 10px; padding: 18px var(--pad) 0; }
.strip-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(28, 26, 21, .35); font: 400 16px/1 var(--sans); transition: background .4s, color .4s, border-color .4s; }
.strip-nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- small screens: spreads stack ---------- */
@media (max-width: 900px) {
  .idea.spread, .tree-grid { grid-template-columns: 1fr; }
  .spread-photo { min-height: 62vh; }
  .spread-text { padding: 9vh var(--pad); }
  .tree-photo { height: 78vh; }
  .tree-copy { padding: 9vh var(--pad); }
  .bleed { height: 80vh; }
  .strip img { height: 52vh; }
}

/* ---------- every section carries its own colours, so two can share the screen ---------- */
.idea, .tree, .materials, .gallery, .letter { background: var(--paper); color: var(--ink); --line: rgba(28, 26, 21, .16); }
.seasons { background: var(--straw); color: var(--ink); --line: rgba(28, 26, 21, .16); }
.collection { background: var(--ink); color: var(--paper); --line: rgba(243, 237, 227, .16); }

body :is(.idea, .tree, .materials, .seasons, .gallery, .letter) :is(h2 em, .idea-text em) { color: var(--rust); }
body :is(.idea, .tree, .materials, .seasons, .gallery, .letter) .kicker > span:first-child { color: var(--reed); }
body :is(.idea, .tree, .materials, .seasons, .gallery, .letter) .btn { background: var(--rust); color: #fff; }
body :is(.idea, .tree, .materials, .seasons, .gallery, .letter) .btn::before { background: var(--ink); }
body :is(.collection, .bleed) :is(h2 em) { color: var(--straw); }
body :is(.collection, .bleed) .kicker > span:first-child { color: var(--straw); }
body .collection .btn { background: var(--straw); color: var(--ink); }
body .collection .btn::before { background: var(--paper); }