/* Navigation-only custom lowercase marker alphabet. Existing heading font is unchanged. */
[data-algo-nav]{text-transform:none!important;font-style:normal!important;font-variant:normal!important;letter-spacing:0!important;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;text-decoration:none;position:relative;line-height:1}
[data-algo-nav] .algo-nav-ink{display:block;width:auto;height:23px;max-width:100%;overflow:visible;flex-shrink:1}
[data-algo-nav] .algo-nav-readable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-algo-nav]:hover .algo-nav-ink,[data-algo-nav][aria-current="page"] .algo-nav-ink,[data-algo-nav].active .algo-nav-ink{filter:drop-shadow(.5px .5px 0 currentColor)}
[data-algo-nav]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:700px){[data-algo-nav] .algo-nav-ink{height:11px}}
@media(max-width:390px){[data-algo-nav] .algo-nav-ink{height:10px}}

/* Shared three-link top navigation; typography is exclusively nav-lettering.css. */
.toolbar .algo-site-nav{display:flex;align-items:center;gap:clamp(8px,1.1vw,22px);margin-left:auto;padding:0 18px;min-width:0}
.toolbar .algo-site-nav [data-algo-nav]{color:var(--ink);padding:6px 0}
/* Match desktop editorial navigation stroke height on Try It Out. */
.toolbar .algo-site-nav [data-algo-nav] .algo-nav-ink{height:17px}
.toolbar .algo-site-nav [data-algo-nav][aria-current="page"]{border-bottom:2px solid var(--orange)}
@media(max-width:1100px){.toolbar .formula-strip,.toolbar .studio-question{display:none}.toolbar .algo-site-nav{gap:12px;padding:0 12px}}
@media(max-width:700px){.toolbar .algo-site-nav{gap:6px;padding:0 5px;justify-content:flex-end}.toolbar .algo-site-nav [data-algo-nav] .algo-nav-ink{height:11px}}

/* Match the editorial Gallery and How It Works top bars exactly. */
.site-head nav,body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav{display:flex;align-items:center;gap:23px;flex-wrap:nowrap;margin-left:auto}
.site-head nav [data-algo-nav],body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav [data-algo-nav]{font-style:normal!important;text-transform:none!important;padding:0!important;border:0!important;min-width:0}
.site-head nav [data-algo-nav] .algo-nav-ink,body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav [data-algo-nav] .algo-nav-ink{height:17px}
@media(max-width:780px){.site-head nav,body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav{gap:10px}.site-head nav [data-algo-nav] .algo-nav-ink,body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav [data-algo-nav] .algo-nav-ink{height:11px}}
@media(max-width:390px){.site-head nav,body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav{gap:6px}.site-head nav [data-algo-nav] .algo-nav-ink,body>header:not(.site-head):not(.toolbar):not(.algo-global-header) nav [data-algo-nav] .algo-nav-ink{height:9px}body>header:not(.site-head):not(.toolbar):not(.algo-global-header) .wordmark{font-size:20px}}

/* Reserve the navigation appearance before JS draws the marker strokes.
   This prevents a serif/uppercase fallback flash; text remains in the DOM for accessibility. */
[data-algo-nav]:not(:has(.algo-nav-ink)){font-size:0!important;letter-spacing:0!important}
@supports not selector(:has(*)){[data-algo-nav]{font-size:0!important}}

/* Compact editor header: keep wordmark and all three links on one mobile row. */
@media(max-width:760px){
 .editorial-preview .toolbar{flex-wrap:nowrap!important;justify-content:space-between!important;gap:6px!important;padding:5px 10px!important}
 .editorial-preview .toolbar .brand-lockup{width:auto!important;min-width:0!important;max-width:104px!important;flex:0 0 auto!important;padding:0!important;border:0!important}
 .editorial-preview .toolbar .brand{font-size:16px!important;line-height:1!important;white-space:nowrap!important}
 .editorial-preview .toolbar .brand-meta{display:none!important}
 .editorial-preview .toolbar .algo-site-nav{flex:0 1 auto!important;min-width:0!important;gap:6px!important;padding:0!important;margin-left:auto!important}
 .editorial-preview .toolbar .algo-site-nav [data-algo-nav]{min-width:0!important;padding:4px 0!important}
 .editorial-preview .toolbar .algo-site-nav .algo-nav-ink{height:9px!important}
}
@media(max-width:390px){
 .editorial-preview .toolbar .brand{font-size:14px!important}
 .editorial-preview .toolbar .brand-lockup{max-width:90px!important}
 .editorial-preview .toolbar .algo-site-nav{gap:4px!important}
 .editorial-preview .toolbar .algo-site-nav .algo-nav-ink{height:8px!important}
}


/* One site-wide header contract: the editor, archive and explainer deliberately
   share dimensions, typography, link spacing and mobile behaviour. */
:root{--algo-header-paper:#ece7d9;--algo-header-ink:#403931}
.editorial-preview .toolbar,
body>.site-head,
body>header:not(.site-head):not(.toolbar):not(.algo-global-header){
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
  position:relative;
  width:100%!important;
  max-width:none!important;
  min-height:72px!important;
  height:72px!important;
  padding:0 clamp(14px,2.4vw,36px)!important;
  gap:clamp(8px,1.4vw,20px)!important;
  background:var(--algo-header-paper)!important;
  border:0!important;
  border-bottom:1px solid #b8b09f!important;
  box-shadow:none!important;
}
.editorial-preview .toolbar .brand-lockup,
body>.site-head>.brand,
body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>.wordmark{
  box-sizing:border-box!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  flex:0 0 auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  line-height:1!important;
}
.editorial-preview .toolbar .brand,
body>.site-head>.brand,
body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>.wordmark{
  font:normal 28px/1 'AlgoArt Marker',sans-serif!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}
.editorial-preview .toolbar .brand h1{margin:0!important}
.editorial-preview .toolbar .brand-meta,
.editorial-preview .toolbar .studio-question{display:none!important}
.editorial-preview .toolbar .formula-strip,
body>.site-head>.formula,
body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>.formula{
  box-sizing:border-box!important;
  display:flex!important;
  min-width:0!important;
  width:auto!important;
  flex:0 1 auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  padding:0!important;
  border:0!important;
  margin:0!important;
  font:10px/1.2 'Courier New',monospace!important;
  white-space:nowrap!important;
  color:#625d53!important;
}
.editorial-preview .toolbar .algo-site-nav,
body>.site-head>nav,
body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>nav{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:clamp(9px,1.5vw,23px)!important;
  padding:0!important;
  margin:0 0 0 auto!important;
  min-width:0!important;
}
.editorial-preview .toolbar [data-algo-nav],
body>.site-head [data-algo-nav],
body>header:not(.site-head):not(.toolbar):not(.algo-global-header) [data-algo-nav]{
  display:inline-flex!important;
  align-items:center!important;
  flex:0 1 auto!important;
  padding:5px 0!important;
  margin:0!important;
  min-width:0!important;
  border:0!important;
  background:transparent!important;
  color:#403931!important;
  line-height:1!important;
}
.editorial-preview .toolbar [data-algo-nav] .algo-nav-ink,
body>.site-head [data-algo-nav] .algo-nav-ink,
body>header:not(.site-head):not(.toolbar):not(.algo-global-header) [data-algo-nav] .algo-nav-ink{
  display:block!important;
  height:17px!important;
  width:auto!important;
  max-width:100%!important;
}
@media(max-width:900px){
 .editorial-preview .toolbar .formula-strip,
 body>.site-head>.formula,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>.formula{display:none!important}
}
@media(max-width:760px){
 .editorial-preview .toolbar,
 body>.site-head,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header){
   height:58px!important;min-height:58px!important;
   padding:0 10px!important;gap:8px!important;
 }
 .editorial-preview .toolbar .brand,
 body>.site-head>.brand,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>.wordmark{
   font-size:18px!important;
 }
 .editorial-preview .toolbar .brand-lockup{max-width:none!important}
 .editorial-preview .toolbar .algo-site-nav,
 body>.site-head>nav,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>nav{gap:clamp(5px,1.4vw,9px)!important}
 .editorial-preview .toolbar [data-algo-nav] .algo-nav-ink,
 body>.site-head [data-algo-nav] .algo-nav-ink,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header) [data-algo-nav] .algo-nav-ink{height:10px!important}
}
@media(max-width:390px){
 .editorial-preview .toolbar .brand,
 body>.site-head>.brand,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header)>.wordmark{font-size:16px!important}
 .editorial-preview .toolbar [data-algo-nav] .algo-nav-ink,
 body>.site-head [data-algo-nav] .algo-nav-ink,
 body>header:not(.site-head):not(.toolbar):not(.algo-global-header) [data-algo-nav] .algo-nav-ink{height:9px!important}
}


/* SINGLE HEADER — one selector and one DOM structure across all three pages. */
body .algo-global-header,body .algo-global-header.toolbar,body>.algo-global-header{
 display:flex!important;position:relative!important;align-items:center!important;
 flex-direction:row!important;flex-wrap:nowrap!important;align-content:center!important;
 box-sizing:border-box!important;width:100%!important;max-width:none!important;
 height:72px!important;min-height:72px!important;
 margin:0!important;padding:0 clamp(12px,2.2vw,32px)!important;
 gap:clamp(10px,1.7vw,24px)!important;
 background:#ece7d9!important;border:0!important;border-bottom:1px solid #b8b09f!important;
 box-shadow:none!important;z-index:10;
}
body .algo-global-header .algo-global-brand{display:flex!important;align-items:center!important;flex:0 0 auto!important;min-width:0!important;padding:0!important;border:0!important}
body .algo-global-header .algo-global-brand .brand{
 display:block!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;
 color:#403931!important;font:normal 27px/1 'AlgoArt Marker',sans-serif!important;letter-spacing:0!important;text-decoration:none!important;white-space:nowrap!important
}
body .algo-global-header .algo-global-brand .brand span{color:#b65368!important;padding:0 2px!important}
body .algo-global-header .algo-global-numbers{display:flex!important;align-items:center!important;gap:9px!important;flex:0 0 auto!important;min-width:0!important;white-space:nowrap!important;color:#403931!important;font:10px/1.2 'Courier New',monospace!important}
body .algo-global-header .algo-number-slash{font-size:19px!important;line-height:1!important}
body .algo-global-header .algo-global-question{display:block!important;flex:1 1 auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;color:#403931!important;font:italic 13px/1.3 Georgia,serif!important;white-space:nowrap!important;text-align:center!important}
body .algo-global-header .algo-site-nav{display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(8px,1vw,18px)!important;min-width:0!important;margin:0!important;padding:0!important}
body .algo-global-header .algo-site-nav [data-algo-nav]{border:0!important;padding:3px 0!important;margin:0!important;background:none!important;color:#403931!important;min-width:0!important}
body .algo-global-header .algo-site-nav .algo-nav-ink{height:15px!important;width:auto!important;max-width:100%!important}
body .algo-global-header .welcome-logo-trigger{font:inherit!important;color:inherit!important}
@media(max-width:1100px){body .algo-global-header .algo-global-question{font-size:11px!important}body .algo-global-header .algo-global-numbers{font-size:9px!important;gap:5px!important}}
@media(max-width:850px){body .algo-global-header,body .algo-global-header.toolbar{height:86px!important;min-height:86px!important;flex-wrap:wrap!important;align-content:center!important;justify-content:space-between!important;row-gap:8px!important;padding:8px 12px!important}
body .algo-global-header .algo-global-brand .brand{font-size:20px!important}
body .algo-global-header .algo-global-numbers{display:none!important}
body .algo-global-header .algo-global-question{order:3!important;flex:0 0 100%!important;text-align:left!important;font-size:12px!important}
body .algo-global-header .algo-site-nav{margin-left:auto!important;gap:8px!important}
body .algo-global-header .algo-site-nav .algo-nav-ink{height:10px!important}
}
@media(max-width:390px){body .algo-global-header .algo-global-brand .brand{font-size:16px!important}body .algo-global-header .algo-site-nav{gap:5px!important}body .algo-global-header .algo-site-nav .algo-nav-ink{height:9px!important}}

/* Header position lock: identical track coordinates on editor, gallery and about. */
body .algo-global-header{
 display:grid!important;
 grid-template-columns:180px 208px minmax(180px,1fr) 330px!important;
 column-gap:14px!important;
 justify-content:stretch!important;
}
body .algo-global-header .algo-global-brand{grid-column:1!important;grid-row:1!important}
body .algo-global-header .algo-global-brand h1{margin:0!important;padding:0!important;font:inherit!important}
body .algo-global-header .algo-global-numbers{grid-column:2!important;grid-row:1!important}
body .algo-global-header .algo-global-question{grid-column:3!important;grid-row:1!important;text-align:left!important}
body .algo-global-header .algo-site-nav{grid-column:4!important;grid-row:1!important;width:330px!important;justify-content:space-between!important;gap:0!important}
@media(max-width:1100px) and (min-width:851px){
 body .algo-global-header{grid-template-columns:160px 186px minmax(150px,1fr) 300px!important;column-gap:10px!important}
 body .algo-global-header .algo-site-nav{width:300px!important}
}
@media(max-width:850px){
 body .algo-global-header{
  display:grid!important;
  grid-template-columns:minmax(90px,1fr) minmax(0,auto)!important;
  grid-template-rows:34px 24px!important;
  align-content:center!important;
  column-gap:8px!important;row-gap:4px!important;
 }
 body .algo-global-header .algo-global-brand{grid-column:1!important;grid-row:1!important}
 body .algo-global-header .algo-global-numbers{display:none!important}
 body .algo-global-header .algo-site-nav{grid-column:2!important;grid-row:1!important;width:auto!important;justify-content:flex-end!important;gap:8px!important}
 body .algo-global-header .algo-global-question{grid-column:1/-1!important;grid-row:2!important;order:unset!important;flex:auto!important;white-space:nowrap!important}
}

/* Desktop editor has no document scrollbar; the archive and explainer do.
   Reserve exactly the missing scrollbar gutter so right-aligned links match. */
@media(min-width:851px){
  html:has(.editorial-preview){scrollbar-gutter:stable!important}
}

/* Proportion Piece wordmark: keep the longer title inside the shared header tracks. */
body .algo-global-header .algo-global-brand .brand{font-size:19px!important}
@media(min-width:1101px){body .algo-global-header{grid-template-columns:240px 208px minmax(100px,1fr) 330px!important}}
@media(min-width:851px) and (max-width:1100px){body .algo-global-header{grid-template-columns:205px 150px minmax(70px,1fr) 300px!important}}
@media(max-width:850px){body .algo-global-header .algo-global-brand .brand{font-size:13px!important}}
@media(max-width:390px){body .algo-global-header .algo-global-brand .brand{font-size:11px!important}}

/* Golden-ratio figures belong directly under the Proportion Piece wordmark. */
@media(min-width:851px){
 body .algo-global-header{grid-template-columns:240px minmax(120px,1fr) 330px!important;grid-template-rows:29px 17px!important;align-content:center!important;row-gap:0!important}
 body .algo-global-header .algo-global-brand{grid-column:1!important;grid-row:1!important;align-self:end!important}
 body .algo-global-header .algo-global-brand .brand{line-height:1.1!important}
 body .algo-global-header .algo-global-numbers{display:flex!important;grid-column:1!important;grid-row:2!important;align-self:center!important;justify-self:start!important;font-size:9px!important}
 body .algo-global-header .algo-global-question{grid-column:2!important;grid-row:1/3!important;align-self:center!important;text-align:center!important}
 body .algo-global-header .algo-site-nav{grid-column:3!important;grid-row:1/3!important;align-self:center!important}
}
@media(min-width:851px) and (max-width:1100px){
 body .algo-global-header{grid-template-columns:205px minmax(90px,1fr) 300px!important}
}
@media(max-width:850px){
 body .algo-global-header{grid-template-columns:minmax(120px,1fr) minmax(0,auto)!important;grid-template-rows:23px 15px 23px!important;height:92px!important;min-height:92px!important;row-gap:0!important}
 body .algo-global-header .algo-global-brand{grid-column:1!important;grid-row:1!important;align-self:end!important}
 body .algo-global-header .algo-global-numbers{display:flex!important;grid-column:1!important;grid-row:2!important;align-self:start!important;justify-self:start!important;gap:5px!important;font-size:8px!important}
 body .algo-global-header .algo-number-slash{font-size:12px!important}
 body .algo-global-header .algo-site-nav{grid-column:2!important;grid-row:1/3!important;align-self:center!important}
 body .algo-global-header .algo-global-question{grid-column:1/-1!important;grid-row:3!important;align-self:end!important}
}

/* Keep the longer project title legible and use the phi separator as the red accent. */
body .algo-global-header .algo-number-slash{color:#b65368!important}
@media(max-width:850px){body .algo-global-header .algo-global-brand .brand{font-size:15px!important}}
@media(max-width:390px){body .algo-global-header .algo-global-brand .brand{font-size:14px!important}}