/* Field guide: an almanac of one person. Warm paper and brown-black ink, a book serif throughout, small
   specimen labels, hairline rules, cards like pages from a field notebook, and a few pen details drawn
   in CSS (a hand-drawn underline under titles, ruled note pages). Area colors are muted pigment inks. */

:root[data-theme="fieldguide"] {
  --bone: #ede6d6; --bone-rgb: 237 230 214;
  --card: #f5f0e4; --card-rgb: 245 240 228;
  --ink: #27231d; --ink-rgb: 39 35 29;
  --ink-2: #4a443a; --muted: #675f50; --faint: #9c937f;
  --clay: #a1412a; --clay-rgb: 161 65 42; --deep: #7a3420;
  --sand: #ddd3bf; --tint: #e5dcc9;
  --values: #2f4e70; --goals: #5b4372; --drives: #94391f; --tastes: #873d58; --life: #3d5a36; --world: #6f5212;
  --green-bg: transparent; --green: #34502c; --green-line: #34502c; --red-bg: transparent; --red: #7f2f1c; --danger: #a1301f;
  --stage-1: #e6ddca; --stage-2: #cdc1a8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sys: var(--serif);
  --label: var(--serif);
  --label-size: 10.5px; --label-track: .14em;

  --mark-ink: var(--ink); --mark-accent: var(--clay); --mark-paper: var(--bone);

  --hair: rgb(var(--ink-rgb) / .2); --hair-2: rgb(var(--ink-rgb) / .1);
  --r-xl: 3px; --r-l: 2px; --r-m: 2px; --r-s: 2px; --r-btn: 3px;
  --sh-1: none; --sh-2: 0 1px 0 rgb(var(--ink-rgb) / .08); --sh-btn: none;
  --mat: var(--bone); --mat-card: var(--card);
  --grain: .3;
  --flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M1.5 5.2C10 2.4 17 6.8 27 4.6S45 2.2 55 4.4 71 6.4 78.5 2.8' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3Cpath d='M40 6.1c8-1.2 15-.6 21 .2' fill='none' stroke='%23000' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="fieldguide"] {
    --bone: #1a1915; --bone-rgb: 26 25 21;
    --card: #221f1a; --card-rgb: 34 31 26;
    --ink: #ece3cf; --ink-rgb: 236 227 207;
    --ink-2: #cbc1ac; --muted: #a09783; --faint: #6e6758;
    --clay: #e08c66; --clay-rgb: 224 140 102; --deep: #e9a685;
    --sand: #2e2a22; --tint: #26231d;
    --values: #9db7d6; --goals: #bba4d1; --drives: #e59a7e; --tastes: #d99db4; --life: #a7c497; --world: #d8b871;
    --green: #b8cf9f; --green-line: #b8cf9f; --red: #eba58b; --danger: #f08a74;
    --stage-1: #201e19; --stage-2: #0d0c0a;
    --hair: rgb(var(--ink-rgb) / .2); --hair-2: rgb(var(--ink-rgb) / .1);
    --grain: .16;
  }
}

/* ---------- type: one book serif, italic for voice, small caps for specimen labels ---------- */
[data-theme="fieldguide"] body { letter-spacing: 0; font-feature-settings: "kern", "liga", "onum"; }
[data-theme="fieldguide"] .lt { font-size: 31px; line-height: 1.12; font-style: italic; letter-spacing: -.01em; }
[data-theme="fieldguide"] .lt::after, [data-theme="fieldguide"] .rv-name::after, [data-theme="fieldguide"] .p-hero h1::after {
  content: ""; display: block; width: 74px; height: 8px; margin-top: 8px; background: var(--clay);
  -webkit-mask: var(--flourish) center / contain no-repeat; mask: var(--flourish) center / contain no-repeat;
}
[data-theme="fieldguide"] .center .lt::after, [data-theme="fieldguide"] .rv-name::after, [data-theme="fieldguide"] .p-hero h1::after { margin-left: auto; margin-right: auto; }
[data-theme="fieldguide"] .sub { font-size: 16px; line-height: 1.5; }
[data-theme="fieldguide"] .ar, [data-theme="fieldguide"] .ic .area, [data-theme="fieldguide"] .qcard .k, [data-theme="fieldguide"] .could .k,
[data-theme="fieldguide"] .demo, [data-theme="fieldguide"] .tag, [data-theme="fieldguide"] .wl-brand, [data-theme="fieldguide"] .count {
  font-family: var(--label); font-size: var(--label-size); font-weight: 600; font-style: normal; letter-spacing: var(--label-track); text-transform: uppercase;
}
/* section heads read like captions in a notebook, ruled off to the margin */
[data-theme="fieldguide"] .sec { display: flex; align-items: center; gap: 12px; font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 34px; }
[data-theme="fieldguide"] .sec::after { content: ""; flex: 1; height: .5px; background: var(--hair); }
[data-theme="fieldguide"] .sec-row .sec { flex: 1; margin-right: 12px; }
[data-theme="fieldguide"] .sec-row button { font: italic 400 15px var(--serif); color: var(--deep); }
/* area markers: a small drawn ring in the area's ink */
[data-theme="fieldguide"] .ar i, [data-theme="fieldguide"] .ic .area i, [data-theme="fieldguide"] .area-b i, [data-theme="fieldguide"] .qcard .qm i { background: transparent; box-shadow: inset 0 0 0 1.2px var(--c); width: 8px; height: 8px; }
[data-theme="fieldguide"] .ar, [data-theme="fieldguide"] .ic .area { color: var(--muted); }

/* ---------- controls ---------- */
[data-theme="fieldguide"] .btn { font: 600 17px/1 var(--serif); letter-spacing: .01em; }
[data-theme="fieldguide"] .btn2, [data-theme="fieldguide"] .pill, [data-theme="fieldguide"] .lnk { font-family: var(--serif); font-weight: 600; }
[data-theme="fieldguide"] .lnk { font-style: italic; font-weight: 400; color: var(--deep); }
[data-theme="fieldguide"] .nav-b { color: var(--deep); font-style: italic; }
[data-theme="fieldguide"] .tab { font: italic 400 11px var(--serif); }
[data-theme="fieldguide"] .card, [data-theme="fieldguide"] .group { background: var(--card); border: .5px solid var(--hair); }
[data-theme="fieldguide"] .field input, [data-theme="fieldguide"] .jfield input, [data-theme="fieldguide"] textarea { font-family: var(--serif); }
[data-theme="fieldguide"] .field { border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .5); border-radius: 0; padding-left: 2px; }
[data-theme="fieldguide"] .field .add { background: transparent; color: var(--deep); font-style: italic; font-weight: 400; }
[data-theme="fieldguide"] .jfield input { border: 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .5); border-radius: 0; padding: 0 2px; }
[data-theme="fieldguide"] .jfield label { font: italic 400 14px var(--serif); color: var(--muted); padding-left: 2px; }

/* ---------- welcome, reveal, invite: the plate alone, captioned ---------- */
[data-theme="fieldguide"] .wl-art { width: 236px; margin-top: 9vh; }
[data-theme="fieldguide"] .wl-brand { color: var(--ink-2); margin-bottom: 20px; letter-spacing: .3em; font-size: 11px; }
[data-theme="fieldguide"] .wl-h { font-size: 30px; line-height: 1.15; }
[data-theme="fieldguide"] .wl-h em { font-style: italic; color: var(--clay); }
[data-theme="fieldguide"] .wl-copy .wl-name { font-style: italic; letter-spacing: -.02em; }
[data-theme="fieldguide"] .rv-mark { width: 270px; }
[data-theme="fieldguide"] .rv-name { font-size: 44px; font-style: italic; margin-top: 18px; }
[data-theme="fieldguide"] .inv h1 { font-size: 30px; font-style: italic; line-height: 1.15; }
[data-theme="fieldguide"] .wv-t { font-size: 27px; font-style: italic; }
[data-theme="fieldguide"] .notice p { font-size: 18px; }

/* ---------- cards: a printed plate page (founder, 11 Nov: clean plate pages, never ruled like a notebook) ---------- */
[data-theme="fieldguide"] .ic { background: #f8f3e8; border: 1px solid rgb(var(--ink-rgb) / .22); border-radius: 0; padding: 20px 22px 18px; gap: 10px; box-shadow: 0 1px 0 rgb(31 27 22 / .05), 0 18px 30px -26px rgb(31 27 22 / .45); }
[data-theme="fieldguide"] .ic::after { content: ""; position: absolute; inset: 5px; border: .6px solid rgb(var(--ink-rgb) / .14); pointer-events: none; }
[data-theme="fieldguide"] .ic .area em, [data-theme="fieldguide"] .hc .ar em { font: italic 400 17px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--clay); }
[data-theme="fieldguide"] .ic .area i, [data-theme="fieldguide"] .hc .ar i { display: none; }
[data-theme="fieldguide"] .ic-n, [data-theme="fieldguide"] .hc-n { font: 600 10.5px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
[data-theme="fieldguide"] .ic-vig { display: block; width: 156px; margin: 6px auto 0; }
[data-theme="fieldguide"] .ic-vig svg, [data-theme="fieldguide"] .hc-vig svg { display: block; width: 100%; height: auto; }
[data-theme="fieldguide"] .ic h3 { font: 500 28px/1.08 var(--serif); letter-spacing: -.01em; margin-top: 8px; }
[data-theme="fieldguide"] .ic p { font-size: 16.5px; line-height: 1.42; }
[data-theme="fieldguide"] .ic .src { padding-top: 8px; border-top: .6px solid rgb(var(--ink-rgb) / .22); font: italic 400 13.5px/1.3 var(--serif); color: var(--muted); }
[data-theme="fieldguide"] .ic .src span { font-style: normal; font-size: 12px; }
[data-theme="fieldguide"] .ic.static { min-height: 0; }
[data-theme="fieldguide"] .deck { height: 520px; }
[data-theme="fieldguide"] .stamp { font: italic 400 22px/1 var(--serif); border-width: 1px; }
[data-theme="fieldguide"] .mini-ic h4 { font-size: 20px; line-height: 1.15; }
[data-theme="fieldguide"] .area-b { background: var(--card); border: .5px solid var(--hair); }
[data-theme="fieldguide"] .area-b b { font-size: 16px; }

/* ---------- home ---------- */
[data-theme="fieldguide"] .who b { font-size: 26px; font-style: italic; }
[data-theme="fieldguide"] .who .sharp { font-size: 15px; }
[data-theme="fieldguide"] .qcard { border-top: 1.5px solid var(--clay); }
[data-theme="fieldguide"] .qcard .qq { font-size: 23px; line-height: 1.2; font-style: italic; }
[data-theme="fieldguide"] .ed-mini .r b { font-size: 17px; }

/* ---------- pair: field notes ---------- */
[data-theme="fieldguide"] .p-marks .jm { width: 100%; max-width: 352px; height: auto; }
[data-theme="fieldguide"] .p-hero h1 { font-size: 34px; font-style: italic; }
[data-theme="fieldguide"] .p-hero .fn { font: 600 10.5px var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
[data-theme="fieldguide"] .note { font-size: 19px; line-height: 1.35; }
[data-theme="fieldguide"] .note b { font-size: 19px; }
[data-theme="fieldguide"] .pa { border-left: 0; padding: 16px 0; margin: 0; border-top: .5px solid var(--hair); }
[data-theme="fieldguide"] .pa + .pa { margin-top: 0; }
[data-theme="fieldguide"] .pa .top .ar { color: var(--c); }
[data-theme="fieldguide"] .pa p { font-size: 16.5px; line-height: 1.5; }
[data-theme="fieldguide"] .tag { font-size: 10px; }
[data-theme="fieldguide"] .could { border-top: 1.5px solid var(--clay); }
[data-theme="fieldguide"] .could p { font-size: 23px; line-height: 1.2; font-style: italic; }
[data-theme="fieldguide"] .could .ask p { font-size: 19px; }

/* ---------- compare ---------- */
[data-theme="fieldguide"] .inv-card h3 { font-size: 26px; font-style: italic; }
[data-theme="fieldguide"] .inv-card .meds .q { border-radius: 2px; font-style: italic; }
[data-theme="fieldguide"] .prow .t b { font-style: italic; }

/* ---------- P1: Home as field notes, Compare, the code, the reveal ---------- */
[data-theme="fieldguide"] .hm-hero { display: grid; grid-template-columns: 1fr 128px; align-items: end; gap: 14px; text-align: left; padding-top: 34px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); box-shadow: 0 3px 0 -2px var(--bone), 0 4px 0 -2px var(--ink); }
[data-theme="fieldguide"] .hm-mark { order: 2; width: 128px; }
[data-theme="fieldguide"] .hm-id { order: 1; }
[data-theme="fieldguide"] .hm-k { margin: 0; font: italic 400 17px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--muted); }
[data-theme="fieldguide"] .hm-name { font: 400 40px/.95 var(--serif); letter-spacing: -.015em; }
[data-theme="fieldguide"] .hm-line { font-size: 17px; max-width: none; }
[data-theme="fieldguide"] .hm-av { top: 2px; }
[data-theme="fieldguide"] .hm-q, [data-theme="fieldguide"] .hm-grow, [data-theme="fieldguide"] .hm-start, [data-theme="fieldguide"] .hm .ed-mini, [data-theme="fieldguide"] .cmp-hero, [data-theme="fieldguide"] .qr-card { background: transparent; box-shadow: none; border-radius: 0; border: 1px solid rgb(var(--ink-rgb) / .22); position: relative; }
[data-theme="fieldguide"] .cmp-hero::after, [data-theme="fieldguide"] .qr-card::after { content: ""; position: absolute; inset: 4px; border: .6px solid rgb(var(--ink-rgb) / .12); pointer-events: none; }
[data-theme="fieldguide"] .hm-q .sec { font: italic 400 15.5px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--clay); }
[data-theme="fieldguide"] .hq-t { font-style: italic; }
[data-theme="fieldguide"] .hc-w { width: 168px; }
[data-theme="fieldguide"] .hc { min-height: 196px; padding: 10px 12px 12px; border-radius: 0; background: #f8f3e8; border: 1px solid rgb(var(--ink-rgb) / .22); box-shadow: none; gap: 6px; }
[data-theme="fieldguide"] .hc-vig { display: block; width: 100%; max-width: 132px; margin: 2px 0 0; }
[data-theme="fieldguide"] .hc b { font: 400 19px/1.12 var(--serif); }
[data-theme="fieldguide"] .hc-f { font: italic 400 12.5px/1.25 var(--serif); }
[data-theme="fieldguide"] .sec-row .sec, [data-theme="fieldguide"] .hm-sec > .sec { font: italic 400 15.5px/1 var(--serif); letter-spacing: 0; text-transform: none; }
[data-theme="fieldguide"] .h-dots i { border-radius: 0; transform: rotate(45deg) scale(.8); }
[data-theme="fieldguide"] .h-dots i.on { background: var(--clay); transform: rotate(45deg); }
[data-theme="fieldguide"] .hl-c { border-radius: 2px; font-family: var(--serif); font-style: italic; }
[data-theme="fieldguide"] .cmp-them i, [data-theme="fieldguide"] .cmp-them.sm i { inset: 22% 4%; border-radius: 2px; }
[data-theme="fieldguide"] .cmp-me svg { width: 128px; }
[data-theme="fieldguide"] .cmp-two { gap: 18px; }
[data-theme="fieldguide"] .cmp-l, [data-theme="fieldguide"] .qr-h, [data-theme="fieldguide"] .rv-name { font-style: italic; }
[data-theme="fieldguide"] .p-names { font: 600 10.5px/1 var(--serif); letter-spacing: .14em; }
[data-theme="fieldguide"] .p-marks .jm2 { width: 100%; max-width: 352px; }
[data-theme="fieldguide"] .qr-who b { font-style: italic; }
[data-theme="fieldguide"] .rv-mark { width: 200px; }
[data-theme="fieldguide"] .rv-front, [data-theme="fieldguide"] .rv-back { border-radius: 0; background: #f8f3e8; border: 1px solid rgb(var(--ink-rgb) / .22); box-shadow: none; }
[data-theme="fieldguide"] .rv-front .ar { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="fieldguide"] .ic, :root[data-theme="fieldguide"] .hc, :root[data-theme="fieldguide"] .rv-front, :root[data-theme="fieldguide"] .rv-back { background: var(--card); }
}
/* the woodcuts are printed in dark ink; on the dark page they print light (red stays red) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="fieldguide"] .ic-vig svg, :root[data-theme="fieldguide"] .hc-vig svg { filter: invert(1) hue-rotate(180deg); }
}
/* quiz dots: printed ink, the chosen ring in clay */
[data-theme="fieldguide"] .qz-dots { --qz-dot: var(--ink); --qz-ring: rgb(var(--ink-rgb) / .3); --qz-on: var(--clay); }

/* the laptop layout reads this token (web/desk.css): the plate sits beside the name, so it stays plate-sized */
:root[data-theme="fieldguide"] { --d-hero-mark: 128px; }

/* ---------- FG1 (11 Nov): the finishes ---------- */
/* A reflection on Home or on its own page shows there is more behind it: two printed sheets under the plate page. */
[data-theme="fieldguide"] .ic.static { margin-bottom: 10px; box-shadow: 0 1px 0 rgb(31 27 22 / .05), 5px 5px 0 -1px var(--card), 5px 5px 0 0 rgb(var(--ink-rgb) / .17), 10px 10px 0 -1px var(--card), 10px 10px 0 0 rgb(var(--ink-rgb) / .1), 0 24px 30px -24px rgb(31 27 22 / .42); }
[data-theme="fieldguide"] .hc { box-shadow: 4px 4px 0 -1px var(--card), 4px 4px 0 0 rgb(var(--ink-rgb) / .15); }
[data-theme="fieldguide"] .ic.static .ic-seal { right: 16px; bottom: 12px; width: 64px; }

/* Drawn while we read: a faint proof of the plate, the inked plate printed over it from the top as sources are read. */
[data-theme="fieldguide"] .wv-print { display: grid; width: 200px; }
[data-theme="fieldguide"] .wv-print > div { grid-area: 1 / 1; }
[data-theme="fieldguide"] .wv-print svg { display: block; width: 100%; height: auto; }
[data-theme="fieldguide"] .wv-proof { opacity: .13; filter: grayscale(1); }
[data-theme="fieldguide"] .wv-ink { clip-path: inset(0 0 calc((1 - var(--wv-p, 0)) * 100%) 0); transition: clip-path 1.2s cubic-bezier(.55,0,.25,1); }

/* Two plates printed side by side, the shared peaks and the survey line between them last. */
[data-theme="fieldguide"] .pp-anim { animation: fg-print 1.3s cubic-bezier(.55,0,.25,1) .15s both; }
[data-theme="fieldguide"] .pp-anim .pp-red { animation: fg-ink .6s ease-out 1.35s both; }
[data-theme="fieldguide"] .pp-anim .pp-link { animation: fg-ink .7s ease-out 1.8s both; }
@keyframes fg-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fg-ink { from { opacity: 0; } to { opacity: 1; } }

/* Quiz dots grow in, small to large, each time a statement arrives. */
[data-theme="fieldguide"] .qz-d i { animation: qz-grow .5s cubic-bezier(.25,1,.5,1) calc(.06s + var(--s, 1) * .05s) both; }
@keyframes qz-grow { from { transform: scale(0); opacity: 0; } }

/* Contour plates open each section on Home: a small cut contour in clay before the caption. */
[data-theme="fieldguide"] {
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath stroke-width='1.3' d='M3 11.2C3.4 5.6 8.6 2.3 13.7 2.6c5.4.3 9.6 3.4 9.3 8.1-.3 4.9-5 7.2-10.4 6.9C7.2 17.3 2.7 15.6 3 11.2z'/%3E%3Cpath stroke-width='1.1' d='M7.2 10.8c.4-3.3 3.3-5.1 6.4-4.9 3.3.2 5.4 2.2 5.2 4.8-.2 2.8-2.9 4-6 3.8-3.4-.2-5.9-1.2-5.6-3.7z'/%3E%3Cpath stroke-width='1' d='M11 10.6c.2-1.2 1.3-1.9 2.5-1.8 1.2.1 2 .8 1.9 1.8-.1 1-1.1 1.5-2.3 1.4-1.3-.1-2.2-.5-2.1-1.4z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="fieldguide"] .hm-sec > .sec-row .sec::before, [data-theme="fieldguide"] .hm-sec > .sec::before {
  content: ""; flex: none; width: 24px; height: 18px; background: var(--clay); opacity: .85;
  -webkit-mask: var(--contour) center / contain no-repeat; mask: var(--contour) center / contain no-repeat;
}
[data-theme="fieldguide"] .hm-sec:nth-of-type(2n) > .sec-row .sec::before { transform: rotate(160deg) scaleX(.9); }
[data-theme="fieldguide"] .hm-sec:nth-of-type(3n) > .sec-row .sec::before { transform: rotate(-24deg) scale(.92); }
[data-theme="fieldguide"] .hm-sec > .sec-row .sec, [data-theme="fieldguide"] .hm-sec > .sec { gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  [data-theme="fieldguide"] .wv-ink { transition: none; }
  [data-theme="fieldguide"] .pp-anim, [data-theme="fieldguide"] .pp-anim .pp-red, [data-theme="fieldguide"] .pp-anim .pp-link, [data-theme="fieldguide"] .qz-d i { animation: none; }
}
/* "From" on a plate page: printed italic, the sources run on with a middle dot (no pills). */
:root[data-theme="fieldguide"] .ic .src span, :root[data-theme="fieldguide"] .hc-f.src span { height: auto; padding: 0; margin: 0; border-radius: 0; background: none; border: 0; box-shadow: none; color: var(--ink-2); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: inherit; line-height: inherit; }
:root[data-theme="fieldguide"] .ic .src span + span::before, :root[data-theme="fieldguide"] .hc-f.src span + span::before { content: "\00a0·\00a0"; color: var(--faint); }
:root[data-theme="fieldguide"] .ic .src span:first-child::before, :root[data-theme="fieldguide"] .hc-f.src span:first-child::before { content: "\00a0"; }
:root[data-theme="fieldguide"] .ic .src, :root[data-theme="fieldguide"] .hc-f.src { gap: 0; column-gap: 0; }
/* The row of small reflections on Home: two whole cards and a deliberate 28 px peek of the next (the dots stay). */
[data-theme="fieldguide"] .hc-w { width: calc((100% - 28px) / 2); max-width: none; }

/* Sketched in (founder, 11 Nov): the plate that opens a screen draws itself once per flow. Frame, sky lines,
   mountains, water, then the red sun and flag; about 1.6 s. Transforms, opacity and stroke offsets only. */
[data-theme="fieldguide"] svg.sk-on .sk-frame { animation: sk-line .5s cubic-bezier(.45,.05,.3,1) both; }
[data-theme="fieldguide"] svg.sk-on .sk-l { animation: sk-line .42s cubic-bezier(.45,.05,.3,1) calc(.22s + var(--i, 0) * .045s) both; }
[data-theme="fieldguide"] svg.sk-on .sk-ridge { transform-box: fill-box; transform-origin: 50% 100%; animation: sk-rise .5s cubic-bezier(.25,1,.5,1) .7s both; }
[data-theme="fieldguide"] svg.sk-on .sk-water { animation: sk-fade .45s ease-out .98s both; }
[data-theme="fieldguide"] svg.sk-on .sk-sun, [data-theme="fieldguide"] svg.sk-on .sk-flag { transform-box: fill-box; transform-origin: 50% 100%; animation: sk-last .4s cubic-bezier(.3,1.25,.5,1) 1.25s both; }
[data-theme="fieldguide"] svg.sk-on .sk-flag { animation-delay: 1.38s; }
@keyframes sk-line { from { stroke-dashoffset: 1; } }
@keyframes sk-rise { from { opacity: 0; transform: translateY(5px) scaleY(.6); } }
@keyframes sk-fade { from { opacity: 0; } }
@keyframes sk-last { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { [data-theme="fieldguide"] svg.sk-on * { animation: none !important; } }

/* L1, 11 Nov: the atlas zoom controls are printed like the rest: paper, a fine ink border, the look's control radius. */
:root[data-theme="fieldguide"] { --wm-ctl-bg: var(--card); --wm-ctl-border: 1px solid rgb(var(--ink-rgb) / .45); --wm-ctl-r: var(--r-btn); --wm-ctl-sh: none; }
:root[data-theme="fieldguide"] .wm-zoom { font-family: var(--serif); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* W4 (11 Nov): each reflection's contour map (web/topo.js) draws in the first time it is shown: contour by contour from
   the outside in, the terracotta accent last; about 1.1 s. Stroke offsets and opacity only. Reduced motion: complete. */
[data-theme="fieldguide"] svg.tp-on .tp-l { stroke-dasharray: 1; animation: tp-line .5s cubic-bezier(.45,.05,.3,1) calc(.08s + var(--i, 0) * .09s) both; }
[data-theme="fieldguide"] svg.tp-on .sc-land { transform-box: fill-box; transform-origin: 50% 100%; animation: sk-rise .45s cubic-bezier(.25,1,.5,1) .45s both; }
[data-theme="fieldguide"] svg.tp-on .sc-water { animation: sk-fade .4s ease-out .6s both; }
[data-theme="fieldguide"] svg.tp-on .tp-a { animation: sk-fade .3s ease-out .85s both; }
@keyframes tp-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { [data-theme="fieldguide"] svg.tp-on * { animation: none !important; } }
[data-theme="fieldguide"] .vr-go { border-radius: 2px; }
/* R2 (12 Nov): the ready bar as a printed slip: paper, a ruled ink border, a terracotta rule on the left. */
[data-theme="fieldguide"] .ready-bar { background: var(--bone); border-radius: 2px; box-shadow: 0 1px 0 rgb(var(--ink-rgb) / .08), inset 0 0 0 1px rgb(var(--ink-rgb) / .28); border-left: 3px solid var(--clay); }
[data-theme="fieldguide"] .ready-bar .wd-rt b { font-family: var(--serif); font-style: italic; }
[data-theme="fieldguide"] .pa-sec.s { color: var(--clay); }
[data-theme="fieldguide"] .hub-need .sec { color: var(--clay); }
[data-theme="fieldguide"] .hub-more-h { font-style: italic; }
[data-theme="fieldguide"] .hub-more-h + .hub-s .sec { margin-top: 10px; }
[data-theme="fieldguide"] .soft { color: var(--ink-2); font-style: italic; font-family: var(--serif); }
[data-theme="fieldguide"] .paused { font-style: italic; font-family: var(--serif); }
[data-theme="fieldguide"] .h-reader { border-radius: 2px; background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .22), inset 3px 0 0 var(--clay); font-family: var(--serif); font-style: italic; font-size: 15px; }

/* ---------- S2 (12 Nov): plate captions, quiet rows, readable notes ---------- */
/* The plate caption: one italic line under the scene, a short hairline above it like a printed plate. */
[data-theme="fieldguide"] .vig-note { display: block; margin: 7px auto 0; padding-top: 7px; max-width: 240px; font: italic 400 13.5px/1.3 var(--serif); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(rgb(var(--ink-rgb) / .3), rgb(var(--ink-rgb) / .3)) top center / 26px .7px no-repeat; }
[data-theme="fieldguide"] .hc .vig-note { margin: 4px 0 2px; padding-top: 5px; max-width: 132px; font-size: 12px; text-align: left; background-position: top left; background-size: 18px .7px; }
/* Home's areas: one unit; an area with no reflection yet shows a quiet dash. */
[data-theme="fieldguide"] .toc .toc-none { color: var(--faint); font-style: normal; }
/* A paused link: no status mark before the line (it read as a text cursor); nothing but remove looks tappable. */
[data-theme="fieldguide"] .pl.src .t span.paused { display: block; }

[data-theme="fieldguide"] .pl-calm { margin: 12px 0 2px; font: italic 400 14.5px/1.4 var(--serif); color: var(--muted); }
/* The deck's small note after a vote ("Values · a little deeper"): ink on paper, readable at a glance. */
[data-theme="fieldguide"] .cd-said { left: 50%; right: auto; width: max-content; max-width: calc(100% - 48px); transform: translate(-50%, 4px); padding: 6px 14px; background: var(--card); color: var(--ink); border: 1px solid rgb(var(--ink-rgb) / .22); font: italic 400 14px/1.2 var(--serif); }
[data-theme="fieldguide"] .cd-said.on { transform: translate(-50%, 0); }
[data-theme="fieldguide"] .toast { background: var(--ink); color: var(--bone); border-radius: 2px; font: italic 400 15px/1.3 var(--serif); box-shadow: 0 10px 24px -14px rgb(31 27 22 / .6); }
/* The edges screen: printed notes, not app cards. Square, a hairline inner rule, a numbered margin and the source in
   italic serif, so it reads like the plates around it. */
[data-theme="fieldguide"] .edges { counter-reset: edge; display: grid; gap: 14px; }
[data-theme="fieldguide"] .card.edge { counter-increment: edge; position: relative; border-radius: 0; background: #f8f3e8; border: 1px solid rgb(var(--ink-rgb) / .22); box-shadow: 0 1px 0 rgb(31 27 22 / .05); padding: 18px 20px 16px 52px; }
[data-theme="fieldguide"] .card.edge::before { content: counter(edge, upper-roman) "."; position: absolute; left: 18px; top: 21px; font: italic 400 16px/1 var(--serif); color: var(--clay); }
[data-theme="fieldguide"] .card.edge::after { content: ""; position: absolute; inset: 4px; border: .6px solid rgb(var(--ink-rgb) / .12); pointer-events: none; }
[data-theme="fieldguide"] .card.edge h4 { font: 400 21px/1.22 var(--serif); text-wrap: pretty; padding-right: 28px; }
[data-theme="fieldguide"] .card.edge .how { font: italic 400 13.5px/1.3 var(--serif); color: var(--muted); margin-top: 8px; }
[data-theme="fieldguide"] .lt, [data-theme="fieldguide"] h1, [data-theme="fieldguide"] h2 { text-wrap: balance; }