/* werkstatt design tokens, v1.1 (october 2026) */
:root{
  /* core palette */
  --red:#D93A2B;
  --yellow:#F4B81B;
  --blue:#1E4FA0;
  --ink:#161616;
  --paper:#EDEAE2;
  --white:#FAFAF7;
  --grey:#B9B6AE;

  /* semantic roles */
  --bg:var(--paper);
  --surface:var(--white);
  --text:var(--ink);
  --border:var(--ink);
  --action:var(--red);
  --on-action:var(--white);
  --emphasis:var(--yellow);
  --on-emphasis:var(--ink);
  --structure:var(--blue);
  --on-structure:var(--white);
  --inverse-bg:var(--ink);
  --inverse-text:var(--white);
  --inverse-accent:var(--yellow);
  --muted:var(--grey);

  /* type */
  --font:Poppins,Jost,Futura,'Century Gothic','Avenir Next',sans-serif;
  --fs-display:clamp(48px,8vw,96px);
  --fs-h1:clamp(40px,5vw,56px);
  --fs-h2:32px;
  --fs-h3:24px;
  --fs-body:18px;
  --fs-small:15px;
  --fs-caption:13px;
  --lh-tight:1;
  --lh-heading:1.08;
  --lh-body:1.45;
  --track-display:-0.03em;
  --track-heading:-0.02em;

  /* space, 8-point base */
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:64px;
  --s7:96px;

  /* surfaces */
  --radius:0;
  --rule:3px solid var(--border);
  --rule-thin:2px solid var(--border);
  --shadow:none;

  /* layout */
  --max:1200px;
  --gutter:24px;
  --margin:40px;

  /* motion */
  --fast:120ms;
  --base:200ms;
  --slow:320ms;
  --ease:cubic-bezier(.2,0,0,1);

  /* layers */
  --z-menu:20;
  --z-toast:30;
  --z-dialog:40;

  /* focus */
  --focus:3px solid var(--blue);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(44px,8vw,104px);letter-spacing:-.05em;line-height:.95}
h2{font-size:clamp(30px,4.5vw,52px);letter-spacing:-.04em}
h3{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.02em}
h4{font-size:18px;font-weight:700;letter-spacing:-.01em}
p,ul,ol{margin:0}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:not([class]):hover{background:var(--yellow)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.top{background:var(--surface);border-bottom:var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:24px;letter-spacing:-.03em}
.brand small{font-weight:500;font-size:14px;letter-spacing:0;border-left:3px solid var(--ink);padding-left:12px;line-height:1.2}
.topmeta{font-size:14px;font-weight:600}
.strip{background:var(--surface);border-bottom:var(--rule)}
.strip ul{list-style:none;margin:0 auto -3px;padding:3px 0 0 calc(clamp(16px,4vw,40px) + 3px);display:flex;flex-wrap:wrap;max-width:var(--max)}
.strip li{margin:-3px 0 0 -3px}
.strip a{display:block;padding:13px 16px;font-weight:700;font-size:15px;text-decoration:none;border:var(--rule);white-space:nowrap;background:var(--surface)}
.strip a[aria-current="page"]{background:var(--yellow)}
.strip a:hover{background:var(--yellow)}
@media(max-width:719px){.strip{overflow-x:auto;-webkit-overflow-scrolling:touch}.strip ul{flex-wrap:nowrap;min-width:max-content;padding-right:16px}}
.hero{padding:clamp(40px,7vw,96px) 0 clamp(28px,4vw,48px);border-bottom:var(--rule)}
.hero .wrap{display:flex;flex-direction:column;gap:20px}
.hero--split .wrap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:32px}
.hero--split .text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.hero--split .art{flex:1 1 360px;min-width:0}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;max-width:52ch}
.sec{padding:clamp(40px,6vw,72px) 0;border-bottom:var(--rule)}
.sec .wrap{display:flex;flex-direction:column;gap:28px}
.sec-head{display:flex;flex-direction:column;gap:10px}
.sec-head p{max-width:62ch;font-size:18px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:16px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.box{border:var(--rule);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:10px}
.box h3{font-size:22px}
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tile{border:var(--rule);padding:22px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;text-decoration:none}
.tile b{font-size:26px;letter-spacing:-.03em;line-height:1.05}
.tile span{font-size:15px}
.tile:hover{outline:3px solid var(--ink);outline-offset:3px}
.rule-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rule-list li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4}
.rule-list li b{display:block}
.rule-list i{flex:none;width:18px;height:18px;margin-top:5px;display:block;background:var(--ink)}
.i-red{background:var(--red)} .i-yellow{background:var(--yellow)} .i-blue{background:var(--blue)} .i-circle{border-radius:50%}
.i-tri{width:0!important;height:0!important;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid var(--yellow);background:none!important}
.tag-do,.tag-dont{display:inline-block;padding:3px 10px;font-weight:700;font-size:13px;line-height:1.4;align-self:flex-start}
.tag-do{background:var(--blue);color:var(--white)} .tag-dont{background:var(--red);color:var(--white)}
pre{margin:0;border:var(--rule);background:var(--ink);color:var(--white);padding:18px;overflow-x:auto;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
p code,li code,td code{background:var(--surface);border:1px solid var(--ink);padding:1px 5px}
.tbl{overflow-x:auto;border:var(--rule);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:2px solid var(--ink);vertical-align:top}
th{background:var(--ink);color:var(--white);font-weight:700}
tr:last-child td{border-bottom:0}
.sw{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:150px;padding:14px;border:var(--rule);font-weight:700;line-height:1.3}
.sw span{font-weight:500;font-size:14px}
.ratio{display:flex;border:var(--rule);height:56px}
.ratio i{display:block;border-right:3px solid var(--ink)} .ratio i:last-child{border-right:0}
.ratio-key{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;font-weight:600}
.ratio-key i{display:inline-block;width:14px;height:14px;border:2px solid var(--ink);vertical-align:-2px;margin-right:6px}
.pill{display:inline-block;border:var(--rule);padding:4px 10px;font-weight:700;font-size:13px;line-height:1.3;background:var(--surface)}
.pass{background:var(--blue);color:var(--white)} .large{background:var(--yellow);color:var(--ink)} .fail{background:var(--red);color:var(--white)}
.demo{border:var(--rule);background:var(--paper);padding:24px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.demo--stack{flex-direction:column;align-items:stretch}
.demo--dark{background:var(--ink);color:var(--white)}
.spec{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.spec{grid-template-columns:1.25fr 1fr}}
.note{font-size:15px;max-width:60ch}
.mark-box{border:var(--rule);display:flex;align-items:center;justify-content:center;padding:28px;min-height:170px}
.inverse{background:var(--ink);color:var(--white)}
footer{padding:40px 0 64px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer b{display:block;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);padding:10px 14px;border:var(--rule);font-weight:700}
.skip:focus{left:8px;z-index:9}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* components (ws-) */
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:var(--rule);background:var(--surface);color:var(--ink);font:700 17px/1 var(--font);text-decoration:none;cursor:pointer;border-radius:0;transition:background var(--fast)}
.ws-btn--primary{background:var(--red);color:var(--white)}
.ws-btn--emphasis{background:var(--yellow);color:var(--ink)}
.ws-btn--dark{background:var(--ink);color:var(--yellow)}
.ws-btn--small{min-height:40px;padding:0 16px;font-size:15px}
.ws-btn:hover{background:var(--yellow);color:var(--ink)}
.ws-btn:active{background:var(--ink);color:var(--yellow)}
.ws-btn:disabled,.ws-btn[aria-disabled="true"]{background:var(--paper);border-color:var(--grey);color:#6B6B6B;cursor:not-allowed}
.ws-field{display:flex;flex-direction:column;gap:6px;width:100%;max-width:360px}
.ws-field label{font-weight:700;font-size:15px}
.ws-input{width:100%;min-height:52px;padding:10px 14px;border:var(--rule);background:var(--surface);color:var(--ink);font:500 17px var(--font);border-radius:0;appearance:none}
.ws-input:focus{outline:none;box-shadow:inset 0 -5px 0 var(--blue)}
.ws-input::placeholder{color:#6B6B6B}
.ws-field--error .ws-input{border-color:var(--red);box-shadow:inset 0 -5px 0 var(--red)}
.ws-hint{font-size:14px;line-height:1.4}
.ws-hint--error{font-weight:700;display:flex;gap:8px;align-items:center}
.ws-hint--error::before{content:"";width:12px;height:12px;background:var(--red);flex:none}
.ws-select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 14px) 50%;background-size:8px 8px;background-repeat:no-repeat;padding-right:44px}
.ws-tag{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:var(--rule);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none}
.ws-tag--yellow{background:var(--yellow)} .ws-tag--blue{background:var(--blue);color:var(--white)} .ws-tag--red{background:var(--red);color:var(--white)} .ws-tag--ink{background:var(--ink);color:var(--white)}
.ws-card{border:var(--rule);background:var(--surface);display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.ws-card__band{height:16px;background:var(--red);flex:none}
.ws-card__media{display:block;border-bottom:var(--rule);width:100%}
.ws-card__body{padding:20px;display:flex;flex-direction:column;gap:10px}
.ws-card__body h3{font-size:22px}
.ws-choice{display:flex;align-items:center;gap:12px;font-weight:600;min-height:44px;cursor:pointer}
.ws-check,.ws-radio{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:var(--rule);background:var(--surface);margin:0;flex:none;cursor:pointer;display:grid;place-content:center}
.ws-radio{border-radius:50%}
.ws-check::before{content:"";width:14px;height:14px;background:var(--ink);transform:scale(0)}
.ws-check:checked::before{transform:scale(1)}
.ws-radio::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--red);transform:scale(0)}
.ws-radio:checked::before{transform:scale(1)}
.ws-toggle{appearance:none;-webkit-appearance:none;width:86px;height:44px;border:var(--rule);background:var(--surface);margin:0;position:relative;cursor:pointer;flex:none}
.ws-toggle::before{content:"";position:absolute;top:5px;left:5px;width:28px;height:28px;border-radius:50%;background:var(--ink);transition:left var(--fast)}
.ws-toggle:checked{background:var(--yellow)} .ws-toggle:checked::before{left:47px}
.ws-progress{border:var(--rule);height:24px;background:var(--surface);width:100%;max-width:360px}
.ws-progress i{display:block;height:100%;background:var(--blue)}
.ws-alert{border:var(--rule);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;background:var(--yellow);color:var(--ink);max-width:560px}
.ws-alert--info{background:var(--blue);color:var(--white)} .ws-alert--error{background:var(--red);color:var(--white)} .ws-alert--plain{background:var(--surface)}
.ws-alert b{display:block;font-size:17px;line-height:1.2;margin-bottom:2px}
.ws-alert p{font-size:15px}
.ws-alert svg{flex:none;margin-top:2px}
.ws-tabbar{display:flex;border:var(--rule);background:var(--surface);width:100%;max-width:390px}
.ws-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;text-decoration:none;font-size:12px;font-weight:700;border-right:var(--rule);color:var(--ink)}
.ws-tabbar a:last-child{border-right:0} .ws-tabbar a[aria-current="page"]{background:var(--yellow)}
.ws-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px 20px;border:var(--rule);background:var(--surface);width:100%}
.ws-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;font-weight:600;align-items:center}
.ws-nav ul a{text-decoration:none;padding:10px 0}
.ws-pager{display:flex;border:var(--rule);background:var(--surface);width:max-content}
.ws-pager a{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 6px;text-decoration:none;font-weight:700;border-right:var(--rule);color:var(--ink)}
.ws-pager a:last-child{border-right:0} .ws-pager a[aria-current="page"]{background:var(--ink);color:var(--yellow)}
.ws-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.ws-table th{background:var(--ink);color:var(--white)} .ws-table th,.ws-table td{padding:12px 14px;border-bottom:2px solid var(--ink);text-align:left}
.ws-table tr:last-child td{border-bottom:0}
.ws-stat{border:var(--rule);background:var(--yellow);padding:18px;display:flex;flex-direction:column;gap:4px;min-width:160px}
.ws-stat b{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.ws-stat span{font-weight:600;font-size:14px}

/* mood board */
.board{columns:2 150px;column-gap:12px}
@media(min-width:720px){.board{columns:3}}
@media(min-width:1100px){.board{columns:4}}
.pin{break-inside:avoid;margin:0 0 12px;border:var(--rule);background:var(--surface);display:block;overflow:hidden}
.pin svg,.pin img{display:block;width:100%;height:auto}
.pin figcaption{padding:8px 10px 10px;font-size:13px;line-height:1.35;border-top:var(--rule);background:var(--surface)}
.pin figcaption b{display:block;font-size:14px;font-weight:700;margin-bottom:1px}
.pin .pad{padding:16px}
.pin .quote{font-weight:800;font-size:clamp(28px,4vw,44px);line-height:.95;letter-spacing:-.03em}
.pin .quote small{display:block;margin-top:14px;font-size:13px;font-weight:500;letter-spacing:0;line-height:1.35}
.pin .alpha{font-weight:700;font-size:112px;line-height:.8;letter-spacing:-.06em}
.pin .alpha-row{display:flex;gap:10px;align-items:flex-end}
.pin .alpha-row i{width:52px;height:52px;border-radius:50%;background:var(--red);display:block}
.pin .sw{min-height:0;padding:10px 12px;border:0;border-top:var(--rule);flex-direction:row;justify-content:space-between;align-items:flex-end;font-size:14px}
.pin .sw:first-child{border-top:0}
.matrow{display:grid;grid-template-columns:1fr 1fr} .matrow div{position:relative;height:84px} .matrow div+div{border-left:var(--rule)} .matrow+.matrow{border-top:var(--rule)}
.matrow span{position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:700;background:var(--surface);padding:1px 6px;border:1px solid var(--ink)}
.steel{background:linear-gradient(100deg,#8e949a,#eceff1 30%,#848b92 52%,#dde1e4 78%,#8e949a)}
.glass{background:repeating-linear-gradient(90deg,rgba(30,79,160,.35) 0 2px,transparent 2px 22px),repeating-linear-gradient(0deg,rgba(30,79,160,.35) 0 2px,transparent 2px 22px),linear-gradient(160deg,#cfe0ee,#f4f8fb)}
.ply{background:repeating-linear-gradient(0deg,#d9b27c 0 6px,#cfa36a 6px 8px,#dcb985 8px 15px,#c79a62 15px 16px)}
.conc{background:radial-gradient(circle at 20% 30%,#b9b8b3 0 18%,transparent 19%),radial-gradient(circle at 70% 60%,#a9a8a3 0 14%,transparent 15%),radial-gradient(circle at 45% 85%,#c4c3be 0 12%,transparent 13%),#b3b2ad}

/* image library */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{min-height:40px;padding:0 16px;border:var(--rule);background:var(--surface);font:700 15px var(--font);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--yellow)}
.lib{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.lib figure{margin:0;border:var(--rule);background:var(--surface);display:flex;flex-direction:column}
.lib img{display:block;width:100%;height:auto;border-bottom:var(--rule)}
.lib figcaption{padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}
.lib figcaption b{font-size:16px}
.lib .meta{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.lib .dl{display:flex;gap:12px;font-weight:700}
.lib .hidden{display:none}
.iconset{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.iconset figure{margin:0;border:var(--rule);background:var(--surface);padding:18px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.iconset svg{width:72px;height:72px}
.iconset figcaption{font-weight:700;font-size:14px;display:flex;flex-direction:column;gap:4px}
.iconset figcaption a{font-weight:500;font-size:13px}

/* examples */
.ex{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ex figure{margin:0;border:var(--rule);background:var(--surface);display:flex;flex-direction:column}
.frame{position:relative;overflow:hidden;background:var(--paper);border-bottom:var(--rule);width:100%}
.frame iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none;display:block;background:var(--white)}
.ex figcaption{padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}
.ex figcaption b{font-size:16px;display:block}

/* color wheel + logo helpers */
.wheel{display:flex;justify-content:center}
.wheel svg{width:100%;max-width:420px}
.lockup{display:flex;align-items:center;gap:14px;font-weight:800;font-size:40px;letter-spacing:-.04em;line-height:1}
.lockup--stack{flex-direction:column;align-items:flex-start;gap:10px}
.lockup svg{flex:none}
.space-scale{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.space-scale div{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:13px;font-weight:600}
.space-scale i{display:block;background:var(--blue);border:2px solid var(--ink)}
.gridemo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;border:var(--rule);background:var(--surface);padding:12px}
.gridemo i{display:block;min-height:40px}
.gridemo .c{background:#E3DFD5}
.typescale{display:flex;flex-direction:column}
.typescale > div{border-top:var(--rule-thin);padding:14px 0 12px;display:flex;flex-direction:column;gap:6px}
.typescale > div:last-child{border-bottom:var(--rule-thin)}
.typescale .meta{font-size:13px;font-weight:600}
.dod{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.dod .box{gap:12px} .dod svg{width:100%;height:auto;display:block;border:var(--rule-thin)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* journal */
.journal{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.jcard{border:var(--rule);background:var(--surface);display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.jcard:hover{outline:3px solid var(--ink);outline-offset:3px}
.jcard svg{display:block;width:100%;height:auto;border-bottom:var(--rule)}
.jcard div{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.jcard b{font-size:24px;letter-spacing:-.03em;line-height:1.05}
.jcard p{font-size:15px;line-height:1.45}
.jmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;font-weight:600;align-items:center}
.jmeta .ws-tag{min-height:26px;font-size:12px;padding:0 8px}
.hero--article .wrap{gap:16px}
.hero--article h1{font-size:clamp(38px,6.5vw,84px)}
.standfirst{font-size:clamp(19px,2.2vw,24px);line-height:1.4;max-width:60ch;font-weight:500}
.article{max-width:74ch;display:flex;flex-direction:column;gap:22px;font-size:19px;line-height:1.6}
.article h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;margin-top:14px;max-width:none}
.article p{max-width:none}
.article .lead{font-size:22px;line-height:1.5;font-weight:500}
.article figure{margin:8px 0;border:var(--rule);background:var(--surface)}
.article figure svg,.article figure img{display:block;width:100%;height:auto}
.article figcaption{padding:10px 14px;border-top:var(--rule);font-size:14px;line-height:1.45}
.article blockquote{margin:0;padding:18px 22px;border:var(--rule);border-left:14px solid var(--yellow);background:var(--surface);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.article blockquote span{display:block;font-size:14px;font-weight:500;letter-spacing:0;margin-top:8px}
.article ul,.article ol{padding-left:26px;display:flex;flex-direction:column;gap:10px}
.article li{padding-left:4px}
.article li b{font-weight:700}
.related{border:var(--rule);background:var(--yellow);padding:20px;display:flex;flex-direction:column;gap:8px;max-width:74ch}
.related b{font-size:18px}
.related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:600}
.anav{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-width:74ch}
.anav a{border:var(--rule);background:var(--surface);padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:4px}
.anav a:hover{background:var(--yellow)}
.anav small{font-size:13px;font-weight:600}
.anav b{font-size:20px;letter-spacing:-.02em;line-height:1.1}

/* controls */
.ws-tabs{border:var(--rule);background:var(--surface);width:100%}
.ws-tabs [role="tablist"]{display:flex;border-bottom:var(--rule);overflow-x:auto}
.ws-tabs [role="tab"]{min-height:48px;padding:0 20px;border:0;border-right:var(--rule);background:var(--surface);color:var(--ink);font:700 15px var(--font);cursor:pointer;white-space:nowrap}
.ws-tabs [role="tab"][aria-selected="true"]{background:var(--yellow)}
.ws-tabs [role="tabpanel"]{padding:20px;display:flex;flex-direction:column;gap:10px}
.ws-tabs [role="tabpanel"][hidden]{display:none}
.ws-acc{border:var(--rule);background:var(--surface);width:100%}
.ws-acc details+details{border-top:var(--rule)}
.ws-acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 20px;font-weight:700;cursor:pointer}
.ws-acc summary::-webkit-details-marker{display:none}
.ws-acc summary::after{content:"";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:12px solid var(--ink);flex:none;transition:transform var(--base) var(--ease)}
.ws-acc details[open]>summary::after{transform:rotate(180deg)}
.ws-acc details[open]>summary{background:var(--yellow)}
.ws-acc .body{padding:14px 20px 20px;max-width:62ch;display:flex;flex-direction:column;gap:10px}
.ws-menu{position:relative;display:inline-block}
.ws-menu>summary{list-style:none;cursor:pointer}
.ws-menu>summary::-webkit-details-marker{display:none}
.ws-menu ul{position:absolute;left:0;top:calc(100% + 8px);min-width:230px;margin:0;padding:0;list-style:none;border:var(--rule);background:var(--surface);z-index:var(--z-menu)}
.ws-menu li+li{border-top:var(--rule-thin)}
.ws-menu li a,.ws-menu li button{display:flex;width:100%;align-items:center;gap:10px;min-height:48px;padding:0 16px;text-decoration:none;font:600 15px var(--font);background:none;border:0;color:var(--ink);cursor:pointer;text-align:left}
.ws-menu li a:hover,.ws-menu li button:hover{background:var(--yellow)}
.ws-menu[open]>summary .ws-btn{background:var(--ink);color:var(--yellow)}
.ws-dialog{border:var(--rule);padding:0;background:var(--surface);color:var(--ink);width:min(520px,calc(100vw - 32px));font-family:var(--font)}
.ws-dialog::backdrop{background:rgba(22,22,22,.72)}
.ws-dialog__band{height:16px;background:var(--red)}
.ws-dialog__body{padding:24px;display:flex;flex-direction:column;gap:12px}
.ws-dialog__body h3{font-size:24px}
.ws-dialog__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;padding:0 24px 24px}
.ws-toast{position:fixed;left:16px;right:16px;bottom:16px;margin:0 auto;max-width:480px;border:var(--rule);background:var(--ink);color:var(--white);padding:12px 12px 12px 18px;display:none;align-items:center;gap:14px;z-index:var(--z-toast);font-weight:600;font-size:15px}
.ws-toast[data-show]{display:flex;animation:ws-rise var(--slow) var(--ease)}
.ws-toast b{color:var(--yellow);display:block}
.ws-toast .ws-btn{margin-left:auto}
@keyframes ws-rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.ws-tip{position:relative;display:inline-block}
.ws-tip>[role="tooltip"]{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);background:var(--ink);color:var(--white);padding:8px 12px;font-size:13px;font-weight:600;white-space:nowrap;border:var(--rule);opacity:0;pointer-events:none;transition:opacity var(--fast);z-index:var(--z-menu)}
.ws-tip:hover>[role="tooltip"],.ws-tip:focus-within>[role="tooltip"]{opacity:1}
.ws-crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-weight:600;font-size:15px;align-items:center}
.ws-crumbs li{display:flex;align-items:center;gap:8px}
.ws-crumbs li+li::before{content:"";width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid var(--red)}
.ws-crumbs a{text-decoration:none;padding:6px 0}
.ws-crumbs [aria-current="page"]{background:var(--yellow);padding:6px 8px}
.ws-steps{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;border:var(--rule);background:var(--surface);counter-reset:s;width:100%}
.ws-steps li{flex:1 1 150px;display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:600;font-size:14px;border-right:var(--rule);counter-increment:s;min-width:0}
.ws-steps li:last-child{border-right:0}
.ws-steps li::before{content:counter(s);flex:none;width:30px;height:30px;display:grid;place-content:center;border:var(--rule);font-weight:800;background:var(--surface)}
.ws-steps li.done::before{background:var(--ink);color:var(--yellow)}
.ws-steps li[aria-current="step"]{background:var(--yellow)}
.ws-badge{display:inline-grid;place-content:center;min-width:26px;height:26px;padding:0 7px;background:var(--red);color:var(--white);font-weight:800;font-size:13px;border:2px solid var(--ink);vertical-align:middle}
.ws-badge--ink{background:var(--ink);color:var(--yellow)}
.ws-badge--yellow{background:var(--yellow);color:var(--ink)}
.ws-avatar{display:inline-grid;place-content:center;width:48px;height:48px;border-radius:50%;background:var(--blue);color:var(--white);font-weight:800;font-size:18px;border:var(--rule);overflow:hidden;flex:none}
.ws-avatar--sm{width:32px;height:32px;font-size:12px}
.ws-avatar--lg{width:72px;height:72px;font-size:26px}
.ws-avatar--yellow{background:var(--yellow);color:var(--ink)}
.ws-avatar--red{background:var(--red)}
.ws-avatar--ink{background:var(--ink);color:var(--yellow)}
.ws-avatars{display:flex}
.ws-avatars .ws-avatar+.ws-avatar{margin-left:-12px}
.ws-skel{display:block;background:repeating-linear-gradient(90deg,var(--paper) 0 8px,#DDD8CC 8px 16px);border:var(--rule-thin);min-height:14px;animation:ws-shimmer .8s linear infinite}
@keyframes ws-shimmer{to{background-position:16px 0}}
.ws-search{display:flex;border:var(--rule);background:var(--surface);max-width:480px;width:100%}
.ws-search input{flex:1;min-width:0;border:0;min-height:52px;padding:0 14px;font:500 17px var(--font);background:transparent;color:var(--ink)}
.ws-search input:focus{outline:none;box-shadow:inset 0 -5px 0 var(--blue)}
.ws-search button{border:0;border-left:var(--rule);background:var(--yellow);min-width:56px;cursor:pointer;display:grid;place-content:center;padding:0}
.ws-search button:hover{background:var(--ink)}
.ws-seg{display:inline-flex;border:var(--rule);background:var(--surface);max-width:100%;overflow-x:auto}
.ws-seg label{position:relative;min-height:44px;padding:0 18px;display:flex;align-items:center;font-weight:700;font-size:15px;cursor:pointer;border-right:var(--rule);white-space:nowrap}
.ws-seg label:last-child{border-right:0}
.ws-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.ws-seg label:has(input:checked){background:var(--yellow)}
.ws-seg label:has(input:focus-visible){outline:var(--focus);outline-offset:-3px}
.ws-range{appearance:none;-webkit-appearance:none;width:100%;max-width:360px;height:28px;background:transparent;margin:0;cursor:pointer}
.ws-range::-webkit-slider-runnable-track{height:8px;background:var(--ink)}
.ws-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--red);border:var(--rule);margin-top:-10px}
.ws-range::-moz-range-track{height:8px;background:var(--ink)}
.ws-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--red);border:var(--rule)}
.ws-drop{border:3px dashed var(--ink);background:var(--surface);padding:28px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:480px;width:100%}
.ws-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 5px 0 12px;border:var(--rule);background:var(--surface);font-weight:600;font-size:14px}
.ws-chip button{width:26px;height:26px;border:0;background:var(--ink);color:var(--yellow);font:800 15px/1 var(--font);cursor:pointer;display:grid;place-content:center;padding:0}
.ws-chip button:hover{background:var(--red);color:var(--white)}
.ws-list{list-style:none;margin:0;padding:0;border:var(--rule);background:var(--surface);width:100%}
.ws-list li{display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px}
.ws-list li+li{border-top:var(--rule-thin)}
.ws-list .grow{flex:1;min-width:0}
.ws-list small{display:block;font-size:13px;font-weight:500}
.ws-dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0;border:var(--rule);background:var(--surface);padding:18px 20px;width:100%}
.ws-dl dt{font-weight:700}
.ws-dl dd{margin:0}
.ws-hr{border:0;border-top:var(--rule);margin:0;width:100%}
.ws-div{display:flex;gap:10px;align-items:flex-end;justify-content:center;width:100%;padding:8px 0}
.ws-div i{display:block;width:16px;height:16px;background:var(--red);border-radius:50%}
.ws-div i:nth-child(2){background:var(--blue);border-radius:0}
.ws-div i:nth-child(3){width:0;height:0;background:none;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid var(--yellow)}
.ws-empty{border:var(--rule);background:var(--surface);padding:40px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%}
.ws-empty p{max-width:36ch}
.ws-loading{display:inline-flex;gap:8px;align-items:flex-end}
.ws-loading i{display:block;width:16px;height:16px;background:var(--red);border-radius:50%;animation:ws-blink 1.2s linear infinite}
.ws-loading i:nth-child(2){background:var(--blue);border-radius:0;animation-delay:.2s}
.ws-loading i:nth-child(3){width:0;height:0;background:none;border-radius:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid var(--yellow);animation-delay:.4s}
@keyframes ws-blink{0%,100%{opacity:.2}50%{opacity:1}}
.ws-code{position:relative;width:100%}
.ws-code .ws-btn{position:absolute;right:10px;top:10px}
.ws-kbd{display:inline-block;border:2px solid var(--ink);padding:1px 7px;font:700 13px var(--font);background:var(--surface);box-shadow:inset 0 -3px 0 var(--ink)}
.ws-move{transition:transform var(--base) var(--ease)}
.ws-move:hover{transform:translateX(12px)}

/* patterns: website sections */
.pat{border:var(--rule);background:var(--surface);overflow:hidden;width:100%}
.ws-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:14px clamp(16px,4vw,32px);background:var(--surface);color:var(--ink)}
.ws-header ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;font-weight:600;align-items:center}
.ws-header ul a{text-decoration:none;padding:10px 0}
.ws-header ul a[aria-current="page"]{background:var(--yellow);padding:10px 12px}
.ws-header--dark{background:var(--ink);color:var(--white)}
.ws-header--dark ul a[aria-current="page"]{color:var(--ink)}
.ws-header--bar{border-top:12px solid var(--red)}
.ws-hero{display:flex;flex-wrap:wrap}
.ws-hero__text{flex:1 1 360px;min-width:0;padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.ws-hero__text h2{font-size:clamp(36px,6vw,80px);line-height:.95;letter-spacing:-.05em}
.ws-hero__art{flex:1 1 280px;min-width:0;min-height:240px;display:flex;align-items:center;justify-content:center;border-left:var(--rule);background:var(--red);padding:24px}
.ws-hero--type{padding:clamp(32px,6vw,80px) clamp(16px,4vw,40px);background:var(--ink);color:var(--white);display:flex;flex-direction:column;gap:20px}
.ws-hero--type h2{font-size:clamp(40px,8vw,112px);line-height:.92;letter-spacing:-.05em;color:var(--yellow);max-width:12ch}
.ws-hero--band{background:var(--yellow);padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.ws-hero--band h2{font-size:clamp(34px,5.5vw,72px);line-height:.95;letter-spacing:-.04em;max-width:14ch}
.ws-features{display:grid;gap:3px;background:var(--ink);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ws-features>div{background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:10px}
.ws-features h3{font-size:22px}
.ws-features svg{display:block}
.ws-stats{display:grid;gap:3px;background:var(--ink);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ws-stats div{background:var(--yellow);padding:20px;display:flex;flex-direction:column;gap:4px}
.ws-stats b{font-size:clamp(40px,6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:.9}
.ws-stats span{font-weight:600;font-size:14px}
.ws-quote{background:var(--blue);color:var(--white);padding:clamp(24px,5vw,56px) clamp(16px,4vw,40px);display:flex;flex-direction:column;gap:18px}
.ws-quote p{font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.2;max-width:28ch}
.ws-quote .who{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:600}
.ws-pricing{display:grid;gap:3px;background:var(--ink);grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ws-price{background:var(--surface);display:flex;flex-direction:column;padding:24px;gap:14px}
.ws-price--hero{background:var(--yellow)}
.ws-price .amt{font-size:48px;font-weight:800;letter-spacing:-.04em;line-height:1}
.ws-price .amt small{font-size:15px;font-weight:600;letter-spacing:0}
.ws-price ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.ws-price li{display:flex;gap:10px;align-items:center}
.ws-price li::before{content:"";width:10px;height:10px;background:var(--red);flex:none}
.ws-price .ws-btn{margin-top:auto;align-self:flex-start}
.ws-cta{background:var(--red);color:var(--white);padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.ws-cta h2{font-size:clamp(30px,4.5vw,56px);line-height:1;letter-spacing:-.04em;max-width:16ch}
.ws-newsletter{display:flex;flex-wrap:wrap;max-width:560px;width:100%}
.ws-newsletter input{flex:1 1 220px;min-width:0;min-height:52px;padding:0 14px;border:var(--rule);background:var(--surface);font:500 17px var(--font);color:var(--ink)}
.ws-newsletter input:focus{outline:none;box-shadow:inset 0 -5px 0 var(--blue)}
.ws-newsletter .ws-btn{flex:none;margin-left:-3px}
.ws-footer{background:var(--ink);color:var(--white);padding:clamp(28px,5vw,48px) clamp(16px,4vw,40px);display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ws-footer h4{color:var(--yellow);margin-bottom:10px}
.ws-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.ws-footer a{text-decoration:none}
.ws-footer--slim{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:14px}
.ws-form{display:flex;flex-direction:column;gap:18px;max-width:460px;width:100%}
.ws-form .ws-field{max-width:none}
.ws-form .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ws-login{background:var(--surface);padding:28px;display:flex;flex-direction:column;gap:18px}
.ws-gallery{display:grid;gap:3px;background:var(--ink);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ws-gallery figure{margin:0;background:var(--surface)}
.ws-gallery svg,.ws-gallery img{display:block;width:100%;height:auto}
.ws-gallery figcaption{padding:8px 10px;font-size:13px;font-weight:600;border-top:var(--rule)}
.ws-404{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:clamp(28px,5vw,56px) clamp(16px,4vw,40px);background:var(--paper)}
.ws-404 .num{font-size:clamp(80px,16vw,180px);font-weight:800;letter-spacing:-.06em;line-height:.85}
.ws-article{display:grid;gap:32px;grid-template-columns:1fr;padding:clamp(24px,4vw,40px) clamp(16px,4vw,40px)}
@media(min-width:900px){.ws-article{grid-template-columns:minmax(0,66ch) 1fr}}
.ws-aside{border:var(--rule);background:var(--yellow);padding:18px;align-self:start;display:flex;flex-direction:column;gap:8px;font-size:15px}
.ws-aside ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-weight:600}

/* wireframes + checklists */
.wire{border:var(--rule);background:var(--surface)}
.wire svg{display:block;width:100%;height:auto}
.wire figcaption{padding:12px 14px;border-top:var(--rule);font-size:14px;line-height:1.45}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:600}
.legend i{display:inline-block;width:14px;height:14px;border:2px solid var(--ink);vertical-align:-2px;margin-right:6px}
.checklist{list-style:none;margin:0;padding:0;border:var(--rule);background:var(--surface);width:100%}
.checklist li+li{border-top:var(--rule-thin)}
.checklist label{display:flex;gap:14px;align-items:flex-start;padding:12px 16px;cursor:pointer;line-height:1.4}
.checklist label span b{display:block}
.checklist .ws-check{margin-top:2px}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px}
.swatch-row span{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:var(--rule);font-weight:700;font-size:14px}

/* principles, rules, glossary */
.terms{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.terms b{font-size:13px;margin-right:6px}
.terms span{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:2px solid var(--ink);background:var(--surface);font-weight:600;font-size:13px}
.principle{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:900px){.principle{grid-template-columns:300px 1fr}}
.principle figure{margin:0;border:var(--rule);background:var(--surface);align-self:start}
.principle figure svg{display:block;width:100%;height:auto}
.principle figcaption{padding:10px 14px;border-top:var(--rule);font-size:14px;font-weight:600}
.principle .text{display:flex;flex-direction:column;gap:16px;max-width:70ch}
.principle .text p{max-width:none}
.principle h4{font-size:16px;letter-spacing:0;margin-top:4px}
.rules{list-style:none;margin:0;padding:0;border:var(--rule);background:var(--surface);width:100%}
.rules li{display:flex;gap:16px;padding:14px 18px;line-height:1.45}
.rules li+li{border-top:var(--rule-thin)}
.rules li>b{flex:none;width:44px;height:30px;display:grid;place-content:center;border:2px solid var(--ink);font-size:13px;font-weight:800;background:var(--yellow)}
.rules li>span{display:flex;flex-direction:column;gap:2px;max-width:70ch}
.rules li>span strong{font-weight:700}
.rules li>span small{font-size:15px}
.rules li>span a{font-size:13px;font-weight:600;align-self:flex-start}
.gloss{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.gloss div{border:var(--rule);background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.gloss dt{font-weight:800;font-size:19px;letter-spacing:-.02em}
.gloss dd{margin:0;font-size:15px;line-height:1.45}
.gloss dd a{font-weight:600}
.az{display:flex;flex-wrap:wrap;gap:6px}
.az a{display:grid;place-content:center;width:36px;height:36px;border:2px solid var(--ink);text-decoration:none;font-weight:800;font-size:14px;background:var(--surface)}
.az a:hover{background:var(--yellow)}
.precedence{display:flex;flex-wrap:wrap;gap:0;align-items:stretch}
.precedence div{flex:1 1 150px;border:var(--rule);padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:4px;margin-right:-3px}
.precedence div b{font-size:28px;letter-spacing:-.03em;line-height:1}
.precedence div:first-child{background:var(--red);color:var(--white)}
.precedence div:nth-child(2){background:var(--yellow)}
.precedence div:nth-child(3){background:var(--blue);color:var(--white)}

/* credits bar */
.credits{border-top:var(--rule);background:var(--surface);font-size:13px;line-height:1.5}
.credits .wrap{display:flex;flex-direction:column;gap:4px;padding-top:14px;padding-bottom:18px}
.credits a{font-weight:600}
.cite pre{white-space:pre-wrap}
.sitemap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sitemap li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sitemap li a{font-weight:700}
.sitemap li span{font-size:14px}

/* story + history */
.people{display:grid;gap:3px;background:var(--ink);border:var(--rule);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.people div{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.people b{font-size:19px;letter-spacing:-.02em;line-height:1.1}
.people small{font-weight:600;font-size:13px}
.people p{font-size:14px;line-height:1.45}
.people .role{display:inline-block;align-self:flex-start;border:2px solid var(--ink);padding:2px 8px;font-size:12px;font-weight:700}
.tl{display:flex;flex-direction:column;border-left:6px solid var(--ink);margin-left:8px}
.tl>div{position:relative;padding:0 0 22px 28px}
.tl>div::before{content:"";position:absolute;left:-15px;top:4px;width:18px;height:18px;background:var(--red);border:3px solid var(--ink)}
.tl>div:nth-child(3n+2)::before{background:var(--yellow);border-radius:50%}
.tl>div:nth-child(3n)::before{background:var(--blue)}
.tl b{display:block;font-size:22px;letter-spacing:-.02em;line-height:1.1}
.tl p{max-width:66ch;font-size:16px}
.step{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:1000px){.step{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.step .text{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.step .text p{max-width:none}
.stepnum{display:inline-grid;place-content:center;width:44px;height:44px;background:var(--ink);color:var(--yellow);font-weight:800;font-size:20px;border:var(--rule)}
.gal{display:grid;gap:3px;background:var(--ink);border:var(--rule);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gal figure{margin:0;background:var(--surface);display:flex;flex-direction:column}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{padding:8px 10px;font-size:13px;font-weight:600;border-top:var(--rule)}
.pal{display:flex;border:var(--rule)}
.pal div{flex:1;min-height:92px;padding:10px;font-size:12px;font-weight:700;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;border-right:var(--rule)}
.pal div:last-child{border-right:0}
.pal span{font-weight:500}
.reading{list-style:none;margin:0;padding:0;border:var(--rule);background:var(--surface)}
.reading li{padding:12px 16px;line-height:1.45}
.reading li+li{border-top:var(--rule-thin)}
.reading b{font-weight:700}
.reading small{display:block;font-size:14px}