/* Indian Tribe — the clock's subcategories and the project view
 * ---------------------------------------------------------------------------
 * Shared by portfolio.html and category-test.html. The two pages differ only
 * in that the test page also carries the band's tuning panel; everything the
 * view itself needs lives here, so the pages cannot drift apart.
 *
 * The markup is built by js/project.js at open time - only the subnav layer
 * exists in the page, because it has to sit outside .clock-nav to be
 * clickable at all. See the note on .subnav-layer below.
 */

/* ── clock subcategories ───────────────────────────────────────────────────
   Beside the active word, the way meech213.com hangs them off its dial:
   a small uppercase row, active near-black, the rest at 40%. */
/* Its own layer, matching .clock-nav's box exactly. Inside .clock-nav the row
   is unreachable: that nav sits at z-index 4 and main.stage paints over it at
   10, so the buttons take no clicks however high they are raised within it -
   a child cannot escape its parent's stacking context. */
.subnav-layer{
  position:absolute;z-index:51;
  left:50%;bottom:calc(-165px + var(--clock-lift, 0px));
  width:620px;height:330px;
  transform:translateX(-50%);
  pointer-events:none;overflow:visible;
}
@media (max-width:860px){
  .subnav-layer{transform:translateX(-50%) scale(.78);transform-origin:center bottom}
}
/* ── the roller ───────────────────────────────────────────────────────────
   Ten categories no longer fit beside the word, so the row runs inside a rail
   that clips it and a track that slides. The rule the track obeys is in
   js/category.js: nothing stays selected past the middle of the rail - pick
   something in the right-hand half and the track rolls until it sits at the
   midpoint. The faded edges say there is more either way. */
.radial-subnav{
  position:absolute;z-index:5;
  transform:translateY(-50%);
  pointer-events:auto;
  opacity:0;transition:opacity .45s ease .12s;
}
.radial-subnav[data-sec]{opacity:1}

/* No fade at either end. The run was masked out over the last twenty-odd
   pixels at each edge, which read as EVENTS dissolving on the right and ALL
   dissolving on the left - a category half-there looks like a rendering fault,
   not a hint that there is more. The rail still clips; it simply clips
   cleanly. */
.subnav-rail{
  overflow:hidden;
}
.subnav-track{
  display:flex;align-items:center;gap:14px;
  white-space:nowrap;width:max-content;
  padding:0 2px;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.subnav-link{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;
  font:500 11px/1 Barlow,'Barlow',system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(20,18,18,.4);cursor:pointer;
  transition:color .22s ease;
}
.subnav-link:hover{color:rgba(20,18,18,.72)}
.subnav-link.on{color:rgba(20,18,18,.94)}

/* the tick under whichever category is open, and the brands it holds */
.subnav-dash{
  position:absolute;left:0;top:100%;
  width:1px;height:6px;margin-top:3px;
  background:rgba(20,18,18,.5);
  opacity:0;transition:opacity .25s ease,left .5s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.subnav-dash.on,
.radial-subnav[data-tier="on"] .subnav-dash{opacity:1}
/* A rail of its own, clipped, with the run of brands sliding inside it - the
   categories above work the same way. Before this the row simply grew past the
   right edge and FMCG's last two brands were off the screen. */
.subnav-brands{
  position:absolute;left:0;top:100%;
  margin-top:13px;
  max-height:0;overflow:hidden;opacity:0;
  transition:opacity .3s ease,max-height .3s ease;
}
/* open either way: the row's own class, or the host's state - which is what a
   freshly rebuilt row has to go on */
.subnav-brands.on,
.radial-subnav[data-tier="on"] .subnav-brands{max-height:26px;opacity:1}
.subnav-brands-track{
  display:flex;align-items:center;gap:11px;
  white-space:nowrap;width:max-content;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.brand-link{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;
  font:500 9.5px/1 Barlow,'Barlow',system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;
  color:rgba(20,18,18,.36);cursor:pointer;
  transition:color .22s ease;
}
.brand-link:hover{color:rgba(20,18,18,.68)}
.brand-link.on{color:var(--red,#c8102e)}

@media (max-width:860px){
  .subnav-track{gap:10px}
  .subnav-link{font-size:9.5px}
  .brand-link{font-size:8.5px}
}

/* ── the project view ──────────────────────────────────────────────────────
   meech213's inside layout: the title large and tilted down the left, the
   visuals stacked and scrolled on the right, Prev/Next on fixed edge rails
   that show where they lead. */
.project-view{
  position:fixed;inset:0;z-index:80;
  background:var(--paper,#f4f1ec);
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.project-view.on{opacity:1;visibility:visible;transition:opacity .45s ease}
/* The belt stops drawing once a brand page covers it, so what is blurred is a
   still picture - but Safari re-blurs a full-screen layer far more readily
   than Chrome, and this one is the size of the window. Kept, because it is
   part of how the page reads, but marked: if Safari is still heavy with a
   brand page open, this is the next thing to drop. */
/* The belt behind is blurred while the page fades in over it, and only while.
   Once the page is opaque nothing behind it can be seen, but the blur was
   left on - and a window-sized blurred layer is the most expensive thing a
   compositor can be asked to hold, WebKit far more than Blink. So the class
   comes off once the fade is done (js/project.js) and goes back on the way
   out, which keeps the look exactly and stops paying for it in between. */
html.project-open .app{filter:blur(2px);transition:filter .45s ease}
html.project-settled .app{filter:none;transition:none}

.project-grid{
  position:absolute;inset:0;
  /* The column was 44vw, which on a laptop reaches past the middle of the
     screen - and the middle is where the largest film now sits, so the brand's
     name ran straight across it. Narrower, and the name wraps inside its own
     column instead of crossing the work. */
  display:grid;grid-template-columns:minmax(240px,33vw) 1fr;
  gap:3vw;padding:clamp(24px,6vh,74px) clamp(28px,5vw,84px);
}
.project-details{display:flex;flex-direction:column;justify-content:center;min-width:0}
.project-title{
  margin:0;font:clamp(20px,2.4vw,34px)/1.06 Georgia,'Times New Roman',serif;
  letter-spacing:-.035em;color:#14100e;
  /* set straight: the brand book's own wordmark rules say not to rotate type,
     and a brand's name is not an ornament */
}
.project-title span{display:block}
/* A mark stands where the name would, at the size the name was: tall enough to
   read, never wider than the column, and held to the left edge so a wide
   wordmark and a round badge both start in the same place. Marks come out of
   logo-cut.py trimmed to their own ink, so the box is the picture. */
.brand-mark{
  display:block; width:auto; height:auto;
  max-width:min(100%, 300px); max-height:clamp(92px,16vh,164px);
  object-fit:contain; object-position:left center;
}
.project-title span:last-child{padding-left:1.4em}
.project-meta{
  margin-top:clamp(20px,4vh,44px);
  font:600 9.5px/1 Barlow,'Barlow',system-ui,sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(20,18,18,.44);
}
.project-indicator{
  /* under the title, where that site sets it - not pinned to the floor */
  margin-top:clamp(26px,5vh,54px);display:flex;align-items:baseline;gap:22px;
  font:500 10px/1 Barlow,'Barlow',system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(20,18,18,.45);
}
.project-count{display:inline-flex;align-items:baseline;gap:5px;color:rgba(20,18,18,.9)}
/* the digits ride on a reel rather than being swapped out */
.reel{display:inline-flex;font-style:normal}
.reel .digit{display:inline-block;height:1em;overflow:hidden;font-weight:400}
.reel .digit span{display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.reel .digit i{display:block;height:1em;line-height:1;font-style:normal}

.project-content{position:relative;min-width:0;pointer-events:none}
.project-content > *{pointer-events:auto}

/* ── photo: one band, full bleed ───────────────────────────────────────────
   That site draws this to a canvas covering the whole viewport, with the
   title laid over it. Frames are positioned and SIZED to the two guides
   rather than scaled, so the band's shape is exactly those lines and the
   pictures stay crisp. No per-frame rotation - the lean belongs to the band. */
.photo-strip{position:fixed;inset:0;z-index:1;display:none;pointer-events:none}
.project-view[data-mode="photo"] .photo-strip{display:block}
/* A frame is cut into vertical slices so its top and bottom edges can bow
   under a fast flick while its sides stay pinned to the guides - a curve no
   single transform can draw. The figure itself is only an anchor; it carries
   the opacity so overlapping slices composite once and leave no seam. */
.strip-frame{position:absolute;left:0;top:0;margin:0;width:0;height:0;will-change:opacity}
.strip-frame .sl{
  position:absolute;left:0;top:0;display:block;
  transform-origin:0 0;background-repeat:no-repeat;background-color:rgba(20,18,18,.05);
  backface-visibility:hidden;
}

/* The layer takes no clicks; the handles on it do, so the band underneath
   still scrolls everywhere except on a handle. */
.guide-lines{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;width:100%;height:100%}
.guide-lines .gl{stroke:#e0202e;stroke-width:1.5;stroke-dasharray:7 6;opacity:.85}
.guide-lines .gh{
  pointer-events:auto;cursor:grab;touch-action:none;
  fill:#e0202e;stroke:#fff;stroke-width:2;opacity:.9;
}
.guide-lines .gh:hover{opacity:1}
.guide-lines .gh.on{cursor:grabbing;fill:#141210}
.project-view.drawing{cursor:crosshair}
.project-view.drawing .project-grid{opacity:.25;transition:opacity .2s ease}

/* the page's mark, carried into the view so it does not vanish behind it */
.project-view .brand-note{z-index:30;pointer-events:none}

/* ── video: one at a time, in a player ───────────────────────────────────
   The player is centred on the SCREEN, not in its column: it is the only
   thing on the page at that moment and a film pushed into one half of the
   window reads as an afterthought. Fixed to the viewport rather than laid
   out in the grid, so its own box is the space it has to fill. */
.video-stage{
  position:absolute;inset:0;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
.project-view[data-mode="video"] .video-stage{
  display:flex;position:fixed;inset:64px 72px;z-index:6;
}
.vid-count{
  display:inline-flex;align-items:baseline;gap:5px;
  font:500 10px/1 Barlow,'Barlow',system-ui,sans-serif;letter-spacing:.1em;
  color:rgba(20,18,18,.85);
}
.ctl-btn{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:4px 12px;margin:0;
  cursor:pointer;font:500 13px/1 Barlow,'Barlow',system-ui,sans-serif;color:rgba(20,18,18,.42);
  transition:color .2s ease,transform .2s ease;
}
.ctl-btn:hover{color:rgba(20,18,18,.92)}
#pvDown{transform:rotate(180deg)}
/* ── the stack ────────────────────────────────────────────────────────────
   The film being watched stands in front at full size; the rest fall away
   behind it to either side, overlapping and each a little smaller. The stack
   sits right of the middle so the brand's name keeps the left of the screen.

   Everything that moves is transitioned together on one curve, so a step reads
   as the whole stack turning rather than five things sliding separately. */
.video-fan{
  position:absolute;inset:0;
  flex:1 1 auto;min-height:0;
  pointer-events:none;
}
.fan-slot{
  position:absolute;top:50%;
  opacity:0;                      /* nothing shows until it has been seated */
  transform:translate(-50%,-50%);
  background:#100f0e;overflow:hidden;
  border-radius:10px;
  box-shadow:0 18px 44px rgba(15,41,64,.26);
  transition:left .62s cubic-bezier(.32,.72,.24,1),
             width .62s cubic-bezier(.32,.72,.24,1),
             height .62s cubic-bezier(.32,.72,.24,1),
             opacity .42s ease,
             box-shadow .62s ease;
  will-change:left,width,height;
  backface-visibility:hidden;
}
.fan-slot.lead{
  pointer-events:auto;
  box-shadow:0 30px 72px rgba(15,41,64,.34);
}
.fan-slot video{width:100%;height:100%;object-fit:cover;display:block;background:#100f0e}
/* Cover is right in the stack, where the slot has already been cut to the
   film's own shape and only guards against a pixel of rounding mid-animation.
   It is wrong full screen: there the element becomes the whole landscape
   display and cover CROPS the film to fill it, so a portrait piece was being
   shown as a letterbox strip out of its middle. Full screen it is contained -
   the film keeps its own ratio and its own framing, and the screen around it
   goes black. Same for picture-in-picture. */
.fan-slot video:fullscreen,
.fan-slot video:-webkit-full-screen,
.fan-slot video:picture-in-picture{ object-fit:contain; background:#000; }
/* The ones behind sit further back than they did - dimmer and flatter - so the
   eye settles on the one in front rather than reading all five at once. */
.fan-slot:not(.lead) video{opacity:.58;filter:saturate(.72) brightness(.84)}

@media(max-width:900px){
  .fan-slot{box-shadow:0 14px 34px rgba(15,41,64,.24);border-radius:8px}
}

/* The title sits over the band, and reads from the middle of the column the
   way meech213 sets it - not from the top. It needs the full height to do
   that: .project-details centres itself, and a grid left static sizes to its
   own content instead of the viewport, so there was nothing to centre in. */
.project-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  grid-template-rows:minmax(0,1fr);
}
.project-details{pointer-events:auto}

.asset-rail{
  position:fixed;top:0;bottom:0;width:34px;z-index:82;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.asset-rail--prev{left:clamp(10px,2vw,26px)}
.asset-rail--next{right:clamp(10px,2vw,26px)}
.rail-btn{
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;
  writing-mode:vertical-rl;pointer-events:auto;cursor:pointer;
  font:500 11px/1 Barlow,'Barlow',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(20,18,18,.5);transition:color .22s ease;
}
.asset-rail:hover .rail-btn{color:rgba(20,18,18,.95)}
.asset-preview{
  position:absolute;top:50%;width:118px;height:158px;object-fit:cover;
  opacity:0;transform:translateY(-50%) scale(.94);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
  box-shadow:0 18px 44px rgba(15,41,64,.22);
}
.asset-rail--prev .asset-preview{left:38px}
.asset-rail--next .asset-preview{right:38px}
.asset-rail.has:hover .asset-preview{opacity:1;transform:translateY(-50%) scale(1)}

.project-close{
  position:fixed;top:clamp(14px,2.4vh,26px);right:clamp(16px,3vw,40px);z-index:84;
  -webkit-appearance:none;appearance:none;border:0;background:none;padding:6px;margin:0;
  cursor:pointer;font:600 9.5px/1 Barlow,'Barlow',system-ui,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(20,18,18,.5);
}
.project-close:hover{color:rgba(20,18,18,.95)}

@media (max-width:860px){
  /* One column, and the film gets what is left. Stacking alone was not
     enough: both rows sized to their content, so the brand's name, its meta
     and the film all sat in a band in the middle of a tall screen with the
     film squeezed to a couple of hundred pixels. Rows auto/1fr hands the
     whole remaining height to the work, which is what came to see. */
  .project-grid{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    gap:14px;padding:62px 18px 22px;
  }
  .project-details{justify-content:flex-start}
  .project-title{transform:none;font-size:clamp(30px,9vw,46px)}
  .project-title span:last-child{padding-left:.6em}
  .brand-mark{max-height:clamp(58px,10vh,96px)}
  .project-meta{margin-top:10px}
  .project-indicator{margin-top:12px}
  .asset-preview{display:none}
  /* PREV and NEXT are set vertically on rails at the screen's edges, which on
     a phone is straight through the brand's name. They come off the edges and
     sit as ordinary words along the bottom, clear of everything. */
  .asset-rail{
    top:auto;bottom:0;width:auto;height:44px;
  }
  .asset-rail--prev{left:20px}
  .asset-rail--next{right:20px}
  .rail-btn{writing-mode:horizontal-tb;font-size:10px;padding:10px 4px}
  /* The stage is inset 72px from each side, which is most of a phone. It also
     covered the whole window, name and all, because on a wide screen the fan
     simply keeps to the right of the writing - stacked, it has to start below
     it instead. */
  .project-view[data-mode="video"] .video-stage{
    inset:clamp(180px,25vh,240px) 14px 58px;
  }
  /* A full-window blur is the most expensive thing a phone can be asked to
     composite, and behind an opaque page nobody sees it. */
  html.project-open .app{filter:none}
}

/* ── one photograph, on its own ───────────────────────────────────────────
   Opened by clicking a frame in the strip. The strip behind it keeps its
   place; this lies over the top until it is dismissed, and the picture is
   shown whole rather than fitted to a frame. */
.pv-solo{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,17,15,.93);
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility .28s;
}
.pv-solo.on{opacity:1;visibility:visible}
.pv-solo figure{margin:0;max-width:92vw;max-height:88vh;display:flex;
  flex-direction:column;align-items:center;gap:12px}
.pv-solo img{
  display:block;max-width:92vw;max-height:82vh;
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.pv-solo figcaption{
  font:500 11px/1 Barlow,'Barlow',system-ui,sans-serif;letter-spacing:.16em;
  color:rgba(247,244,239,.6);
}
.pv-solo-close{
  position:absolute;top:20px;right:26px;
  font:600 11px/1 Barlow,'Barlow',system-ui,sans-serif;letter-spacing:.14em;
  color:rgba(247,244,239,.72);background:none;border:0;cursor:pointer;padding:8px;
}
.pv-solo-close:hover{color:#fff}
.pv-solo-step{
  position:absolute;top:50%;transform:translateY(-50%);
  font:300 34px/1 Barlow,'Barlow',system-ui,sans-serif;
  color:rgba(247,244,239,.5);background:none;border:0;cursor:pointer;
  padding:16px 20px;transition:color .2s ease;
}
.pv-solo-step:hover{color:#fff}
.pv-solo-step.prev{left:10px}
.pv-solo-step.next{right:10px}
@media(max-width:900px){
  .pv-solo-step{font-size:28px;padding:12px}
  .pv-solo img{max-width:94vw;max-height:76vh}
}