:root{
  --ink:#14181c; --dim:rgba(20,24,28,.62); --faint:rgba(20,24,28,.62);
  --hot:#0b93ad; --hot-text:#087185; --hot-ink:#fff; --wall:#eceef0; --line:rgba(20,24,28,.13);
  --panel:rgba(255,255,255,.72);
  --sans:ui-sans-serif,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:ui-serif,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--wall);color:var(--ink);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--hot-text)}
.top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding:18px 22px;border-bottom:1px solid var(--line);background:var(--panel);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}
.mark{font-weight:700;letter-spacing:.30em;font-size:13px;color:var(--ink);text-decoration:none}
/* wrapped rows sit 15 px apart, so one row's 7 px tap areas stay clear of the next */
.top nav{display:flex;flex-wrap:wrap;gap:15px 16px}
.top nav a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
/* a fingertip-tall hit area on the small links, drawn nowhere */
.top nav a,.crumb a{position:relative}
.top nav a::after,.crumb a::after{content:"";position:absolute;inset:-7px 0}
/* The header is pinned only where it is one line. Below 800px the nav wraps
   under the mark, and a pinned two-row header sits over the plate the whole way
   down a phone page and hides whatever Shift+Tab lands on. There it scrolls
   away with the page. Where it is pinned, focus and anchors stop clear of it. */
html{scroll-padding-top:72px}
@media (max-width:799px){.top{position:static}}
@media (max-width:480px){.top{padding:12px 16px;row-gap:8px}.top nav{gap:15px 14px}}

main{max-width:860px;margin:0 auto;padding:36px 22px 70px}
.crumb{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.crumb a{color:var(--faint)}
h1{font-family:var(--serif);font-size:clamp(30px,5.4vw,46px);line-height:1.1;
  letter-spacing:-.018em;margin:12px 0 4px;font-weight:400}
.by{color:var(--dim);font-size:17px}
.hero{margin:32px 0 0;text-align:center}
.hero img{display:inline-block;background:#fff;max-width:100%;height:auto;
  box-shadow:0 1px 3px rgba(20,24,28,.16),0 22px 46px rgba(20,24,28,.17)}

/* The plate. The work and a person on one baseline, both in real centimetres. */
.plate{margin:44px 0 0;display:flex;align-items:flex-end;justify-content:center;
  gap:26px;height:var(--h);position:relative;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
.plate .pl-work{background:#fff;flex:none;
  box-shadow:0 1px 3px rgba(20,24,28,.16),0 22px 46px rgba(20,24,28,.17)}
.plate .pl-work img{display:block;width:100%;height:100%;object-fit:fill}
.plate .pl-fig{flex:none;position:relative}
.plate .pl-fig svg{display:block;width:100%;height:100%;opacity:.9}
.plate .pl-fig span{position:absolute;left:50%;transform:translateX(-50%);bottom:-22px;
  font-size:11px;letter-spacing:.10em;color:var(--faint);white-space:nowrap}
.plate figcaption{position:absolute;left:0;bottom:8px;font-size:11px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--faint)}
@media (max-width:620px){.plate{gap:16px;height:auto;max-height:var(--h)}
  .plate .pl-work,.plate .pl-fig{max-width:46vw}}
.size{font-size:clamp(26px,4.6vw,38px);font-weight:700;color:var(--hot);
  letter-spacing:-.01em;margin-top:30px}
.shock{font-family:var(--serif);font-size:20px;line-height:1.4;margin-top:6px}

h2{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  font-weight:600;margin:0 0 12px}
.cmpwrap{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.cmpwrap .cmp{width:100%;max-width:620px;height:auto;overflow:visible}

.facts{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;border:1px solid var(--line)}
.facts>div{background:var(--wall);padding:13px 15px;
  box-shadow:0 0 0 1px var(--line)}
.facts .wide{grid-column:1/-1}
dt{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--faint)}
dd{margin-top:3px;font-size:15px}

.cta{margin-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--hot-text);color:var(--hot-ink);text-decoration:none;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 24px;border-radius:999px}
.btn:hover{filter:brightness(1.08)}
.lnk{font-size:13px;color:var(--dim)}
/* 13 px of link beside a 44 px button: as tall a target as the button */
.cta .lnk{padding:11px 0}
.cta-note{margin-top:34px;font-size:14px;color:var(--dim)}
.cta-note+.cta{margin-top:12px}

.sub{margin-top:52px;padding:26px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px}
.sub h2{margin-bottom:6px}
.sub p{font-size:14px;color:var(--dim)}
.subf{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}
.subf input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:12px 17px;color:var(--ink)}
.subf button{font:inherit;font-size:11px;font-weight:700;letter-spacing:.10em;
  text-transform:uppercase;color:var(--hot-ink);background:var(--hot-text);border:1px solid var(--hot-text);
  border-radius:999px;padding:12px 20px;cursor:pointer}
.subf button:disabled{opacity:.55;cursor:default}
.subnote{margin-top:9px;font-size:13px;min-height:1.2em}

.colours{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.colours .lede{font-size:14px;color:var(--dim);margin:-6px 0 14px}
.sw-row{display:grid;grid-template-columns:repeat(6,minmax(0,64px));gap:8px}
.sw{appearance:none;border:1px solid var(--line);border-radius:5px;height:48px;cursor:pointer;padding:0;position:relative}
.sw span{position:absolute;left:0;right:0;bottom:-17px;font-size:11px;color:var(--dim)}
.sw:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.pal-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.pal-act button{appearance:none;font:inherit;font-size:14px;color:var(--ink);background:none;cursor:pointer;
  border:1px solid var(--line);border-radius:16px;padding:7px 12px;min-height:36px}
.pal-act button:hover{border-color:var(--hot)}
.pal-act button[aria-pressed="true"]{border-color:var(--hot-text);color:var(--hot-text);font-weight:600}
.pal-say{font-size:14px;line-height:1.7;margin-top:8px}
.pal-say:empty{display:none}
.pal-say .scheme{display:flex;align-items:center;gap:8px}
.pal-say .scheme i{width:16px;height:16px;border-radius:3px;border:1px solid var(--line);display:inline-block}
.near{margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
.near .lede{font-size:14px;color:var(--dim);margin:-6px 0 16px}
.near ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:18px}
.near a{display:block;text-decoration:none;color:var(--ink)}
.near img{width:100%;height:110px;object-fit:contain;object-position:bottom;
  background:rgba(255,255,255,.5)}
.nt{display:block;margin-top:8px;font-size:13.5px;line-height:1.35}
.nd{display:block;margin-top:2px;font-size:12px;color:var(--faint)}

.index .lede{font-size:18px;color:var(--dim);margin-top:8px;max-width:56ch}
#filter{margin-top:26px;width:100%;font:inherit;font-size:16px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:13px 19px}
.all{width:100%;border-collapse:collapse;margin-top:22px;font-size:14.5px}
.all th{text-align:left;font-size:11px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line)}
.all td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.all .a,.all .s{color:var(--dim)}
.all .d{white-space:nowrap;color:var(--hot-text);font-weight:600}
.all .s{font-size:12.5px}
.all a{text-decoration:none}
.all a:hover{text-decoration:underline}
/* On a phone the size has to stay on the screen, and on one line, since it is
   the point of the list: Held by goes, and long titles and names break, at a
   hyphen where the language allows, rather than push the size off the edge. */
@media (max-width:620px){.all .s,.all th:nth-child(4){display:none}
  .all th,.all td{padding:8px 6px}
  .all .t,.all .a{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
  /* Safari sizes a table column by its unbreakable words and ignores
     overflow-wrap there, so with a reader's own letter spacing the list ran
     69 px off a 320 px screen. word-break counts in that sizing. */
  .all .t,.all .a{word-break:break-word}}

.foot{border-top:1px solid var(--line);padding:28px 22px 44px;color:var(--faint);
  font-size:12.5px;line-height:1.6}
.foot p{max-width:860px;margin:0 auto 9px}
.foot a{color:var(--faint)}
/* the links are 15 px of type: each takes taps 6 px above and below, and the
   line they sit on is tall enough that two wrapped lines' areas never meet.
   Each link is one box that never breaks: an inline link broken over two
   lines, or one Safari ends with an empty piece on the next line, had a tap
   area spanning neither, and a finger off its centre missed it ('Nicola
   Harvey' on a phone). Its own line height keeps the box to the 15 px of
   type, so the lines' tap areas still never meet. */
.foot a{position:relative;display:inline-block;white-space:nowrap;line-height:1.2}
.foot a::after{content:"";position:absolute;inset:-6px 0}
.foot p+p{line-height:2.2}