/* A PILF-opedia entry, round 2 (templates/entry.html, static/opedia-entry.js) [C build, Oct 20, branch site-opedia-entry].
   Tokens only (static/pilf.css › :root); a font size is one of DESIGN.md's type styles, named in the comment beside it. The editorial mode
   (Fraunces on plaster) is DESIGN.md's EditorialEntry [M Oct 17]; "more indulgent… photography and visuals" [M Oct 20, opedia-entry-whole]. */

/* ── the page: full width on plaster, the reading column at the measure ── */
.oe { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); margin-top: calc(var(--gutter) * -1); margin-bottom: calc(var(--space-8) * -1);
  background: var(--ed-plaster); color: var(--ink); padding-bottom: var(--space-8); }
.oe-kick, .oe-head, .oe-where, .oe-sec, .oe-pn, .oe-more { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.oe p { margin: 0; }
.oe-eb { margin: 0 0 var(--space-3); font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ed-ochre); }   /* eyebrow */
.oe-gap { max-width: var(--measure); margin: var(--space-2) auto 0; padding-inline: var(--gutter); color: var(--clay); font-size: var(--t-small); }   /* caption; review marks only */
.oe button { color: inherit; }

/* ── the top row ── */
.oe-kick { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); padding-block: var(--space-1); }
.oe-kick .ent-kick { color: var(--ink-66); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--tap); gap: var(--space-1); }
.oe-kick-r { display: flex; align-items: center; gap: var(--space-2); }
.oe-tq { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); color: var(--forest); }
.oe-tq .g { width: var(--space-6); height: auto; }
.oe .pn-top { margin: 0; }

/* ── the opener: full bleed, a dissolve every 4 s; its height comes from opedia-entry.js › fit (--oe-h) ── */
.oe-open { position: relative; width: 100%; height: var(--oe-h, calc(var(--measure) * .5)); overflow: hidden; background: var(--photo); }
.oe-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-dissolve) var(--ease-breeze); }
.oe-slide.on { opacity: 1; }
.oe-slide picture, .oe-slide img { display: block; width: 100%; height: 100%; }
.oe-slide img { object-fit: cover; object-position: var(--focus, 50% 50%); transform: scale(1.04); transition: transform calc(var(--dur-dissolve) * 3) var(--ease-breeze); }
.oe-slide.on img { transform: scale(1); }
.oe-stage { background: var(--ground); }
.oe-stage picture, .oe-stage img { display: block; width: 100%; height: 100%; }
.oe-stage img { object-fit: contain; }
.oe-open-c { position: absolute; right: var(--space-2); bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.oe-dots { display: flex; gap: var(--space-1); }
.oe-dots i { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-dot); background: var(--ground); opacity: .5; transition: opacity var(--dur-beat) var(--ease-settle); }
.oe-dots i.on { opacity: 1; }
.oe-pause { width: var(--tap); height: var(--tap); border: 0; padding: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.oe-pause svg { width: var(--space-6); height: var(--space-6); padding: var(--space-2); box-sizing: border-box; border-radius: var(--radius-dot); background: var(--ink-45); }
.oe-pause path { fill: none; stroke: var(--ground); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oe-pause .pl { display: none; fill: var(--ground); }
.oe-pause[aria-pressed="true"] .pa { display: none; }
.oe-pause[aria-pressed="true"] .pl { display: block; }
.oe-pause:focus-visible { outline: calc(var(--space-1) / 2) solid var(--focus-on-forest); outline-offset: calc(var(--space-1) / -2); }

/* ── the name and the description, at the very top of the text ── */
.oe-head { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.oe-name { margin: 0; font-family: var(--font-editorial); font-size: var(--t-display); line-height: .95; font-weight: 300; letter-spacing: -.02em; font-variation-settings: "SOFT" 0, "WONK" 0; text-wrap: balance; }   /* ed-display */
.oe-latin { margin-top: var(--space-1) !important; font-family: var(--font-editorial); font-size: var(--t-body); line-height: 1.3; font-weight: 300; color: var(--ink-75); font-variation-settings: "SOFT" 0, "WONK" 0; }   /* ed-latin */
.oe-desc { margin-top: var(--space-3) !important; font-size: var(--t-body); line-height: 1.55; font-weight: 300; }   /* body */
.oe-pick { margin-top: var(--space-2) !important; font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.25; font-weight: 300; font-style: italic; color: var(--ed-olive); font-variation-settings: "SOFT" 0, "WONK" 0; }   /* ed-hook */
.oe-nosell { margin-top: var(--space-3) !important; padding: var(--space-3) var(--space-4); background: var(--ed-putty); font-size: var(--t-body); line-height: 1.55; }   /* body-sm */

/* Ease and Presence with the small Matrix icon */
.oe-sc { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--ink-15); }
.oe-sc-c { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); color: var(--ink); text-decoration: none; font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }   /* label */
.oe-sc-c .mxi { color: var(--ink); display: block; }
.oe-sc-c .oe-sc-emb { width: var(--space-3); height: var(--space-3); margin-left: var(--space-1); vertical-align: middle; }   /* D1-07: the emblem after the name [M Oct 25] */
.oe-sc-k { display: inline-flex; align-items: center; min-height: var(--space-6); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-name) !important; font-size: var(--t-label) !important; line-height: 1.2; font-weight: 600; letter-spacing: .18em; color: var(--ink) !important; text-decoration: underline dotted var(--forest); text-underline-offset: var(--space-1); }   /* label */
.oe-sc-v { font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }   /* heading */
.oe-sc-v small { font-size: var(--t-small); color: var(--ink-66); font-weight: 400; letter-spacing: 0; }   /* caption */

/* ── the eight at a glance: one row that swipes ── */
.oe-gl-w { position: relative; padding-bottom: var(--space-3); max-width: calc(var(--measure) + var(--gutter) * 2); margin-inline: auto; }
.oe-gl { display: flex; gap: var(--space-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  padding: var(--space-1) var(--gutter) var(--space-2); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.oe-gl::-webkit-scrollbar { display: none; }
.oe-gl:focus-visible { outline: calc(var(--space-1) / 2) solid var(--focus); outline-offset: calc(var(--space-1) / -2); }
.oe-g { flex: 0 0 auto; width: calc((min(100vw, var(--measure) + var(--gutter) * 2) - var(--gutter) * 2 - var(--space-2) * 2) / 2.6); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--ground); color: var(--ink); text-decoration: none; border: 1px solid var(--ink-15); }
.oe-g:hover { border-color: var(--ink-30); }
.oe-g-i { color: var(--forest); height: var(--space-6); display: flex; align-items: center; }
.oe-g-i .g { width: var(--space-7); height: var(--space-6); }
.oe-gd { object-fit: contain; object-position: left center; opacity: .9; }
.oe-g-k { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-ochre); }   /* label */
.oe-g-v { font-size: var(--t-small); line-height: 1.4; font-weight: 400; }   /* caption */
/* the swipe cue: the side with more fades, and a small arrow nudges once (opedia-entry.js adds .nudge on first view, .end at the end) */
.oe-gl-w::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--space-7); pointer-events: none; background: linear-gradient(90deg, transparent, var(--ed-plaster)); transition: opacity var(--dur-beat) var(--ease-settle); }
.oe-gl-w.end::after { opacity: 0; }
.oe-gl-cue { position: absolute; right: var(--gutter); bottom: calc(var(--space-4) * -1); width: var(--space-6); height: var(--space-4); z-index: 1; color: var(--forest); pointer-events: none; transition: opacity var(--dur-beat) var(--ease-settle); }
.oe-gl-cue svg { width: 100%; height: 100%; display: block; }
.oe-gl-cue path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oe-gl-w.end .oe-gl-cue, .oe-gl-w.moved .oe-gl-cue { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .oe-gl-w.nudge .oe-gl-cue { animation: oe-cue calc(var(--dur-in) * 3) var(--ease-breeze) 2; }
  .oe-gl-w.nudge .oe-gl { animation: oe-nudge calc(var(--dur-in) * 3) var(--ease-settle) 1; }
}
@keyframes oe-cue { 50% { transform: translateX(var(--space-2)); } }
@keyframes oe-nudge { 40% { transform: translateX(calc(var(--space-6) * -1)); } }

/* ── where to find it ── */
.oe-where { padding-top: var(--space-6); }
.oe-where-b { display: flex; flex-direction: column; gap: var(--space-2); }
.oe-place { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--forest); color: var(--on-forest); text-decoration: none; }
.oe-place:hover { background: var(--forest-hover); color: var(--on-forest); text-decoration: none; }
.oe-place:focus-visible { outline: calc(var(--space-1) / 2) solid var(--focus); outline-offset: var(--space-1); }
.oe-place-n { font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }   /* heading */
.oe-place-s { display: block; margin-top: var(--space-1); font-size: var(--t-small); line-height: 1.4; font-weight: 400; opacity: .85; }   /* caption */
.oe-place svg { width: var(--space-6); height: var(--space-4); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oe-where-o { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.oe-where-b .textlink, .oe-tl { display: inline-flex; align-items: center; min-height: var(--tap); }
.oe-none { font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }   /* subheading */

/* ── sections ── */
.oe-sec { padding-top: var(--space-6); }
.oe-cs { border-top: 1px solid var(--ink-15); margin-top: var(--space-6); scroll-margin-top: var(--space-8); }
.oe-secs > .oe-cs:first-child { margin-top: var(--space-6); }
.oe-cs-h { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.oe-cs-h h2 { margin: 0; }
.oe-cs-g { color: var(--forest); display: flex; }
.oe-cs-g .g { width: var(--space-7); height: var(--space-6); }
.oe-lab { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none; cursor: pointer; margin: 0;
  font-family: var(--font-name) !important; font-size: var(--t-label) !important; line-height: 1.2; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ed-ochre) !important;
  text-decoration: underline dotted var(--forest); text-underline-offset: var(--space-1); }   /* eyebrow, the LadderWord's dotted underline */
.oe-lab-s { text-decoration: none; cursor: auto; }
.oe-spot { font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.25; font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; }   /* ed-hook */
.oe-read { margin-top: var(--space-2) !important; font-size: var(--t-body); line-height: 1.45; font-weight: 300; }   /* care-line */
.oe-worth { padding-left: var(--space-3); border-left: var(--space-1) solid var(--clay); }
.oe-study { margin-top: var(--space-3) !important; font-size: var(--t-body); line-height: 1.55; font-weight: 300; color: var(--ink-75); }   /* body-sm */
.oe-study em { font-style: italic; }
.oe-steps { margin: var(--space-3) 0 0; padding-left: var(--space-6); font-size: var(--t-body); line-height: 1.55; font-weight: 300; color: var(--ink-75); }   /* body-sm */
.oe-steps li + li { margin-top: var(--space-2); }

/* Scale's three parts, and Look's */
.oe-sc3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--space-2) 0 var(--space-3); background: var(--ink-15); border: 1px solid var(--ink-15); }
.oe-sc3-i { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); padding: var(--space-3); border: 0; background: var(--ground); text-align: left; cursor: pointer; min-width: 0; }
.oe-sc3-i:hover { background: var(--photo); }
.oe-sc3-k { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-ochre); text-decoration: underline dotted var(--forest); text-underline-offset: var(--space-1); }   /* label */
.oe-sc3-i b { font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }   /* name-card */
.oe-sc3-d { font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-66); }   /* caption */

/* Air's two facts, the chores, the pests */
.oe-kv { margin: var(--space-2) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink-15); border: 1px solid var(--ink-15); }
.oe-kv > div { background: var(--ground); padding: var(--space-3); }
.oe-kv dt { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-ochre); }   /* label */
.oe-kv dd { margin: var(--space-1) 0 0; font-family: var(--font-name); font-size: var(--t-ed); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }   /* subheading */
.oe-kv-s { grid-template-columns: 1fr; margin-top: var(--space-3); }
.oe-kv-s dd { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.4; font-weight: 400; letter-spacing: 0; }   /* caption */
.oe-chips { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.oe-chips li { padding: var(--space-1) var(--space-2); background: var(--ground); border: 1px solid var(--ink-15); font-size: var(--t-small); line-height: 1.4; }   /* caption */
.oe-chores { list-style: none; margin: var(--space-2) 0 0; padding: 0; border-top: 1px solid var(--ink-15); }
.oe-chores li { display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--ink-15); font-size: var(--t-body); line-height: 1.55; font-weight: 300; }   /* body-sm */
.oe-chores b { font-family: var(--font-name); font-weight: 600; white-space: nowrap; }
.oe-leaf { margin: var(--space-4) calc(var(--gutter) * -1) 0; }
.oe-leaf img { display: block; width: 100%; height: auto; }

/* Safety's sources */
.oe-src { margin-top: var(--space-4); padding: var(--space-4); background: var(--ground); border: 1px solid var(--ink-15); }
.oe-src .oe-eb { margin-bottom: var(--space-2); }
.oe-src table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.4; }   /* caption */
.oe-src td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--ink-15); vertical-align: top; }
.oe-src td:first-child { font-family: var(--font-name); font-weight: 600; white-space: nowrap; }
.oe-src td:last-child { text-align: right; padding-right: 0; }
.oe-src a { color: var(--ink); text-decoration-color: var(--ink-30); text-underline-offset: var(--space-1); }
.oe-why { margin-top: var(--space-2) !important; font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); }   /* caption */
.oe-why b { font-family: var(--font-name); font-weight: 600; color: var(--ink); }

/* Troubleshooting */
.oe-qs { margin-top: var(--space-2); }
.oe-tr details.row { border-bottom: 1px solid var(--ink-15); }

/* ── Plant Facts v3 ── */
.oe-pf { padding: var(--space-3) var(--space-3) var(--space-4); background: var(--ground); border: 1px solid var(--ink); }
.oe-pf-h { margin: 0; font-family: var(--font-name); font-size: var(--t-num); line-height: 1.05; font-weight: 600; letter-spacing: -.025em; }   /* name-h1 */
.oe-pf-sv { margin-top: var(--space-1) !important; font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); }   /* caption */
.oe-pf-sv b { font-family: var(--font-name); font-weight: 600; color: var(--ink); }
.oe-pf-r8 { height: var(--space-2); background: var(--ink); margin-block: var(--space-2); }
.oe-pf-r4 { height: var(--space-1); background: var(--ink); margin-block: var(--space-3) var(--space-2); }
.oe-pf-tot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--ink-30); }
.oe-pf-tot button { padding: 0; border: 0; background: none; cursor: pointer; min-height: var(--tap); font-family: var(--font-name) !important; font-size: var(--t-title) !important; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; text-decoration: underline dotted var(--forest); text-underline-offset: var(--space-1); }   /* heading */
.oe-pf-n { font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }   /* heading */
.oe-pf-n small { font-size: var(--t-small); color: var(--ink-66); font-weight: 400; }
.oe-pf-w1 { font-size: var(--t-ed); }   /* subheading */
.oe-pf-d { flex-basis: 100%; font-size: var(--t-small); line-height: 1.4; color: var(--ink-66); }   /* caption */
.oe-pr { padding-block: var(--space-2) var(--space-1); border-bottom: 1px solid var(--ink-15); }
.oe-pr-n { display: inline-flex; align-items: center; min-height: var(--space-6); padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--font-name) !important; font-size: var(--t-strong) !important; line-height: 1.2; font-weight: 600; }   /* name-card */
.oe-pr-n::after { content: ""; display: inline-block; width: var(--space-1); height: var(--space-1); margin-left: var(--space-2); border-right: 1px solid var(--ink-45); border-bottom: 1px solid var(--ink-45); transform: rotate(-45deg); }
.oe-bar { position: relative; height: var(--space-4); margin-block: var(--space-1); background: var(--ink-05); box-shadow: inset 0 0 0 1px var(--ink-15); cursor: crosshair; touch-action: pan-y; }
.oe-bar-t { position: absolute; inset: 0; overflow: hidden; }
.oe-bar-t i:not(.oe-band) { position: absolute; top: calc(var(--space-1) / 2); bottom: calc(var(--space-1) / 2); width: 1px; background: var(--ink-30); transform: translateX(-50%); transition: background var(--dur-tap); }
.oe-bar-t i.hi { background: var(--ink); top: 0; bottom: 0; width: calc(var(--space-1) / 2); }
.oe-band { position: absolute; top: 0; bottom: 0; left: calc(var(--b0) - var(--space-4)); width: calc(var(--b1) - var(--b0) + var(--space-4) * 2);
  background: linear-gradient(90deg, transparent, var(--forest) var(--space-4), var(--forest) calc(100% - var(--space-4)), transparent); opacity: .88; pointer-events: none; }
.oe-mark { position: absolute; top: calc(var(--space-1) * -1); bottom: calc(var(--space-1) * -1); left: var(--v); width: var(--space-1); background: var(--forest); transform: translateX(-50%); pointer-events: none; }
.oe-tip { position: absolute; top: calc(100% + var(--space-1)); left: var(--tx, 50%); transform: translateX(-50%); padding: var(--space-1) var(--space-2); background: var(--ink); color: var(--ground);
  font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-out) var(--ease-settle); z-index: 2; }   /* label */
.oe-tip.on { opacity: 1; }
.oe-ends { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-66); }   /* label */
.oe-ends span:nth-child(2) { text-align: center; }
.oe-ends span:last-child { text-align: right; }
.oe-pf-sf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); padding-top: var(--space-2); }
.oe-pf-sf span { display: block; font-size: var(--t-small); color: var(--ink-66); }   /* caption */
.oe-pf-sf b { font-family: var(--font-name); font-size: var(--t-strong); font-weight: 600; }   /* name-card */
.oe-pf-f { font-size: var(--t-small); line-height: 1.4; color: var(--ink-75); }   /* caption */

/* ── the drawing card: forest like the tag's back, the fun fact on it ── */
.oe-dc { margin-top: var(--space-7); padding: var(--space-7) var(--gutter); background: var(--forest); color: var(--on-forest); text-align: center; }
.oe-dc-d { width: min(70%, calc(var(--measure) * .56)); margin: 0 auto var(--space-6); color: var(--on-forest); }
.oe-dc-d svg { display: block; width: 100%; height: auto; }
.js .oe-dc:not(.play) .pdd { animation: none; }
.oe-dc-k { max-width: var(--measure); margin: 0 auto var(--space-3); font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }   /* eyebrow */
.oe-dc-k::before, .oe-dc-k::after { content: ""; display: inline-block; vertical-align: middle; width: var(--space-6); height: 1px; margin-inline: var(--space-3); background: currentColor; opacity: .5; }
.oe-dc-t { max-width: var(--measure); margin: 0 auto !important; font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.25; font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; text-wrap: balance; }   /* ed-hook; centered, so every line even (pretty left "It’s still" short) [C Oct 26] */
@media (prefers-reduced-motion: no-preference) {
  .js .oe-dc .oe-dc-k, .js .oe-dc .oe-dc-t { opacity: 0; transform: translateY(var(--space-2)); transition: opacity var(--dur-in) var(--ease-settle), transform var(--dur-in) var(--ease-settle); }
  .js .oe-dc.done .oe-dc-k, .js .oe-dc.done .oe-dc-t { opacity: 1; transform: none; }
  .js .oe-dc.done .oe-dc-t { transition-delay: var(--dur-beat); }
}

/* ── Designer tips: photo-led ── */
.oe-dt-lead { margin-top: var(--space-2) !important; font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.25; font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; }   /* ed-hook */
.oe-tip-i { margin: var(--space-6) 0 0; }
.oe-tip-p { margin-inline: calc(var(--gutter) * -1); aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo); }
.oe-tip-p picture, .oe-tip-p img { display: block; width: 100%; height: 100%; }
.oe-tip-p img { object-fit: cover; }
.oe-tip-i figcaption { display: block; padding-top: var(--space-3); }
.oe-tip-i figcaption .oe-eb { display: block; margin-bottom: var(--space-1); }
.oe-tip-v { display: block; font-size: var(--t-body); line-height: 1.45; font-weight: 300; }   /* care-line */
.oe-tip-i.nopic figcaption { padding: var(--space-3) var(--space-4); background: var(--ground); border-left: var(--space-1) solid var(--ed-olive); }

/* ── the Matrix (the purchase page's, drawn like the tag) ── */
.oe-mx { border-top: 1px solid var(--ink-15); margin-top: var(--space-6); scroll-margin-top: var(--space-8); }
.oe-mx-sc { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: var(--space-4); }
.oe-mx-sc > div + div { border-left: 1px solid var(--ink-30); padding-left: var(--space-3); }
.oe-mx-d { color: var(--ink-75); font-size: var(--t-small); line-height: 1.4; }   /* caption */
.oe-map { display: block; width: 100%; max-width: calc(var(--measure) * .75); margin-inline: auto; height: auto; font-family: var(--font-name); overflow: visible; }
.oe-map .qr { fill: transparent; }
.oe-map .qr.on { fill: var(--ink-05); }
.oe-map .frame { fill: none; stroke: var(--ink-30); }
.oe-map .mid { stroke: var(--ink-30); }
.oe-map .cu { color: var(--ink-30); }
.oe-map .cu.on { color: var(--ink); }
.oe-map .cw { fill: var(--ink-45); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; }   /* tag-caption, in the map's units */
.oe-map .cu.on .cw { fill: var(--ink); }
.oe-map .axt { fill: var(--ink); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; }   /* tag-caption */
.oe-map .axe { fill: var(--ink-66); font-size: var(--t-label); font-weight: 400; letter-spacing: .18em; }   /* tag-caption */
.oe-map .dc { stroke: var(--ed-plaster); stroke-width: 1; }
.oe-map .c-forever { fill: var(--corner-forever); }
.oe-map .c-friend { fill: var(--corner-quiet-ed); }
.oe-map .c-fling { fill: var(--corner-quiet-ed); }
.oe-map .c-foe { fill: var(--corner-foe); }
.oe-map .dc.me { stroke: var(--ink); stroke-width: 1.5; }
.oe-map .ring { fill: none; stroke: var(--ink); stroke-width: 1; }
.oe-map .hit { fill: transparent; }
.oe-map a:hover .dc { stroke: var(--ink); }
.oe-cn { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.oe-cn-e { width: var(--space-6); height: var(--space-6); flex: none; color: var(--ink); }
.oe-cn-w { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }   /* eyebrow */
.oe-cn-l { color: var(--ink-75); font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.25; font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; }   /* ed-hook */
.oe-q { margin-top: var(--space-3) !important; font-family: var(--font-editorial); font-size: var(--t-body); line-height: 1.3; font-weight: 300; font-style: italic; font-variation-settings: "SOFT" 0, "WONK" 0; }   /* ed-latin */

/* ── plant to plant and More like it, on plaster ── */
.oe-pn { margin-top: var(--space-7); }
.oe-more { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }

/* ── the definition box [M Oct 20: "the site turns down and fades out a bit, and the focus goes on this soothing box that pops up"] ── */
.defbox { width: calc(100vw - var(--gutter) * 2); max-width: var(--measure); max-height: calc(100svh - var(--space-8)); padding: 0; border: 1px solid var(--ink-15); border-radius: var(--radius-none);
  background: var(--ground); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.defbox::backdrop { background: var(--ink-45); -webkit-backdrop-filter: blur(var(--space-1)); backdrop-filter: blur(var(--space-1)); }
.defbox-top { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-2) 0 var(--space-4); background: var(--ground); }
.defbox-h { margin: 0; font-family: var(--font-name); font-size: var(--t-title); line-height: 1.2; font-weight: 600; letter-spacing: -.015em; }   /* heading */
.defbox-x { width: var(--tap); height: var(--tap); flex: none; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.defbox-x svg { width: var(--space-4); height: var(--space-4); }
.defbox-x path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.defbox-b { padding: var(--space-2) var(--space-4) var(--space-4); }
.defbox-b > * + * { margin-top: var(--space-3); }
.defbox-p { margin: 0; font-size: var(--t-body); line-height: 1.55; font-weight: 300; }   /* body-sm */
.defbox-b .oe-more-l { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }   /* button-label: caps like the other go-to links [M Oct 20] */
.defbox-b .oe-pf-sc .oe-sc-v { font-size: var(--t-display); line-height: 1; letter-spacing: -.03em; }   /* numeral */
@media (prefers-reduced-motion: no-preference) {
  .defbox[open] { animation: oe-rise var(--dur-in) var(--ease-settle); }
  .defbox[open]::backdrop { animation: oe-dim var(--dur-in) var(--ease-settle); }
}
@keyframes oe-rise { from { opacity: 0; transform: translateY(var(--space-4)); } }
@keyframes oe-dim { from { opacity: 0; } }
html.oe-lock { overflow: hidden; }

/* the ladders inside it */
.oe-lad { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-15); }
.oe-lad li { display: grid; grid-template-columns: var(--space-7) minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--ink-15); color: var(--ink-66);
  font-size: var(--t-small); line-height: 1.4; }   /* caption */
.oe-lad b { display: block; font-family: var(--font-name); font-size: var(--t-strong); font-weight: 600; color: var(--ink-75); }   /* name-card */
.oe-lad-d { display: block; }
.oe-lad-g { display: flex; justify-content: center; color: var(--ink-30); }
.oe-lad-g .g { width: var(--space-7); height: var(--space-6); }
.oe-lad-dot { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-dot); border: 1px solid var(--ink-30); display: block; }
.oe-lad li.here { background: var(--ed-plaster); color: var(--ink); box-shadow: inset var(--space-1) 0 0 var(--forest); }
.oe-lad li.here b { color: var(--ink); }
.oe-lad li.here .oe-lad-g { color: var(--forest); }
.oe-lad li.here .oe-lad-dot { background: var(--forest); border-color: var(--forest); }
.oe-lad li.tol { box-shadow: inset var(--space-1) 0 0 var(--sage); color: var(--ink-75); }
.oe-lad li.tol .oe-lad-g { color: var(--sage-dk); }
.oe-lad-me { font-family: var(--font-name); font-size: var(--t-label); line-height: 1.2; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--forest); display: block; margin-bottom: var(--space-1); }   /* label */

/* ── desktop: the photo and the name side by side, the reading column under them ── */
@media (min-width: 900px) {
  .oe-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; max-width: var(--grid); margin-inline: auto; }
  .oe-open { height: var(--oe-h, calc(100svh - var(--space-8) * 2)); min-height: calc(var(--measure) * .75); }
  .oe-head { align-self: center; max-width: none; padding: var(--space-6) var(--space-7); box-sizing: border-box; }
  .oe-name { font-size: var(--t-display); }
  .oe-gl-w { max-width: var(--grid); }
  .oe-gl { padding-top: var(--space-4); }
  .oe-g { width: calc((min(100vw, var(--grid)) - var(--gutter) * 2 - var(--space-2) * 7) / 8); }
  .oe-gl-w::after, .oe-gl-cue { display: none; }
  .oe-tip-p, .oe-leaf { margin-inline: 0; }
  .oe-dc-d { width: calc(var(--measure) * .56); }
}
@media (hover: hover) and (pointer: fine) {
  .oe-g { transition: border-color var(--dur-tap); }
}

/* audit 1022 `no-photo-5` [C Oct 22]: the no-photo opener, the leaf print centered on the ground */
.oe-nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); color: var(--ink); }
.oe-nophoto .g-leaf { width: 30%; max-width: 160px; height: auto; }

/* brand-1023 ── the entry on the brand macros (templates/_brand.html) [M Oct 23 owner2-38, 42, 47, 51, 53, 54; C brand-1023]. Tokens only */
.oe-nmb { display: flex; align-items: stretch; gap: var(--space-3); }
.oe-nmb > div { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.oe-nmb .b-dr-name { height: auto; width: auto; max-width: 40%; }   /* as tall as the name and Latin together (stretched), as wide as its own aspect */
.oe-nmb .b-dr-name svg { width: 100%; height: 100%; }
.oe-head .b-one { margin-top: var(--space-3); }
.oe-head .b-ep { margin-top: var(--space-3); flex: 1 1 auto; }
.oe-gl-w { padding-block: var(--space-4); }
.oe-care { display: flex; flex-direction: column; }
.oe-care .b-cs { margin-top: 0; padding-top: var(--space-3); padding-bottom: var(--space-2); border-top: 1px solid var(--ink-15); }
.oe-care .b-cs:first-child { border-top: 0; }
.oe-skim { margin: var(--space-1) 0 0; }   /* the fold itself: static/pilf.css › .fold (one control site-wide, D2-02) */
.oe-qs-all > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); font-family: var(--font-name); font-weight: 600; color: var(--forest); }   /* D2-05 */
.oe-qs-all > summary::-webkit-details-marker { display: none; }
.oe-qs-all > summary .plus { font-size: var(--t-ed); font-weight: 300; color: var(--ink-45); transition: transform var(--dur-out) var(--ease-settle); }
.oe-qs-all[open] > summary .plus { transform: rotate(45deg); }
.oe-fold[open] > summary .oe-fold-s::before { content: ""; }
.oe-fold-b { padding-bottom: var(--space-3); }
/* the safety sources as numbered footnotes [M Oct 23 owner2-51] */
.oe-fn { margin: var(--space-4) 0 0; padding-left: var(--space-4); font-size: var(--t-small); line-height: 1.4; font-weight: 400; color: var(--ink-66); }   /* caption */
.oe-fn li + li { margin-top: var(--space-1); }
.oe-fn a { color: inherit; }
.oe-mx .b-ep, .oe-mx .b-mx, .oe-mx .b-cn, .oe-mx .b-one { margin-top: var(--space-4); }
.oe-care, .oe-gl-w { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.oe-sc { grid-template-columns: auto minmax(0, 1fr); }
.oe-gl-w::after { display: none; }
.oe-pf-all > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); font-family: var(--font-name); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }   /* toggle-label */
.oe-pf-all > summary::-webkit-details-marker { display: none; }
.oe-pf-all > summary .plus { font-size: var(--t-ed); font-weight: 300; transition: transform var(--dur-out) var(--ease-settle); }
.oe-pf-all[open] > summary .plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .oe-pf-all > summary .plus { transition: none; } }
/* the opener slides [M Oct 23 owner2-39, owner2-41] */
.oe-track { display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.oe-track::-webkit-scrollbar { display: none; }
.oe-track .oe-slide { position: relative; inset: auto; flex: 0 0 100%; opacity: 1; scroll-snap-align: start; scroll-snap-stop: always; transition: none; }
.oe-track .oe-slide img { transform: none; transition: none; }
/* the end slide holds the one drawing card, which turns ink-to-forest itself (pilf.css › .b-dc); no forest frame round it (D1-32/33 [M Oct 25]; this
   rule, loading after pilf.css, had kept the Oct 23 forest box behind the card) [the 1026 ledger] */
.oe-end { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 0; background: none; }
@media (prefers-reduced-motion: reduce) { .oe-track { scroll-behavior: auto; } }
/* D2-03's tap cue on the glance words was a dotted underline; off [M Oct 26 3:33 AM: "You don't need to dotted underline EVERY instance… exercise some judgment"]: the rows sit right under the glance, and the purchase page's glance has none */

/* PILF Plant Facts as a sheet, opened from its branded mark on the entry and the purchase page [D2-10, D2-11, D2-12, M Oct 25; P-mark, M Oct 26]
   (templates/_plantfacts.html). Tokens only. The mark: a small label tile, the glyph, the coined name and its one line, a plus */
.pur-pf { padding-top: var(--space-4); }
dialog.pf-dlg { width: min(100% - var(--gutter) * 2, var(--measure)); max-width: var(--measure); max-height: calc(100svh - var(--space-6) * 2); padding: 0; border: 0; background: transparent; overflow: auto; overscroll-behavior: contain; }
dialog.pf-dlg::backdrop { background: rgba(29, 33, 30, .45); }
dialog.pf-dlg[open] { animation: s-in var(--dur-in) var(--ease-settle); }
@media (prefers-reduced-motion: reduce) { dialog.pf-dlg[open] { animation: none; } }
.pf-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pf-top .oe-pf-h { display: flex; align-items: center; gap: var(--space-2); }
.pf-top .oe-pf-h { font-size: var(--t-num); }
.pf-x { width: var(--tap); height: var(--tap); flex: none; border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; }
.pf-x svg { width: var(--gutter); height: var(--gutter); }
.pf-gn { font-family: var(--font-name); font-size: var(--t-ed); font-weight: 600; }
.pf-rh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.pf-w { font-family: var(--font-name); font-size: var(--t-small); font-weight: 600; color: var(--ink); text-align: right; }
.pf-plain::after { display: none; }
.pf-rng { width: var(--tap); height: var(--space-6); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--ink-45); cursor: pointer; }
.pf-rng svg { width: var(--gutter); height: auto; }
.pf-rng[aria-expanded="true"] { color: var(--forest); }
.pf-rb { padding-bottom: var(--space-1); }
.pf-med { position: absolute; top: 0; bottom: 0; left: var(--m); width: 0; border-left: 1px dashed var(--ink-66); }
.pf-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--t-small); color: var(--ink-66); }
.pf-key { display: inline-flex; align-items: center; gap: var(--space-1); }
.pf-key i { display: inline-block; width: var(--space-1); height: var(--space-3); background: var(--forest); }
.pf-key i.pf-key-m { width: 0; background: none; border-left: 1px dashed var(--ink-66); }

/* Designer tips as a swipe row of three cards [D2-19, M Oct 25]; a card with no still yet shows its wireframe: the plant's drawing on limewash
   (D2-21). Native scrolling with snap; the next card peeks at the edge. Tokens only */
.oe-dt-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--space-3); margin-top: var(--space-4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.oe-dt-row::-webkit-scrollbar { display: none; }
/* a narrow peek, inside pilf.css's edge fade, so the next card shows as an edge, not a word cut mid-glyph (design review, entry; the blind check)
   [C Oct 26, 1026 Site]; a computer shows all three */
@media (max-width: 899px) { .oe-dt-row { grid-auto-columns: calc(100% - var(--space-6)); } }
.oe-dt-c { margin: 0; scroll-snap-align: start; display: grid; align-content: start; gap: var(--space-3); min-width: 0; }
.oe-dt-p { aspect-ratio: 4 / 5; overflow: hidden; background: var(--photo); }
.oe-dt-p picture, .oe-dt-p img { display: block; width: 100%; height: 100%; }
.oe-dt-p img { object-fit: cover; }
.oe-dt-wf { display: grid; place-items: center; align-content: center; gap: var(--space-2); background: var(--ed-plaster); color: var(--ink-45); }
.oe-dt-dr { width: auto; height: calc(var(--space-8) * 1.5); opacity: .5; }
.oe-dt-c figcaption { display: grid; gap: var(--space-1); }
@media (min-width: 900px) { .oe-dt-row { grid-auto-columns: calc((100% - var(--space-3) * 2) / 3); margin-inline: 0; padding-inline: 0; overflow: visible; } }

/* the Plant Facts mark, small and quiet [M Oct 26 3:41 AM]: the glyph and the name in muted ink, no box */
.pf-open { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; background: none; border: 0; color: var(--ink-66); cursor: pointer; font: inherit; }
@media (hover: hover) and (pointer: fine) { .pf-open:hover { color: var(--ink); } }

/* the type budget on the PILF-opedia entry and its cards [M Oct 26 3:44 AM]: the eight roles, plus the entry's one display (the name in Fraunces,
   "where we indulge", D2-15). Was 35 styles (measured on /plants/snake-plant/) */
.oe .oe-desc, .oe .oe-study, .oe .oe-skim, .oe .oe-read { font-family: var(--font-body); font-size: var(--t-body); line-height: 1.5; font-weight: 300; }
.oe .oe-latin, .oe .oe-q, .oe .oe-dc-t, .oe .oe-dt-lead { font-family: var(--font-editorial); font-size: var(--t-ed); line-height: 1.3; font-weight: 300; font-style: italic; }
.oe .pn-n, .oe .pn-n + span, .oe .oe-fn, .oe .oe-fn li, .oe .oe-fold-b li, .oe .oe-formerly, .oe .pn-ctx, .oe .oe-sc3-d, .oe .oe-why, .oe .oe-why li, .oe-pests li, .pc-pr, .b-ep-v small, .pc-ease small { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.4; font-weight: 400; letter-spacing: 0; text-transform: none; }
.oe .oe-why b, .oe .oe-cs dd, .oe dd, .oe-cs b, .oe details > summary, .oe-ts-all, .pc-nm, .pp-row .pc-nm, .pc-ease b { font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.3; font-weight: 600; letter-spacing: 0; text-transform: none; }
.oe .oe-dc-k, .oe .oe-sc3-k, .oe .oe-kv dt, .oe .oe-eb, .oe .oe-sc-c span, .b-sh { font-family: var(--font-name); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--t-track); text-transform: uppercase; }
.b-ep-compact .b-ep-v { font-size: var(--t-title); }

/* designer tips, researched (D2-20, D2-21): the placement verdict as the card's lead in strong, the line under it in small [C] */
.oe .oe-tip-l { display: block; font-family: var(--font-name); font-size: var(--t-strong); line-height: 1.3; font-weight: 600; text-wrap: balance; }
.oe .oe-tip-s { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.45; font-weight: 400; color: var(--ink-75); }
.oe-lead { font-weight: 500; color: var(--ink); }   /* D2-08: a care paragraph's bold lead-in */

/* D2-22: the Designer tips' one lead still, full column width, above the swipe row of tip cards */
.oe-dt-hero { margin: 0 0 var(--space-4); aspect-ratio: 4 / 3; overflow: hidden; background: var(--photo); }
.oe-dt-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the name on one line where it can be [taste.md 1; the blind audit: "Snake / Plant", "Peace / Lily" stacked at 48 px]: the display size, stepped down by the
   name's length (--nm, its characters) to fit the column beside the drawing, never under the 32 px name role; a long name still wraps, balanced */
@media (max-width: 899px) {
  .oe-name { font-size: clamp(var(--t-num), calc((100vw - 2 * var(--gutter)) * .62 / (var(--nm, 10) * .5)), var(--t-display)); }
  /* snapped down to a --space-1 step, so the fitted size is 32 (the name role) or a display step (36-48), never a size between the roles (the page lint's
     type check failed 18 entries at 33-35.75 px, Oct 26 11:45 PM) [C]; a browser without round() keeps the line above */
  .oe-name { font-size: round(down, clamp(var(--t-num), calc((100vw - 2 * var(--gutter)) * .62 / (var(--nm, 10) * .5)), var(--t-display)), var(--space-1)); }
}
/* D1-04: the top is the glance, one row: the corner, then EASE and PRESENCE side by side, no meanings (the full explanation is the Matrix block's) */
.oe-sc { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.oe-sc .b-ep-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.oe-sc .b-ep-compact .b-ep-c + .b-ep-c { border-top: 0; margin-top: 0; border-left: 1px solid var(--ink-30); padding: 0 0 0 var(--space-3); }
.oe-sc .b-ep-d { display: none; }

/* the name block: the drawing's height is the name and Latin's (static/opedia-entry.js › sizeDraw), centred with them; the Also called line sits a
   step under the description, like the Formerly line above it */
.oe-nmb { align-items: center; }
.oe-head .oe-aka { margin-top: var(--space-2); }