/* ==========================================================================
   SKYBOUND SCALING - case-showcase.css
   The CASE STUDIES section: four editorial spreads, not a card grid.

   The signature is the bleed-and-flip. Each project's site shot runs past the
   type grid and off the page edge, alternating side by side down the section,
   while the text column stays locked to the site's --pad grid. The shot's
   corner radius follows the bleed - flat on the edge it runs off, rounded on
   the edge it meets the type. Nothing is cropped: the shot grows into the
   gutter rather than being clipped by it.

   Interaction is scroll-driven, never hover-driven, so a phone gets exactly
   what a desktop gets. One mechanic only, driven by the card's progress
   across the viewport (set by case-showcase.js): the accent rule on the meta
   line draws itself. The shot itself is never panned, scaled, or cropped -
   the full screenshot shows from its very top edge, always.
   Rows carry :active press feedback and a :focus-visible ring. There is no
   hover state on the cards - the work is what is being sold, so it is shown
   outright rather than hidden behind an interaction a touch device can never
   perform. (Same rule as the .wk-row list this section replaced.)

   Loaded by: / (home #cases) and /work/ (case study index).

   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01  Section shell
   02  Head - eyebrow, CASE STUDIES title, rail
   03  The spread: shell + bleed geometry
   04  The shot
   05  The panel: index, name, blurb, scope, foot
   06  Wide layout (two columns, alternating)
   07  Press + focus
   08  Reduced motion / no-JS
   ------------------------------------------------------------------ */

/* ============ 01 SECTION SHELL ============ */
.cs{
  position:relative;
  padding:clamp(76px,12vh,158px) 0 clamp(30px,5vh,70px);
  /* the shot bleeds by exactly one gutter, so it lands on the viewport edge
     at every width up to --maxw and reads as a deliberate overhang past it.
     Tying it to the fluid half of --pad (rather than --pad itself) is what
     stops it sprawling on ultra-wide displays. */
  --cs-bleed:clamp(20px,4vw,64px);
  --cs-r:clamp(14px,1.5vw,22px);   /* inner corner radius on the shot */
  --cs-gap:clamp(30px,4vw,80px);   /* column gutter between shot and panel */
}
/* Every child block tracks the same content edges as the rest of the site. */
.cs-head,.cs-list{padding-inline:var(--pad)}

/* ============ 02 HEAD ============ */
.cs-head{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px,2.6vh,30px);
  margin-bottom:clamp(34px,5.5vh,72px);
}
.cs-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:rgba(10,10,12,.62);
}
.cs-eyebrow::before{
  content:"";width:26px;height:1px;background:var(--blue);flex:none;
}

/* The title is the section. Archivo's width axis is pushed to its ceiling and
   the tracking pulled in hard, so the two words set as one dense block that
   fills the measure instead of floating in it. */
.cs-title{
  margin:0;
  font-weight:900;font-variation-settings:'wdth' 125;
  font-size:clamp(44px,13.4vw,200px);
  line-height:.8;letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
}
.cs-title .cs-ln{display:block}

/* The rail sits under the title as its underline and doubles as the section's
   readout: how many, and how far in. It draws itself as the section enters. */
.cs-rail{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:14px clamp(20px,4vw,60px);
  padding-top:clamp(16px,2.4vh,26px);
  border-top:1px solid var(--line);
}
/* Drawn full by default and handed to the scroll signal only once
   case-showcase.js announces itself with [data-cs-live]. Reduced motion, a
   failed script, and no JS at all therefore land on the finished state rather
   than an empty rule. */
.cs-rail::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--blue);
  transform:scaleX(1);transform-origin:0 50%;
}
[data-cs-live] .cs-rail::before{
  transform:scaleX(var(--sp,0));
  transition:transform .1s linear;
}
.cs-count{
  color:rgba(10,10,12,.6);
  font-variant-numeric:tabular-nums;
  flex:none;
}
.cs-count b{font-weight:700;color:var(--ink)}
.cs-sub{
  margin:0;max-width:46ch;
  font-size:clamp(14px,1.15vw,17px);line-height:1.5;
  color:rgba(10,10,12,.68);
}

/* ============ 03 THE SPREAD ============ */
.cs-list{
  display:flex;flex-direction:column;
  gap:clamp(46px,8vh,104px);
}
.cs-case{
  --ac:var(--blue);
  --ac-lift:rgba(34,48,254,.30);   /* the accent, reused as the shot's shadow */
  position:relative;display:block;
  color:inherit;text-decoration:none;
  isolation:isolate;
}
/* Colour alternates with the bleed direction, so side and hue move together
   and the four spreads read as four brands rather than four copies. */
.cs-case:nth-child(even){--ac:var(--orange);--ac-lift:rgba(255,77,0,.24)}

/* ============ 04 THE SHOT ============ */
.cs-shot{
  position:relative;z-index:2;display:block;overflow:hidden;
  background:var(--paper-deep);
  border:1px solid var(--line);
  /* the lift is tinted with the card's own accent, so the colour reaches the
     imagery instead of living only in the type */
  box-shadow:
    0 48px 92px -46px var(--ac-lift),
    0 16px 38px -20px rgba(15,25,70,.28),
    inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateZ(0);
}
/* The screenshot displays whole at its own ratio: full width, natural height,
   nothing cropped and nothing panned. The width/height attributes on the img
   reserve the box before load, so the layout never shifts. */
.cs-shot img{
  display:block;width:100%;height:auto;
}
/* Odd cards run off the left edge, even cards off the right. The flat side is
   always the side that leaves the page. */
.cs-case:nth-child(odd) .cs-shot{
  margin-left:calc(var(--cs-bleed) * -1);
  border-radius:0 var(--cs-r) var(--cs-r) 0;
  border-left:0;
}
.cs-case:nth-child(even) .cs-shot{
  margin-right:calc(var(--cs-bleed) * -1);
  border-radius:var(--cs-r) 0 0 var(--cs-r);
  border-right:0;
}

/* ============ 05 THE PANEL ============ */
.cs-panel{
  position:relative;z-index:1;
  padding-top:clamp(22px,3.4vh,34px);
  display:flex;flex-direction:column;
}

/* accent rule + sector share one optical line: the rule draws itself with the
   card's own accent as it scrolls past, the sector label holds the far edge */
.cs-index{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(12px,1.6vw,22px);
}
.cs-rule{position:relative;height:1px;background:var(--line);overflow:hidden}
.cs-rule::after{
  content:"";position:absolute;inset:0;background:var(--ac);
  transform:scaleX(1);transform-origin:0 50%;
}
[data-cs-live] .cs-rule::after{transform:scaleX(var(--pc,0))}
/* mirrored cards draw the rule from the numeral back toward the sector label,
   so the fill always grows out of the index */
[data-cs-live] .cs-case:nth-child(even) .cs-rule::after{transform-origin:100% 50%}
.cs-sector{color:rgba(10,10,12,.6);text-align:right;flex:none}

.cs-name{
  margin:clamp(16px,2.4vh,26px) 0 0;
  font-weight:900;font-variation-settings:'wdth' 122;
  font-size:clamp(36px,5.4vw,80px);
  line-height:.92;letter-spacing:-.035em;
  text-transform:uppercase;
}
.cs-blurb{
  margin:clamp(14px,2vh,20px) 0 0;max-width:44ch;
  font-size:clamp(14px,1.05vw,16px);line-height:1.6;
  color:rgba(10,10,12,.7);
}

/* What was actually built. Three real deliverables per project, set as a
   spec strip rather than pill tags - it reads as a record, not a keyword list. */
.cs-scope{
  list-style:none;margin:clamp(20px,3vh,30px) 0 0;
  border-top:1px solid var(--line);
}
.cs-scope li{
  display:flex;align-items:center;gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(10,10,12,.74);
}
.cs-scope li::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--ac);opacity:.55;
}

.cs-foot{
  margin-top:clamp(20px,3vh,30px);
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 20px;
}
.cs-domain{color:rgba(10,10,12,.5)}
/* The read control: an ink pill that inverts on hover/focus, matching the
   button language used everywhere else on the site. It is a span, not a link -
   the whole spread is the anchor. */
.cs-go{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;border-radius:999px;
  border:1px solid var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:transparent;color:var(--ink);
  transition:background .3s cubic-bezier(.65,0,.35,1),color .3s cubic-bezier(.65,0,.35,1);
}
.cs-go .arr{
  display:inline-block;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.cs-case:hover .cs-go,
.cs-case:focus-visible .cs-go{background:var(--ink);color:var(--paper)}
.cs-case:hover .cs-go .arr,
.cs-case:focus-visible .cs-go .arr{transform:translateX(5px)}

/* ============ 06 WIDE LAYOUT ============
   From tablet-landscape up the spread turns on its side: shot in one column,
   panel beside it, optically centred. The shot keeps its bleed, so the pair
   spans from the viewport edge to the type grid's far margin. */
@media (min-width:900px){
  .cs-head{
    grid-template-columns:1fr;
    gap:clamp(22px,3vh,38px);
  }
  .cs-case{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:var(--cs-gap);
    /* Both columns register on the same two edges: the index row starts level
       with the top of the shot, the domain + read row sits level with its
       bottom. That shared top and bottom is what holds the spread together
       once the panel is shorter than the screenshot. */
    align-items:stretch;
  }
  .cs-case:nth-child(odd)  .cs-shot {grid-column:1;grid-row:1}
  .cs-case:nth-child(odd)  .cs-panel{grid-column:2;grid-row:1}
  /* the wider track belongs to the shot on both sides, so mirroring the spread
     has to mirror the ratio too - otherwise cards 2 and 4 quietly show a
     smaller screenshot than 1 and 3 */
  .cs-case:nth-child(even){grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .cs-case:nth-child(even) .cs-shot {grid-column:2;grid-row:1}
  .cs-case:nth-child(even) .cs-panel{grid-column:1;grid-row:1}
  /* the shot keeps its own aspect ratio; only the panel stretches to the row */
  .cs-shot{align-self:start}
  .cs-panel{padding-top:0;align-self:stretch}
  .cs-foot{margin-top:auto}
  .cs-name{font-size:clamp(34px,3.6vw,62px)}
  .cs-rail{align-items:baseline}
  /* Mirrored cards flip the meta line - sector first, rule after - so the
     drawn rule always grows toward the shot it sits beside. Everything below
     stays left-aligned on both sides; flipping the body copy as well would
     make the even cards read as a different component. */
  .cs-case:nth-child(even) .cs-sector{order:1;text-align:left}
  .cs-case:nth-child(even) .cs-rule  {order:2}
  /* "STUDIES" is the longer word, so hanging it off the right margin squares
     the block against both edges and turns the leftover space into one clean
     diagonal instead of a hole in the top-right corner. */
  .cs-title .cs-ln + .cs-ln{text-align:right}
}
/* Very wide displays: hold the shot at a size where it still reads as a site
   rather than a billboard, and let the panel take the extra room. */
@media (min-width:1500px){
  .cs-case{grid-template-columns:minmax(0,1fr) minmax(0,.88fr)}
}

/* ============ 06b UN-NUMBERED STANDARDS ROWS ============
   The work index reuses the service-page .svc-row pattern for its standards
   list, minus the index numerals. Without the auto column the two text tracks
   take the full measure. */
.svc-row.no-idx{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
@media (max-width:1020px){
  .svc-row.no-idx{grid-template-columns:1fr}
  .svc-row.no-idx .svc-row-desc{grid-column:auto}
}

/* ============ 07 PRESS + FOCUS ============ */
.cs-case:active .cs-shot{transform:scale(.99);transition:transform .18s ease}
.cs-case:active .cs-go{background:var(--ink);color:var(--paper)}
.cs-case:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:4px}

/* ============ 08 REDUCED MOTION ============
   The scroll signal never starts under reduced motion - case-showcase.js bails
   before setting [data-cs-live] - so the rails and the shot are already static
   here. All that is left is the press and button easing. */
@media (prefers-reduced-motion:reduce){
  .cs-go,.cs-go .arr{transition:none}
  .cs-case:active .cs-shot{transition:none;transform:none}
}