/* ============================================================================
   five-stones-kit.css
   Page-scoped presentation layer for work/case-5-stones.html.

   Everything here is prefixed .fsk- (layout / figures) or .fsb- (box viewer).
   No shared component, token or other case study is modified. The file assumes
   tokens.css has already loaded and inherits --paper / --ink / --accent from
   it, so the Five Stones page keeps the site's typography and colour discipline
   and only adds the pacing devices the kit story needs: full-bleed plates,
   oversized features, asymmetric pairs, environmental dark fields, and one
   interactive artifact.

   Rhythm reference: work/case-frontline-21.html. Vocabulary is the Five Stones
   brand's, not Frontline21's.
   ========================================================================== */

.fsk{
  /* Five Stones palette, taken from the official 5 Stones mark. Scoped to this
     page: these names exist nowhere else in the system. */
  --fs-navy:#002280;
  --fs-blue:#378fcc;
  --fs-sky:#85c7e7;
  --fs-field:#0f1420;      /* environmental dark ground for the rock plates */
  --fs-field-2:#141a28;
  --fs-gap:clamp(16px,1.8vw,28px);
}

/* ---- full-bleed --------------------------------------------------------- */
/* .wrap is a centred 1280px column with 40px gutters. A plate that wants the
   whole viewport steps out of it rather than being nested in a wider wrap, so
   the surrounding copy measure is never disturbed. */
.fsk-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
}
.fsk-bleed img{width:100%;height:auto;display:block}

/* ---- figures ------------------------------------------------------------ */
.fsk-fig{margin:0;min-width:0}
.fsk-fig img{width:100%;height:auto;display:block;border-radius:2px;background:var(--fs-field)}
.fsk-cap{
  margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-family:var(--font-system);font-weight:500;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.fsk-cap .n{color:var(--accent)}
.fsk-cap .t{letter-spacing:.02em;text-transform:none;font-size:14px;color:var(--ink-2)}
.fsk-field .fsk-cap{color:rgba(255,255,255,.56)}
.fsk-field .fsk-cap .t{color:rgba(255,255,255,.8)}
.fsk-field .fsk-cap .n{color:var(--fs-sky)}

/* the oversized single plate: the page's largest gesture, used sparingly */
.fsk-feature{margin-block:clamp(40px,5vw,84px)}
.fsk-feature .fsk-cap{padding:0 clamp(20px,4vw,40px)}

/* asymmetric pair — 5/3 by default, .is-flip reverses the weighting */
.fsk-pair{display:grid;grid-template-columns:5fr 3fr;gap:var(--fs-gap);align-items:start;margin:clamp(32px,4vw,64px) 0}
.fsk-pair.is-flip{grid-template-columns:3fr 5fr}
.fsk-pair.is-even{grid-template-columns:1fr 1fr}
.fsk-pair>*{min-width:0}

/* one lead plate with two smaller plates stacked beside it */
.fsk-lead{display:grid;grid-template-columns:1.62fr 1fr;gap:var(--fs-gap);align-items:start;margin:clamp(32px,4vw,64px) 0}
.fsk-lead__side{display:grid;gap:var(--fs-gap)}
.fsk-lead>*,.fsk-lead__side>*{min-width:0}

/* a row of three, and a row of four for the resource cards */
.fsk-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fs-gap);margin:clamp(32px,4vw,64px) 0}
.fsk-quad{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--fs-gap);margin:clamp(32px,4vw,64px) 0}
.fsk-trio>*,.fsk-quad>*{min-width:0}

@media (max-width:900px){
  .fsk-pair,.fsk-pair.is-flip,.fsk-pair.is-even,.fsk-lead{grid-template-columns:1fr}
  .fsk-trio{grid-template-columns:1fr 1fr}
  .fsk-quad{grid-template-columns:1fr}
  /* No source reordering in the stacked view: the flip is a desktop-only
     weighting choice, and reversing it on mobile would make the figure
     numbers count backwards. */
}
@media (max-width:620px){
  .fsk-trio{grid-template-columns:1fr}
}

/* ---- environmental dark field ------------------------------------------- */
/* The kit photography is lit on dark rock. Setting those sections on a near
   black ground lets the plates sit in their own light instead of being cut out
   of it by the paper. */
.fsk-field{background:var(--fs-field);color:#fff;position:relative}
.fsk-field .story-head h2{color:#fff}
.fsk-field .story-head h2 em,
.fsk-field .story-head .num{color:var(--fs-sky)}
.fsk-field .story-body p{color:rgba(255,255,255,.82)}
.fsk-field .story-body p strong{color:#fff}
.fsk-field .story-body .side{color:rgba(255,255,255,.52)}
.fsk-field .story-body .side b{color:#fff}
.fsk-field .story-sub{color:var(--fs-sky)}
.fsk-field .fsk-fig img{background:var(--fs-field-2)}

/* ---- declaration set piece ---------------------------------------------- */
/* The page's rhetorical moments. Centred, full measure, one idea. Used four
   times at most so each one still lands. */
.fsk-decl{padding:clamp(64px,9vw,148px) 0;text-align:center}
.fsk-decl__h{
  font-family:var(--font-system);font-weight:500;
  font-size:clamp(36px,5.6vw,88px);line-height:1.06;letter-spacing:-.015em;
  margin:0 auto;max-width:20ch;text-wrap:balance;color:var(--ink);
}
.fsk-decl__h em{font-style:normal;color:var(--accent)}
.fsk-field .fsk-decl__h{color:#fff}
.fsk-field .fsk-decl__h em{color:var(--fs-sky)}
.fsk-decl__s{
  font-family:var(--font-brand);font-weight:400;
  font-size:clamp(17px,1.6vw,22px);line-height:1.6;
  margin:clamp(22px,2.6vw,36px) auto 0;max-width:58ch;color:var(--ink-2);text-wrap:pretty;
}
.fsk-field .fsk-decl__s{color:rgba(255,255,255,.78)}
@media (max-width:700px){.fsk-decl__s{max-width:44ch}}

/* ---- five resources ----------------------------------------------------- */
.fsk-res{display:grid;gap:var(--fs-gap);margin:clamp(36px,4.4vw,72px) 0 0}
.fsk-res__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,410px);gap:clamp(20px,3vw,48px);align-items:center;
  padding:clamp(20px,2.4vw,34px) 0;border-top:1px solid rgba(23,26,29,.16)}
.fsk-res__row:last-child{border-bottom:1px solid rgba(23,26,29,.16)}
.fsk-res__meta .who{
  font-family:var(--font-system);font-weight:500;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;
}
.fsk-res__meta .name{
  font-family:var(--font-system);font-weight:500;
  font-size:clamp(26px,2.6vw,40px);line-height:1.12;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink);
}
.fsk-res__meta .desc{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0;max-width:46ch}
.fsk-res__row .fsk-fig img{border-radius:2px}
@media (max-width:820px){
  .fsk-res__row{grid-template-columns:1fr;gap:18px}
  .fsk-res__row .fsk-fig{order:-1}
}

/* ---- the pastor's note --------------------------------------------------- */
.fsk-note{
  border-left:3px solid var(--accent);padding:6px 0 6px 24px;margin:clamp(30px,3.4vw,52px) 0 0;
  font-size:18px;line-height:1.65;color:var(--ink-2);max-width:62ch;
}
.fsk-field .fsk-note{border-left-color:var(--fs-sky);color:rgba(255,255,255,.78)}
.fsk-note b{color:var(--ink);font-weight:500}
.fsk-field .fsk-note b{color:#fff}

/* ---- the congregant journey --------------------------------------------- */
.fsk-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(23,26,29,.18);margin-top:clamp(36px,4vw,64px)}
.fsk-journey__step{padding:26px 22px 30px;border-right:1px solid rgba(23,26,29,.16)}
.fsk-journey__step:last-child{border-right:0}
.fsk-journey__n{font-family:var(--font-system);font-weight:500;font-size:12.5px;letter-spacing:.18em;color:var(--accent);margin:0 0 14px}
.fsk-journey__t{font-family:var(--font-system);font-weight:500;font-size:clamp(17px,1.4vw,20px);line-height:1.3;letter-spacing:-.006em;color:var(--ink);margin:0 0 8px}
.fsk-journey__d{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}
@media (max-width:900px){
  .fsk-journey{grid-template-columns:1fr 1fr}
  .fsk-journey__step{border-bottom:1px solid rgba(23,26,29,.16)}
  .fsk-journey__step:nth-child(2n){border-right:0}
}
@media (max-width:540px){
  .fsk-journey{grid-template-columns:1fr}
  .fsk-journey__step{border-right:0}
  .fsk-journey__step:last-child{border-bottom:0}
}

/* ---- hero cover --------------------------------------------------------- */
.fsk-cover{position:relative;margin:clamp(40px,5vw,64px) 0 0;overflow:hidden;border-radius:2px;background:var(--fs-field)}
/* direct child only: the mark inside .fsk-cover__mark sizes itself */
.fsk-cover > img{width:100%;height:auto;display:block}
.fsk-cover__mark{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,22px);
  padding:clamp(24px,4vw,56px);
  background:linear-gradient(0deg,rgba(8,11,18,.78),rgba(8,11,18,0));
}
.fsk-cover__logo{width:clamp(112px,11vw,168px);height:auto;display:block;filter:brightness(0) invert(1)}
.fsk-cover__line{
  font-family:var(--font-system);font-weight:500;
  font-size:clamp(20px,2.6vw,38px);line-height:1.16;letter-spacing:-.008em;
  color:#fff;margin:0;max-width:22ch;
}
@media (max-width:700px){
  .fsk-cover__mark{position:static;background:var(--fs-field);padding:24px 22px 28px}
}

/* ============================================================================
   BOX VIEWER  (.fsb-)
   A 24-frame image sequence of the shipped kit, plus the photographed open
   states. It is a sequence viewer, not a fabricated 3D model: nothing is
   warped, cut or extrapolated, and the open states are the real photographs
   rather than an animated lid.
   ========================================================================== */
.fsb{margin:clamp(36px,4.4vw,72px) 0 0}
.fsb__stage{
  position:relative;width:100%;aspect-ratio:1672/941;
  background:var(--fs-field-2);border-radius:2px;overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.fsb__stage.is-open{cursor:default}
.fsb__stage:active{cursor:grabbing}
.fsb__stage.is-open:active{cursor:default}
.fsb__stage:focus-visible{outline:3px solid var(--fs-sky);outline-offset:3px}
.fsb__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;pointer-events:none;-webkit-user-drag:none;
}
.fsb__hint{
  position:absolute;left:50%;bottom:clamp(12px,2vw,22px);transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-system);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.9);background:rgba(8,11,18,.5);
  border:1px solid rgba(255,255,255,.24);border-radius:2px;padding:8px 14px;
  pointer-events:none;transition:opacity .35s ease;
}
.fsb__hint svg{width:34px;height:9px;display:block;fill:none;stroke:currentColor;stroke-width:1.4}
.fsb.is-touched .fsb__hint{opacity:0}

.fsb__bar{
  display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;
  margin-top:16px;
}
.fsb__modes{display:inline-flex;gap:8px}
.fsb__mode{
  font-family:var(--font-system);font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);background:transparent;border:1px solid rgba(23,26,29,.28);border-radius:2px;
  padding:9px 15px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;
}
.fsb__mode:hover{border-color:var(--ink);color:var(--ink)}
.fsb__mode[aria-pressed="true"]{background:var(--fs-navy);border-color:var(--fs-navy);color:#fff}
.fsb__mode:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fsk-field .fsb__mode{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.28)}
.fsk-field .fsb__mode:hover{color:#fff;border-color:rgba(255,255,255,.6)}
.fsk-field .fsb__mode[aria-pressed="true"]{background:var(--fs-sky);border-color:var(--fs-sky);color:#0f1420}
.fsk-field .fsb__mode:focus-visible{outline-color:var(--fs-sky)}

.fsb__nav{display:inline-flex;align-items:center;gap:12px}
.fsb__step{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(23,26,29,.28);border-radius:2px;cursor:pointer;color:var(--ink);
  transition:background .18s,border-color .18s;
}
.fsb__step:hover{border-color:var(--ink)}
.fsb__step:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fsb__step svg{width:11px;height:14px;fill:currentColor}
.fsk-field .fsb__step{color:#fff;border-color:rgba(255,255,255,.28)}
.fsk-field .fsb__step:hover{border-color:rgba(255,255,255,.6)}
.fsk-field .fsb__step:focus-visible{outline-color:var(--fs-sky)}

.fsb__read{
  font-family:var(--font-system);font-weight:500;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);min-width:12ch;
}
.fsk-field .fsb__read{color:rgba(255,255,255,.6)}

.fsb__state{
  margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:60ch;
}
/* visually-hidden polite status: announced by screen readers, never painted.
   Scoped to the viewer so it cannot collide with a future site-wide utility. */
.fsb__status{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.fsk-field .fsb__state{color:rgba(255,255,255,.76)}

/* no-JS / reduced-motion static presentation */
.fsb__fallback{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fs-gap);margin-top:var(--fs-gap)}
.fsb__fallback>*{min-width:0}
@media (max-width:820px){.fsb__fallback{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){
  /* Rotation stays available on demand; nothing animates on its own, and the
     hint stops asking for a gesture the reader may not want to make. */
  .fsb__hint{transition:none}
}