/* site.css — the one shared design system for jaysapia.com.
   Converged 2026-09-30 from two parallel token sets: the original
   --black/--gold/--white/--fb system (About/Media/Contact/Manifesto)
   and the newer --ground/--accent/--ink/--f system the homepage was
   built with. The homepage's system won — it was the most recently
   and carefully tuned — so every page now shares these same tokens.
   Loaded BEFORE each page's own <style> (or home.css for the homepage),
   so page-specific rules still win. */

:root {
  color-scheme: dark;

  /* ground */
  --void:        #000000;   /* the quiet sections */
  --ground:      #1A1A1A;   /* hero bases, mid-dark */
  --lift:        #111010;   /* a half-step up from void */
  --panel:       #0C0B0A;   /* footers */

  /* ink */
  --ink:         #F7F6F4;
  --dim:         #A5A29E;
  --faint:       #75726E;
  --hair:        #221F1A;
  --hair-lift:   #2A2724;

  /* accent — interactive elements and the wordmark ONLY.
     Never emphasis on body text, never a heading colour. */
  --accent:      #C4A45A;
  --accent-lit:  #D3B36A;
  --accent-dim:  rgba(196,164,90,0.11);
  --accent-b:    rgba(196,164,90,0.18);
  --accent-bmd:  rgba(196,164,90,0.35);

  /* type */
  --f:  "Archivo","Helvetica Neue",Arial,sans-serif;
  --fd: "Cormorant Garamond",Georgia,serif;

  --ease: cubic-bezier(.2,.6,.2,1);
  --t:    0.2s cubic-bezier(.2,.6,.2,1);
}

*,*::before,*::after {box-sizing:border-box;}

img { max-width: 100%; height: auto; display: block;}

a { color: inherit; text-decoration: none;}

ul { list-style: none;}

.wrap {max-width:1240px;margin:0 auto;padding:0 clamp(1.5rem,5vw,4rem);}

/* ---------- shared: section label ---------- */
.kicker{
  font-weight:800;font-stretch:74%;
  font-size:clamp(20px,2vw,28px);line-height:1;
  letter-spacing:.02em;text-transform:uppercase;
  color:var(--faint);
  margin:0 0 clamp(26px,3.4vh,42px);
}

/* ---------- shared: buttons and links ---------- */
.btn-primary {display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--f);font-size:0.7rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;background:var(--accent);color:var(--void);padding:0.95rem 2.2rem;border:1px solid var(--accent);transition:all var(--t);cursor:pointer;}
.btn-primary:hover{background:var(--accent-lit);border-color:var(--accent-lit);transform:translateY(-1px);}
.btn-primary:hover .arrow, .btn-outline:hover .arrow { transform: translateX(4px);}

.btn-outline {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-family: var(--f); font-size: 0.7rem; font-weight: 500;
      letter-spacing: 0.18em; text-transform: uppercase;
      background: transparent; color: var(--accent);
      padding: 0.95rem 2.2rem; border: 1px solid var(--accent-bmd);
      transition: all var(--t); cursor: pointer;}
.btn-outline:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-lit);}

.arrow { display: inline-block; transition: transform var(--t);}

.textlink{
  color:var(--accent);text-decoration:none;
  font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  border-bottom:1px solid var(--accent-bmd);
  padding-bottom:5px;
  transition:border-color var(--t);
}
.textlink:hover{border-bottom-color:var(--accent);}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:80px;padding:0 clamp(24px,3.6vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  transition:background var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.nav .logo{display:flex;align-items:center;gap:13px;text-decoration:none;}
.nav .logo-mark{
  width:50px;height:50px;border:1px solid var(--accent-bmd);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd);font-size:1.25rem;font-weight:500;
  color:var(--accent);letter-spacing:.05em;
  transition:background var(--t);
}
.nav .logo-name{font-family:var(--fd);font-size:1.3rem;font-weight:600;letter-spacing:.05em;color:var(--ink);}
.logo:hover .logo-mark{background:var(--accent-dim);}

.nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none;margin:0;padding:0;}
.nav-links li{display:flex;align-items:center;}
.nav-links a{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-size:.69rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(247,246,244,.6);text-decoration:none;padding-bottom:2px;
  transition:color var(--t);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a svg{display:block;flex-shrink:0;}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--accent);transition:width var(--t);
}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--accent);}
.nav-links a.active::after{width:100%;}

.nav-cta{color:var(--accent) !important;padding:0.55rem 1.25rem !important;border:1px solid var(--accent-bmd) !important;transition:all var(--t) !important;}
.nav-cta:hover{background:var(--accent) !important;color:var(--void) !important;border-color:var(--accent) !important;}
.nav-cta::after{display:none !important;}

/* ---------- mobile menu ---------- */
.hamburger{
  display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;padding:0;
}
.hamburger span{
  display:block;height:1.5px;width:22px;background:var(--ink);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}
.nav.menu-open .hamburger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav.menu-open .hamburger span:nth-child(2){opacity:0;}
.nav.menu-open .hamburger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.nav.scrolled{background:rgba(10,10,10,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);}
.nav.menu-open{background:rgba(10,10,10,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);}

@media (max-width:900px){
  .hamburger{display:flex;}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(10,10,10,.97);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hair);
    flex-direction:column;gap:0;padding:8px 0;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px clamp(24px,3.6vw,56px);font-size:16px;}
}

/* ---------- footer: newsletter + nav links row (About/Media/Contact/Manifesto) ---------- */
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;}
.footer-logo .logo-mark { width: 34px; height: 34px; font-size: 0.85rem;}

.fc { text-align: right;}
.fc a:hover { color: var(--ink);}

.footer-top {
      display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr);
      gap: 3rem; align-items: start;
      padding-bottom: 4rem; border-bottom: 1px solid var(--accent-b);}

.footer-newsletter { text-align: left;}

.footer-lockup {
      font-family: var(--fd); font-weight: 300;
      font-size: clamp(1.9rem,3.2vw,2.9rem);
      line-height: 0.96; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 22px;}
.footer-lockup em { font-style: italic; color: var(--accent);}

@media (max-width: 900px) {
      .footer-top { grid-template-columns: 1fr; gap: 2.5rem;}
      .footer-grid { justify-content: flex-start;}
}

/* ---------- footer: full homepage footer (Index.html, via home.css markup) ---------- */
.foot{
  background:var(--panel);
  border-top:1px solid var(--hair);
  padding:clamp(60px,8vh,96px) clamp(24px,3.6vw,56px) 0;
}
.foot-in{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(40px,6vw,90px);align-items:start;
}
.foot-newsletter{text-align:left;}
.foot-lockup{
  font-family:var(--fd);font-weight:300;
  font-size:clamp(1.9rem,3.2vw,2.9rem);
  line-height:.96;letter-spacing:-.03em;margin:0 0 22px;
}
.foot-lockup em{font-style:italic;color:var(--accent);}

.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,50px);text-align:right;}
.foot-links h2{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;font-weight:600;
}
.foot-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot-links a{color:var(--dim);text-decoration:none;font-size:14.5px;transition:color var(--t);}
.foot-links a:hover{color:var(--ink);}

.foot-bar{
  max-width:1320px;margin:clamp(50px,7vh,84px) auto 0;
  border-top:1px solid var(--hair);padding:22px 0 26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot-bar p,.foot-bar a{margin:0;color:var(--faint);font-size:12.5px;text-decoration:none;}
.foot-bar a:hover{color:var(--dim);}

@media (max-width:900px){
  .foot-in{grid-template-columns:1fr;gap:44px;}
}

/* ---------- shared: newsletter/footer email form ---------- */
.bh-form { display: flex; gap: 0;}
.bh-input {
      width: 170px; background: var(--lift);
      border: 1px solid var(--hair); border-right: none;
      color: var(--ink); font-family: var(--f); font-size: 14px;
      padding: 9px 15px; outline: none;
      transition: border-color var(--t);}
.bh-input::placeholder { color: var(--faint);}
.bh-input:focus { border-color: var(--accent-bmd);}
.bh-btn {
      font-family: var(--f); font-size: 11px; font-weight: 600;
      letter-spacing: 0.16em; text-transform: uppercase;
      background: var(--accent); color: var(--void);
      padding: 9px 24px; border: 1px solid var(--accent);
      cursor: pointer; white-space: nowrap;
      transition: background var(--t), border-color var(--t);}
.bh-btn:hover { background: var(--accent-lit); border-color: var(--accent-lit);}

@media (max-width: 360px) {
      .bh-form { flex-direction: column;}
      .bh-input { width: auto; border-right: 1px solid var(--hair); border-bottom: none;}
      .bh-btn { width: 100%;}
}

/* ---------- misc shared ---------- */
body::after {content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");opacity:0.5;}

.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);}
.fade-up.visible { opacity: 1; transform: none;}

.footer {
      background: var(--panel);
      border-top: 1px solid var(--accent-b);
      padding: 5rem 0 2.5rem;}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}