/* Two colours per appearance: a ground and an ink. Product imagery is the only
   other colour on the page. Light is claret with bone type; dark is not a
   dimmed claret but a warm black with the claret lifted into the type.
   Contrast (WCAG): bone on claret 11.4:1, rose on black 9.5:1. */
:root{
  --ground:#521a20;
  --ink:#f3e9da;
  --rule:rgb(243 233 218 / .36);
  --rule-strong:rgb(243 233 218 / .62);
  --shade:rgb(24 3 7 / .5);
  --gap:32px;
  --m:clamp(20px,4.4vw,72px);
  --pl:max(var(--m),env(safe-area-inset-left,0px));
  --pr:max(var(--m),env(safe-area-inset-right,0px));
  --max:1400px;
  color-scheme:dark;
  background:var(--ground);
  color:var(--ink);
  font-family:-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.5;
  font-synthesis:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#0f0b0b;--ink:#e3a69c;--rule:rgb(227 166 156 / .32);--rule-strong:rgb(227 166 156 / .55);--shade:rgb(0 0 0 / .6)}
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Full-bleed hairlines use 100vw, which includes a desktop scrollbar. */
body{margin:0;background:var(--ground);overflow-x:clip}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img,video{display:block;max-width:100%}
picture{display:contents}
/* source isn't display:none in the UA sheet, so under a contents picture it would become a grid item. */
source{display:none}
strong{font-weight:600}
code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.88em;overflow-wrap:anywhere}

a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--rule);transition:text-decoration-color .2s ease}
a:hover{text-decoration-color:currentColor}
a:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
a,summary{-webkit-tap-highlight-color:transparent}

.skip{position:absolute;left:var(--pl);top:12px;z-index:5;padding:12px 16px;background:var(--ink);color:var(--ground);font-weight:600;text-decoration:none;border-radius:6px;transform:translateY(-200%)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main [id],footer[id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 24px)}

.cover,main>*,.colophon{max-width:calc(var(--max) + var(--pl) + var(--pr));margin-inline:auto;padding-left:var(--pl);padding-right:var(--pr)}

/* Shared type: one face at a huge size and at reading sizes. Links and body
   never drop below 16px; only captions are 14px. */
/* Section titles are the middle step between the name and the text: about
   half the name's size on the cover, so each room announces itself. */
.room-title{font-size:max(min(13.4vw,60px),min(6.6vw,104px));line-height:.95;font-weight:600;letter-spacing:-.04em;margin-left:-.045em;margin-bottom:clamp(16px,3vw,40px);text-wrap:balance}
.room-title-app{display:flex;align-items:center;gap:.2em}
.room-icon{flex:none;width:.86em;height:.86em;filter:drop-shadow(-3px 8px 10px var(--shade))}
.piece-title{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.012em}
.caption{font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
.text{text-wrap:pretty}
.links{display:flex;flex-wrap:wrap;gap:0 24px;font-weight:500}
.links a{display:inline-block;padding:8px 0}

/* Opening. Its height comes from its contents (the index, the object's
   aspect ratio and the name), never from the viewport, so Safari can cut it
   anywhere and the same ground carries on. Everything hangs from one centre
   line: the vertical hairline. The horizontal one crosses it under the name.
   The role sits beside the object rather than under the name so that "iOS
   developer" stays clear of Safari's bottom bar on the Duo cover. */
.cover{container-type:inline-size;padding-top:max(22px,calc(env(safe-area-inset-top,0px) + 14px))}
.cover-inner{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);padding-bottom:clamp(30px,5cqi,56px);--name:27.4cqi}
.cover-inner::before{content:"";position:absolute;left:50%;top:-100px;bottom:0;border-left:1px solid var(--rule)}

.index{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);font-size:16px;line-height:1.45;margin-bottom:clamp(24px,8cqi,40px)}
.index-head{font-weight:600;padding-bottom:2px}
.index a{display:inline-block;padding:2px 0;text-decoration-color:transparent}
.index a:hover{text-decoration-color:currentColor}

.stage{display:contents}
/* The object stands in front of the name and dips into it over lowercase
   letters only, so its shadow falls on the type without hiding any of it. */
.stage-object{position:relative;z-index:1;grid-column:2;grid-row:2;justify-self:end;width:74cqi;height:auto;margin-top:8px;margin-bottom:calc(var(--name) * -.36)}
.role{grid-column:1;grid-row:2;align-self:end;padding-bottom:calc(var(--name) * .1);font-size:17px;line-height:1.4;text-wrap:balance}
.role strong,.role span{display:block}
.name{position:relative;grid-column:1/-1;grid-row:3;font-size:var(--name);line-height:.84;font-weight:600;letter-spacing:-.047em;margin-left:-.055em;white-space:nowrap}
.name span{display:block}
.name::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;bottom:-.17em;border-top:1px solid var(--rule)}

@container (min-width:760px){
  .cover-inner{--name:14cqi}
  .index{grid-column:1;grid-row:1;align-self:start;margin-bottom:0}
  .stage-object{grid-row:1/span 2;align-self:end;width:min(31cqi,500px);margin:0 0 calc(var(--name) * -.44) 0}
  .role{padding-bottom:calc(var(--name) * .16);font-size:clamp(18px,1.6cqi,22px)}
  .name span{display:inline}
}

/* Catalogue. Every entry hangs from the same 12-column grid as the opening:
   the label holds the left third, the object the rest. */
main{padding-bottom:clamp(120px,16vw,220px)}
.foreword{padding-top:clamp(40px,6vw,88px)}
.foreword p{max-width:30em;font-size:clamp(19px,1.7vw,24px);line-height:1.45;letter-spacing:-.008em;text-wrap:pretty}

.entry,.shelf{position:relative;margin-top:clamp(120px,16vw,220px);padding-top:clamp(22px,2.6vw,36px)}
/* Each room opens on a full-bleed threshold, drawn stronger than the hairlines inside rooms. */
.entry::before,.shelf::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;border-top:1px solid var(--rule-strong)}

.entry,.feature{display:grid;grid-template-columns:minmax(0,1fr);row-gap:22px}
.entry>.room-title{order:-2;margin-bottom:0}
.plate{order:-1}
.label{display:flex;flex-direction:column;gap:10px}
.label .caption{margin-top:-4px}
.label .text{max-width:34em}
.plate .caption{margin-top:14px}

.plate-print img{width:100%;height:auto;border-radius:4px}
.plate-duo img{width:100%;height:auto}
.plate-aweigh{display:grid;grid-template-columns:minmax(0,3.513fr) minmax(0,4.792fr) minmax(0,4.792fr);column-gap:clamp(12px,2.4vw,40px);align-items:end}

/* Aweigh's frames: screen insets are measured from the artwork (aweigh/style.css
   owns them). The watch frame is a 420px copy of watchos-frame.webp because
   the 1120px original, scaled down to the watch's size on a phone, drew its
   bezel badly on iPhone. The watch is 55% of the phone's height rather than
   true scale so its bezel and recording stay legible at phone widths. */
.phone{position:relative;aspect-ratio:1380/2880;filter:drop-shadow(0 16px 20px var(--shade))}
.phone-screen{position:absolute;top:2.222%;left:3.768%;width:92.464%;height:95.556%;overflow:hidden;background:#000;border-radius:13%/6%}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:center top}
.phone-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.watch-slot{aspect-ratio:3513/10000;display:flex;align-items:flex-end}
.watch{position:relative;width:100%;aspect-ratio:420/660;filter:drop-shadow(0 14px 18px var(--shade))}
.watch-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.watch-screen{position:absolute;top:21.818%;left:12.768%;width:74.464%;height:56.477%;overflow:hidden;background:#000;border-radius:15.44%/12.96%}
.watch-screen video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:auto}
.watch-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.watch-poster.hidden{display:none}

/* Shelves: smaller work, three to a row. */
.shelf-head .text{max-width:40em}
.shelf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px var(--gap);margin-top:clamp(28px,3vw,44px)}
.feature+.shelf-grid{margin-top:clamp(48px,6vw,80px)}
.piece{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.piece .caption{margin-top:-6px}
.piece .links{margin-top:auto}
.icon{width:84px;height:84px;margin-bottom:14px;filter:drop-shadow(-3px 8px 10px var(--shade))}
.print{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px;margin-bottom:14px}
.story{padding-top:16px;border-top:1px solid var(--rule)}
.story details{width:100%}
.story summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:8px 0;font-weight:500;list-style:none}
.story summary::-webkit-details-marker{display:none}
.story summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s ease}
.story details[open] summary::before{transform:rotate(45deg) translate(-2px,-1px)}
.story details p{padding-top:6px}
@supports(interpolate-size:allow-keywords){
  .story details{interpolate-size:allow-keywords}
  .story details::details-content{block-size:0;overflow:clip;transition:block-size .25s ease,content-visibility .25s;transition-behavior:allow-discrete}
  .story details[open]::details-content{block-size:auto}
}
.also{margin-top:44px;padding-top:16px;border-top:1px solid var(--rule)}
.also ul{margin-top:8px}
.also li{padding:6px 0}
.also li a{display:inline-block;padding:4px 0;margin-left:.3em;font-weight:500;white-space:nowrap}

.rows{margin-top:28px}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head link" "sub sub" "desc desc";gap:2px 20px;padding:18px 0;border-top:1px solid var(--rule)}
.row:last-child{border-bottom:1px solid var(--rule)}
.row .piece-title{grid-area:head}
.row .caption{grid-area:sub}
.row .text{grid-area:desc;margin-top:8px;max-width:40em}
.row .links{grid-area:link;justify-self:end;margin:-8px 0}

/* Close: the one other large line on the page. */
.colophon{padding-bottom:max(36px,calc(env(safe-area-inset-bottom,0px) + 28px))}
.colophon-ask{position:relative;padding-top:clamp(22px,2.6vw,36px);font-size:clamp(48px,9vw,132px);line-height:1;font-weight:600;letter-spacing:-.045em;margin-left:-.04em}
.colophon-ask::before{content:"";position:absolute;top:0;left:calc(50% - 50vw);width:100vw;border-top:1px solid var(--rule-strong)}
.colophon-ask a{text-decoration-thickness:.045em;text-underline-offset:.12em}
.colophon-links{display:flex;gap:0 28px;margin-top:16px;font-weight:500}
.colophon-links a{display:inline-block;padding:8px 0}
.colophon>.caption{margin-top:48px}

@media (min-width:560px) and (max-width:899px){
  .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .entry,.feature{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}
  .entry>.room-title{grid-column:1/-1;grid-row:1;margin-bottom:clamp(8px,1.6vw,24px)}
  .plate{order:0;grid-column:5/-1;grid-row:2}
  .label{grid-column:1/span 4;grid-row:2;align-self:start}
  .feature .plate,.feature .label{grid-row:1}
  #aweigh .plate{grid-column:5/span 7}
  .shelf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foreword{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
  .foreword p{grid-column:2}
  .row{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:none;column-gap:var(--gap)}
  .row .piece-title{grid-area:auto;grid-column:1/span 4}
  .row .caption{grid-area:auto;grid-column:1/span 4;grid-row:2}
  .row .text{grid-area:auto;grid-column:5/span 6;grid-row:1/span 2;margin-top:0}
  .row .links{grid-area:auto;grid-column:11/span 2;grid-row:1}
  .also ul{columns:2;column-gap:var(--gap)}
  .also li{break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}