/* Studio Dawn — Visual System v0.1
   Tokens + base. Swiss grotesque (Archivo) + Space Mono captions.
   Warm & soft palette; Crimson is the pop; Sunrise Gold is benched. */

/* ---- brand wordmark font ---- */
@font-face {
  font-family: 'BNSonic';
  src: url('fonts/BNSonic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --canvas:  #FAF0E8;
  --cream:   #F5E6D0;
  --pink:    #EBA8B4;
  --pink-deep:#D98699;
  --crimson: #B30024;
  --umber:   #4A2416;
  --umber-2: #7B3F20;
  --gold:    #E8B84B;
  --ink:     var(--umber);

  /* type */
  --grotesque: "Archivo", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --wordmark: "BNSonic", var(--grotesque);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --hair: rgba(74,36,22,0.16);
  --hair-strong: rgba(74,36,22,0.34);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--grotesque);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
}

.display { font-family: var(--grotesque); font-weight: 700; line-height: 0.96; letter-spacing: -0.025em; text-wrap: balance; }
.d1 { font-size: clamp(44px, 8.2vw, 132px); }
.d2 { font-size: clamp(36px, 5.6vw, 84px); }
.d3 { font-size: clamp(28px, 3.4vw, 50px); letter-spacing: -0.02em; line-height: 1.02; }

.lead { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.32; letter-spacing: -0.012em; font-weight: 500; text-wrap: pretty; }
p { text-wrap: pretty; max-width: 64ch; }

.mono { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.mono-sm { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.dim { opacity: 0.6; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
section { position: relative; }

.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; padding-block: 22px; border-top: 1px solid var(--hair-strong);
  margin-bottom: clamp(36px, 5vw, 72px);
}
.sec-head .idx { color: var(--crimson); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

img { display: block; max-width: 100%; }
a { color: inherit; }