/* ============================================================
   /conservation/ : Rhino Preserve (v13)
   ------------------------------------------------------------
   Brief:     docs/briefs/2026-10-05-port-06-rhino-preserve-v13.md
   Prototype: prototypes/13/06-rhino-reserve.html @ 9e089421
   Enqueued:  functions.php, gated to is_page('conservation'), plus the
              rhinory-v4-rhino-preserve-editor handle for the Site Editor
              canvas (blocks/rhino-preserve/block.json editorStyle).

   Replaces the v4 seven-chapter Conservation page outright.

   REGISTER. The prototype is a paper page (body.light-warm) under the
   dark chrome: a dark full-bleed hero, one dark field-note band, one
   deep-brown voices band, and a gray close. That is the paint this file
   reproduces.

   HOW THIS FILE IS BUILT (the about.css method). Part 1 is hand-written:
   the tokens and the few shared prototype primitives (styles.css /
   v13-shared.css) this page's elements consume, each scoped. Part 2 is
   the prototype's page <style> block carried over in source order with a
   uniform .rhinory-preserve prefix (the prototype's root .rp becomes
   .rhinory-preserve.rp, the same element), split with a paren-aware
   parser. The uniform prefix preserves every specificity relationship
   the render depends on, so do not reorder or "tidy" Part 2 by hand.
   The only Part 2 edits: each photo's background-image/position became a
   --rp-pos token, because Part 3 paints real <img> elements instead; and the
   root-element classes the script sets (.kf-hover, .film-off) sit on the
   wrapper itself, so their rules read .rhinory-preserve.kf-hover.

   2026-11-02 pass (prototype @ f42cb0e7, brief
   docs/briefs/2026-11-02-rhino-preserve-content-a11y-seo.md): hero film,
   shared .rh-scrim, hero and review pause controls, keeper films, closing
   film, Blake Ken Burns, #facts, button wrap at 640px and under. Carried in
   the prototype's own order and selectors, prefixed the same way.
   ============================================================ */

/* ================= PART 1 · tokens + shared primitives ================= */

/* Declared on BOTH the template <main> and the block wrapper: the front end
   gets them from the page shell, the Site Editor canvas (which renders the
   block with no <main> around it) from .rhinory-preserve. styles.css :root
   tokens first, then v13-shared.css .light-warm (the prototype's body). */
.rhinory-page--preserve,
.rhinory-preserve{
  --reserve:#211B18;
  --ivory:#F3F2ED;
  --acacia:#B97727;
  --paper:#FBF7EE; --card:#F4EEE0; --card-2:#EAE1CE; --land:#D8C6A0;
  --ink-warm:#2D2926; --ink-warm-2:#3A352F; --rhino-warm:#717271;
  --rule-warm:rgba(45,41,38,0.10); --rule-warm-2:rgba(45,41,38,0.18);
  --burgundy:#520000;
  --ff-label:"Josefin Sans",Futura,"Century Gothic",system-ui,sans-serif;
}

/* The prototype body: Lora 16px / 1.55. theme.json puts the site on 17px. */
.rhinory-preserve{
  font-family:"Lora",system-ui,-apple-system,sans-serif;
  font-weight:400; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* The .rhinory-page shell reserves 120px of bottom padding on the dark
   register. This page closes on its own gray band, so the reserve is zeroed,
   the way the shipped v13 family does it. Class doubled to (0,2,0) so the
   win does not depend on print order against style.css's (0,1,0) rule. */
.rhinory-page--preserve.rhinory-page--preserve{ padding-bottom:0; min-height:0; background:#FBF7EE; color:#2D2926; }

/* theme.json's heading element style (display family, 400, 1.0, -0.01em)
   reaches every h1-h3 here. The prototype's headings have no element style,
   so each page rule below sets what it needs and the rest fall to UA
   defaults. Only letter-spacing goes unset by a page rule (the timeline h3),
   so only it is reset; :where() keeps this at (0,1,0) under every page rule. */
.rhinory-preserve :where(h1,h2,h3){ letter-spacing:normal; }

/* styles.css base resets the page relies on. */
.rhinory-preserve section{ position:relative; }
.rhinory-preserve img{ max-width:100%; display:block; }
.rhinory-preserve a{ color:inherit; text-decoration:none; }
.rhinory-preserve button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* styles.css § BUTTONS + v13-shared.css weight / primary shadow. */
.rhinory-preserve .btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px; font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; line-height:1.55;
  transition:transform .2s, background .2s, color .2s, border-color .2s;
}
.rhinory-preserve .btn-primary{ background:var(--acacia); color:var(--reserve); box-shadow:0 12px 34px -14px rgba(185,119,39,.55); }
.rhinory-preserve .btn-primary:hover{ background:var(--ivory); transform:translateY(-1px); }
.rhinory-preserve .btn .arrow{ width:16px; height:1px; background:currentColor; position:relative; transition:width .2s; }
.rhinory-preserve .btn .arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.rhinory-preserve .btn:hover .arrow{ width:22px; }

/* styles.css § MOBILE FIT-UP, the two rules that reach this page. */
@media (max-width:760px){
  .rhinory-preserve .btn{ font-size:11px; padding:14px 18px; }
  .rhinory-preserve h2{ word-break:normal; overflow-wrap:anywhere; }
}

/* styles.css focus ring baseline, scoped. */
.rhinory-preserve a:focus-visible,
.rhinory-preserve button:focus-visible,
.rhinory-preserve summary:focus-visible{ outline:2px solid var(--acacia); outline-offset:2px; }

/* body.nav-solid (prototypes/13/styles.css "Light-open pages"). The prototype
   page sets it: its body is paper, and the translucent resting nav composites
   over paper into muddy gray. Ported exactly as assets/css/wine-hub.css ports
   it for /wine/: the theme paints the nav fill on .rhinory-nav::before, so
   both rules target the pseudo, and the stuck fill is restated so the resting
   rule (0,2,2) cannot freeze it through the scroll transition. The class is
   added only on this route (functions.php) and this file loads only here. */
body.nav-solid .rhinory-nav::before{background:rgba(28,21,16,0.97)}
body.nav-solid .rhinory-nav.is-stuck::before{background:rgba(28,21,16,0.92)}

/* ================= PART 2 · prototype page styles (generated) ================= */

.rhinory-preserve{background:var(--paper);color:var(--ink-warm)}
.rhinory-preserve.rp a:not(.btn){color:var(--burgundy)}
.rhinory-preserve.rp a:not(.btn):hover{color:#3d0000}
.rhinory-preserve .rp-wrap{max-width:1280px;margin:0 auto;padding:0 56px}
.rhinory-preserve .rp-sec{padding:clamp(84px,9vw,120px) 0;border-top:1px solid var(--rule-warm-2);scroll-margin-top:96px}
.rhinory-preserve .rp-paper{background:var(--paper)}
.rhinory-preserve .rp-card{background:var(--card)}
.rhinory-preserve .rp-well{background:var(--card-2)}
.rhinory-preserve .rp-well .rp-lede,.rhinory-preserve .rp-well .rp-p{color:var(--ink-warm)}
.rhinory-preserve .rp-well .rp-keeper .title{color:var(--ink-warm-2)}
.rhinory-preserve .rp-dark{background:#1A1512;color:var(--ivory);border-top-color:rgba(243,242,237,.12)}
.rhinory-preserve .rp-dark .rp-h2{color:var(--ivory)}
.rhinory-preserve .rp-dark .rp-h2 em{color:var(--acacia)}
.rhinory-preserve .rp-dark + .rp-close{border-top:0}
.rhinory-preserve .rp-note + .rp-sec{border-top:0}
.rhinory-preserve .rp-h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(40px,5.2vw,72px);line-height:1;letter-spacing:-.012em;margin:0;color:var(--ink-warm);text-wrap:balance}
.rhinory-preserve .rp-h2 em,.rhinory-preserve .rp-h3 em{font-style:italic;font-weight:500;color:var(--burgundy)}
.rhinory-preserve .rp-h2 .ln{display:block}
.rhinory-preserve .rp-h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(30px,3.2vw,44px);line-height:1.04;letter-spacing:-.01em;margin:0;color:var(--ink-warm);text-wrap:balance}
.rhinory-preserve .rp-lede{margin:0;font-family:"Lora",Georgia,serif;font-size:18px;line-height:1.7;color:var(--ink-warm-2);max-width:56ch;text-wrap:pretty}
.rhinory-preserve .rp-p{margin:0;font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.72;color:var(--ink-warm-2);text-wrap:pretty}
.rhinory-preserve .rp-p em{font-style:italic;color:var(--ink-warm)}
.rhinory-preserve .rp-head{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:end;margin-bottom:clamp(48px,5.5vw,76px)}
.rhinory-preserve .rp-head-stack{grid-template-columns:1fr;gap:24px}
.rhinory-preserve .rp-head-stack .rp-lede{max-width:52ch}
.rhinory-preserve .rp-photo{position:relative;overflow:hidden;background-color:#1a1614;margin:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10)}
.rhinory-preserve .rp-photo-img{position:absolute;inset:0;filter:saturate(.96) contrast(1.03)}
.rhinory-preserve .rp-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch;max-width:600px}
.rhinory-preserve .rp-ctas .btn{font-weight:600;font-size:13px;min-height:52px;flex:1 1 0;min-width:max-content;justify-content:center;white-space:nowrap}
.rhinory-preserve .rp-ctas .btn:only-child{flex:0 0 auto}
.rhinory-preserve.rp .btn-primary{background:var(--acacia);color:#1C1916;border:1px solid var(--acacia);box-shadow:0 12px 34px -14px rgba(185,119,39,.5)}
.rhinory-preserve.rp .btn-primary:hover{background:var(--reserve);border-color:var(--reserve);color:var(--ivory);transform:translateY(-1px)}
.rhinory-preserve.rp .btn-outline{border:1px solid rgba(82,0,0,.45);color:var(--burgundy);background:transparent}
.rhinory-preserve.rp .btn-outline:hover{border-color:var(--burgundy);background:rgba(82,0,0,.05);transform:none}
.rhinory-preserve .rp-reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rhinory-preserve .rp-reveal.is-in{opacity:1;transform:none}
.rhinory-preserve .rp-reveal .rp-rise{opacity:0;transform:translate3d(0,20px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rhinory-preserve .rp-reveal.is-in .rp-rise{opacity:1;transform:none}
.rhinory-preserve .rp-reveal.is-in .rp-rise:nth-child(2){transition-delay:.1s}
.rhinory-preserve .rp-reveal.is-in .rp-rise:nth-child(3){transition-delay:.2s}
.rhinory-preserve .rp-reveal.is-in .rp-rise:nth-child(4){transition-delay:.3s}
.rhinory-preserve .rp-hero{position:relative;min-height:max(640px,min(92svh,960px));display:flex;align-items:flex-end;overflow:hidden;background:#14110f;color:var(--ivory)}
.rhinory-preserve .rp-hero-img{position:absolute;inset:0;--rp-pos:50% 90%;filter:saturate(.92) contrast(1.04);animation:rpSettle 2.6s cubic-bezier(.2,.7,.2,1) both}
.rhinory-preserve .rp-hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,17,15,.28) 0%,rgba(20,17,15,0) 30%,rgba(20,17,15,0) 48%,rgba(20,17,15,.9) 100%),linear-gradient(90deg,rgba(20,17,15,.55) 0%,rgba(20,17,15,0) 55%)}
@keyframes rpSettle{from{transform:scale(1.06)}to{transform:scale(1)}}
.rhinory-preserve .rp-hero-inner{position:relative;z-index:2;width:100%;padding-top:160px;padding-bottom:clamp(56px,7vw,88px)}
.rhinory-preserve .rp-hero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(50px,6.6vw,100px);line-height:.96;letter-spacing:-.016em;margin:0 0 28px;color:var(--ivory);max-width:none;text-wrap:balance;text-shadow:0 1px 26px rgba(10,8,7,.45)}
.rhinory-preserve .rp-hero h1 em{font-style:italic;font-weight:600;color:var(--gold-soft,#E2C58F)}
.rhinory-preserve .rp-hero .rp-lede{color:rgba(243,242,237,.92);max-width:52ch;flex:1 1 380px}
.rhinory-preserve .rp-hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 56px}
.rhinory-preserve .rp-hero-row .rp-ctas{flex:0 1 auto}
.rhinory-preserve .rp-hero .btn-primary{background:var(--acacia);color:var(--reserve);border-color:var(--acacia);box-shadow:0 12px 34px -14px rgba(185,119,39,.55)}
.rhinory-preserve .rp-hero .btn-primary:hover{background:var(--ivory);color:var(--reserve)}
.rhinory-preserve .rp-hero .btn-outline{border-color:rgba(243,242,237,.7);color:var(--ivory)}
.rhinory-preserve .rp-hero .btn-outline:hover{border-color:var(--ivory);background:rgba(243,242,237,.08)}
@media (min-width:1600px){
.rhinory-preserve .rp-hero-img{--rp-pos:50% 8%}
}
@media (max-width:1100px){
.rhinory-preserve .rp-hero{min-height:max(700px,min(92svh,960px))}
.rhinory-preserve .rp-hero-img{--rp-pos:50% 0%}
.rhinory-preserve .rp-hero-img::after{background:linear-gradient(180deg,rgba(20,17,15,.2) 0%,rgba(20,17,15,0) 25%,rgba(20,17,15,.35) 50%,rgba(20,17,15,.94) 78%)}
}
@media (max-width:640px){
.rhinory-preserve .rp-hero{min-height:88svh}
.rhinory-preserve .rp-hero-img{--rp-pos:46% 0%}
.rhinory-preserve .rp-hero-inner{padding-top:120px}
}
.rhinory-preserve .rp-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:22% 50%;display:block;filter:saturate(.92) contrast(1.04)}
.rhinory-preserve .rp-hero h1{text-shadow:0 1px 2px rgba(20,16,13,.55),0 2px 30px rgba(20,16,13,.45)}
.rhinory-preserve .rp-hero .rh-scrim{--scrim-h:52%}
@media (max-width:640px){
.rhinory-preserve .rp-hero .rh-scrim{--scrim-h:64%}
}
.rhinory-preserve .rp-hero-pause{position:absolute;z-index:3;right:56px;bottom:clamp(56px,7vw,88px);width:44px;height:44px;padding:0;cursor:pointer;display:grid;place-items:center} /* paint: .rh-quiet-ctl (style.css) */
.rhinory-preserve .rp-hero-pause[hidden]{display:none}
.rhinory-preserve .rp-hero-pause:focus-visible{outline:2px solid #E2C58F;outline-offset:3px}
.rhinory-preserve .rp-hero-pause svg{display:block}
.rhinory-preserve .rp-hero-pause .i-play,.rhinory-preserve .rp-hero-pause.is-paused .i-pause{display:none}
.rhinory-preserve .rp-hero-pause.is-paused .i-play{display:block}
@media (max-width:1024px){
.rhinory-preserve .rp-hero-pause{right:40px}
}
@media (max-width:640px){
.rhinory-preserve .rp-hero-pause{right:22px;top:100px;bottom:auto}
}
@media (max-width:640px){
.rhinory-preserve .rp-hero-vid{object-position:30% 50%;transition:object-position 1s ease}
/* The film rests on a close-up still; a phone sees about 30% of its width. At
   62% that window was eye and skin, no head (Erik, Nov 6). 34% holds both horns
   and the muzzle, so the frame still reads as Blake's head. */
.rhinory-preserve .rp-hero-vid.is-end{object-position:34% 50%}
}
.rhinory-preserve .rp-blake-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:center}
.rhinory-preserve .rp-blake-body{display:flex;flex-direction:column;gap:22px}
.rhinory-preserve .rp-blake-body .rp-h2{margin-bottom:14px}
.rhinory-preserve .rp-blake-body .rp-ctas{margin-top:10px}
.rhinory-preserve .rp-blake-fig{aspect-ratio:3/4;width:100%}
.rhinory-preserve .rp-blake-fig .rp-photo-img{--rp-pos:50% 50%;transform-origin:50% 40%}
@media (prefers-reduced-motion:no-preference){
.rhinory-preserve .rp-blake-fig .rp-photo-img{animation:rpKB 22s ease-in-out infinite alternate}
}
@keyframes rpKB{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (max-width:900px){
.rhinory-preserve .rp-blake-grid{grid-template-columns:1fr;gap:40px}
.rhinory-preserve .rp-blake-fig{position:static;order:-1}
}
.rhinory-preserve .rp-hab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5.5vw,96px);align-items:center}
.rhinory-preserve .rp-hab-body{display:flex;flex-direction:column;gap:20px}
.rhinory-preserve .rp-hab-body .rp-h2{margin-bottom:4px;font-size:clamp(38px,4.2vw,60px)}
.rhinory-preserve .rp-hab-body .rp-p{font-size:16.5px;line-height:1.7}
.rhinory-preserve .rp-hab-body .rp-lede{margin-bottom:0}
.rhinory-preserve .rp-hab-body .rp-h3{margin:12px 0 0;padding-top:32px;border-top:1px solid var(--rule-warm-2)}
.rhinory-preserve .rp-h3-line{font-size:clamp(24px,2.1vw,30px);line-height:1.2;text-wrap:balance}
.rhinory-preserve .rp-hab-fig{aspect-ratio:3/4;width:100%;order:-1}
.rhinory-preserve .rp-hab-fig .rp-photo-img{--rp-pos:50% 50%}
.rhinory-preserve .rp-time{list-style:none;position:relative;margin:clamp(44px,4.5vw,64px) 0 0;padding:0}
.rhinory-preserve .rp-time li{position:relative;display:grid;grid-template-columns:120px minmax(0,.85fr) minmax(0,1.55fr);gap:clamp(20px,3vw,48px);align-items:baseline;padding:26px 0 26px 44px;border-bottom:1px solid var(--rule-warm)}
.rhinory-preserve .rp-time li:last-child{border-bottom:0}
.rhinory-preserve .rp-time li::before{content:"";position:absolute;z-index:2;left:0;top:34px;width:9px;height:9px;border-radius:50%;background:var(--burgundy);box-sizing:border-box}
.rhinory-preserve .rp-time li:last-child::before{background:var(--paper);border:1px solid var(--burgundy)}
.rhinory-preserve .rp-time li:not(:last-child)::after{content:"";position:absolute;z-index:1;left:4px;top:38px;bottom:-38px;width:1px;background:rgba(82,0,0,.45);transform-origin:top}
.rhinory-preserve .rp-time .yr{font-family:"Josefin Sans",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy)}
.rhinory-preserve .rp-time h3{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:26px;line-height:1.1;color:var(--ink-warm)}
.rhinory-preserve .rp-time p{margin:0;font-family:"Lora",Georgia,serif;font-size:16px;line-height:1.6;color:var(--ink-warm-2);text-wrap:pretty;max-width:62ch}
@media (prefers-reduced-motion:no-preference){
.rhinory-preserve .rp-time.is-armed li::before{transform:scale(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rhinory-preserve .rp-time.is-armed li::after{transform:scaleY(0);transition:transform .7s cubic-bezier(.4,0,.2,1) .25s}
.rhinory-preserve .rp-time.is-armed li > *{opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rhinory-preserve .rp-time.is-armed li > h3{transition-delay:.08s}
.rhinory-preserve .rp-time.is-armed li > p{transition-delay:.16s}
.rhinory-preserve .rp-time.is-armed li.is-in::before{transform:scale(1)}
.rhinory-preserve .rp-time.is-armed li.is-in::after{transform:scaleY(1)}
.rhinory-preserve .rp-time.is-armed li.is-in > *{opacity:1;transform:none}
}
@media (max-width:760px){
.rhinory-preserve .rp-time li{grid-template-columns:1fr;gap:6px;padding:24px 0 24px 36px}
.rhinory-preserve .rp-time li::before{top:30px}
.rhinory-preserve .rp-time li:not(:last-child)::after{top:34px;bottom:-34px}
}
.rhinory-preserve .rp-keepers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.5vw,48px);row-gap:0;align-items:start}
.rhinory-preserve .rp-keeper{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:14px;align-content:start}
.rhinory-preserve .rp-keeper > *{align-self:start}
.rhinory-preserve .rp-keeper .rp-creds{align-self:stretch}
.rhinory-preserve .rp-keeper .rp-photo{aspect-ratio:4/5;margin-bottom:10px}
.rhinory-preserve .rp-keeper-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;filter:saturate(.96) contrast(1.03);opacity:0;transition:opacity .45s ease;pointer-events:none}
.rhinory-preserve .rp-keeper .rp-photo.is-playing .rp-keeper-film{opacity:1}
.rhinory-preserve .rp-keeper-play{position:absolute;right:12px;bottom:12px;z-index:2;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(251,247,238,.55);background:rgba(20,17,15,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#FBF7EE;cursor:pointer;display:grid;place-items:center;transition:opacity .3s ease,background-color .2s ease}
.rhinory-preserve .rp-keeper-play:hover{background:rgba(20,17,15,.75)}
.rhinory-preserve .rp-keeper-play:focus-visible{outline:2px solid #E2C58F;outline-offset:3px}
.rhinory-preserve .rp-keeper-play svg{width:16px;height:16px;display:block}
.rhinory-preserve .rp-keeper-play .i-stop{display:none}
.rhinory-preserve .rp-photo.is-playing .rp-keeper-play .i-play{display:none}
.rhinory-preserve .rp-photo.is-playing .rp-keeper-play .i-stop{display:block}
.rhinory-preserve .rp-photo.is-playing .rp-keeper-play:not(:focus-visible){opacity:0}
.rhinory-preserve.kf-hover .rp-keeper-play:not(:focus-visible){opacity:0;pointer-events:none}
.rhinory-preserve.film-off .rp-keeper-film,.rhinory-preserve.film-off .rp-keeper-play{display:none!important}
.rhinory-preserve .rp-keeper h3{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(32px,3vw,42px);line-height:1;letter-spacing:-.01em;color:var(--ink-warm)}
.rhinory-preserve .rp-keeper .title{margin:-4px 0 2px;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:22px;line-height:1.2;color:var(--rhino-warm)}
.rhinory-preserve .rp-creds{list-style:none;margin:0;padding:16px 0;border-block:1px solid var(--rule-warm-2);display:flex;flex-direction:column;gap:8px;min-height:7.6em}
.rhinory-preserve .rp-creds li{font-family:"Lora",Georgia,serif;font-size:15px;line-height:1.5;color:var(--ink-warm)}
.rhinory-preserve .rp-bio summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-family:"Josefin Sans",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--burgundy)}
.rhinory-preserve .rp-bio summary::-webkit-details-marker{display:none}
.rhinory-preserve .rp-bio summary::after{content:"+";font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:500;letter-spacing:0;line-height:1;transition:transform .25s ease}
.rhinory-preserve .rp-bio[open] summary::after{transform:rotate(45deg)}
.rhinory-preserve .rp-bio summary:hover{color:#3d0000}
.rhinory-preserve .rp-bio-body{display:flex;flex-direction:column;gap:16px;padding:6px 0 4px}
.rhinory-preserve .rp-bio-body .rp-p{font-size:16px}
.rhinory-preserve .rp-bio-body .rp-p em{font-style:italic;color:var(--burgundy)}
.rhinory-preserve .rp-note{position:relative;height:clamp(460px,44vw,680px);overflow:hidden;background:#14110f;color:var(--ivory)}
.rhinory-preserve .rp-note-fig{position:absolute;inset:0;margin:0}
.rhinory-preserve .rp-note-fig .rp-photo-img{--rp-pos:12% 100%}
.rhinory-preserve .rp-note-fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,15,0) 32%,rgba(20,17,15,.78) 52%,rgba(20,17,15,.93) 68%),linear-gradient(0deg,rgba(20,17,15,.4),rgba(20,17,15,0) 45%)}
.rhinory-preserve .rp-note-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:flex-end}
.rhinory-preserve .rp-note .rp-quote{width:min(46%,520px);margin:0}
.rhinory-preserve .rp-note .rp-quote blockquote{color:var(--ivory);text-wrap:pretty;font-size:clamp(28px,2.9vw,42px);line-height:1.16;margin-bottom:22px}
.rhinory-preserve .rp-note .rp-quote figcaption{color:rgba(243,242,237,.86);font-size:12px;letter-spacing:.14em}
.rhinory-preserve .rp-note .rp-quote .nw{display:block;white-space:nowrap}
@media (max-width:1100px){
.rhinory-preserve .rp-note .rp-quote{width:min(52%,480px)}
}
@media (max-width:900px){
.rhinory-preserve .rp-note{height:auto}
.rhinory-preserve .rp-note-fig{position:relative;aspect-ratio:4/5}
.rhinory-preserve .rp-note-fig::after{display:none}
/* the 355.6% phone zoom on the bundled still lives in Part 3 */
.rhinory-preserve .rp-note-inner{display:block;padding-top:40px;padding-bottom:64px}
.rhinory-preserve .rp-note .rp-quote{width:auto}
.rhinory-preserve .rp-note .rp-quote .nw{display:inline;white-space:normal}
}
.rhinory-preserve .rp-quote blockquote{margin:0 0 24px;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(30px,3.3vw,46px);line-height:1.2;letter-spacing:-.006em;color:var(--ink-warm);text-wrap:balance}
.rhinory-preserve .rp-quote figcaption{font-family:"Josefin Sans",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.16em;line-height:1.6;text-transform:uppercase;color:var(--rhino-warm)}
.rhinory-preserve .rp-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(32px,4vw,64px);row-gap:clamp(12px,1.5vw,20px)}
.rhinory-preserve .rp-facts li{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:12px;align-content:start;padding:24px 0 28px;border-top:1px solid var(--rule-warm-2)}
.rhinory-preserve .rp-facts h3{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(24px,2.1vw,28px);line-height:1.1;letter-spacing:-.006em;color:var(--ink-warm)}
.rhinory-preserve .rp-facts p{margin:0;font-family:"Lora",Georgia,serif;font-size:16.5px;line-height:1.68;color:var(--ink-warm);max-width:62ch;text-wrap:pretty}
@media (max-width:900px){
.rhinory-preserve .rp-facts{grid-template-columns:1fr;row-gap:0}
.rhinory-preserve .rp-facts li{grid-row:auto;grid-template-rows:auto}
/* Stacked, the last fact's 28px foot added to the section's own padding and
   left a tall empty cream band above the Members photo (Erik, Nov 6). */
.rhinory-preserve .rp-facts li:last-child{padding-bottom:0}
}
.rhinory-preserve .rp-mem{padding:clamp(72px,7vw,96px) 0}
.rhinory-preserve .rp-mem-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5.5vw,88px);align-items:stretch}
.rhinory-preserve .rp-mem-fig{width:100%;height:100%;min-height:480px}
.rhinory-preserve .rp-mem-fig .rp-photo-img{--rp-pos:50% 35%}
@media (max-width:1200px){
.rhinory-preserve .rp-mem-fig .rp-photo-img{--rp-pos:55% 100%}
}
.rhinory-preserve .rp-mem-body{display:flex;flex-direction:column;gap:20px}
.rhinory-preserve .rp-tiers{list-style:none;margin:6px 0 8px;padding:0;border-top:1px solid var(--rule-warm-2)}
.rhinory-preserve .rp-tiers li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule-warm)}
.rhinory-preserve .rp-tiers .n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:24px;line-height:1.1;color:var(--ink-warm)}
.rhinory-preserve .rp-tiers .d{display:flex;flex-direction:column;gap:2px;font-family:"Lora",Georgia,serif;font-size:16px;line-height:1.55;color:var(--ink-warm-2)}
@media (min-width:1201px){
.rhinory-preserve .rp-tiers .d span{white-space:nowrap}
}
@media (max-width:1200px){
.rhinory-preserve .rp-tiers li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:900px){
.rhinory-preserve .rp-mem-grid{grid-template-columns:1fr;gap:32px}
.rhinory-preserve .rp-mem-fig{height:auto;min-height:0;aspect-ratio:16/10}
/* Top, not bottom: at 100% the band cut the man's head off (Erik, Nov 6); both faces
   sit in the photo's upper half. */
.rhinory-preserve .rp-mem-fig .rp-photo-img{--rp-pos:50% 4%}
}
@media (max-width:560px){
.rhinory-preserve .rp-tiers li{grid-template-columns:1fr;gap:4px}
}
.rhinory-preserve .rp-voices{text-align:center}
.rhinory-preserve .rp-voices .rp-h2{margin-bottom:clamp(40px,4.5vw,60px)}
.rhinory-preserve .rcpt-rotator{position:relative;max-width:860px;margin:0 auto;min-height:260px}
.rhinory-preserve .rcpt-slide{margin:0;display:none;flex-direction:column;align-items:center;gap:24px}
.rhinory-preserve .rcpt-slide.is-active{display:flex;animation:rpFade .6s ease}
@keyframes rpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rhinory-preserve .rcpt-stars{color:var(--acacia);letter-spacing:.3em;font-size:16px}
.rhinory-preserve .rcpt-slide blockquote{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(26px,2.7vw,36px);line-height:1.3;color:var(--ivory);text-wrap:pretty}
.rhinory-preserve .rcpt-attr{font-family:"Josefin Sans",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,242,237,.72)}
.rhinory-preserve .rcpt-dots{display:flex;justify-content:center;gap:4px;margin-top:36px}
.rhinory-preserve .rcpt-dot{width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.rhinory-preserve .rcpt-dot::before{content:"";width:10px;height:10px;border-radius:50%;border:1px solid var(--acacia);transition:background .25s}
.rhinory-preserve .rcpt-dot.is-on::before{background:var(--acacia)}
.rhinory-preserve .rcpt-pause{width:44px;height:44px;border:0;background:transparent;padding:0;margin-left:8px;cursor:pointer;display:grid;place-items:center;color:var(--acacia)}
.rhinory-preserve .rcpt-pause[hidden]{display:none}
.rhinory-preserve .rcpt-pause svg{width:12px;height:12px;display:block}
.rhinory-preserve .rcpt-pause .i-play,.rhinory-preserve .rcpt-pause.is-paused .i-pause{display:none}
.rhinory-preserve .rcpt-pause.is-paused .i-play{display:block}
.rhinory-preserve .rcpt-dot:focus-visible,.rhinory-preserve .rcpt-pause:focus-visible{outline:2px solid #E2C58F;outline-offset:2px}
.rhinory-preserve .rp-close{--rp-closer-gray:color-mix(in oklab,var(--rhino-warm) 16%,var(--paper));background:var(--rp-closer-gray);border-top:1px solid var(--rule-warm-2);padding:clamp(84px,9vw,120px) 0}
.rhinory-preserve .rp-close-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5.5vw,88px);align-items:center}
.rhinory-preserve .rp-close-fig{aspect-ratio:16/10;width:100%}
.rhinory-preserve .rp-close-fig .rp-photo-img{--rp-pos:50% 75%}
.rhinory-preserve .rp-close-fig .rh-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;filter:saturate(.96) contrast(1.03)}
.rhinory-preserve .rp-close .rp-h2{font-size:clamp(38px,4.4vw,62px);margin-bottom:32px}
.rhinory-preserve .rp-close .rp-ctas{flex-direction:column;flex-wrap:nowrap;max-width:none}
.rhinory-preserve .rp-close .rp-ctas .btn{flex:0 0 auto;justify-content:space-between}
.rhinory-preserve .rp-close .btn-outline{border-color:var(--burgundy)}
@media (max-width:760px){
.rhinory-preserve .rp-keepers{grid-template-columns:1fr;row-gap:0;max-width:520px;margin:0 auto}
.rhinory-preserve .rp-keeper{margin-bottom:64px}
.rhinory-preserve .rp-keeper:last-child{margin-bottom:0}
}
/* Side gutters only: a `padding` shorthand here zeroed the top and bottom that
   .rp-hero-inner and .rp-note-inner set, so on tablets and phones "Plan a visit"
   sat flush on the hero's bottom edge and Christine's quote ran into the photo
   above it (Erik's phone pass, Nov 6). */
@media (max-width:1024px){
.rhinory-preserve .rp-wrap{padding-left:40px;padding-right:40px}
}
@media (max-width:900px){
.rhinory-preserve .rp-head,.rhinory-preserve .rp-hab-grid,.rhinory-preserve .rp-close-grid{grid-template-columns:1fr;gap:36px}
.rhinory-preserve .rp-close-fig{position:static;max-width:none}
.rhinory-preserve .rp-hab-fig{order:-1;aspect-ratio:4/5;position:static}
}
@media (max-width:640px){
.rhinory-preserve .rp-wrap{padding-left:22px;padding-right:22px}
.rhinory-preserve .rp-ctas{max-width:none}
.rhinory-preserve .rp-ctas .btn,.rhinory-preserve .rp-ctas .btn:only-child{flex:1 1 100%;min-width:0}
.rhinory-preserve .rp-p{font-size:16.5px}
}
@media (max-width:640px){
.rhinory-preserve .rp-ctas .btn{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
.rhinory-preserve .rp-reveal,.rhinory-preserve .rp-reveal .rp-rise{opacity:1;transform:none;transition:none}
.rhinory-preserve .rp-hero-img{animation:none}
.rhinory-preserve .rcpt-slide.is-active{animation:none}
}


/* ================= PART 3 · port-only ================= */

/* Photographs. The prototype paints each photo as a CSS background; the port
   renders a real <img> (a WebP <picture> through rhinory_core_picture(), and
   an operator-replaceable media pick). object-fit:cover with object-position
   reproduces background-size:cover with background-position exactly, so the
   crop is the prototype's --rp-pos for the slot at each width. An operator's
   focal point (--photo-focal, set inline by render.php through the shared
   rhinory_v4_photo_focal_style()) wins at every width. */
.rhinory-preserve .rp-photo-img img,
.rhinory-preserve .rp-hero-img img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:var(--photo-focal, var(--rp-pos, 50% 50%));
}

/* The field note's phone crop is a 355.6% zoom on the bundled still, not a
   cover crop: background-size:355.6% auto at 16.7% 99%. For the 16:9 file in a
   4:5 frame that resolves to these offsets ((1 - 3.556) x 16.7% of the width;
   (1.25 - 2.0) x 99% of the width over a 1.25-width height). Tuned to that one
   file, so it applies only while the bundled still shows with no focal point
   (render.php adds .rp-tuned); a replaced photo or a set focal point gets the
   ordinary cover crop. */
@media (max-width:900px){
  .rhinory-preserve .rp-note-fig.rp-tuned .rp-photo-img img{
    inset:auto; left:-42.685%; top:-59.42%; width:355.6%; height:auto; object-fit:fill;
  }
}

/* PROTOTYPE DEFECT, NOT REPRODUCED. At 900px and under the prototype sets
   .rp-blake-fig, .rp-hab-fig and .rp-close-fig to position:static (a leftover
   from an earlier sticky layout; none is sticky now). That removes the frame
   as the containing block, so the absolutely positioned photo fills the whole
   section and covers its text: on a phone the Blake bio, the habitat timeline
   and the closing heading and CTAs sit under a photo. Restoring the frame
   keeps every photo the shape the prototype draws it at every other width.
   Same (0,2,0) as the Part 2 rules it overrides, and later, so it wins. */
@media (max-width:900px){
  .rhinory-preserve .rp-blake-fig,
  .rhinory-preserve .rp-hab-fig,
  .rhinory-preserve .rp-close-fig{ position:relative; }
}

/* The 320px close-CTA overflow fix that lived here (labels wrap at 640px and
   under) is now the prototype's own rule for every CTA row (Part 2). */

/* Follow-ups 5: the existing accessible button covers the entire media.
   Touch keeps its circle; keyboard focus has a visible label. */
.rhinory-preserve .rp-keeper-play, .rhinory-preserve .rp-keeper-play:hover {
 inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0;
 background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
 opacity: 1 !important; pointer-events: auto !important; touch-action: manipulation;
}
.rhinory-preserve .rp-keeper-play::before {
 content: ""; position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px;
 box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(251,247,238,.55);
 background: rgba(20,17,15,.65);
}
.rhinory-preserve .rp-keeper-play svg { position: absolute; right: 26px; bottom: 26px; }
.rhinory-preserve .rp-keeper-play:focus-visible { outline-offset: -4px; }

/* Round 6: a quiet desktop image; the full-media button stays in the tab order. */
.rhinory-preserve .rp-keeper-play:focus-visible::after {
 content: attr(aria-label); position: absolute; left: 12px; right: 70px; bottom: 12px;
 padding: 10px 12px; background: #211B18; color: #FBF7EE;
 font-family: "Lora", Georgia, serif; font-size: 14px; line-height: 1.4; text-align: left;
}
@media (hover: hover) and (pointer: fine) {
 .rhinory-preserve .rp-keeper-play::before, .rhinory-preserve .rp-keeper-play svg { visibility: hidden; }
 .rhinory-preserve .rp-keeper-play:focus-visible::after { right: 12px; }
}