/* Speck, the reading pages: the catalogue and the engineering page.
   Every part comes from speck.css, exactly as the dive uses it. This file only lays them out to be read. */
html{scroll-behavior:smooth;scroll-padding-top:84px}
h3,figure,table{margin:0}
img,video{display:block;max-width:100%;height:auto}
body{overflow-x:clip;--edge:max(16px,5vw)}
/* on a page of text the bar is a band of paper, so nothing shows between its buttons as you scroll */
.page .bar{background:var(--paper);padding-block:12px;box-shadow:0 1px 0 var(--line)}

/* a word cut from the page's own pictures, with the Speck as its full stop */
.wm{display:flex;align-items:baseline;margin:0 0 0 -.035em;font:900 var(--wm,min(24.5vw,36vh))/.84 var(--sans);letter-spacing:-.045em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.wm span{background:var(--ink) var(--im) var(--x,50%) var(--y,50%)/cover no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wm i{flex:none;width:var(--mm);height:var(--mm);border-radius:50%;background:var(--pink);margin-left:.04em}

/* the first screen: the word, a line, a row of dots. The dive opens the same way. */
.mast{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:clamp(104px,18vh,176px) var(--edge) var(--pad)}
.mast .intro{margin-top:clamp(18px,4.4vh,44px);display:grid;gap:14px;justify-items:start}
.mast .intro>p:not(.tag):not(.go){font-size:16.5px;line-height:1.45;max-width:46ch}
.mast .strip{margin-top:auto;padding-top:44px;padding-right:44px}

/* a plate: the picture whole, its label beside it, and what the dive had no room for */
.plates{display:grid;gap:clamp(84px,14vh,170px);padding:clamp(36px,7vh,90px) 0 clamp(84px,14vh,170px)}
.plate{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);column-gap:clamp(28px,4.4vw,72px);row-gap:22px;align-items:start;padding-inline:var(--edge) calc(var(--edge) + 30px)}
.plate>.art{grid-column:2;grid-row:1}
.plate>.card{grid-column:1;grid-row:1/3;position:sticky;top:92px;z-index:2}
.plate>.body{grid-column:2;grid-row:2;display:grid;gap:26px;min-width:0}
.plate.noart>.body{grid-row:1/3}
/* a label beside its picture is a little smaller than one over a full screen painting, so long words fit */
.plate .card h2{font-size:clamp(36px,3.9vw,56px)}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px 30px;align-items:start}
.split>div{display:grid;gap:22px;min-width:0}
/* a painting that is one long horizon runs edge to edge, and its label overlaps the corner, as it does in the dive */
.plate.wide>.art{grid-column:1/-1;margin-inline:calc(var(--edge) * -1) calc((var(--edge) + 30px) * -1)}
.plate.wide>.card{grid-row:2;margin-top:clamp(-120px,-9vw,-60px)}
.plate.wide>.under{grid-column:1/-1;grid-row:2}
.plate.wide.has-under>.card{grid-row:3;margin-top:0}
.plate.wide.has-under>.body{grid-row:3}

.art{position:relative;line-height:0;background:#e6e7e2}
.art img,.art video{width:100%}
.art.narrow{justify-self:start;width:min(100%,560px)}
.art.sq{justify-self:start;width:min(100%,76vh)}
.spot{position:absolute;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;line-height:1;text-decoration:none}
.spot::before{content:"";position:absolute;left:50%;top:50%;width:var(--mm);height:var(--mm);margin:calc(var(--mm)/-2) 0 0 calc(var(--mm)/-2);border-radius:50%;background:var(--pink)}
.spot.left span{left:auto;right:calc(100% + 8px)}
/* where the Speck is the whole subject, the ring is sized to it and there is no dot to add */
.spot.dome{width:26%;height:auto;aspect-ratio:1;margin:0;transform:translate(-50%,-50%)}
.spot.dome::before{display:none}

.cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;font:400 11.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--mute)}
.cap .tl{color:var(--ink);white-space:nowrap}
.cap .tl:hover{color:var(--pink)}
.prose{display:grid;gap:14px;max-width:62ch;font-size:17px;line-height:1.5}
.prose .big{font:700 clamp(21px,2.1vw,28px)/1.2 var(--sans);letter-spacing:-.015em;text-wrap:balance}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 30px;border-top:1.5px solid var(--ink)}
.facts>div{padding:14px 0 18px;border-bottom:1px solid var(--line)}
.facts h3{display:flex;align-items:center;gap:8px;font:900 20px/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase;margin-bottom:9px}
.facts h3 i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--ink)}
.facts p{font-size:14.5px;line-height:1.45}
.facts small{display:block;margin-top:9px;font:400 11.5px/1.45 var(--mono);color:var(--mute)}
.facts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.facts.one{grid-template-columns:minmax(0,1fr);align-self:start}
.six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 22px;padding-inline:0}
.six>div{border-top:1.5px solid var(--ink);padding-top:10px}
.six h3{font:900 17px/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase;margin-bottom:6px}
.six p{font:400 12px/1.5 var(--mono)}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tb{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px;line-height:1.4}
.tb th,.tb td{text-align:left;vertical-align:top;padding:11px 18px 12px 0;border-bottom:1px solid var(--line);font-weight:400}
.tb thead th{font:500 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-bottom:1.5px solid var(--ink);padding-bottom:9px}
.tb tbody th{font-weight:700}
.tb .me{background:rgba(255,31,163,.08);padding-left:12px}
.tb thead .me{color:var(--ink)}
.tb tr.sum th,.tb tr.sum td{font-weight:900;border-bottom:1.5px solid var(--ink)}
.swipe{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:-14px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.pair h3{font:900 20px/1.05 var(--sans);letter-spacing:-.02em;text-transform:uppercase;margin:14px 0 8px}
.pair p{font-size:14.5px;line-height:1.45}
.num{display:flex;align-items:flex-end;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.num b{font:900 clamp(120px,17vw,260px)/.74 var(--sans);letter-spacing:-.06em}
.num sup{font-size:.3em;letter-spacing:-.02em;vertical-align:top;position:relative;top:.12em;margin-left:.06em}
.num p{max-width:26ch;font:700 clamp(19px,1.9vw,26px)/1.2 var(--sans);letter-spacing:-.015em;padding-bottom:.3em}
.bars{display:grid;gap:16px}
.bars p{font:400 12px/1.4 var(--mono);margin-bottom:7px}
.bars p b{font:900 16px/1 var(--sans);text-transform:uppercase;letter-spacing:-.01em;margin-right:8px}
.bars i{display:block;height:clamp(22px,2.6vw,36px);width:var(--w);min-width:var(--mm);background:var(--ink)}
.bars i.me{background:var(--pink)}
.qs{border-top:1.5px solid var(--ink)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;font:700 clamp(17px,1.5vw,20px)/1.25 var(--sans)}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:var(--mm);height:var(--mm);border-radius:50%;background:var(--pink);box-shadow:inset 0 0 0 2px var(--pink);transition:background .2s}
.qs details[open] summary::after{background:none}
.qs summary:hover{color:var(--pink)}
.qs p{max-width:62ch;padding:0 44px 20px 0;font-size:16px;line-height:1.5}

/* labels printed from the engineering photographs */
.s-wafer{--cb:#2b1433;--cf:#f7ebf3;--cm:#c9b0c1;--cl:rgba(247,235,243,.26)}
.s-blush{--cb:#f1d2c7;--cm:#6d514a;--cl:rgba(19,20,21,.2)}
.s-ink{--cb:#131415;--cf:#fcfcfa;--cm:#b9bdb8;--cl:rgba(255,255,255,.26)}
.s-wafer .tl,.s-ink .tl{color:var(--cf)}

/* the last screen: the wordmark and the ticket, as the dive ends */
.close{display:grid;gap:14px;justify-items:start;padding:clamp(70px,13vh,150px) calc(var(--edge) + 30px) clamp(44px,8vh,90px) var(--edge)}
.close .tag{margin-top:clamp(6px,1.6vh,18px)}
.close .ticket{max-width:820px}
.close .stub{align-content:center}
.close .strip{margin-top:clamp(18px,4vh,40px)}

/* things arrive as you reach them */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .plate,.plate.wide{grid-template-columns:minmax(0,1fr);padding-inline:var(--edge)}
  .plate>.art,.plate>.card,.plate>.body,.plate.wide>.card,.plate.wide>.body,.plate.wide>.under,.plate.noart>.body,.plate.wide.has-under>.card,.plate.wide.has-under>.body{grid-column:1;grid-row:auto}
  .plate>.card{position:relative;top:auto;margin:-34px 0 0;width:calc(100% - 22px);justify-self:start}
  .plate.noart>.card{margin-top:0;width:100%}
  .plate.wide>.art{margin-inline:calc(var(--edge) * -1)}
  .plate.wide>.card{margin-top:-34px}
  .plate.wide.has-under>.card{margin-top:0;width:100%}
  .close{padding-inline:var(--edge)}
  .six{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .mast .strip{padding-right:30px}
}
@media (max-width:700px){
  .page .rail{display:none}
  .mast{padding-top:clamp(96px,20vh,170px)}
  .prose{font-size:16px}
  .pair{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr)}
  .plate .card h2{font-size:34px}
  .facts.two{grid-template-columns:minmax(0,1fr)}
  .facts.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot span{display:none}
  .qs p{padding-right:0}
  /* on a phone a table wraps to fit; only the five column comparison scrolls, and says so */
  .tb{min-width:0;font-size:13px}
  .tb th,.tb td{padding-right:10px}
  .tb.x5{min-width:640px}
  .swipe{display:block}
}