/* ============================================================
   DAWN — Editorial Dawn brand system
   Foundation stylesheet: tokens, type, motifs, layout primitives
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Ink + paper */
  --ink:        #15120E;   /* warm near-black */
  --ink-soft:   #2A251E;   /* raised ink panels */
  --paper:      #F7F1E7;   /* warm bone — primary light ground */
  --bone:       #FBF7EF;   /* card / raised light */
  --bone-line:  #E7DECE;   /* hairline on paper */

  /* Stone neutrals */
  --stone-700:  #5C5446;
  --stone-500:  #8A8073;
  --stone-300:  #C9C0B2;
  --stone-200:  #DED5C5;

  /* Dawn spectrum — pre-dawn sky to first light */
  --night:  #0B2E45;   /* deep indigo */
  --plum:   #14618C;   /* magenta horizon */
  --coral:  #23A9E0;   /* DAWN CORAL — primary accent */
  --amber:  #57BEEA;
  --gold:   #8FD6F2;
  --blush:  #BFE6F7;

  /* Functional */
  --accent:     var(--coral);
  --accent-ink: #14618C;   /* coral darkened for text on paper (AA) */
  --link:       var(--accent-ink);

  /* The signature gradient */
  --dawn-sky: linear-gradient(105deg,
      var(--night) 0%, var(--plum) 30%, var(--coral) 60%,
      var(--amber) 82%, var(--gold) 100%);
  --dawn-sky-v: linear-gradient(180deg,
      var(--night) 0%, var(--plum) 34%, var(--coral) 66%,
      var(--amber) 86%, var(--gold) 100%);

  /* Type */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, sans-serif;

  /* Measure + rhythm */
  --pad:    clamp(22px, 6vw, 120px);
  --maxw:   1180px;
  --label-tr: .26em;
}

/* ---------- Reset-ish ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17.1px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
::selection{background:var(--coral);color:var(--bone)}

/* ---------- Type primitives ---------- */
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:.96;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.display em{font-style:italic;font-weight:400}
.serif{font-family:var(--serif)}
.italic{font-style:italic}

.label{
  font-family:var(--sans);
  font-weight:600;
  font-size:12.3px;
  letter-spacing:var(--label-tr);
  text-transform:uppercase;
}
.label--mid::before,.label--mid::after{content:"·";margin:0 .7em;opacity:.5}

.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:12.8px;
  letter-spacing:var(--label-tr);
  text-transform:uppercase;
  color:var(--accent-ink);
}
.lede{
  font-family:var(--serif);
  font-size:clamp(21.4px,2.3vw,28.9px);
  line-height:1.42;
  font-weight:400;
  color:var(--stone-700);
  max-width:24ch;
}
.body-lg{font-size:19.3px;line-height:1.62}
.mono-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- Layout ---------- */
.section{padding:clamp(64px,9vw,140px) var(--pad);position:relative}
.wrap{max-width:var(--maxw);margin:0 auto}
.section--ink{background:var(--ink);color:var(--paper)}
.section--ink .eyebrow{color:var(--gold)}
.section--ink .lede{color:var(--stone-300)}
.section--ink .hr-line{background:rgba(247,241,231,.16)}

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,6vw,80px);max-width:780px}
.section-num{
  font-family:var(--sans);font-weight:600;font-size:12.8px;letter-spacing:.2em;
  color:var(--stone-500);
}
.section--ink .section-num{color:var(--gold)}

.hr-line{height:1px;background:var(--bone-line);border:0;margin:0}

/* Horizon divider — thin rule meeting a small dawn arc */
.horizon{display:flex;align-items:center;gap:18px;margin:0}
.horizon .rule{flex:1;height:1px;background:var(--bone-line)}
.section--ink .horizon .rule{background:rgba(247,241,231,.18)}
.horizon .sun{
  width:34px;height:17px;border-radius:34px 34px 0 0;
  background:var(--dawn-sky);
}

/* ---------- The Echo motif ---------- */
.echo{position:relative;display:inline-block}
.echo > span{display:block}
.echo .ghost{position:absolute;inset:0;pointer-events:none}
.echo .ghost:nth-of-type(1){transform:translateX(.14em);opacity:.20}
.echo .ghost:nth-of-type(2){transform:translateX(.28em);opacity:.12}
.echo .ghost:nth-of-type(3){transform:translateX(.42em);opacity:.06}

/* ---------- Cards & swatches ---------- */
.card{background:var(--bone);border:1px solid var(--bone-line);border-radius:4px}
.section--ink .card{background:var(--ink-soft);border-color:rgba(247,241,231,.12)}

.swatch{border-radius:4px;overflow:hidden;border:1px solid var(--bone-line)}
.swatch .chip{height:128px}
.swatch .meta{padding:14px 16px;background:var(--bone);color:var(--ink);display:flex;flex-direction:column;gap:3px}
.swatch .meta .nm{font-weight:600;font-size:15px;color:var(--ink)}
.swatch .meta .hx{font-size:12.8px;color:var(--stone-500);font-variant-numeric:tabular-nums}

/* tag / pill */
.tag{
  display:inline-flex;align-items:center;
  font-family:var(--sans);font-weight:600;font-size:11.2px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone-700);
  border:1px solid var(--bone-line);border-radius:999px;padding:5px 11px;
}
.section--ink .tag{color:var(--stone-300);border-color:rgba(247,241,231,.2)}

/* ---------- Wordmark ---------- */
.wordmark{
  font-family:var(--sans);font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;display:inline-block;line-height:1;
}

/* do / dont */
.dd{display:flex;align-items:center;gap:9px;font-size:13.9px;font-weight:600}
.dd .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11.8px;flex:none}
.dd.do .ic{background:#3E7D54}
.dd.dont .ic{background:#14618C}

/* utility */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.muted{color:var(--stone-500)}
.center{text-align:center}

/* ---------- Tweaks panel ---------- */
.tw-panel{
  position:fixed;right:18px;bottom:18px;z-index:2147483646;width:236px;display:none;
  flex-direction:column;background:rgba(251,247,239,.86);color:var(--ink);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  border:.5px solid rgba(0,0,0,.1);border-radius:13px;
  box-shadow:0 14px 44px rgba(0,0,0,.22);font-family:var(--sans);
}
.tw-hd{display:flex;align-items:center;justify-content:space-between;padding:11px 10px 11px 15px}
.tw-hd b{font-size:13.4px;font-weight:700;letter-spacing:.02em}
.tw-x{border:0;background:transparent;color:var(--stone-500);width:24px;height:24px;
  border-radius:6px;cursor:pointer;font-size:13.9px}
.tw-x:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.tw-body{padding:2px 15px 16px;display:flex;flex-direction:column;gap:9px}
.tw-sect{font-size:10.7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--stone-500);padding-top:8px}
.tw-swatches{display:flex;gap:8px}
.tw-chip{width:34px;height:34px;border-radius:8px;border:2px solid transparent;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.15);outline:2px solid transparent;outline-offset:2px}
.tw-chip.on{outline-color:var(--ink)}
.tw-seg{display:flex;padding:3px;border-radius:9px;background:rgba(0,0,0,.07);gap:3px}
.tw-seg button{flex:1;border:0;background:transparent;font-family:var(--sans);font-weight:600;
  font-size:12.8px;padding:6px;border-radius:6px;cursor:pointer;color:var(--stone-700)}
.tw-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* ---------- Print ---------- */
@media print{
  .nav-rail,.tw-panel,.to-top{display:none!important}
  .section{break-inside:avoid;padding:48px 40px}
  body{font-size:12.8px}
}