/* ============================================================
   Navel Gazin' — the analog / hand-traced collage look
   Source of truth: "Navel Gazin.dc.html" (Claude Design mockup)
   ------------------------------------------------------------
   Palette:  paper sheet #f8eede on desk #e6dfcd, ink #1b1815,
             graphite line #4a463f, one stubborn red #cf3a26.
   Type:     Courier Prime everywhere; Anton only for poster-size
             display (the wordmark image already carries it).
   Borders:  every frame is drawn twice through SVG turbulence
             filters (#rough/#rough2/#rough3 — inline in each page)
             so nothing sits perfectly straight.
   ============================================================ */

:root {
  --bg:       #e6dfcd;   /* desk under the sheet */
  --paper:    #f8eede;   /* the sheet itself */
  --cream:    #efe9dc;   /* type on black chips */
  --ink:      #1b1815;
  --graphite: #4a463f;
  --faded:    #8a8175;
  --red:      #cf3a26;
  --mono:     "Courier Prime", "Courier New", ui-monospace, monospace;
  --display:  "Anton", "Archivo Black", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background: var(--bg);
  font-family: var(--mono);
  color: var(--ink);
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--cream); }
input::placeholder, textarea::placeholder { color: #8c8472; }
img { max-width: 100%; }

/* ---------- the sheet ---------- */
.sheet {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 26px);
  background: var(--paper);
}

/* double-traced site frame */
.sheet::before, .sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  border: 1px solid var(--graphite);
}
.sheet::before { inset: 14px; filter: url(#rough); }
.sheet::after  { inset: 13px 15px 16px 12px; filter: url(#rough3); opacity: .7; }

/* paper grain sits over everything.
   NOTE: no mix-blend-mode here on purpose — blending forces the browser
   to re-composite the entire sheet on every repaint (typing lagged). */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  z-index: 2;
}

/* ---------- rough-traced frames ---------- */
/* Solid graphite, traced twice with a slight register slip. */
.rb { position: relative; }
.rb::before, .rb::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--graphite);
}
.rb::before { inset: -3px; filter: url(#rough); }
.rb::after  { inset: -2px -4px -4px -2px; filter: url(#rough3); opacity: .8; }
/* alternate slip directions so neighbouring boxes don't rhyme */
.rb.rb-b::before { filter: url(#rough2); }
.rb.rb-b::after  { inset: -4px -3px -2px -4px; }
.rb.rb-c::after  { inset: -4px -2px -2px -4px; }

/* dashed pencil frame (the "How it works" inset) */
.rb-dash { position: relative; }
.rb-dash::before, .rb-dash::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1.5px dashed var(--faded);
}
.rb-dash::before { inset: -3px; filter: url(#rough2); }
.rb-dash::after  { inset: -2px -4px -4px -2px; filter: url(#rough3); opacity: .55; }

/* tiny tilts — nothing sits square on the desk */
.tilt-l1 { transform: rotate(-0.25deg); }
.tilt-l2 { transform: rotate(-0.4deg); }
.tilt-r1 { transform: rotate(0.35deg); }
.tilt-r2 { transform: rotate(0.5deg); }

/* ---------- chips & labels ---------- */
.chip {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.chip.is-red { background: var(--red); padding: 3px 9px; font-size: 14px; letter-spacing: .08em; }
.chip.tilt-a { transform: rotate(-0.8deg); }
.chip.tilt-b { transform: rotate(0.6deg); }
.chip.tilt-c { transform: rotate(0.7deg); }
.chip.tilt-d { transform: rotate(-0.7deg); }
.chip.tilt-e { transform: rotate(-1deg); }

/* outlined ticket — e.g. #4831 (never a filled block) */
.ticket {
  display: inline-block;
  position: relative;
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  transform: rotate(-1deg);
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--graphite);
}
.ticket::before { inset: -2px; filter: url(#rough); }
.ticket::after  { inset: -1px -3px -3px -1px; filter: url(#rough3); opacity: .8; }

/* plain small caps label (non-chip variant used on tiles) */
.tile-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- buttons ---------- */
.btn {
  cursor: pointer;
  font-family: inherit;
  position: relative;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: rotate(-0.6deg);
  transition: background .12s, color .12s;
}
.btn::before, .btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--graphite);
}
.btn::before { inset: 0; filter: url(#rough); }
.btn::after  { inset: 1px -1px -1px 1px; filter: url(#rough3); opacity: .8; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--cream); }

.btn.is-solid {
  background: var(--ink);
  color: var(--cream);
  transform: rotate(0.7deg);
}
.btn.is-solid::before, .btn.is-solid::after { display: none; }
.btn.is-solid:hover, .btn.is-solid:focus-visible { background: var(--red); color: var(--cream); }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- header ---------- */
.topbar {
  position: relative;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  transform: rotate(-0.3deg);
}
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark img { display: block; height: 44px; width: auto; max-width: 50vw; }
.nav {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav a:hover, .nav a:focus-visible { color: var(--red); }
.nav a[aria-current="page"] { border-bottom: 2px solid var(--red); }

/* ---------- hero ---------- */
.hero { padding: 8px clamp(0px, 1vw, 8px) 14px; }
.tagline {
  font-size: clamp(19px, 2.6vw, 30px);
  margin: 0;
  letter-spacing: .01em;
}
.collage-band {
  margin: clamp(24px, 3.4vw, 44px) calc(-1 * clamp(4px, 2vw, 22px)) clamp(18px, 2.6vw, 30px);
}
.collage-band img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-0.4deg);
}
.lookline {
  font-size: clamp(17px, 2vw, 24px);
  margin: 0;
  letter-spacing: .01em;
}

/* ---------- boxed sections ---------- */
.box { padding: clamp(22px, 3vw, 32px); }

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 46px;
  align-items: start;
}
.duo p { font-size: 16px; line-height: 1.6; margin: 14px 0 0; }
.duo .chip + p { margin-top: 20px; }
.u-red { border-bottom: 2px solid var(--red); }

.steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}
.step { display: flex; gap: 14px; align-items: center; font-size: 16px; }
.step .num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.steps-box { padding: 24px 26px; }

/* ---------- the mix (quote + actions) ---------- */
.mix-box { padding: clamp(26px, 3vw, 38px); }
.mix-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}
.mix-main { flex: 1 1 360px; min-width: 0; }
.thought {
  margin: 22px 0 0;
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 48px);
  line-height: 1.18;
  overflow-wrap: break-word;
}
.thought-attr { margin-top: 22px; font-size: 16px; }
.mix-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.mix-art { flex: 0 1 300px; min-width: 240px; }
.mix-art img {
  display: block;
  width: 295px;
  max-width: 100%;
  height: auto;
  transform: rotate(-1.5deg);
}

/* ---------- submit ---------- */
.submit-box { padding: clamp(22px, 3vw, 30px); }
.submit-row {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 22px;
  flex-wrap: wrap;
}
.submit-row textarea,
.submit-row input[type="text"],
.submit-row input[type="email"] {
  flex: 1;
  min-width: 220px;
  font-family: inherit;
  font-size: 19px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--graphite);
  padding: 8px 2px;
  outline: none;
  resize: none;
  line-height: 1.4;
}
.submit-row textarea:focus,
.submit-row input:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.counter { margin-top: 10px; font-size: 12px; color: var(--faded); }
.formnote {
  margin-top: 10px;
  font-size: 14px;
  min-height: 1.2em;
  opacity: 0;
  transition: opacity .15s;
}
.formnote.show { opacity: 1; }
.formnote.is-err { color: var(--red); }

/* ---------- coming soon ---------- */
.soon { padding: 4px clamp(0px, 1vw, 8px); }
.soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: 26px;
}
.soon-item { text-align: center; }
.soon-item img {
  display: block;
  width: 100%;
  max-width: 245px;
  height: auto;
  margin: 14px auto 0;
}
.soon-item:nth-child(1) img { transform: rotate(-0.6deg); }
.soon-item:nth-child(2) img { transform: rotate(0.5deg); }
.soon-item:nth-child(3) img { transform: rotate(-0.4deg); }
.soon-item:nth-child(4) img { transform: rotate(0.7deg); }

/* ---------- inner pages (about / zine / login) ---------- */
.page { padding: clamp(22px, 3vw, 32px); }
.page h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 84px);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 18px 0 0;
}
.page h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin: 34px 0 0;
}
.page p { font-size: 16px; line-height: 1.6; margin: 14px 0 0; max-width: 62ch; }
.page .lead { font-size: clamp(18px, 2vw, 22px); }

/* ---------- footer ---------- */
.foot {
  padding: 26px 26px 18px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--graphite);
}
.foot .coming { margin-bottom: 8px; }
.foot .coming span { margin: 0 7px; }
.foot .coming .on { color: var(--red); font-weight: 700; }
.foot a { border-bottom: 1px solid var(--faded); }
.foot a:hover { color: var(--red); border-bottom-color: var(--red); }

/* ---------- demo banner ---------- */
.demo-banner {
  background: var(--red);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-align: center;
  padding: 8px 14px;
}
.demo-banner code { font-family: inherit; font-weight: 700; }
.demo-banner.hide { display: none; }

/* ---------- a11y helpers ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .nav { gap: 16px; font-size: 13px; }
  .topbar { padding: 14px 12px; }
  .mix-art { flex-basis: 100%; }
  .mix-art img { margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}