/* ═══════════════════════════════════════════════════════════════
   AMBER BLAKE — Brand page
   Builds on css/site.css (palettes + type presets)
   ═══════════════════════════════════════════════════════════════ */

.brand-body{
  background:var(--bg); color:var(--ink);
  min-height:100vh;
}

/* defs svg is hidden */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── shared section rhythm ── */
.b-section{padding:clamp(5rem,11vh,9rem) 0; border-top:.5px solid var(--line-soft); position:relative}
.b-section:first-of-type{border-top:none}
.b-head{max-width:46ch; margin-bottom:clamp(2.5rem,5vw,4rem)}
.b-head h2{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.05;
  letter-spacing:var(--display-tight); margin:1.1rem 0 1rem;
}
.b-head h2 em{color:var(--gold)}
.b-head p{color:var(--ink-soft); font-weight:300; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.7; max-width:42ch}
.b-index{
  font-family:var(--f-label); font-size:.7rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-faint);
}

/* ── HERO ── */
.b-hero{
  min-height:92vh; display:flex; flex-direction:column; justify-content:center;
  padding:9rem clamp(1.2rem,4vw,3.2rem) 4rem; position:relative; text-align:center;
}
.b-hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--line-soft);
}
.b-hero .b-eyebrow{
  font-family:var(--f-label); font-size:.8rem; letter-spacing:.5em;
  text-transform:uppercase; color:var(--gold); margin-bottom:2.4rem;
}
.b-hero .hero-mark{
  width:min(340px,52vw); height:auto; margin:0 auto 1.6rem;
  filter:drop-shadow(0 18px 50px color-mix(in srgb,var(--gold) 22%, transparent));
}
.b-hero .hero-word{
  font-family:var(--f-display); font-style:italic; font-weight:var(--display-weight);
  font-size:clamp(2.4rem,7vw,5rem); letter-spacing:.02em; line-height:1;
}
.b-hero .hero-word .amp{color:var(--gold); font-style:normal}
.b-hero .hero-tag{
  font-family:var(--f-label); font-size:clamp(.74rem,1.4vw,.92rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:1.6rem;
}

/* ── THE MARK ── */
.mark-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.mark-stage{
  position:relative; aspect-ratio:4/3; border-radius:3px;
  background:var(--surface); box-shadow:inset 0 0 0 .5px var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mark-stage .big-mark{width:58%; height:auto}
.mark-stage .cs-ring{position:absolute; inset:14px; border:.5px dashed var(--line); pointer-events:none}
@media (max-width:820px){ .mark-grid{grid-template-columns:1fr} }

/* variant tiles */
.variants{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:clamp(2.5rem,5vw,3.5rem)}
.variant{
  border:.5px solid var(--line-soft); border-radius:3px; overflow:hidden;
  display:flex; flex-direction:column;
}
.variant .v-canvas{
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.variant .v-canvas.on-light{background:var(--surface)}
.variant .v-canvas.on-deep{background:var(--bg-deep)}
.variant .v-canvas.on-ink{background:var(--ink)}
.variant .v-mark{height:clamp(46px,7vw,74px); width:auto}
.variant .v-word{
  font-family:var(--f-display); font-style:italic; font-weight:var(--display-weight);
  font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.03em;
}
.variant .v-word .amp{color:var(--gold); font-style:normal}
.variant figcaption{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.9rem 1.1rem; border-top:.5px solid var(--line-soft);
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.variant figcaption span{color:var(--ink-faint); letter-spacing:.1em}
@media (max-width:820px){ .variants{grid-template-columns:1fr} }

/* ── master artwork reference ── */
.ref-block{margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(2rem,4vw,2.8rem); border-top:.5px solid var(--line-soft)}
.ref-block .b-index{margin-bottom:1.4rem}
.ref-grid{display:grid; grid-template-columns:1.5fr .65fr; gap:1.4rem; align-items:stretch}
.ref{border:.5px solid var(--line-soft); border-radius:3px; overflow:hidden; display:flex; flex-direction:column}
.ref-canvas{flex:1; display:flex; align-items:center; justify-content:center; padding:clamp(1.6rem,3vw,2.4rem); background:var(--surface)}
.ref-canvas img{max-width:100%; max-height:210px; width:auto; height:auto; display:block}
.ref-canvas--deep{background:var(--ink)}
.ref-canvas--deep img{max-height:120px}
.ref figcaption{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.9rem 1.1rem; border-top:.5px solid var(--line-soft);
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ref figcaption span{color:var(--ink-faint); letter-spacing:.06em; text-transform:none; font-size:.68rem}
.ref-note{
  margin-top:1.3rem; font-family:var(--f-body); font-weight:300;
  font-size:clamp(.9rem,1.2vw,1rem); color:var(--ink-soft); max-width:56ch; line-height:1.65;
}
.ref-note em{font-family:var(--f-display); font-style:italic; color:var(--gold)}
@media (max-width:820px){ .ref-grid{grid-template-columns:1fr} }

/* ── COLOR ── */
.swatch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.swatch{display:flex; flex-direction:column; gap:.8rem}
.swatch .chip{
  aspect-ratio:1/1; border-radius:3px; box-shadow:inset 0 0 0 .5px var(--line);
}
.swatch .s-meta{display:flex; flex-direction:column; gap:.15em}
.swatch .s-name{font-family:var(--f-display); font-size:1.15rem; font-style:italic}
.swatch .s-hex{
  font-family:var(--f-label); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}
.swatch .s-role{
  font-family:var(--f-label); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
@media (max-width:820px){ .swatch-grid{grid-template-columns:repeat(2,1fr)} }

.alt-palettes{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.6rem}
.alt{display:flex; flex-direction:column; gap:.7rem}
.alt .bar{display:flex; width:200px; height:40px; border-radius:3px; overflow:hidden; box-shadow:inset 0 0 0 .5px var(--line)}
.alt .bar i{flex:1}
.alt .a-name{
  font-family:var(--f-label); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ── TYPE ── */
.type-block{padding:2rem 0; border-top:.5px solid var(--line-soft); display:grid; grid-template-columns:.4fr 1fr; gap:clamp(1.5rem,4vw,3.5rem)}
.type-block:first-of-type{border-top:none}
.type-meta{display:flex; flex-direction:column; gap:.4rem}
.type-meta .t-role{
  font-family:var(--f-label); font-size:.66rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
}
.type-meta .t-name{font-family:var(--f-display); font-size:1.6rem; font-weight:500}
.type-meta .t-detail{font-family:var(--f-label); font-size:.82rem; color:var(--ink-faint); letter-spacing:.04em}
.type-specimen .glyphs{
  font-size:clamp(2.6rem,7vw,5rem); line-height:1; letter-spacing:.01em; color:var(--ink);
}
.type-specimen .sample{margin-top:1.2rem; color:var(--ink-soft)}
.specimen-display{font-family:var(--f-display)}
.specimen-display .glyphs{font-style:normal}
.specimen-display .sample{font-family:var(--f-display); font-size:clamp(1.3rem,2.4vw,1.9rem); font-style:italic; line-height:1.4}
.specimen-sans{font-family:var(--f-body)}
.specimen-sans .glyphs{font-weight:300}
.specimen-sans .sample{font-family:var(--f-body); font-size:clamp(1rem,1.5vw,1.2rem); font-weight:300; line-height:1.7; max-width:50ch}
.weights{display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.2rem}
.weights span{font-family:var(--f-body); font-size:1.2rem; color:var(--ink-soft)}
@media (max-width:820px){ .type-block{grid-template-columns:1fr; gap:1rem} }

/* ── VOICE ── */
.voice .verbs{
  display:flex; flex-wrap:wrap; gap:.3em 1.2em;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.4rem,3.6vw,2.8rem); color:var(--ink-faint); max-width:24ch;
}
.voice .verbs em{color:var(--gold); font-style:italic}
.voice .creed{
  font-family:var(--f-display); font-weight:var(--display-weight);
  font-size:clamp(2rem,5vw,3.8rem); line-height:1.06; margin-top:2rem;
}

/* ── back link nav ── */
.b-nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3.2rem);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:.5px solid var(--line-soft);
}
.b-nav .back{
  font-family:var(--f-label); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:.6em; transition:color .3s ease, gap .3s ease;
}
.b-nav .back i{color:var(--gold); transition:transform .3s ease}
.b-nav .back:hover{color:var(--ink); gap:.9em}
.b-nav .back:hover i{transform:translateX(-.25em)}
.b-nav .b-tag{
  font-family:var(--f-display); font-style:italic; font-size:1.15rem; letter-spacing:.03em;
}
.b-nav .b-tag .amp{color:var(--gold); font-style:normal}

/* download row */
.dl-row{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem}
.dl{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--f-label); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); border:.5px solid var(--line); border-radius:999px; padding:.8em 1.4em;
  transition:all .35s ease;
}
.dl i{color:var(--gold)}
.dl:hover{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.dl:hover i{color:var(--gold-soft)}