/* STEMroots: shared styles for the secondary pages (404, thanks, privacy, terms).
   The homepage's world: the site header, a forest-green band with the sprout drawing up top,
   paper body with rules instead of boxes, stamped stickers and buttons, and the homepage footer with
   its roots. Upright type only. Pages load it as pages.css?v=5. */
:root {
  --bg: #f4f1e8; --paper: #f4f1e8; --bg-soft: #ebe7da; --bg-alt: #e0ddd0; --cream: #faf6ec;
  --ink: #0e1f15; --ink-2: #2a3a2e; --ink-3: #5a6a5c; --ink-4: #8a9387;
  --line: rgba(14,31,21,0.10); --line-strong: rgba(14,31,21,0.20);
  --forest: #1b3a25; --forest-deep: #0a1c12; --moss: #43704a; --leaf: #7fb069;
  --lime: #d6ec5d; --lime-bright: #e7f87a; --clay: #d96e3e; --clay-deep: #a84b24;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-sm: 10px; --radius: 16px; --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--lime); color: var(--forest-deep); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.container { width: min(calc(100% - 2rem), 1140px); margin: 0 auto; }

/* header: the homepage's nav, pointing back into it */
.page-nav { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line-strong); }
.page-nav-inner { display: flex; align-items: center; gap: 1rem 2rem; min-height: 72px; }
.brand {
  display: flex; align-items: center; gap: 12px; margin-right: auto;
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 60, "opsz" 24; color: var(--ink);
}
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.page-links { display: flex; align-items: center; gap: 1.6rem; }
.page-links a {
  font-weight: 600; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: color .2s, text-decoration-color .2s;
}
.page-links a:hover { color: var(--ink); text-decoration-color: var(--clay); }
@media (max-width: 820px) { .page-links { display: none; } }

/* buttons + stickers (same as the homepage) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  border-radius: 999px; padding: 0.9rem 1.5rem; min-height: 50px;
  font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer;
  border: 2px solid var(--ink);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--cream); box-shadow: 4px 4px 0 var(--lime); }
.btn-primary:hover { background: var(--forest); border-color: var(--forest); }
.btn-secondary { background: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-secondary:hover { background: var(--lime); }
.btn-sm { min-height: 42px; padding: 0.6rem 1rem; font-size: 0.92rem; gap: 0.3em; }
.sticker {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  font-variation-settings: "SOFT" 100, "opsz" 24;
  padding: 6px 14px; border-radius: 999px;
  background: var(--cream); color: var(--ink); border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); white-space: nowrap;
}
.sticker.lime { background: var(--lime); }
.sticker.clay { background: var(--clay); }

/* breadcrumbs */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; list-style: none;
  font-size: 0.92rem; font-weight: 600; color: var(--ink-3);
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before { content: '/'; font-weight: 400; }
.crumbs a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* type */
h1 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 144;
  letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.6rem, 7vw, 5rem); color: var(--ink);
  text-wrap: balance; max-width: 16ch;
}
h2 {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.45rem, 3vw, 1.9rem);
  letter-spacing: -0.02em; line-height: 1.15; margin: 2.4rem 0 0.75rem;
  font-variation-settings: "SOFT" 80, "opsz" 48; color: var(--ink);
}
.lead { color: var(--ink-2); font-size: clamp(1.1rem, 1.7vw, 1.28rem); line-height: 1.55; max-width: 58ch; margin-top: 1.1rem; }
.meta { font-size: 0.95rem; color: var(--ink-3); }
.inline-link {
  color: var(--forest); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--clay); text-decoration-thickness: 2px; transition: color .2s;
}
.inline-link:hover { color: var(--clay-deep); }

/* the forest band at the top of every page */
.page-hero {
  background: var(--forest); color: var(--cream);
  border-bottom: 2px solid var(--ink);
  position: relative; overflow: hidden;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0 clamp(3rem, 6vw, 4.6rem);
}
.page-hero::after {
  content: ''; position: absolute; right: max(-60px, calc(50% - 640px)); bottom: -56px;
  width: clamp(190px, 25vw, 320px); height: clamp(190px, 25vw, 320px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23d6ec5d' stroke-width='1.6' stroke-linecap='round' stroke-opacity='0.5'><path d='M 100 180 C 100 120 70 80 30 60'/><path d='M 100 180 C 100 130 130 95 175 80'/><path d='M 100 180 L 100 40'/><path d='M 100 100 C 80 90 70 75 65 55'/><path d='M 100 100 C 120 90 130 75 135 55'/><path d='M 100 70 C 88 62 82 50 80 35'/><path d='M 100 70 C 112 62 118 50 120 35'/><circle cx='100' cy='30' r='5' fill='%23d96e3e' stroke='none'/></g></svg>");
  background-size: contain; background-repeat: no-repeat; pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 820px; }
@media (max-width: 640px) {
  /* phones: a smaller sprout, tucked under the text instead of behind it */
  .page-hero { padding-bottom: 6.5rem; }
  .page-hero::after { width: 130px; height: 130px; right: -18px; bottom: -36px; }
}
.page-hero .crumbs { color: rgba(250,246,236,0.72); margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.page-hero .crumbs [aria-current="page"] { color: var(--cream); }
.page-hero .crumbs a:hover { color: var(--lime); }
.page-hero h1 { color: var(--cream); }
.page-hero .lead { color: rgba(250,246,236,0.9); }
.page-hero .meta { color: rgba(250,246,236,0.75); margin-top: 1.2rem; }
.page-hero .sticker { margin-bottom: 1.5rem; }
.big-404 {
  font-family: var(--font-display); font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  font-size: clamp(5rem, 16vw, 9.5rem); line-height: 0.85; letter-spacing: -0.04em;
  color: var(--lime); margin-bottom: 0.4rem; user-select: none;
}
.note {
  margin-top: 1.6rem; padding: 1rem 1.2rem; border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--lime); font-size: 1rem; color: var(--ink); max-width: 60ch;
}
.note[hidden] { display: none; }
.note .inline-link { color: var(--ink); text-decoration-color: var(--ink); }

/* page body */
main { flex: 1; }
.page { padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(3.5rem, 7vw, 6rem); }
.section-title { margin-top: 0; margin-bottom: 1rem; }
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }

/* links beside a real photo (404, thanks) */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.links-list { list-style: none; border-top: 2px solid var(--ink); }
.links-list li { border-bottom: 1px solid var(--line-strong); }
.links-list a { display: grid; gap: 0.2rem; padding: 1rem 0.1rem 1.05rem; }
@media (min-width: 640px) { .links-list a { grid-template-columns: minmax(11rem, 0.75fr) 1.25fr; gap: 1.5rem; align-items: baseline; } }
.links-list strong {
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.2;
  font-variation-settings: "SOFT" 80, "opsz" 24;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s;
}
.links-list a:hover strong { color: var(--forest); text-decoration-color: var(--clay); }
.links-list span { font-size: 0.98rem; color: var(--ink-3); line-height: 1.5; }
.photo-figure { margin: 0; }
.photo-figure img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); border: 2px solid var(--ink); background: var(--bg-alt);
}
.photo-figure figcaption { margin-top: 0.85rem; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; line-height: 1.35; color: var(--ink-2); }
@media (max-width: 899px) { .photo-figure { max-width: 460px; } .photo-figure img { aspect-ratio: 4 / 3; } }

/* privacy and terms: contents beside the text */
.legal { display: grid; gap: 2.2rem clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .legal { grid-template-columns: 240px minmax(0, 1fr); } .toc { position: sticky; top: calc(72px + 1.6rem); } }
.toc { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.toc-title { font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
.toc ol { list-style: none; display: grid; }
@media (max-width: 959px) { .toc ol { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: 1.5rem; } }
.toc a {
  display: block; padding: 0.32rem 0; font-size: 0.97rem; color: var(--ink-3); line-height: 1.35;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;
}
.toc a:hover { color: var(--ink); text-decoration-color: var(--clay); }
.legal-body { min-width: 0; }
.prose { max-width: 70ch; }
.prose h2 { scroll-margin-top: calc(72px + 1.4rem); }
.prose p, .prose li { color: var(--ink-2); font-size: 1.04rem; line-height: 1.72; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1.1rem; display: grid; gap: 0.45rem; }
.prose a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--clay); text-decoration-thickness: 2px; transition: color .2s; }
.prose a:hover { color: var(--clay-deep); }
.prose strong { color: var(--ink); font-weight: 700; }
.card { background: var(--cream); border: 2px solid var(--ink); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 2.4rem; }
.card h2:first-child { margin-top: 0; }
.summary-list { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.prose .summary-list { padding: 0; gap: 0; }
.summary-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--line-strong); }

/* footer: the homepage footer */
.site-footer {
  background: var(--forest-deep); color: var(--cream);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.75rem;
  position: relative; overflow: hidden; border-top: 2px solid var(--ink); margin-top: auto;
}
.site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.3;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 300'><g fill='none' stroke='%23d6ec5d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M-10 8 C180 14 330 2 520 9 C700 15 880 3 1060 10 C1210 15 1320 6 1410 9'/><path d='M150 10 C146 44 158 70 150 108 C144 138 154 164 148 200 M151 64 C136 78 122 82 108 100 M152 128 C166 140 172 154 184 166'/><path d='M430 9 C434 40 424 66 431 100 C437 132 426 170 433 236 M429 52 C414 64 404 82 390 90 M432 112 C450 122 458 140 474 148 M430 182 C418 194 410 208 398 214'/><path d='M760 12 C755 38 767 58 760 92 C755 116 763 134 758 156 M761 50 C776 58 784 72 798 78 M759 104 C746 112 738 124 726 130'/><path d='M1080 10 C1084 46 1074 74 1082 112 C1088 146 1076 178 1083 260 M1079 70 C1064 80 1054 98 1040 106 M1082 150 C1098 160 1106 176 1120 184'/><path d='M1300 9 C1296 32 1306 52 1299 80 C1295 100 1301 116 1297 134 M1300 60 C1314 68 1320 80 1332 86'/></g></svg>") top center / max(1400px, 100%) auto no-repeat;
}
.footer-mast {
  font-family: var(--font-display); font-weight: 400; font-variation-settings: "SOFT" 60, "opsz" 144;
  font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 0.96; letter-spacing: -0.035em;
  color: var(--cream); margin-bottom: 2.4rem; max-width: 16ch; position: relative; z-index: 1;
}

.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem;
  border-top: 1px solid rgba(250,246,236,0.18); padding-top: 1.8rem; position: relative; z-index: 1;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; gap: 1.4rem; } }
.footer-head { font-size: 1rem; font-weight: 700; color: var(--lime); margin-bottom: 0.7rem; }
.footer-grid p, .footer-grid a { font-size: 0.98rem; color: rgba(250,246,236,0.82); line-height: 1.7; display: block; transition: color .2s; }
.footer-grid a:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand { display: flex !important; align-items: center; gap: 12px; margin-bottom: 0.8rem; font-weight: 700; color: var(--lime) !important; }
.footer-logo { width: 42px; height: 42px; border-radius: 50%; background: var(--cream); object-fit: cover; flex: none; }
.footer-grid p.footer-incorp { margin-top: 1rem; font-size: 0.9rem; line-height: 1.65; color: rgba(250,246,236,0.7); }
.footer-incorp strong { color: rgba(250,246,236,0.9); }
.footer-base {
  margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(250,246,236,0.18);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.88rem; color: rgba(250,246,236,0.7); position: relative; z-index: 1;
}
.footer-base a { color: rgba(250,246,236,0.88); text-decoration: underline; text-underline-offset: 2px; }
.footer-base a:hover { color: var(--lime); }

@media (max-width: 560px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}