/* The About way (Zigurds, 2026-10-02: "the most important chapter"): what the workstations are made of
   and why, tier by tier, each thing with its picture, its maker and the ways on to its product page, the
   product list and the workspaces it stands in. Built by about.js from about/about.json */
#about{position:fixed;top:var(--nav);left:0;right:var(--admin-w);bottom:0;overflow-y:auto;background:var(--paper)}

/* the chapter's own menu: the tiers and their topics in one row, the one on screen marked */
.anav{position:sticky;top:0;z-index:4;background:rgba(246,246,244,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.anav ul{list-style:none;margin:0;padding:0 var(--side);display:flex;align-items:center;gap:26px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent calc(var(--side) - 1px),#000 var(--side),#000 calc(100% - var(--side) - 48px),transparent calc(100% - var(--side)));mask-image:linear-gradient(to right,transparent calc(var(--side) - 1px),#000 var(--side),#000 calc(100% - var(--side) - 48px),transparent calc(100% - var(--side)))}
.anav ul::-webkit-scrollbar{display:none}
.anav li{flex:none}
.anav li.at{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#a9a9a4;padding-left:8px;white-space:nowrap}
.anav li.at:first-child{padding-left:0}
.anav li.at::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:9px;vertical-align:2px}
.anav button{font:400 12px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);background:none;border:0;padding:16px 0 14px;cursor:pointer;white-space:nowrap;border-bottom:1px solid transparent;transition:color .15s}
.anav button:hover{color:var(--ink)}
.anav button.now{color:var(--ink);border-bottom-color:var(--ink)}
.anav li:last-child{padding-right:48px}
/* the way back after a jump in the map or the menu (Davis, 2026-10-11: top left, under this menu), its arrow on the
   content's left edge (the pill's hairline stands just outside it); it shows only on such a step and takes it back */
.anav .aback{position:absolute;top:calc(100% + 14px);left:calc(var(--side) - 14px);display:flex;align-items:center;gap:10px;
  font:400 11px Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:9px 16px 9px 13px;
  background:rgba(246,246,244,.94);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s,border-color .15s}
.anav .aback.on{opacity:1;transform:none;pointer-events:auto}
.anav .aback::before{content:"\2190";letter-spacing:0;transition:transform .2s}
.anav .aback:hover{border-color:#cfcfca}.anav .aback:hover::before{transform:translateX(-3px)}
@media (max-width:600px){.anav .aback{top:calc(100% + 10px)}}

.apage{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) 96px}

/* the opening: his first line as the headline, his two paragraphs and three facts beside it */
.ahero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end;padding:76px 0 56px}
.ahero h1{font:400 clamp(48px,6vw,82px)/.98 'Instrument Serif',Georgia,serif;margin:20px 0 0;letter-spacing:-.005em;max-width:12ch}
.ahero .asub{font:400 clamp(24px,2.3vw,31px)/1.2 'Instrument Serif',Georgia,serif;color:#6a6a66;margin:22px 0 0}
.ahero .apara{font-size:16px;line-height:1.65;font-weight:300;color:#3c3c3a;margin:0 0 14px;max-width:46ch}
.afacts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.afacts li{padding:16px 14px 0 0}
.afacts b{display:block;font:400 29px/1 'Instrument Serif',Georgia,serif;font-weight:400}
.afacts span{display:block;margin-top:8px;font-size:11px;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* the map of the chapter: the three tiers side by side, each topic a way down to it */
.amap{border-top:1px solid var(--line);padding:30px 0 0}
.amap>.kick{margin-bottom:22px}
.ahero .kick::before,.amap>.kick::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:12px;vertical-align:2px}
.amap-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.amap-t h3{display:flex;align-items:baseline;gap:14px;font:400 30px/1 'Instrument Serif',Georgia,serif;margin:0}
.amap-t h3 i{font:400 11px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.16em;color:var(--mute)}
.amap-t p{margin:10px 0 16px;font-size:13.5px;color:#6a6a66;font-weight:300}
.amap-t ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.amap-t li button{display:flex;justify-content:space-between;align-items:center;width:100%;font:400 15px Inter,system-ui,sans-serif;color:#3c3c3a;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 2px;cursor:pointer;text-align:left;transition:color .15s,padding .2s}
.amap-t li button::after{content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 4px 4px 0;opacity:.45;transition:opacity .15s,transform .2s}
.amap-t li button:hover{color:var(--ink);padding-left:8px}
.amap-t li button:hover::after{opacity:1;transform:rotate(45deg) translate(2px,2px)}
/* a tier's Read more (Davis, 2026-10-07): the words unfold downwards, its column widens and the other two
   give way (wide screens only; on a phone the tiers stand one under another and only unfold) */
/* fluid (Davis, same day): width, height and the words move on one curve; the words are already set at
   the open column's width, so the widening column uncovers them instead of re-wrapping them line by line,
   and they rise in a beat after it starts; closing, they fade first */
.amap-g{--amap-ease:cubic-bezier(.5,0,.15,1);container-type:inline-size}
.amap-t{transition:opacity .75s var(--amap-ease)}
.amap-t.has-more h3{cursor:pointer}
.amap-t.has-more h3:hover i{color:var(--ink)}
.amap-t.has-more>p{margin-bottom:0}
.amap-t .amore{transition:grid-template-rows .75s var(--amap-ease)}
.amap-t .amore p{margin:0;padding-top:14px;font-size:14.5px;line-height:1.66;color:#3c3c3a;max-width:62ch;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .3s}
.amap-t.open .amore{grid-template-rows:1fr}
.amap-t.open .amore p{opacity:1;transform:none;transition:opacity .55s .2s,transform .75s .12s var(--amap-ease)}
body.tx .amap-t .amore p{opacity:1;transform:none}
.amap-t .amore-b{margin:14px 0 18px}
.amap-t .amore-b::before{transition:transform .75s var(--amap-ease)}
.amap-t.open .amore-b::before{transform:rotate(45deg)}
@media (min-width:901px){
  .amap-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);transition:grid-template-columns .75s var(--amap-ease)}
  /* the open column's width: 2.2 of 4.2 parts of the row less its two 40px gaps */
  .amap-t .amore p{width:calc((100cqw - 80px) * 2.2 / 4.2);max-width:none;padding-right:8px;box-sizing:border-box}
  body.tx .amap-t .amore p{width:auto}
  .amap-g[data-open="0"]{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr)}
  .amap-g[data-open="1"]{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr) minmax(0,1fr)}
  .amap-g[data-open="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.2fr)}
  .amap-g[data-open] .amap-t:not(.open){opacity:.55}
  .amap-g[data-open] .amap-t:not(.open):hover{opacity:1}
}

/* a tier: its name over a line in ink, then its topics */
.atier{margin-top:112px}
.atier-h{display:flex;align-items:baseline;gap:22px;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.atier-h i{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--mute)}
.atier-h i::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:12px;vertical-align:2px}
.atier-h h2{font:400 clamp(40px,4.6vw,60px)/1 'Instrument Serif',Georgia,serif;margin:0}
.atier-h p{margin:0 0 0 auto;font-size:14px;color:#6a6a66;font-weight:300;text-align:right}
.atopic{padding-top:64px}
.atopic+.atopic{margin-top:40px;border-top:1px solid var(--line)}
.atopic-h{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:baseline;margin-bottom:40px}
.atopic-h h3{font:400 clamp(32px,3.2vw,42px)/1.04 'Instrument Serif',Georgia,serif;margin:0}
.atopic-h p{margin:0;font-size:18px;line-height:1.55;font-weight:300;color:#3c3c3a;max-width:52ch}

/* the things: two side by side, the lead and the wide ones a row of their own */
.aitems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 40px}
.aimg{margin:0;position:relative;background:#fafaf8;border-radius:16px;aspect-ratio:4/3;overflow:hidden;transition:box-shadow .6s}
.aimg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:scale-down;padding:5%;transition:opacity .22s}
.aimg.photo>img{object-fit:cover;padding:0}
.athumbs{position:absolute;left:14px;bottom:14px;display:flex;gap:6px}
.athumbs button{width:46px;height:38px;border-radius:9px;border:1px solid var(--line);background:#fafaf8;padding:3px;cursor:pointer;opacity:.75;transition:opacity .15s,border-color .15s}
.athumbs button:hover{opacity:1}
.athumbs button.now{border-color:#3c3c3a;opacity:1}
.athumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.awords{padding:24px 2px 0}
.ahead{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ahead h4{font:400 29px/1.08 'Instrument Serif',Georgia,serif;margin:0}
.alogos{display:flex;gap:14px;align-items:center;flex:none}
.alogos img{height:15px;width:auto;max-width:100px;object-fit:contain;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.alogos img.tall{height:28px}
.aitem:hover .alogos img{filter:none;opacity:1}
.atext{margin:12px 0 0;font-size:17px;line-height:1.6;font-weight:300;color:#2f2f2d;max-width:48ch}
.amore{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.amore>div{overflow:hidden;min-height:0}
.amore p{margin:0;padding-top:10px;font-size:13.5px;line-height:1.62;color:#55554f;font-weight:300;max-width:54ch}
.aitem.open .amore,body.tx .amore{grid-template-rows:1fr}
.amore-b{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:400 11px Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
.amore-b::before{content:"";width:13px;height:13px;flex:none;background:linear-gradient(currentColor,currentColor) center/13px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 13px no-repeat;transition:transform .3s}
.aitem.open .amore-b::before{transform:rotate(45deg)}
.amore-b:hover span{text-decoration:underline;text-underline-offset:4px}
.alinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.alinks button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:#3c3c3a;background:none;border:0;padding:0;cursor:pointer;transition:color .15s}
.alinks button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.alinks button::after{content:" \2192"}
/* yellow is wishing, orange is buying (Davis, 2026-09-28): the way to the product list carries the cart's colour */
.alinks button.buy::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cart);margin-right:8px;vertical-align:1px}
.alinks .aws{display:inline-flex;gap:12px;align-items:baseline}
.alinks .aws button::after{content:none}
.aitem.flash .aimg{box-shadow:0 0 0 2px var(--gold)}

.aitem.lead,.aitem.wide,.aitem.spec{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.aitem.lead .awords,.aitem.wide .awords,.aitem.spec .awords{padding:0}
.aitem.lead .ahead h4{font-size:44px}
.aitem.lead .atext{font-size:19px}
/* a wide one turns the other way, so a run of rows zigzags as the workspaces do */
.aitem.wide.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.aitem.wide.flip .aimg{order:2}
.aitem.spec{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:start}
.aitem.spec .aimg{order:2}
.aspec{margin:18px 0 0;border-top:1px solid var(--line)}
.aspec div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.aspec dt{font:400 20px/1.2 'Instrument Serif',Georgia,serif}
.aspec dd{margin:0;font-size:15px;line-height:1.55;color:#3c3c3a;font-weight:300}
.alabel{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-bottom:-30px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.alabel::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:none}
.alabel::after{content:"";flex:1;border-top:1px solid var(--line)}

/* the partners, each a way out to its own website */
.apartners{margin-top:128px}
.aplist{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:28px}
.apc{display:flex;flex-direction:column;padding:30px 0 26px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.apc .alogo{height:56px;display:flex;align-items:center}
.apc .alogo img{max-height:30px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.apc .alogo img.tall{max-height:52px}
.apc b{font:400 21px/1.15 'Instrument Serif',Georgia,serif;margin-top:16px}
.apc span{font-size:12.5px;line-height:1.5;color:#6a6a66;font-weight:300;margin-top:4px}
.apc i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#3c3c3a;margin-top:14px}
.apc i::after{content:" \2197"}
a.apc:hover .alogo img{filter:none;opacity:1}
a.apc:hover i{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
#apage>.more{margin-top:96px}

@media (max-width:900px){
  .ahero{grid-template-columns:1fr;gap:32px;padding:44px 0 40px;align-items:start}
  .amap-g{grid-template-columns:1fr;gap:34px}
  .atier{margin-top:80px}.atier-h{flex-wrap:wrap;gap:8px 18px}.atier-h p{margin:0;flex-basis:100%;text-align:left}
  .atopic{padding-top:48px}.atopic-h{grid-template-columns:1fr;gap:14px;margin-bottom:28px}.atopic-h p{font-size:16.5px}
  .aitems{grid-template-columns:1fr;gap:52px}
  .aitem.lead,.aitem.wide,.aitem.wide.flip,.aitem.spec{grid-template-columns:1fr;gap:0}
  .aitem.lead .awords,.aitem.wide .awords,.aitem.spec .awords{padding:22px 2px 0}
  .aitem.wide.flip .aimg{order:0}.aitem.spec .aimg{order:0}
  .aitem.lead .ahead h4{font-size:34px}.aitem.lead .atext{font-size:17px}
  .alabel{margin-bottom:-18px}
  .aspec div{grid-template-columns:1fr;gap:4px}
  .aplist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .athumbs button{width:40px;height:33px}
}