/* ============================================================================
   WRAPPER CHROME — shared by the six Other Work case studies.

   Xbox, Box Buddy, Amazon and Mayo each carry their own copy of this, styled
   in that product's own voice: those four are reached by a TILE expanding, so
   the page has to arrive wearing the case study's colours or the navigation
   shows a seam. These six are reached by a button on more.html, one level
   deeper, and there is no expansion to match — so they share one set of
   portfolio chrome instead of six bespoke ones.

   The chrome is deliberately in the PORTFOLIO's colours (tile 4's amber), not
   the case study's. It belongs to the site, not to the work it is framing.

   Pairs with wrapper.js. Each page sets --frame-bg to the colour of its case
   study's FIRST SCREENFUL, so nothing flashes while the frame fades up.
   ========================================================================== */

html, body{ height:100%; overflow:hidden; }
body{ background: var(--frame-bg, var(--ink)); }

.cs-frame{
  position:fixed; inset:0;
  width:100%; height:100%;
  border:0; display:block;
  opacity:0;
  transition: opacity .5s cubic-bezier(.4,0,.2,1) .15s;
}
.cs-frame.ready{ opacity:1; }


/* ==========================================================================
   THE CHROME RAIL — two keys stacked under the parked nav tab

   These six sit one level below every other page on this site, so they need
   two things nothing else does: a way ACROSS to their siblings on more.html,
   and a way straight HOME without going through a menu.

   Scrolling past the end already handles "back to Other Work" (nav.js reads
   `data-overscroll-to`), so these are the click routes for anyone who does not
   want to scroll to the bottom to move.

   ICON ONLY at rest, label on hover — Angela's call: "maybe we don't even put
   words there, maybe we just put like a home icon." A permanent word next to a
   permanent word next to the nav tab is three labels shouting over someone's
   finished case study. The icon is the resting state; the word arrives when
   you reach for it, which is the only moment it is needed.

   WHERE IT GOES took three tries, because a case study is a finished design
   and every corner of one is spoken for:

     top left      RDR2's sticky nav is hidden in the frame, so its hero title
                   starts at y=40 and the pill sat on "ROCKSTAR GAMES
                   PRESENTS". Both MERIDIAN prototypes have a full-width topbar.
     bottom left   covered the MERIDIAN navigation map's legend.
     LEFT EDGE, under the parked nav tab — where it is. On an inner page
                   nav.css parks the menu button against the left edge at
                   mid-height, one sixth of it off screen. Sitting under it
                   groups all the portfolio chrome into one object instead of
                   scattering it, and it is the one band of screen every case
                   study here already yields to the nav.

   Flat left, round right, so the keys read as part of that tab.
   ========================================================================== */
.cs-rail{
  position:fixed; left:0; top:50%; z-index:60;
  display:flex; flex-flow:column; gap:7px;
  /* The parked tab is 90px scaled to two thirds = 60px, centred on 50%, so it
     ends 30px below the midline. 44px clears it by 14. */
  transform: translateY(44px);
}
.cs-key{
  display:flex; align-items:center;
  height:38px; padding:0 12px;
  border-radius: 0 999px 999px 0;
  background: var(--t4-ink); color: var(--t4-lite);
  border:1px solid rgba(229,170,68,.42); border-left:none;
  text-decoration:none; cursor:pointer;
  opacity:0; transform: translateX(-10px);
  transition: opacity .45s ease, transform .45s var(--ease-swoop),
              background-color .25s ease, color .25s ease;
}
.cs-rail.show .cs-key{ opacity:1; transform:none; }
/* Laddered, so the rail assembles rather than appearing. */
.cs-rail.show .cs-key:nth-child(1){ transition-delay:.25s, .25s, 0s, 0s; }
.cs-rail.show .cs-key:nth-child(2){ transition-delay:.34s, .34s, 0s, 0s; }

.cs-key svg{
  width:17px; height:17px; flex:none;
  /* 1.65, not 1.9. At 16px with a heavier stroke the sheets glyph's list rules
     closed up into a smudge — the icon has to survive being small. */
  fill:none; stroke:currentColor; stroke-width:1.65;
  stroke-linecap:round; stroke-linejoin:round;
}
/* max-width, not width — `auto` is not an animatable value, and a max-width
   larger than the text simply clamps to the text. */
.cs-key span{
  max-width:0; margin-left:0; overflow:hidden; white-space:nowrap;
  font-family: var(--font-body); font-weight:600; font-size:12.5px;
  letter-spacing:-.01em; opacity:0;
  transition: max-width .4s var(--ease-swoop), margin-left .4s var(--ease-swoop),
              opacity .3s ease;
}
@media (any-hover:hover){
  .cs-key:hover{ background: var(--t4-lite); color: var(--t4-ink); }
  .cs-key:hover span{ max-width:150px; margin-left:9px; opacity:1; }
}
/* Keyboard gets the same disclosure — an icon-only control has to name itself
   when it is focused, not only when it is pointed at. */
.cs-key:focus-visible{ background: var(--t4-lite); color: var(--t4-ink); outline:none; }
.cs-key:focus-visible span{ max-width:150px; margin-left:9px; opacity:1; }

/* NO HOVER, NO SECRET. If the input cannot hover there is no gesture that
   reveals the label, so the label is simply always out. This is deliberately
   NOT inside a width breakpoint: a touch laptop or a tablet in landscape is a
   wide screen with no pointer, and gating on width would leave exactly those
   users with two unexplained icons. `hover: none` asks what the input can do,
   which is the honest test — same call nav.css makes for .only-touch. */
@media (hover: none){
  .cs-key span{ max-width:150px; margin-left:9px; opacity:1; }
}


/* ==========================================================================
   THE LOOP HINT — the scroll-back loop is not discoverable without a nudge
   ========================================================================== */
.cs-hint{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; pointer-events:none;
  font-family: var(--font-body); font-weight:600;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 15px; border-radius:999px;
  background: var(--t4-ink); color: var(--t4-lite);
  border:1px solid rgba(229,170,68,.42);
  opacity:0; transition: opacity .45s ease;
}
.cs-hint.show{ opacity:1; }


/* ==========================================================================
   BELOW 1024 the nav button stops being a left-edge tab and parks at BOTTOM
   CENTRE (nav.css). Both pieces of chrome have to move out from under it:
   the pill goes back to the bottom-left corner, and the hint lifts above the
   button rather than sitting behind it.
   ========================================================================== */
@media (max-width:1024px){
  /* The rail turns into a row in the bottom-left corner, clear of the button
     that now sits at bottom centre. */
  .cs-rail{
    top:auto; bottom:14px; left:14px;
    flex-flow:row; gap:8px; transform: translateY(6px);
  }
  .cs-key{ border-radius:999px; border-left:1px solid rgba(229,170,68,.42); padding:0 11px; }
  /* 64px button + its overhang, plus air. */
  .cs-hint{ bottom:84px; }
}
@media (max-width:640px){
  .cs-rail{ bottom:10px; left:10px; }
  .cs-key{ height:34px; }
  .cs-key span{ font-size:11.5px; }
  .cs-hint{ font-size:10px; bottom:78px; }
}

@media (prefers-reduced-motion: reduce){
  .cs-frame, .cs-key{ transition:none; }
}