/* Self-hosted so the site keeps font-src 'self'. All three are variable fonts, so one
   file per family covers every weight the page asks for (latin subset only). */
@font-face{font-family:'Chivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/chivo-var.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-var.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-italic-var.woff2) format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/syne-var.woff2) format('woff2')}

:root{--paper:#191722;--ink:#ece7e0;--mute:#8d8598;--line:rgba(236,231,224,.22);
  --blue:#8fa9c8;--orange:#d0876a;--green:#c2a355;--violet:#a794c7;--pink:#c98494;
  --dark:#100e17;--cream:#ece7e0;--card:#221f2c;--accent:#d0876a;
  --hl:rgba(208,135,106,.32);--w:1180px;
  --fdisp:'Syne',system-ui,sans-serif;
  --fbody:'Chivo',system-ui,-apple-system,sans-serif;
  --flabel:'Syne',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--fbody);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(18px,5vw,56px)}
.lbl{font-family:var(--flabel);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.nav{position:sticky;top:0;z-index:9;background:var(--paper);border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:clamp(10px,3vw,28px);height:54px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav b{font-family:var(--fdisp);font-weight:800;letter-spacing:-.02em;font-size:16px;white-space:nowrap}
.nav a{text-decoration:none;font-size:13px;letter-spacing:.06em;color:var(--mute);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.nav .sp{flex:1}
.nav .cv{color:var(--blue);font-weight:600}
.hero{position:relative;overflow:hidden}
#field{display:block;width:100%;height:min(52svh,420px)}
.heroCopy{position:relative;padding-top:clamp(18px,3vw,26px);padding-bottom:clamp(34px,6vw,58px)}
.stamp{display:inline-block;padding:3px 9px;margin-bottom:14px}
h1{margin:0;line-height:.86}
h1 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1 .big{display:block;font-family:var(--fdisp);font-weight:800;
  font-size:clamp(38px,11.2vw,104px);letter-spacing:-.045em;text-transform:uppercase}
.heroGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(18px,4vw,48px);align-items:end;margin-top:22px}
.heroGrid p{margin:0;font-size:clamp(16px,1.5vw,19px);max-width:46ch}
.heroGrid b{font-weight:600;background:linear-gradient(transparent 62%,var(--hl) 0)}
.facts{display:flex;flex-wrap:wrap;gap:6px}
.facts span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid currentColor;padding:4px 8px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.03em;
  padding:11px 18px;border:2px solid currentColor;background:transparent}
canvas.rule{display:block;width:100%;height:34px;margin:0;background:var(--dark)}
section{padding:clamp(46px,7vw,88px) 0}
.head{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.no{font-family:var(--flabel);font-weight:800;font-size:13px;letter-spacing:.16em}
.head h2{margin:0;font-family:var(--fdisp);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(28px,4.6vw,50px);line-height:1;flex:1 1 260px}
.intro{max-width:60ch;margin:0 0 24px}
.dock{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:clamp(10px,3vw,34px);
  padding:24px 0;border-top:1.5px solid var(--line)}
.dock:last-of-type{border-bottom:1.5px solid var(--line)}
.dock .ex{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:6px}
.dock h3{margin:0 0 8px;font-family:var(--fdisp);font-weight:700;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.02em}
.dock h3 a{text-decoration:none;box-shadow:inset 0 -2px 0 var(--accent)}
.dock h3 a:hover,.dock h3 a:focus-visible{background:var(--accent);color:var(--paper);box-shadow:none}
.dock p{margin:0;max-width:62ch}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tags span{font-size:11px;letter-spacing:.08em;color:var(--mute);border-bottom:1.5px solid var(--line)}
.meta{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:12px;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.meta b{font-weight:600;color:var(--ink)}
.more{display:inline-block;margin-top:22px;font-weight:600;color:var(--blue);text-decoration:none;box-shadow:inset 0 -2px 0 var(--blue)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4vw,54px)}
.two p{margin:0 0 16px;max-width:56ch}
.spec{border:2px solid var(--ink);padding:16px 18px;background:var(--card);color:var(--ink)}
.spec div{display:flex;gap:12px;padding:5px 0;font-size:14px;border-bottom:1px dotted var(--line)}
.spec div:last-child{border-bottom:0}
.spec .k{width:88px;flex:none;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--mute);padding-top:3px}
.spec .v{flex:1;min-width:0;overflow-wrap:anywhere}
.spec .ok{color:var(--green);font-weight:600}
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:2px solid var(--ink)}
.kit>div{padding:20px 18px 24px;border-bottom:2px solid var(--ink);border-right:1.5px solid var(--line)}
.kit>div:last-child{border-right:0}
.kit h3{margin:0 0 8px;font-family:var(--flabel);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.kit>div:nth-child(1) h3{color:var(--orange)}.kit>div:nth-child(2) h3{color:var(--blue)}
.kit>div:nth-child(3) h3{color:var(--green)}.kit>div:nth-child(4) h3{color:var(--violet)}
.kit p{margin:0;font-size:15px}
.now{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0;border-top:2px solid var(--ink);border-left:2px solid var(--ink)}
.now>div{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:18px 20px}
.now h3{font-family:var(--flabel);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 10px}
.now ul{margin:0;padding:0;list-style:none;font-size:15px}
.now li{padding:5px 0;border-bottom:1px solid var(--line)}
.now li:last-child{border-bottom:0}
.now li span{color:var(--mute)}
.now>div:nth-child(1) h3{color:var(--blue)}
.now>div:nth-child(2) h3{color:var(--orange)}
.now>div:nth-child(3) h3{color:var(--green)}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.contact div{background:var(--card);padding:18px}
.contact .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:6px}
.contact a{font-family:var(--fdisp);font-weight:700;font-size:clamp(15px,2vw,19px);text-decoration:none;letter-spacing:-.01em;overflow-wrap:anywhere}
.contact a:hover,.contact a:focus-visible{color:var(--blue)}
footer{border-top:2px solid var(--ink);padding:20px 0 40px;font-size:13px;color:var(--mute);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer .top{color:var(--blue)}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
@media(max-width:820px){
  .heroGrid{grid-template-columns:1fr;align-items:start}
  .dock{grid-template-columns:1fr;gap:6px}
  .dock .ex{padding-top:0}
  .two{grid-template-columns:1fr}
  #field{height:38svh}
  h1 .big{font-size:clamp(30px,8.4vw,58px)}
  .nav b{font-size:13px}
  .nav a{font-size:12px;letter-spacing:.03em}
  .nav .wrap{gap:9px}
}
@media(max-width:560px){#field{height:min(46svh,340px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.nav{background:rgba(25,23,34,.94);border-bottom:1px solid var(--line);backdrop-filter:none}
.nav .cv{color:var(--orange)}
.hero{background:var(--dark);border-bottom:1px solid var(--line)}
#field{height:min(60svh,520px)}
@media(max-width:560px){#field{height:min(50svh,360px)}}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(16,14,23,0) 60%,rgba(16,14,23,.86) 86%,var(--dark) 100%)}
.heroCopy{margin-top:-64px;z-index:2}
.stamp{background:transparent;border:1px solid var(--orange);color:var(--orange);padding:2px 9px}
h1 .big{font-size:clamp(38px,10.4vw,104px)}
@media(max-width:820px){h1 .big{font-size:clamp(26px,7.4vw,50px)}}
.facts span{border-color:var(--line);color:var(--mute)}
.facts span:nth-child(2){color:var(--blue);border-color:rgba(143,169,200,.5)}
.facts span:nth-child(3){color:var(--green);border-color:rgba(194,163,85,.5)}
.facts span:nth-child(4){color:var(--pink);border-color:rgba(201,132,148,.5)}
.btn{border-width:1px;border-color:var(--line)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--dark);border-color:var(--ink)}
.btn.f{background:var(--orange);border-color:var(--orange);color:var(--dark)}
.btn.f:hover{background:var(--ink);border-color:var(--ink)}
canvas.rule{background:var(--dark);height:30px}
section{padding:clamp(48px,7vw,92px) 0;border-top:1px solid var(--line)}
#work{border-top:0}
.no{opacity:.9}
.head h2{font-weight:600}
#work .no{color:var(--pink)}#lab .no{color:var(--blue)}#now .no{color:var(--orange)}
#kit .no{color:var(--green)}#say .no{color:var(--violet)}
.dock{border-top-color:var(--line)}
.dock:last-of-type{border-bottom-color:var(--line)}
.dock p{color:#c3bdcb}
.dock h3 a{box-shadow:inset 0 -1px 0 var(--accent)}
.dock h3 a:hover,.dock h3 a:focus-visible{background:var(--accent);color:var(--dark)}
.meta b{color:var(--ink)}
.more{color:var(--blue);box-shadow:inset 0 -1px 0 var(--blue)}
.spec{border:1px solid var(--line);background:var(--card)}
.spec div{border-bottom-color:var(--line)}
.two p{color:#c3bdcb}
.two b{color:var(--ink)}
.kit,.kit>div,.now,.now>div{border-color:var(--line);border-width:1px}
.kit p,.now li span{color:#a49dae}
.contact{background:transparent;border:1px solid var(--line);gap:0}
.contact div{background:var(--card);border-right:1px solid var(--line)}
.contact div:last-child{border-right:0}
.contact a:hover{color:var(--orange)}
footer{border-top:1px solid var(--line)}
footer .top{color:var(--orange)}
@media(min-width:960px){
  .head{display:grid;grid-template-columns:130px 1fr;gap:0;align-items:baseline}
  .no{padding-top:.5em}
  .intro,.dock,.two,.kit,.now,.contact,footer{margin-left:130px}
  .dock{grid-template-columns:minmax(0,140px) minmax(0,1fr)}
}

/* ---- wordmark lockup: ANDERSON tracked to exactly the width of the ASCII MAX ----
   left/width/top/font-size are all written by the engine from the measured ink box.
   space-between does the tracking, so the edges line up whatever the font metrics are. */
.fieldwrap{position:relative}
.lockup{position:absolute;left:var(--wm-l,0px);top:var(--wm-t,0px);width:var(--wm-w,0px);
  display:flex;justify-content:space-between;z-index:2;
  font-family:'Syne',system-ui,sans-serif;font-weight:700;font-size:var(--wm-fs,16px);
  line-height:1;text-transform:uppercase;color:var(--ink);
  transform:translateY(.14em);pointer-events:none;visibility:hidden;white-space:nowrap}

@media(max-width:480px){.nav b{font-size:12px}.nav .wrap{--navgap:5px}}
/* ---- atlas: an editorial sheet. a light high-contrast serif for everything that
   speaks, a grotesque for everything that labels, headings hanging out in the
   margin, an italic standfirst, and hairline rules instead of boxes ---- */
:root{--paper:#12141a;--dark:#0d0e13;--card:#171a22;--ink:#e8e9ee;--mute:#868c9c;
  --line:rgba(232,233,238,.15);
  --blue:#9db6d4;--orange:#b59a63;--green:#8fae9b;--violet:#a79cc4;--pink:#bf8a92;
  --accent:#9db6d4;--hl:rgba(157,182,212,.26);
  --fdisp:'Newsreader',Georgia,'Times New Roman',serif;
  --fbody:'Chivo',system-ui,-apple-system,sans-serif;
  --flabel:'Chivo',system-ui,-apple-system,sans-serif;
  --w:1290px}
body{font-size:16.5px;line-height:1.62}
.nav{background:rgba(18,20,26,.92)}
.nav b{font-weight:500;letter-spacing:0;font-size:18px}
.nav a{font-size:12.5px;letter-spacing:.05em}
.nav .cv{color:var(--blue)}
#field{height:min(88svh,780px)}
@media(max-width:820px){#field{height:min(64svh,470px)}}
@media(max-width:560px){#field{height:min(58svh,400px)}}
.hero:after{background:linear-gradient(180deg,rgba(13,14,19,0) 56%,rgba(13,14,19,.88) 84%,var(--dark) 100%)}
.heroCopy{margin-top:-92px;padding-bottom:clamp(56px,9vw,112px)}
.lbl{font-weight:500;font-size:10.5px;letter-spacing:.2em}
.stamp{border-color:rgba(157,182,212,.55);color:var(--blue)}
.heroGrid{margin-top:32px}
/* scoped to wide only: an unscoped override here lands AFTER base's max-width:820px
   rule at the same specificity and silently reinstates two columns on a phone */
@media(min-width:821px){.heroGrid{grid-template-columns:minmax(0,1fr) minmax(0,300px)}}
.heroGrid p{font-family:var(--fdisp);font-weight:300;font-size:clamp(20px,2.4vw,30px);
  line-height:1.34;max-width:26ch}
.heroGrid b{font-weight:500}
.facts span{font-size:10.5px;letter-spacing:.13em}

/* air and rules */
section{padding:clamp(66px,9.5vw,140px) 0;border-top:0}
.head{margin-bottom:36px}
.head h2{font-weight:400;letter-spacing:-.012em;line-height:1.03;
  font-size:clamp(32px,5.6vw,68px)}
.no{font-weight:500;font-size:10.5px;letter-spacing:.22em;opacity:.62}
.intro{font-family:var(--fdisp);font-style:italic;font-weight:300;
  font-size:clamp(19px,2.1vw,25px);line-height:1.44;max-width:42ch;
  color:#c8cad3;margin-bottom:42px}
canvas.rule{height:28px}

.dock{padding:36px 0;border-top:1px solid var(--line)}
.dock .ex{font-size:10px;letter-spacing:.22em;padding-top:11px}
.dock h3{font-family:var(--fdisp);font-weight:500;letter-spacing:-.012em;
  font-size:clamp(23px,3.1vw,36px);line-height:1.08;margin-bottom:11px}
.dock h3 a{box-shadow:inset 0 -1px 0 rgba(157,182,212,.45)}
.dock p{font-size:16px;max-width:56ch}
.tags span{font-size:10.5px;letter-spacing:.1em}
.more{font-family:var(--fdisp);font-weight:400;font-size:19px}

/* every panel becomes a ruled list */
.spec{border:0;border-top:1px solid var(--line);background:transparent;padding:6px 0 0}
.spec div{padding:10px 0;border-bottom:1px solid var(--line)}
.spec .k{width:78px;font-size:10px;letter-spacing:.14em}
.spec .v{font-size:14.5px}
.two p{font-size:16.5px;max-width:52ch}
.kit{border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 clamp(26px,4.4vw,64px)}
.kit>div{border-right:0;border-bottom:1px solid var(--line);padding:24px 0 28px}
.kit h3{font-size:10.5px;letter-spacing:.22em}
.kit p{font-size:14.5px}
.now{border:0;border-top:1px solid var(--line);border-left:0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(26px,4.4vw,64px)}
.now>div{border:0;border-bottom:1px solid var(--line);padding:22px 0 24px}
.now h3{font-size:10.5px;letter-spacing:.22em}
.contact{background:transparent;border:0;border-top:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 clamp(26px,4.4vw,64px)}
.contact div{background:transparent;border-right:0;border-bottom:1px solid var(--line);padding:20px 0 22px}
.contact .k{font-size:10px;letter-spacing:.2em}
.contact a{font-weight:400;font-size:clamp(18px,2.5vw,27px);letter-spacing:-.008em}
footer{border-top:1px solid var(--line);padding:26px 0 60px;font-size:12.5px}

@media(min-width:960px){
  .head{grid-template-columns:214px 1fr}
  .intro,.dock,.two,.kit,.now,.contact,footer{margin-left:214px}
  .dock{grid-template-columns:minmax(0,214px) minmax(0,1fr)}
}
/* The nav row is a horizontal scroller on phones. Measured on the original eclipse: the cv
   link sat 73px past the right edge at 320 and 5px past at 390, i.e. permanently half-cut.
   Pin it to the right of the scrollport so it is always whole and always reachable. */
@media(max-width:480px){
  .nav .wrap{gap:var(--navgap,7px)}
  .nav a{letter-spacing:0}
  .nav .cv{position:sticky;right:0;background:var(--paper);padding:4px 0 4px 14px}
}

/* ---- production-only ---- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--orange);color:var(--dark);
  padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{left:0}
/* .spec rows are flex, which beats the UA stylesheet's [hidden]{display:none} */
.spec div[hidden]{display:none}
.spec .live{border-bottom:0;color:var(--mute);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;padding-top:9px}
.spec .live b{color:var(--green);font-weight:600;letter-spacing:.1em}
.spec .live b:after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;
  border-radius:50%;background:var(--green);vertical-align:middle}

/* ---- nav breathing room on small screens ----
   Measured before this block: the brand rendered at 18px at every width (a plain
   `.nav b` later in the file was silently beating the earlier max-width:480 rule),
   which left 5px between every link on a phone and pushed the row 63px into
   horizontal scroll at 320. Dropping the surname and sizing the brand down buys
   back enough width for a real gap and kills the scroll. */
.nav .wrap{gap:var(--navgap,clamp(10px,3vw,28px))}
@media(max-width:720px){
  .nav b{font-size:15px}
  .nav .sur{display:none}
  .nav .wrap{--navgap:18px}
  .nav a{font-size:13px;letter-spacing:.02em}
}
@media(max-width:480px){
  .nav b{font-size:14px}
  .nav .wrap{--navgap:15px}
  .nav .cv{padding-left:12px}
}
@media(max-width:360px){
  .nav .wrap{--navgap:11px}
  .nav a{font-size:12.5px}
}

/* ---- contact: the email must never wrap ----
   maxanderson.nz@gmail.com is ~12em wide, and the auto-fit grid was handing it a
   244-280px column at 900px and up while the type sat at 22.5-27px, so it broke onto
   two lines at 900/1180/1280/1440/1920. The email column now takes a larger share of
   the row and the display size is capped where the string still fits the narrowest
   column the grid produces. */
@media(min-width:721px){
  .contact{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr)}
}
.contact a{font-size:clamp(17px,2vw,22px)}