/* opheliapastrana.com/bio/ ยท register B (spec bio-v1 at v1.3, 2026-10-10): 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: the headings of the rail, of the video and of each bio */ .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 length switch (v1.3): a tablist of three real buttons joined in one row, a segmented control. Three equal cells inside a 1px --ink frame, at least 44px tall; the selected cell is filled (--ink-fill, --on-ink-fill), the others are transparent and take --haze under the pointer; the focus ring is site.css's. Below 560px the use word sits under the name, each on its own line; the middle dot between them is then clipped from view but stays in the button's accessible name. The tablist carries the hidden attribute until the inline script runs, and display:grid would override it, hence the [hidden] rule. */ .bio-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--ink); margin:0 0 1.6rem; } .bio-tabs[hidden]{ display:none; } .bio-tabs [role="tab"]{ position:relative; min-height:44px; margin:0; padding:.5rem .4rem; border:0; border-radius:0; background:transparent; color:var(--ink); cursor:pointer; white-space:nowrap; font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.1em; line-height:1.4; text-transform:uppercase; } .bio-tabs [role="tab"] + [role="tab"]{ border-left:1px solid var(--ink); } .bio-tabs [role="tab"]:hover{ background:var(--haze); } .bio-tabs [role="tab"][aria-selected="true"]{ background:var(--ink-fill); color:var(--on-ink-fill); } .bio-tabs [role="tab"]:focus-visible{ z-index:1; } @media (max-width:559.98px){ .bio-tabs .name, .bio-tabs .use{ display:block; } .bio-tabs .sep{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } } /* one bio per panel: its heading, one selectable block (one

per paragraph; a long-press selects the whole block, breaks included), then its facts line and its Copiar button. Without JavaScript the three panels show stacked, each under its heading. The script hides two of them with the hidden attribute and takes the headings out of view (site.css's .sr-only: they stay in the outline), so with one bio on screen its first line sits at the same place whichever is selected. The Copiar button carries the hidden attribute until the script runs. */ .bio-panel + .bio-panel{ margin-top:2.6rem; } .bio-switch.is-live .bio-panel + .bio-panel{ margin-top:0; } .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-fill); color:var(--on-ink-fill); border-color:var(--ink-fill); } /* the reel (v1.3): in the main column, under the bios and their Copiar button, as wide as the column */ .bio-video{ margin-top:2.4rem; } .bio-video .bio-label{ margin-bottom:1rem; } /* rail: photos and credentials. 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, after css/home.css: 16:9 box with a 1px --rule border, red play button. The poster is the reel's own 16:9 cover and fills the box whole, with no object-fit crop: the box is sized by its content (content-box), so the picture area is exactly 16:9 and the border sits outside it. Before JavaScript runs the play element is a link; the script turns it into a