/* The Iconic Gentleman — shared styles (used by every page) */

:root{
  --ink:#17150F;
  --paper:#F4F1EA;
  --accent-light:#6B2318;
  --accent-dark:#C08A70;
  --hairline-on-paper:rgba(23,21,15,0.15);
  --hairline-on-ink:rgba(244,241,234,0.22);
  --side-pad:clamp(1.25rem, 5vw, 4rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo', Arial, Helvetica, sans-serif;
  font-variation-settings:'wdth' 100, 'wght' 400;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
button{font:inherit;color:inherit;}

/* subtle paper grain across every page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0.045;
  mix-blend-mode:multiply;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='300'%20height='300'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{
  outline:2px solid var(--accent-light);
  outline-offset:3px;
}
.on-ink :focus-visible{outline-color:var(--accent-dark);}

/* ---- type roles ---- */
.display{
  font-family:'Archivo', Arial, sans-serif;
  font-variation-settings:'wdth' 125, 'wght' 500;
  font-weight:500;
}
.label{
  font-family:'Space Grotesk', Arial, sans-serif;
  font-weight:500;
  letter-spacing:0.01em;
}

/* ---- header ---- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem var(--side-pad);
  border-bottom:1px solid var(--hairline-on-paper);
  background:rgba(244,241,234,0.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translateY(-100%);
  transition:transform 0.35s ease;
}
.site-header.is-visible{transform:translateY(0);}
.monogram{
  font-family:'Archivo', Arial, sans-serif;
  font-variation-settings:'wdth' 100, 'wght' 500;
  font-weight:500;
  letter-spacing:-0.06em;
  font-size:1.35rem;
  text-decoration:none;
}
.monogram .i{color:var(--accent-light);}
.on-ink .monogram .i{color:var(--accent-dark);}

.nav-follow{
  font-size:0.85rem;
  letter-spacing:0.01em;
  text-decoration:none;
  border-bottom:1px solid var(--hairline-on-paper);
  padding-bottom:2px;
  transition:border-color 0.2s ease;
}
.nav-follow:hover{border-color:var(--accent-light);}

/* small double-rule ornament — the one recurring "masthead" flourish, used sparingly */
.hero-rule{
  width:4.5rem;
  height:5px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  opacity:0.3;
  margin:clamp(1.5rem, 4vw, 2rem) 0;
}
.on-ink .hero-rule{border-top-color:var(--paper); border-bottom-color:var(--paper);}

/* TIG / [name] prefix — reused wherever a section or category is named */
.index-prefix{
  display:inline-flex;
  align-items:baseline;
  gap:0.3rem;
  flex:0 0 auto;
  opacity:0.5;
  transition:opacity 0.25s ease;
}
.index-prefix-mark{
  font-family:'Archivo', Arial, sans-serif;
  font-variation-settings:'wdth' 100, 'wght' 500;
  font-weight:500;
  letter-spacing:-0.06em;
  font-size:0.85rem;
}
.index-prefix-mark .i{color:var(--accent-light);}
.index-prefix-slash{
  font-size:0.85rem;
  opacity:0.6;
}

/* ---- CTA (dark bar) ---- */
.cta{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(3.5rem, 10vw, 6rem) var(--side-pad);
}
.cta-lead{
  font-family:'Space Grotesk', Arial, sans-serif;
  font-weight:500;
  font-size:clamp(0.85rem, 1.4vw, 1rem);
  opacity:0.75;
  margin:0 0 1rem;
}
.cta-handle{
  display:inline-block;
  text-decoration:none;
  letter-spacing:-0.02em;
  font-size:clamp(2rem, 7vw, 4.5rem);
  line-height:1.05;
  border-bottom:2px solid transparent;
  transition:border-color 0.2s ease;
}
.cta-handle:hover, .cta-handle:focus-visible{
  border-color:var(--accent-dark);
}

.cta-divider{
  border:none;
  border-top:1px solid var(--hairline-on-ink);
  margin:clamp(2.25rem, 6vw, 3.5rem) 0 clamp(1.5rem, 5vw, 2.25rem);
  max-width:22rem;
}
.cta-collab-title{
  font-size:clamp(1.25rem, 3vw, 1.75rem);
  letter-spacing:-0.01em;
  max-width:16em;
  margin:0 0 0.6rem;
}
.cta-collab-sub{
  font-size:clamp(0.9rem, 1.6vw, 1.02rem);
  opacity:0.7;
  max-width:26em;
  margin:0 0 1.25rem;
}
.cta-collab-link{
  display:inline-block;
  text-decoration:none;
  font-size:0.95rem;
  letter-spacing:0.01em;
  border-bottom:1px solid var(--hairline-on-ink);
  padding-bottom:2px;
  transition:border-color 0.2s ease;
}
.cta-collab-link:hover, .cta-collab-link:focus-visible{
  border-color:var(--accent-dark);
}

/* ---- footer ---- */
footer{
  padding:1.75rem var(--side-pad) 2.5rem;
  border-top:1px solid var(--hairline-on-paper);
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem 2rem;
  align-items:center;
  justify-content:space-between;
  font-size:0.85rem;
}
footer a{text-decoration:none;border-bottom:1px solid var(--hairline-on-paper);}
footer a:hover{border-color:var(--accent-light);}

@media (prefers-reduced-motion:reduce){
  .site-header{transition-duration:0.01ms;}
  html{scroll-behavior:auto;}
}