/* MauryIAS website shell. Same neo-brutalist tokens as the app (DESIGN.md):
   flat fills, heavy ink borders, hard zero-blur shadows, small radii, heavy
   type, vivid subject colours that stay the same in both themes. */
:root {
  --bg: #FBF2E0;
  --card: #FFFFFF;
  --wash: #F3E8D2;
  --ink: #171410;
  --ink-mute: #554D44;
  --ink-faint: #6B6258;
  --accent: #0A7363;
  --accent-soft: #CFEAE3;
  --pop: #FFC233;
  --polity: #4D7CFF;
  --modern: #FF8A3D;
  --ancient: #22C3E6;
  --medieval: #FF4D5E;
  --geography: #2ECC71;
  --environment: #A3E635;
  --economy: #A66BFF;
  --culture: #FF6FD8;
  --border: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 6px;
  --max: 760px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #211B15;
    --card: #2E261E;
    --wash: #3A3024;
    --ink: #F6EFE4;
    --ink-mute: #A99C8C;
    --ink-faint: #9C8F7E;
    --accent: #2CC4A8;
    --accent-soft: #123A33;
    --pop: #FFC94D;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  /* The app's page backdrop: a flat ground with a faint dot grid. */
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); font-weight: 700; }
header, main, footer { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
header { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 8px; }
.brand { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }
nav { text-align: right; }
nav a { margin-left: 14px; text-decoration: none; font-size: 15px; white-space: nowrap; }
@media (max-width: 420px) { nav a { font-size: 14px; margin-left: 10px; } }
h1 { font-size: clamp(34px, 7vw, 56px); line-height: 1.05; letter-spacing: -0.03em; margin: 28px 0 12px; font-weight: 900; }
h2 { font-size: 24px; margin: 36px 0 10px; font-weight: 900; letter-spacing: -0.02em; }
h3 { font-size: 18px; margin: 10px 0 6px; font-weight: 800; }
p.lead { font-size: 20px; color: var(--ink-mute); margin-top: 0; }
.card {
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin: 20px 0;
  position: relative;
}
.wash { background: var(--wash); }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 4px; }

/* Ink label: a solid eyebrow block, the app's InkLabel. */
.ink-label {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  margin: 0 0 8px;
}

/* Hero: words left, artwork right; stacked on a phone. */
.hero { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 680px) { .hero { grid-template-columns: 1fr 300px; gap: 28px; } }
.hero-art { width: 100%; max-width: 360px; height: auto; display: block; margin: 8px auto 0; }

/* Artwork colours live on classes so the ink follows the theme and the
   subject fills stay vivid in both. */
/* Stroke classes first, so a fill class on the same element wins. */
.ink-stroke { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.ink-line { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; fill: none; }
.on-fill-stroke { stroke: #171410; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.ink { fill: var(--ink); }
.card-fill { fill: var(--card); }
.wash-fill { fill: var(--wash); }
.bg-fill { fill: var(--bg); }
.pop-fill { fill: var(--pop); }
.accent-fill { fill: var(--accent); }
.polity-fill { fill: var(--polity); }
.modern-fill { fill: var(--modern); }
.ancient-fill { fill: var(--ancient); }
.medieval-fill { fill: var(--medieval); }
.geography-fill { fill: var(--geography); }
.environment-fill { fill: var(--environment); }
.economy-fill { fill: var(--economy); }
.culture-fill { fill: var(--culture); }
.on-fill { fill: #171410; }
.art-text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 900; }

/* Skill cards: a coloured icon tile beside the words. */
.skill { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .skill { grid-template-columns: 88px 1fr; gap: 20px; } }
.skill-icon { width: 88px; height: 88px; display: block; flex: none; }
.skill p:last-child { margin-bottom: 0; }

/* Stickers: a rotated solid tag with a hard shadow, like the app's chips. */
.sticker {
  position: absolute;
  top: -14px;
  right: 16px;
  transform: rotate(4deg);
  background: var(--pop);
  color: #171410;
  border: var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.sticker.teal { background: var(--accent); color: var(--bg); transform: rotate(-3deg); }

/* The ink rule: a 2px solid line between sections. */
.rule { height: 3px; background: var(--ink); margin: 40px 0 8px; }

/* Not list: solid colour blocks instead of bullets. */
.not-list { list-style: none; padding: 0; margin: 0; }
.not-list li { position: relative; padding-left: 30px; margin: 10px 0; }
.not-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background: var(--medieval);
  border: 2px solid var(--ink);
}

form { display: grid; gap: 10px; }
label { font-weight: 700; font-size: 15px; }
input, textarea, select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
}
textarea { min-height: 120px; }
button {
  min-height: 48px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 900;
  color: #171410;
  background: var(--pop);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}
button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.note { font-size: 14px; color: var(--ink-mute); }
footer { padding: 40px 20px; font-size: 14px; color: var(--ink-mute); }
footer a { margin-right: 14px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 2px solid var(--wash); }
th { font-weight: 800; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
.status { display: none; }
.status.show { display: block; }
@media (prefers-reduced-motion: reduce) { button:active { transform: none; } }