/* ============================================================
   BJ PRESS — stylesheet
   Design language: a small independent house of ideas.
   Ink navy + antique brass on warm paper, letterpress spacing,
   quill-drawn dividers echoing the mark. Book series treated
   as a real sequence (I–IV) because it genuinely is one.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  /* --- color --- */
  --ink:        #16233D;   /* deep navy — headings, nav, footer */
  --ink-2:      #223353;   /* lighter navy for gradients/hover */
  --paper:      #F6F1E6;   /* warm paper background */
  --paper-dim:  #EEE6D3;   /* recessed card / stripe background */
  --gold:       #A9832F;   /* antique brass accent */
  --gold-dim:   #C7A863;   /* lighter brass for dark backgrounds */
  --charcoal:   #262420;   /* body copy */
  --rule:       #D8CBA8;   /* hairline / divider on paper */
  --rule-dark:  rgba(246,241,230,0.18); /* hairline on navy */
  --cream-text: #F3ECDC;   /* text on navy */

  /* --- type --- */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Source Serif 4', Georgia, serif;
  --utility: 'Inter', -apple-system, Helvetica, Arial, sans-serif;

  /* --- layout --- */
  --max: 1160px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 2px;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

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

p{ margin:0 0 1.1em; }

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

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

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

/* ============================================================
   Utility type treatments — the letterspaced "small-caps" motif
   lifted directly from the wordmark's spaced-out P R E S S.
   ============================================================ */
.eyebrow{
  font-family:var(--utility);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.on-dark{ color:var(--gold-dim); }

.section-label{
  font-family:var(--utility);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.65;
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  position:sticky;
  top:0;
  z-index:50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.brand img{ height:52px; width:auto; }
.brand-text{
  font-family:var(--utility);
  font-weight:600;
  letter-spacing:0.28em;
  font-size:0.82rem;
  color:var(--ink);
  text-transform:uppercase;
}

.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  width:42px;
  height:38px;
  cursor:pointer;
  position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";
  position:absolute;
  left:9px; right:9px;
  height:2px;
  background:var(--ink);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span{ top:18px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span::after{ transform:translateY(-7px) rotate(-45deg); }

.main-nav ul{
  list-style:none;
  display:flex;
  gap:2rem;
  margin:0;
  padding:0;
}
.main-nav a{
  font-family:var(--utility);
  font-size:0.86rem;
  font-weight:500;
  letter-spacing:0.06em;
  color:var(--ink);
  padding:0.4rem 0.1rem;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  border-color:var(--gold);
  color:var(--gold);
}

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .main-nav{
    position:absolute;
    top:84px; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav.open{ max-height:400px; }
  .main-nav ul{
    flex-direction:column;
    gap:0;
    padding:0.5rem var(--gutter) 1.25rem;
  }
  .main-nav li{ border-top:1px solid var(--rule); }
  .main-nav a{ display:block; padding:0.9rem 0; border-bottom:none; }
}

/* ============================================================
   Quill divider — the signature element.
   A single continuous stroke echoing the logo's feather,
   used everywhere a section break would otherwise be a plain rule.
   ============================================================ */
.quill-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:0 auto;
  max-width:640px;
  color:var(--gold);
}
.quill-divider .line{
  flex:1;
  height:1px;
  background:linear-gradient(to right, transparent, var(--rule));
}
.quill-divider .line.reverse{
  background:linear-gradient(to left, transparent, var(--rule));
}
.quill-divider svg{ width:34px; height:34px; flex-shrink:0; }
.quill-divider.on-dark .line{ background:linear-gradient(to right, transparent, var(--rule-dark)); }
.quill-divider.on-dark .line.reverse{ background:linear-gradient(to left, transparent, var(--rule-dark)); }

/* ============================================================
   Hero
   ============================================================ */
.hero{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(169,131,47,0.10), transparent 55%),
    var(--paper);
  padding:clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero .container{ position:relative; z-index:1; }
.hero .eyebrow{ display:block; margin-bottom:1.4rem; }
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  max-width:14ch;
  margin:0 auto 0.5rem;
}
.hero .lede{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  color:var(--ink-2);
  max-width:38ch;
  margin:0.6rem auto 2.2rem;
  opacity:0.85;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--utility);
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:0.95rem 1.9rem;
  border-radius:var(--radius);
  border:1px solid var(--ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn-primary{ background:var(--ink); color:var(--cream-text); }
.btn-primary:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream-text); }
.btn-on-dark{ border-color:var(--gold-dim); color:var(--cream-text); }
.btn-on-dark:hover{ background:var(--gold-dim); color:var(--ink); }

/* ============================================================
   Sections / rhythm
   ============================================================ */
section{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.section-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-top:0.6rem; }
.section-head p{ color:var(--ink-2); opacity:0.8; }

.stripe{ background:var(--paper-dim); }
.ink{ background:var(--ink); color:var(--cream-text); }
.ink h2, .ink h3, .ink h4{ color:var(--cream-text); }

/* ============================================================
   Pillars (three-column feature block)
   ============================================================ */
.pillars{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
}
.pillar{ text-align:center; padding:0 0.5rem; }
.pillar .mark{
  width:56px; height:56px;
  margin:0 auto 1.4rem;
  color:var(--gold);
}
.pillar h3{ font-size:1.3rem; }
.pillar p{ color:var(--ink-2); opacity:0.82; font-size:0.98rem; }

@media (max-width:800px){
  .pillars{ grid-template-columns:1fr; gap:2.8rem; }
}

/* ============================================================
   Book series — numbered because it is a genuine sequence
   ============================================================ */
.series-frame{
  border:1px solid var(--rule-dark);
  border-radius:4px;
  padding:clamp(1.75rem, 4vw, 3.5rem);
}
.series-head{ text-align:center; max-width:720px; margin:0 auto 3rem; }
.series-head .eyebrow{ margin-bottom:1rem; }
.series-head p{ color:var(--cream-text); opacity:0.78; }

.series-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.75rem;
}
@media (max-width:960px){ .series-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .series-grid{ grid-template-columns:1fr; } }

.book-card{
  background:rgba(246,241,230,0.04);
  border:1px solid var(--rule-dark);
  padding:1.6rem 1.4rem 1.9rem;
  display:flex;
  flex-direction:column;
  height:100%;
}
.book-numeral{
  font-family:var(--display);
  font-style:italic;
  font-size:1rem;
  color:var(--gold-dim);
  margin-bottom:1.1rem;
}
.book-cover{
  aspect-ratio:3/4;
  border-radius:2px;
  margin-bottom:1.2rem;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:1rem;
  background:
    linear-gradient(180deg, rgba(246,241,230,0.06), rgba(246,241,230,0) 40%),
    repeating-linear-gradient(115deg, rgba(199,168,99,0.09) 0 2px, transparent 2px 26px);
  border:1px solid var(--rule-dark);
}
.book-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.book-cover span{
  position:relative;
  z-index:1;
  font-family:var(--utility);
  font-size:0.68rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-dim);
  opacity:0.85;
}
.book-cover.has-photo{ padding:0; align-items:flex-end; }
.book-cover.has-photo span{ display:none; }
.book-card h4{
  color:var(--cream-text);
  font-size:1.12rem;
  margin-bottom:0.5rem;
}
.book-card p{
  color:var(--cream-text);
  opacity:0.72;
  font-size:0.92rem;
  flex-grow:1;
}

/* ============================================================
   Cards — insights / blog teasers, gallery, generic grids
   ============================================================ */
.card-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2.2rem;
}
@media (max-width:760px){ .card-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--paper);
  border:1px solid var(--rule);
}
.card-media{
  aspect-ratio:16/10;
  background:
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 55%, #2c4066 100%);
  position:relative;
  overflow:hidden;
}
.card-media::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(100deg, rgba(169,131,47,0.10) 0 1px, transparent 1px 34px);
}
.card-media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.card-body{ padding:1.6rem 1.7rem 1.9rem; }
.card .section-label{ display:block; margin-bottom:0.6rem; }
.card h3{ font-size:1.3rem; margin-bottom:0.6rem; }
.card h3 a:hover{ color:var(--gold); }
.card p{ opacity:0.82; font-size:0.98rem; }
.card .meta{
  font-family:var(--utility);
  font-size:0.76rem;
  letter-spacing:0.06em;
  color:var(--ink-2);
  opacity:0.6;
  text-transform:uppercase;
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.1rem;
}
@media (max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2, 1fr); } }
.gallery-tile{
  aspect-ratio:3/4;
  border:1px solid var(--rule);
  background:linear-gradient(155deg, var(--paper-dim), #E1D6B8);
  position:relative;
  overflow:hidden;
}
.gallery-tile::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(70deg, rgba(22,35,61,0.06) 0 2px, transparent 2px 22px);
}
.gallery-tile img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* ============================================================
   Contact / forms
   ============================================================ */
.contact-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.3rem; }
.field label{
  display:block;
  font-family:var(--utility);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.7;
  margin-bottom:0.5rem;
}
.field input, .field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  padding:0.85rem 1rem;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--charcoal);
  border-radius:var(--radius);
}
.field textarea{ resize:vertical; min-height:140px; }
.field input:focus, .field textarea:focus{ border-color:var(--gold); }

.consent{
  display:flex;
  gap:0.7rem;
  align-items:flex-start;
  font-size:0.86rem;
  color:var(--ink-2);
  opacity:0.85;
  margin-bottom:1.6rem;
}
.consent input{ margin-top:0.3rem; }

.info-block{ margin-bottom:2.2rem; }
.info-block h3{ font-size:1.05rem; margin-bottom:0.5rem; }
.info-block p{ opacity:0.85; }

.form-note{
  font-family:var(--utility);
  font-size:0.85rem;
  color:var(--ink-2);
  opacity:0.75;
  margin-top:0.6rem;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:var(--cream-text);
  padding:clamp(3rem, 6vw, 4.5rem) 0 1.6rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 0.8fr 0.9fr 1.1fr;
  gap:2.5rem;
  padding-bottom:2.8rem;
  border-bottom:1px solid var(--rule-dark);
}
@media (max-width:860px){
  .footer-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}
.footer-brand .brand{ margin-bottom:1rem; }
.footer-brand p{ opacity:0.65; font-size:0.94rem; max-width:32ch; }
.footer-heading{
  font-family:var(--utility);
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold-dim);
  margin-bottom:1.1rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:0.7rem; }
.footer-col a{ opacity:0.75; font-size:0.94rem; }
.footer-col a:hover{ opacity:1; color:var(--gold-dim); }

.social-row{ display:flex; gap:0.9rem; margin-top:0.2rem; }
.social-row a{
  width:36px; height:36px;
  border:1px solid var(--rule-dark);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0.8;
}
.social-row a:hover{ opacity:1; border-color:var(--gold-dim); color:var(--gold-dim); }
.social-row svg{ width:16px; height:16px; }

.subscribe-form{ display:flex; gap:0; margin-top:0.4rem; }
.subscribe-form input{
  flex:1;
  padding:0.8rem 1rem;
  border:1px solid var(--rule-dark);
  border-right:none;
  background:transparent;
  color:var(--cream-text);
  font-family:var(--body);
}
.subscribe-form input::placeholder{ color:rgba(243,236,220,0.45); }
.subscribe-form button{
  padding:0.8rem 1.3rem;
  border:1px solid var(--gold-dim);
  background:var(--gold-dim);
  color:var(--ink);
  font-family:var(--utility);
  font-weight:600;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.subscribe-form button:hover{ background:var(--cream-text); }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1.6rem;
  font-family:var(--utility);
  font-size:0.8rem;
  opacity:0.55;
  flex-wrap:wrap;
  gap:0.6rem;
}

/* ============================================================
   Page header (interior pages)
   ============================================================ */
.page-header{
  background:var(--ink);
  color:var(--cream-text);
  padding:clamp(3rem, 7vw, 4.5rem) 0 clamp(2.4rem, 5vw, 3rem);
  text-align:center;
}
.page-header h1{ color:var(--cream-text); font-size:clamp(2.1rem, 5vw, 3.2rem); }
.page-header .lede{
  font-family:var(--display);
  font-style:italic;
  color:var(--gold-dim);
  opacity:0.9;
  max-width:44ch;
  margin:0.8rem auto 0;
  font-size:1.1rem;
}

/* ============================================================
   About page specifics
   ============================================================ */
.lead-paragraph{
  font-size:1.2rem;
  max-width:66ch;
  margin:0 auto;
  text-align:center;
  color:var(--ink-2);
}
.lead-paragraph::first-letter{
  font-family:var(--display);
  font-size:3.4rem;
  float:left;
  line-height:0.8;
  margin:0.08em 0.1em 0 0;
  color:var(--gold);
}

.values-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem 3rem;
  max-width:900px;
  margin:0 auto;
}
@media (max-width:700px){ .values-list{ grid-template-columns:1fr; } }
.values-list dt{
  font-family:var(--display);
  font-style:italic;
  color:var(--ink);
  font-size:1.15rem;
  margin-bottom:0.3rem;
}
.values-list dd{ margin:0; opacity:0.82; }

/* ============================================================
   Authors page
   ============================================================ */
.author-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1.8rem;
  align-items:start;
  padding:2rem 0;
  border-top:1px solid var(--rule);
}
.author-card:last-child{ border-bottom:1px solid var(--rule); }
@media (max-width:560px){ .author-card{ grid-template-columns:110px 1fr; } }
.author-portrait{
  aspect-ratio:1/1;
  border-radius:50%;
  background:linear-gradient(155deg, var(--ink), var(--ink-2));
  border:1px solid var(--rule);
  position:relative;
  overflow:hidden;
}
.author-portrait::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-radial-gradient(circle at 30% 20%, rgba(169,131,47,0.16) 0 2px, transparent 2px 20px);
}
.author-portrait img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.author-portrait.has-photo::after{ display:none; }
.author-card h3{ font-size:1.3rem; margin-bottom:0.2rem; }
.author-role{
  font-family:var(--utility);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:0.8rem;
}
.author-card p{ opacity:0.85; }

/* ============================================================
   Blog listing / post
   ============================================================ */
.post-list{ display:flex; flex-direction:column; }
.post-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2rem;
  padding:2.2rem 0;
  border-top:1px solid var(--rule);
}
.post-list .post-row:last-child{ border-bottom:1px solid var(--rule); }
@media (max-width:700px){ .post-row{ grid-template-columns:1fr; } }
.post-thumb{
  aspect-ratio:4/3;
  background:linear-gradient(160deg, var(--ink), var(--ink-2));
  position:relative; overflow:hidden;
}
.post-thumb::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(100deg, rgba(169,131,47,0.10) 0 1px, transparent 1px 34px);
}
.post-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.post-row h3{ font-size:1.4rem; margin-bottom:0.5rem; }
.post-row .meta{ margin-bottom:0.7rem; display:block; }
.post-row p{ opacity:0.82; }

.tag-row{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:1rem; }
.tag{
  font-family:var(--utility);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-2);
  border:1px solid var(--rule);
  padding:0.3rem 0.7rem;
  border-radius:20px;
}

/* single post */
.post-hero{ text-align:left; }
.post-hero .container{ max-width:820px; }
.post-body{ max-width:720px; margin:0 auto; }
.post-body h2{ font-size:1.6rem; margin-top:2rem; }
.post-body blockquote{
  margin:2rem 0;
  padding-left:1.4rem;
  border-left:3px solid var(--gold);
  font-family:var(--display);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink-2);
}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ text-align:center; }
.cta-band h2{ margin-bottom:0.6rem; }
.cta-band p{ max-width:44ch; margin:0 auto 2rem; opacity:0.85; }

/* ============================================================
   Breadcrumb-esque back link
   ============================================================ */
.back-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--utility);
  font-size:0.85rem;
  letter-spacing:0.04em;
  color:var(--ink-2);
  margin-bottom:1.5rem;
}
.back-link:hover{ color:var(--gold); }