/* opheliapastrana.com/bio/ · register B (spec bio-v1 at v1.2, 2026-10-07): light, like the homepage.
   Tokens, bar, footer, type and focus rings live in /css/site.css and apply unchanged; this sheet
   holds only what exists here. The video facade mirrors css/home.css (.yt-facade, .yt-play) without
   its transitions: nothing on this page animates until the player is tapped. */

/* no motion anywhere on this page, except the player after a tap */
.bio-page, .bio-page *, .bio-page *::before, .bio-page *::after{ transition:none !important; animation:none !important; }

/* layout: one column; from 900px, main column (max 62ch) + 360px rail */
.bio-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:2.5rem; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem); }
.bio-main{ max-width:62ch; min-width:0; }
.bio-rail{ min-width:0; display:flex; flex-direction:column; gap:2.4rem; border-top:1px solid var(--rule); padding-top:2rem; }
@media (min-width:900px){
  .bio-grid{ grid-template-columns:minmax(0,1fr) 360px; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
  .bio-rail{ border-top:none; padding-top:0; border-left:1px solid var(--rule); padding-left:clamp(1.4rem,3vw,2.2rem); }
}

/* title block: the eyebrow keeps site.css's --signal */
.bio-main h1{ font-size:clamp(2.4rem,1rem + 4.6vw,4.4rem); margin-bottom:1.6rem; }

/* the mono label voice: rail headings and the hidden bio headings */
.bio-label{
  font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.14em; line-height:1.5;
  text-transform:uppercase; color:var(--mute); text-wrap:pretty; margin:0 0 .9rem;
}

/* the tabs (v1.2): three content-sized labels in a row that never wraps, 1.5rem apart, no borders
   or backgrounds; the checked one is --ink with a 2px --signal underline, the nav's active-state
   language. The fieldset is the grid so the radios stay siblings of .bio-texts for the CSS-only
   switching below; the last column absorbs the remaining width so .bio-texts spans it all. */
.bio-switch{ display:grid; grid-template-columns:repeat(3,max-content) minmax(0,1fr); column-gap:1.5rem; align-items:end; border:0; padding:0; margin:0; min-width:0; }
.bio-switch input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.bio-switch label{
  font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.1em; line-height:1.4;
  text-transform:uppercase; color:var(--mute); white-space:nowrap; cursor:pointer;
  border:0; background:none; padding:.35rem 0 .4rem;
}
.bio-switch input:not(:checked) + label:hover{ color:var(--ink); }
.bio-switch input:checked + label{ color:var(--ink); border-bottom:2px solid var(--signal); padding-bottom:calc(.4rem - 2px); }
.bio-switch input:focus-visible + label{ outline:3px solid var(--signal); outline-offset:3px; }
@media (max-width:479.98px){ .bio-switch .use{ display:none; } }
.bio-texts{ grid-column:1 / -1; margin-top:1.6rem; }

/* one bio: a visually hidden heading (the no-CSS fallback and the outline), one selectable block
   (one <p> per paragraph; a long-press selects the whole block, breaks included), then its facts
   line and its Copiar button. The button carries the hidden attribute until the script runs. */
.bio-text{ user-select:all; -webkit-user-select:all; }
.bio-text p{ font-size:1.3rem; line-height:1.6; color:var(--ink); margin:0 0 1em; }
.bio-text p:last-child{ margin-bottom:0; }
.bio-meta{ font-family:var(--mono); font-weight:500; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin:1.4rem 0 0; }
.copy{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; background:transparent; color:var(--ink); border:1px solid var(--rule); padding:.5rem .7rem; cursor:pointer; font-weight:500; margin-top:.8rem; }
.copy:hover{ border-color:var(--signal); color:var(--signal); }
.copy.ok{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* CSS-only switching. No base rule hides anything: without this sheet the three bios show stacked,
   each under its own heading. The checked radio shows its bio and hides the other two together
   with their headings, facts lines and buttons. */
#len-long:checked ~ .bio-texts #bio-long,
#len-medium:checked ~ .bio-texts #bio-medium,
#len-short:checked ~ .bio-texts #bio-short{ display:block; }
#len-long:checked ~ .bio-texts #bio-medium, #len-long:checked ~ .bio-texts #bio-medium-label, #len-long:checked ~ .bio-texts #bio-medium-meta, #len-long:checked ~ .bio-texts #bio-medium-copy,
#len-long:checked ~ .bio-texts #bio-short, #len-long:checked ~ .bio-texts #bio-short-label, #len-long:checked ~ .bio-texts #bio-short-meta, #len-long:checked ~ .bio-texts #bio-short-copy,
#len-medium:checked ~ .bio-texts #bio-long, #len-medium:checked ~ .bio-texts #bio-long-label, #len-medium:checked ~ .bio-texts #bio-long-meta, #len-medium:checked ~ .bio-texts #bio-long-copy,
#len-medium:checked ~ .bio-texts #bio-short, #len-medium:checked ~ .bio-texts #bio-short-label, #len-medium:checked ~ .bio-texts #bio-short-meta, #len-medium:checked ~ .bio-texts #bio-short-copy,
#len-short:checked ~ .bio-texts #bio-long, #len-short:checked ~ .bio-texts #bio-long-label, #len-short:checked ~ .bio-texts #bio-long-meta, #len-short:checked ~ .bio-texts #bio-long-copy,
#len-short:checked ~ .bio-texts #bio-medium, #len-short:checked ~ .bio-texts #bio-medium-label, #len-short:checked ~ .bio-texts #bio-medium-meta, #len-short:checked ~ .bio-texts #bio-medium-copy{ display:none; }

/* rail: photos, credentials, video. Link underline and hover come from site.css (p a). */
.bio-rail .bio-label{ margin-bottom:1rem; }
.bio-photos{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.bio-photos figure{ margin:0; }
.bio-photos a{ display:block; background:var(--haze); }
.bio-photos img{ width:100%; height:auto; }
.bio-photos figcaption{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-top:.5rem; }
p.bio-more{ margin:1rem 0 0; font-size:.94rem; }
.bio-creds{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.bio-creds li{ padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:.94rem; line-height:1.5; }

/* video facade, copied from css/home.css: 16:9 box with a 1px --rule border, poster as <img> with
   object-fit, red play button. Before JavaScript runs the play element is a link; the script turns
   it into a <button>. */
.yt-facade{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background-color:var(--ink); border:1px solid var(--rule); }
.yt-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.yt-play{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,18,18,.25); color:inherit; cursor:pointer;
}
.yt-play svg{ width:64px; height:64px; }
.yt-play svg circle{ fill:var(--signal); }
.yt-play:hover, .yt-play:focus-visible{ background:rgba(18,18,18,.45); }
.yt-play:focus-visible{ outline-offset:-4px; }
.yt-play:hover svg circle, .yt-play:focus-visible svg circle{ fill:#fff; }
.yt-play:hover svg path, .yt-play:focus-visible svg path{ fill:var(--signal); }