/* STANDING ROOM: the inside of a subway car, in the colours and the type of the system's own signs.
   Sign black for the ground, sign white for the type, the signage grey for the quiet type, a brushed
   stainless plate for the product card, the platform edge's yellow for prices and the one action, and
   for the line the colour the system gave the route it never built. One family, TeX Gyre Heros (the
   free cut of the signs' grotesque): bold for everything that is a sign, regular for reading. */

@font-face{
  font-family:"Heros";
  src:url("fonts/heros.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Heros";
  src:url("fonts/heros-bold.woff2") format("woff2");
  font-weight:700;
  font-display:swap;
}

:root{
  color-scheme:dark;
  --tunnel:#000000;     /* ground: the black of the enamel sign */
  --stainless:#C9CCCF;  /* the product plate: the car's panels */
  --steel:#A7A9AC;      /* secondary type on tunnel: the grey of the system's signage */
  --bone:#FFFFFF;       /* type on tunnel: sign white */
  --platform:#FCCC0A;   /* prices, the one button, the lit stop, the sign: the platform edge */
  --route:#00ADD0;        /* the line ahead, nothing else: the colour the system gave the route it never built */

  --car:color-mix(in oklab,var(--tunnel) 70%,var(--steel));  /* raised surfaces: a panel's worth of grey over the black */
  --bg:var(--tunnel); --fg:var(--bone); --fg2:var(--steel);
  --line:color-mix(in oklab,var(--steel) 32%,transparent);
  --focus:var(--platform);

  --f:"Heros","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t1:.8125rem; --t2:.9375rem; --t3:1.0625rem; --t4:1.375rem; --t5:1.875rem; --t6:3rem;
  --t7:clamp(3.5rem,1.5rem + 6vw,6.75rem);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --ease:cubic-bezier(.23,1,.32,1); --fast:220ms;
  --bar:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 12px)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:400 var(--t3)/1.55 var(--f);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,figure,fieldset{margin:0}
fieldset{padding:0;border:0;min-width:0}
legend{padding:0}
h1,h2,h3{text-wrap:balance;line-height:1.05}
p{text-wrap:pretty}
ul,ol{margin:0;padding:0}
[id]{scroll-margin-top:calc(var(--bar) + 12px)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--platform);color:var(--tunnel);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.num{font-variant-numeric:tabular-nums lining-nums}
.cond{font-weight:700;letter-spacing:0}

/* ---------------------------------------------------------------- the bar */
.bar{position:sticky;top:0;z-index:40;height:var(--bar);background:var(--tunnel);border-bottom:1px solid var(--line)}
.bar .wrap{height:100%;display:flex;align-items:center;gap:var(--s3)}
.brand{font-weight:700;font-size:var(--t2);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:2px solid var(--bone);padding:4px 10px 3px}   /* a keyline tablet, like a station's */
/* The nav carries the popover attribute for phones. On desktop its browser styles (fixed,
   centred, bordered, canvas background) are reset here, or it floats as a box mid-page. */
.bar nav{display:flex;gap:var(--s3);margin:0 0 0 auto;font-size:var(--t2);font-weight:400;color:var(--fg2);
  position:static;inset:auto;border:0;padding:0;background:none;width:auto;height:auto;overflow:visible}
.bar nav a{padding:8px 0;position:relative}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--bone);transform:scaleX(0);transform-origin:left}
.bar nav a[aria-current="page"]{color:var(--fg)}
.bar nav a[aria-current="page"]::after{transform:none}
@media (hover:hover) and (pointer:fine){.bar nav a{transition:color var(--fast) var(--ease)}.bar nav a:hover{color:var(--fg)}}
.bagl{font-size:var(--t2);font-weight:400;color:var(--fg2);padding:8px 0;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.bagl b{color:var(--bone);font-weight:700;margin-left:.3em}
.menu{display:none;font-size:var(--t2);font-weight:700;padding:8px 10px;min-height:44px;border:1px solid var(--steel);border-radius:3px}
.menu[aria-expanded="true"]{background:var(--bone);color:var(--tunnel)}
@media (max-width:720px){
  .bar{background:var(--tunnel)}   /* the pinned window's words scroll under it, so it cannot be glass */
  .bar .wrap{gap:var(--s2)}
  .bagl{margin-left:auto}
  .menu{display:inline-block}
  /* the popover: a panel under the bar, the UA box reset */
  .bar nav{display:none;position:fixed;inset:var(--bar) 0 auto 0;margin:0;border:0;border-bottom:1px solid var(--line);background:var(--tunnel);color:var(--fg);padding:var(--s2) max(20px,env(safe-area-inset-left)) var(--s3);flex-direction:column;gap:var(--s1);font-size:var(--t4);width:auto;height:auto}
  .bar nav:popover-open{display:flex}
  .bar nav::backdrop{background:rgba(0,0,0,.6)}   /* the page dims behind the open menu */
  .bar nav a::after{display:none}
  .bar nav a[aria-current="page"]{box-shadow:inset 3px 0 var(--platform);padding-left:12px}
}

/* ---------------------------------------------------------------- the sign */
.sign{background:var(--car);border:2px solid var(--stainless);border-radius:2px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--tunnel)}
.sign svg{width:100%;height:auto}
.sign path{fill:none;stroke-linecap:round;stroke-width:.78}
.sign .off{stroke:color-mix(in oklab,var(--platform) 13%,var(--car))}
.sign .lit{stroke:var(--platform);stroke-width:.9;filter:drop-shadow(0 0 1.4px color-mix(in oklab,var(--platform) 75%,transparent))}   /* a lit board: the dots bloom a little */
.plate .sign:not(:has(.lit[d])){display:none}   /* until the script draws it, or without the script, no empty box; last in the plate, so nothing moves */
.band .sign:not(:has(.lit[d])) svg{visibility:hidden}
.sign.small{padding:10px 12px;border-width:2px}

/* ---------------------------------------------------------------- home: the window */
main{position:relative;flex:1 0 auto}
.stage{position:relative;background:var(--tunnel)}
.window{position:relative;height:calc(100svh - var(--bar));min-height:620px;max-height:1100px;overflow:hidden;isolation:isolate;
  background:linear-gradient(var(--tunnel),#141414 45%,var(--tunnel))}   /* the tunnel, until the canvas draws */
.ride{position:absolute;inset:0;width:100%;height:100%}
.ride.hand{cursor:pointer}
/* the glass: shade under the words, enough for white type on the white tile, and a vignette */
.window::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(82% 80% at 12% 100%,rgba(0,0,0,.8) 12%,rgba(0,0,0,.48) 60%,transparent 100%),radial-gradient(90% 80% at 50% 40%,transparent 55%,rgba(0,0,0,.5) 100%)}
@media (min-width:721px) and (max-height:700px){.window::before{background:radial-gradient(82% 88% at 12% 100%,rgba(0,0,0,.84) 14%,rgba(0,0,0,.6) 62%,transparent 100%),radial-gradient(90% 80% at 50% 40%,transparent 55%,rgba(0,0,0,.5) 100%)}}   /* a short screen puts the headline higher, over the brightest tile */
/* film grain: one noise tile, stepped around by the keyframes so it lives */
.grain{position:absolute;left:-192px;top:-192px;width:calc(100% + 192px);height:calc(100% + 192px);z-index:2;pointer-events:none;
  background:url("img/grain.png") repeat;background-size:192px 192px;opacity:.12;mix-blend-mode:overlay;animation:grain .8s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(64px,40px)}40%{transform:translate(128px,-24px)}60%{transform:translate(20px,120px)}80%{transform:translate(160px,90px)}100%{transform:translate(96px,150px)}}
.hero{position:absolute;left:0;right:0;bottom:var(--s5);z-index:3;display:grid;justify-items:start;pointer-events:none}
.hero a{pointer-events:auto}
/* the headline and the lead lean with the braking car (set by ride.js) and settle with a small overshoot; the button stays put */
.hero.settle .disp,.hero.settle .lead{transition:transform .7s cubic-bezier(.34,1.5,.64,1)}
/* on the way in, the lead, the hint and the button wait for the stop; the headline is there from the start */
.stage.arriving .lead,.stage.arriving .hint{opacity:0;transform:translateY(10px)}   /* the button is never hidden */
.stage.arrived .lead{transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s}
.stage.arrived .hint{transition:opacity .5s var(--ease) .24s,transform .6s var(--ease) .24s}
.disp{font-size:var(--t7);font-weight:700;letter-spacing:-.025em;word-spacing:-.05em;line-height:.92;margin-left:-.045em;text-shadow:0 0 .3em rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.5)}
@media (min-width:721px) and (max-height:700px){.disp{font-size:clamp(3.5rem,13vh,5.5rem)}}   /* a short screen: the headline keeps clear of the band */
.lead{font-size:var(--t4);line-height:1.4;color:var(--bone);max-width:30ch;margin-top:var(--s3);text-wrap:balance}
.hero .lead{text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hint{font-size:var(--t2);color:var(--fg2);margin-top:var(--s2);text-wrap:balance}
.hint .touch{display:none}
@media (hover:none){.hint .mouse{display:none}.hint .touch{display:inline}}
/* the action row: the button and, beside it, the hint */
.act{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.act .hint{margin:0}
.act .linkbtn{min-width:16rem;text-align:center}   /* the hint beside it stays put as the stop's name changes length */

/* the band over the top of the window: the strip map and the sign, the way they sit above the doors */
.band{position:absolute;left:0;right:0;top:0;z-index:4;background:linear-gradient(rgba(0,0,0,.94),rgba(0,0,0,.82) 70%,transparent)}
.unit{display:flex;align-items:flex-end;gap:var(--s4)}
.unit .map{flex:1;min-width:0}
.unit .sign{flex:0 0 min(34%,380px);margin-bottom:var(--s3);--car:var(--tunnel)}
/* the strip map: six columns, a segmented line through them, the lit dot at --p */
.map{--n:6;--p:0;--labels:132px;--r:100px;list-style:none;position:relative;display:grid;grid-template-columns:repeat(6,1fr);padding:var(--labels) var(--r) var(--s3) 0}
.map li{position:relative;height:48px}
/* the line: a solid rail, the stretch ahead lit green, the stretch behind dim */
.map li::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);background:var(--seg,var(--line));transition:background-color .3s var(--ease)}
.map li.ahead{--seg:var(--route)}
.map li.behind{--seg:var(--line)}
.map li.here::before{background:linear-gradient(90deg,var(--line) 50%,var(--route) 50%)}
/* while the train moves the line ahead goes dark; when it stops the segments light up one after another */
.map[data-state="moving"] li::before,.map[data-state="moving"] li.here::before,.map[data-state="moving"] li:first-child.here::before{background:var(--line)}
.map li:nth-child(2)::before{transition-delay:.07s}
.map li:nth-child(3)::before{transition-delay:.14s}
.map li:nth-child(4)::before{transition-delay:.21s}
.map li:nth-child(5)::before{transition-delay:.28s}
.map li:nth-child(6)::before{transition-delay:.35s}
.map[data-state="moving"] li::before{transition-delay:0s}
/* the line starts at the first stop and ends at the last one */
.map li:first-child::before{left:50%}
.map li:last-child::before{right:50%}
.map li:first-child.here::before{background:var(--route)}
.map li:last-child.here::before{background:var(--line)}
.stop{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);display:block;border-radius:50%}
/* stations: a pale disc with a green ring, so they read against the green rail */
.stop::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--bone);border:4px solid var(--route)}
.map li.behind .stop::before{background:var(--car);border-color:var(--fg2)}
.map li.here .stop::before{opacity:0}
.stop:focus-visible{outline:3px solid var(--bone);outline-offset:-4px;z-index:3}
.stop .n{position:absolute;left:50%;bottom:44px;transform-origin:left bottom;transform:rotate(-45deg);white-space:nowrap;
  font-weight:700;font-size:var(--t4);letter-spacing:0;color:var(--fg2);padding-left:2px}
.map li.here .stop .n{color:var(--fg)}
.stop .p{display:none}
@media (min-width:721px) and (min-height:481px){   /* the price under each disc, so a desktop sees all six at once; the lit stop's is on its tag and the sign */
  .stop .p{display:block;position:absolute;left:50%;top:calc(50% + 19px);transform:translateX(-50%);font-size:var(--t1);font-weight:700;color:var(--platform);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
  .map li.here .stop .p{visibility:hidden}
  .unit .map{margin-left:-42px}   /* the first disc meets the headline's left edge */
}
@media (hover:hover) and (pointer:fine){.stop .n{transition:color var(--fast) var(--ease)}.stop:hover .n{color:var(--fg)}}
/* the lit dot and its label travel along the line */
.map::after{content:"";position:absolute;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--platform);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--platform) 30%,transparent);
  top:calc(var(--labels) + 24px);left:calc((var(--p) + .5) * (100% - var(--r)) / var(--n));transform:translate(-50%,-50%);
  background-image:radial-gradient(circle,var(--tunnel) 0 5px,transparent 5.5px);
  transition:left var(--fast) var(--ease)}
.map::before{content:"This stop";position:absolute;z-index:2;top:calc(var(--labels) + 54px);left:calc((var(--p) + .5) * (100% - var(--r)) / var(--n));
  transform:translateX(-50%);font-size:var(--t1);font-weight:700;color:var(--platform);white-space:nowrap;background:var(--tunnel);padding:2px 6px;border-radius:2px;transition:left var(--fast) var(--ease)}
.map[data-state="moving"]::before{content:"Next stop"}
/* the disc pulses once when the train stops */
.map[data-state="stopped"]::after{animation:pulse .9s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 4px color-mix(in oklab,var(--platform) 30%,transparent),0 0 0 6px rgba(252,204,10,.55)}100%{box-shadow:0 0 0 4px color-mix(in oklab,var(--platform) 30%,transparent),0 0 0 30px rgba(252,204,10,0)}}
/* until the first ride, a cue on the rail where the eye already is; the next stop's price gives way to it */
.map:not(.used) li.here + li .stop::after{content:"Hover to ride";position:absolute;left:50%;top:46px;transform:translateX(-50%);padding:3px 8px;background:var(--platform);color:var(--tunnel);font-size:var(--t1);font-weight:700;border-radius:2px;white-space:nowrap;pointer-events:none}
.map:not(.used) li.here + li .stop .p{visibility:hidden}
@media (hover:none){.map:not(.used) li.here + li .stop::after{content:"Tap to ride"}}
@media (max-width:720px),(max-height:480px){.map:not(.used) li.here + li .stop::after{display:none}}   /* the list explains itself there */
@media (max-width:980px){
  .stop .n{font-size:var(--t3)}
  .unit .sign{flex-basis:36%}
}
@media (max-width:720px),(max-height:480px){
  /* the window pins under the bar; the words, the sign and the list slide up over it, so a tap on a
     stop rides a window you can see. Its floor gives way on short screens (landscape, 200% zoom) so
     the list stays reachable, and the scroll padding keeps a focused stop out from under it. */
  html{scroll-padding-top:calc(var(--bar) + min(42svh,420px) + 12px)}
  .window{position:sticky;top:var(--bar);height:42svh;min-height:min(300px,36svh);max-height:420px;z-index:2}
  .disp{font-size:clamp(2.25rem,12.2vw,3.5rem)}   /* one line, like a station's name */
  .act{display:grid;justify-items:start;gap:var(--s2)}   /* the hint under the button, not beside it */
  .window::before{display:none}
  .hero{position:relative;z-index:1;bottom:auto;pointer-events:auto;background:var(--tunnel);padding-top:var(--s3);padding-bottom:var(--s2)}
  .lead{margin-top:var(--s2)}
  .band{position:relative;z-index:1;background:var(--tunnel);border-top:1px solid var(--line)}
  .unit{display:grid;gap:var(--s2);padding-top:var(--s2)}
  .unit .sign{order:1;margin:0;flex:none;width:100%}
  .map{--row:60px;grid-template-columns:1fr;padding:0 0 var(--s1) 0}
  .map li{height:var(--row)}
  .map li::before{left:21px;right:auto;top:0;bottom:0;width:6px;height:auto;transform:none;background:var(--seg,var(--line))}
  .map li.here::before{background:linear-gradient(180deg,var(--line) 50%,var(--route) 50%)}
  .map li:first-child::before{top:50%;left:21px}
  .map li:last-child::before{bottom:50%;right:auto}
  .map li:first-child.here::before{background:var(--route)}
  .map li:last-child.here::before{background:var(--line)}
  .stop{position:relative;left:auto;top:auto;transform:none;width:auto;height:var(--row);display:flex;align-items:center;gap:12px;padding-left:56px;border-radius:4px}
  .stop::before{left:24px}
  .stop:focus-visible{outline-offset:0}
  .stop .n{position:static;transform:none;padding:0;font-size:var(--t4);flex:1}
  .stop .p{display:block;margin-left:auto;padding-right:4px;color:var(--platform);font-weight:700;font-variant-numeric:tabular-nums}
  .map::after{top:calc((var(--p) + .5) * var(--row));left:24px;transition:top var(--fast) var(--ease)}
  .map::before{display:none}
}

/* the six stops as a row under the window: the hanger frames with the stop's tile colour at their head,
   for a desktop that scans; a phone has the list */
.six{padding-top:var(--s5)}
.six ol{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.six li{border-top:6px solid var(--band)}
.six a{display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:baseline;padding-top:10px}
.six img{grid-column:1/-1;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:var(--car)}
.six .n{font-weight:700;font-size:var(--t2);color:var(--fg)}
.six .p{color:var(--platform);font-weight:700;font-size:var(--t2);font-variant-numeric:tabular-nums}
.six a:focus-visible{outline-offset:2px}
@media (hover:hover) and (pointer:fine){.six img{transition:opacity .3s var(--ease)}.six a:hover img{opacity:.88}}
@media (max-width:1000px){.six ol{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.six{display:none}}

/* home photo strip */
.strip{padding-top:var(--s5);padding-bottom:var(--s5)}
.strip-h{font-size:var(--t2);font-weight:400;color:var(--fg2);margin-bottom:var(--s2);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.strip-h h2{font-size:var(--t4);font-weight:700;color:var(--fg)}
.strip-h a{color:var(--fg);border-bottom:2px solid var(--bone);padding-block:10px;margin-block:-10px}
.frames{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.frames figure{position:relative;background:var(--car);aspect-ratio:2/3;overflow:hidden}
.frames img{width:100%;height:100%;object-fit:cover}
.frames figcaption{position:absolute;left:12px;bottom:10px;right:12px;font-size:var(--t2);font-weight:700;color:var(--bone);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.8)}
.frames figcaption b{color:var(--platform);font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums}
.frames a{display:block;height:100%;position:relative}
.frames a:focus-visible,.grid a:focus-visible{outline-offset:-3px}   /* the figure clips, so the ring sits inside */
@media (hover:hover) and (pointer:fine){.frames img{transition:transform .5s var(--ease)}.frames a:hover img{transform:scale(1.03)}}
/* a frame that opens a piece: under a mouse, the piece's hanger frame comes up over it (sr.js adds it on the first hover, once it has loaded) */
.frames img.alt,.grid img.alt{position:absolute;inset:0;opacity:0}
@media (hover:hover) and (pointer:fine){.frames img.alt.in,.grid img.alt.in{transition:opacity .35s var(--ease)}.frames a:hover img.alt.in,.grid a:hover img.alt.in{opacity:1}}
@media (max-width:720px){.frames{grid-template-columns:1fr 1fr}.frames figure:nth-child(3){grid-column:1/-1;aspect-ratio:4/3}.frames figcaption b{display:block;margin:2px 0 0}}

/* ---------------------------------------------------------------- the foot */
.foot{width:100%;border-top:1px solid var(--line);padding-top:var(--s3);padding-bottom:var(--s5);margin-top:var(--s2);display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s4);font-size:var(--t2);color:var(--fg2)}
.foot p{max-width:62ch}
.foot a{color:var(--fg);border-bottom:1px solid var(--steel)}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
@media (hover:hover) and (pointer:fine){.foot a:hover{border-bottom-color:var(--platform)}}
@media (max-width:720px){.foot{grid-template-columns:1fr;gap:var(--s3)}}

/* ---------------------------------------------------------------- piece page */
/* the photo column is half the page or .8 of the height under the bar, whichever is less: the
   column keeps a 4:5 shape, so on a wide short screen a hanger shot keeps its rail and its hem */
.piece-top{display:grid;grid-template-columns:minmax(0,min(52%,calc((100svh - var(--bar)) * .8))) minmax(0,1fr);min-height:calc(100svh - var(--bar))}
/* the photographs: three frames in one column, picked by a row of tabs set like a sign's text; on
   a screen tall enough to hold it the column stays in view while the plate scrolls */
.photo{position:sticky;top:var(--bar);align-self:start;aspect-ratio:4/5;max-height:calc(100svh - var(--bar));background:var(--car);overflow:hidden;display:flex;flex-direction:column}
.shots{position:relative;flex:1 1 0;min-height:0}
.shots:focus-visible{outline-offset:-3px}
.shot{position:absolute;inset:0;opacity:0;transition:opacity 320ms var(--ease)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}   /* the hanger's rail and the hem both stay in when the column is wider than the frame */
.shot:nth-child(2) img{object-position:50% 12%}   /* the ride frame: the head stays in, the feet may go */
.wears{position:absolute;right:16px;bottom:14px;z-index:2;display:grid;place-items:center;height:44px;padding:0 14px;font-size:var(--t2);font-weight:700;color:var(--bone);background:rgba(0,0,0,.8);border-radius:4px}   /* who wears what size, on the ride frame */
.photo:has(.view input[value="1"]:checked) .shot:nth-child(1),
.photo:has(.view input[value="2"]:checked) .shot:nth-child(2),
.photo:has(.view input[value="3"]:checked) .shot:nth-child(3){opacity:1}
.views{position:relative;z-index:2;display:flex;gap:2px;padding:8px 16px;background:var(--tunnel)}   /* under the frame, so no tab covers a hem or a strip */
.view{position:relative;display:grid}
.view input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.view span{display:grid;place-items:center;height:44px;padding:0 14px;font-size:var(--t2);font-weight:700;color:var(--steel);border-radius:2px;white-space:nowrap}
.view input:checked + span{background:var(--bone);color:var(--tunnel)}
.view input:focus-visible + span{outline:3px solid var(--platform);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.view span{transition:color var(--fast) var(--ease)}.view input:not(:checked):hover + span{color:var(--bone)}}
@supports not selector(:has(a)){.shots{position:static}.shot{position:static;opacity:1}.photo{position:relative;aspect-ratio:auto;max-height:none}.views{display:none}}   /* an older browser gets the three frames stacked */
.plate{--bg:var(--stainless);--fg:var(--tunnel);--fg2:#3B4147;--line:rgba(0,0,0,.28);--focus:var(--tunnel);
  background:var(--bg);color:var(--fg);padding:var(--s4) clamp(20px,4vw,56px) var(--s5);padding-right:max(clamp(20px,4vw,56px),calc(100% - 46rem),calc((100vw - 1240px) / 2 + 20px));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-content:start;container-type:inline-size}   /* the text ends where the bar's does */
@media (min-width:1700px){.plate{padding-left:max(clamp(20px,4vw,56px),calc((100% - 46rem) / 2));padding-right:max(clamp(20px,4vw,56px),calc((100% - 46rem) / 2))}}   /* a wide screen: the column sits in the middle of the plate */
.plate .sign{--car:var(--tunnel);border-color:var(--tunnel);box-shadow:none;margin-top:var(--s1);max-width:340px;order:99}   /* small, and last: the next stop follows the previous and next links, so another piece's price is never read before this one's title */
/* each product page wears its stop's tile colour as a band under the bar */
.bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--band,transparent)}
.st-1{--band:#EE352E}.st-2{--band:#0039A6}.st-3{--band:#FF6319}.st-4{--band:#00933C}.st-5{--band:#B933AD}.st-6{--band:#996633}
.stopline{display:flex;align-items:center;gap:var(--s2);font-size:var(--t2);font-weight:700;color:var(--fg2)}
.stopline .tab{background:var(--tunnel);color:var(--bone);text-transform:uppercase;letter-spacing:.06em;padding:5px 12px 4px;border-left:10px solid var(--band,var(--route))}   /* the stop's name as the tablet on the wall, the band's colour at its edge */
.stopline .k{font-variant-numeric:tabular-nums}
.plate h1{font-size:var(--t6);font-weight:700;letter-spacing:-.02em}
.price{font-size:var(--t5);font-weight:700;font-variant-numeric:tabular-nums lining-nums;margin-top:calc(-1 * var(--s2))}
.plate .lead{color:var(--fg);font-size:var(--t3);max-width:48ch;margin:0}
.sizes{display:grid;gap:10px}
.sizes legend{font-size:var(--t2);font-weight:700;color:var(--fg2);margin-bottom:10px}
.sizes .row{display:flex;flex-wrap:wrap;gap:6px}
.sizes .links{display:flex;flex-wrap:wrap;gap:4px var(--s3);margin-top:2px}
.guide{font-size:var(--t2);font-weight:700;color:var(--fg2);border-bottom:1px solid currentColor;justify-self:start;padding-block:10px;margin-block:-10px}
@media (hover:hover) and (pointer:fine){.guide:hover{color:var(--fg)}}
.size{position:relative;display:inline-grid}
.size input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.size span{display:grid;place-items:center;min-width:48px;height:44px;padding:0 10px;border:1.5px solid var(--fg);font-weight:700;font-variant-numeric:tabular-nums;border-radius:3px}
.size input:checked + span{background:var(--fg);color:var(--stainless)}
.size input:focus-visible + span{outline:3px solid var(--tunnel);outline-offset:3px}
.size input:disabled + span{border-color:var(--line);color:var(--fg2);text-decoration:line-through;cursor:not-allowed}
.size input:disabled{cursor:not-allowed}
.put{height:56px;padding:0 var(--s3);background:var(--platform);color:var(--tunnel);box-shadow:inset 0 0 0 2px var(--tunnel);font-weight:700;font-size:var(--t3);border-radius:3px;justify-self:start;min-width:220px}
@media (hover:hover) and (pointer:fine){.put{transition:transform var(--fast) var(--ease)}.put:hover{transform:translateY(-1px)}}
.put:focus-visible{outline:3px solid var(--tunnel);outline-offset:3px}
.demo{font-size:var(--t2);color:var(--fg2);margin-top:calc(-1 * var(--s2))}
.demo:empty{display:none}
.demo[data-err]{color:var(--fg);font-weight:700}
.demo a{color:var(--fg);font-weight:700;border-bottom:1px solid currentColor;margin-left:6px}
.sizes[data-need] .row{outline:3px solid var(--fg);outline-offset:6px;border-radius:4px}
.spec{display:grid;grid-template-columns:7em 1fr;gap:6px var(--s2);font-size:var(--t2);border-top:1px solid var(--line);padding-top:var(--s2);margin-top:var(--s3)}   /* a longer break after the buy box: buying, then reading, then measuring */
.spec dt{font-weight:700;color:var(--fg2)}
.spec dd{margin:0}
.spec ul{list-style:none;display:grid;gap:4px}
.flat{display:grid;grid-template-columns:200px 1fr;gap:var(--s2) var(--s3);align-items:start;border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s3)}
.flat svg{width:200px;height:auto;color:var(--fg)}
.flat svg path,.flat svg circle{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.flat svg .seam{stroke-dasharray:4 4;stroke-width:1.6}
.flat svg .hi{stroke-width:5}
.flat svg .dim path{stroke:var(--fg2);stroke-width:1.2;stroke-dasharray:none}
.flat svg text{font:700 11px var(--f);fill:var(--fg2);stroke:none}
.measure{width:100%;border-collapse:collapse;font-size:var(--t2);font-variant-numeric:tabular-nums lining-nums}
.measure caption{text-align:left;font-size:var(--t2);color:var(--fg2);padding:0 0 8px}
.measure th,.measure td{text-align:left;padding:5px 10px 5px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.measure thead th{font-weight:700;color:var(--fg2)}
.measure tbody th{font-weight:700}
.measure .let{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border:1.5px solid var(--fg2);border-radius:2px;font-size:var(--t1);margin-right:2px}
.measure .in{color:var(--fg2)}
.signlink{display:block}
.signlink:focus-visible{outline-offset:4px}
.err{background:var(--car);border-left:4px solid var(--platform);padding:10px 14px;font-weight:700}
@container (max-width:600px){.flat{grid-template-columns:1fr}.flat svg{width:min(260px,100%);justify-self:center}.measure{font-size:var(--t1)}}   /* the plate itself narrow: a phone, or a narrow two-column page */
/* the six stops as a line across the plate: plain dots on a rail, this stop lit, the names on hover and focus */
.line{border-top:1px solid var(--line);padding-top:var(--s3)}
.line ol{list-style:none;position:relative;display:flex;justify-content:space-between;margin:0;padding-bottom:26px}
.line ol::before{content:"";position:absolute;left:22px;right:22px;top:20px;height:4px;background:color-mix(in oklab,var(--route) 62%,var(--tunnel))}
.line a{position:relative;display:block;width:44px;height:44px;border-radius:50%}
.line a::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;background:var(--stainless);border:3px solid var(--fg2)}
.line .here a::before{width:22px;height:22px;background:var(--platform);border:4px solid var(--tunnel)}
.line a::after{content:attr(data-name);position:absolute;left:50%;top:40px;transform:translateX(-50%);font-size:var(--t1);font-weight:700;color:var(--fg);white-space:nowrap;opacity:0}
.line .here a::after,.line a:hover::after,.line a:focus-visible::after{opacity:1}
.line li:first-child a::after{left:0;transform:none}
.line li:last-child a::after{left:auto;right:0;transform:none}
.line a:focus-visible{outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.line a::before{transition:border-color var(--fast) var(--ease)}.line a:hover::before{border-color:var(--fg)}}
@media (max-width:860px),(max-aspect-ratio:5/6) and (max-width:1100px){   /* a phone, or a tall narrow window: one column (sr.js tests the same) */
  .piece-top{grid-template-columns:1fr;min-height:0}
  /* on a phone the frames are a strip to swipe; the tabs sit under it and follow the swipe */
  .photo{position:static;aspect-ratio:auto;max-height:none;overflow:visible;background:none}
  .shots{position:static;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;background:var(--car)}
  .shots::-webkit-scrollbar{display:none}
  .shot{position:relative;inset:auto;flex:0 0 100%;aspect-ratio:3/4;opacity:1;scroll-snap-align:start;transition:none}   /* relative, so the wears note stays on its frame */
  .views{position:static;padding:10px max(20px,env(safe-area-inset-left)) 12px;background:none;border-radius:0}
  .plate{padding:var(--s3) max(20px,env(safe-area-inset-left)) var(--s4)}
  .put{justify-self:stretch}   /* under the thumb */
}

/* ---------------------------------------------------------------- lookbook */
.book{padding-top:var(--s4);padding-bottom:var(--s5)}
.book-h{display:flex;justify-content:space-between;align-items:end;gap:var(--s2);flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:var(--s2);margin-bottom:var(--s3)}
.book h1{font-size:var(--t5);font-weight:700}
.book-h p{font-size:var(--t2);color:var(--fg2);max-width:60ch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.grid figure{position:relative;background:var(--car);overflow:hidden;aspect-ratio:2/3}
.grid figure.wide{grid-column:span 2;aspect-ratio:auto}
.grid img{width:100%;height:100%;object-fit:cover}
.grid figcaption{position:absolute;left:12px;bottom:10px;right:12px;font-size:var(--t2);font-weight:700;color:var(--bone);text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.8)}
.grid a{display:block;height:100%;position:relative}
@media (hover:hover) and (pointer:fine){.grid img{transition:transform .5s var(--ease)}.grid a:hover img{transform:scale(1.03)}}
@media (max-width:720px){.grid{grid-template-columns:1fr 1fr}.grid figure.wide{grid-column:1/-1}}

/* ---------------------------------------------------------------- short pages: about, alerts, bag */
.st-line{--band:var(--route)}   /* the short pages wear the line's colour, as the piece pages wear their stop's */
.short{max-width:64ch;padding-top:var(--s5);padding-bottom:var(--s6);display:grid;gap:var(--s3);align-content:start}
.short p{text-wrap:balance}
.short h1{font-size:var(--t6);font-weight:700;letter-spacing:-.02em}
.short h2{font-size:var(--t4);font-weight:700;margin-top:var(--s2)}
.short p,.short li{color:color-mix(in oklab,var(--bone) 86%,var(--steel))}
.short ul{list-style:disc;padding-left:1.2em;display:grid;gap:6px}
.short a{border-bottom:1px solid var(--steel)}
@media (hover:hover) and (pointer:fine){.short a:hover{border-bottom-color:var(--platform)}}
.short form{display:grid;gap:12px;margin-top:var(--s1)}
.short label{font-size:var(--t2);font-weight:700;color:var(--fg2)}
.short input{font:inherit;height:52px;background:var(--car);color:var(--fg);border:1.5px solid var(--steel);border-radius:3px;padding:0 14px}
.short input:focus-visible{border-color:var(--bone);outline:3px solid var(--platform);outline-offset:2px}
.short small{font-size:var(--t2);color:var(--fg2)}
.ok{background:var(--car);border-left:4px solid var(--platform);padding:12px 14px;font-weight:700}
.short .bag-lines{list-style:none;padding-left:0;display:grid;border-top:1px solid var(--line)}
.bag-lines li{display:grid;grid-template-columns:56px 1fr auto auto auto;gap:var(--s2);align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bag-lines .pic{width:56px;height:84px;background:var(--car);border-radius:2px;overflow:hidden}
.bag-lines .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bag-lines .n a{font-weight:700;border-bottom:1px solid var(--steel)}
@media (max-width:520px){.bag-lines li{grid-template-columns:56px 1fr auto;grid-template-areas:"img n pr" "img sz rm";gap:6px var(--s2)}.bag-lines .pic{grid-area:img}.bag-lines .n{grid-area:n}.bag-lines .sz{grid-area:sz}.bag-lines .pr{grid-area:pr;justify-self:end}.bag-lines button{grid-area:rm;justify-self:end}}
.acts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.short .sign{max-width:380px}
.short .sign:not(:has(.lit[d])) svg{visibility:hidden}
.stops{width:100%;border-collapse:collapse;font-size:var(--t2);font-variant-numeric:tabular-nums lining-nums}
.stops th,.stops td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.stops thead th{font-weight:700;color:var(--fg2)}
.stops tbody th{font-weight:700}
.stops td:last-child,.stops th:last-child{text-align:right;padding-right:0}
.stops td:last-child{color:var(--platform);font-weight:700}
.colophon{border-top:1px solid var(--line);padding-top:var(--s3);display:grid;gap:12px}
.colophon p{font-size:var(--t2);color:var(--fg2)}
.book .linkbtn{margin-top:var(--s4)}
.bag-lines .sz{color:var(--fg2);font-size:var(--t2)}
.bag-lines .pr{font-weight:700;font-variant-numeric:tabular-nums;color:var(--platform)}
.bag-lines button{font-size:var(--t2);font-weight:700;color:var(--fg2);padding:8px 10px;min-height:44px;border:1px solid var(--steel);border-radius:3px}
.bag-lines button:hover{color:var(--fg)}
.total{display:flex;justify-content:space-between;font-size:var(--t4);font-weight:700;padding-top:var(--s2)}
.total b{color:var(--platform);font-variant-numeric:tabular-nums}
.empty{color:var(--fg2)}
.linkbtn{display:inline-block;height:52px;line-height:52px;padding:0 var(--s3);background:var(--platform);color:var(--tunnel);font-weight:700;border-radius:3px;border:0;justify-self:start}
@media (hover:hover) and (pointer:fine){.put:hover,.linkbtn:hover{background:color-mix(in oklab,var(--platform) 85%,white)}}
.put:disabled,.linkbtn:disabled{opacity:.45;cursor:not-allowed}
.put:active,.linkbtn:active{transform:translateY(1px)}
.quiet{font-size:var(--t2);font-weight:700;color:var(--fg2);padding:10px 0;justify-self:start;border-bottom:1px solid var(--line)}

/* ---------------------------------------------------------------- toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,16px);background:var(--bone);color:var(--tunnel);padding:12px 18px;border-radius:4px;font-weight:700;font-size:var(--t2);opacity:0;pointer-events:none;max-width:calc(100vw - 40px);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------------------------------------------------------------- between pages */
/* The pages hand over through the browser's view transition: the bar holds still, the page under it
   cross-fades, and the piece's photograph travels, from the poster on the wall or a frame in the
   lookbook into the gallery, and back into its frame. The gallery's frame on show carries the name
   from here; sr.js and ride.js hand it to the frame in play on the way out and the way in. A browser
   without the feature turns the page the plain way. */
@view-transition{navigation:auto}
.bar{view-transition-name:bar}
.piece .shot:first-child img{view-transition-name:piece}
.photo:has(.view input[value="2"]:checked) .shot:first-child img,.photo:has(.view input[value="3"]:checked) .shot:first-child img{view-transition-name:none}
.photo:has(.view input[value="2"]:checked) .shot:nth-child(2) img,.photo:has(.view input[value="3"]:checked) .shot:nth-child(3) img{view-transition-name:piece}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.3s;animation-timing-function:ease-in-out}
::view-transition-group(piece),::view-transition-old(piece),::view-transition-new(piece){animation-duration:.55s;animation-timing-function:cubic-bezier(.45,.05,.25,1)}   /* the photograph lifts off and settles; the house ease-out would land it in a blink */
::view-transition-old(piece),::view-transition-new(piece){height:100%;object-fit:cover}
::view-transition-old(piece):only-child,::view-transition-new(piece):only-child{animation-duration:.25s}   /* a photograph with no frame to go to fades with the page */   /* the two frames differ in shape a little; both fill the travelling box */

/* ---------------------------------------------------------------- motion and print */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .grain{display:none}
}
@media print{
  :root{--fg:#000;--fg2:#333;--line:#999;--bg:#fff}
  .bar,.sign,.toast,.skip,.menu,.put,.demo,.ride,.grain,.window::before,.views{display:none!important}
  .photo{position:static;aspect-ratio:auto;max-height:none}
  .shots,.shot{position:static;opacity:1}
  body{background:#fff;color:#000}
  .window{height:auto;min-height:0;max-height:none}
  .hero,.band{position:static}
  .disp,.lead{text-shadow:none}
  .plate{--bg:#fff;--fg:#000;padding:0}
  .map{padding:0;grid-template-columns:1fr}
  .map li{height:auto}
  .map li::before,.map::before,.map::after,.stop::before,.stop .k{display:none}
  .stop{position:static;transform:none;width:auto;height:auto;display:flex;gap:8px;padding:4px 0}
  .stop .n,.map li.here .stop .n{position:static;transform:none;color:#000;font-size:1.25rem}
  .stop .p{display:block;color:#000}
  .lead,.hint,.strip-h,.strip-h a,.foot,.foot a,.go,.spec dt,.stopline,.demo,.line a::after{color:#000}
  .stopline .tab{background:none;color:#000;border-left-color:#000}
  .go,.strip-h a,.foot a{border-color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}