/* Shared look for the About, Collect and Shop pages (the Work page carries its own copy). */
:root{--ink:#292929;--paper:#fff;--soft:#666;--faint:#999;--line:#e6e6e2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Jost','Futura','Century Gothic',Arial,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}

/* header */
header{height:108px;padding:0 clamp(22px,5vw,90px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
header .brand{grid-column:2}header .nav{grid-column:3;justify-self:end}
.brand{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:inherit}
.brand img{height:29px;width:auto}
.byline{font-family:'Jost','Futura','Century Gothic',sans-serif;font-size:11px;font-weight:300;line-height:1;color:#555;white-space:nowrap;display:block}
.nav{display:flex;gap:26px}
.nav a{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.16em;text-decoration:none;color:#666;padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{color:#222}
.nav a.here{color:#222;border-bottom-color:#222}

/* page */
main{max-width:1080px;margin:0 auto;padding:30px 22px 90px}
.page-head{text-align:center;margin:20px 0 50px}
.eyebrow{display:block;font-size:11px;letter-spacing:.26em;color:#888;text-transform:uppercase;margin-bottom:14px}
h1,h2{font-weight:300;text-transform:uppercase;color:var(--ink);margin:0}
h1{font-size:clamp(24px,3.4vw,36px);letter-spacing:.18em}
h2{font-size:clamp(18px,2.2vw,24px);letter-spacing:.16em}
.rule{width:40px;height:1px;background:#c9c9c4;margin:16px auto}
.lede{max-width:600px;margin:0 auto;font-size:15px;line-height:1.8;color:#555}
p{line-height:1.8}
.btn{display:inline-block;padding:14px 30px;border:1px solid var(--ink);background:none;color:var(--ink);text-decoration:none;font-family:inherit;font-weight:400;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--ink);color:#fff}.btn.solid:hover{background:#000}
.fine{font-size:12px;color:var(--faint);letter-spacing:.03em;line-height:1.6}

/* footer */
footer{padding:48px 40px 34px;text-align:center;color:#999;font-size:10px;letter-spacing:.15em;font-family:Arial,Helvetica,sans-serif;border-top:1px solid #f1f1f1}
.footer-logo{height:14px;width:auto;opacity:.45;margin:0 auto 12px}
.psycho{display:inline-block;margin-top:26px;padding:6px 12px;border:1px solid var(--line);border-radius:2px;font-family:'Jost','Futura',sans-serif;font-weight:400;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:#b5b5b0;text-decoration:none;transition:color .3s,border-color .3s}
.psycho:hover{color:#292929;border-color:#292929}

@media(max-width:600px){
  header{height:auto;padding:18px 16px 14px;grid-template-columns:1fr;row-gap:12px;justify-items:center}
  header .brand,header .nav{grid-column:1;justify-self:center}
  .brand img{height:23px}.byline{font-size:9.6px}
  .nav{gap:16px}.nav a{font-size:9.5px}
}