/* Run 333: standalone portfolio presentation over the preserved R2 composition. */
:root {
  --coal:#111316; --white:#f7f2ea; --quiet:#c5c0b9; --amber:#ffbf90;
  --line:#7a746c; --surface:#1b1d21; --bench:#1a1c20;
  --notes:#202324; --footer:#121418; --control:#212328;
  --selected-bg:#ffbf90; --selected-ink:#25160f;
  --shadow:#040405b0;
}
:root[data-theme="light"] {
  color-scheme:light;
  --coal:#ded3c4; --white:#24211e; --quiet:#504840; --amber:#773b22;
  --line:#73665a; --surface:#e9dfd1; --bench:#ece3d7;
  --notes:#d4c6b5; --footer:#d9cebf; --control:#e5dacc;
  --selected-bg:#693821; --selected-ink:#fff3e6; --shadow:#4a352c40;
}
html { scroll-padding-top:var(--header-offset,106px); }
body.menu-open { overflow:hidden; }
.no-script { padding:1rem 5%; max-width:none; background:var(--surface); }
#brand-header { background:var(--coal); box-shadow:0 6px 24px var(--shadow); }
.header-actions button { display:inline-flex; align-items:center; justify-content:center; gap:.4em; }
.theme-icon { display:inline-block; inline-size:.85em; block-size:.85em; flex:none;
  border:1px solid currentColor; border-radius:50%;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
#theme-toggle { min-inline-size:4.4em; }
button { touch-action:manipulation; }
button[aria-pressed=true],button[aria-selected=true] {
  background:var(--selected-bg); color:var(--selected-ink); border-color:var(--selected-bg);
}
button:hover,button:focus-visible { border-color:var(--amber); }
#mega-menu { background:var(--surface); color:var(--white); max-height:calc(100dvh - 32px); }
#mega-menu:not([data-level="detail"]) .mega-top { flex-wrap:wrap; }
.mega-links a:hover { text-decoration:underline; }
.hero {
  --coal:#111316; --white:#f7f2ea; --quiet:#d0c7be; --amber:#ffbf90;
  --line:#81766c; color:var(--white); min-height:0;
  padding-top:clamp(34px,4.5vw,72px);
}
.hero:after { background:linear-gradient(90deg,#111316f5 0%,#111316e0 42%,#1113165c 78%,#11131627),linear-gradient(0deg,#111316 0%,transparent 45%); }
.hero-intro { flex-wrap:wrap; column-gap:32px; row-gap:10px; justify-content:flex-start; }
.hero-intro .eyebrow { padding:.38em .66em; border:1px solid #92765f; background:#161719; align-self:flex-start; }
.hero-bottom { border-top:1px solid #94817480; background:#111316ef; padding-inline:18px; }
.hero-bottom p { color:var(--quiet); }
.hero-bottom .small { letter-spacing:.1em; }
.hero-object figcaption { background:#101215ed; color:#ded2c7; }
.hero-object img { object-position:83% center; }
.hero h1 { max-width:10.5em; }
.hero h1 em { line-height:1.18; }
.chapter-index {
  position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(24px,4vw,60px); border-block-start:1px solid var(--line); gap:0 1.1rem;
}
.chapter-index a {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.75em;
  padding:1em .2em; min-height:58px; color:var(--white); font-size:.875rem; text-decoration:none;
}
.chapter-index a span { color:var(--amber); font-size:.76em; font-variant-numeric:tabular-nums; }
.chapter-index a:hover,.chapter-index a[aria-current] { color:var(--amber); text-decoration:underline; }
:root[data-theme="light"] .hero-world { opacity:.52; }
:root[data-theme="light"] .hero:after {
  background:linear-gradient(90deg,#281b16ed 0%,#241c19d9 42%,#251b1530 85%),linear-gradient(0deg,#201814 0%,transparent 54%);
}
:root[data-theme="light"] .hero-bottom { background:#201814ef; }
.lab {
  background:var(--bench); color:var(--white); color-scheme:inherit;
  --bone:var(--white); --quiet:inherit; --line:inherit; --amber:inherit;
}
.lab .product-controls button[aria-selected=true],.lab .view-controls button[aria-pressed=true] {
  color:var(--selected-ink); background:var(--selected-bg);
}
.lab .product-controls input { accent-color:var(--amber); }
.product-panel {
  --white:#f7f2ea; --quiet:#d0c7be; --amber:#ffbf90; --line:#83776d;
  --selected-bg:#ffbf90; --selected-ink:#25160f; color:var(--white); color-scheme:dark;
  border:1px solid var(--line);
}
.product-panel #annotation { background:#1b1d21; }
.product-panel .technical-label { background:#111316ee; padding:.6em .85em; max-width:85%; }
.product-panel .media-caption { color:var(--quiet); }
.architecture { background:var(--coal); }
#architecture-map { color:var(--quiet); }
.world-content { color:var(--white); background:var(--surface); border-top:2px solid var(--amber); }
.world-credit { color:#f7f2ea; background:#101215f2; }
.field-notes { background:var(--notes); }
#ecosystem { background:var(--footer); }
#study-record p { color:var(--quiet); }
#reset-experience { margin-top:1em; }
#reset-status { margin-top:.6em; min-block-size:2.6em; }
.footer-details { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* Content stays visible throughout; only the arrival accent moves. */
body.motion-on section:target > .section-index { animation:arrival .5s ease-out; }
@keyframes arrival { from {transform:translateY(7px); opacity:.66} to {transform:none;opacity:1} }

@media(max-width:1000px) {
  .hero-bottom { gap:16px; }
}
@media(max-width:700px) {
  #brand-header { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
  .header-actions { max-width:none; flex-wrap:nowrap; gap:5px; }
  .header-actions button { padding-inline:8px; min-width:44px; }
  .theme-icon { display:none; }
  .hero { padding-top:27px; }
  .hero-intro>p:last-child { max-width:26ch; }
  .hero-object img { height:clamp(248px,77vw,385px); }
  .hero-object figcaption { width:fit-content; padding:.42em .65em; }
  .hero-bottom { padding:0; border-top:0; background:transparent; }
  :root[data-theme="light"] .hero-bottom { background:transparent; }
  .chapter-index { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 .8rem; }
  .chapter-index a { min-height:51px; border-block-end:1px solid #81766c70; }
  #mega-menu { max-height:calc(100dvh - 20px); }
  .worlds { background:#111316; }
  .world-content { background:var(--surface); }
  .footer-details { display:block; }
}
@media(max-width:360px) {
  #brand-header { grid-template-columns:1fr; }
  #brand-header .header-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  #brand-header .header-actions button { min-width:0; padding:8px 5px; }
  .wordmark { width:fit-content; }
  .hero h1 { font-size:clamp(34px,11.5vw,45px); }
  .view-controls { flex-wrap:wrap; }
  .story-layout [role=tablist] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .chapter-index a { gap:.4em; grid-template-columns:auto minmax(0,1fr); }
  .chapter-index a span:last-child { display:none; }
}
@media(max-height:560px) {
  #brand-header { position:relative; }
  html { scroll-padding-top:1rem; }
  #mega-menu { inset:8px 3% auto; max-height:calc(100dvh - 16px); }
}

/* Run 333 V0.2: the frames move the artwork itself, not just its CSS alignment. */
#motion-toggle { white-space:nowrap; min-inline-size:6em; }
#motion-toggle:disabled { opacity:.72; cursor:default; }
body.motion-on .hero .hero-world img { transform:scale(1.11) translateY(var(--depth)); }
body.motion-on .hero .hero-object img { transform:translateY(calc(var(--depth) * -.52)); }
body.motion-on section:target > .section-index { animation:none; }
body.motion-on .map-line { transform:none; }
body.motion-on .section-index.scene-entered,
body.motion-on .world-heading .eyebrow.scene-entered { animation:orvyn-scene-enter .47s cubic-bezier(.2,.7,.3,1) both; }
@keyframes orvyn-scene-enter { from { transform:translateX(-12px); opacity:.55 } to { transform:translateX(0); opacity:1 } }

.worlds {
  --world-zoom:1.3; --world-shift:-3%;
  background:var(--coal); padding:clamp(30px,5vw,76px) 4%;
  min-height:0; display:grid; grid-template-columns:minmax(0,2.35fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,36px); align-items:start;
}
.worlds::after { display:none; }
.world-heading { grid-column:1/-1; order:0; }
.world-heading .eyebrow { margin-bottom:.55rem; }
.worlds .world-heading h2 { font-size:clamp(36px,5.2vw,79px); }
.worlds .world-image {
  position:relative; grid-column:1; inset:auto; z-index:auto;
  isolation:isolate; width:100%; height:auto; aspect-ratio:1.65; order:0;
  overflow:hidden; background:#101215; border:1px solid var(--line);
}
.world-plane { position:absolute; inset:0; transform:translateX(var(--world-shift)) scale(var(--world-zoom)); }
.world-plane img { width:100%; height:100%; object-fit:cover; display:block; transform:translateY(var(--world-depth,0px)); }
body.motion-on .worlds.framing-change .world-plane { transition:transform 520ms cubic-bezier(.22,.68,.28,1); }
.worlds .world-credit {
  position:absolute; inset:auto auto 10px 10px; margin:0; width:auto;
  max-width:calc(100% - 20px); padding:7px 10px; border-inline-start:2px solid #ffbf90;
  color:#f7f2ea; background:#121316f5; font-size:.72rem; letter-spacing:.07em;
}
.worlds .world-content {
  grid-column:2; width:100%; padding:clamp(13px,2vw,26px);
  background:var(--surface); border-top:2px solid var(--amber);
}
.worlds .world-content > p { color:var(--quiet); }
.worlds .world-switch { margin:14px 0 17px; }
.worlds .world-switch button { text-align:left; }
.worlds #motion-note { margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--line); }
.frame-label { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.2em .6em; }
.frame-label label { font-weight:600; }
.frame-label label span { font-weight:400; color:var(--quiet); }
.frame-label output { color:var(--amber); font-size:.75rem; font-variant-numeric:tabular-nums; }
.frame-controls { padding:.7rem 1rem .85rem; background:#181a1d; border-top:1px solid #696662; }
.frame-controls label { font-size:.8rem; }
.frame-controls #perspective,.world-content #world-pan {
  display:block; box-sizing:border-box; width:100%; min-height:44px;
  margin:0; accent-color:var(--amber);
}
.product-panel .product-media {
  position:relative; width:100%; min-height:0; height:auto; aspect-ratio:1.65;
  overflow:hidden; background:#0b0d0f;
}
.product-panel #product-image {
  position:absolute; inset:0; width:100%; height:100%; max-width:100%;
  object-fit:cover; object-position:50% 58%; transform-origin:50% 50%;
  transform:translateX(calc(-2% + var(--lab-shift,0%))) scale(1.30);
  transition:none;
}
body[data-product=link] .product-panel #product-image {
  width:100%; height:100%; object-position:50% 100%;
  transform:translate(calc(14% + var(--lab-shift,0%)),-81%) scale(2.75);
}
.product-panel .technical-label { inset:12px auto auto 12px; padding:.35em .55em; }
.product-panel .anatomy-lines { color:#ffbf90; stroke:currentColor; stroke-width:2; filter:drop-shadow(0 0 2px #19110c); }
.product-panel[data-view=map] #product-image { filter:brightness(.7); }
.product-panel .hotspots { inset:auto auto 10px 12px; gap:7px; }
.product-panel .hotspots button { padding:.4em .8em; }

@media(max-width:900px) {
  .worlds { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
}
@media(max-width:700px) {
  .worlds { grid-template-columns:minmax(0,1fr); padding:26px 5% 36px; gap:12px; }
  .worlds .world-image,.worlds .world-content { grid-column:1; }
  .worlds .world-heading h2 { font-size:clamp(35px,9vw,49px); }
  .worlds .world-content { padding:12px; }
  .worlds .world-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .worlds .world-switch button { padding:8px; }
  .product-controls .product-description { grid-column:1/-1; }
  .frame-controls { padding:.55rem .7rem .7rem; }
}
@media(prefers-reduced-motion:reduce) {
  .worlds .world-plane { --world-depth:0px; transition:none!important; }
}