/* NETsourcing — shared styles (concept 04 "One of One", revised) */
:root{
  --gallery:#e9e7e2; --gallery2:#f2f1ed; --bone:#dedbd4; --graphite:#26262a;
  --dim:#77767e; --inkblue:#2b4a8a; --line:rgba(38,38,42,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--gallery);color:var(--graphite);font-family:'Schibsted Grotesk',sans-serif;line-height:1.55;overflow-x:hidden}
.mono{font-family:'IBM Plex Mono',monospace}
img{max-width:100%;display:block}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px 36px;background:linear-gradient(180deg,rgba(233,231,226,.95),rgba(233,231,226,.75) 70%,rgba(233,231,226,0));backdrop-filter:blur(6px)}
.logo{font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--graphite);text-decoration:none}
.logo span{font-weight:400}
.logo sup{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--inkblue);letter-spacing:.1em}
nav .menu{display:flex;gap:26px}
nav .menu a{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .25s}
nav .menu a:hover,nav .menu a.active{color:var(--graphite)}

/* typography helpers */
.label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--inkblue)}
h1.display{font-size:clamp(38px,6vw,84px);font-weight:700;letter-spacing:-.03em;line-height:1}
h2.display{font-size:clamp(26px,3.6vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.lead{font-size:16px;color:var(--dim);max-width:640px}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.on{opacity:1;transform:none}

/* plaque */
.plaque{display:inline-block;background:#fff;padding:14px 20px;box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:12.5px;line-height:1.7}
.plaque b{font-weight:700;display:block;font-size:14px}
.plaque .ed{font-family:'IBM Plex Mono',monospace;color:var(--inkblue);font-size:10.5px;letter-spacing:.12em;display:block;margin-top:4px}

/* buttons */
.cta{display:inline-block;padding:15px 40px;border:1px solid var(--graphite);color:var(--graphite);font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.25em;text-decoration:none;transition:all .3s;background:transparent}
.cta:hover{background:var(--graphite);color:var(--gallery)}
.cta.blue{border-color:var(--inkblue);color:var(--inkblue)}
.cta.blue:hover{background:var(--inkblue);color:var(--gallery)}

/* footer */
footer{border-top:1px solid var(--line);background:var(--gallery2);padding:56px 36px 30px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;max-width:1200px;margin:0 auto}
.foot-grid h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.foot-grid p,.foot-grid a{font-size:12.5px;color:var(--graphite);text-decoration:none;line-height:1.8}
.foot-grid .brand{font-weight:700;font-size:18px}
.foot-grid .brand sup{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--inkblue)}
.foot-base{max-width:1200px;margin:40px auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}

/* progress bar */
.progressbar{position:fixed;left:0;top:0;height:2px;background:var(--inkblue);width:0%;z-index:60}

/* page navigation (end-of-page continue links) */
.pagenav{display:grid;grid-template-columns:1.6fr 1fr;border-top:1px solid var(--line);background:var(--gallery)}
.pagenav a{display:block;padding:52px 36px;text-decoration:none;color:var(--graphite);transition:background .3s}
.pagenav a:hover{background:#fff}
.pagenav a+a{border-left:1px solid var(--line)}
.pagenav .k{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:12px}
.pagenav .v{font-size:clamp(20px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pagenav a:hover .v{color:var(--inkblue)}
@media(max-width:760px){.pagenav{grid-template-columns:1fr}.pagenav a+a{border-left:none;border-top:1px solid var(--line)}}

/* small inline step icons */
.sicon{width:24px;height:24px;stroke:var(--inkblue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

@media(max-width:760px){
  nav{padding:14px 20px}
  nav .menu{gap:14px}
  .foot-grid{grid-template-columns:1fr 1fr}
}