/* Case pages. One grammar, four worlds: the shell (nav, type, margins,
   focus, reduced motion) stays put, and each project brings its own ground
   colour and density. Loaded after v3.css and v5.css. */

:root{
  --m:clamp(20px, 6.2vw, 104px);
  --gap:clamp(18px, 2.2vw, 40px);
  --lead:clamp(1.12rem, 0.95rem + 0.7vw, 1.6rem);
}

/* ------------------------------------------------------------- the worlds */
.c13{
  --pp:#F3F1EC;      /* ground */
  --ik:#14120F;      /* ink on it */
  --dm:#6B6559;      /* the quiet register */
  --ac:#1F3AC6;      /* one accent: links and interaction state */
  --ln:rgba(20, 18, 15, 0.22);
  background:var(--pp); color:var(--ik);
  display:block; overflow:clip;
}
/* 01 OVREL, warm paper, art at full bleed */
.w-ovrel{ --pp:#EFE9DE; --ik:#14120F; --dm:#6E6454; --ac:#1F3AC6; --ln:rgba(20, 18, 15, 0.2); }
/* 02 Ümbe: creme paper and slate, with the print colours as residue. Paper opens and carries the reading; slate closes the page. */
.w-umbe{ --pp:#F0ECE3; --ik:#1C1F22; --dm:#57544C; --ac:#1C1F22; --ln:rgba(28, 31, 34, 0.24); }
/* 03 Facility OS, the product's own dark green */
.w-fac{ --pp:#0E2119; --ik:#E8EFEA; --dm:#8FA79A; --ac:#C1F13D; --ln:rgba(232, 239, 234, 0.2); }
/* 02 Wallcreeper, the brand's graphite, chalk and one loud yellow */
.w-wc{ --pp:#1D2023; --ik:#F1EEE8; --dm:#A9AEB3; --ac:#F1E64C; --ln:rgba(241, 238, 232, 0.2); }
/* 04 Acquisition, cold white; information is the material */
.w-acq{ --pp:#EDEFF2; --ik:#0E1116; --dm:#59636F; --ac:#1F3AC6; --ln:rgba(14, 17, 22, 0.2); }

/* Literal colours here, not the tokens: the tokens live on .c13 and the
   header sits outside it. */
body:has(.c13){ background:#F3F1EC; }
body:has(.w-ovrel){ background:#EFE9DE; }
body:has(.w-acq){ background:#EDEFF2; }
body:has(.w-ovrel) .nav3{ background:rgba(239, 233, 222, 0.92); }
body:has(.w-acq) .nav3{ background:rgba(237, 239, 242, 0.92); }
body:has(.w-umbe){ background:#F0ECE3; }
body:has(.w-fac){ background:#0E2119; }
body:has(.w-fac) .nav3{ background:rgba(14, 33, 25, 0.92); border-bottom-color:rgba(232, 239, 234, 0.2); }


body:has(.w-fac) .nav3 .mark,body:has(.w-fac) .navm .l,body:has(.w-fac) .idx{ color:#E8EFEA; }
body:has(.w-fac) .nav3 a.l,body:has(.w-fac) .nav3 .avail{ color:#9DB3A7; }
body:has(.w-fac) .nav3 a.l:hover,body:has(.w-fac) .nav3 a.l[aria-current="page"]{ color:#E8EFEA; }
body:has(.w-fac) .skip{ background:#C1F13D; color:#0B1410; }
body:has(.w-fac) .sheet{ background:#0E2119; color:#E8EFEA; }
body:has(.w-fac) .sheet ol{ border-top-color:#E8EFEA; }
body:has(.w-fac) .sheet li a{ color:#E8EFEA; border-bottom-color:rgba(232, 239, 234, 0.2); }
body:has(.w-fac) .sheet li a span{ color:#9DB3A7; }
body:has(.w-fac) .sheet .foot-s{ color:#9DB3A7; }
body:has(.w-fac) .sheet .foot-s a{ color:#E8EFEA; border-bottom-color:#E8EFEA; }


/* short pages must still push the footer to the bottom of the viewport */
body:has(.c13){ display:flex; flex-direction:column; min-height:100vh; }
body:has(.c13) .c13{ flex:1 0 auto; }

.c13 img{ display:block; width:100%; height:auto; }
.c13 a{ color:inherit; }
.c13 ::selection{ background:var(--ik); color:var(--pp); }
.c13 :focus-visible{ outline:2px solid var(--ac); outline-offset:3px; }

/* mono register: labels and readouts */
.c13 .lb{ margin:0; font:400 11px/1.55 var(--mono); letter-spacing:0.18em; text-transform:uppercase; color:var(--dm); }
.c13 .lb b{ display:block; margin-bottom:6px; font-weight:400; }

/* -------------------------------------------------------------- opening */
/* Name, one line, role, state and the first image, all above the fold. */
.op13{ padding:clamp(28px, 4.4vw, 68px) var(--m) clamp(26px, 3.2vw, 48px);
  display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap); }
.back13{ display:block; margin:0 0 clamp(18px, 2vw, 30px); font:400 11px/1.55 var(--mono);
  letter-spacing:0.16em; text-transform:uppercase; color:var(--dm); text-decoration:none; }
.back13:hover{ color:var(--ac); }
.op13 .back13{ grid-column:1 / 2; align-self:start; }
.op13 .lb{ grid-column:1 / 2; }
.op13-t{ grid-column:2 / 3; margin:-0.09em 0 0 -0.045em;
  font:500 clamp(2.4rem, 6.6vw, 6.2rem)/0.9 var(--sans); letter-spacing:-0.05em; }
.op13-say{ grid-column:2 / 3; margin:clamp(16px, 1.8vw, 26px) 0 0;
  font:500 var(--lead)/1.26 var(--sans); letter-spacing:-0.02em; max-width:40ch; }
.op13-facts{ grid-column:2 / 3; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:var(--gap); row-gap:16px; margin:clamp(22px, 2.6vw, 38px) 0 0; }
.op13-facts div{ border-top:1px solid var(--ln); padding-top:10px; }
.op13-facts dt{ font:400 11px/1.55 var(--mono); letter-spacing:0.16em; text-transform:uppercase; color:var(--dm); }
.op13-facts dd{ margin:6px 0 0; font:400 15px/1.45 var(--sans); }
.op13-facts a{ text-decoration-color:var(--ln); text-underline-offset:3px; }
.op13-facts a:hover{ color:var(--ac); }

/* ----------------------------------------------------------------- plates */
.pl13{ margin:0; }
.pl13 > figcaption{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  margin:13px var(--m) 0; font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.pl13 > figcaption p{ margin:0; max-width:56ch; }
.pl13 > figcaption .lb{ padding-top:2px; }
.pl13-in{ padding:0 var(--m); }          /* a plate held inside the margin */

/* -------------------------------------------------------------- spreads */
/* Mono locator in the margin, heading and prose in the main column. */
.s13{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  padding:clamp(48px, 6vw, 104px) var(--m) 0; align-items:start; }
.s13 > .lb{ grid-column:1 / 2; padding-top:0.35em; }
.s13-c{ grid-column:2 / 3; min-width:0; }
.s13-c > *:first-child{ margin-top:0; }
.say13{ margin:0; font:500 clamp(1.3rem, 1rem + 1.3vw, 2.3rem)/1.16 var(--sans); letter-spacing:-0.035em; max-width:26ch; }
h2.say13{ max-width:24ch; }
.tx13{ margin:clamp(16px, 1.8vw, 26px) 0 0; font:400 17px/1.55 var(--sans); max-width:56ch; color:var(--ik); text-wrap:pretty; }
.tx13 + .tx13{ margin-top:1em; }
.tx13 a{ text-decoration-color:var(--ln); text-underline-offset:3px; }
.tx13 a:hover{ color:var(--ac); }
.dim13{ color:var(--dm); }

/* wide spread: full measure, label still in the margin */
.s13.wide13 .s13-c{ max-width:none; }

/* figures side by side */
.duo13{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--gap); row-gap:clamp(24px, 3vw, 44px);
  margin:clamp(40px, 5vw, 80px) var(--m) 0; align-items:end; }
.duo13 figure{ margin:0; }
.duo13 figcaption{ margin-top:12px; font:400 13.5px/1.5 var(--sans); color:var(--dm); max-width:48ch; }

/* counters */
.n13{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:var(--gap); row-gap:24px;
  margin:clamp(28px, 3.2vw, 48px) 0 0; padding:0; }
.n13 li{ border-top:1px solid var(--ln); padding-top:12px; min-width:0; }
.n13 b{ display:block; font:500 clamp(1.5rem, 1rem + 1.7vw, 2.8rem)/0.96 var(--sans); letter-spacing:-0.04em; }
.n13 span{ display:block; margin-top:8px; font:400 12.5px/1.45 var(--sans); color:var(--dm); }

/* code plate, in the project's ink */
.co13{ margin:0; padding:clamp(18px, 1.8vw, 26px); overflow-x:auto; background:#14120F; color:#F3F1EC;
  font:400 12.5px/1.8 var(--mono); white-space:pre; }
.co13 b{ font-weight:500; color:#fff; }
.co13 i{ font-style:normal; color:#9C9689; }
.w-fac .co13{ background:#081310; color:#D8E6DC; }
.w-fac .co13 b{ color:#C1F13D; }
.w-fac .co13 i{ color:#6E8B7C; }
.w-acq .co13{ background:#0E1116; color:#DDE3EC; }
.w-acq .co13 b{ color:#fff; }
.w-acq .co13 i{ color:#79839A; }

/* ------------------------------------------------------------ decisions */
/* Constraint, choice, why. Three columns, no nesting. */
.dc13{ padding:clamp(56px, 7vw, 120px) var(--m) 0; }
.dc13 > .lb{ margin-bottom:clamp(20px, 2.4vw, 34px); }
.dc13 ol{ list-style:none; margin:0; padding:0; counter-reset:d; }
.dc13 li{ counter-increment:d; border-top:1px solid var(--ln); padding:clamp(22px, 2.4vw, 34px) 0 clamp(24px, 2.6vw, 38px);
  display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap); align-items:start; }
.dc13 li:last-child{ border-bottom:1px solid var(--ln); }
.dc13 li::before{ content:counter(d, decimal-leading-zero); font:400 11px/1.9 var(--mono); letter-spacing:0.16em; color:var(--dm); }
.dc13 h3{ grid-column:2 / 3; margin:-0.1em 0 0; font:500 clamp(1.25rem, 0.95rem + 1.1vw, 2.1rem)/1.08 var(--sans);
  letter-spacing:-0.035em; max-width:22ch; }
.dc13 dl{ grid-column:2 / 3; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gap); row-gap:14px;
  margin:clamp(18px, 2vw, 28px) 0 0; }
.dc13 dl.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.dc13 dl.four{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.dc13 dt{ font:400 11px/1.55 var(--mono); letter-spacing:0.16em; text-transform:uppercase; color:var(--dm); }
.dc13 dd{ margin:8px 0 0; font:400 15.5px/1.5 var(--sans); }
.dc13 code{ font:400 0.92em/1 var(--mono); }

/* ------------------------------------------------------------------- end */
.end13{ padding:clamp(56px, 7vw, 120px) var(--m) clamp(40px, 4.4vw, 72px);
  display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap); }
.end13 > .lb{ grid-column:1 / 2; }
.end13-c{ grid-column:2 / 3; }
.end13-c .tx13{ margin-top:0; }
.end13-c .tx13 + .tx13{ margin-top:1em; }

/* Next project: an inverted full-bleed band, so a case ends on a door.
   Needs .c13 in the selector, a bare .nx13 loses to .c13 a{color:inherit}
   and the text lands on its own background. */
.c13 a.nx13{ display:grid; grid-template-columns:14ch minmax(0, 1fr) auto; column-gap:var(--gap); align-items:center;
  padding:clamp(34px, 4vw, 64px) var(--m); text-decoration:none;
  background:var(--ik); color:var(--pp); border-top:1px solid var(--ln); }
.nx13 .lb{ color:inherit; opacity:.66; }
.nx13 b{ font:500 clamp(1.6rem, 1rem + 2.6vw, 3.6rem)/1 var(--sans); letter-spacing:-0.045em; }
.nx13 .ar{ font:400 clamp(1.3rem, 2vw, 2.2rem)/1 var(--sans); transition:transform var(--ui) ease; }
.nx13:hover .ar{ transform:translateX(10px); }
.nx13 ::selection{ background:var(--pp); color:var(--ik); }
.nx13:focus-visible{ outline-offset:-4px; }
@media (prefers-reduced-motion: reduce){ .nx13 .ar{ transition:none; } }

.foot13{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  padding:20px var(--m) 28px; background:#14120F; color:#F3F1EC; }
.foot13 p{ margin:0; font:400 13px/1.6 var(--sans); color:#9C9689; }
.foot13 a{ color:#F3F1EC; text-decoration-color:rgba(243, 241, 236, 0.45); text-underline-offset:3px; }
.foot13 a:hover{ color:#fff; }
.foot13 ::selection{ background:#F3F1EC; color:#14120F; }
.foot13 :focus-visible{ outline:2px solid #F3F1EC; outline-offset:3px; }

/* 01 OVREL, art edge to edge and at varying scale; the code plate supports
   it rather than taking the page. */
.ov13-works{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); row-gap:clamp(20px, 2.4vw, 36px);
  margin:clamp(40px, 5vw, 80px) var(--m) 0; align-items:end; }
.ov13-works figure{ margin:0; }
.ov13-works figcaption{ margin-top:11px; font:400 11px/1.55 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dm); }
.ov13-works .w1{ grid-column:1 / 4; }
.ov13-works .w2{ grid-column:4 / 10; }
.ov13-works .w3{ grid-column:10 / 13; }
.ov13-works .w3-note{ grid-column:9 / 13; align-self:end; margin:0 0 4px;
  font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.ov13-shot img{ box-shadow:0 0 0 1px var(--ln); }
.ov13-gap{ margin-top:clamp(40px, 5vw, 80px); }
.ov13-gap > figcaption{ margin-left:0; margin-right:0; }   /* the plate already sits inside the margin */

/* The storefront plates. Captures of ovrel.co sit on the case's own paper,
   which is nearly the store's, so each one gets a hairline edge. */
.ov13-set{ margin:clamp(40px, 5vw, 80px) var(--m) 0; }
.ov13-two{ display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); column-gap:var(--gap); align-items:end; }
.ov13-two img{ box-shadow:0 0 0 1px var(--ln); }
.ov13-set > figcaption{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  margin-top:13px; font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.ov13-set > figcaption p{ margin:0; max-width:56ch; }
.ov13-set > figcaption .lb{ padding-top:2px; }
.ov13-ph img{ box-shadow:0 0 0 1px var(--ln); }
.ov13-ph figcaption{ margin-top:11px; font:400 11px/1.55 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dm); }
.ov13-ph-note{ margin:14px var(--m) 0; font:400 13.5px/1.55 var(--sans); color:var(--dm); max-width:60ch; }

/* The order path. Six steps on one line; the approval gate drops out of it,
   because it is the step that decides whether money moves. */
.ov13-path{ margin:clamp(34px, 4.2vw, 62px) var(--m) 0; }
.ov13-path ol{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); column-gap:var(--gap); align-items:start; }
.ov13-path li{ position:relative; min-width:0; padding:14px 14px 18px; border:1px solid var(--ln); }
.ov13-path li:not(:last-child)::after{ content:""; position:absolute; top:50%; left:100%;
  width:var(--gap); height:1px; background:var(--ln); }
.ov13-path li .n{ display:block; font:400 11px/1.5 var(--mono); letter-spacing:0.13em; text-transform:uppercase; color:var(--dm); }
.ov13-path li b{ display:block; margin-top:10px; font:500 clamp(1rem, 0.85rem + 0.5vw, 1.35rem)/1.14 var(--sans); letter-spacing:-0.025em; }
.ov13-path li small{ display:block; margin-top:8px; font:400 13px/1.5 var(--sans); color:var(--dm); }
.ov13-path li.k{ margin-top:clamp(24px, 3vw, 44px); border-color:var(--ik); background:var(--ik); color:var(--pp); }
.ov13-path li.k .n,.ov13-path li.k small{ color:rgba(239, 233, 222, 0.72); }
.ov13-path li.k::after{ top:calc(50% - clamp(12px, 1.5vw, 22px)); }
.ov13-path > figcaption{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  margin-top:16px; font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.ov13-path > figcaption p{ margin:0; max-width:60ch; }
.ov13-proof figure{ grid-column:1 / -1; max-width:920px; }

@media (max-width:1023px){
  .ov13-two{ grid-template-columns:minmax(0, 1fr); row-gap:var(--gap); }
  .ov13-path ol{ grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:var(--gap); }
  .ov13-path li:not(:last-child)::after{ display:none; }
  .ov13-path li.k{ margin-top:0; }
}
@media (max-width:760px){
  .ov13-set{ margin-left:var(--m); margin-right:var(--m); }
  .ov13-set > figcaption,.ov13-path > figcaption{ grid-template-columns:1fr; row-gap:6px; }
  .ov13-path ol{ grid-template-columns:minmax(0, 1fr); row-gap:10px; }
  .ov13-path li{ display:grid; grid-template-columns:6.5rem minmax(0, 1fr); column-gap:14px; align-items:baseline; padding:12px 14px 14px; }
  .ov13-path li .n{ grid-row:1 / span 2; align-self:start; padding-top:0.3em; }
  .ov13-path li b{ margin-top:0; }
  .ov13-path li small{ grid-column:2 / 3; margin-top:4px; }
}

/* 02 ÜMBE, the studio's title face (Inter Tight 900) set tight, as on umbe.studio. */
.um13-wm{ margin:0 0 0 -0.04em; padding-top:0.3em;
  font:900 clamp(4.2rem, 15vw, 14rem)/0.84 "Inter Tight", "Arial Black", sans-serif; letter-spacing:-0.045em; }
.um13-film{ margin:0; }
.um13-film .frame{ position:relative; background:#000; }
.um13-film video{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; background:#000; }
.um13-play{ position:absolute; right:10px; bottom:10px; appearance:none; cursor:pointer; min-width:64px; padding:8px 11px;
  border:1px solid rgba(243, 241, 236, 0.55); background:rgba(12, 11, 10, 0.8); color:#F3F1EC; font:500 13px/1 var(--sans); }
.um13-play:hover{ background:#F3F1EC; color:#0C0B0A; }
/* the foil ramp */
.rm13{ display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:8px; margin:clamp(24px, 2.8vw, 40px) 0 0; }
.rm13 div i{ display:block; height:clamp(48px, 5vw, 84px); }
.rm13 div span{ display:block; margin-top:8px; font:400 10px/1.4 var(--mono); letter-spacing:0.1em; color:var(--dm); }
/* what was cut */
/* phones */
.ph13{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); column-gap:var(--gap);
  margin:clamp(40px, 5vw, 80px) var(--m) 0; }
.ph13 figure{ margin:0; }

/* 03 FACILITY OS, the owner's screen is the anchor and the biggest thing
   on the page; everything else annotates it. */
.fa13-dash{ margin:clamp(36px, 4.4vw, 72px) 0 0; padding-left:var(--m); }
.fa13-dash img{ box-shadow:0 0 0 1px var(--ln); }
/* At 390 the dashboard is unreadable at 100vw, so it keeps its size and
   pans sideways instead. */
.pan13{ overflow-x:auto; overscroll-behavior-x:contain; }
/* annotations beside a screen */
.an13{ list-style:none; counter-reset:a; margin:clamp(18px, 2vw, 28px) 0 0; padding:0; }
.an13 li{ counter-increment:a; display:grid; grid-template-columns:2.6rem minmax(0, 1fr); column-gap:14px;
  padding:9px 0 10px; border-top:1px solid var(--ln); font:400 14px/1.55 var(--sans); }
.an13 li:last-child{ border-bottom:1px solid var(--ln); }
.an13 li::before{ content:counter(a, decimal-leading-zero); font:400 11px/1.75 var(--mono); letter-spacing:0.14em; color:var(--dm); }
.an13 b{ font-weight:500; }
/* the rules it runs by */
.ru13{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gap); row-gap:clamp(22px, 2.4vw, 34px);
  margin:clamp(28px, 3.2vw, 48px) 0 0; padding:0; }
.ru13 li{ border-top:1px solid var(--ln); padding-top:13px; min-width:0; }
.ru13 b{ display:block; font:500 15.5px/1.3 var(--sans); letter-spacing:-0.015em; }
.ru13 span{ display:block; margin-top:8px; font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.ru13 code{ font:400 0.9em/1 var(--mono); }
/* the recovery path */
.st13{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:clamp(24px, 2.8vw, 40px) 0 0; }
.st13 div{ flex:1 1 150px; min-width:0; padding:13px 15px 15px; border:1px solid var(--ln); }
.st13 div.k{ border-color:var(--ac); }
.st13 dt{ font:400 11px/1.5 var(--mono); letter-spacing:0.13em; text-transform:uppercase; color:var(--dm); }
.st13 dd{ margin:8px 0 0; font:500 14.5px/1.35 var(--sans); }
.st13 dd small{ display:block; margin-top:6px; font:400 12.5px/1.45 var(--sans); color:var(--dm); }

/* 04 ACQUISITION, no photography at all. Cold white, tabular figures,
   monospace where the system speaks. */
.aq13-big{ padding:clamp(40px, 5vw, 88px) var(--m) 0; }
.aq13-n{ margin:0 0 0 -0.055em; font:500 clamp(3.2rem, 13.4vw, 15rem)/0.84 var(--sans); letter-spacing:-0.06em; }
.aq13-sub{ margin:clamp(14px, 1.6vw, 22px) 0 0; font:500 var(--lead)/1.26 var(--sans); letter-spacing:-0.02em; max-width:40ch; }
/* the seven stages */
.fl13{ list-style:none; counter-reset:f; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  column-gap:var(--gap); row-gap:20px; margin:clamp(28px, 3.2vw, 48px) 0 0; padding:0; }
/* this flow has four states, not seven, declared here so the narrow
   steps further down still win */
.fl13-4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.fl13 li{ counter-increment:f; padding-top:12px; border-top:1px solid var(--ln); min-width:0; }
.fl13 li::before{ content:counter(f, decimal-leading-zero); display:block; font:400 11px/1 var(--mono); letter-spacing:0.16em; color:var(--dm); }
.fl13 b{ display:block; margin-top:9px; font:500 clamp(1rem, 0.78rem + 0.55vw, 1.4rem)/1.12 var(--sans); letter-spacing:-0.02em; }
.fl13 span{ display:block; margin-top:6px; font:400 11.5px/1.45 var(--mono); color:var(--dm); }
/* qualification checks */
.ck13{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gap); row-gap:18px;
  margin:clamp(24px, 2.8vw, 40px) 0 0; padding:0; }
.ck13 li{ border-top:1px solid var(--ln); padding-top:11px; min-width:0; font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.ck13 b{ display:block; font:400 13px/1.5 var(--mono); color:var(--ik); }
/* the record set */
.tb13{ margin:clamp(24px, 2.8vw, 40px) 0 0; }
.tb13 .sc{ overflow-x:auto; border-top:1px solid var(--ln); }
.tb13 table{ width:100%; border-collapse:collapse; font:400 13px/1.35 var(--sans); font-variant-numeric:tabular-nums; }
.tb13 th{ text-align:left; font:400 11px/1.5 var(--mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--dm);
  padding:11px 16px 11px 0; white-space:nowrap; border-bottom:1px solid var(--ln); }
.tb13 td{ padding:10px 16px 10px 0; border-bottom:1px solid rgba(14, 17, 22, 0.1); white-space:nowrap; }
.tb13 tr:last-child td{ border-bottom:0; }
.tb13 .red{ display:inline-block; height:0.72em; background:rgba(14, 17, 22, 0.16); vertical-align:baseline; }
.tb13 .st{ font:400 11px/1.5 var(--mono); letter-spacing:0.06em; padding:3px 7px; }
.tb13 .st.f{ background:#E4E8F6; color:#1F3AC6; }
.tb13 .st.s{ background:#0E1116; color:#EDEFF2; }
.tb13 .st.b{ background:#1F3AC6; color:#fff; }
.tb13 .st.o{ color:var(--dm); padding-left:0; }
.tb13 figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-bottom:11px;
  font:400 11px/1.55 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--dm); }
/* one record's field structure */
.fd13{ margin:clamp(24px, 2.8vw, 40px) 0 0; }
.fd13 div{ display:grid; grid-template-columns:minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1.5fr); column-gap:var(--gap);
  padding:9px 0 10px; border-top:1px solid var(--ln); align-items:baseline; }
.fd13 div:last-child{ border-bottom:1px solid var(--ln); }
.fd13 dt{ font:400 13px/1.5 var(--mono); }
.fd13 dd{ margin:0; font:400 13.5px/1.5 var(--sans); color:var(--dm); }
.fd13 dd.v{ color:var(--ik); font-family:var(--mono); font-size:12.5px; }
.fd13 dd.v.flag{ color:var(--ac); }

/* the message and its variables */
.c13 .map{ display:grid; grid-template-columns:7fr 5fr; gap:var(--gap); padding:clamp(24px, 2.8vw, 40px) 0 0; align-items:start; }
.c13 .msg{ background:#0E1116; color:#F2F4F8; padding:clamp(22px, 2.6vw, 40px); }
.c13 .msg p.kick{ margin:0; font:400 11px/1.55 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:#79839A; }
.c13 .msg p{ margin:18px 0 0; font:400 clamp(1.1rem, 0.9rem + 0.85vw, 1.65rem)/1.42 var(--sans); letter-spacing:-0.015em; }
.c13 .fields{ border-top:1px solid var(--ln); margin:0; }
.c13 .fields div{ grid-template-columns:minmax(0, 13.5ch) minmax(0, 1fr); }
.c13 .fnote{ margin:0; padding-top:12px; font:400 13px/1.5 var(--sans); color:var(--dm); }

/* ------------------------------------------------------------- narrower */
@media (max-width:1199px){
  .dc13 dl,.dc13 dl.four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fl13{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .n13{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1023px){
  .op13-facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .duo13{ grid-template-columns:minmax(0, 1fr); }
  .ov13-works .w1{ grid-column:1 / 7; }
  .ov13-works .w2{ grid-column:1 / 13; }
  .ov13-works .w3{ grid-column:1 / 8; }
  .ov13-works .w3-note{ grid-column:1 / 13; }
  .ru13,.ck13{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .c13 .map{ grid-template-columns:1fr; }
  .fd13 div{ grid-template-columns:minmax(0, 10rem) minmax(0, 1fr); row-gap:4px; }
  .fd13 dd.v{ grid-column:2 / 3; }
}
@media (max-width:760px){
  :root{ --m:20px; }
  /* the label moves above its content instead of beside it */
  .op13,.s13,.end13{ grid-template-columns:minmax(0, 1fr); row-gap:0; }
  .op13 .back13,.op13 .lb{ grid-column:1; }
  .op13 .lb{ margin-bottom:12px; }
  .op13-t,.op13-say,.op13-facts{ grid-column:1; }
  .op13-facts{ grid-template-columns:minmax(0, 1fr); row-gap:0; }
  .op13-facts div{ display:grid; grid-template-columns:6.5rem minmax(0, 1fr); column-gap:14px; align-items:baseline;
    border-top:1px solid var(--ln); padding:9px 0 10px; }
  .op13-facts dd{ margin:0; }
  .s13 > .lb{ grid-column:1; margin-bottom:14px; padding-top:0; }
  .s13-c{ grid-column:1; }
  .end13 > .lb{ margin-bottom:14px; }
  .end13-c{ grid-column:1; }
  .pl13 > figcaption{ grid-template-columns:1fr; row-gap:6px; }
  .pl13-in{ padding:0; }
  /* technical text gets bigger here, not smaller */
  .tx13{ font-size:16px; }
  .dc13 li{ grid-template-columns:minmax(0, 1fr); row-gap:4px; }
  .dc13 li::before{ margin-bottom:10px; }
  .dc13 h3,.dc13 dl{ grid-column:1; }
  .dc13 dl,.dc13 dl.four{ grid-template-columns:minmax(0, 1fr); row-gap:0; }
  .dc13 dl > div{ border-top:1px solid var(--ln); padding:9px 0 10px; }
  .dc13 dd{ margin-top:5px; }
  .n13{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ru13,.ck13{ grid-template-columns:minmax(0, 1fr); }
  .fl13{ grid-template-columns:minmax(0, 1fr); row-gap:0; }
  .fl13 li{ display:grid; grid-template-columns:2.4rem 7.5rem minmax(0, 1fr); align-items:baseline; padding:9px 0 10px; }
  .fl13 li::before{ line-height:1.5; }
  .fl13 b,.fl13 span{ margin-top:0; }
  .fa13-dash{ padding-left:0; }
  .pan13 img{ width:200%; max-width:none; }
  .pan13:focus-visible{ outline:2px solid var(--ac); outline-offset:2px; }
  .co13{ font-size:11.5px; }
  .duo13,.ov13-works,.ph13{ margin-left:var(--m); margin-right:var(--m); }
  .ph13{ grid-auto-columns:64vw; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
  .ph13 figure{ scroll-snap-align:start; }
  .rm13{ grid-template-columns:repeat(5, minmax(0, 1fr)); }
  .nx13{ grid-template-columns:minmax(0, 1fr) auto; row-gap:10px; align-items:end; }
  .nx13 .lb{ grid-column:1 / -1; }
  .tb13 .hide-s{ display:none; }
  .foot13{ flex-direction:column; }
}
@media (max-width:420px){ .tb13 .hide-xs{ display:none; } }
@media (max-width:360px){
  .op13-facts div{ grid-template-columns:minmax(0, 1fr); row-gap:3px; }
  .n13{ grid-template-columns:minmax(0, 1fr); }
  .fl13 li{ grid-template-columns:2.4rem minmax(0, 1fr); row-gap:3px; }
  .fl13 span{ grid-column:2 / 3; }
}

/* ===========================================================================
   Secondary case (QuoteWell). Same grammar, the default paper ground and no
   world colour of its own, the hierarchy between a flagship and more work
   should be visible before anything is read.
   =========================================================================== */
.qa13{ list-style:none; counter-reset:q; margin:clamp(24px, 2.8vw, 40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:var(--gap); row-gap:22px; }
.qa13 li{ counter-increment:q; border-top:1px solid var(--ln); padding-top:12px; min-width:0; }
.qa13 b{ display:block; font:400 11px/1.55 var(--mono); letter-spacing:0.16em; text-transform:uppercase; color:var(--dm); }
.qa13 b::before{ content:counter(q, decimal-leading-zero) " · "; }
.qa13 p{ margin:9px 0 0; font:400 13.5px/1.55 var(--sans); }
.qa13 code{ display:block; margin-top:11px; padding:10px 11px; background:#14120F; color:#EFE7D8;
  font:400 11.5px/1.6 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.qa13 code .ok{ color:#9BD17F; }
.note13{ margin:clamp(16px, 1.8vw, 24px) 0 0; font:400 13px/1.6 var(--sans); color:var(--dm); max-width:64ch; }
.note13 code{ font:400 0.92em/1 var(--mono); }
.src13{ margin:clamp(20px, 2.4vw, 32px) 0 0; }
.src13 figcaption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-bottom:10px;
  font:400 11px/1.55 var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--dm); }
.src13 pre{ margin:0; padding:clamp(16px, 1.7vw, 24px); overflow-x:auto; background:#14120F; color:#EFE7D8;
  font:400 12px/1.75 var(--mono); }
.lk13{ list-style:none; margin:clamp(16px, 1.8vw, 24px) 0 0; padding:0; }
.lk13 li{ border-top:1px solid var(--ln); padding:9px 0 10px; font:400 14px/1.5 var(--sans); }
.lk13 li:last-child{ border-bottom:1px solid var(--ln); }
.lk13 a{ text-decoration-color:var(--ln); text-underline-offset:3px; }
.lk13 a:hover{ color:var(--ac); }
.lk13 span{ display:inline-block; min-width:16ch; font:400 11px/1.5 var(--mono); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dm); }
@media (max-width:1023px){ .qa13{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:760px){
  .qa13{ grid-template-columns:minmax(0, 1fr); row-gap:16px; }
  .lk13 span{ display:block; min-width:0; margin-bottom:3px; }
}

/* Notes index and the article. Plain paper, one measure, no ornament. */
.nt13{ padding:clamp(28px, 4.4vw, 68px) var(--m) clamp(56px, 7vw, 120px);
  display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap); }
.nt13 > .lb{ grid-column:1 / 2; }
.nt13-c{ grid-column:2 / 3; min-width:0; }
.nt13-t{ margin:-0.09em 0 0 -0.04em; font:500 clamp(2rem, 4.6vw, 4.2rem)/0.96 var(--sans); letter-spacing:-0.045em; max-width:20ch; }
.nt13-say{ margin:clamp(16px, 1.8vw, 26px) 0 0; font:500 var(--lead)/1.3 var(--sans); letter-spacing:-0.02em; max-width:44ch; }
.nt13-list{ margin:clamp(34px, 4vw, 60px) 0 0; border-top:1px solid var(--ln); }
.nt13-row{ display:grid; grid-template-columns:minmax(0, 9ch) minmax(0, 1fr) minmax(0, 7ch);
  column-gap:var(--gap); padding:clamp(20px, 2.4vw, 32px) 0; border-bottom:1px solid var(--ln);
  text-decoration:none; align-items:baseline; }
.nt13-row .m{ font:400 11px/1.8 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dm); }
.nt13-row h2{ margin:0; font:500 clamp(1.15rem, 0.9rem + 1vw, 1.9rem)/1.14 var(--sans); letter-spacing:-0.03em; }
.nt13-row p{ margin:10px 0 0; font:400 14px/1.55 var(--sans); color:var(--dm); max-width:58ch; }
.nt13-row:hover h2{ color:var(--ac); }
.nt13-row .m:last-child{ text-align:right; }

/* the article itself */
.ar13{ padding:clamp(28px, 4.4vw, 68px) var(--m) clamp(28px, 3vw, 48px); }
.ar13-head{ display:grid; align-items:start; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap); }
.ar13-head .back13{ grid-column:1 / 2; }
.ar13-head > .lb{ grid-column:1 / 2; }
.ar13-head h1{ grid-column:2 / 3; margin:-0.09em 0 0 -0.04em;
  font:500 clamp(1.9rem, 4.2vw, 3.8rem)/1.02 var(--sans); letter-spacing:-0.045em; max-width:22ch; }
.ar13-head .ar13-say{ grid-column:2 / 3; margin:clamp(16px, 1.8vw, 26px) 0 0;
  font:500 var(--lead)/1.3 var(--sans); letter-spacing:-0.02em; max-width:46ch; }
.ar13-body{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  padding:0 var(--m) clamp(56px, 7vw, 120px); }
.ar13-body > *{ grid-column:2 / 3; }
.ar13-body > h2{ margin:clamp(40px, 4.6vw, 76px) 0 0;
  font:500 clamp(1.2rem, 0.95rem + 1vw, 2rem)/1.16 var(--sans); letter-spacing:-0.03em; max-width:26ch; }
.ar13-body p{ margin:clamp(14px, 1.6vw, 22px) 0 0; font:400 16px/1.66 var(--sans); max-width:62ch; }
.ar13-body p.note{ margin-top:clamp(32px, 3.4vw, 52px); padding-top:clamp(18px, 2vw, 28px);
  border-top:1px solid var(--ln); font-size:14px; color:var(--dm); }
.ar13-body ul,.ar13-body ol{ margin:clamp(14px, 1.6vw, 22px) 0 0; padding-left:1.15em; max-width:62ch; }
.ar13-body li{ margin:0 0 8px; font:400 16px/1.66 var(--sans); }
.ar13-body a{ text-decoration-color:var(--ln); text-underline-offset:3px; }
.ar13-body a:hover{ color:var(--ac); }
.ar13-body code{ font:400 0.9em/1 var(--mono); }
.ar13-body pre{ margin:clamp(18px, 2vw, 28px) 0 0; padding:clamp(16px, 1.7vw, 24px); overflow-x:auto;
  background:#14120F; color:#EFE7D8; font:400 12.5px/1.75 var(--mono); }
.ar13-body pre b{ font-weight:500; color:#fff; }
.ar13-body pre i{ font-style:normal; color:#A2957F; }
.ar13-body blockquote{ margin:clamp(20px, 2.2vw, 32px) 0 0; padding-left:var(--gap);
  border-left:1px solid var(--ln); font:500 clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem)/1.32 var(--sans);
  letter-spacing:-0.02em; max-width:40ch; }
@media (max-width:760px){
  .nt13,.ar13-head,.ar13-body{ grid-template-columns:minmax(0, 1fr); }
  .nt13 > .lb,.ar13-head > .lb{ grid-column:1; margin-bottom:12px; }
  .nt13-c,.ar13-head h1,.ar13-head .ar13-say,.ar13-body > *{ grid-column:1; }
  .nt13-row{ grid-template-columns:minmax(0, 1fr); row-gap:8px; }
  .nt13-row .m:last-child{ text-align:left; }
}

/* Systems index: a v13 head over the existing atlas component in v3.css. */
.c13 .atlas{ padding-top:clamp(36px, 4vw, 64px); }
.c13 .atlas-note{ margin-bottom:10px; }
.lg13{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); column-gap:var(--gap); row-gap:14px;
  margin:clamp(28px, 3.2vw, 44px) 0 0; }
.lg13 div{ border-top:1px solid var(--ln); padding-top:10px; }
.lg13 dt{ font:400 11px/1.55 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--ik); }
.lg13 dd{ margin:6px 0 0; font:400 13px/1.5 var(--sans); color:var(--dm); }
@media (max-width:1023px){ .lg13{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:760px){
  .lg13{ grid-template-columns:minmax(0, 1fr); row-gap:0; }
  .lg13 div{ display:grid; grid-template-columns:7rem minmax(0, 1fr); column-gap:14px; align-items:baseline; padding:9px 0 10px; }
  .lg13 dd{ margin:0; }
}

/* OVREL campaign plate: portrait, so it is held to a column rather than bled */
.ov13-camp{ margin-top:clamp(36px, 4.4vw, 68px); }
.ov13-camp picture{ display:block; max-width:min(56vw, 760px); }
.ov13-camp > figcaption{ margin-left:0; margin-right:0; }
@media (max-width:760px){ .ov13-camp picture{ max-width:none; } }

/* ===========================================================================
   05 ÜMBE APPAREL, bone paper and the studio's cobalt. Garments carry the
   page; the specification board is the only dense thing on it.
   =========================================================================== */
.w-ua{ --pp:#EDE9E1; --ik:#15130F; --dm:#6E6659; --ac:#2F4FB8; --ln:rgba(21, 19, 15, 0.2); }
body:has(.w-ua){ background:#EDE9E1; }
body:has(.w-ua) .nav3{ background:rgba(237, 233, 225, 0.92); }

/* opening composition: five garments, deliberately unequal */
/* The collection before the explanation. One garment carries the page, the
   rest step down: roughly 2:1 from the widest to the narrowest, on shared
   baselines. The studio grounds were levelled to the page paper so this reads
   as one field rather than as five cut-outs. */
.ua-open{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap);
  row-gap:clamp(26px, 3.4vw, 54px); margin:clamp(28px, 3.6vw, 56px) var(--m) 0; align-items:end; }
.ua-open figure{ margin:0; min-width:0; }
.ua-open figcaption{ margin-top:10px; font:400 10.5px/1.6 var(--mono); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dm); }
.ua-open .g1{ grid-column:1 / 7; }
.ua-open .g2{ grid-column:8 / 12; }
.ua-open .g3{ grid-column:1 / 6; }
.ua-open .g4{ grid-column:6 / 10; }
.ua-open .g5{ grid-column:10 / 13; }
.ua-cap{ grid-column:1 / 9; margin:4px 0 0; font:400 13.5px/1.6 var(--sans); color:var(--dm); max-width:54ch; }

/* two crops at the scale a trim is actually looked at */
.ua-det{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap);
  row-gap:24px; margin:clamp(34px, 4.2vw, 62px) var(--m) 0; align-items:end; }
.ua-det figure{ margin:0; min-width:0; }
.ua-det .d1{ grid-column:1 / 4; }
.ua-det .d2{ grid-column:4 / 7; }
.ua-det .d1 picture,.ua-det .d2 picture{ display:block; max-width:188px; }
.ua-det .t{ grid-column:8 / 13; align-self:end; }
.ua-det .t p{ margin:0; font:400 var(--t-body)/1.62 var(--sans); color:var(--ik); max-width:42ch; }
.ua-det figcaption{ margin-top:9px; font:400 10.5px/1.6 var(--mono); letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dm); }

/* ---------------------------------------------------------- the garments */
.ua-duo{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap); row-gap:clamp(24px, 3vw, 44px);
  margin:clamp(34px, 4.4vw, 68px) var(--m) 0; align-items:end; }
.ua-duo figure{ margin:0; min-width:0; }
.ua-duo figcaption{ margin-top:11px; font:400 13px/1.5 var(--sans); color:var(--dm); max-width:44ch; }
.ua-duo figcaption b{ font-weight:500; color:var(--ik); }
.ua-duo .wide{ grid-column:1 / 6; }
.ua-duo .tall{ grid-column:7 / 12; }
.ua-duo .half{ grid-column:1 / 7; }
.ua-duo .half2{ grid-column:7 / 13; }
.ua-duo .half picture,.ua-duo .half2 picture{ display:block; max-width:560px; }
.ua-duo .third{ grid-column:span 4; }

/* ------------------------------------------------ the mark, in six materials
   Not a logo sheet. The same drawing debossed, woven, jacquarded and struck,
   at the size each one is actually made. */
.ua-id{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--gap);
  row-gap:clamp(22px, 2.6vw, 34px); margin-top:clamp(26px, 3.2vw, 46px); align-items:end; }
.ua-id figure{ margin:0; min-width:0; }
.ua-id figcaption{ margin-top:10px; font:400 10.5px/1.55 var(--mono); letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dm); }
/* the spans carry the argument: the hem tab really is the smallest of these
   and the twill patch really is the largest, so they are not set at one size */
.ua-id .m1{ grid-column:1 / 6;   grid-row:1; }   /* as drawn */
.ua-id .m2{ grid-column:7 / 10;  grid-row:1; }   /* leather deboss */
.ua-id .m4{ grid-column:11 / 13; grid-row:1; }   /* hem tab, the smallest */
.ua-id .m5{ grid-column:1 / 5;   grid-row:2; }   /* twill patch, the largest */
.ua-id .m3{ grid-column:6 / 9;   grid-row:2; }   /* woven label */
.ua-id .m6{ grid-column:10 / 13; grid-row:2; }   /* struck disc */
.ua-id img{ background:transparent; }

.ua-spec{ margin:clamp(36px, 4.4vw, 68px) var(--m) 0; }
.ua-spec picture{ display:block; max-width:min(68vw, 700px); }
.ua-spec img{ box-shadow:0 0 0 1px var(--ln); }
.ua-spec > figcaption{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap); margin-top:13px;
  font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.ua-spec > figcaption p{ margin:0; max-width:58ch; }

/* the collection language: swatches and trims */
.ua-sw{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; margin:clamp(22px, 2.6vw, 36px) 0 0; }
.ua-sw div i{ display:block; height:clamp(52px, 5.4vw, 88px); }
.ua-sw div span{ display:block; margin-top:8px; font:400 10.5px/1.4 var(--mono); letter-spacing:0.1em; color:var(--dm); }

@media (max-width:1023px){
  .ua-open .g1{ grid-column:1 / 9; } .ua-open .g2{ grid-column:8 / 12; }
  .ua-open .g3{ grid-column:1 / 6; } .ua-open .g4{ grid-column:6 / 10; } .ua-open .g5{ grid-column:10 / 13; }
  .ua-cap{ grid-column:1 / -1; }
  .ua-det .d1{ grid-column:1 / 5; } .ua-det .d2{ grid-column:5 / 9; } .ua-det .t{ grid-column:1 / -1; }
  .ua-duo .wide,.ua-duo .tall,.ua-duo .half,.ua-duo .half2{ grid-column:1 / -1; }
  .ua-duo .third{ grid-column:span 6; }
  /* the tab keeps a third of a row here: below about 100px the mark stops
     being legible, and the mark is the whole argument */
  .ua-id .m1{ grid-column:1 / 6; }  .ua-id .m2{ grid-column:6 / 10; } .ua-id .m4{ grid-column:10 / 13; }
  .ua-id .m5{ grid-column:1 / 6; }  .ua-id .m3{ grid-column:6 / 10; } .ua-id .m6{ grid-column:10 / 13; }
  .ua-sw{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .ua-spec picture{ max-width:none; }
  .ua-open,.ua-duo,.ua-det{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .ua-open .g1{ grid-column:1 / -1; } .ua-open .g2{ grid-column:1 / 4; }
  .ua-open .g3{ grid-column:4 / 7; } .ua-open .g4{ grid-column:1 / 4; } .ua-open .g5{ grid-column:4 / 7; }
  .ua-det .d1{ grid-column:1 / 4; } .ua-det .d2{ grid-column:4 / 7; } .ua-det .t{ grid-column:1 / -1; }
  /* the board these were cut from caps them, so they stay small enough to hold */
  .ua-det .d1 picture,.ua-det .d2 picture{ max-width:142px; }
  .ua-duo .wide,.ua-duo .tall,.ua-duo .half,.ua-duo .half2{ grid-column:1 / -1; }
  .ua-duo .third{ grid-column:span 3; }
  .ua-duo .third:last-child{ grid-column:1 / -1; }
  .ua-id{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .ua-id .m1{ grid-column:1 / 4; } .ua-id .m2{ grid-column:4 / 7; } .ua-id .m3{ grid-column:1 / 4; }
  .ua-id .m4{ grid-column:4 / 7; } .ua-id .m5{ grid-column:1 / 4; } .ua-id .m6{ grid-column:4 / 7; }
  .ua-spec > figcaption{ grid-template-columns:1fr; row-gap:6px; }
  .ua-sw{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* ===========================================================================
   /creative/, self-directed publication studies. A different grammar from
   the case studies on purpose: sequence and caption, no role/outcome
   apparatus, so the difference in kind is legible before anything is read.
   =========================================================================== */
.w-cr{ --pp:#F3F1EC; --ik:#14120F; --dm:#6B6559; --ac:#1F3AC6; --ln:rgba(20, 18, 15, 0.2); }
body:has(.w-cr){ background:#F3F1EC; }

.cr-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:clamp(24px, 3.4vw, 56px);
  row-gap:clamp(44px, 5.4vw, 88px); margin:clamp(36px, 4.4vw, 68px) var(--m) 0; }
.cr-item{ margin:0; }
.cr-item img{ box-shadow:0 1px 3px rgba(20,18,15,.10), 0 10px 30px rgba(20,18,15,.07); }
.cr-meta{ display:grid; grid-template-columns:2.6rem minmax(0, 1fr); column-gap:var(--gap); margin-top:15px; align-items:baseline; }
.cr-meta .n{ font:400 11px/1.7 var(--mono); letter-spacing:0.16em; color:var(--dm); }
.cr-meta h2{ margin:0; font:500 clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem)/1.2 var(--sans); letter-spacing:-0.025em; }
.cr-meta p{ grid-column:2 / 3; margin:7px 0 0; font:400 13.5px/1.55 var(--sans); color:var(--dm); max-width:46ch; }

/* the running system */
.hx{ margin:clamp(56px, 7vw, 120px) var(--m) 0; }
.hx-stage{ position:relative; width:100%; aspect-ratio:1122 / 1402; max-width:min(52vw, 660px);
  background:#F0EEE8; box-shadow:0 1px 3px rgba(20,18,15,.10), 0 10px 30px rgba(20,18,15,.07); }
.hx-stage canvas{ display:block; width:100%; height:100%; }
.hx-row{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:clamp(24px, 3.4vw, 56px); align-items:end; }
.hx-say{ margin:0; font:500 clamp(1.3rem, 1rem + 1.3vw, 2.3rem)/1.16 var(--sans); letter-spacing:-0.035em; max-width:22ch; }
.hx-tx{ margin:clamp(16px, 1.8vw, 26px) 0 0; font:400 15.5px/1.62 var(--sans); max-width:52ch; }
.hx-ctl{ margin:clamp(18px, 2vw, 28px) 0 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.hx-btn{ appearance:none; cursor:pointer; padding:9px 15px; border:1px solid var(--ln); background:transparent;
  color:var(--ik); font:400 11px/1.4 var(--mono); letter-spacing:0.14em; text-transform:uppercase; }
.hx-btn:hover{ background:var(--ik); color:var(--pp); border-color:var(--ik); }
.hx-note{ margin:0; font:400 12.5px/1.5 var(--sans); color:var(--dm); }
@media (max-width:1023px){
  .cr-grid{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(36px, 5vw, 64px); }
  .hx-row{ grid-template-columns:minmax(0, 1fr); row-gap:clamp(24px, 3vw, 40px); }
  .hx-stage{ max-width:none; }
}
@media (max-width:760px){
  .cr-grid{ margin-left:var(--m); margin-right:var(--m); }
  .cr-meta{ grid-template-columns:2.2rem minmax(0, 1fr); }
}

/* The second proof. A cover is one page; the system is the book open, so
   each extension is drawn as a spread at twice the width and the same
   height. Same object, turned over. */
.cr-sys{ margin:clamp(56px, 7vw, 118px) var(--m) 0; }
.cr-sys > .lb{ margin:0 0 clamp(20px, 2.4vw, 34px); }
.sw{ margin:0 0 clamp(44px, 5.4vw, 86px); }
.spw{ position:relative; }
.sw:last-child{ margin-bottom:0; }
.sp{ display:block; width:100%; height:auto;
  box-shadow:0 1px 3px rgba(20,18,15,.10), 0 14px 42px rgba(20,18,15,.09); }
.sw > figcaption{ display:grid; grid-template-columns:2.6rem minmax(0, 1fr) minmax(0, 1fr);
  column-gap:var(--gap); margin-top:15px; align-items:baseline; }
.sw > figcaption .n{ font:400 11px/1.7 var(--mono); letter-spacing:0.16em; color:var(--dm); }
.sw > figcaption b{ font-weight:500; font-size:clamp(1rem, 0.9rem + 0.35vw, 1.2rem); letter-spacing:-0.02em; }
.sw > figcaption p{ margin:0; font:400 13.5px/1.6 var(--sans); color:var(--dm); max-width:48ch; }
@media (max-width:760px){
  .sw > figcaption{ grid-template-columns:2.2rem minmax(0, 1fr); row-gap:7px; }
  .sw > figcaption p{ grid-column:2 / 3; }
  /* A spread does not fit a phone at a size anyone can read it, so it keeps
     its scale and you turn to the second page. */
  .spw{ overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch; }
  .spw .sp{ width:176vw; max-width:none; }
  .spw::after{ content:"Swipe to the second page"; display:block; padding:9px 0 0;
    font:400 10px/1.5 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dm);
    position:sticky; left:0; width:100vw; }
}

/* the site window, inside a case page: take the page's own colours */
.c13 .wv-win{ background:rgba(0,0,0,.04); box-shadow:0 0 0 1px var(--ln); }
.c13 .wv > figcaption{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  margin-top:13px; max-width:none; color:var(--dm); font:400 13px/1.55 var(--sans); }
.c13 .wv > figcaption .lb{ margin:0; padding-top:2px; }
.c13 .wv > figcaption p{ margin:0; max-width:56ch; }
.c13 .wv > figcaption b{ color:var(--ik); font-weight:500; }
@media (max-width:760px){ .c13 .wv > figcaption{ grid-template-columns:1fr; row-gap:6px; } }
.um13-film figcaption b{ color:var(--ik); font-weight:500; }

/* ------------------------------------------------ systems: the same shape
   Ten systems reduced to one row each: trigger, intake, record, rule, action,
   recovery. Record and recovery are where these things actually break, so they
   are the two columns set in ink. On a phone a seven-column table cannot be
   read and must not be clipped, so each row becomes a labelled record using
   the data-l attributes already in the markup. */
.pt6{ padding:clamp(56px, 7vw, 110px) var(--m) clamp(48px, 6vw, 90px); }
.pt6-head{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  margin-bottom:clamp(26px, 3.2vw, 46px); }
.lbl6{ grid-column:1 / 2; margin:0; font:400 11px/1.8 var(--mono); letter-spacing:0.16em;
  text-transform:uppercase; color:var(--dm); }
.pt6-say{ grid-column:2 / 3; margin:-0.12em 0 0; font:500 clamp(1.3rem, 1rem + 1.3vw, 2.3rem)/1.14 var(--sans);
  letter-spacing:-0.035em; max-width:24ch; }
.pt6-head .fx5{ grid-column:2 / 3; margin:clamp(14px, 1.6vw, 22px) 0 0;
  font:400 14.5px/1.6 var(--sans); color:var(--dm); max-width:64ch; }

.pt6-t{ width:100%; border-collapse:collapse; table-layout:fixed; }
.pt6-t th,.pt6-t td{ text-align:left; vertical-align:top; padding:14px 18px 15px 0; }
.pt6-t thead th{ padding-top:0; padding-bottom:10px; border-bottom:1px solid var(--ik);
  font:400 10.5px/1.6 var(--mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--dm); font-weight:400; }
.pt6-t tbody tr{ border-bottom:1px solid var(--ln); }
.pt6-t tbody th{ font-weight:400; padding-right:22px; }
.pt6-t tbody th b{ display:block; font:500 14.5px/1.3 var(--sans); letter-spacing:-0.01em; color:var(--ik); }
.pt6-t tbody th small{ display:block; margin-top:5px; font:400 10.5px/1.5 var(--mono);
  letter-spacing:0.1em; text-transform:uppercase; color:var(--dm); }
.pt6-t td{ font:400 13px/1.5 var(--sans); color:var(--dm); }
.pt6-t td.hi,.pt6-t th.hi{ color:var(--ik); }

@media (max-width:900px){
  .pt6-head{ grid-template-columns:1fr; row-gap:8px; }
  .lbl6,.pt6-say,.pt6-head .fx5{ grid-column:1 / -1; }
  .pt6-t,.pt6-t tbody,.pt6-t tr,.pt6-t th,.pt6-t td{ display:block; }
  .pt6-t thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .pt6-t tbody tr{ border-bottom:0; border-top:1px solid var(--ik); padding:clamp(18px,2.4vw,26px) 0; }
  .pt6-t tbody th{ padding:0 0 12px; }
  .pt6-t td{ padding:0 0 9px; display:grid; grid-template-columns:9ch minmax(0, 1fr); column-gap:var(--gap); }
  .pt6-t td::before{ content:attr(data-l); font:400 10px/1.6 var(--mono); letter-spacing:0.12em;
    text-transform:uppercase; color:var(--dm); }
  .pt6-t td.hi::before{ color:var(--ik); }
}

/* The specimen plate was sticky inside a cell only as tall as itself, so it had
   nowhere to travel and left a column of empty paper beside a ten-row list.
   The cell now fills the row and the bordered box sticks inside it, so the
   specimen stays beside whichever row you are reading. */
.c13 .atlas-plate{ align-self:stretch; position:static; background:none; border:0; padding:0; }
.c13 .atlas-plate .pl-in{ position:sticky; top:calc(var(--nav-h) + 24px);
  background:#FBFAF7; border:1.5px solid var(--ik); padding:clamp(16px, 1.6vw, 26px); }

/* ------------------------------------- Facility OS: the booking path
   The hard part of this project is a failure state, and it was sitting inside
   the text column as four small boxes. It is the argument, so it gets the page
   width, a baseline you can follow, and the failure dropped out of line with
   the retry drawn back into it. */
.fa13-path{ margin:clamp(34px, 4.2vw, 62px) var(--m) 0; }
.fa13-path ol{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); column-gap:var(--gap); align-items:start; }
.fa13-path li{ position:relative; min-width:0; padding:16px 18px 20px;
  border:1px solid var(--ln); background:rgba(232, 239, 234, 0.035); }
/* the line from one state to the next */
.fa13-path li:not(:last-child)::after{ content:""; position:absolute; top:50%; left:100%;
  width:var(--gap); height:1px; background:var(--ln); }
.fa13-path li .n{ display:block; font:400 11px/1.5 var(--mono); letter-spacing:0.13em;
  text-transform:uppercase; color:var(--dm); }
.fa13-path li b{ display:block; margin-top:10px; font:500 clamp(1.05rem, 0.85rem + 0.7vw, 1.55rem)/1.14 var(--sans);
  letter-spacing:-0.025em; }
.fa13-path li small{ display:block; margin-top:9px; font:400 13px/1.5 var(--sans); color:var(--dm); }
/* the third state is the one that pays for the other three */
.fa13-path li.k{ margin-top:clamp(28px, 3.4vw, 52px); border-color:var(--ac); background:rgba(193, 241, 61, 0.05); }
.fa13-path li.k .n{ color:var(--ac); }
.fa13-path li.k::after{ top:calc(50% - clamp(14px, 1.7vw, 26px)); }
/* The retry, drawn back into the line: down out of 03, across, and up into 04.
   62.5% and 87.5% are the centres of the third and fourth of four columns. */
.fa13-loop{ position:relative; margin:0; height:clamp(34px, 4vw, 56px); }
.fa13-loop span{ position:absolute; left:62.5%; right:12.5%; top:0; bottom:14px;
  border-left:1px solid var(--ac); border-bottom:1px solid var(--ac); border-right:1px solid var(--ac); }
.fa13-loop span::before{ content:""; position:absolute; right:-4px; top:-1px;
  border:4px solid transparent; border-bottom-color:var(--ac); border-top:0; }
.fa13-loop span::after{ content:"Owner retries"; position:absolute; left:0; right:0; bottom:-14px;
  text-align:center; font:400 10.5px/1.3 var(--mono); letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ac); background:var(--pp); padding:0 8px; width:max-content;
  margin:0 auto; transform:translateY(50%); }
.fa13-path > figcaption{ display:grid; grid-template-columns:14ch minmax(0, 1fr); column-gap:var(--gap);
  margin-top:16px; font:400 13.5px/1.55 var(--sans); color:var(--dm); }
.fa13-path > figcaption p{ margin:0; max-width:58ch; }

@media (max-width:900px){
  .fa13-path ol{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:var(--gap); }
  .fa13-path li:not(:last-child)::after{ display:none; }
  .fa13-path li.k{ margin-top:0; }
  .fa13-loop{ display:none; }
  .fa13-path > figcaption{ grid-template-columns:1fr; row-gap:6px; }
}
@media (max-width:560px){ .fa13-path ol{ grid-template-columns:1fr; } }

/* ------------------------------- Acquisition: the message, at real size
   This project has one artefact and it was sitting in the text column at
   two-thirds scale. It is the thing the system produces, so it gets the page. */
.aq13-msg{ margin:clamp(30px, 3.6vw, 52px) var(--m) 0; }
.aq13-msg .map{ padding-top:0; }
.aq13-msg .msg p{ font:400 clamp(1.2rem, 0.85rem + 1.15vw, 2.05rem)/1.4 var(--sans); letter-spacing:-0.02em; }
.aq13-msg .msg{ padding:clamp(26px, 3vw, 48px); }

/* One trim lives with the garment it is sewn into rather than on the board:
   the waistband sits under the two boxers whose caption describes it. */
.ua-trim picture{ display:block; }
.ua-trim img{ background:transparent; }


/* target size (WCAG 2.2 AA): a bigger hit box, same line box */
.back13{ padding-block:5px; }
.foot13 a{ padding-block:4px; }
.lk13 a{ padding-block:4px; }


/* ------------------------------------------------------ Ümbe, poster system version */
.w-umbe .end13{ background:#1C1F22; color:#F0ECE3; --ik:#F0ECE3; --dm:#BEB9AD; --ln:rgba(240, 236, 227, 0.32); }
.w-umbe ::selection{ background:#DE3B32; color:#F0ECE3; }
.w-umbe .end13 a:hover{ color:#F0ECE3; text-decoration-thickness:2px; }
.w-umbe .op13-t{ margin-left:-0.05em; }
.um-pass{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:var(--gap); row-gap:24px; align-items:start;
  padding:0 var(--m); margin-top:clamp(24px, 3vw, 44px); }
.um-pass figure{ margin:0; }
.um-pass figcaption{ margin-top:12px; font:400 13.5px/1.5 var(--sans); color:var(--dm); max-width:44ch; }
.um-pass figcaption b{ display:block; color:var(--ik); font-weight:500; }
@media (max-width:1023px){ .um-pass{ grid-template-columns:1fr; } }

/* ------------------------------------------------------ cover to case, one gesture
   The cover plate on the home page and the first plate on each case page share a
   name, so navigating between them opens the plate rather than cutting.
   Touch gets a short crossfade, and reduced motion gets none. */
@view-transition{ navigation:auto; }
.um-hero img,.cvx img{ view-transition-name:case-plate; }
::view-transition-group(case-plate){ animation-duration:680ms; animation-timing-function:cubic-bezier(0.77, 0, 0.18, 1); }
::view-transition-old(case-plate),::view-transition-new(case-plate){ height:100%; width:100%; object-fit:cover; }
@media (hover:none){ ::view-transition-group(case-plate){ animation-duration:240ms; } }
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation-duration:0.01ms !important; animation-delay:0s !important; }
}

/* the launch wall: one plate held to the text column, not the full measure */
.ov13-camp{ padding-left:calc(var(--m) + 14ch + var(--gap)); }
.ov13-camp picture{ display:block; max-width:min(38vw, 520px); }
@media (max-width:1023px){ .ov13-camp{ padding-left:var(--m); } .ov13-camp picture{ max-width:none; } }

body:has(.w-wc){ background:#1D2023; }
body:has(.w-wc) .nav3{ background:rgba(29, 32, 35, 0.92); border-bottom-color:rgba(241, 238, 232, 0.2); }
body:has(.w-wc) .nav3 .mark,body:has(.w-wc) .navm .l,body:has(.w-wc) .idx{ color:#F1EEE8; }
body:has(.w-wc) .nav3 a.l,body:has(.w-wc) .nav3 .avail{ color:#A9AEB3; }
body:has(.w-wc) .nav3 a.l:hover,body:has(.w-wc) .nav3 a.l[aria-current="page"]{ color:#F1EEE8; }
body:has(.w-wc) .skip{ background:#F1E64C; color:#1D2023; }
body:has(.w-wc) .sheet{ background:#1D2023; color:#F1EEE8; }
body:has(.w-wc) .sheet ol{ border-top-color:#F1EEE8; }
body:has(.w-wc) .foot13{ background:#1D2023; color:#A9AEB3; }
/* Wallcreeper case: films side by side, 9:16 */
.wc13-films{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gap); padding:0 var(--m); max-width:900px; margin-inline:auto; box-sizing:content-box; }
.wc13-films figure{ margin:0; }
.wc13-films .frame{ position:relative; overflow:hidden; aspect-ratio:9 / 16; background:#000; }
.wc13-films video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wc13-films figcaption{ margin-top:12px; font:400 13.5px/1.5 var(--sans); color:var(--dm); }
.wc13-films figcaption b{ color:var(--ik); font-weight:500; }
@media (max-width:760px){ .wc13-films{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }