/* =========================================================
   Samuel Moses — Advocate
   Monochrome editorial. Fraunces (display) / Hanken Grotesk
   (body) / Space Mono (labels & references).
   ========================================================= */

:root{
  --paper:   #FBFAF8;   /* warm near-white background */
  --ink:     #14110F;   /* rich near-black text */
  --mid:     #6E6A65;   /* muted secondary text */
  --hair:    #E4E0D9;   /* hairline rules */
  --panel:   #F1EEE8;   /* subtle raised panels */
  --ink-2:   #0C0A09;   /* dark section background */
  --paper-2: #F7F4EE;   /* text on dark */

  --wrap: 1120px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section{ padding-inline: var(--gap); }

/* ---------- Shared type ---------- */
.eyebrow, .section-ref, .post-date, .area-code,
.strip, .facts .k, .contact-info .k, .foot-brand, .foot-wa{
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

h1, h2, h3{ font-family: var(--serif); font-weight: 500; line-height: 1.05; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-solid{ background: var(--ink); color: var(--paper); }
.btn-solid:hover{ background: #000; }
.btn-line{ background: transparent; color: var(--ink); }
.btn-line:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--hair); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-solid-invert{ background: var(--paper-2); color: var(--ink-2); border-color: var(--paper-2); }
.btn-line-invert{ background: transparent; color: var(--paper-2); border-color: rgba(247,244,238,.4); }
.btn-line-invert:hover{ background: var(--paper-2); color: var(--ink-2); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.9rem var(--gap);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.brand{ display: flex; align-items: baseline; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand-name{ font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.brand-role{ font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.nav{ margin-left: auto; display: flex; gap: 1.6rem; }
.nav a{ color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500; position: relative; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--ink); transition:width .25s ease; }
.nav a:hover::after{ width:100%; }
.header-cta{ padding: .6rem 1.1rem; font-size: .85rem; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); transition:.25s; }

.mobile-menu{ display:none; }

/* ---------- Hero ---------- */
.hero{ max-width: var(--wrap); margin: 0 auto; padding-top: clamp(3.5rem, 9vw, 7rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.eyebrow{ color: var(--mid); margin-bottom: 1.4rem; }
.hero-title{ font-size: clamp(2.9rem, 8.5vw, 6.2rem); letter-spacing: -0.02em; }
.hero-lede{ max-width: 42ch; margin-top: 1.6rem; font-size: clamp(1.05rem, 2vw, 1.22rem); color: #3a3733; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero-meta{ font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }

/* ---------- Credential strip ---------- */
.strip{
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  color: var(--mid); background: var(--panel);
  padding: 1rem var(--gap); border-block: 1px solid var(--hair);
}
.strip .dot{ opacity: .5; }

/* ---------- Section refs ---------- */
.section-ref{ color: var(--mid); margin-bottom: 1rem; }
.section-ref.light{ color: rgba(247,244,238,.6); }

/* ---------- About ---------- */
.about{
  max-width: var(--wrap); margin: 0 auto;
  padding-block: clamp(4rem, 9vw, 7rem);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem);
}
.about-head h2{ font-size: clamp(2rem, 4.4vw, 3.2rem); }
.about-body .lead{ font-family: var(--serif); font-size: clamp(1.3rem,2.4vw,1.7rem); line-height: 1.3; margin-bottom: 1.2rem; }
.about-body p{ color: #3a3733; margin-bottom: 1.4rem; }
.facts{ list-style: none; border-top: 1px solid var(--hair); margin-top: 2rem; }
.facts li{ display: flex; gap: 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.facts .k{ color: var(--mid); min-width: 8.5rem; }
.facts .v{ font-weight: 500; }
.portrait{ width:100%; border-radius: 6px; margin-bottom: 1.5rem; filter: grayscale(1); }

/* ---------- Practice areas ---------- */
.practice{ max-width: var(--wrap); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5rem); }
.practice-head{ margin-bottom: 2.5rem; }
.practice-head h2{ font-size: clamp(2rem, 4.4vw, 3.2rem); }
.areas{ list-style: none; border-top: 1px solid var(--hair); }
.area{
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem,3vw,2.5rem);
  padding: 1.8rem 0; border-bottom: 1px solid var(--hair);
  transition: padding-left .25s ease;
}
.area:hover{ padding-left: .6rem; }
.area-code{
  font-family: var(--mono); font-weight: 700; font-size: .82rem;
  color: var(--ink); border: 1px solid var(--hair); border-radius: 4px;
  height: 2.4rem; width: 2.9rem; display: flex; align-items: center; justify-content: center;
  letter-spacing: .05em;
}
.area h3{ font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin-bottom: .4rem; }
.area p{ color: #3a3733; max-width: 60ch; }

/* ---------- Insights ---------- */
.insights{ max-width: var(--wrap); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5rem); }
.insights-head{ margin-bottom: 2.5rem; }
.insights-head h2{ font-size: clamp(2rem, 4.4vw, 3.2rem); }
.insights-sub{ color: var(--mid); margin-top: .8rem; font-size: .95rem; }
.insights-sub code{ font-family: var(--mono); font-size: .82rem; background: var(--panel); padding: .1rem .4rem; border-radius: 3px; }
.posts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.post{ border: 1px solid var(--hair); border-radius: 8px; padding: 1.6rem; background: var(--paper); transition: border-color .2s ease, transform .2s ease; }
.post:hover{ border-color: var(--ink); transform: translateY(-3px); }
.post-date{ color: var(--mid); margin-bottom: 1rem; }
.post h3{ font-size: 1.3rem; line-height: 1.15; margin-bottom: .6rem; }
.post p{ color: #3a3733; font-size: .95rem; margin-bottom: 1.2rem; }
.post-link{ font-weight: 600; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.post-link:hover{ opacity: .6; }

/* ---------- Contact (dark) ---------- */
.contact{
  background: var(--ink-2); color: var(--paper-2);
  padding-block: clamp(4rem, 9vw, 7rem);
  border-radius: 22px; margin: clamp(1rem,3vw,2.5rem);
}
.contact h2{ font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.02em; }
.contact-lede{ max-width: 46ch; margin-top: 1.4rem; color: rgba(247,244,238,.75); font-size: 1.1rem; }
.contact-actions{ display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.contact-info{ display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(247,244,238,.18); }
.contact-info .k{ display: block; color: rgba(247,244,238,.55); margin-bottom: .3rem; }
.contact-info .v{ font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer{ max-width: var(--wrap); margin: 0 auto; padding: 3rem var(--gap) 4rem; }
.foot-top{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.4rem; border-bottom: 1px solid var(--hair); }
.foot-wa{ color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.disclaimer{ color: var(--mid); font-size: .82rem; max-width: 70ch; margin-top: 1.4rem; line-height: 1.55; }
.copyright{ color: var(--mid); font-size: .8rem; margin-top: 1rem; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav, .header-cta{ display: none; }
  .nav-toggle{ display: flex; margin-left: auto; }
  .about{ grid-template-columns: 1fr; }
  .posts{ grid-template-columns: 1fr; }
  .mobile-menu.open{
    display: flex; flex-direction: column; gap: 1.1rem;
    padding: 1.2rem var(--gap) 1.8rem; background: var(--paper);
    border-bottom: 1px solid var(--hair);
  }
  .mobile-menu a{ color: var(--ink); text-decoration: none; font-size: 1.05rem; }
  .mobile-menu .btn{ margin-top: .5rem; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Gallery (public) ---------- */
.gallery{ max-width: var(--wrap); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5rem); }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1.2rem; }
.shot{ border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:#fff; }
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:grayscale(.25); transition:filter .3s ease; }
.shot:hover img{ filter:none; }
.shot figcaption{ font-size:.85rem; color:var(--mid); padding:.6rem .8rem; }

/* ---------- Testimonials (public) ---------- */
.voices{ max-width: var(--wrap); margin: 0 auto; padding-block: clamp(3rem, 7vw, 5rem); }
.quote{ font-family: var(--serif); font-size:1.12rem; line-height:1.45; margin-bottom:.9rem; }
.quote-name{ color:var(--mid); font-size:.9rem; }
.contact-info .v.small{ display:block; color:rgba(247,244,238,.6); font-size:.88rem; font-weight:400; }
.map-link{ display:inline-block; margin-top:.35rem; color:var(--paper-2); font-size:.85rem; }