/* ============================================================================
   padsplit-modular.css
   Page-scoped presentation layer for the modular campaign chapters of
   work/padsplit-case-study.html.

   Everything is prefixed .psm-. The page's existing vocabulary (.glance-*,
   .ps-fig, .ps-pair, .ps-row, .ps-tri, .pad-eq) is reused rather than
   duplicated; this file only adds the pacing containers the campaign work
   needs — full-bleed plates, an oversized feature, asymmetric groupings, a
   Regal Blue declaration field, and a diagram of the modular grid itself.

   Colour comes from PadSplit's own system, scoped to this page:
     Regal Blue  #004A74
     Tulip Tree  #ECBC3E
     Onahau      #C5DEFF
   ========================================================================== */

.psm{
  --ps-regal:#004A74;
  /* the left rail and its gutter, as .jlayout declares them; the bleed rules
     below need the pair to work out where the viewport centre actually is */
  --psm-rail:250px;
  --psm-rail-gap:52px;
  --ps-tulip:#ECBC3E;
  --ps-onahau:#C5DEFF;
  --psm-gap:clamp(16px,2.2vw,28px);
}

/* ---- full bleed ---------------------------------------------------------- */
/* The campaign chapters live inside .jmain, a grid column beside the left
   rail. A plate that should span the viewport steps out of that column rather
   than widening it, so the rail and the reading measure are both left alone. */
.psm-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
}
.psm-bleed img{width:100%;height:auto;display:block;border:0;border-radius:0}
.psm-bleed figcaption{padding:0 clamp(22px,4vw,40px)}
.psm-feature{margin-block:clamp(30px,4vw,64px)}

/* ---- groupings ----------------------------------------------------------- */
/* One lead plate with two smaller plates stacked beside it. The lead is a
   16:9; the two beside it are squares, so the column heights resolve without
   letterboxing anything. */
.psm-lead{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--psm-gap);align-items:start;margin:clamp(22px,3vw,38px) 0 0}
.psm-lead__side{display:grid;gap:var(--psm-gap)}
.psm-lead>*,.psm-lead__side>*{min-width:0}

/* two portraits, held narrower than the column so 4:5 does not tower */
.psm-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--psm-gap);align-items:start;margin:clamp(22px,3vw,38px) 0 0;max-width:900px}
.psm-duo>*{min-width:0}

/* A small plate carried beside its own note: the change of scale that
   closes each campaign line. */
.psm-solo{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  align-items:center;margin:clamp(22px,3vw,38px) 0 0}
@media (max-width:760px){.psm-solo{grid-template-columns:1fr;gap:18px}}

/* asymmetric two-up: a wide plate carrying a square beside it.
   Landscape belongs in the 5fr slot and a square in the 3fr slot; at 1440
   that resolves to 528x297 beside 317x317, so the columns finish level.
   Reversing them makes the square 528px tall next to a 178px landscape. */
.psm-off{display:grid;grid-template-columns:5fr 3fr;gap:var(--psm-gap);align-items:start;margin:clamp(22px,3vw,38px) 0 0}
.psm-off.is-flip{grid-template-columns:3fr 5fr}
.psm-off>*{min-width:0}

@media (max-width:900px){
  .psm-lead,.psm-off,.psm-off.is-flip{grid-template-columns:1fr}
  .psm-off.is-flip .ps-fig:first-child{order:2}
}
@media (max-width:560px){
  .psm-duo{grid-template-columns:1fr;max-width:460px}
}

/* ---- declaration field --------------------------------------------------- */
/* PadSplit's own blue, used for the campaign's rhetorical moments. Full bleed
   so the colour is the whole width of the page, not a card inside it. */
.psm-decl{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  background:var(--ps-regal);color:#fff;
  padding:clamp(52px,8vw,120px) clamp(22px,5vw,64px);
  margin-top:clamp(34px,4.4vw,64px);margin-bottom:clamp(34px,4.4vw,64px);
}
.psm-decl__in{max-width:1180px;margin:0 auto;text-align:center}
.psm-decl__h{
  font-family:var(--font-system);font-weight:500;
  font-size:clamp(30px,4.6vw,68px);line-height:1.06;letter-spacing:-.022em;
  margin:0 auto;max-width:20ch;color:#fff;text-wrap:balance;
}
.psm-decl__h em{font-style:normal;color:var(--ps-tulip)}
.psm-decl__s{
  font-family:var(--font-system);font-weight:400;
  font-size:clamp(16px,1.5vw,20px);line-height:1.6;
  margin:clamp(20px,2.4vw,32px) auto 0;max-width:56ch;color:var(--ps-onahau);text-wrap:pretty;
}
@media (max-width:700px){.psm-decl__s{max-width:44ch}}

/* ---- the modular grid, explained ---------------------------------------- */
/* A drawing of the system rather than a photograph of it: the same Cartesian
   division the ads use, with each kind of room labelled. Decorative to a
   screen reader — the prose beside it carries the meaning. */
.psm-sys{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(26px,3.4vw,44px) 0 0}
@media (max-width:860px){.psm-sys{grid-template-columns:1fr}}
.psm-plan{
  display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);
  gap:4px;aspect-ratio:16/10;background:var(--line,rgba(23,26,29,.14));
  border:1px solid var(--line,rgba(23,26,29,.14));padding:4px;border-radius:6px;
}
.psm-plan span{
  display:flex;align-items:flex-end;padding:8px 9px;border-radius:2px;
  font-family:var(--font-system);font-weight:500;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.2;
}
.psm-plan .is-photo{background:#2b3a44;color:rgba(255,255,255,.72);grid-column:span 3;grid-row:span 3}
.psm-plan .is-photo-2{background:#3d4f5a;color:rgba(255,255,255,.66);grid-column:span 2;grid-row:span 2}
.psm-plan .is-photo-3{background:#556a76;color:rgba(255,255,255,.66);grid-column:span 1;grid-row:span 2}
.psm-plan .is-type{background:#fff;color:var(--ps-regal);grid-column:span 3;grid-row:span 1;border:1px solid rgba(0,74,116,.18)}
.psm-plan .is-brand{background:var(--ps-regal);color:#fff;grid-column:span 3;grid-row:span 1}
.psm-plan .is-air{background:var(--ps-onahau);color:var(--ps-regal);grid-column:span 3;grid-row:span 1}
.psm-plan .is-accent{background:var(--ps-tulip);grid-column:span 1;grid-row:span 1}

.psm-key{list-style:none;margin:clamp(18px,2.4vw,26px) 0 0;padding:0;display:grid;gap:12px}
.psm-key li{display:grid;grid-template-columns:14px 1fr;gap:12px;align-items:start;font-size:16px;line-height:1.5;color:var(--ink-2)}
.psm-key i{display:block;width:14px;height:14px;border-radius:2px;margin-top:4px}
.psm-key b{color:var(--ink);font-weight:500}

/* ---- format ledger ------------------------------------------------------- */
.psm-formats{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin:clamp(24px,3vw,36px) 0 0;
  border-top:1px solid var(--line,rgba(23,26,29,.18));padding-top:20px}
.psm-formats div{min-width:110px}
.psm-formats .k{font-family:var(--font-system);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.psm-formats .v{font-family:var(--font-system);font-weight:500;font-size:16px;color:var(--ink);margin:0}

/* ---- campaign line header ------------------------------------------------ */
.psm-line{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.psm-line .r{font-family:var(--font-system);font-weight:500;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ps-regal);display:inline-flex;align-items:center;gap:9px}
.psm-line .r::before{content:'';width:16px;height:3px;background:var(--ps-tulip);border-radius:1px}
.psm-line .r.is-blue{color:var(--accent)}
.psm-line .r.is-blue::before{background:var(--accent)}
.psm-line .t{font-family:var(--font-system);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* a caption used outside a <figure> */
.psm-cap{
  margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  font-family:var(--font-system);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.psm-cap .t{letter-spacing:-.004em;text-transform:none;font-size:15px;color:var(--ink-2);font-weight:400;line-height:1.45}

/* the supplied campaign masters carry their own typography; no border or
   rounded corner is added over the top of an ad that was composed edge to edge */
.psm-plain img{border:0;border-radius:0;background:transparent}

/* While the left rail is present, this column's centre sits half the rail
   block to the right of the viewport centre. Subtract that so the plate lands
   on the viewport edge instead of 151px inside it. Below 900px .jlayout is a
   single column and the rule above is already right. */
@media (min-width:901px){
  .psm-bleed,.psm-decl{
    margin-left:calc(50% - 50vw - (var(--psm-rail) + var(--psm-rail-gap)) / 2);
    margin-right:calc(50% - 50vw + (var(--psm-rail) + var(--psm-rail-gap)) / 2);
  }
}