/* torzonmarketlinks.online - a collection of the things you actually see on screen.
   Built to the supplied reference: a museum longread. Light grey page, one narrow
   reading column, flat bright accents, pill buttons, category tag, captions under
   every plate, and full width colour bands that break out of the reading column.
   No shadows anywhere, no gradients, no rounded cards.
   Type is Gill Sans MT over Candara, neither of which is used elsewhere here. */

:root{
  /* grey */
  --grey-50:#f3f3f3; --grey-100:#e7e7e7; --grey-200:#d4d4d4; --grey-300:#b4b4b4;
  --grey-500:#7c7c7c; --grey-700:#4a4a4a; --grey-900:#191919;
  /* night blue */
  --night-100:#7a5f8c; --night-300:#5b3d70; --night-500:#452258; --night-700:#361048;
  --night-900:#290340;
  /* electric */
  --electric:#0d17f5; --electric-700:#0a11c2; --electric-100:#dcdeff;
  /* lime */
  --lime-100:#c9f708; --lime-300:#b3dd07; --lime-700:#7d9a05;
  /* salmon and cyan */
  --salmon:#f2bab0; --salmon-100:#fae4e0; --cyan:#0dedf7; --cyan-100:#d3fbfd;

  --col:868px;
  --head:"Gill Sans MT","Gill Sans Nova","Gill Sans","Lato","Noto Sans",sans-serif;
  --body:"Candara","Optima","Segoe UI","Noto Sans",sans-serif;
  --mono:"Consolas","DejaVu Sans Mono","Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--grey-50);color:var(--grey-900);
  font:16px/1.65 var(--body);
  overflow-x:hidden; /* the bands are wider than the column on purpose */
}
img{max-width:100%;height:auto}

.col{width:var(--col);max-width:100%;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.top{background:var(--night-900);color:#fff}
.top .col{padding-top:20px;padding-bottom:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{width:38px;height:38px;display:block}
.brand .who{display:block;min-width:0}
.brand b{display:block;font:600 clamp(19px,2.4vw,23px)/1.25 var(--head);letter-spacing:.01em}
.brand i{display:block;margin-top:2px;font:400 14px/1.4 var(--body);font-style:normal;
  color:var(--night-100)}
.nav{display:flex;flex-wrap:wrap;gap:0 26px;margin:16px 0 0;padding:0 0 2px;list-style:none}
.nav li{margin:0}
.nav a{display:inline-block;padding:9px 0 13px;color:#fff;text-decoration:none;
  font:600 15px/1.2 var(--head);border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--lime-100)}
.nav a.on{border-bottom-color:var(--cyan)}

/* ---------- article head ---------- */
.tag{display:inline-block;background:var(--salmon);color:var(--night-900);
  padding:5px 11px;font:600 12.5px/1.3 var(--head);letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;border-radius:0;margin:34px 0 14px}
a.tag:hover{background:var(--night-900);color:var(--salmon)}

h1{font:600 clamp(32px,5vw,46px)/1.12 var(--head);margin:0 0 16px;letter-spacing:-.01em}
.stand{font:400 clamp(17px,2.2vw,20px)/1.55 var(--body);color:var(--grey-700);margin:0 0 26px}
.byline{font:400 14px/1.5 var(--body);color:var(--grey-500);
  border-top:1px solid var(--grey-200);border-bottom:1px solid var(--grey-200);
  padding:12px 0;margin:0 0 34px}

h2{font:600 clamp(26px,3.6vw,38px)/1.18 var(--head);margin:46px 0 14px;letter-spacing:-.01em}
h3{font:600 clamp(20px,2.6vw,25px)/1.28 var(--head);margin:34px 0 10px}
p{margin:0 0 18px}
a{color:var(--electric);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
a:hover{color:var(--night-900)}
strong,b{font-weight:600}
ul,ol{margin:0 0 20px;padding-left:22px}
li{margin-bottom:9px}
code{font:.92em var(--mono);background:var(--grey-100);padding:2px 5px}

/* ---------- the plate: this site has no photographs, so the specimen itself
   is set as a plate and captioned the way a photograph would be ---------- */
.plate{background:var(--night-900);color:#e9e4ee;padding:24px 26px;margin:26px 0 8px;
  font:14.5px/1.85 var(--mono);word-break:break-all;overflow-x:auto}
.plate.pale{background:#fff;color:var(--grey-900);border:0}
.plate .lo{color:var(--night-100)}
.plate .hi{background:var(--lime-100);color:var(--night-900);padding:1px 2px}
.plate .no{background:var(--salmon);color:var(--night-900);padding:1px 2px}
.plate .cy{color:var(--cyan)}
.plate i{font-style:normal;color:var(--grey-500)}
.cap{font:400 13.5px/1.5 var(--body);color:var(--grey-500);margin:0 0 30px}
.cap b{color:var(--grey-700);font-weight:600}

/* ---------- the label: four facts, the way a case card carries them ------- */
.label{border-top:3px solid var(--night-900);margin:0 0 34px}
.label div{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid var(--grey-200)}
.label dt{flex:0 0 33%;margin:0;font:600 13px/1.5 var(--head);letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey-500)}
.label dd{flex:1 1 auto;margin:0;font:400 16px/1.5 var(--body)}

/* ---------- callout ---------- */
.aside{background:var(--salmon-100);padding:22px 26px;margin:30px 0}
.aside h4{font:600 15px/1.3 var(--head);letter-spacing:.07em;text-transform:uppercase;
  margin:0 0 10px;color:var(--night-900)}
.aside p:last-child{margin-bottom:0}
.aside.cy{background:var(--cyan-100)}
.aside.el{background:var(--electric-100)}

/* ---------- full width colour band ----------
   The reference does this with box-shadow: 0 0 0 1200px, which also needs a
   clip-path, because a spread that large paints 1200px above and below as well
   and floods the page. Breaking out of the reading column with margins gives
   the same result and cannot fail that way, so it is done here instead. */
.band{width:100vw;margin:52px 0 52px calc(50% - 50vw);padding:44px 0;
  color:#fff;background:var(--night-900)}
.band > .col{width:var(--col);max-width:100%;margin:0 auto;padding:0 20px}
.band.cy{background:var(--cyan);color:var(--night-900)}
.band.lime{background:var(--lime-100);color:var(--night-900)}
.band h2{margin-top:0}
.band a{color:inherit}
.band p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.pill{display:inline-block;border-radius:24px;padding:12px 24px;text-decoration:none;
  font:600 15px/1.2 var(--head);border:0;cursor:pointer}
.pill.blue{background:var(--electric);color:#fff}
.pill.blue:hover{background:var(--electric-700);color:#fff}
.pill.lime{background:var(--lime-100);color:var(--night-900)}
.pill.lime:hover{background:var(--lime-300)}
.pill.ink{background:var(--night-900);color:#fff}
.pill.ink:hover{background:var(--night-700);color:#fff}

/* ---------- the addresses ---------- */
.keys{margin:30px 0 34px}
.keys .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#fff;
  padding:12px 14px;margin-bottom:8px}
.keys code{flex:1 1 320px;min-width:0;background:none;padding:0;font-size:13.5px;
  word-break:break-all;line-height:1.5}
.keys button{flex:none}

/* ---------- lists of pages ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:0 30px}
.cards a{display:block;text-decoration:none;color:inherit;padding:20px 0;
  border-top:1px solid var(--grey-300)}
.cards a:hover b{color:var(--electric);text-decoration:underline}
.cards b{display:block;font:600 19px/1.3 var(--head);margin-bottom:6px}
.cards span{display:block;font:400 14.5px/1.5 var(--body);color:var(--grey-700)}

.runs{margin:26px 0 34px;padding:0;list-style:none}
.runs li{border-top:1px solid var(--grey-300);padding:0;margin:0}
.runs li:last-child{border-bottom:1px solid var(--grey-300)}
.runs a{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:15px 2px;
  text-decoration:none;color:inherit}
.runs a:hover b{color:var(--electric);text-decoration:underline}
.runs b{flex:0 0 auto;font:600 18px/1.35 var(--head)}
.runs span{flex:1 1 240px;font:400 14.5px/1.5 var(--body);color:var(--grey-700)}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:0 0 26px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
th,td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;
  border-bottom:1px solid var(--grey-200)}
th{font:600 13px/1.4 var(--head);letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-500);border-bottom:2px solid var(--night-900)}

/* ---------- prev / next ---------- */
.pn{display:flex;flex-wrap:wrap;gap:26px;margin:46px 0 0;
  border-top:1px solid var(--grey-300);padding-top:22px}
.pn a{flex:1 1 250px;text-decoration:none;color:inherit}
.pn em{display:block;font:600 12px/1.4 var(--head);letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey-500);font-style:normal;margin-bottom:6px}
.pn b{font:600 19px/1.3 var(--head);color:var(--electric)}
.pn a:hover b{text-decoration:underline}

.crumb{font:400 14px/1.5 var(--body);color:var(--grey-500);margin:22px 0 0}
.crumb a{color:var(--grey-700)}

/* ---------- footer ---------- */
.foot{background:var(--night-900);color:#cfc4d8;margin-top:60px;padding:44px 0 46px}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.foot h5{font:600 13px/1.3 var(--head);letter-spacing:.09em;text-transform:uppercase;
  color:#fff;margin:0 0 12px}
.foot a{display:block;color:#cfc4d8;text-decoration:none;font-size:14.5px;padding:4px 0}
.foot a:hover{color:var(--lime-100);text-decoration:underline}
.foot .fine{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--night-500);
  font-size:13.5px;color:var(--night-100)}

@media (max-width:640px){
  body{font-size:15.5px}
  .label div{display:block}
  .label dt{margin-bottom:4px}
  .plate{padding:16px 14px;font-size:13px}
}

/* ================= motion =================
   Editorial rather than showy: things arrive as you reach them, the marks on a
   plate get drawn in like a highlighter, and the reading position sits in a
   thin rule at the top. Everything is opt out under prefers-reduced-motion,
   and nothing here uses a shadow or a gradient. */

/* reading position */
/* lime rather than the link blue, because the bar sits over the dark header
   at the top of the page and blue on that is close to invisible */
.prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--lime-100);
  z-index:70;transition:width .12s linear}

/* arrive on scroll */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.8,.3,1)}
.rise.in{opacity:1;transform:none}

/* the page head arrives on load rather than on scroll */
@keyframes headin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tag,h1,.stand,.byline{animation:headin .5s cubic-bezier(.22,.8,.3,1) both}
h1{animation-delay:.05s}
.stand{animation-delay:.1s}
.byline{animation-delay:.15s}

/* highlighter marks on a plate get drawn left to right once it is on screen */
.plate .hi,.plate .no{clip-path:inset(0 100% 0 0);
  transition:clip-path .5s cubic-bezier(.22,.8,.3,1)}
.plate.in .hi,.plate.in .no{clip-path:inset(0 0 0 0)}
.plate.in .no{transition-delay:.12s}

/* nav underline grows out of the middle */
.nav a{position:relative;border-bottom-color:transparent}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--lime-100);transform:scaleX(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.22,.8,.3,1)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.on::after{background:var(--cyan);transform:scaleX(1)}

/* links get a thicker rule under them rather than a colour change alone */
a{transition:color .18s ease,text-decoration-thickness .18s ease}
a:hover{text-decoration-thickness:3px}
.tag{transition:background .2s ease,color .2s ease}

/* buttons */
.pill{transition:background .18s ease,transform .12s ease}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0)}
.keys button.done{background:var(--electric);color:#fff}

/* rows nudge toward the reader */
.runs a,.cards a{transition:background .2s ease}
.runs b,.cards b{transition:transform .22s cubic-bezier(.22,.8,.3,1)}
.runs a:hover,.cards a:hover{background:#fff}
.runs a:hover b,.cards a:hover b{transform:translateX(5px)}
.runs a{padding-left:8px;padding-right:8px}

/* the address rows lift very slightly, which is the only hint of depth here */
.keys .row{transition:transform .18s ease}
.keys .row:hover{transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  .rise,.rise.in{opacity:1;transform:none;transition:none}
  .tag,h1,.stand,.byline{animation:none}
  .plate .hi,.plate .no{clip-path:none;transition:none}
  .nav a::after{transition:none}
  .pill:hover,.runs a:hover b,.cards a:hover b,.keys .row:hover{transform:none}
  .prog{transition:none}
}