/* ===== Slidepop brand book — shared tokens & primitives ===== */
:root {
  --bg:        #f3f1ec;
  --bg-2:      #e7e3d8;
  --bg-3:      #d8d3c1;
  --paper:     #ffffff;
  --ink:       #0a0a0a;
  --ink-2:     #1d1d1d;
  --ink-soft:  #5b5b58;
  --rule:      #1d1d1d;
  --hair:      rgba(10,10,10,.14);

  --cobalt:    #1f2bff;
  --cobalt-d:  #1018b8;
  --magenta:   #ff2e93;
  --magenta-d: #c80f6c;
  --lime:      #c8ff3e;
  --lime-d:    #93c521;
  --sun:       #ffd84d;
  --sun-d:     #d4a921;
  --sky:       #b9e6ff;

  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --sans:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--cobalt); color: white; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }

/* ----- ticker strip ----- */
.strip {
  background: var(--ink); color: var(--bg); padding: 6px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  overflow: hidden; border-bottom: 2px solid var(--ink);
}
.ticker { display: flex; gap: 48px; white-space: nowrap; animation: tick 60s linear infinite; }
.ticker span::before { content: "● "; color: var(--lime); margin-right: 8px;}
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----- top nav (sticky) ----- */
nav.top { background: var(--bg); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 50;}
nav.top .row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center; height: 72px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.04em;
  line-height: 1;
}
.wordmark .mark {
  width: 26px; height: 26px; background: var(--cobalt);
  display: inline-block; position: relative; border: 2px solid var(--ink);
}
.wordmark .mark::after {
  content: ""; position: absolute; right: -5px; bottom: -5px;
  width: 14px; height: 14px; background: var(--magenta); border: 2px solid var(--ink);
}
.wordmark .pop { color: var(--cobalt); }

nav.top ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; font: 500 13px/1 var(--sans); justify-content: center; flex-wrap: wrap;}
nav.top ul a { text-decoration: none; color: var(--ink); padding: 6px 10px; }
nav.top ul a:hover { background: var(--ink); color: var(--bg);}
nav.top ul a.active { background: var(--cobalt); color: white;}

/* ----- buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--ink); background: var(--bg); color: var(--ink);
  padding: 10px 16px; font: 600 14px/1 var(--sans);
  text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 80ms, box-shadow 80ms;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn.cobalt   { background: var(--cobalt);   color: white; }
.btn.magenta  { background: var(--magenta);  color: white; }
.btn.lime     { background: var(--lime);     color: var(--ink); }
.btn.sun      { background: var(--sun);      color: var(--ink); }
.btn.flat     { box-shadow: none; }
.btn.flat:hover { transform: none; box-shadow: none; background: var(--ink); color: var(--bg);}
.btn.sm { padding: 7px 12px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
.btn.sm:hover { box-shadow: 5px 5px 0 var(--ink); }
.btn.lg { padding: 16px 22px; font-size: 17px; box-shadow: 5px 5px 0 var(--ink); }

/* ----- page header ----- */
.page-head { padding: 80px 0 56px; border-bottom: 2px solid var(--ink); }
.page-head .row { display: grid; grid-template-columns: 220px 1fr 220px; gap: 48px; align-items: end;}
.page-head .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-top: 2px solid var(--ink); padding-top: 8px;}
.page-head .label .num { color: var(--cobalt); margin-right: 8px; font-weight: 600;}
.page-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 7vw, 116px); line-height: 0.86; letter-spacing: -0.045em; margin: 0;}
.page-head h1 em { font-style: italic; color: var(--cobalt); font-weight: 700;}
.page-head h1 .blip { display: inline-block; background: var(--sun); color: var(--ink); border: 2px solid var(--ink); padding: 0 10px; transform: rotate(-2deg);}
.page-head .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); text-align: right; align-self: end;}
.page-head .meta div { padding-top: 4px;}
@media (max-width: 900px) { .page-head .row { grid-template-columns: 1fr;} .page-head .meta { text-align: left;} }

/* ----- section ----- */
section { padding: 80px 0; border-bottom: 2px solid var(--ink); }
.sec-head { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 48px; margin-bottom: 48px; align-items: end;}
.sec-head .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-top: 2px solid var(--ink); padding-top: 8px;}
.sec-head .label .num { color: var(--cobalt); margin-right: 8px; font-weight: 600;}
.sec-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 0.9; letter-spacing: -0.04em; margin: 0;}
.sec-head h2 em { font-style: italic; color: var(--cobalt); font-weight: 700;}
.sec-head p { font-size: 16px; color: var(--ink-2); max-width: 44ch; margin: 0;}
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; }}

.micro { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);}
.label-pill { display: inline-block; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); padding: 4px 10px; font: 600 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;}

/* ----- generic grid card ----- */
.card { border: 2px solid var(--ink); background: var(--bg); padding: 24px; }
.card h4 { margin: 0 0 12px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);}

/* ----- footer ----- */
footer { background: var(--ink); color: var(--bg); padding: 64px 0 32px; }
footer .grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;}
footer h5 { font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 14px;}
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px;}
footer ul a { text-decoration: none; color: var(--bg); opacity: 0.9;}
footer ul a:hover { color: var(--lime);}
footer .legal { display: flex; justify-content: space-between; padding-top: 24px; margin-top: 32px; border-top: 1px solid #2c2c2c; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.5);}
@media (max-width: 800px) { footer .grid { grid-template-columns: 1fr 1fr;} }

/* ----- shared SVG-mark factory utilities ----- */
.mark-block { width: 100%; aspect-ratio: 1.5/1; background: var(--bg); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; padding: 32px; box-shadow: 6px 6px 0 var(--ink);}
.mark-block.dark { background: var(--ink); }
.mark-block.cobalt { background: var(--cobalt); }
.mark-block.magenta { background: var(--magenta); }
.mark-block.lime { background: var(--lime); }
.mark-block.sun { background: var(--sun); }
.mark-block .cap { position: absolute; }

.swatch-block { aspect-ratio: 1/1.15; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); border: 2px solid var(--ink);}
.swatch-block.dark { color: var(--bg);}
.swatch-block .name { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em;}
.swatch-block .meta { font-family: var(--mono); font-size: 11px; opacity: 0.7;}

/* ----- shared helpers ----- */
.row { display: flex; align-items: center; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;}
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: 1fr 1fr;} .grid-4 { grid-template-columns: 1fr 1fr;} .grid-6 { grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 700px)  { .grid-2 { grid-template-columns: 1fr;} .grid-3 { grid-template-columns: 1fr;} .grid-4 { grid-template-columns: 1fr 1fr;} .grid-6 { grid-template-columns: 1fr 1fr;} }

/* ----- chip ----- */
.chip { display: inline-block; background: var(--bg); border: 2px solid var(--ink); padding: 4px 10px; font: 600 11px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase;}
.chip.cobalt  { background: var(--cobalt);  color: white; }
.chip.magenta { background: var(--magenta); color: white; }
.chip.lime    { background: var(--lime);    color: var(--ink); }
.chip.sun     { background: var(--sun);     color: var(--ink); }
.chip.ink     { background: var(--ink);     color: var(--bg); }