/* Rhonda's existing palette, type and visual assets, with ordinary page flow. */
html { scroll-padding-top: 94px; scroll-behavior: smooth; }
body { overflow-x: clip; }
.chrome { position: sticky; top: 0; min-height: 64px; }
.soundbar { position: absolute; top: 86px; }
.hero { max-width: 1400px; margin: 0 auto; padding: 54px var(--sc-gutter) 40px; display: grid; grid-template-columns: 1.08fr 1fr; gap: 12px; align-items: center; }
.hero__copy { position: relative; inset: auto; translate: none; max-width: 38rem; padding-block: 50px 24px; }
.hero__copy > :not(.hero__name) { opacity: 1; transform: none; animation: none !important; }
.hero__copy .eyebrow { font-size: .72rem; letter-spacing: .1em; line-height: 1.7; }
.hero__name { margin-top: 26px; font: 600 1.15rem/1.5 var(--sc-font-text); color: var(--sc-ink-soft); }
.hero h1 { font-size: clamp(3.6rem, 6.3vw, 6rem); margin-top: 10px; }
.hero .sc-lede { font-size: clamp(1.05rem, 1.45vw, 1.25rem); line-height: 1.65; max-width: 45ch; display: block; }
.hero .actions { margin-top: 28px; }
.hero__signature { font-size: 1rem; line-height: 1.5; color: var(--sc-ink-soft); margin-top: 40px; }
.hero__signature em { font-style: normal; color: var(--sc-ink); }
.hero__visual { position: relative; height: clamp(560px, 47vw, 720px); min-width: 0; isolation: isolate; }
.hero__visual::before { content: ''; position: absolute; inset: 8% 0 14%; border-radius: 50%; background: radial-gradient(ellipse, #31525440, transparent 65%); z-index: -1; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; }
.hero__fallback { position: absolute; height: 83%; width: 92%; object-fit: contain; inset: 2.5% 4%; }
.art-ready .hero__fallback { visibility: hidden; }
.art-ready .hero__canvas { opacity: 1; }
.visual-controls { position: absolute; bottom: 44px; left: 0; right: 0; display: flex; justify-content: center; gap: 18px; }
.visual-controls button { color: var(--sc-ink-soft); background: transparent; border: 0; border-bottom: 1px solid var(--sc-hairline); padding: 8px 0; font: 500 .82rem/1.2 var(--sc-font-text); cursor: pointer; }
.visual-controls button:hover { color: var(--sc-ink); border-color: var(--sc-accent); }
.portrait-stages { position: absolute; bottom: 87px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.portrait-stages button { background: transparent; border: 1px solid transparent; border-radius: 20px; color: var(--sc-ink-soft); padding: 7px 13px; font: 500 .78rem/1.2 var(--sc-font-text); cursor: pointer; }
.portrait-stages button[aria-pressed="true"] { color: var(--sc-ink); border-color: #a99bff70; background: #a99bff12; }
.portrait-stages button:hover { color: var(--sc-ink); }
.portrait-stages button:focus-visible, .visual-controls button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.visual-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font: italic 1rem/1.5 var(--sc-font-display); color: var(--sc-ink-soft); }
.selected { padding: 82px var(--sc-gutter) 64px; }
.section-intro, .selected-grid { max-width: 1180px; margin-inline: auto; }
.section-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 54px; align-items: end; margin-bottom: 40px; }
.section-intro h2 { margin: 16px 0 0; font: 600 clamp(2.5rem, 4vw, 3.8rem)/1.1 var(--sc-font-display); letter-spacing: -.035em; }
.section-intro > p { max-width: 40ch; margin: 0 0 4px; color: var(--paper-soft); font-size: 1.1rem; line-height: 1.7; }
.selected-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.feature { overflow: hidden; border: 1px solid var(--paper-line); border-radius: 16px; background: #fffdf8; }
.feature-art { display: flex; align-items: end; justify-content: center; gap: 4%; height: 310px; padding: 20px 24px 0; background: #dfe7e0; }
.feature-art img { width: 28%; height: 93%; object-fit: contain; object-position: center bottom; }
.feature-art img:nth-child(2) { width: 35%; height: 84%; }
.feature-copy { padding: 28px; }
.feature-copy .eyebrow { color: var(--paper-soft); font-size: .7rem; line-height: 1.5; }
.feature h3 { margin: 14px 0 12px; font: 600 2rem/1.15 var(--sc-font-display); letter-spacing: -.02em; }
.feature p:not(.eyebrow) { color: var(--paper-soft); line-height: 1.6; margin: 12px 0; }
.feature p.contribution { font-size: .91rem; padding-top: 14px; border-top: 1px solid var(--paper-line); }
.feature-link { font-weight: 600; text-underline-offset: 5px; display: inline-block; margin-top: 14px; }
.preview-note { display: block; color: var(--paper-soft); font-size: .78rem; margin-top: 12px; }
/* Still Becoming Me leads the grid at full width: video left, how it was made right. */
.feature--video { grid-column: 1 / -1; display: grid; grid-template-columns: 1.75fr 1fr; }
.video-frame { background: #13282D; display: flex; align-items: center; }
.video-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #13282D; }
.made-steps { list-style: none; margin: 18px 0 6px; padding: 0; }
.made-steps li { display: flex; gap: 18px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--paper-line); font-weight: 600; }
.made-steps span { font: 500 .75rem/1 var(--sc-font-mono); color: var(--paper-soft); }
.twin-sheet { margin: 16px 0 4px; }
.twin-sheet img { display: block; width: 100%; height: auto; border: 1px solid var(--paper-line); border-radius: 10px; }
.twin-sheet figcaption { color: var(--paper-soft); font-size: .8rem; line-height: 1.5; margin-top: 8px; }
/* Deep ink teal: the video card shares the header's color, like a small theater. */
.feature--video { background: #13282D; border-color: #13282D; color: #F3EFE6; }
.feature--video .feature-copy .eyebrow, .feature--video p:not(.eyebrow), .feature--video .made-steps span, .feature--video .twin-sheet figcaption { color: #B9C7C3; }
.feature--video .made-steps li, .feature--video p.contribution { border-top-color: #ffffff22; }
.feature--video .twin-sheet img { border-color: #ffffff22; }
.team-art { height: 310px; background: #dcd8ef; padding: 28px 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; color: #383452; }
.team-art__title { font: 500 1.65rem/1.15 var(--sc-font-display); margin-bottom: 7px; }
.team-art > span:not(:first-child) { display: flex; gap: 24px; align-items: center; font: 500 .75rem/1.2 var(--sc-font-mono); padding-top: 13px; border-top: 1px solid #38345230; }
.team-art b { font: 500 1.05rem/1.2 var(--sc-font-text); }
.all-work { display: block; width: fit-content; margin: 34px auto 0; font-weight: 600; text-underline-offset: 6px; }
.work { padding: 80px var(--sc-gutter); }
.work-wrap { max-width: 1180px; margin: auto; }
.rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; padding: 0; }
.rail__lead { grid-column: 1/-1; padding: 0 0 12px; }
.rail__lead h2 { font-size: clamp(2.5rem,4vw,3.8rem); line-height: 1.1; }
.rail__lead p:not(.eyebrow) { max-width: 58ch; font-size: 1.1rem; }
.project { padding: 28px; min-height: 270px; gap: 16px; }
.project h3 { margin-top: 6px; font-size: 1.85rem; }
.project p { max-width: 46ch; }
.rail__note { grid-column: 1/-1; font-size: 1.35rem; padding: 20px 0 0; max-width: 42rem; }
.about__wrap, .book__wrap { padding-block: 76px; max-width: 1320px; }
.about blockquote { font-size: clamp(2rem,3vw,2.8rem); }
.about__voice { min-width: 0; }
.facts { margin-top: 24px; }
.scheduler { min-height: 20rem; }
@media (max-width: 860px) {
  .chrome { padding-block: 14px; }
  .soundbar { top: 80px; }
  .hero { grid-template-columns: 1fr; padding-top: 64px; gap: 0; }
  .hero__copy { padding: 28px 0 0; max-width: 42rem; }
  .hero__name { white-space: normal; }
  .hero h1 { font-size: clamp(3.25rem,9vw,5rem); }
  .hero .sc-lede { font-size: 1.06rem; }
  .hero__signature { margin-top: 26px; }
  .hero__visual { height: 540px; max-width: 540px; width: 100%; justify-self: center; margin-top: 14px; }
  .section-intro { grid-template-columns: 1fr; gap: 20px; }
  .selected-grid, .feature--video { grid-template-columns: 1fr; }
  .feature-art, .team-art { height: 280px; }
  .selected, .work { padding-block: 54px; }
  .about__wrap, .book__wrap { grid-template-columns: 1fr; padding-block: 54px; gap: 30px; }
  .facts { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .rail { grid-template-columns: 1fr; }
  .hero__visual { height: 480px; }
  .hero .actions { gap: 20px; }
  .hero__copy .eyebrow { max-width: 28ch; }
  .project { min-height: 0; }
  .feature-copy { padding: 24px; }
  .brand { font-size: .96rem; }
  .chrome .btn { padding-inline: 12px; font-size: .78rem; }
  .chrome nav { gap: 8px; }
  .menu-btn { font-size: .78rem; padding-inline: 10px; }
  .visual-caption { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }