/* =========================================================
   262FINDS — shared stylesheet
   A card-catalog / workshop-drawer system. Used by every page.
   ========================================================= */

:root{
  --cabinet:        #2B3A2F;
  --cabinet-dark:   #1B251E;
  --kraft:          #E8DCC4;
  --paper:          #F6F0E4;
  --paper-dim:      #ECE3D2;
  --brass:          #B6914F;
  --brass-light:    #D2B57C;
  --rust:           #A4502C;
  --ink:            #211D19;
  --ink-soft:       #4A443C;

  --font-display: 'Big Shoulders Stencil Text', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --radius: 3px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

:focus-visible{
  outline:3px solid var(--rust);
  outline-offset:3px;
}

.grain{
  background-image:
    radial-gradient(rgba(33,29,25,0.035) 1px, transparent 1px),
    radial-gradient(rgba(33,29,25,0.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
}

/* ============ HEADER / NAV ============ */
.site-header{
  background:var(--cabinet-dark);
  color:var(--paper);
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:4px solid var(--brass);
}

.wordmark{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(22px,3vw,28px);
  letter-spacing:0.04em;
  color:var(--paper);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark span{ color:var(--brass-light); }

.main-nav{
  display:flex;
  flex-wrap:wrap;
  gap:2px 0;
  align-items:center;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.03em;
  flex:1;
  justify-content:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.nav-link{
  text-decoration:none;
  color:var(--kraft);
  padding:6px 10px;
  border-radius:var(--radius);
  white-space:nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible{
  background:rgba(182,145,79,0.25);
  color:var(--brass-light);
}
.nav-link.active{
  color:var(--brass-light);
  background:rgba(182,145,79,0.18);
  box-shadow:inset 0 -2px 0 var(--brass);
}
.nav-divider{ color:rgba(246,240,228,0.25); }

.subscribe-cta{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  background:var(--brass);
  color:var(--ink);
  border:none;
  padding:9px 16px;
  border-radius:var(--radius);
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.subscribe-cta:hover, .subscribe-cta:focus-visible{
  background:var(--brass-light);
  transform:translateY(-1px);
}

/* ============ HOME HERO ============ */
.hero{
  position:relative;
  background:var(--kraft);
  padding:80px 28px 90px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(33,29,25,0.04) 1px, transparent 1px);
  background-size:4px 4px;
  pointer-events:none;
}

.stamp{
  width:148px; height:148px;
  border:3px solid var(--rust);
  border-radius:50%;
  margin:0 auto 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-7deg);
  position:relative;
  color:var(--rust);
  font-family:var(--font-mono);
  text-align:center;
  line-height:1.3;
  opacity:0.85;
  animation: stamp-in .5s var(--ease) .1s both;
}
.stamp.stamp-sm{ width:108px; height:108px; }
.stamp::before{
  content:"";
  position:absolute; inset:8px;
  border:1px dashed var(--rust);
  border-radius:50%;
}
.stamp-text{ font-size:11px; font-weight:700; letter-spacing:0.05em; }
.stamp-num{ font-size:20px; font-weight:700; }
.stamp.stamp-sm .stamp-num{ font-size:16px; }
.stamp.stamp-sm .stamp-text{ font-size:9px; }

@keyframes stamp-in{
  from{ opacity:0; transform:rotate(-7deg) scale(0.7); }
  to{ opacity:0.85; transform:rotate(-7deg) scale(1); }
}

.hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(48px,11vw,108px);
  letter-spacing:0.02em;
  color:var(--ink);
  line-height:0.95;
}
.hero h1 em{ font-style:normal; color:var(--rust); }

.hero p.lede{
  max-width:560px;
  margin:24px auto 0;
  font-size:17px;
  color:var(--ink-soft);
}
.hero p.manifesto{
  max-width:480px;
  margin:18px auto 0;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-soft);
  border-top:1px dashed rgba(33,29,25,0.3);
  padding-top:16px;
}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
  position:relative;
  background:var(--kraft);
  padding:64px 28px 56px;
  text-align:center;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(33,29,25,0.04) 1px, transparent 1px);
  background-size:4px 4px;
  pointer-events:none;
}
.back-link{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.03em;
  color:var(--rust);
  text-decoration:none;
  margin-bottom:22px;
  position:relative;
  z-index:1;
}
.back-link:hover, .back-link:focus-visible{ text-decoration:underline; }

.page-hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(34px,6vw,58px);
  letter-spacing:0.01em;
  color:var(--ink);
  position:relative;
  z-index:1;
}
.page-hero p.lede{
  max-width:520px;
  margin:18px auto 0;
  font-size:16px;
  color:var(--ink-soft);
  position:relative;
  z-index:1;
}

/* ============ CATALOG GRID (home) ============ */
.catalog{
  background:var(--paper);
  padding:70px 28px 90px;
  max-width:1180px;
  margin:0 auto;
}
.section-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.15em;
  color:var(--ink-soft);
  text-align:center;
  margin-bottom:6px;
}
.section-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px,4vw,40px);
  text-align:center;
  margin-bottom:48px;
}

.drawer-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
@media (max-width:880px){ .drawer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .drawer-grid{ grid-template-columns:1fr; } }

.drawer{
  position:relative;
  background:var(--paper-dim);
  border:1px solid rgba(33,29,25,0.12);
  border-radius:var(--radius);
  padding:26px 22px 22px;
  text-decoration:none;
  color:var(--ink);
  display:block;
  transform:rotate(var(--tilt,0deg));
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  box-shadow:0 1px 0 rgba(33,29,25,0.06);
}
.drawer:hover, .drawer:focus-visible{
  transform:rotate(0deg) translateY(-5px);
  box-shadow:0 14px 26px -10px rgba(33,29,25,0.28);
  border-color:var(--brass);
}
.drawer-eyelet{
  position:absolute; top:14px; left:14px;
  width:10px; height:10px; border-radius:50%;
  background:var(--brass);
  box-shadow:inset 0 1px 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3);
}
.drawer-number{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--brass);
  font-weight:700;
  letter-spacing:0.05em;
  margin-bottom:10px;
  margin-left:24px;
}
.drawer-label{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:0.01em;
  margin-bottom:10px;
}
.drawer-desc{
  font-size:14.5px;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.drawer-pull{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--rust);
  font-weight:700;
}

/* ============ ENTRY CARDS (subpages) ============ */
.entries{
  padding:60px 28px 90px;
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.entry-card{
  position:relative;
  background:var(--paper-dim);
  border:1px solid rgba(33,29,25,0.12);
  border-radius:var(--radius);
  padding:24px 26px;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.entry-card:hover, .entry-card:focus-visible{
  border-color:var(--brass);
  box-shadow:0 10px 20px -10px rgba(33,29,25,0.22);
  transform:translateY(-2px);
}
.entry-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--brass);
  margin-bottom:10px;
}
.entry-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:21px;
  margin-bottom:8px;
}
.entry-blurb{
  font-size:14.5px;
  color:var(--ink-soft);
  margin-bottom:14px;
}
.entry-more{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  color:var(--rust);
  text-decoration:none;
}
.entry-more:hover, .entry-more:focus-visible{ text-decoration:underline; }

.entries-note{
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-soft);
  opacity:0.75;
  margin-top:4px;
}

/* ============ REVEAL ANIMATION (shared) ============ */
.reveal{
  opacity:0;
  transform:translateY(14px);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.drawer.reveal{ transform:translateY(14px) rotate(var(--tilt,0deg)); }
.drawer.reveal.in-view{ transform:rotate(var(--tilt,0deg)); }

/* ============ NEWSLETTER ============ */
.newsletter{
  background:var(--cabinet);
  color:var(--paper);
  padding:80px 28px;
  text-align:center;
  position:relative;
}
.slip{
  max-width:540px;
  margin:0 auto;
  border:1px dashed rgba(246,240,228,0.4);
  border-radius:var(--radius);
  padding:40px 32px;
  position:relative;
}
.slip::before{
  content:"";
  position:absolute; top:-7px; left:50%;
  transform:translateX(-50%);
  width:14px; height:14px;
  border-radius:50%;
  background:var(--brass);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);
}
.newsletter h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(26px,4vw,36px);
  margin-bottom:12px;
}
.newsletter p{
  color:var(--kraft);
  font-size:14.5px;
  max-width:420px;
  margin:0 auto 28px;
}
.newsletter-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.newsletter-form input[type="email"]{
  flex:1 1 240px;
  min-width:0;
  padding:13px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(246,240,228,0.3);
  background:var(--cabinet-dark);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:14.5px;
}
.newsletter-form input[type="email"]::placeholder{ color:rgba(246,240,228,0.45); }
.newsletter-form button{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.04em;
  background:var(--brass);
  color:var(--ink);
  border:none;
  padding:13px 22px;
  border-radius:var(--radius);
  cursor:pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.newsletter-form button:hover, .newsletter-form button:focus-visible{
  background:var(--brass-light);
  transform:translateY(-1px);
}
.newsletter-confirm{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--brass-light);
  min-height:18px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.newsletter-confirm.show{ opacity:1; transform:translateY(0); }
.newsletter-fineprint{
  margin-top:22px !important;
  font-family:var(--font-mono);
  font-size:11px !important;
  color:rgba(246,240,228,0.45) !important;
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--cabinet-dark);
  color:rgba(246,240,228,0.55);
  text-align:center;
  padding:26px 28px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.03em;
}
.site-footer span{ color:var(--brass-light); }
.site-footer a{ text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible{ text-decoration:underline; color:var(--brass-light); }