/* Mid-fi wireframe shared styles — grayscale + muted pink accent */
:root{
  --bg: #fbf5f4;              /* very faint pink wash */
  --bg-grad-a: #fcf2f0;
  --bg-grad-b: #f7f1ef;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-mute: #8a8786;
  --ink-faint: #c8c4c2;
  --line: #d8d2d0;
  --line-soft: #e8e3e1;
  --panel: #ffffff;
  --panel-alt: #f2ecea;
  --accent: oklch(0.78 0.04 10);   /* muted pink */
  --accent-ink: oklch(0.42 0.06 10);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(120% 80% at 20% 0%, var(--bg-grad-a) 0%, transparent 60%),
    radial-gradient(100% 70% at 80% 100%, var(--bg-grad-b) 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.serif{ font-family: "Instrument Serif", "Times New Roman", Georgia, serif; font-weight: 400; }
.mono{ font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* wireframe primitives */
.wf-box{ border:1px solid var(--line); background: var(--panel); border-radius: 2px; }
.wf-box--soft{ border-color: var(--line-soft); background: transparent; }
.wf-placeholder{
  position:relative; background:
    repeating-linear-gradient(-45deg, transparent 0 7px, rgba(0,0,0,.04) 7px 8px),
    var(--panel-alt);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-mute); font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 2px;
}
.wf-placeholder span{ background: var(--bg); padding: 3px 8px; border-radius: 2px; }
.wf-line{ height:10px; border-radius: 5px; background: var(--ink-faint); }
.wf-line.dark{ background: var(--ink-soft); }
.wf-line.mid{ background: var(--ink-mute); }
.wf-line.accent{ background: var(--accent); }
.wf-caption{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}
.wf-pin{
  position:absolute; top:-8px; left:-8px;
  background: var(--accent); color: var(--accent-ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 2px; font-weight: 600;
  z-index: 3;
}
.wf-note{
  position:absolute;
  background: #fff8d6;
  color: #6a5a1a;
  font-family: "Kalam", "Comic Sans MS", cursive;
  font-size: 13px; line-height: 1.35;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transform: rotate(-3deg);
  max-width: 180px;
  z-index: 4;
}
.wf-arrow{
  position:absolute; z-index:3; color: var(--accent-ink);
  font-family: "Kalam", cursive; font-size:13px;
}

/* navigation */
.wf-nav{
  display:flex; align-items:center; justify-content: space-between;
  padding: 24px 48px; border-bottom: 1px dashed var(--line);
}
.wf-nav-logo{
  font-family: "Instrument Serif", serif; font-size: 22px; letter-spacing: -.01em;
}
.wf-nav-links{ display:flex; gap: 28px; list-style: none; margin:0; padding:0; }
.wf-nav-links li{ font-size: 13px; color: var(--ink-soft); letter-spacing:.02em; }
.wf-nav-links li.active{ color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* hero display text */
.wf-display{
  font-family: "Archivo Black", "Instrument Serif", Impact, sans-serif;
  font-weight: 900; letter-spacing: -0.02em; line-height: 0.92;
  text-transform: uppercase;
}
.wf-eyebrow{
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* page frame */
.wf-page{
  max-width: 1320px; margin: 0 auto; padding: 0 48px 120px;
}
.wf-section{ padding: 96px 0; position:relative; }
.wf-section-head{ display:flex; align-items:baseline; gap: 18px; margin-bottom: 40px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.wf-section-head h2{
  font-family: "Archivo Black", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: -0.01em;
  font-size: 28px; margin: 0;
}

/* generic buttons */
.wf-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); background: #fff;
  padding: 8px 12px; border-radius: 100px;
  font-size: 12px; color: var(--ink-soft);
}
.wf-dot{ width:8px; height:8px; border-radius:50%; background: #5db07b; display:inline-block; }

/* scattered objects playground */
.wf-playground{
  position:relative; min-height: 420px;
  border: 1px dashed var(--line);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(0,0,0,.025) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(0,0,0,.025) 39px 40px);
}
.wf-obj{
  position:absolute;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-mute);
  text-align:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  cursor:pointer;
}
.wf-obj.circle{ border-radius: 50%; }
.wf-obj.pill{ border-radius: 100px; }

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Archivo+Black&family=Kalam:wght@400;700&display=swap');