/* Loamistry's brand, shared by the landing page and the white paper: the
   logo's cream, sand, clay, loam, wordmark brown and biochar black (as in
   ../app/styles.css), light and dark. Dark mode is black earth by night: deeper, lit surfaces,
   warm light pooling at the top of the page and a fine soil grain. */
:root {
  --brand-cream: #FCF9F0; --brand-sand: #DCC7AB; --brand-clay: #875833; --brand-loam: #5B391E; --brand-word: #4D2F19; --brand-char: #26231F;
  --bg: #FCF9F0; --side: #F3EADB; --card: #FFFDF8; --ink: #2E1E12; --muted: #6E5A48; --line: rgba(91, 57, 30, .15);
  --olive: #875833; --olive-soft: rgba(135, 88, 51, .11); --loam: #5B391E; --ochre: #B88A5C; --accent-ink: #FCF9F0;
  --viz-char: #6250d6; --viz-mulch: #eb6834; --viz-soil: #1baf7a; --viz-air: #2a78d6;
  --ph-0: #c44e3f; --ph-1: #e39a7f; --ph-2: #d9d4c8; --ph-3: #8db4e3; --ph-4: #2a6bb8;
  --serif: Newsreader, Georgia, serif; --sans: Archivo, system-ui, sans-serif; --wordmark: "Libre Caslon Text", Georgia, serif;
  --root: #FCF9F0; --seam: rgba(252, 249, 240, .9);
  --surface: var(--card); --edge: 0 0 0 transparent; --hover-shadow: 0 22px 40px -28px rgba(46, 30, 18, .45);
  --btn-bg: var(--brand-word); --btn-ink: var(--brand-cream); --btn-line: var(--brand-word);
  --earth-bg: radial-gradient(120% 90% at 85% 0%, #2E211A 0%, #1C1612 55%, #120E0B 100%); --earth-edge: 0 0 0 transparent;
  --atmosphere: none;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #110B07; --side: #160F0A; --card: #1D140D; --ink: #F5ECDF; --muted: #C5B29C; --line: rgba(245, 236, 223, .1);
    --olive: #E5C99C; --olive-soft: rgba(229, 201, 156, .12); --brand-word: #F5ECDF; --loam: #CFA77C; --ochre: #D9A066; --accent-ink: #120C08;
    --viz-char: #9085e9; --viz-mulch: #d95926; --viz-soil: #199e70; --viz-air: #3987e5;
    --ph-0: #b5473a; --ph-1: #9c5b48; --ph-2: #4a443c; --ph-3: #3f6a9a; --ph-4: #2f63a8;
    --seam: rgba(252, 249, 240, .55);
    /* Black earth by night: lit surfaces, warm light pooling at the top, a fine grain. */
    --surface: linear-gradient(180deg, rgba(255, 236, 210, .055), rgba(255, 236, 210, .018)), #150E09;
    --edge: inset 0 1px 0 rgba(255, 240, 220, .07);
    --hover-shadow: inset 0 1px 0 rgba(255, 240, 220, .09), 0 26px 50px -30px rgba(0, 0, 0, .9), 0 0 44px -14px rgba(229, 201, 156, .22);
    --btn-bg: linear-gradient(180deg, #F2E0C2, #D8BA8E); --btn-ink: #1A110B; --btn-line: #E5C99C;
    --earth-bg: radial-gradient(120% 90% at 85% 0%, #24180F 0%, #0B0705 58%, #060403 100%);
    --earth-edge: inset 0 1px 0 rgba(229, 201, 156, .22), inset 0 -1px 0 rgba(229, 201, 156, .22);
    --atmosphere: radial-gradient(1100px 640px at 85% -10%, rgba(217, 160, 102, .15), transparent 62%), radial-gradient(900px 620px at -10% 40%, rgba(135, 88, 51, .13), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .82  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #110B07; --side: #160F0A; --card: #1D140D; --ink: #F5ECDF; --muted: #C5B29C; --line: rgba(245, 236, 223, .1);
  --olive: #E5C99C; --olive-soft: rgba(229, 201, 156, .12); --brand-word: #F5ECDF; --loam: #CFA77C; --ochre: #D9A066; --accent-ink: #120C08;
  --viz-char: #9085e9; --viz-mulch: #d95926; --viz-soil: #199e70; --viz-air: #3987e5;
  --ph-0: #b5473a; --ph-1: #9c5b48; --ph-2: #4a443c; --ph-3: #3f6a9a; --ph-4: #2f63a8;
  --seam: rgba(252, 249, 240, .55);
  /* Black earth by night: lit surfaces, warm light pooling at the top, a fine grain. */
  --surface: linear-gradient(180deg, rgba(255, 236, 210, .055), rgba(255, 236, 210, .018)), #150E09;
  --edge: inset 0 1px 0 rgba(255, 240, 220, .07);
  --hover-shadow: inset 0 1px 0 rgba(255, 240, 220, .09), 0 26px 50px -30px rgba(0, 0, 0, .9), 0 0 44px -14px rgba(229, 201, 156, .22);
  --btn-bg: linear-gradient(180deg, #F2E0C2, #D8BA8E); --btn-ink: #1A110B; --btn-line: #E5C99C;
  --earth-bg: radial-gradient(120% 90% at 85% 0%, #24180F 0%, #0B0705 58%, #060403 100%);
  --earth-edge: inset 0 1px 0 rgba(229, 201, 156, .22), inset 0 -1px 0 rgba(229, 201, 156, .22);
  --atmosphere: radial-gradient(1100px 640px at 85% -10%, rgba(217, 160, 102, .15), transparent 62%), radial-gradient(900px 620px at -10% 40%, rgba(135, 88, 51, .13), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .82  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* The horizons, in the logo's colours (the same in both themes), each with a
   faint texture: litter, the logo's roots and biochar, sand, mottles,
   pebbles, cracks. Cream seams between them, as in the mark. */
[data-h="s"] { --c: #E9DAC2; --t: #4D2F19; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30'%3E%3Cg stroke='%234D2F19' stroke-opacity='.14' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6 30l2-9M9 30l-1-7M30 30l2-11M33 30l-2-6M44 30l1-8'/%3E%3C/g%3E%3C/svg%3E"); }
[data-h="o"] { --c: #2C241E; --t: #F3E9DA; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40'%3E%3Cg stroke='%23DCC7AB' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 8l9 3M30 21l7-5M48 34l9 2M17 31l4 5M52 9l-5 6'/%3E%3C/g%3E%3C/svg%3E"); }
[data-h="a"] { --c: #5B391E; --t: #FCF9F0; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='70'%3E%3Cg fill='none' stroke='%23FCF9F0' stroke-opacity='.2' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M14 0c3 14-4 24 1 38s-2 20 0 32M14 30c7 3 12 10 13 18M62 0c-3 10 4 20 0 34s3 22 2 36M62 20c-8 2-13 9-14 15'/%3E%3C/g%3E%3Cg fill='%2326231F' fill-opacity='.55'%3E%3Cpath d='M34 12l5-2 3 4-2 5-5 0z'/%3E%3Cpath d='M76 46l4-1 2 3-2 4-4-1z'/%3E%3Cpath d='M30 58l3-1 2 2-1 3-3 0z'/%3E%3Ccircle cx='46' cy='30' r='1.4'/%3E%3Ccircle cx='8' cy='52' r='1.1'/%3E%3Ccircle cx='80' cy='14' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
[data-h="e"] { --c: #DCC7AB; --t: #4D2F19; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%235B391E' fill-opacity='.18'%3E%3Ccircle cx='4' cy='6' r='1'/%3E%3Ccircle cx='19' cy='3' r='.8'/%3E%3Ccircle cx='29' cy='14' r='1.1'/%3E%3Ccircle cx='11' cy='20' r='.8'/%3E%3Ccircle cx='24' cy='29' r='1'/%3E%3Ccircle cx='5' cy='31' r='.7'/%3E%3C/g%3E%3C/svg%3E"); }
[data-h="b"] { --c: #875833; --t: #FCF9F0; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='56'%3E%3Cg fill='%23B88A5C' fill-opacity='.28'%3E%3Cellipse cx='14' cy='12' rx='7' ry='4'/%3E%3Cellipse cx='58' cy='30' rx='9' ry='5'/%3E%3Cellipse cx='28' cy='46' rx='6' ry='3.5'/%3E%3C/g%3E%3Cpath d='M0 26h40M40 0v56M40 40h40' stroke='%23000' stroke-opacity='.1'/%3E%3C/svg%3E"); }
[data-h="c"] { --c: #B88A5C; --t: #2E1E12; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='52'%3E%3Cg fill='%23FCF9F0' fill-opacity='.24' stroke='%234D2F19' stroke-opacity='.2'%3E%3Cellipse cx='12' cy='12' rx='7' ry='5'/%3E%3Cellipse cx='50' cy='18' rx='5' ry='4'/%3E%3Cellipse cx='32' cy='40' rx='8' ry='5'/%3E%3Cellipse cx='64' cy='44' rx='4' ry='3'/%3E%3C/g%3E%3C/svg%3E"); }
[data-h="r"] { --c: #4A423B; --t: #F3E9DA; --tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cpath d='M0 20l22 6 14-12 30 8 24-6M18 60l8-20 22-4 8-14M60 60l6-14 24-4' fill='none' stroke='%23000' stroke-opacity='.22'/%3E%3C/svg%3E"); }

/* The logo: the round mark on its own, with the wordmark set beneath it in
   Libre Caslon Text, the closest match to the logo's own lettering, so its
   colour can follow the theme. The mark's drawn circle is slightly oval,
   leaving an uneven cream fringe in its crop: it's clipped to a true circle,
   scaled a touch to trim the fringe. */
.logo { display: grid; justify-items: center; gap: .32em; margin: 0; }
.logo-mark { display: block; overflow: hidden; border-radius: 50%; }
.logo-mark img { display: block; width: 100%; height: auto; transform: scale(1.04); }
.wordmark { color: var(--brand-word); font-family: var(--wordmark); font-weight: 400; letter-spacing: -.005em; }

/* The atmosphere behind each page (dark mode only: glow and grain). */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--atmosphere); pointer-events: none; }

/* Social links: small round icon buttons, shared by both pages. */
.social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.social a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: border-color .2s, color .2s, transform .2s; }
.social a:hover { border-color: var(--olive); color: var(--olive); transform: translateY(-1px); }
.social svg { display: block; width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

/* The acknowledgement: centred and balanced, between two gentle waves that
   fade out at their ends. */
.ack { display: grid; justify-items: center; max-width: 720px; margin: 0 auto; padding: 40px 24px 48px; text-align: center; }
.ack::before, .ack::after { content: ""; width: min(100%, 240px); height: 12px; background: var(--ochre);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cpath d='M0 6Q15 1 30 6T60 6T90 6T120 6T150 6T180 6T210 6T240 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'%3E%3Cpath d='M0 6Q15 1 30 6T60 6T90 6T120 6T150 6T180 6T210 6T240 6' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-composite: intersect; }
.ack::before { margin-bottom: 22px; }
.ack::after { margin-top: 22px; }
.ack p { max-width: 640px; margin: 0 !important; color: var(--muted); font: italic 16px/1.65 var(--serif); text-wrap: balance; }