:root{
  --ink:#171916;
  --concrete:#F1E8D8;
  --raccoon:#827B70;
  --raccoon-text:#625C53;
  --caution:#D7C3A5;
  --trash:#314238;
  --signal:#C1432E;
  --moss:#59634A;
  --forest:#1E2A23;
  --line: rgba(23,25,22,0.14);
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--concrete);color:var(--ink);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Bitter',serif;font-weight:800;letter-spacing:0.2px;
  text-transform:uppercase;line-height:1.1;
}
a{color:inherit;}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--concrete);
  padding:12px 20px;z-index:200;font-weight:700;text-transform:uppercase;font-size:13px;
}
.skip-link:focus{left:12px;top:12px;}

header.site{
  background:var(--concrete);border-bottom:2px solid var(--ink);padding:20px 24px;
}
header.site .nav{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
}
.logo-wordmark{height:60px;width:auto;max-width:100%;object-fit:contain;}
@media(max-width:860px){
  .logo-wordmark{height:52px;}
}
@media(max-width:520px){
  .logo-wordmark{height:48px;}
}
.back-link{
  font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;text-decoration:none;
  border-bottom:2px solid transparent;
}
.back-link:hover{border-bottom-color:var(--caution);}

main{padding:56px 0 72px;}
main .tag{
  font-family:'Space Mono',monospace;font-size:12px;color:var(--trash);
  letter-spacing:1px;margin-bottom:8px;display:block;
}
main h1{font-size:clamp(28px,4vw,42px);margin:0 0 28px;}
main h2{font-size:20px;margin:32px 0 10px;}
main p, main li{font-size:15px;line-height:1.7;color:var(--raccoon-text);margin:0 0 14px;}
main ul{padding-left:20px;}
main strong{color:var(--ink);}

.contact-form{display:flex;flex-direction:column;gap:14px;max-width:480px;margin-top:20px;}
.contact-form label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.contact-form input, .contact-form textarea{
  padding:13px 14px;border:2px solid var(--ink);border-radius:2px;font-size:14px;
  font-family:'Inter',sans-serif;background:#fff;
}
.contact-form button{
  background:var(--ink);color:var(--concrete);border:none;border-radius:2px;
  padding:14px 22px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;
  cursor:pointer;width:fit-content;
}
.inline-notice{
  margin-top:12px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:2px;
  background:#fff;font-size:12.5px;line-height:1.5;color:var(--ink);display:none;
}
.inline-notice.show{display:block;}

footer{padding:32px 24px;border-top:2px solid var(--ink);text-align:center;}
footer p{font-size:12px;color:var(--raccoon-text);margin:0;}
footer a{text-decoration:underline;text-underline-offset:3px;font-weight:600;}
footer a:hover{color:var(--ink);}
.footer-links{list-style:none;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 0 12px;padding:0;}
.footer-links a{display:inline-block;padding:10px 10px;}

/* Reusable buttons — same treatment as the homepage's success-card
   primary button and Featured Collection's outline button, so nothing
   new is introduced site-wide. */
.btn-primary{
  background:var(--ink);color:var(--concrete);border:2px solid var(--ink);
  padding:15px 28px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  border-radius:2px;text-decoration:none;display:inline-block;min-height:44px;
}
.btn-primary:hover{background:var(--trash);border-color:var(--trash);}
.btn-outline-dark{
  padding:15px 28px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
  border-radius:2px;border:2px solid var(--ink);background:transparent;color:var(--ink);
  text-decoration:none;display:inline-block;min-height:44px;
}
.btn-outline-dark:hover{background:var(--ink);color:var(--concrete);}

/* Visible keyboard focus state — reused anywhere a page needs it. */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--trash);outline-offset:2px;
}

/* 404 page layout */
.notfound-main{
  min-height:56vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:48px 24px;
}
.notfound-content{max-width:520px;}
.notfound-icon{margin:0 auto 22px;display:block;color:var(--trash);}
.notfound-content .tag{display:block;text-align:center;}
.notfound-content h1{margin:0 0 14px;}
.notfound-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 34px;}
.notfound-links{
  list-style:none;padding:0;margin:0;display:flex;gap:14px;justify-content:center;
  flex-wrap:wrap;font-size:12.5px;
}
.notfound-links a{
  text-decoration:none;border-bottom:2px solid transparent;font-weight:600;
  text-transform:uppercase;letter-spacing:0.5px;display:inline-block;padding:10px 8px;
}
.notfound-links a:hover{border-bottom-color:var(--caution);}
@media(max-width:480px){
  .notfound-ctas{flex-direction:column;align-items:stretch;}
  .notfound-ctas a{text-align:center;}
}