/* skin.css — bearenzo (Bea & Enzo). Site 3: Garden / botanical estate, an afternoon into evening in the
   Tagaytay highlands. Hero feature: the day, walked (lab/docs/SITE3-PLAN.md). The loud axes: stepping stones
   along the bottom for navigation, five pages with the weight in the day, the arch for the cover, and the
   path for the grid (one winding line down every page, the sections on its bends). Tokens and every visual
   rule for this site. Engine internals are never touched here.

   §0 type · §1 tokens · §2 base · §3 frame, type, buttons · §4 the path (the grid) · §5 the stepping stones ·
   §6 the design-study tab · §7 the cover · §8 the cover's sections · §9 page heads · §10 the day: controls ·
   §11 the plan · §12 the scrub · §13 the timeline · §14 the walkers and the calendar · §15 the story's sheets ·
   §16 details · §17 the reply · §18 page turn and footer · §19 motion · round 2 (2026-10-09, DESIGN-READ-bearenzo.md):
   §20 the arrival · §21 the cover, larger · §22 the garden in the margins · §23 the herbarium, closer · §24 your
   specimen · §25 the notebook · §26 the dusk footer · §27 more motion */

/* §0 · type. Fraunces, self-hosted from demo/assets/type (SITE3-PLAN.md §6: the system serifs fell back to Noto
   Serif on the user's Android). Fontsource 5.3.0's latin variable builds of the Google Fonts original, downloaded on
   the user's yes (2026-10-09): weight and the optical-size axis, so the names' big italic draws with display-size
   detail and the small headings with text-size sturdiness (font-optical-sizing is auto). Upright 66 KB, italic 80 KB:
   over the 96 KB type budget, inside this site's raised limits (DECISIONS.md, 2026-10-09). OFL 1.1, the licence
   beside them. The sans and the label monospace stay the system's. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/type/fraunces-opsz.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../assets/type/fraunces-opsz-italic.woff2") format("woff2");
}

/* §1 · tokens. Sage on cream is easy to get wrong: text sits in moss or the deep sage, never in --sage, and the
   rose is an accent (large type, marks, the leaf); small rose text uses --rose-ink. The rose moved toward the
   delivered bract on the build day (2026-10-09): the bract is the site's only rose object, so the token follows it. */
[data-skin="bearenzo"] {
  --paper: #f4f0e5;          /* cream cotton paper */
  --paper-2: #ece7d8;        /* a card on the paper */
  --paper-3: #e1dbc8;
  --sheet: #faf8f1;          /* a herbarium sheet: whiter than the page */
  --line: #cfc8b3;
  --stone: #cbc6b6;
  --sage: #8ea487;           /* lines and marks only */
  --sage-deep: #52694b;      /* 5.3:1 on --paper, 4.9:1 on --paper-2 (pixcontrast, build day) */
  --moss: #26331f;           /* the ink: 12:1 */
  --mute: #56604c;           /* 5.6:1 on --paper, 5.1:1 on --paper-2 */
  --rose: #b0656a;           /* the pressed bract */
  --rose-ink: #8f4d57;       /* rose for small text: 5.6:1 */

  --bg: var(--paper);
  --bg-raised: var(--paper-2);
  --ink: var(--moss);
  --muted: var(--mute);
  --rule: var(--line);
  --accent: var(--rose-ink);
  --accent-soft: rgb(176 101 106 / .12);
  --field: #fbfaf5;

  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui: var(--body);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", "Courier New", monospace;

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.15rem;
  --step-2: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.3vw, 3rem);
  --step-4: clamp(2.9rem, 1.8rem + 4.8vw, 5.6rem);
  --step-5: clamp(3.4rem, 2rem + 6.2vw, 6.6rem);

  --radius: 3px;
  --radius-card: 6px;
  --rule-w: 1px;
  --gap: 1rem;
  --margin: clamp(1rem, 5vw, 3rem);
  --measure: 38rem;
  --module: clamp(3rem, 7vw, 6rem);
  --stones-h: 92px;          /* the stepping stones' band, phone */
  --motion-fast: 220ms;
  --motion-slow: 600ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.16, .84, .24, 1);
  --focus-w: 2px;
  --focus-off: 3px;
  --a-reveal-dur: 900ms;
  --a-reveal-ease: var(--ease-soft);
  --a-rise-y: 16px;

  /* the hour's light (round 2, H3): 0…1 amounts from --wsd-at (minutes since midnight on the couple's clock, set
     by schedule.js while the day is on, or the day page's reading previews it). Unset, all three are 0. Gold from
     4:40 to 5:25, the sunset's rose to 5:50, dusk to 6:30. --ground is the page's paper at that hour. */
  --g: clamp(0, (var(--wsd-at, 0) - 1000) / 45, 1);
  --r: clamp(0, (var(--wsd-at, 0) - 1045) / 25, 1);
  --n: clamp(0, (var(--wsd-at, 0) - 1068) / 42, 1);
  --ground: color-mix(in oklab, color-mix(in oklab, color-mix(in oklab, var(--paper), #f2e3c4 calc(var(--g) * 100%)), #efdfd3 calc(var(--r) * 100%)), #dfe0d8 calc(var(--n) * 100%));
}

/* §2 · base. Both html and body clip sideways (DECISIONS.md, the iPhone stand-in). */
html[data-skin="bearenzo"] {
  overflow-x: clip;
  background: var(--ground);
  color-scheme: light;
  scroll-padding-bottom: calc(var(--stones-h) + 1rem);
}
[data-skin="bearenzo"] body {
  background: var(--ground);
  transition: background-color .9s var(--ease);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: calc(var(--stones-h) + env(safe-area-inset-bottom));
}
[data-skin="bearenzo"] a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; text-decoration-color: var(--sage); }
[data-skin="bearenzo"] a:hover { color: var(--rose-ink); text-decoration-color: currentColor; }
[data-skin="bearenzo"] main img:not(.plan-paint) { background: var(--paper-3); }
.wsd-skip { background: var(--moss); color: var(--paper); border-radius: var(--radius); }
.amp { font-family: var(--display); font-style: italic; color: var(--rose); }
.nw { white-space: nowrap; }
.kicker, .label {
  font: 600 var(--step--1)/1.4 var(--ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.label { color: var(--mute); letter-spacing: .16em; }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink); max-width: 34em; }
.hint { font-size: var(--step--1); line-height: 1.5; color: var(--mute); }
.ph { color: var(--rose-ink); }
.say-wet { display: none; }
html[data-rain="on"] .say-wet { display: inline; }
html[data-rain="on"] .say-dry { display: none; }
/* the leaf: the pressed bract, the site's one rose object (the current stone, now on the day, which plan) */
.leaf {
  display: inline-block; width: 1.05em; height: 1.2em; vertical-align: -.25em; margin-right: .35em;
  background: url("../assets/bearenzo/orn-bract.webp") center / contain no-repeat;
}

/* §3 · frame, type, buttons */
.wrap { width: min(100% - 2 * var(--margin), 64rem); margin-inline: auto; }
.wrap--wide { width: min(100% - 2 * var(--margin), 76rem); }
.section { padding-block: var(--module); }
.band-title { font: 400 var(--step-3)/1.08 var(--display); color: var(--moss); text-wrap: balance; margin-top: .35rem; }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.1rem; }
.more { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.more::after { content: "→"; margin-left: .45em; color: var(--rose); text-decoration: none; display: inline-block; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.5rem;
  border: 1px solid var(--moss); border-radius: 999px;
  background: transparent; color: var(--moss);
  font: 600 .95rem/1 var(--ui); letter-spacing: .02em; text-decoration: none;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
[data-skin="bearenzo"] a.btn { text-decoration: none; }
.btn:hover, [data-skin="bearenzo"] a.btn:hover { background: var(--moss); color: var(--paper); }
.btn--solid { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
[data-skin="bearenzo"] a.btn--solid { color: #fff; }
.btn--solid:hover, [data-skin="bearenzo"] a.btn--solid:hover { background: var(--moss); border-color: var(--moss); color: #fff; }
.btn--quiet { border-color: var(--line); }
.btn--small { min-height: 44px; padding: 0 1rem; font-size: .875rem; }
.panel { background: var(--paper-2); border-radius: var(--radius-card); padding: clamp(1.25rem, 4vw, 2.25rem); }

/* §4 · the path (SITE3-PLAN.md §6, the grid): one winding line down the page (trail.js), the sections on its
   bends, alternating at a desktop; on a phone the line runs down the left gutter and the sections clear it. */
.path { position: relative; }
.trail { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* round 2 (H7): a path you can see. Three layers of one line (trail.js data-wsd-layers): a soft worn band, its
   gravel, a finer gravel; and a stepping stone at each section. On a phone, in the gutter, all of it narrower. */
.trail-line { fill: none; stroke: #e5dbc8; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.trail-line--2 { stroke: #c8b99e; stroke-width: 3.2; stroke-dasharray: .1 8; opacity: 1; }
.trail-line--3 { stroke: #ad9d80; stroke-width: 2; stroke-dasharray: .1 13; stroke-dashoffset: 6; opacity: 1; }
.trail-stone { fill: var(--stone); stroke: #b6b09e; stroke-width: 1; }
@media (max-width: 47.99em) {
  .trail-line { stroke-width: 12; }
  .trail-line--2 { stroke-width: 2.2; stroke-dasharray: .1 6; }
  .trail-line--3 { stroke-width: 1.4; stroke-dasharray: .1 10; }
}
.path > .section, .path > .head, .path > .sheets, .path > .turn, .path > .yours { position: relative; z-index: 1; }
.bend { width: min(100% - 2 * var(--margin), 72rem); margin-inline: auto; }
.bend > * { max-width: 42rem; }
.bend--left > * { margin-right: auto; }
.bend--right > * { margin-left: auto; }
@media (max-width: 47.99em) {
  .path > .bend, .path > .sheets, .path > .turn { padding-left: 1.6rem; }
}

/* §5 · the stepping stones: one flat stone per page along the bottom, the page you are on pressed in, darker,
   with the rose leaf. The dotted path runs into them. Thumb reach on a phone; a short centred row at a desktop. */
.stones {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  padding: .7rem max(.5rem, env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-right));
  background: linear-gradient(to top, var(--ground) 74%, transparent);
  pointer-events: none;
}
.stones-nav { pointer-events: auto; max-width: 34rem; margin-inline: auto; }
.stones-list { position: relative; display: flex; justify-content: center; }
.stones-list::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 17px;
  border-top: 2px dotted var(--line);
}
.stones-list li { flex: 1 1 0; min-width: 0; max-width: 7.5rem; }
.stone {
  position: relative; display: grid; justify-items: center; gap: .4rem;
  min-height: 60px; padding: 2px 0 2px; text-decoration: none;
  color: var(--mute);
}
[data-skin="bearenzo"] .stone { text-decoration: none; }
.stone-rock {
  position: relative; width: 46px; height: 30px; background: var(--stone);
  box-shadow: inset 0 -3px 0 rgb(38 51 31 / .1), inset 0 2px 0 rgb(255 255 255 / .5);
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.stones-list li:nth-child(1) .stone-rock { border-radius: 52% 48% 46% 54% / 58% 50% 50% 42%; }
.stones-list li:nth-child(2) .stone-rock { border-radius: 44% 56% 50% 50% / 50% 44% 56% 50%; transform: translateY(-3px); }
.stones-list li:nth-child(3) .stone-rock { border-radius: 50% 50% 58% 42% / 46% 54% 46% 54%; }
.stones-list li:nth-child(4) .stone-rock { border-radius: 56% 44% 48% 52% / 54% 52% 48% 46%; transform: translateY(-3px); }
.stones-list li:nth-child(5) .stone-rock { border-radius: 48% 52% 44% 56% / 50% 56% 44% 50%; }
.stone-name { font: 400 .78rem/1.1 var(--ui); white-space: nowrap; }
.stone:hover .stone-rock { background: #bdb8a6; }
.stone:hover { color: var(--moss); }
.stone[aria-current="page"] { color: var(--moss); }
.stone[aria-current="page"] .stone-name { font-weight: 700; }
.stones-list li .stone[aria-current="page"] .stone-rock {
  background: var(--sage-deep); transform: translateY(2px);
  box-shadow: inset 0 3px 6px rgb(0 0 0 / .32);
}
.stone[aria-current="page"] .stone-rock::after {
  content: ""; position: absolute; right: -9px; top: -13px; width: 22px; height: 25px;
  background: url("../assets/bearenzo/orn-bract.webp") center / contain no-repeat;
  transform: rotate(16deg);
}
@media (min-width: 48em) {
  [data-skin="bearenzo"] { --stones-h: 108px; }
  .stones { background: linear-gradient(to top, var(--ground) 62%, transparent); padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .stones-list::before { top: 21px; }
  .stone-rock { width: 62px; height: 38px; }
  .stone-name { font-size: .875rem; }
  .stone[aria-current="page"] .stone-rock::after { width: 26px; height: 30px; right: -10px; top: -15px; }
}

/* §6 · the design-study tab, top left */
.study { position: fixed; z-index: 41; left: max(1rem, env(safe-area-inset-left)); top: 1rem; max-width: calc(100vw - 2rem); }
.study-tab, .demo-btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .95rem;
  background: rgb(244 240 229 / .92); color: var(--moss);
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 .75rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase;
}
.demo-btn { text-transform: none; letter-spacing: .02em; font-size: .85rem; background: var(--paper); }
.study-tab:hover, .demo-btn:hover { border-color: var(--sage-deep); }
.study-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--rose); }
.study-panel {
  margin-top: .5rem; width: min(22rem, calc(100vw - 2rem)); display: grid; gap: .75rem;
  padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 14px 30px -18px rgb(38 51 31 / .45);
}
.study-panel p { font-size: var(--step--1); line-height: 1.55; }
.study-ctl { display: flex; flex-wrap: wrap; gap: .5rem; }

/* §7 · the cover: the allée through an arch-topped window on cream, pressed botanicals at its foot, the names
   set across the arch's base. Dappled leaf shadow drifts over the paper (the one ambient surface). */
.cover {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; text-align: center;
  padding: clamp(4.5rem, 9svh, 6rem) var(--margin) clamp(2.5rem, 6vw, 4rem);
}
.dapple {
  position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  background: url("../assets/bearenzo/orn-shadow.jpg") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: .2;
  animation: dapple 46s ease-in-out infinite alternate;
}
@keyframes dapple {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.08) rotate(.6deg); }
}
.arch-wrap { position: relative; z-index: 1; width: min(70vw, 17.5rem, calc((100svh - 25rem) * .8)); min-width: 9.5rem; }
/* a short phone (an iPhone SE, 559px with Safari's bars): Reply stays above the stones */
@media (max-height: 640px) {
  .cover { padding-top: 4rem; }
  .cover-words { gap: .4rem; }
  .cover-date { font-size: 1.05rem; }
}
.arch {
  aspect-ratio: 4 / 5; border-radius: 999px 999px 4px 4px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(38 51 31 / .12), 0 0 0 9px var(--paper), 0 0 0 10px var(--line);
}
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.orn { position: absolute; pointer-events: none; background: center / contain no-repeat; }
.orn--fern { width: 46%; aspect-ratio: 696 / 1112; left: -26%; bottom: -14%; background-image: url("../assets/bearenzo/orn-fern.webp"); transform: rotate(-28deg); }
.orn--cosmos { width: 40%; aspect-ratio: 799 / 835; right: -13%; bottom: -10%; background-image: url("../assets/bearenzo/orn-cosmos.webp"); transform: rotate(14deg); }
.cover-words { position: relative; z-index: 2; display: grid; justify-items: center; gap: .55rem; }
.names {
  margin-top: -.5em;
  font: italic 400 var(--step-5)/.95 var(--display); color: var(--moss); letter-spacing: -.01em;
  text-shadow: 0 0 .25em var(--paper), 0 0 .5em var(--paper);
}
.names .amp { font-size: .8em; padding-inline: .05em; }
.cover-date { font: 400 var(--step-1)/1.4 var(--display); color: var(--moss); max-width: 24em; text-wrap: balance; }
.count { font-size: var(--step--1); letter-spacing: .06em; color: var(--mute); }
.count b { font: 400 1.35rem/1 var(--display); color: var(--moss); font-variant-numeric: lining-nums tabular-nums; }
.count-after { display: none; }
.count[data-phase="after"] .count-before { display: none; }
.count[data-phase="after"] .count-after { display: inline; }
.cover-live { font-size: var(--step--1); color: var(--moss); }
.cover-live:not([data-live="night"]) { display: none; }
.cover:has(.cover-live[data-live="night"]) .count { display: none; }
.cl-label { font-weight: 700; color: var(--rose-ink); }
.cover-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1rem; margin-top: .45rem; }
.cta-day, .cta-specimen, .cta-press { display: none; }
html[data-reply="yes"]:not([data-specimen]) .cta-press, html[data-reply="yes"][data-specimen] .cta-specimen { display: inline-flex; }
html[data-reply="yes"] .cta-day { display: inline-flex; }
html[data-reply="yes"] .cta-reply, html[data-reply="yes"] .cta-by, html[data-reply="yes"] .cta-walk { display: none; }
.cover-plan { font-size: var(--step--1); color: var(--mute); max-width: 26em; }
@media (min-width: 48em) {
  .arch-wrap { width: min(19rem, calc((100svh - 27rem) * .8)); }
}

/* §8 · the cover's sections */
.invite { display: grid; gap: 1.5rem; }
.invite-shot img { width: 100%; height: auto; border-radius: 999px 999px 4px 4px; aspect-ratio: 4 / 5; object-fit: cover; }
.invite-shot { max-width: 20rem; }
.invite-words { display: grid; gap: .8rem; }
.invite-say { font: 400 var(--step-2)/1.3 var(--display); color: var(--moss); text-wrap: pretty; }
@media (min-width: 48em) {
  .bend > .invite { max-width: 52rem; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
}
/* S2 · the day in three places: three small arches, each a door into the day */
.three { display: grid; gap: .6rem; }
.three-list { display: grid; margin-top: .8rem; border-top: 1px solid var(--line); }
.three-list a {
  display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 1rem;
  align-content: center; padding: .85rem 0; border-bottom: 1px solid var(--line); text-decoration: none; min-height: 44px;
}
[data-skin="bearenzo"] .three-list a { text-decoration: none; }
.three-arch {
  position: relative; grid-row: 1 / 4; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 3px 3px; background: var(--paper-3);
  box-shadow: 0 0 0 1px rgb(38 51 31 / .1), 0 0 0 4px var(--paper), 0 0 0 5px var(--line);
}
.three-arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-soft), filter .6s var(--ease); }
.three-list a:hover .three-arch img { transform: scale(1.06); }
.three-moved {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .3rem .2rem; text-align: center;
  background: rgb(38 56 66 / .86); color: #fff; font: 700 .6rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase;
}
html[data-rain="on"] .three-moved { display: block; }
html[data-rain="on"] .three-list li:not(:last-child) .three-arch img { filter: grayscale(.55) brightness(.92); }
.three-time { font: 400 var(--step-2)/1 var(--display); color: var(--rose-ink); font-variant-numeric: lining-nums; }
.three-place { font: 400 var(--step-1)/1.2 var(--display); color: var(--moss); }
.three-what { font-size: var(--step--1); color: var(--mute); }
.three-list a:hover .three-place { color: var(--rose-ink); }
@media (min-width: 48em) {
  .bend > .three { max-width: 58rem; }
  .three-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); border-top: 0; margin-top: 1.4rem; }
  .three-list a { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: .3rem; padding: 0; border-bottom: 0; }
  .three-arch { grid-row: auto; margin-bottom: .8rem; }
}
.teaser { position: relative; display: grid; gap: .6rem; }
.orn--sampaguita { width: 7.5rem; aspect-ratio: 601 / 830; right: -1rem; top: -4.5rem; background-image: url("../assets/bearenzo/orn-sampaguita.webp"); transform: rotate(22deg); opacity: .95; }
.teaser > :not(.orn) { position: relative; max-width: 30rem; }

/* §9 · page heads */
.head { padding-top: clamp(5rem, 11vw, 7.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); display: grid; gap: .6rem; }
.head-title { font: italic 400 var(--step-4)/1 var(--display); color: var(--moss); }

/* §10 · the day: who you are, and the rain plan */
.day-controls {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem 2rem;
  padding-block: 1rem 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem;
}
.who { border: 0; margin: 0; padding: 0; min-width: 0; }
.who legend { padding: 0; margin-bottom: .5rem; }
.who-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.who-pick { position: relative; display: inline-flex; }
.who-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.who-pick span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  font: 600 .875rem/1 var(--ui); color: var(--mute);
}
.who-pick input:checked + span { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.who-pick input:focus-visible + span { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
.who-pick:hover span { border-color: var(--sage-deep); color: var(--moss); }
.who-pick:hover input:checked + span { color: #fff; }
.rain { display: grid; gap: .35rem; max-width: 22rem; }
.rain-switch { position: relative; display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.rain-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rain-track {
  position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--paper-3);
  box-shadow: inset 0 0 0 1px var(--line); transition: background var(--motion-fast) var(--ease);
}
.rain-track::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(38 51 31 / .3); transition: transform var(--motion-fast) var(--ease);
}
.rain-switch input:checked + .rain-track { background: #6f8796; }
.rain-switch input:checked + .rain-track::after { transform: translateX(20px); }
.rain-switch input:focus-visible + .rain-track { outline: 2px solid var(--rose-ink); outline-offset: 3px; }

/* The plan is the hero (round 2, H2): at a laptop it takes the left of the screen at the screen's height and
   holds there while the afternoon scrolls beside it under the scrub; on a phone it is pinned along the top as a
   band (the camera keeps the place that is on in it), the scrub pinned under it, and it folds away. Scrolling the
   afternoon is the scrub (schedule.js reading): the line it reads at is --wsd-read. */
.day { --band-h: 40svh; --wsd-read: .44; }
.day-grid { display: grid; gap: 2rem; }
@media (max-width: 59.99em) {
  .day { display: flex; flex-direction: column; --wsd-read: .7; }
  .day:has(.plan[data-folded]) { --band-h: 3.75rem; }
  .day-grid, .reading { display: contents; }
  .timeline-box { width: min(100% - 2 * var(--margin), 40rem); margin-inline: auto; }
  .stage { order: 1; position: sticky; top: 0; z-index: 6; width: 100%; height: var(--band-h); background: var(--paper-2); }
  .scrub-box { order: 2; position: sticky; top: var(--band-h); z-index: 5; }
  .scrub-head .label, .scrub-hint { display: none; }
  .scrub-head { justify-content: flex-end; }
  .scrub-said { font-size: .9rem; }
  .scrub { height: 34px; }
  .day-controls { order: 3; margin-top: 1.5rem; padding-top: 1.25rem; }
  .timeline-box { order: 4; }
  .walkers { order: 5; }
  .cal { order: 6; }
  /* the fold row is the band's top: the design-study tab sits over its left end, the plan starts below it */
  .plan { display: flex; flex-direction: column; }
  .plan-fold { order: -1; flex: none; height: 3.75rem; text-align: right; padding-right: var(--margin); border-top: 0; border-bottom: 1px solid var(--line); }
  .plan-plot { height: calc(var(--band-h) - 3.75rem); border-radius: 0; box-shadow: none; }
  .place, .part { scroll-margin-top: calc(var(--band-h) + 7rem); }
}
@media (min-width: 60em) {
  .day-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  /* held clear of the design-study tab, top left */
  .stage { position: sticky; top: 4.25rem; }
  .reading { min-width: 0; }
  .scrub-box { position: sticky; top: 1rem; z-index: 4; }
  .plan-plot { height: calc(100svh - var(--stones-h) - 5.25rem); aspect-ratio: var(--vmap-a); max-width: 50vw; max-height: 60rem; }
  .place, .part { scroll-margin-top: 12rem; }
}

/* §11 · the plan: the painting, with every mark, path and walking time the engine's (venuemap.js plan mode). The
   engine's camera places the painting, the lines' viewBox and every mark in its window; the skin only shapes the
   plot. A window wider than the painting shows the painting's own cream paper round it. */
.plan { position: relative; }
.plan-plot {
  position: relative; width: 100%; margin-inline: auto; overflow: hidden;
  border-radius: var(--radius-card); background: #f1ece0;
  box-shadow: 0 0 0 1px var(--line), 0 18px 34px -26px rgb(38 51 31 / .5);
}
.plan[data-folded] .plan-plot { height: 0; box-shadow: none; }
.plan-paint { position: absolute; max-width: none; object-fit: fill; transform-origin: 50% 50%; will-change: left, top, width, height; }
.plan-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 1.5px rgb(244 240 229 / .95)); }
.plan-marks { position: absolute; inset: 0; }
.pin[data-out], .walk-tag[data-out], .vmap-glow[data-out] { visibility: hidden; }
/* on a phone's band the whole estate is small: the walking times wait for the camera to close in (the timeline has them) */
@media (max-width: 59.99em) { .plan[data-view="all"] .walk-tag { visibility: hidden; } }
.plan-fold {
  display: block; width: 100%; min-height: 44px; padding: 0 1rem; border: 0; border-top: 1px solid var(--line);
  background: var(--paper-2); color: var(--sage-deep); font: 600 .8rem/1 var(--ui); letter-spacing: .04em;
}
.plan-fold::after { content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .55em; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: translateY(.1em) rotate(-45deg); }
.plan[data-folded] .plan-fold::after { transform: translateY(-.15em) rotate(135deg); }
@media (min-width: 60em) { .plan-fold { display: none; } }
/* diving in, the marks and lines go at once: the camera closes in on the bare painting, and nothing is left in
   reach under the photograph */
.plan[data-dive] .plan-marks, .plan[data-dive] .plan-lines { visibility: hidden; }

/* the hour's light (H3): from --wsd-at (schedule.js, the couple's clock or the reading's preview). Gold from about
   4:40, the sunset's rose to 5:50, dusk after. On the painting the dusk is a dimming, a cooling and the glows; on
   the page it is the paper itself (§2). Nothing is lit before the day is on. */
.plan-paint {
  filter: saturate(calc(1 + .14 * var(--g) - .42 * var(--n))) brightness(calc(1 - .46 * var(--n))) sepia(calc(.2 * var(--g) * (1 - var(--n))));
}
.plan-light { position: absolute; inset: 0; pointer-events: none; }
.plan-light::before, .plan-light::after { content: ""; position: absolute; inset: 0; }
.plan-light::before {
  background: linear-gradient(200deg, #ffc27a 0%, #f2a08a 55%, rgb(242 160 138 / 0) 100%);
  mix-blend-mode: soft-light; opacity: calc(.55 * var(--g) * (1 - var(--n)));
}
.plan-light::after {
  background: radial-gradient(120% 90% at 50% 40%, #33465a, #172129);
  mix-blend-mode: multiply; opacity: calc(.5 * var(--n));
}
.vmap-glow {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen; opacity: clamp(0, calc((var(--wsd-at, 0) - var(--on, 9999)) / 16), 1);
  transition: opacity .6s var(--ease);
}
.vmap-glow[data-glow="lamp"] {
  background: radial-gradient(closest-side, #fff6d6 0, #ffd28a 22%, rgb(255 178 92 / .55) 48%, rgb(255 170 80 / 0) 100%);
}
.vmap-glow[data-glow="glow"] {
  border-radius: 34%;
  background: radial-gradient(closest-side, rgb(255 222 150 / .95), rgb(255 196 112 / .55) 55%, rgb(255 180 90 / 0) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .vmap-glow[data-glow="lamp"] { animation: lamp 4.6s ease-in-out infinite alternate; }
  .vmap-glow[data-glow="lamp"]:nth-child(3n) { animation-duration: 5.4s; animation-delay: -1.2s; }
  .vmap-glow[data-glow="lamp"]:nth-child(3n + 1) { animation-duration: 3.9s; animation-delay: -2.6s; }
}
@keyframes lamp { from { scale: .9; } to { scale: 1.06; } }
/* after dark the plan's words stay lit: the labels lift off the dimmed painting */
.pin-name, .walk-tag { transition: background .6s var(--ease), color .6s var(--ease); }

/* the dive (H4): the camera closes in on the place, then its photograph rises out of the painting */
.plan-dive {
  position: absolute; inset: 0; z-index: 6; display: grid; align-content: end;
  opacity: 0; transition: opacity .55s var(--ease);
}
.plan[data-dive] .plan-dive { opacity: 1; transition: opacity .9s var(--ease) .75s; }
.dive-photo { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.dive-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 2.4s var(--ease-soft); }
.plan[data-dive] .dive-photo img { transform: scale(1); transition-delay: .75s; }
.dive-photo .dive-night { opacity: clamp(0, calc((var(--wsd-at, 0) - 1050) / 40), 1); }
.plan-dive::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(20 28 22 / .3), transparent 26%, transparent 42%, rgb(20 28 22 / .8));
}
.dive-words { position: relative; z-index: 1; display: grid; gap: .25rem; padding: 1.2rem 1.25rem 4.4rem; color: #fbf8f1; max-width: 32rem; }
.dive-name { font: italic 400 var(--step-3)/1 var(--display); }
.dive-name::first-letter { text-transform: uppercase; }
.dive-sub { font: 600 .75rem/1.3 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: #f1dcc9; }
.dive-note { font-size: .95rem; line-height: 1.5; color: #f2eee4; }
.dive-from { font-size: var(--step--1); font-weight: 600; color: #e9e2cf; }
.plan-dive > * { opacity: 0; translate: 0 10px; transition: opacity .6s var(--ease), translate .8s var(--ease); }
.plan-dive > .dive-photo { translate: none; opacity: 1; }
.plan[data-dive] .plan-dive > * { opacity: 1; translate: none; transition-delay: 1.05s; }
.dive-back {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; min-height: 44px; min-width: 44px;
  background: rgb(250 248 241 / .94); border-color: transparent; color: var(--moss);
}
[data-skin="bearenzo"] .dive-back:hover { background: #fff; color: var(--moss); }
@media (max-width: 59.99em) {
  .dive-words { padding: .8rem var(--margin) 3.8rem; gap: .1rem; }
  .dive-name { font-size: 1.6rem; }
  .dive-note, .dive-from { display: none; }
  .dive-back { left: var(--margin); bottom: .6rem; }
}
.vmap-path { fill: none; stroke: none; }
.vmap-path[data-route] { stroke: var(--moss); stroke-width: 2.5; stroke-dasharray: 1 6; stroke-linecap: round; stroke-linejoin: round; }
.vmap-path[data-route][data-alt] { stroke: var(--sage-deep); stroke-width: 2; stroke-dasharray: 7 5; stroke-linecap: butt; }
.vmap-path[data-walking] { stroke: var(--moss); stroke-dasharray: 1 6; }
.vmap-trace { fill: none; stroke: var(--rose); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.vmap-walker { fill: var(--rose); stroke: #fff; stroke-width: 2.5; }

.pin {
  position: absolute; transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--moss);
}
.pin-dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--moss);
  box-shadow: 0 1px 4px rgb(38 51 31 / .35); transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.pin-name {
  position: absolute; white-space: nowrap; pointer-events: none;
  font: 700 .75rem/1 var(--ui); letter-spacing: .02em; color: var(--moss);
  background: rgb(250 248 241 / .94); padding: 4px 7px 5px; border-radius: 3px;
  box-shadow: 0 1px 3px rgb(38 51 31 / .18);
}
/* names are kept as they read mid-sentence ("walking to the Lawn"); standing alone, a label starts with a capital */
.pin-name::first-letter, .place-btn > span:first-child::first-letter, .plan-detail-name b::first-letter { text-transform: uppercase; }
.place-btn--again > span:first-child::first-letter { text-transform: none; }
.place-btn > span:first-child, .plan-detail-name b { display: inline-block; }
.pin[data-label="below"] .pin-name, .pin:not([data-label]) .pin-name { top: 38px; left: 50%; transform: translateX(-50%); }
.pin[data-label="above"] .pin-name { bottom: 38px; left: 50%; transform: translateX(-50%); }
.pin[data-label="left"] .pin-name { right: 36px; top: 50%; transform: translateY(-50%); }
.pin[data-label="right"] .pin-name { left: 36px; top: 50%; transform: translateY(-50%); }
/* the small things (the shuttle, parking, restrooms): a smaller mark, named when pressed */
.pin:not([data-kind="venue"]) .pin-dot { width: 12px; height: 12px; border-width: 2px; border-color: var(--sage-deep); background: #fff; }
.pin[data-kind="amenity"] .pin-dot { border-radius: 3px; }
.pin:not([data-kind="venue"]):not([data-selected]) .pin-name,
.pin[data-unused]:not([data-selected]) .pin-name {
  clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden;
}
.pin[data-unused] .pin-dot { opacity: .5; transform: scale(.75); }
.pin[data-next] .pin-dot { border-color: var(--rose-ink); background: #fff; box-shadow: 0 0 0 4px rgb(176 101 106 / .25); }
.pin[data-on] .pin-dot { background: var(--rose); border-color: #fff; transform: scale(1.25); box-shadow: 0 0 0 5px rgb(176 101 106 / .32); }
.pin[data-on]::before {
  content: ""; position: absolute; width: 20px; height: 23px; left: 25px; top: -1px;
  background: url("../assets/bearenzo/orn-bract.webp") center / contain no-repeat; transform: rotate(20deg);
}
.pin[data-selected] .pin-dot { outline: 2px solid var(--moss); outline-offset: 3px; }
.pin:hover .pin-dot { transform: scale(1.15); }
.pin[data-on]:hover .pin-dot { transform: scale(1.3); }
.walk-tag {
  position: absolute; transform: translate(-50%, -50%); display: none; pointer-events: none; white-space: nowrap;
  font: 700 .72rem/1 var(--ui); color: var(--moss); background: #fff; padding: 4px 7px; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgb(38 51 31 / .2);
}
.walk-tag[data-route] { display: block; }
/* a step-free way's time is in the timeline and the place card, not on the plan: two tags on one terrace crowd it */
.walk-tag[data-alt] { display: none; }
.walk-tag[data-min="1"] { display: none; }   /* a minute indoors: the label it would cover says more */
.plan-key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: var(--step--1); color: var(--mute); }
.plan-key span { display: inline-flex; align-items: center; gap: .45rem; }
.plan-key i { display: inline-block; width: 1.6rem; height: 0; border-top: 2.5px dotted var(--moss); }
.plan-key .k-alt { border-top: 2px dashed var(--sage-deep); }
.plan-key .k-walk { border-top: 4px solid var(--rose); border-radius: 2px; }
.walk-now {
  position: absolute; left: .6rem; top: .6rem; z-index: 5; max-width: calc(100% - 1.2rem);
  padding: .45rem .7rem; border-radius: var(--radius); background: rgb(250 248 241 / .94);
  font-size: var(--step--1); font-weight: 600; color: var(--rose-ink); box-shadow: 0 2px 8px -4px rgb(38 51 31 / .4);
}
@media (min-width: 60em) { .walk-now { top: auto; bottom: .6rem; } }
@media (max-width: 59.99em) { .plan .walk-now { display: none; } }
.plan-detail {
  position: absolute; left: .6rem; right: .6rem; bottom: .6rem; z-index: 5; display: grid; gap: .3rem;
  padding: .85rem 1rem; background: rgb(250 248 241 / .96); border-radius: var(--radius-card); border-left: 3px solid var(--rose);
  box-shadow: 0 10px 24px -14px rgb(38 51 31 / .5);
}
@media (max-width: 59.99em) { .plan-detail { bottom: 3.4rem; padding: .6rem .8rem; } .plan-detail p:not(.plan-detail-name) { display: none; } }
.plan-detail-name b { font: 400 var(--step-1)/1.2 var(--display); }
.plan-detail-name span { font-size: var(--step--1); color: var(--mute); }
.plan-detail-walk { font-size: var(--step--1); font-weight: 600; color: var(--sage-deep); }

/* §12 · the scrub: scrolling the afternoon moves it, dragging it scrolls the afternoon. Glass over the timeline */
.scrub-box {
  display: grid; gap: .45rem; padding: 1rem 1.1rem; border-radius: var(--radius-card);
  background: rgb(236 231 216 / .96); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: 0 10px 22px -18px rgb(38 51 31 / .55);
}
.scrub-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: baseline; }
.scrub-said { font: 400 var(--step-1)/1.2 var(--display); color: var(--moss); font-variant-numeric: lining-nums; }
.scrub { width: 100%; height: 44px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.scrub::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }
.scrub::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--sage), var(--sage-deep)); }
.scrub::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 24px; margin-top: -10px; border: 0;
  border-radius: 52% 48% 46% 54% / 58% 50% 50% 42%; background: var(--sage-deep);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / .18), 0 1px 3px rgb(38 51 31 / .4);
}
.scrub::-moz-range-thumb {
  width: 34px; height: 24px; border: 0; border-radius: 52% 48% 46% 54% / 58% 50% 50% 42%; background: var(--sage-deep);
}
.scrub:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
.scrub-now { display: grid; gap: .2rem; font-size: .95rem; min-height: 1.5em; }
.sn b { color: var(--rose-ink); }
.sn--next b { color: var(--sage-deep); }
.sn-left { color: var(--mute); font-size: var(--step--1); }
/* on a phone the scrub is a strip pinned under the plan: the slider and what is on, no more */
@media (max-width: 59.99em) {
  .scrub-box { border-radius: 0; padding: .45rem var(--margin) .5rem; gap: .2rem; box-shadow: 0 8px 14px -12px rgb(38 51 31 / .5); }
  .scrub-now { font-size: .88rem; min-height: 1.3em; }
  .scrub-now [data-wsd-el="now"]:not([hidden]) + [data-wsd-el="next"] { display: none; }
}

/* §13 · the timeline: the line is the garden path, the places on it, the parts of the day between them */
.timeline-box { min-width: 0; padding-top: 1.6rem; display: grid; gap: .6rem; align-content: start; }
.timeline-hint { max-width: 36em; }
.timeline { position: relative; margin-top: 1.2rem; padding-left: 2.1rem; }
.timeline::before { content: ""; position: absolute; left: .7rem; top: .5rem; bottom: .5rem; border-left: 2px dotted var(--sage); }
.place { position: relative; padding-top: 1.6rem; }
.place:first-child { padding-top: 0; }
.place::before {
  content: ""; position: absolute; left: -2.05rem; top: calc(1.6rem + .7rem); width: 1.5rem; height: 1rem;
  border-radius: 52% 48% 46% 54% / 58% 50% 50% 42%; background: var(--stone);
  box-shadow: inset 0 -2px 0 rgb(38 51 31 / .12);
}
.place:first-child::before { top: .7rem; }
.place-walk {
  display: flex; gap: .55rem; align-items: baseline; margin: 0 0 .9rem; padding: .55rem .8rem;
  font-size: var(--step--1); color: var(--mute); background: var(--paper-2); border-radius: var(--radius);
}
.place-walk b { color: var(--moss); }
.walk-dots { flex: none; width: 1.6rem; border-top: 2px dotted var(--rose); transform: translateY(-.25em); }
.step-free { color: var(--sage-deep); font-weight: 600; }
.place-card { display: grid; gap: .9rem; padding: .9rem; background: var(--sheet); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--motion-fast) var(--ease); }
.place[data-picked] .place-card { box-shadow: 0 0 0 2px var(--rose); }
/* S3 · a place the day has already been to is a line, not a second card */
.place-again { display: flex; align-items: baseline; gap: .4rem; font: italic 400 var(--step-1)/1.3 var(--display); color: var(--mute); }
.place-again .place-btn { min-height: 44px; display: inline-flex; align-items: center; font: inherit; color: var(--moss); }
.place[data-again] .place-card { display: none; }
@media (min-width: 30em) {
  .place-card { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: start; }
  .place-card:has(> .place-photo[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
.place-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); }
.place-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the Glasshouse after dark, faded in across sunset (5:30–6:10 on the couple's clock, schedule.js --wsd-at) */
.place-photo .place-night { opacity: clamp(0, calc((var(--wsd-at, 0) - 1050) / 40), 1); transition: opacity .5s var(--ease); }
.day[data-live="after"] .place-night { opacity: 1; }
.place-words { display: grid; gap: .25rem; align-content: start; }
.place-name { font: 400 var(--step-2)/1.1 var(--display); }
.place-btn {
  display: inline-grid; justify-items: start; gap: .2rem; padding: 0; min-height: 44px; text-align: left;
  background: none; border: 0; color: var(--moss); font: inherit;
}
.place-on-plan { font: 600 .75rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--rose-ink); }
.place-btn:hover { color: var(--rose-ink); }
.place-sub { font-size: var(--step--1); font-weight: 600; color: var(--sage-deep); }
.place-note { font-size: .95rem; color: var(--mute); }
.part { position: relative; display: grid; grid-template-columns: 4.9rem minmax(0, 1fr); gap: .8rem; padding: .85rem 0 .2rem; }
.part::before {
  content: ""; position: absolute; left: -1.75rem; top: 1.15rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--sage-deep);
}
.part-time { font: 400 1.05rem/1.4 var(--display); color: var(--moss); font-variant-numeric: lining-nums tabular-nums; }
.part-title { font: 600 1rem/1.4 var(--ui); color: var(--moss); }
.part-note { margin-top: .2rem; font-size: .95rem; color: var(--mute); }
.tag { display: inline-block; margin-left: .35rem; padding: 2px 7px; border-radius: 999px; font: 700 .7rem/1.4 var(--ui); letter-spacing: .06em; text-transform: uppercase; vertical-align: .12em; }
.tag--mine { background: var(--rose-ink); color: #fff; }
.tag--wet { background: #dfe6e8; color: #2f4652; }
.part[data-state="past"] .part-time, .part[data-state="past"] .part-body { opacity: .55; }
.part[data-state="now"]::before {
  width: 22px; height: 25px; left: -2.15rem; top: .75rem; border: 0; border-radius: 0;
  background: url("../assets/bearenzo/orn-bract.webp") center / contain no-repeat;
}
.part[data-state="now"] .part-title { color: var(--rose-ink); }
.part[data-state="next"]::before { border-color: var(--rose-ink); background: #fff; }
.part[data-mine] .part-title { color: var(--moss); }

/* §14 · the walkers, and the calendar */
.walkers { margin-top: var(--module); }
.walkers img { width: 100%; height: auto; border-radius: var(--radius-card); aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 47.99em) {
  .walkers { width: 100%; }
  .walkers img { border-radius: 0; aspect-ratio: 4 / 3; object-position: 46% 50%; }
}
.cal { display: grid; gap: .8rem; justify-items: start; }
.cal > p:not(.kicker):not(.hint) { max-width: 34em; }

/* §15 · the story: each chapter a herbarium sheet with its collector's label (story.js) */
.sheets { display: grid; gap: var(--module); padding-block: 1rem var(--module); }
.sheets [data-wsd-el="chapter-list"] { display: grid; gap: var(--module); }
.sheet { display: grid; gap: 1.5rem; max-width: 54rem; }
@media (min-width: 48em) {
  .sheet { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
  .sheet:nth-child(even) { margin-left: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
  .sheet:nth-child(even) .sheet-paper { order: 2; }
}
.sheet-paper {
  position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 25rem;
  background: var(--sheet); border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(38 51 31 / .08), 0 22px 36px -28px rgb(38 51 31 / .55);
}
.sheet-specimen { position: absolute; left: 5%; top: 6%; width: 46%; height: 62%; background: center / contain no-repeat; }
[data-chapter="c1"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-fern.webp"); transform: rotate(-8deg); }
[data-chapter="c2"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-cosmos.webp"); transform: rotate(6deg); }
[data-chapter="c3"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-sampaguita.webp"); transform: rotate(-4deg); }
[data-chapter="c4"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-bract.webp"); width: 40%; height: 48%; top: 14%; transform: rotate(-12deg); }
.sheet-shots { position: absolute; right: 6%; top: 8%; width: 54%; }
.sheet-shot { position: relative; transform: rotate(2.2deg); box-shadow: 0 6px 14px -8px rgb(38 51 31 / .5); }
.sheet:nth-child(even) .sheet-shot { transform: rotate(-1.8deg); }
.sheet-shot img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 5px solid #fff; }
.tape { position: absolute; width: 42%; aspect-ratio: 540 / 83; background: url("../assets/bearenzo/orn-tape.webp") center / 100% 100% no-repeat; }
.tape--a { left: -10%; top: -4%; transform: rotate(-24deg); }
.tape--b { right: -10%; bottom: -3%; transform: rotate(-22deg); }
.sheet-label {
  position: absolute; right: 5%; bottom: 5%; width: 60%;
  padding: .55rem .7rem .6rem; background: #fdfcf7; border: 1px solid var(--line);
  font: 400 .75rem/1.45 var(--mono); color: var(--moss);
}
.sheet-label-head { display: flex; justify-content: space-between; gap: .4rem; padding-bottom: .3rem; margin-bottom: .3rem; border-bottom: 1px solid var(--line); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.sheet-no { white-space: nowrap; color: var(--rose-ink); }
.sheet-latin { font-style: italic; font-weight: 700; }
.sheet-common { color: var(--mute); }
.sheet-facts { margin-top: .3rem; display: grid; gap: .1rem; }
.sheet-facts div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); gap: .3rem; }
.sheet-facts dt { color: var(--mute); }
@media (max-width: 23.99em) {
  .sheet-label { width: 66%; right: 4%; bottom: 4%; font-size: .75rem; }
  .sheet-facts div { grid-template-columns: 1fr; gap: 0; }
  .sheet-paper { aspect-ratio: 4 / 5.6; }
}
.sheet-words { display: grid; gap: .6rem; }
.sheet-title { font: italic 400 var(--step-3)/1.08 var(--display); color: var(--moss); text-wrap: balance; }
.sheet-body { display: grid; gap: .8rem; max-width: 32em; }
.sheet-body p:first-child::first-letter { font: 400 3.1em/.8 var(--display); float: left; margin: .08em .1em 0 0; color: var(--rose); }

/* §16 · details */
/* round 2 (H7): each card a sheet of cotton paper, taped to the page */
.note-card {
  position: relative; display: grid; gap: .7rem; padding: clamp(1.25rem, 4vw, 2rem); background: var(--sheet); border-radius: 3px;
  box-shadow: 0 0 0 1px rgb(38 51 31 / .06), 0 24px 40px -32px rgb(38 51 31 / .55);
}
.note-card::before {
  content: ""; position: absolute; z-index: 2; top: -11px; left: calc(50% - 46px); width: 92px; aspect-ratio: 540 / 83;
  background: url("../assets/bearenzo/orn-tape.webp") center / 100% 100% no-repeat; rotate: -3deg; pointer-events: none;
}
.note-card--photo { padding: 0; gap: 0; }
.note-card--photo .note-shot { overflow: hidden; }
.bend > .note-card--photo { max-width: 52rem; }
.note-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.note-words { display: grid; gap: .7rem; padding: clamp(1.25rem, 4vw, 2rem); }
.note-card p:not(.kicker):not(.hint) { max-width: 36em; }
@media (min-width: 48em) {
  .note-card--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
  .note-card--photo .note-shot { margin: 0; }
  .note-card--photo .note-words { align-self: center; }
  .bend--right > .note-card--photo .note-shot { order: 2; }
  .note-card--photo .note-shot img { height: 100%; min-height: 20rem; aspect-ratio: auto; }
}
.wear { display: grid; gap: .6rem; padding-left: 1.2rem; list-style: disc; }
.wear li::marker { color: var(--rose); }
.plan-now { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.orn--cosmos-sm { width: 6rem; aspect-ratio: 799 / 835; right: -1.2rem; top: -2.6rem; background-image: url("../assets/bearenzo/orn-cosmos.webp"); transform: rotate(-14deg); }

/* §17 · the reply */
.reply { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60em) { .reply { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; } }
.reply-body { display: grid; gap: 1.4rem; }
.band-head { display: grid; gap: .5rem; }
.reply-form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: .45rem; }
.field label, .reply-q { font-weight: 600; color: var(--moss); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--field); color: var(--moss);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--sage-deep); outline: none; box-shadow: 0 0 0 1px var(--sage-deep); }
.reply-ask { display: grid; gap: .6rem; }
.choices { display: grid; gap: .5rem; }
.choice {
  display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--field); cursor: pointer;
}
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--sage-deep); }
.choice:has(input:checked) { border-color: var(--sage-deep); background: rgb(86 112 79 / .1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
.plus { display: grid; gap: .6rem; }
.stepper { display: flex; align-items: center; gap: .75rem; }
.step-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--field); font-size: 1.3rem; color: var(--moss); }
.step-btn:hover { border-color: var(--sage-deep); }
.step-out { font: 400 1.6rem/1 var(--display); min-width: 1.5ch; text-align: center; font-variant-numeric: lining-nums; }
.step-label { color: var(--mute); }
.plus-names { display: grid; gap: .8rem; }
.error { padding: .75rem 1rem; border-radius: var(--radius); background: rgb(176 101 106 / .12); border: 1px solid var(--rose); color: var(--rose-ink); font-weight: 600; }
.confirm { display: grid; gap: .9rem; }
.confirm h2 { font: italic 400 var(--step-3)/1.05 var(--display); color: var(--moss); }
.confirm-on { display: grid; gap: .7rem; justify-items: start; padding: 1.1rem 1.2rem; border-radius: var(--radius-card); background: var(--sheet); box-shadow: 0 0 0 1px var(--line); border-left: 3px solid var(--rose); }
.summary { display: grid; gap: .3rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; border-bottom: 1px solid var(--line); }
.answer-word { color: var(--sage-deep); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (min-width: 36em) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; gap: .15rem; }
.stat b { font: 400 var(--step-3)/1 var(--display); color: var(--moss); font-variant-numeric: lining-nums; }
.stat span { font-size: var(--step--1); color: var(--mute); }
.reply-shot { position: relative; max-width: 26rem; justify-self: center; }
.reply-shot img { width: 100%; height: auto; border-radius: 999px 999px 4px 4px; aspect-ratio: 4 / 5; object-fit: cover; }
.orn--fern-sm { width: 34%; aspect-ratio: 696 / 1112; left: -12%; bottom: -8%; background-image: url("../assets/bearenzo/orn-fern.webp"); transform: rotate(-30deg); }

/* §18 · page turn and footer */
.turn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: var(--module); }
.turn a { display: grid; gap: .3rem; text-decoration: none; min-height: 44px; }
[data-skin="bearenzo"] .turn a { text-decoration: none; }
.turn-next { text-align: right; margin-left: auto; }
.turn-say { font: italic 400 var(--step-2)/1.1 var(--display); color: var(--moss); }
.turn a:hover .turn-say { color: var(--rose-ink); }
.foot { padding-block: 2.5rem 2rem; border-top: 1px solid var(--line); background: var(--paper-2); font-size: var(--step--1); color: var(--mute); }
.foot .wrap { display: grid; gap: .5rem; }
.foot-names { font: italic 400 var(--step-2)/1.1 var(--display); color: var(--moss); }
.foot-mark { max-width: 44em; color: var(--moss); }
.wsd-mark { display: flex; align-items: center; gap: .5rem; }
.wsd-mark i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sage-deep); }

/* §19 · motion: a soft cross-fade with a little paper drift between pages (atelier's page-in, tuned), the stone
   pressing in on arrival and rising on the way out. Reduced motion: none of it, the dapple still. */
@media (prefers-reduced-motion: no-preference) {
  .stone[aria-current="page"] .stone-rock { animation: stone-press .5s var(--ease) .12s both; }
  html[data-leaving] .stone[aria-current="page"] .stone-rock { background: var(--stone); transform: translateY(-4px); box-shadow: inset 0 -3px 0 rgb(38 51 31 / .1); }
}
@keyframes stone-press {
  from { background: var(--stone); transform: translateY(-4px); box-shadow: inset 0 -3px 0 rgb(38 51 31 / .1); }
}
@media (prefers-reduced-motion: reduce) {
  .dapple { animation: none; }
}

/* §20 · the arrival (round 2, H1): through the arch. atelier.css §X runs it (the titles route); this is its
   dress. The ground and the letterbox are the paper, so the shots open like a print on a page; a card, the gate
   pushing in, then the avenue walked down, flown into the cover's arch as its corners round into the arch's. */
.arr {
  --a-titles-ground: var(--paper); --a-titles-ink: var(--moss); --a-titles-bar-ink: var(--paper);
  --a-titles-bar: clamp(4.75rem, 12vh, 7rem);
  --a-shot-fade: 900ms; --a-titles-land: 1800ms; --a-titles-land-ease: cubic-bezier(.62, 0, .2, 1);
  --a-land-pos: 50% 60%; --a-arr-exit: 900ms;
  --a-titles-scrim: linear-gradient(180deg, rgb(20 28 22 / .12), transparent 30%, transparent 52%, rgb(20 28 22 / .58));
}
.arr { background-image: none; }   /* the hinge's lift and floor are not this arrival's: the floor greyed the landing */
.arr-s0 { --a-shot-hold: 1500ms; }
.arr-s1 { --a-shot-hold: 2300ms; --a-shot-from: scale(1.03); --a-shot-to: scale(1.12); --a-shot-pos: 50% 55%; }
.arr-s2 { --a-shot-hold: 2100ms; --a-frame-to: scale(1.15); }
.arr-s2::after { content: none; }
.arr-studio { inset: 0; display: grid; place-content: center; justify-items: center; gap: .7rem; text-align: center; }
.arr-studio > :first-child { font: 600 .75rem/1 var(--ui); letter-spacing: .32em; text-transform: uppercase; color: var(--rose-ink); }
.arr-studio > :last-child { font: italic 400 clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem)/1.1 var(--display); color: var(--moss); }
.arr-place {
  left: clamp(1.25rem, 6vw, 5rem); right: 1.25rem; bottom: calc(var(--a-titles-bar) + clamp(1.25rem, 5vh, 3rem));
  display: grid; gap: .55rem; color: #fbf8f1; text-shadow: 0 1px 22px rgb(10 16 12 / .45);
}
.arr-place > :first-child { font: italic 400 clamp(2.6rem, 1.6rem + 5vw, 5.8rem)/1 var(--display); letter-spacing: -.01em; }
.arr-place > :last-child { font: 600 .78rem/1.3 var(--ui); letter-spacing: .24em; text-transform: uppercase; }
.arr-dapple {
  position: absolute; inset: -8%; z-index: 2; pointer-events: none;
  background: url("../assets/bearenzo/orn-shadow.jpg") center / cover no-repeat; mix-blend-mode: multiply; opacity: .24;
  animation: dapple 46s ease-in-out infinite alternate; transition: opacity 1s var(--ease);
}
.arr[data-landing] .arr-dapple { opacity: 0; }
.arr .a-titles-frame { border-radius: 0; }
.arr[data-landing] .a-titles-shot[data-on] .a-titles-frame {
  border-radius: 50% 50% 4px 4px / 40% 40% 4px 4px;
  transition: transform var(--a-titles-land) var(--a-titles-land-ease), border-radius var(--a-titles-land) var(--a-titles-land-ease);
}
.arr .a-arrival-skip { background: rgb(250 248 241 / .94); }
.arr .a-arrival-note { color: var(--mute); }
/* the page under it: the words and the pressed things wait, then arrive after the landing (this view only) */
html[data-arrival] .cover-words, html[data-arrival] .arch-wrap .orn, html[data-arrival] .cover .dapple { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html[data-arrived] .cover .dapple { animation: dapple 46s ease-in-out infinite alternate, fade-in 2s var(--ease) both; }
  html[data-arrived] .arch-wrap .orn--fern { animation: press-l 1.5s var(--ease-soft) .05s both; }
  html[data-arrived] .arch-wrap .orn--cosmos { animation: press-r 1.5s var(--ease-soft) .2s both; }
  html[data-arrived] .names { animation: write 1.7s var(--ease) .3s both; }
  html[data-arrived] .cover-words > :not(.names) { animation: words-up 1s var(--ease) both; }
  html[data-arrived] .cover-words > :nth-child(2) { animation-delay: 1.1s; }
  html[data-arrived] .cover-words > :nth-child(3) { animation-delay: 1.2s; }
  html[data-arrived] .cover-words > :nth-child(4) { animation-delay: 1.3s; }
  html[data-arrived] .cover-words > :nth-child(n + 5) { animation-delay: 1.45s; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes press-l { from { opacity: 0; translate: -22px 18px; rotate: -7deg; scale: 1.08; } }
@keyframes press-r { from { opacity: 0; translate: 20px 16px; rotate: 6deg; scale: 1.08; } }
@keyframes write { from { clip-path: inset(-25% 100% -25% -10%); } to { clip-path: inset(-25% -10% -25% -10%); } }
@keyframes words-up { from { opacity: 0; translate: 0 12px; } }

/* §21 · the cover, larger (round 2, S1): on a laptop's landscape screen the arch stands at most of the screen's
   height, and the words stand beside it, the names set across its base and running on to the right */
@media (min-width: 64em) and (min-aspect-ratio: 5/4) {
  .cover {
    grid-template-columns: auto minmax(0, 27rem); justify-content: center; align-items: end;
    column-gap: clamp(2rem, 4vw, 4.5rem); text-align: left;
    padding-top: clamp(4.5rem, 9svh, 6rem); padding-bottom: clamp(2rem, 5svh, 3.5rem);
  }
  .arch-wrap { width: min(35rem, 44vw, calc((100svh - var(--stones-h) - 8rem) * .8)); }
  .cover-words { justify-items: start; padding-bottom: .5rem; }
  .names { margin: 0 0 .2rem -1.25rem; font-size: clamp(4.2rem, 2rem + 4.4vw, 7.2rem); }
  .cover-cta { justify-content: flex-start; }
}

/* §22 · the garden in the margins (round 2, H7): at a laptop, the empty side of each bend is planted with a large
   pressed specimen that drifts against the scroll (parallax.js: --gp, -1…1). On a phone the page keeps its width
   for the words, and the path in the gutter is the garden. */
.mo { display: none; position: absolute; z-index: 0; pointer-events: none; background: center / contain no-repeat; }
@media (min-width: 64em) {
  .mo { display: block; top: 6%; width: clamp(9rem, 13vw, 14.5rem); opacity: .95; }
  .mo--r { right: 1%; }
  .mo--l { left: 1%; }
  .mo--fern { aspect-ratio: 696 / 1112; background-image: url("../assets/bearenzo/orn-fern.webp"); transform: rotate(16deg); }
  .mo--l.mo--fern { transform: scaleX(-1) rotate(16deg); }
  .mo--cosmos { aspect-ratio: 799 / 835; width: clamp(8rem, 11vw, 12rem); background-image: url("../assets/bearenzo/orn-cosmos.webp"); transform: rotate(-12deg); }
  .mo--bract { aspect-ratio: 488 / 550; width: clamp(6rem, 8vw, 9rem); top: 20%; background-image: url("../assets/bearenzo/orn-bract.webp"); transform: rotate(24deg); }
  .mo--sampaguita { aspect-ratio: 601 / 830; width: clamp(7rem, 9vw, 10rem); background-image: url("../assets/bearenzo/orn-sampaguita.webp"); transform: rotate(-18deg); }
  /* batch 5: the four larger sprays, whole and loose, the margins' main planting */
  .mo--eucalyptus { aspect-ratio: 640 / 1040; width: clamp(10rem, 14vw, 15.5rem); background-image: url("../assets/bearenzo/orn-eucalyptus.webp"); transform: rotate(6deg); }
  .mo--l.mo--eucalyptus { transform: scaleX(-1) rotate(6deg); }
  .mo--bougainvillea { aspect-ratio: 640 / 822; width: clamp(9rem, 12.5vw, 14rem); background-image: url("../assets/bearenzo/orn-bougainvillea.webp"); transform: rotate(-8deg); }
  .mo--l.mo--bougainvillea { transform: scaleX(-1) rotate(-8deg); }
  .mo--raintree { aspect-ratio: 640 / 1056; width: clamp(9.5rem, 13.5vw, 15rem); background-image: url("../assets/bearenzo/orn-raintree.webp"); transform: rotate(-14deg); }
  .mo--calamansi { aspect-ratio: 640 / 800; width: clamp(8rem, 11vw, 12.5rem); top: 14%; background-image: url("../assets/bearenzo/orn-calamansi.webp"); transform: rotate(10deg); filter: saturate(.72); }
  .head > .mo { top: 30%; }
}
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .mo { translate: 0 calc(var(--gp, 0) * -72px); rotate: calc(var(--gp, 0) * 5deg); }
}

/* §23 · the herbarium, closer (round 2, H6): at a laptop the sheets are near life size; each arrives under a sheet
   of glassine that lifts as it comes into view (story.js data-in), the specimen settling as it does; then a loupe
   over any specimen (loupe.js). Reduced motion: no tissue at all. */
@media (min-width: 64em) {
  .sheet { max-width: 70rem; grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); gap: 3.5rem; }
  .sheet:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 33rem); }
  .sheet-paper { max-width: 33rem; }
  .sheet-label { font-size: .8rem; }
}
.sheet-tissue {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 2px;
  background: linear-gradient(168deg, rgb(255 255 252 / .8), rgb(246 243 233 / .72) 60%, rgb(250 248 241 / .82));
  -webkit-backdrop-filter: blur(3px) saturate(.85); backdrop-filter: blur(3px) saturate(.85);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7);
  transform-origin: 50% 0; opacity: 0; transform: perspective(1600px) rotateX(-86deg);
  transition: transform 1.8s var(--ease-soft) .55s, opacity 1.3s var(--ease) .75s;
}
.sheet[data-reveal]:not([data-in]) .sheet-tissue { opacity: 1; transform: none; transition: none; }
.sheet-specimen { transition: translate 1.8s var(--ease-soft) .7s, scale 1.8s var(--ease-soft) .7s; cursor: zoom-in; }
.sheet[data-reveal]:not([data-in]) .sheet-specimen { translate: 0 -8px; scale: 1.035; transition: none; }
.wsd-loupe {
  position: fixed; z-index: 60; width: 168px; height: 168px; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: var(--sheet);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(38 51 31 / .2), 0 18px 36px -12px rgb(38 51 31 / .55);
}
@media (max-width: 47.99em) { .wsd-loupe { width: 124px; height: 124px; } }

/* §24 · your specimen (round 2, H5): pressed on the reply page after a yes, kept on the story page as sheet 05 */
.yours { padding-bottom: var(--module); }
.yours:not([data-state="pressed"]) { display: none; }
.sheet--yours .sheet-specimen, .press-sheet .sheet-specimen { left: 22%; top: 6%; width: 56%; height: 58%; }
[data-specimen="fern"] > .sheet .sheet-specimen, .press[data-specimen="fern"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-fern.webp"); transform: rotate(-6deg); }
[data-specimen="cosmos"] > .sheet .sheet-specimen, .press[data-specimen="cosmos"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-cosmos.webp"); transform: rotate(5deg); }
[data-specimen="sampaguita"] > .sheet .sheet-specimen, .press[data-specimen="sampaguita"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-sampaguita.webp"); transform: rotate(-4deg); }
[data-specimen="bract"] > .sheet .sheet-specimen, .press[data-specimen="bract"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-bract.webp"); width: 46%; height: 46%; left: 27%; top: 10%; transform: rotate(-10deg); }
[data-specimen="eucalyptus"] > .sheet .sheet-specimen, .press[data-specimen="eucalyptus"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-eucalyptus.webp"); transform: rotate(-4deg); }
[data-specimen="bougainvillea"] > .sheet .sheet-specimen, .press[data-specimen="bougainvillea"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-bougainvillea.webp"); transform: rotate(4deg); }
[data-specimen="raintree"] > .sheet .sheet-specimen, .press[data-specimen="raintree"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-raintree.webp"); transform: rotate(-6deg); }
[data-specimen="calamansi"] > .sheet .sheet-specimen, .press[data-specimen="calamansi"] .sheet-specimen { background-image: url("../assets/bearenzo/orn-calamansi.webp"); width: 50%; height: 46%; left: 25%; top: 7%; transform: rotate(3deg); }
.sheet--yours .sheet-label, .press-sheet .sheet-label { left: 8%; right: 8%; width: auto; }
.press { display: none; }
html[data-reply="yes"] .press { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 48em) { html[data-reply="yes"] .press { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 3rem; } }
.press-words { display: grid; gap: .8rem; }
.press-words > p:not(.kicker) { max-width: 34em; }
.press-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .3rem; }
@media (min-width: 36em) { .press-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.press-pick {
  position: relative; display: grid; justify-items: center; gap: .45rem; padding: .8rem .5rem .85rem; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--sheet); cursor: pointer; text-align: center;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.press-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.press-pick-art { width: 3.4rem; aspect-ratio: 1; background: center / contain no-repeat; }
.press-pick[data-specimen="fern"] .press-pick-art { background-image: url("../assets/bearenzo/orn-fern.webp"); }
.press-pick[data-specimen="cosmos"] .press-pick-art { background-image: url("../assets/bearenzo/orn-cosmos.webp"); }
.press-pick[data-specimen="sampaguita"] .press-pick-art { background-image: url("../assets/bearenzo/orn-sampaguita.webp"); }
.press-pick[data-specimen="bract"] .press-pick-art { background-image: url("../assets/bearenzo/orn-bract.webp"); }
.press-pick[data-specimen="eucalyptus"] .press-pick-art { background-image: url("../assets/bearenzo/orn-eucalyptus.webp"); }
.press-pick[data-specimen="bougainvillea"] .press-pick-art { background-image: url("../assets/bearenzo/orn-bougainvillea.webp"); }
.press-pick[data-specimen="raintree"] .press-pick-art { background-image: url("../assets/bearenzo/orn-raintree.webp"); }
.press-pick[data-specimen="calamansi"] .press-pick-art { background-image: url("../assets/bearenzo/orn-calamansi.webp"); }
.press-pick-name { font: 600 .85rem/1.25 var(--ui); color: var(--moss); }
.press-pick:hover { border-color: var(--sage-deep); }
.press-pick:has(input:checked) { border-color: var(--sage-deep); box-shadow: 0 0 0 1px var(--sage-deep); background: #fff; }
.press-pick:has(input:focus-visible) { outline: 2px solid var(--rose-ink); outline-offset: 2px; }
.press-see { display: none; }
.press[data-state="pressed"] .press-see { display: flex; }
.press-sheet { width: 100%; max-width: 21rem; justify-self: center; overflow: hidden; }
.press-plate {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, #fffefa, var(--sheet)); box-shadow: 0 -10px 30px rgb(38 51 31 / .22); transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .press[data-pressing] .press-plate { animation: plate 1.25s var(--ease) both; }
  .press[data-pressing] .sheet-specimen { animation: pressed 1.25s var(--ease) both; }
}
@keyframes plate {
  0% { opacity: 0; transform: perspective(1200px) rotateX(-72deg); }
  34%, 58% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: perspective(1200px) rotateX(-72deg); }
}
@keyframes pressed { 0%, 42% { opacity: 0; } 70% { opacity: 1; filter: brightness(1.04) saturate(1.1); } }

/* §25 · the notebook (round 2, H8): the afternoon's light, and check your colour */
.sky { margin: .7rem 0 0; display: grid; gap: .35rem; }
.sky-band {
  position: relative; height: 5.8rem; border-radius: 4px; overflow: hidden;
  /* the light falls fast after sunset, as it does in the highlands: dark by 6:00, so the evening's words sit on dusk */
  background: linear-gradient(90deg, #f5ecd4 0%, #f6e2b8 36%, #f1c592 44%, #e4a596 47.2%, #8a7f93 48.6%, #4a5268 50.4%, #2f3946 62%, #1f2730 100%);
}
.sky-mark { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgb(38 51 31 / .45); }
.sky-mark span { position: absolute; white-space: nowrap; font: 600 .72rem/1.2 var(--ui); color: var(--moss); }
.sky-mark--vows { left: 18.75%; }
.sky-mark--vows span { left: .4rem; top: .45rem; }
.sky-mark--set { left: 46.875%; }
.sky-mark--set span { right: .4rem; top: 1.85rem; }
.sky-mark--wrap { left: 50%; border-color: rgb(244 236 220 / .6); }
.sky-mark--wrap span { left: .4rem; top: 1.85rem; color: #f4ecdc; }
.sky-temp { position: absolute; bottom: .45rem; font: 700 .68rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; }
.sky-temp--day { left: .6rem; color: var(--moss); }
.sky-temp--night { right: .6rem; color: #f4ecdc; }
/* on a phone the ceremony's words take two lines, so they end before sunset; the strip grows to keep the rows apart */
@media (max-width: 40em) {
  .sky-band { height: 7rem; }
  .sky-mark--vows span { white-space: normal; width: 4.4rem; line-height: 1.25; }
  .sky-mark--set span, .sky-mark--wrap span { top: 2.9rem; }
}
.sky-ticks { display: flex; justify-content: space-between; font-size: .75rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.check { display: grid; gap: .6rem; margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.check-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.swatch {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; background: var(--swatch);
  border: 1px solid rgb(38 51 31 / .2); transition: box-shadow var(--motion-fast) var(--ease);
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 5px var(--moss); }
.swatch:focus-visible { outline: 2px solid var(--rose-ink); outline-offset: 5px; }
.check-answer { min-height: 1.6em; scroll-margin-bottom: calc(var(--stones-h) + 1rem); }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; font-size: .95rem; }
.verdict-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px rgb(38 51 31 / .25); align-self: center; }
.verdict[data-verdict="motif"] .verdict-word { color: var(--sage-deep); font-weight: 600; }
.verdict[data-verdict="avoid"] .verdict-word { color: var(--rose-ink); font-weight: 600; }

/* §26 · the dusk footer (round 2, S4): the day page ends in the evening, the paths lit */
.foot--dusk { position: relative; background: #1f2a26; border-top: 0; color: #d9d3c4; }
.foot--dusk::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 206 132 / .55), rgb(255 190 110 / 0)) 0 0 / 132px 26px repeat-x;
}
.foot--dusk .foot-names, .foot--dusk .foot-mark { color: #f2ecdf; }
.foot--dusk .wsd-mark i { background: #a9bf9f; }
.foot-last { display: flex; align-items: center; gap: .2rem; font: italic 400 var(--step-1)/1.4 var(--display); color: #f2ecdf; margin-bottom: .6rem; }

/* §27 · more motion (round 2, the user: "more cinematic, elegant, not playful"). Each is a reveal or a drift,
   once and slow; reduced motion has none of it.
   · Photographs come into focus as they are uncovered (atelier's .a-mask with .focus).
   · The walkers' photograph drifts against the scroll inside its frame.
   · The leaf shadow that lies over the cover lies over the top of every page. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="on"][data-atelier~="motion"] .a-mask.focus > img {
    filter: blur(9px) saturate(.88);
    transition-property: clip-path, transform, filter;
  }
  [data-reveal="on"][data-atelier~="motion"] .a-mask.focus[data-seen] > img { filter: none; }
  .walkers.drift img { scale: 1.1; translate: 0 calc(var(--gp, 0) * 4.5%); }
}
.walkers { overflow: hidden; border-radius: var(--radius-card); }
@media (max-width: 47.99em) { .walkers { border-radius: 0; } }
[data-skin="bearenzo"] main { position: relative; }
[data-skin="bearenzo"] main > :not(.trail) { position: relative; z-index: 1; }
[data-skin="bearenzo"] main:not(:has(.cover))::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: min(80svh, 46rem); pointer-events: none;
  background: url("../assets/bearenzo/orn-shadow.jpg") center top / cover no-repeat; mix-blend-mode: multiply; opacity: .13;
  -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  [data-skin="bearenzo"] main:not(:has(.cover))::before { animation: dapple 46s ease-in-out infinite alternate; }
}