/* benford.co.nz — one stylesheet for every page.
   Light: cream. Dark: gunmetal. Follows the device until the toggle is used. */
:root{
  --bg:#f5f0e4; --ink:#22272b; --mute:#6c685e; --rule:#e0d9c8; --panel:#fbf8f1;
  --w:640px; --gut:20px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1c2327; --ink:#e9e6dd; --mute:#9aa1a4; --rule:#323c42; --panel:#232c31;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1c2327; --ink:#e9e6dd; --mute:#9aa1a4; --rule:#323c42; --panel:#232c31;
  color-scheme:dark;
}

/* Highlight marker: --c, or --cd in dark mode when the brand colour vanishes on gunmetal */
.hl .row{--mark:var(--c)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hl .row{--mark:var(--cd,var(--c))}}
:root[data-theme="dark"] .hl .row{--mark:var(--cd,var(--c))}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Geist,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;transition:background .2s,color .2s}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}

/* Header — identical on every page so it never moves */
.site-hd{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:56px 0 0;height:96px}
.site-hd .me{font-weight:500;text-decoration:none}
.site-hd nav{display:flex;align-items:baseline;gap:18px;font-size:15px}
.site-hd nav a{text-decoration:none;opacity:.68}
.site-hd nav a:hover,.site-hd nav a[aria-current]{opacity:1}
.theme-btn{font:inherit;font-size:15px;color:inherit;background:none;border:0;padding:0;cursor:pointer;opacity:.68}
.theme-btn:hover{opacity:1}

/* Type */
.intro{font-size:24px;line-height:1.45;font-weight:500;letter-spacing:-.015em;margin:72px 0 88px}
.intro a{text-decoration-thickness:1px;text-underline-offset:4px}
h2,.label{font-size:13px;font-weight:500;color:var(--mute);margin:0 0 14px;text-transform:uppercase;letter-spacing:.06em}
main h2{margin-top:72px}
main p{margin:0 0 14px}
main p a{text-decoration-thickness:1px;text-underline-offset:3px}

/* Project rows */
.row{display:block;text-decoration:none;padding:18px 0;border-top:1px solid var(--rule)}
.rows .row:last-child{border-bottom:1px solid var(--rule)}
.row .top{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.row .name{font-size:18px;font-weight:600;letter-spacing:-.01em}
.row .host{font-size:14px;color:var(--mute);white-space:nowrap}
.row p{margin:4px 0 0;color:var(--mute)}
.row:hover .name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Highlights — same row in a quiet panel; the colour lives on the project page */
.hl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:72px}
.hl .row{border:1px solid var(--rule);padding:22px 22px 24px;background:var(--panel);transition:border-color .15s}
.hl .row .top{flex-direction:column;gap:2px}
.hl .row .name::before{content:"";display:inline-block;width:10px;height:10px;background:var(--mark);margin-right:10px;vertical-align:1px}
.hl .row:hover{border-color:var(--mark)}
.hl .row:last-child:nth-child(odd){grid-column:1/-1}

/* Footer */
.site-ft{margin:96px 0 0;padding:0 0 64px;color:var(--mute);font-size:15px;display:flex;gap:18px;flex-wrap:wrap}
.site-ft a{text-decoration:none}
.site-ft a:hover{color:var(--ink)}

/* Project pages: a band in the project's own colours, holding the header */
.band{background:var(--p-bg);color:var(--p-fg);padding-bottom:64px}
.band .hero h1{font-size:44px;line-height:1.05;letter-spacing:-.035em;font-weight:600;margin:72px 0 16px;color:var(--p-accent)}
.band .lede{font-size:21px;line-height:1.45;letter-spacing:-.012em;font-weight:500;margin:0 0 28px}
.visit{display:inline-block;background:var(--p-accent);color:var(--p-bg);text-decoration:none;font-weight:600;padding:11px 18px;font-size:15px}
.visit:hover{filter:brightness(1.08)}
.facts{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:14px;margin:22px 0 0;opacity:.75}
figure{margin:56px 0 0}
figure img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
figcaption{color:var(--mute);font-size:14px;margin-top:10px}
.wide{margin-left:-80px;margin-right:-80px}
.shots figure{margin-top:28px}
ul.feat{list-style:none;padding:0;margin:0}
ul.feat li{padding:12px 0;border-top:1px solid var(--rule)}
ul.feat li:last-child{border-bottom:1px solid var(--rule)}
ul.feat b{font-weight:600}
ul.feat span{color:var(--mute)}
dl.built{display:grid;grid-template-columns:120px 1fr;margin:0}
dl.built dt,dl.built dd{margin:0;padding:9px 0;border-top:1px solid var(--rule)}
dl.built dt{color:var(--mute)}
dl.built dd a{text-decoration-thickness:1px;text-underline-offset:3px}
.embed iframe{display:block}

@media (max-width:820px){.wide{margin-left:0;margin-right:0}}
@media (max-width:560px){
  .site-hd{padding-top:32px;height:72px}
  .site-hd nav{gap:14px}
  .intro{font-size:21px;margin:48px 0 64px}
  .row .host{display:none}
  .hl{grid-template-columns:1fr}
  .band .hero h1{font-size:34px;margin-top:48px}
  .band .lede{font-size:18px}
}