/* ============================================================
   TRUEBOOKS4U — "The Ledger" design system
   ============================================================ */

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

:root{
  --ink:        #1F3B2E;
  --ink-soft:   #2C4B3B;
  --paper:      #F6F1E4;
  --paper-dim:  #EFE8D6;
  --sage:       #7C9473;
  --sage-dim:   #A9BBA0;
  --stamp:      #B5542F;
  --charcoal:   #2B2B28;
  --gold-rule:  #C9A227;

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --max: 1100px;
}

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

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

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

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

::selection{ background: var(--gold-rule); color: var(--ink); }

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

/* ---------- Ledger paper texture ---------- */
.ledger-lines{
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 35px,
    rgba(31,59,46,0.09) 36px
  );
}

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: var(--paper);
  border-bottom: 3px double var(--ink);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 18px; padding-bottom: 18px;
}
.brand{
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  display:flex; align-items:baseline; gap: 6px;
}
.brand small{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--stamp);
  text-transform: uppercase;
  font-weight: 600;
}

.main-nav ul{
  list-style:none; display:flex; gap: 34px; margin:0; padding:0;
  font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.main-nav a{
  position: relative; padding: 4px 0; color: var(--ink-soft);
  transition: color .15s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background: var(--stamp); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ color: var(--ink); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ transform: scaleX(1); }

.nav-toggle{
  display:none; background:none; border: 2px solid var(--ink); border-radius: 4px;
  width: 42px; height: 36px; 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);
}
.nav-toggle span{ top:17px; }
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }

@media (max-width: 760px){
  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    background: var(--paper); border-bottom: 3px double var(--ink);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .main-nav.open{ max-height: 320px; }
  .main-nav ul{ flex-direction:column; gap:0; padding: 8px 28px 20px; }
  .main-nav li{ border-top: 1px solid var(--paper-dim); padding: 14px 0; }
  .nav-toggle{ display:block; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.03em;
  text-transform: uppercase; font-weight: 600;
  padding: 14px 26px; border-radius: 3px;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor:pointer; transition: transform .15s ease, background .15s ease;
}
.btn:hover{ background: var(--ink-soft); transform: translateY(-2px); }
.btn.outline{ background: transparent; color: var(--ink); }
.btn.outline:hover{ background: var(--ink); color: var(--paper); }
.btn .arrow{ transition: transform .15s ease; }
.btn:hover .arrow{ transform: translateX(3px); }

/* ---------- Hero (stamp + ledger corner) ---------- */
.hero{
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
  border-bottom: 1px solid var(--sage-dim);
}
.hero .wrap{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items:center; }
.hero-eyebrow{
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stamp); margin: 0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.hero-eyebrow::before{ content:""; width:26px; height:2px; background: var(--stamp); display:inline-block; }
.hero h1{
  font-family: var(--display); font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.06; margin: 0 0 22px; color: var(--ink);
}
.hero h1 em{ font-style: italic; font-weight: 500; color: var(--sage); }
.hero p.lede{ font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; margin: 0 0 32px; }

.stamp{
  width: 210px; height: 210px;
  margin-left: auto;
  justify-self: center;
  transform: rotate(-5deg);
}
.stamp-svg{ width:100%; height:100%; overflow: visible; }
.stamp-svg .ring{ fill:none; stroke: var(--stamp); }
.stamp-svg .ring-outer{ stroke-width: 3; }
.stamp-svg .ring-inner{ stroke-width: 1.5; }
.stamp-svg .arc-text{
  fill: var(--stamp); font-family: var(--mono); font-weight: 600;
  font-size: 12.5px; letter-spacing: 2px;
}
.stamp-svg .label{
  fill: var(--stamp); font-family: var(--mono); font-weight: 600;
  font-size: 11px; letter-spacing: 4px; text-anchor: middle;
}
.stamp-svg .headline{
  fill: var(--stamp); font-family: var(--display); font-style: italic;
  font-weight: 700; font-size: 27px; text-anchor: middle;
}

/* ---------- Section headings ---------- */
.section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin: 0 auto 52px; text-align:center; }
.eyebrow{
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--stamp); margin: 0 0 12px;
}
.section-head h2{
  font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  color: var(--ink); margin: 0 0 14px; font-weight: 600;
}
.section-head p{ color: var(--ink-soft); font-size: 1.05rem; }

/* ---------- Ledger rows (process / services) ---------- */
.ledger{
  border-top: 2px solid var(--ink);
}
.ledger-row{
  display:grid; grid-template-columns: 70px 1fr auto;
  gap: 24px; align-items:start;
  padding: 30px 0;
  border-bottom: 1px solid var(--paper-dim);
  position: relative;
}
.ledger-row .num{
  font-family: var(--mono); font-size: 1.6rem; color: var(--sage);
  font-weight: 600;
}
.ledger-row h3{
  font-family: var(--display); font-size: 1.3rem; color: var(--ink);
  margin: 0 0 8px; font-weight: 600;
}
.ledger-row p{ margin:0; color: var(--ink-soft); max-width: 56ch; }
.ledger-row .check{
  font-family: var(--mono); font-size: 0.8rem; color: var(--stamp);
  border: 1px solid var(--stamp); border-radius: 50%;
  width: 30px; height: 30px; display:flex; align-items:center; justify-content:center;
  margin-top: 4px;
}
.ledger-row .phone{
  font-family: var(--mono); font-weight:600; color: var(--ink); margin-top: 10px; display:inline-block;
}

/* ---------- Services grid (used on services page) ---------- */
.services-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  background: var(--ink);
  border: 2px solid var(--ink);
}
.service-card{
  background: var(--paper); padding: 38px 34px; position:relative;
}
.service-card .tag{
  font-family: var(--mono); font-size: 0.72rem; color: var(--sage);
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; display:block;
}
.service-card h3{
  font-family: var(--display); font-size: 1.4rem; color: var(--ink); margin: 0 0 12px; font-weight:600;
}
.service-card p{ margin:0; color: var(--ink-soft); }
@media (max-width: 700px){ .services-grid{ grid-template-columns: 1fr; } }

/* ---------- About / founder ---------- */
.founder{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items:start;
}
.founder-mark{
  border: 2px solid var(--ink); padding: 30px; text-align:center; background: var(--paper-dim);
}
.founder-mark .founder-photo-frame{
  position: relative;
  width: 100%;
  padding-top: 100%; /* forces a true square regardless of surrounding layout */
  margin: 0 0 16px;
  overflow: hidden;
}
.founder-mark .founder-photo{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.founder-mark .years{
  font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stamp);
}
.founder-copy p{ color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 20px; }
.founder-copy strong{ color: var(--ink); }
@media (max-width: 760px){ .founder{ grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-card{
  background: var(--ink); color: var(--paper); padding: 44px; border-radius: 4px;
}
.contact-card h3{ font-family: var(--display); font-size: 1.5rem; margin: 0 0 16px; font-weight:600; }
.contact-card p{ color: var(--sage-dim); margin: 0 0 26px; }
.contact-line{ display:flex; align-items:center; gap:12px; font-family: var(--mono); margin-bottom: 14px; font-size: 0.95rem; }
.contact-line .lbl{ color: var(--sage-dim); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.08em; width: 70px; flex-shrink:0; }
.social-row{ display:flex; gap: 14px; margin-top: 30px; }
.social-row a{
  width: 42px; height: 42px; border: 1px solid var(--sage-dim); border-radius: 50%;
  display:flex; align-items:center; justify-content:center; transition: background .15s, border-color .15s;
}
.social-row a:hover{ background: var(--sage); border-color: var(--sage); }

form.form{ display:flex; flex-direction:column; gap: 18px; }
.field{ display:flex; flex-direction:column; gap: 6px; }
.field label{
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
}
.field input, .field textarea{
  border: 2px solid var(--ink); background: var(--paper); padding: 12px 14px;
  font-family: var(--body); font-size: 0.98rem; border-radius: 3px; color: var(--charcoal);
}
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--stamp); }
.form-note{ font-size: 0.8rem; color: var(--ink-soft); }
.form-success{
  display:none; font-family: var(--mono); font-size: 0.85rem; color: var(--sage);
  border: 1px dashed var(--sage); padding: 12px 16px; border-radius: 3px;
}
.form-success.show{ display:block; }

@media (max-width: 760px){ .contact-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 3px double var(--ink); padding: 40px 0; margin-top: 40px;
}
.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 16px;
}
.site-footer p{ margin:0; font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); }
.footer-links{ display:flex; gap: 22px; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; }
.footer-links a:hover{ color: var(--stamp); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding: 64px 0 40px; border-bottom: 1px solid var(--sage-dim); }
.page-hero .eyebrow{ margin-bottom: 14px; }
.page-hero h1{
  font-family: var(--display); font-weight:600; font-size: clamp(2.1rem, 4.4vw, 3rem);
  color: var(--ink); margin: 0 0 16px;
}
.page-hero p{ color: var(--ink-soft); font-size: 1.08rem; max-width: 56ch; }

@media (max-width: 760px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .stamp{ margin: 30px auto 0; }
  .ledger-row{ grid-template-columns: 46px 1fr; }
  .ledger-row .check{ grid-row: span 1; }
}