/* ==========================================================================
   Blue Chair Productions Inc. — About page
   Loaded after styles.css by about.html only. Everything here is scoped to
   .about, which sits on top of the shared .page wrapper so main.js still
   runs the title choreography and [mounted] gating. Layout is editorial and
   left-aligned: a portrait opener, the format strip, the range tiles, the
   timeline, the credits list and the two-city split.
   ========================================================================== */
.about{
  --about-max:1200px;
  --about-pad:clamp(1.25rem,5vw,4rem);
  --about-surface:color-mix(in srgb,var(--color-onPrimary) 6%,var(--color-primary));
  --about-rule:color-mix(in srgb,var(--color-onPrimary) 16%,transparent);
  --about-block:clamp(4.5rem,10vw,8.5rem);
  align-items:stretch;
  gap:0;
  padding:0;
  text-align:left;
}
.about > *{width:100%}
.about__wrap{width:100%;max-width:var(--about-max);margin:0 auto;padding:0 var(--about-pad)}
.about__section{padding-block:var(--about-block)}
.about__section + .about__section{padding-top:0}
.about .eyebrow{color:var(--color-secondary);transition:color .5s var(--ease-in-out-sine)}
.about p{line-height:1.5}
.about .button svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:.6s translate var(--ease-out-elastic)}
@media (any-hover:hover){.about .button:hover svg{translate:.12em -.12em}}

/* --------------------------------------------------------------------------
   Generic in-view reveal. about.js flips [inview] and sets --i for stagger.
   -------------------------------------------------------------------------- */
[data-in]{
  transition:.7s opacity var(--ease-out-sine),1.1s translate var(--ease-out-elastic-soft);
  transition-delay:min(calc(var(--i,0) * .06s),.42s);
}
[data-in]:not([inview]){opacity:0;translate:0 1.6rem}

/* --------------------------------------------------------------------------
   Opener: copy on the left, portrait on the right
   -------------------------------------------------------------------------- */
.about-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:3rem;
  align-items:center;
  min-height:100svh;
  padding-top:max(var(--safe-top),6rem);
  padding-bottom:3rem;
}
@media (width >= 900px){
  .about-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem;padding-top:7rem;padding-bottom:4rem}
}
.about-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.about-hero__copy .page__title{
  max-width:7.5em;
  font-size:clamp(3.4rem,8.6vw,7.6rem);
  text-wrap:balance;
}
.about-hero__lede{max-width:34em;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.55;opacity:.85}
.about-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
.about-hero__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.5rem;color:var(--color-muted)}
.about-hero__meta small{line-height:1.6}
.page:not([mounted]) :is(.about-hero__lede,.about-hero__actions,.about-hero__meta,.about-hero .eyebrow){opacity:0;translate:0 1rem}
.page[mounted] :is(.about-hero__lede,.about-hero__actions,.about-hero__meta,.about-hero .eyebrow){transition:.9s opacity var(--ease-out-sine),1s translate var(--ease-out-elastic);transition-delay:.5s}
.page[mounted] .about-hero__actions{transition-delay:.65s}
.page[mounted] .about-hero__meta{transition-delay:.8s}

.about-hero__visual{
  display:grid;
  place-items:center;
  width:min(100%,22rem);
  margin:0 auto;
}
@media (width >= 900px){.about-hero__visual{width:100%;max-width:28rem;justify-self:end}}
.portrait{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4/5;
  margin:0;
  border-radius:var(--radius);
  overflow:clip;
  background:var(--about-surface);
  box-shadow:var(--shadow);
  rotate:-2deg;
  transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic);
}
.portrait img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.page:not([mounted]) .portrait{scale:0}
.page[mounted] .portrait{transition-delay:.25s}
@media (any-hover:hover){.about-hero__visual:hover .portrait{rotate:0deg;scale:1.02}}
.about-hero__credit{grid-column:1/-1;justify-self:end;color:var(--color-muted);text-align:right}
@media (width >= 900px){.about-hero__credit{grid-column:2;margin-top:-2rem}}

/* --------------------------------------------------------------------------
   Format strip: the format-shift sentence at poster size
   -------------------------------------------------------------------------- */
.formats{border-block:1px solid var(--about-rule);padding-block:clamp(2.5rem,6vw,4.5rem)}
.about__section + .formats{padding-top:clamp(2.5rem,6vw,4.5rem)}
.formats + .about__section{padding-top:var(--about-block)}
.formats > .about__wrap{container-type:inline-size}
.formats .eyebrow{margin-bottom:1.25rem}
.formats__line{
  margin:0;
  font:var(--font-h1);
  font-size:clamp(2.6rem,9.2cqi,6.6rem);
  line-height:.9;
  letter-spacing:-.03em;
  text-transform:uppercase;
  text-wrap:balance;
  white-space:nowrap;
}
.formats__line + .formats__line{padding-left:clamp(0rem,12cqi,9rem);margin-top:.05em}
.formats__to{
  display:inline-block;
  margin:0 .08em;
  font-size:.3em;
  letter-spacing:.08em;
  opacity:.5;
  vertical-align:.5em;
}
@media (width < 560px){.formats__line{white-space:normal}.formats__line + .formats__line{padding-left:0}}

/* --------------------------------------------------------------------------
   Range: the statement, three tiles, and the turn toward features
   -------------------------------------------------------------------------- */
.range__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4rem)}
.range__title{
  max-width:17em;
  font-size:clamp(2rem,4.8vw,4.25rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:pretty;
}
.range__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem}
.tile{position:relative;list-style:none}
.tile a{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:1.25rem;
  background:var(--about-surface);
  overflow:clip;
  transition:1s scale var(--ease-out-elastic-soft),1s rotate var(--ease-out-elastic-soft),.3s background-color;
}
.tile__media{aspect-ratio:16/9;overflow:clip;background:var(--color-secondary)}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:1.2s scale var(--ease-out-elastic-soft);-webkit-user-drag:none}
.tile__body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.25rem 1.3rem}
.tile__label{font:var(--font-h3);font-size:1.6rem;letter-spacing:-.02em;text-transform:uppercase}
.tile__note{color:var(--color-muted);font:var(--font-body);font-size:.92rem;line-height:1.45}
.tile__go{margin-top:auto;padding-top:.75rem;color:var(--color-secondary);transition:color .5s var(--ease-in-out-sine)}
@media (any-hover:hover){
  .tile a:hover{scale:1.03;rotate:calc(var(--rotation,0) * .6deg);z-index:1;background:color-mix(in srgb,var(--color-secondary) 12%,var(--color-primary))}
  .tile a:hover .tile__media img{scale:1.06}
}
.tile a:active{scale:.98}
.range__next{
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.5rem;
  width:100%;
  max-width:36rem;
  padding:clamp(1.5rem,3vw,2.5rem);
  border-radius:1.5rem;
  background:var(--color-secondary);
  color:var(--color-onSecondary);
  transition:background-color .5s var(--ease-in-out-sine),color .5s var(--ease-in-out-sine);
}
.range__now{font:var(--font-h3);letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.range__next .button{background:var(--color-primary);color:var(--color-onPrimary)}
.range__next .button:focus-visible{outline-color:var(--color-onSecondary)}

/* --------------------------------------------------------------------------
   The road here: sticky intro, numbered chapters with occasional stills
   -------------------------------------------------------------------------- */
.road__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
@media (width >= 900px){.road__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4rem}}
.road__intro{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
@media (width >= 900px){.road__intro{position:sticky;top:6rem;align-self:start}}
.road__intro h2{font-size:clamp(2.4rem,4.2vw,3.6rem);max-width:8em}
.road__intro p{max-width:26em;color:var(--color-muted)}
.road__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--about-rule)}
.chapter{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.75rem 1.5rem;
  padding:1.75rem 0;
  border-bottom:1px solid var(--about-rule);
}
@media (width >= 640px){.chapter{grid-template-columns:9rem minmax(0,1fr);gap:1rem 2rem}}
.chapter--still{padding-right:0}
@media (width >= 640px){.chapter--still{grid-template-columns:9rem minmax(0,1fr) auto}}
.chapter__when{font:var(--font-h2);font-size:1.9rem;white-space:nowrap;letter-spacing:-.02em;text-transform:uppercase;color:var(--color-secondary);transition:color .5s var(--ease-in-out-sine)}
.chapter__body{display:flex;flex-direction:column;gap:.5rem}
.chapter__body h3{font-size:clamp(1.5rem,2.2vw,2rem)}
.chapter__body p{max-width:38em;opacity:.85}
.chapter__still{
  grid-row:1 / span 2;
  grid-column:1;
  justify-self:start;
  width:9rem;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  rotate:calc(var(--rotation,0) * 1deg);
  transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic);
  transition-delay:.2s;
  -webkit-user-drag:none;
}
@media (width >= 640px){.chapter__still{grid-row:1;grid-column:3;align-self:center;width:clamp(8.5rem,13vw,11rem)}}
@media (width < 640px){.chapter--still{grid-template-rows:auto auto}.chapter--still .chapter__when,.chapter--still .chapter__body{grid-column:1}.chapter__still{grid-row:auto;order:-1;margin-bottom:.5rem}}
.chapter:not([inview]) .chapter__still{scale:0}
@media (any-hover:hover){.chapter:hover .chapter__still{rotate:calc(var(--rotation,0) * -1deg);scale:1.06}}

/* --------------------------------------------------------------------------
   Credits: grouped rows, year / title / role / note, still on hover
   -------------------------------------------------------------------------- */
.credits__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:2.5rem}
.credits__head h2{font-size:clamp(2.4rem,4.6vw,4rem)}
.credits__head p{max-width:28em;color:var(--color-muted)}
.credits__group{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding-top:1.5rem;border-top:1px solid var(--about-rule)}
.credits__group + .credits__group{margin-top:2.5rem}
@media (width >= 900px){.credits__group{grid-template-columns:10rem minmax(0,1fr);gap:0 3rem}}
.credits__cat{font:var(--font-h4);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-secondary);transition:color .5s var(--ease-in-out-sine)}
@media (width >= 900px){.credits__cat{position:sticky;top:6rem;align-self:start;padding-top:.35rem}}
.credits__list{display:flex;flex-direction:column}
.credit{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.25rem .75rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--about-rule);
  isolation:isolate;
}
@media (width >= 720px){.credit{grid-template-columns:3.5rem minmax(0,1fr) 9.5rem 12rem;gap:0 1.25rem;align-items:baseline}}
.credit__year{font:var(--font-h4);font-size:.85rem;letter-spacing:.08em;color:var(--color-muted)}
.credit__title{
  display:inline-block;
  font:var(--font-h3);
  font-size:clamp(1.3rem,1.8vw,1.6rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  transform-origin:bottom left;
  transition:1s scale var(--ease-out-elastic-soft),.2s color var(--ease-in-out-sine);
}
a.credit__title::after{content:"";position:absolute;inset:0}
.credit__role{font:var(--font-body);font-size:.9rem;opacity:.85}
.credit__note{font:var(--font-body);font-size:.85rem;color:var(--color-muted)}
@media (width < 720px){
  .credit__year{order:-2}
  .credit__role{order:1}
  .credit__note{order:2}
}
.credit__still{
  position:absolute;
  right:0;
  top:50%;
  z-index:1;
  width:9rem;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  translate:0 -50%;
  scale:0;
  rotate:calc(var(--rotation,0) * 1deg);
  pointer-events:none;
  transition:.25s scale var(--ease-in-out-cubic),1s rotate var(--ease-out-elastic);
}
@media (any-hover:hover){
  .credit:has(a.credit__title):hover .credit__title{scale:1 1.12;color:var(--color-secondary)}
  .credit:hover .credit__still{scale:1;transition:1s scale var(--ease-out-elastic),1s rotate var(--ease-out-elastic)}
}
.credit:has(a.credit__title:focus-visible) .credit__still{scale:1}
a.credit__title:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:.25rem}
.credits__foot{margin-top:2rem;color:var(--color-muted);font-size:.9rem;max-width:40em}

/* --------------------------------------------------------------------------
   Two places
   -------------------------------------------------------------------------- */
.places__lead{
  max-width:16em;
  font-size:clamp(2rem,4.6vw,4rem);
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-wrap:pretty;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.places__pair{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media (width >= 720px){.places__pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.place{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:1.5rem;
  background:var(--about-surface);
  overflow:clip;
  transition:1s scale var(--ease-out-elastic-soft),1s rotate var(--ease-out-elastic-soft);
}
.place:nth-child(2){--rotation:1}
.place:nth-child(1){--rotation:-1}
@media (width >= 720px){.place:nth-child(2){translate:0 2.5rem}}
.place__media{aspect-ratio:16/9;overflow:clip;background:var(--color-secondary)}
.place__media img{width:100%;height:100%;object-fit:cover;transition:1.2s scale var(--ease-out-elastic-soft);-webkit-user-drag:none}
.place__body{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem 1.5rem 1.6rem}
.place__tag{color:var(--color-secondary);transition:color .5s var(--ease-in-out-sine)}
.place__name{font:var(--font-h1);font-size:clamp(2.6rem,5.2vw,4.6rem);letter-spacing:-.03em;text-transform:uppercase;line-height:.85}
.place__note{color:var(--color-muted);font:var(--font-body);font-size:.95rem;line-height:1.45}
@media (any-hover:hover){
  .place:hover{scale:1.02;rotate:calc(var(--rotation,0) * 1deg)}
  .place:hover .place__media img{scale:1.05}
}
.places__coda{
  margin-top:clamp(2rem,4vw,3rem);
  font:var(--font-h3);
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-align:right;
}

/* --------------------------------------------------------------------------
   Elsewhere: the shared link cards, four across when there is room
   -------------------------------------------------------------------------- */
.elsewhere .cards{max-width:none}
.elsewhere .eyebrow{margin-bottom:1.25rem}
/* Colours come from the active theme rather than the logo: solid cards use
   the accent pair, ghost cards the page surface, alternating so the row
   reads as a checkerboard in every palette. Ghosts fill on hover. */
.elsewhere .card{
  --surface:var(--color-secondary);
  --ink:var(--color-onSecondary);
  grid-template-columns:minmax(0,2fr) minmax(0,3fr); /* minmax(0) so a long handle cannot squeeze the thumbnail column to nothing */
  transition:1s scale var(--ease-out-elastic-soft),1s rotate var(--ease-out-elastic-soft),.5s background-color var(--ease-in-out-sine),.5s color var(--ease-in-out-sine),.5s box-shadow var(--ease-in-out-sine);
}
.elsewhere .card--ghost{
  --surface:var(--about-surface);
  --ink:var(--color-onPrimary);
  box-shadow:inset 0 0 0 2px var(--about-rule);
}
.elsewhere .card__title{overflow-wrap:anywhere}
.elsewhere .card__tag{color:color-mix(in srgb,var(--ink) 62%,transparent);transition:.5s color var(--ease-in-out-sine)}
.elsewhere .card__thumb{transition:.5s background-color var(--ease-in-out-sine),.5s color var(--ease-in-out-sine)}
@media (any-hover:hover){
  .elsewhere .card--ghost:hover{--surface:var(--color-secondary);--ink:var(--color-onSecondary);box-shadow:none}
}
.elsewhere .card:focus-visible{outline:3px solid var(--color-onPrimary);outline-offset:3px;border-radius:var(--border-radius)}
@media (width >= 1180px){ /* four across only once each card has room for the Instagram handle */
  .elsewhere .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .elsewhere .card{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .elsewhere :is(.card__tag,.card__title){font-size:1.4rem} /* four across: room for "@groovylady" before its break */
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [data-in]:not([inview]){opacity:1;translate:0 0}
  .page:not([mounted]) :is(.portrait,.about-hero__lede,.about-hero__actions,.about-hero__meta,.about-hero .eyebrow){scale:1;opacity:1;translate:0 0}
  .chapter:not([inview]) .chapter__still{scale:1}
}