/* Indian Tribe — the story after the preview
 * -----------------------------------------------------------------------------
 * About Us · Services · Our Works · Enquiry: one screen, four panels side by
 * side. The preview hands down to it vertically, like every screen above; from
 * then on each gesture moves one panel sideways, in place.
 *
 * The montage belongs to no panel. It stands full height, borderless, on the
 * right of About Us, crosses to the left of Services as the panels turn, and
 * leaves with Services. js/chapters.js places it (and nudges the words, a
 * little behind their panels, so a turn has depth rather than just sliding).
 *
 * Same hand as the rest of the site: paper ground (transparent here - the wash
 * is fixed behind every screen), Georgia display, Barlow for everything small,
 * the site's red as the one accent. Sizes are shares of the window; a clamp
 * only keeps type legible at the extremes.
 */

.story{
  --gutter: 7.4vw;
  /* the film: full height, a touch wider than its own 9:16 so it holds its
     side of the screen, and never more than a little under half the width */
  --film-w: min(66.7vh, 44vw);
  --ease: cubic-bezier(.16,.84,.24,1);
  color:var(--ink);
  /* clip, not just hidden: hidden still lets the browser scroll it sideways
     to show a focused field, which would knock the panels out of place */
  overflow:hidden;
  overflow:clip;
}

.st-track{
  position:absolute; left:0; top:0;
  z-index:3;
  width:400%; height:100%;
  display:flex;
  will-change:transform;
  pointer-events:none;            /* the panels' contents take the pointer */
}
.st-panel{
  position:relative;
  flex:none;
  width:25%; height:100%;
}
.st-panel > *{ pointer-events:auto; }

/* ── the words ──────────────────────────────────────────────────────────── */

.ch-copy{
  position:absolute;
  left:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  width:min(40vw, 36em);
}
.st-about .ch-copy{
  width:min(40vw, calc(100vw - var(--film-w) - 2 * var(--gutter) - 3vw), 36em);
}
.st-services .ch-copy{
  left:calc(var(--film-w) + var(--gutter));
  width:min(40vw, calc(100vw - var(--film-w) - 2 * var(--gutter) - 3vw), 36em);
}

.ch-no{
  display:flex; align-items:center;
  gap:1.3vh;
  margin:0 0 3vh;
  font:600 clamp(9px, 1.42vh, 13px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.34em;
  color:var(--ink-3);
}
.ch-no .rule{
  display:block; width:7vh; height:1px;
  background:linear-gradient(90deg, rgba(20,17,15,.55), rgba(20,17,15,.08));
  transform-origin:left center;
}
.ch-no .pip{
  display:block; width:.72vh; height:.72vh; min-width:5px; min-height:5px;
  background:var(--red);
  transform:rotate(45deg);
}

.ch-title{
  margin:0 0 3.2vh;
  font:400 clamp(34px, 10.6vh, 136px)/1 Georgia, 'Times New Roman', serif;
  letter-spacing:-.025em;
  color:var(--ink);
}
/* a line of the heading, masked so it can rise into place */
.ch-title .ln{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.ch-title .ln > span{ display:inline-block; }

.ch-body{
  margin:0;
  max-width:31em;
  font:400 clamp(13px, 2.3vh, 24px)/1.62 Barlow, 'Barlow', system-ui, sans-serif;
  color:var(--ink-2);
}

/* what the studio does: small capitals in two tidy columns, each set off by
   the red pip the numbers carry, so it reads as part of one system (a single
   wrapping line left pips stranded at the start of its second row) */
.ch-list{
  display:grid;
  grid-template-columns:repeat(2, max-content);
  gap:1.7vh 3.6vh;
  margin:3.6vh 0 0;
  padding:0;
  list-style:none;
  font:600 clamp(9px, 1.38vh, 13px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.ch-list li{ display:inline-flex; align-items:center; gap:1.3vh; white-space:nowrap; }
.ch-list li::before{
  content:"";
  display:inline-block;
  width:.55vh; height:.55vh; min-width:4px; min-height:4px;
  background:var(--red);
  transform:rotate(45deg);
}

/* ── arriving from the preview ────────────────────────────────────────────
   The one entrance in the story: the film opens upward from its foot, the
   heading rises out of its line, the rule draws, the words settle. Past this
   point nothing performs - the panels simply turn. */

.story .st-about .ch-no .rule{ transform:scaleX(0); transition:transform .4s ease; }
.story .st-about .ch-no .pip{ transform:rotate(45deg) scale(0); transition:transform .3s ease; }
.story .st-about .ch-no span,
.story .st-about .ch-body{ opacity:0; transform:translateY(1.8vh); transition:opacity .3s ease, transform .4s ease; }
.story .st-about .ch-title .ln > span{ transform:translateY(106%); transition:transform .45s ease; }
.story .st-film{ clip-path:inset(100% 0 0 0); transition:clip-path .45s ease; }
.story .st-film video{ transform:scale(1.14); transition:transform .6s ease; }
.story .st-pager{ opacity:0; transition:opacity .3s ease; }

.story.is-in .st-film{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.25s cubic-bezier(.7,0,.2,1) var(--rv, 0ms);
}
.story.is-in .st-film video{
  transform:none;
  transition:transform 1.9s var(--ease) var(--rv, 0ms);
}
.story.is-in .st-about .ch-title .ln > span{
  transform:none;
  transition:transform 1.15s var(--ease) calc(var(--rv, 0ms) + 380ms);
}
.story.is-in .st-about .ch-no span{
  opacity:1; transform:none;
  transition:opacity .8s ease calc(var(--rv, 0ms) + 250ms), transform 1s var(--ease) calc(var(--rv, 0ms) + 250ms);
}
.story.is-in .st-about .ch-no .rule{
  transform:scaleX(1);
  transition:transform 1.1s var(--ease) calc(var(--rv, 0ms) + 300ms);
}
.story.is-in .st-about .ch-no .pip{
  transform:rotate(45deg) scale(1);
  transition:transform .7s cubic-bezier(.3,1.6,.5,1) calc(var(--rv, 0ms) + 700ms);
}
.story.is-in .st-about .ch-body{
  opacity:1; transform:none;
  transition:opacity 1s ease calc(var(--rv, 0ms) + 620ms), transform 1.2s var(--ease) calc(var(--rv, 0ms) + 620ms);
}
.story.is-in .st-pager{ opacity:1; transition:opacity 1s ease calc(var(--rv, 0ms) + 900ms); }

/* once the film has opened it carries no clip at all: a clip, even one that
   cuts nothing, keeps a playing video off the browser's fast path */
.story.is-open .st-film{ clip-path:none; }

/* While the story is on screen the wash's slow cloud drift stops and steps
   out of the way. It is a full-screen layer moving every frame, and with a
   60fps film on top it was most of why the film stuttered. The wash itself
   stays. */
html.in-story .ground::after{
  opacity:0;
  animation-play-state:paused;
  transition:opacity .6s ease;
}

/* ── the film ─────────────────────────────────────────────────────────── */

.st-film{
  position:absolute; left:0; top:0;
  z-index:2;
  width:var(--film-w); height:100%;
  margin:0;
  overflow:hidden;
  background:#1b1917;
  will-change:transform;
}
.st-film video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

.mt-sound{
  position:absolute; z-index:3;
  right:2.2vh; bottom:2.2vh;
  width:4.6vh; height:4.6vh; min-width:32px; min-height:32px;
  display:grid; place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.28); border-radius:50%;
  color:#fff;
  /* no backdrop blur: a blur over a playing film is redone every frame */
  background:rgba(20,17,15,.46);
  cursor:pointer;
  transition:background .25s ease, transform .25s ease, border-color .25s ease;
}
.mt-sound:hover{ background:rgba(20,17,15,.6); border-color:rgba(255,255,255,.5); transform:scale(1.06); }
.mt-sound svg{ display:block; width:46%; height:46%; }
.mt-sound .on{ display:none; }
.mt-sound.is-on .on{ display:block; }
.mt-sound.is-on .off{ display:none; }

/* ── where you are ────────────────────────────────────────────────────── */

.st-pager{
  position:absolute; z-index:4;
  left:50%; bottom:3.2vh;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:1.5vh;
  font:600 clamp(8px, 1.25vh, 12px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.3em;
  color:var(--ink-3);
  pointer-events:none;
}
.st-pager .now{ color:var(--ink); }
.st-pager i{
  position:relative; display:block;
  width:10vh; height:1px;
  background:var(--rule);
  overflow:hidden;
}
.st-pager b{
  position:absolute; left:0; top:0; bottom:0;
  width:100%;
  background:var(--red);
  transform-origin:left center;
  transform:scaleX(.25);
}

/* ═══ Our Works ═════════════════════════════════════════════════════════ */

.st-works .ch-copy{
  top:10vh;
  transform:none;
  width:min(44vw, 38em);
}

.works-count{
  position:absolute;
  right:var(--gutter);
  top:10vh;
  margin:0;
  text-align:right;
}
.wc-fig{
  display:flex; align-items:flex-start; justify-content:flex-end;
  font:400 clamp(60px, 21vh, 250px)/.82 Georgia, 'Times New Roman', serif;
  letter-spacing:-.045em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.wc-plus{
  font-style:italic;
  color:var(--red);
  font-size:.52em;
  margin-left:.06em;
  line-height:1;
}
.wc-label{
  display:block;
  margin-top:2.4vh;
  font:600 clamp(9px, 1.42vh, 13px)/1.4 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* the brand wall: two rows drifting past each other */
.bw{
  position:absolute;
  left:0; right:0;
  bottom:8vh;
  display:flex; flex-direction:column;
  gap:.6vh;
  padding:2.4vh 0 1vh;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.bw-row{ position:relative; }
.bw-track{
  display:flex;
  width:max-content;
  margin:0; padding:0;
  list-style:none;
  will-change:transform;
}
.bw-tile{
  position:relative;
  flex:none;
  width:23vh; height:17vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  outline:none;
}
.bw-tile::before{                  /* the hairline between marks */
  content:"";
  position:absolute; left:0; top:22%; bottom:30%;
  width:1px;
  background:var(--rule);
}
.bw-card{
  display:grid; place-items:center;
  width:15vh; height:11.5vh;
  transition:transform .5s var(--ease), opacity .35s ease;
}
.bw-card img{
  display:block;
  max-width:78%; max-height:78%;
  object-fit:contain;
  filter:grayscale(1) contrast(1.05);
  opacity:.5;
  transition:filter .45s ease, opacity .35s ease;
}
.bw-word{
  font:italic 400 clamp(14px, 2.9vh, 34px)/1.05 Georgia, 'Times New Roman', serif;
  letter-spacing:-.01em;
  text-align:center;
  color:var(--ink);
  opacity:.5;
  padding:0 .6em;
  transition:opacity .35s ease, color .35s ease;
}
.bw-name{
  margin-top:1.1vh;
  font:600 clamp(8px, 1.22vh, 12px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:rgba(20,17,15,.82);
  opacity:0;
  transform:translateY(-.6vh);
  transition:opacity .3s ease, transform .4s var(--ease);
}
.bw-name em{
  font-style:normal; font-weight:400;
  letter-spacing:.06em; text-transform:none;
  color:var(--ink-3);
  margin-left:.7em;
}
/* the one under the pointer comes up in its own colours, straight on the
   paper - no card behind it - and the rest step back */
.bw:hover .bw-card{ opacity:.55; }
.bw-tile:hover .bw-card,
.bw-tile:focus-visible .bw-card{
  opacity:1;
  transform:translateY(-.8vh) scale(1.12);
}
.bw-tile:hover .bw-card img,
.bw-tile:focus-visible .bw-card img{ filter:none; opacity:1; }
.bw-tile:hover .bw-word,
.bw-tile:focus-visible .bw-word{ opacity:1; color:var(--red); }
.bw-tile:hover .bw-name,
.bw-tile:focus-visible .bw-name{ opacity:1; transform:none; }

/* ═══ Enquiry ═══════════════════════════════════════════════════════════ */

.st-enquiry .ch-copy{ width:min(34vw, 30em); }

/* with no paragraph above it, the way to reach the studio is the whole of
   the left column: each line a small label over the address itself, set in
   the display serif */
.enq-contact{
  display:grid;
  gap:3.2vh;
  margin:1.4vh 0 0;
  padding:0;
  list-style:none;
}
.enq-contact li{ display:flex; flex-direction:column; gap:1.1vh; }
.enq-contact span{
  font:600 clamp(8px, 1.3vh, 12px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3);
}
.enq-contact a{
  align-self:flex-start;
  font:400 clamp(16px, 3.3vh, 36px)/1.15 Georgia, 'Times New Roman', serif;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
  background:linear-gradient(var(--red), var(--red)) left bottom / 0 1px no-repeat;
  padding-bottom:.35vh;
  transition:background-size .55s var(--ease), color .3s ease;
}
.enq-contact a:hover,
.enq-contact a:focus-visible{ background-size:100% 1px; color:var(--red); outline:none; }

.enq-form{
  position:absolute;
  right:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  width:min(40vw, 40em);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4.2vh 3vw;
  margin:0;
}
.fld{
  position:relative;
  display:flex; flex-direction:column;
  gap:1vh;
  margin:0;
}
.fld-wide{ grid-column:1 / -1; }
.fld label{
  font:600 clamp(8px, 1.3vh, 12px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.fld input,
.fld textarea{
  width:100%;
  margin:0;
  padding:.9vh 0 1.1vh;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  background:transparent;
  font:400 clamp(13px, 2.25vh, 22px)/1.35 Barlow, 'Barlow', system-ui, sans-serif;
  color:var(--ink);
  outline:none;
  -webkit-appearance:none; appearance:none;
}
.fld textarea{ resize:none; height:calc(3 * 1.35em + 2vh); }
.fld select{
  width:100%;
  margin:0;
  padding:.9vh 3vh 1.1vh 0;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  font:400 clamp(13px, 2.25vh, 22px)/1.35 Barlow, 'Barlow', system-ui, sans-serif;
  color:var(--ink);
  outline:none;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  /* a fine chevron of its own, in place of the system's */
  background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%238a7f74' stroke-width='1.3'/></svg>") right .4vh center / 1.4vh auto no-repeat;
}
/* until something is chosen it reads as a hint, like the other fields' */
.fld select.is-empty{ color:rgba(20,17,15,.28); }
.fld select option{ color:var(--ink); }
.fld input::placeholder,
.fld textarea::placeholder{ color:rgba(20,17,15,.28); }
/* the underline draws in red from the left while the field has the cursor */
.fld::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:var(--red);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease);
}
.fld:focus-within::after{ transform:scaleX(1); }

.enq-send{
  grid-column:1 / -1;
  justify-self:start;
  display:inline-flex; align-items:center; gap:1.4vh;
  padding:2vh 3.6vh;
  border:0; border-radius:999px;
  background:var(--red);
  color:#fff;
  font:600 clamp(9px, 1.42vh, 13px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.enq-send:hover{
  background:var(--red-dk);
  transform:translateY(-.3vh);
  box-shadow:0 1.6vh 2.6vh -1.4vh rgba(141,10,32,.55);
}
.enq-send svg{ width:1.6vh; height:1.6vh; min-width:11px; min-height:11px; transition:transform .3s var(--ease); }
.enq-send:hover svg{ transform:translateX(.4vh); }

.enq-thanks{
  grid-column:1 / -1;
  margin:-1.6vh 0 0;
  font:italic 400 clamp(13px, 2.2vh, 22px)/1.4 Georgia, 'Times New Roman', serif;
  color:var(--ink-2);
  opacity:0;
  transform:translateY(1vh);
  transition:opacity .5s ease, transform .6s var(--ease);
  pointer-events:none;
}
.enq-form.is-sent .enq-thanks{ opacity:1; transform:none; }

.enq-foot{
  position:absolute;
  left:var(--gutter); right:var(--gutter);
  bottom:2.6vh;
  display:flex; align-items:center; justify-content:space-between;
  font:500 clamp(9px, 1.3vh, 12px)/1 Barlow, 'Barlow', system-ui, sans-serif;
  letter-spacing:.04em;
  color:var(--ink-3);
}
.enq-foot a{ color:inherit; display:inline-flex; opacity:.8; transition:opacity .2s ease, color .2s ease; }
.enq-foot a:hover{ opacity:1; color:var(--ink); }
.enq-foot svg{ width:2.6vh; height:2.6vh; min-width:16px; min-height:16px; }

/* ── a phone, or any window taller than it is wide ─────────────────────────
   The film takes the whole screen behind About Us and Services, and their
   words sit over its foot in paper white; the words still turn sideways over
   it, and it leaves with Services as on a desktop. */

@media (orientation:portrait), (max-width:760px){
  .story{ --gutter:7vw; --film-w:100vw; }

  .st-film::after{
    content:"";
    position:absolute; inset:0;
    /* reaches well up: the words over the film run to six or seven lines
       on a phone, and the first of them must not sit on a bright frame */
    background:linear-gradient(to top, rgba(14,12,10,.88) 0%, rgba(14,12,10,.66) 38%, rgba(14,12,10,.28) 62%, rgba(14,12,10,0) 82%);
    pointer-events:none;
  }
  .mt-sound{ top:2.4vh; bottom:auto; right:2.4vh; }

  .st-about .ch-copy,
  .st-services .ch-copy{
    left:var(--gutter); right:var(--gutter);
    top:auto; bottom:11vh;
    width:auto;
    transform:none;
  }
  .st-about .ch-title, .st-services .ch-title{ color:#f7f4ef; }
  .st-about .ch-body, .st-services .ch-body{ color:rgba(247,244,239,.82); }
  .st-about .ch-no, .st-services .ch-no{ color:rgba(247,244,239,.7); }
  .st-about .ch-no .rule, .st-services .ch-no .rule{ background:linear-gradient(90deg, rgba(247,244,239,.7), rgba(247,244,239,.1)); }
  .story.on-film .st-pager{ color:rgba(247,244,239,.7); }
  .story.on-film .st-pager .now{ color:#f7f4ef; }
  .story.on-film .st-pager i{ background:rgba(247,244,239,.3); }

  .st-works .ch-copy,
  .st-enquiry .ch-copy{
    left:var(--gutter); right:var(--gutter);
    top:8vh;
    width:auto;
    transform:none;
  }
  .ch-no{ margin-bottom:2vh; }
  .ch-title{ font-size:clamp(34px, 6.4vh, 72px); margin-bottom:2vh; }
  .ch-body{ font-size:clamp(13px, 1.9vh, 18px); }

  .works-count{ right:auto; left:var(--gutter); top:41vh; text-align:left; }
  .wc-fig{ justify-content:flex-start; font-size:clamp(54px, 11vh, 120px); }
  .wc-label{ margin-top:1.4vh; }
  .bw{ bottom:8vh; }
  .bw-tile{ width:17vh; height:13.5vh; }
  .bw-card{ width:12vh; height:9vh; }

  /* the words and the form stack and flow, so neither can run into the
     other however tall the phone */
  .st-enquiry{
    display:flex; flex-direction:column; justify-content:center;
    gap:3.6vh;
    padding:6vh var(--gutter) 10vh;
  }
  .st-enquiry .ch-copy,
  .enq-form{
    position:relative;
    left:auto; right:auto; top:auto;
    width:auto;
    transform:none;
  }
  .enq-contact{ gap:1.8vh; margin-top:0; }
  .enq-contact li{ gap:.6vh; }
  .enq-contact a{ font-size:clamp(15px, 2.3vh, 22px); }
  .st-services .ch-list{ color:#f7f4ef; margin-top:2.2vh; gap:1.3vh 5vw; }
  .enq-form{ grid-template-columns:1fr 1fr; gap:2.4vh 5vw; }
  .fld{ gap:.6vh; }
  .fld input, .fld textarea{ font-size:clamp(14px, 1.9vh, 18px); padding:.6vh 0 .8vh; }
  .fld textarea{ height:calc(2 * 1.35em + 1.4vh); }
  .enq-send{ padding:1.7vh 3vh; }
  .enq-foot{ bottom:3vh; }
  /* the footer's line runs across the middle on a phone; the pager gives way */
  .story[data-at="3"] .st-pager{ opacity:0 !important; }
}

@media (prefers-reduced-motion: reduce){
  .story *, .story{ transition:none !important; }
}