/* ==========================================================================
   BJ Bindery — shared stylesheet
   Used by privacy-policy.html, terms-of-use.html, accessibility-statement.html

   Tokens, type, header, and footer are carried over verbatim from index.html
   so the legal pages sit inside the same system. See brand-guidelines.html.

   FONTS: Libre Caslon Text and Libre Franklin are NOT loaded here. The
   consent banner on these pages promises that Google Fonts only loads
   after the visitor accepts, so script.js injects the stylesheet at that
   point. Until then the stack falls back to Georgia and Helvetica, which
   are the brand's own declared fallbacks — the pages read correctly either
   way, they just lose the exact cut.
   ========================================================================== */

:root{
  --black:#161616;
  --charcoal:#2D2D2D;
  --gray:#666666;
  --light-gray:#E7E7E5;
  --off-white:#F7F7F4;
  --paper:#FBFAF7;
  --white:#FFFFFF;
  --font: "Libre Franklin", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --max: 1280px;
  --text-max: 760px;
  --radius: 4px;
  --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--black);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0 0 0.5em;
  color:var(--black);
}

/* h1/h2 carry the editorial voice in the trade's own serif. */
h1, h2{
  font-family:var(--font-serif);
  font-weight:400;
  letter-spacing:-0.005em;
  line-height:1.08;
}

h1{ font-size:clamp(2.25rem, 4.6vw, 3.5rem); letter-spacing:-0.01em; }
h2{ font-size:clamp(1.5rem, 2.6vw, 2rem); }
h3{ font-size:1.15rem; }
h4{ font-size:1rem; }

p{ margin:0 0 1em; color:var(--charcoal); }
ul,ol{ margin:0 0 1em; padding-left:1.25em; color:var(--charcoal); }
li{ margin-bottom:8px; }

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.72rem;
  font-weight:700;
  color:var(--gray);
  margin:0 0 14px;
}

section{ padding:88px 0; }
@media (max-width:900px){ section{ padding:56px 0; } }

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--black);
  color:var(--white);
  padding:12px 20px;
  z-index:1000;
  font-size:0.9rem;
}
.skip-link:focus{ left:12px; top:12px; }

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

/* --- Buttons ------------------------------------------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 26px;
  font-family:var(--font);
  font-size:0.92rem;
  font-weight:700;
  text-decoration:none;
  border-radius:var(--radius);
  border:1px solid var(--black);
  min-height:44px;
  cursor:pointer;
  transition:background-color .25s var(--ease-standard), color .25s var(--ease-standard), border-color .25s var(--ease-standard);
}
.btn-primary{ background:var(--black); color:var(--white); }
.btn-primary:hover{ background:var(--charcoal); }
.btn-secondary{ background:transparent; color:var(--black); }
.btn-secondary:hover{ background:var(--black); color:var(--white); }

/* --- Header / nav ------------------------------------------------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(251,250,247,0.96);
  border-bottom:1px solid var(--light-gray);
  backdrop-filter:saturate(140%) blur(6px);
  transition:box-shadow .3s var(--ease-standard);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:96px;
  gap:24px;
  transition:min-height .3s var(--ease-standard);
}
.logo-link{
  display:flex;
  align-items:center;
  flex-shrink:0;
  text-decoration:none;
}

/* The mark, sized to match index.html's header exactly. */
.logo-mark{
  height:64px;
  width:auto;
  transition:height .3s var(--ease-standard);
}

/* Text lockup, still used in the footer where the black mark would
   disappear against the ink background. Set in the trade serif at
   weight 400. See brand-guidelines.html. */
.logo-wordmark{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:1.65rem;
  letter-spacing:-0.01em;
  color:var(--black);
  line-height:1;
  transition:font-size .3s var(--ease-standard);
}

.primary-nav-wrap{
  display:flex;
  align-items:center;
  gap:32px;
}
#primary-nav{
  display:flex;
  gap:28px;
  list-style:none;
  margin:0;
  padding:0;
}
#primary-nav li{ margin:0; }
#primary-nav a{
  text-decoration:none;
  font-size:0.92rem;
  font-weight:600;
  color:var(--charcoal);
  padding:8px 2px;
  position:relative;
}
#primary-nav a:hover{ color:var(--black); }

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--black);
  border-radius:var(--radius);
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:var(--black);
  position:relative;
  transition:transform .3s var(--ease-elegant), opacity .2s var(--ease-standard);
}
.nav-toggle::before{ position:absolute; transform:translateY(-6px); }
.nav-toggle::after{ position:absolute; transform:translateY(6px); }
.nav-toggle.is-active span{ opacity:0; }
.nav-toggle.is-active::before{ transform:translateY(0) rotate(45deg); }
.nav-toggle.is-active::after{ transform:translateY(0) rotate(-45deg); }

.site-header.is-scrolled{ box-shadow:0 1px 0 rgba(22,22,22,0.06); }
.site-header.is-scrolled .nav-inner{ min-height:72px; }
.site-header.is-scrolled .logo-wordmark{ font-size:1.35rem; }
.site-header.is-scrolled .logo-mark{ height:48px; }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .primary-nav-wrap{
    position:fixed;
    top:96px;
    left:0;
    right:0;
    background:var(--paper);
    border-bottom:1px solid var(--light-gray);
    flex-direction:column;
    align-items:stretch;
    padding:8px 24px 20px;
    gap:16px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  .primary-nav-wrap.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  #primary-nav{ flex-direction:column; gap:4px; }
  #primary-nav a{
    display:block;
    padding:12px 4px;
    border-bottom:1px solid var(--light-gray);
  }
  .primary-nav-wrap .btn{ margin-top:8px; width:100%; }
  .site-header.is-scrolled .primary-nav-wrap{ top:72px; }
}

@media (max-width:560px){
  .nav-inner{ min-height:78px; }
  .logo-wordmark{ font-size:1.4rem; }
  .logo-mark{ height:52px; }
  .primary-nav-wrap{ top:78px; }
  .site-header.is-scrolled .nav-inner{ min-height:64px; }
  .site-header.is-scrolled .logo-wordmark{ font-size:1.2rem; }
  .site-header.is-scrolled .logo-mark{ height:42px; }
  .site-header.is-scrolled .primary-nav-wrap{ top:64px; }
}

/* --- Legal page body ---------------------------------------------------- */

.legal-hero{
  background:var(--paper);
  border-bottom:1px solid var(--light-gray);
  padding:64px 0 56px;
}
.legal-hero h1{ margin-bottom:16px; }

.legal-updated{
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--gray);
  margin:0;
  padding-top:4px;
  border-top:1px solid var(--light-gray);
  display:inline-block;
}

.legal-content{ padding:72px 0 88px; }
.legal-content .container > *{ max-width:var(--text-max); }

.legal-content h2{
  margin-top:52px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--light-gray);
}
.legal-content .container > h2:first-of-type{ margin-top:0; }

.legal-content h3{
  margin-top:32px;
  margin-bottom:10px;
}

.legal-content p,
.legal-content li{ font-size:1rem; }
.legal-content a{ color:var(--black); text-decoration:underline; text-underline-offset:2px; }
.legal-content a:hover{ color:var(--gray); }

.callout{
  margin:48px 0 0;
  padding:20px 24px;
  background:var(--off-white);
  border:1px solid var(--light-gray);
  border-left:4px solid var(--black);
  font-size:0.94rem;
  line-height:1.65;
  color:var(--charcoal);
}
.callout strong{ color:var(--black); }

.back-link{
  display:inline-block;
  margin-top:48px;
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--charcoal);
  text-decoration:none;
  padding-top:20px;
  border-top:1px solid var(--light-gray);
}
.back-link:hover{ color:var(--black); }

/* --- Consent banner ----------------------------------------------------- */

.consent-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
  background:var(--paper);
  border-top:1px solid var(--black);
}
.consent-banner[hidden]{ display:none; }
.consent-banner-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.consent-banner-inner p{
  margin:0;
  font-size:0.88rem;
  line-height:1.6;
  max-width:var(--text-max);
}
.consent-banner-inner a{ color:var(--black); }
.consent-actions{
  display:flex;
  gap:12px;
  flex-shrink:0;
}
.consent-actions .btn{ padding:11px 22px; font-size:0.85rem; }

@media (max-width:760px){
  .consent-banner-inner{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .consent-actions .btn{ flex:1; }
}

/* --- Footer ------------------------------------------------------------- */

footer{
  background:var(--black);
  color:var(--off-white);
  padding:64px 0 32px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--charcoal);
}
.footer-brand .logo-wordmark{
  color:var(--paper);
  display:block;
  margin-bottom:16px;
  font-size:1.5rem;
}
.footer-brand p{ color:#B9B9B4; font-size:0.9rem; margin:2px 0; }
.footer-brand a{ color:#B9B9B4; text-decoration:none; }
.footer-brand a:hover{ color:var(--white); }
.footer-col h4{
  color:var(--off-white);
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:16px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#D8D8D3; text-decoration:none; font-size:0.92rem; position:relative; }
.footer-col a:hover{ color:var(--white); }
.footer-col a[aria-current="page"]{ color:var(--white); text-decoration:underline; text-underline-offset:3px; }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-top:24px;
  font-size:0.8rem;
  color:#9A9A94;
}
.footer-bottom-links{ display:flex; gap:16px; }
.footer-bottom-link{
  background:none;
  border:none;
  padding:0;
  font-family:var(--font);
  font-size:0.8rem;
  color:#9A9A94;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.footer-bottom-link:hover{ color:var(--white); }

@media (max-width:800px){
  .footer-top{ grid-template-columns:1fr; gap:32px; }
}

/* Underline-grow hover, matching index.html */
#primary-nav a::after,
.footer-col a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px;
  background:currentColor;
  transition:width .3s var(--ease-elegant);
}
#primary-nav a:hover::after,
#primary-nav a:focus-visible::after,
.footer-col a:hover::after,
.footer-col a:focus-visible::after{ width:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}