/* Biomorphic site shell (direction B: "the site wears the work").
   Every page takes its colours from the palette of the work it shows; shell.js sets the variables below
   from the live work. The values here are the fallback (palette Starry) until the work is built. */
@font-face{font-family:"Archivo";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic.woff2) format("woff2")}
:root{--ground:#0C1734;--ink:#E9E4CF;--soft:#B9B190;--accent:#C8B568;--on-accent:#0C1734;--line:rgba(233,228,207,.2);
  --gut:28px;--wide:125%;color-scheme:light dark}
*{box-sizing:border-box}
html{background:var(--ground);transition:background-color .7s ease}
body{margin:0;background:var(--ground);color:var(--ink);font:18px/1.62 "Archivo",system-ui,sans-serif;font-stretch:100%;-webkit-font-smoothing:antialiased;
  transition:background-color .7s ease,color .7s ease}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){html,body,*{transition:none!important}}

/* ---- nav: the cexagon.com bar. Cells divided by lines, uppercase labels, a dot on the current page,
   a menu cell on the right that opens cexagon.com and X (and, on phones, the pages) */
.nav{position:relative;z-index:10;display:flex;align-items:stretch;height:64px;border-bottom:1px solid var(--line);background:var(--ground);transition:background-color .7s}
.nav .cell{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 22px;text-decoration:none;color:var(--soft);
  font:500 13px/1 "Archivo";letter-spacing:.16em;text-transform:uppercase;border-right:1px solid var(--line);transition:color .2s,background-color .2s}
.nav .cell:hover{color:var(--ink)}
.nav .mark{flex:1 1 0;color:var(--ink);font-weight:700;letter-spacing:.18em}
.nav .pages{display:flex;flex:4 1 0}
.nav .pages .cell{flex:1 1 0}
.nav .cell[aria-current=page]{color:var(--ink)}
.nav .pages .cell[aria-current=page] span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:1px}
.nav .menu{flex:none;width:72px;border:0;background:transparent;cursor:pointer;position:relative;padding:0}
.nav .menu i{position:absolute;left:28px;right:28px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.nav .menu i:nth-child(1){top:25px}.nav .menu i:nth-child(2){top:31px}.nav .menu i:nth-child(3){top:37px}
.nav.open .menu{background:color-mix(in srgb,var(--ground) 90%,var(--ink));box-shadow:inset 0 0 0 1px var(--line)}
.nav.open .menu i:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav.open .menu i:nth-child(2){opacity:0}.nav.open .menu i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav .drop{position:absolute;top:100%;right:0;width:270px;background:var(--ground);border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 16px 12px}
.nav .drop[hidden]{display:none}
.nav .drop a{display:flex;align-items:center;justify-content:space-between;padding:15px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  font:500 13px/1 "Archivo";letter-spacing:.16em;text-transform:uppercase}
.nav .drop a:last-child{border-bottom:0}
.nav .drop a:hover{color:var(--accent)}
.nav .drop .ext{width:12px;height:12px;color:var(--soft)}
.nav .droppages{display:none}

/* ---- live work */
.live{position:relative;overflow:hidden;background:var(--ground)}
.live canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .22s ease}
.live .ctl{position:absolute;right:var(--gut);bottom:18px;display:flex;gap:8px;z-index:2}
.live .ctl button{font:500 14px "Archivo";background:var(--ground);color:var(--ink);border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.live .ctl button:hover{background:var(--ink);color:var(--ground)}

/* ---- type */
.display{margin:0;font:800 clamp(48px,9.8vw,160px)/.88 "Archivo";font-stretch:var(--wide);letter-spacing:-.035em}
.lead{font:500 25px/1.32 "Archivo";font-stretch:106%;max-width:30ch;margin:0}
.h2{margin:0 0 22px;font:800 clamp(30px,3.6vw,48px)/1.04 "Archivo";font-stretch:120%;letter-spacing:-.025em;max-width:16ch}
p{max-width:62ch}
.soft{color:var(--soft)}
.it{font-family:"Newsreader",serif;font-style:italic;font-size:1.06em}

/* ---- footer */
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:72px var(--gut) 32px;font-size:13px;color:var(--soft)}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

@media (max-width:760px){
  :root{--gut:20px;--wide:112%}
  body{font-size:17px;line-height:1.66}
  .nav{height:56px}
  .nav .pages{display:none}
  .nav .mark{justify-content:flex-start;padding-left:var(--gut)}
  .nav .menu{width:60px}.nav .menu i{left:22px;right:22px}
  .nav .menu i:nth-child(1){top:21px}.nav .menu i:nth-child(2){top:27px}.nav .menu i:nth-child(3){top:33px}
  .nav .drop{left:0;width:auto;border-left:0;padding:4px var(--gut) 10px}
  .nav .droppages{display:block}
  .nav .droppages a[aria-current=page]{color:var(--accent)}
  .display{font-size:12.4vw;line-height:.92}
  .h2{font-size:30px}
  .lead{font-size:20px;line-height:1.38}
}

/* scrollbars: thin, in the page colours */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 24%,transparent);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink) 45%,transparent)}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 24%,transparent) transparent}}