/* ==========================================================================
   ISHLVLSTUDIOS — ABOUT — Mockup 01
   Typography-driven, immersive, restrained. No orbit, no media, no cards —
   deliberately distinct from the division pages while sharing their exact
   visual language: same root variables, same fonts, same header/footer,
   same reveal-on-scroll base pattern (copied verbatim from the approved
   Film page), same black-on-white editorial voice.
   ========================================================================== */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --gray-1:#6b6b6b;
  --gray-2:#b3b3b3;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box;}
html,body{ height:100%; margin:0; }
body{
  background:var(--white); color:var(--black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; width:100%;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
button{font:inherit;background:none;border:none;padding:0;cursor:pointer;color:inherit;}

/* ==========================================================================
   TOP BAR — identical to every approved division page.
   ========================================================================== */
.film-bar{
  position:absolute; top:0;left:0;right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(30px + env(safe-area-inset-top)) calc(36px + env(safe-area-inset-right)) 30px calc(36px + env(safe-area-inset-left)); pointer-events:none;
}
.film-bar > *{pointer-events:auto;}
.home-mark img{height:88px;width:auto;display:block;opacity:.92;transition:opacity .4s var(--ease);}
.home-mark:hover img{opacity:1;}
.division-id{
  font-size:14px;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--black);
  white-space:nowrap;
}

/* Page footer — matches every approved division page exactly. */
.corner-id{
  width:100%; box-sizing:border-box;
  padding:0 36px 32px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--gray-2);
  display:flex; justify-content:flex-end; gap:8px;
}

/* ==========================================================================
   REVEAL-ON-SCROLL BASE — identical pattern to every approved page: fades
   and lifts in once, the first time an element enters view.
   ========================================================================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-soft),transform 1s var(--ease-soft);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ==========================================================================
   SECTION INDEX — small, fixed, restrained progress marker along the right
   edge. Not a navigation menu: no click-to-jump, just a passive read of
   scroll position (matches "subtle visual progress indicator", not
   "large navigation menu").
   ========================================================================== */
.section-index{
  position:fixed; right:36px; top:50%; transform:translateY(-50%);
  z-index:30;
}
.section-index ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.section-index li{
  display:flex; align-items:baseline; gap:8px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gray-2);
  transition:color .5s var(--ease-soft);
}
.section-index li.is-active{color:var(--black);}
.index-num{font-variant-numeric:tabular-nums;}
.index-label{white-space:nowrap;}

/* ==========================================================================
   OPENING — full-screen, generous negative space, calm entrance.
   ========================================================================== */
.about-hero{
  width:100%; height:100vh; height:100svh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:0 36px;
}
.about-hero-inner{
  max-width:760px; width:100%; margin:0 auto;
}
.about-eyebrow{
  margin:0 0 26px;
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray-1);
}
.about-statement{
  margin:0;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:clamp(28px,4.2vw,46px); line-height:1.35; color:var(--black);
  max-width:15ch;
}
.about-eyebrow.reveal{transition-delay:0s;}
.about-statement.reveal{transition-delay:.12s;}

/* ==========================================================================
   FOUR SCROLL SECTIONS — each gets full breathing room; the currently
   "active" section (tracked the same way as the index) reads at full
   strength while the others soften slightly — never fully hidden.
   ========================================================================== */
.about-section{
  width:100%; min-height:100vh; min-height:100svh; box-sizing:border-box;
  padding:12vh 36px;
  display:flex; align-items:center; justify-content:flex-start;
}
.about-section-inner{
  max-width:680px; width:100%; margin:0 auto;
}
.about-copy{
  margin:0;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:23px; line-height:1.68; color:var(--black);
  transition:opacity .8s var(--ease-soft);
}
.about-section:not(.is-active) .about-copy.is-visible{opacity:.45;}
.about-section.is-active .about-copy{opacity:1;}

/* ==========================================================================
   FOUNDER SECTION — a distinct typographic beat between paragraph 3 and 4.
   ========================================================================== */
.founder-section{
  width:100%; min-height:60vh; box-sizing:border-box;
  padding:10vh 36px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.founder-inner{max-width:680px; width:100%;}
.founder-name{
  margin:0 0 12px;
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:400;
  font-size:clamp(26px,3.4vw,38px); color:var(--black);
}
.founder-title{
  margin:0;
  font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gray-1);
}

/* ==========================================================================
   CLOSING — enlarged restatement, first sentence emphasized, then the
   remainder beneath at reading scale. Flows straight into the footer.
   ========================================================================== */
.closing-section{
  width:100%; min-height:80vh; box-sizing:border-box;
  padding:14vh 36px 10vh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.closing-inner{max-width:760px; width:100%; margin:0 auto;}
.closing-lead{
  margin:0 0 24px;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:clamp(30px,4.6vw,52px); line-height:1.25; color:var(--black);
  max-width:14ch;
}
.closing-body{
  margin:0;
  font-family:'Newsreader',Georgia,serif; font-style:normal; font-weight:400;
  font-size:19px; line-height:1.65; color:var(--gray-1);
  max-width:44ch;
}
.closing-body.reveal{transition-delay:.15s;}

/* ==========================================================================
   FOCUS STATES — keyboard accessibility. The only interactive element on
   this page is the home-mark link back to the site.
   ========================================================================== */
.home-mark:focus-visible{outline:2px solid var(--black); outline-offset:4px;}

/* ==========================================================================
   SCROLL CUE — mobile-only on this page. Same component (identical HTML,
   identical animation, identical dimensions) as the archive pages; hidden
   on desktop where the section-index already orients the reader.
   ========================================================================== */
.scroll-cue{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  top:calc(44px + env(safe-area-inset-top));
  width:auto; padding:0; gap:6px;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.scroll-cue-label{ display:none; }
.scroll-cue-line{
  position:relative; width:1px; height:34px;
  background:rgba(10,10,10,.12); overflow:hidden;
}
.scroll-cue-track{
  position:absolute; top:-40%; left:0; width:100%; height:40%;
  background:var(--black);
  animation:scrollCueMove 2.4s var(--ease-soft) infinite;
}
@keyframes scrollCueMove{
  0%{top:-40%;opacity:0;}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{top:100%;opacity:0;}
}

/* ==========================================================================
   REDUCED MOTION — content is fully visible and functional with no
   scroll-driven animation of any kind.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .about-copy{opacity:1 !important; transition:none !important;}
  .about-section:not(.is-active) .about-copy.is-visible{opacity:1 !important;}
  .section-index li{transition:none !important;}
  .home-mark img{transition:none !important;}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .home-mark img{height:64px;}
  .division-id{font-size:12px;}
  .about-statement{font-size:clamp(24px,5vw,36px);}
  .closing-lead{font-size:clamp(26px,6vw,40px);}
  .section-index{right:24px;}
}
@media (max-width:680px){
  .film-bar{padding:calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 22px calc(20px + env(safe-area-inset-left));}
  .home-mark img{height:48px;}
  .division-id{font-size:11px;letter-spacing:.08em;}
  .corner-id{padding:0 20px 24px;font-size:9px;}

  .about-hero{padding:0 20px;}
  .about-eyebrow{font-size:10px;margin-bottom:18px;}
  .about-statement{font-size:clamp(22px,6.4vw,30px);max-width:20ch;}

  .about-section{padding:9vh 20px;}
  .about-copy{font-size:19px;line-height:1.62;}

  .founder-section{padding:7vh 20px;min-height:44vh;}
  .founder-name{font-size:clamp(22px,6vw,28px);}
  .founder-title{font-size:10px;}

  .closing-section{padding:10vh 20px 8vh;}
  .closing-lead{font-size:clamp(24px,7vw,32px);max-width:12ch;}
  .closing-body{font-size:17px;max-width:none;}

  /* Section index — simplified, not removed: numbers only, tucked into
     the corner, sized well below the body copy so it can never compete
     with or overlap the reading column, and cannot cause horizontal
     overflow since it's a fixed-width stack pinned inside the viewport
     edge (not flowed content). */
  .section-index{right:14px; top:auto; bottom:calc(18px + env(safe-area-inset-bottom)); transform:none;}
  .section-index ol{gap:8px;}
  .section-index li{font-size:9px; gap:0;}
  .index-label{display:none;}

  /* Scroll cue — activated on mobile only, positioned upper-right so it
     does not overlap the section-index which occupies the lower-right.
     All dimensions, animation, and color match the archive pages exactly. */
  .scroll-cue{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    position:fixed;
    right:calc(16px + env(safe-area-inset-right));
    top:calc(44px + env(safe-area-inset-top));
    width:auto; padding:0;
  }
  .scroll-cue-label{display:none;}
  .scroll-cue-line{height:34px;}
}
@media (max-height:640px) and (max-width:680px){
  .about-hero,.founder-section,.closing-section{min-height:auto;}
}