/* ============================================================================
   LOOM prototype · A STATIC COPY of the hero-relevant rules from index.html's
   own <style> block, extracted mechanically (selector match on html/body/:root/
   .act/.sheet/.hero/.vframe/.poster__*) and NOT edited.

   index.html is being worked on by another agent and may not be touched, and a
   standalone page cannot <link> an inline <style>. So the rules the a1 hero
   needs live here, verbatim, and the shared sheets (tokens, tokens-ink,
   ground-ink, scrollcraft, fonts) are linked by relative path as the brief
   asks. If the intro is folded into index.html this file is deleted: the real
   page already has every rule in it.
   ========================================================================== */

html{ background: var(--sc-canvas); color-scheme: light dark; }
body{
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  overflow-x: clip;
}
:root{
  --strip-w: 3.4rem;
  --safe-r: env(safe-area-inset-right, 0px);
  
  --vf-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 680px){ :root { --strip-w: 3rem; } }
@media (pointer: fine){ html, body { overscroll-behavior-y: none; } }
.act,
.sheet{ scroll-margin-top: clamp(0.5rem, 2vh, 1.5rem); }
html{ scroll-padding-right: calc(var(--strip-w) + var(--safe-r) + 0.5rem); scroll-padding-block: 2rem; }
.sheet--black a:focus-visible,
.sheet--black button:focus-visible{ outline-color: var(--black-accent); }
::selection{ background: var(--sc-accent); color: var(--sc-accent-ink); }
.skip{
  position: absolute; left: var(--sc-gutter); top: 0; z-index: 60;
  transform: translateY(-120%);
  background: var(--sc-ink); color: var(--sc-canvas);
  font-family: var(--sc-font-display); font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.2rem; min-height: 2.75rem; display: grid; place-items: center;
}
.skip:focus-visible{ transform: translateY(0); outline-offset: -4px; }
.act{ position: relative; display: block; isolation: isolate; background: var(--sc-canvas); }
:where(.sheet){ position: relative; }
.sheet:not([data-sc-stage]){ position: relative; }
.sheet{ display: block; isolation: isolate; background: var(--sc-canvas); }
.sheet__fold{
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(1.2rem, 3vh, 2.4rem);
  overflow: clip;                 
  padding: clamp(2.2rem, 5vh, 4rem) var(--sc-gutter) clamp(2rem, 4.5vh, 3.4rem);
  padding-right: max(var(--sc-gutter), calc(var(--strip-w) + var(--safe-r) + 0.5rem));
  background: var(--sc-canvas);
}
.sheet__fold::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in oklab, var(--sc-ink) 9%, transparent) 12%,
    color-mix(in oklab, var(--sc-ink) 9%, transparent) 88%,
    transparent);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 860px){ .sheet__fold::after { display: none; } }
.sheet--solo{ min-height: 100%; }
.sheet--solo > .sheet__fold{ position: sticky; top: 0; height: 100svh; min-height: 0; max-height: 100svh; }
.sheet[data-sc-stage] > .sheet__fold{ position: relative; top: auto; height: 100%; }
.act--short .sheet--solo > .sheet__fold{ height: auto; min-height: 76svh; position: relative; }
.act--flowgrid .sheet--solo > .sheet__fold{
  position: relative;
  height: auto;
  max-height: none;
  min-height: 100svh;
  align-content: center;
  padding-block: clamp(2.2rem, 6vh, 4.4rem);
}
.act--flowgrid{ --tile-h: 34svh; }
.sheet--black,
.sheet--black .sheet__fold,
.act--black{ background: var(--black-ground); }
.act--peak,
.act--peak .sheet--black,
.act--peak .sheet--black .sheet__fold{ background: #07070A; }
.act--peak .sheet__fold{ --black-ground: #07070A; }
:root{ --sheet-bone: #EFE9DD; }
.sheet,
.sheet__fold,
.act{ background: var(--sheet-bone); }
.sheet--black,
.sheet--black .sheet__fold,
.act--black{ background: var(--black-ground); }
.act--peak,
.act--peak .sheet--black,
.act--peak .sheet--black .sheet__fold{ background: #07070A; }
.sheet--black .sheet__fold{
  --sc-ink: var(--black-ink);
  --sc-ink-soft: var(--black-soft);
  --sc-accent: var(--black-accent);
  color: var(--black-ink);
}
.sheet--black .sheet__fold::after{
  background: linear-gradient(to bottom, transparent,
    color-mix(in oklab, var(--black-ink) 14%, transparent) 12%,
    color-mix(in oklab, var(--black-ink) 14%, transparent) 88%, transparent);
}
.vframe{
  display: grid;
  grid-template-rows: auto auto;
}
.vframe__pic{
  position: relative;
  aspect-ratio: var(--ar, 1.7778);
  background: #0d0c0b;            
  
  box-shadow: 0 1px 0 color-mix(in oklab, var(--sc-ink) 24%, transparent),
              0 10px 28px -18px rgba(var(--fold-shade), 0.55);
  isolation: isolate;
}
.vframe__play{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.sheet--black .vframe__play{ border-color: color-mix(in oklab, var(--black-ink) 26%, transparent); }
.vframe__play img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 420ms var(--vf-ease), filter 220ms var(--vf-ease);
}
.vframe__play::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top,
    rgba(6,5,4,0.94) 0,
    rgba(6,5,4,0.92) 34%,
    rgba(6,5,4,0.72) 62%,
    rgba(6,5,4,0.28) 84%,
    transparent 100%);
  pointer-events: none;
  transition: opacity 220ms var(--vf-ease);
}
.vframe__glyph{
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.52);
  backdrop-filter: saturate(1.1);
  transition: transform 160ms var(--vf-ease), background-color 160ms var(--vf-ease);
  z-index: 2;
}
.vframe__glyph svg{ width: 44px; height: 44px; display: block; }
.vframe__glyph circle{ stroke: rgba(239,233,221,0.9); stroke-width: 1.5px; }
.vframe__glyph path{
  fill: #EFE9DD;
  transform-box: fill-box;
  transform-origin: center;
  translate: 1px 0;
}
.vframe--lead .vframe__glyph{ width: 84px; height: 84px; }
.vframe--lead .vframe__glyph svg{ width: 56px; height: 56px; }
.vframe--onlight .vframe__glyph{ background: rgba(10, 9, 8, 0.82); }
@media (hover: hover){
  .vframe--onlight .vframe__play:hover .vframe__glyph { background: rgba(10, 9, 8, 0.9); }
}
.vframe__meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  background: rgba(6, 5, 4, 0.72);
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-family: var(--sc-font-display);
  text-transform: uppercase;
}
.vframe__name{
  font-size: clamp(0.62rem, 0.9vw, 0.76rem);
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: #F6F2E9;                 
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vframe--lead .vframe__name{ font-size: clamp(0.68rem, 1vw, 0.84rem); white-space: normal; }
.vframe__dur{
  margin-left: auto;
  flex: none;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  
  color: #EDE7DB;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover){
  .vframe__play:hover img { transform: scale(1.025); }
  .vframe__play:hover .vframe__glyph { transform: scale(1.06); background: rgba(10,9,8,0.68); }
}
.vframe__play:focus-visible .vframe__glyph{ transform: scale(1.06); }
.vframe__play:active .vframe__glyph{ transform: scale(0.97); }
.vframe__out{
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.1rem 0;
  font-family: var(--sc-font-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: color 150ms var(--vf-ease);
}
.vframe__out:hover{ color: var(--sc-accent); }
.sheet--black .vframe__out{ color: var(--black-soft); }
.sheet--black .vframe__out:hover{ color: var(--black-accent); }
.vframe__player{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 3;
  animation: vf-in 180ms var(--vf-ease) both;
}
.vframe__pic.is-playing{ box-shadow: 0 1px 0 color-mix(in oklab, var(--sc-ink) 30%, transparent); }
@media (prefers-reduced-motion: reduce){
  
  .vframe__play img,
  .vframe__glyph { transition: none; }
  .vframe__play:hover img { transform: none; }
  .vframe__player { animation: none; }
}
.hero{ width: 100%; max-width: 108rem; margin-inline: auto; min-width: 0; }
.hero{ display: grid; gap: clamp(0.9rem, 2.2vh, 1.6rem); align-content: center; }
.hero > .vframe{ width: 100%; justify-self: center; max-width: min(100%, calc(58svh * var(--ar, 1.7778))); }
.hero__foot{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: end;
}
.hero__name{
  font-family: var(--sc-font-display);
  font-weight: 400;
  
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--sc-ink);
}
.hero__name span{ display: block; }
.hero__name em{ font-style: normal; color: var(--sc-ink-soft); }
.hero__side{ min-width: 0; }
.hero__side .poster__claim{ margin-top: 0; }
@media (max-width: 860px){
  .hero__foot { grid-template-columns: 1fr; align-items: start; gap: clamp(0.8rem, 2vh, 1.2rem); }
  .hero__name { font-size: clamp(2.2rem, 13vw, 4rem); }
}
.act--sheeted .solo{ align-items: start; }
.act--sheeted .sheet__fold{ align-content: start; gap: clamp(0.8rem, 2vh, 1.4rem); }
.act--sheeted .solo{ align-content: start; }
.poster__no{
  font-family: var(--sc-font-display);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-2);
}
.act--loud .poster__no{ color: var(--sc-accent); }
.poster__title{
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.014em;
  text-transform: uppercase;
  margin: 0;
  color: var(--sc-ink);
  font-size: var(--title, clamp(1.5rem, 2.6vw, 2.4rem));
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.poster__title span{ display: block; }
.poster__title em{ font-style: normal; color: var(--sc-accent); }
.act--quiet .poster__title em{ color: var(--sc-ink-soft); }
.act--quiet{ --title: clamp(1.4rem, 2.2vw, 1.95rem); }
.act--mid{ --title: clamp(1.6rem, 2.8vw, 2.5rem); }
.act--loud{ --title: clamp(1.8rem, 3.4vw, 3rem); }
.act--peak{ --title: clamp(2rem, 4.2vw, 3.6rem); }
.poster__claim{
  font-family: var(--sc-font-text);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.3;
  letter-spacing: -0.004em;
  max-width: 38ch;
  margin: clamp(0.5rem, 1.3vh, 0.9rem) 0 0;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.poster__line{
  font-style: italic;
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.4;
  max-width: 54ch;
  margin: clamp(0.4rem, 0.9vh, 0.7rem) 0 0;
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}
.poster__credit{
  font-family: var(--sc-font-display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--sc-ink-soft);
  max-width: 58ch;
  margin: clamp(0.5rem, 1.2vh, 0.9rem) 0 0;
}