/* ============================================================
   GRAVITAS — Editorial "Museum" Personal-Injury Law Template
   Self-hosted fonts, CSS-only texture, no CDNs, no frameworks.

   Creative hook: case results presented like framed gallery
   exhibits in a refined museum. Serif editorial system.

   Sections: 1.Fonts 2.Tokens 3.Base 4.Texture 5.A11y
   6.Header 7.Masthead 8.Buttons 9.Gallery 10.Manifesto
   11.Index list 12.Process 13.Plaque stats 14.Voices 15.FAQ
   16.Visit/CTA 17.Forms 18.Footer 19.404 20.Responsive 21.Motion
   ============================================================ */

/* ---------- 1. FONTS (self-hosted woff2) ---------- */
@font-face { font-family:"Playfair Display"; src:url("../fonts/PlayfairDisplay-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("../fonts/PlayfairDisplay-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("../fonts/PlayfairDisplay-Black.woff2") format("woff2"); font-weight:900; font-display:swap; }
@font-face { font-family:"EB Garamond"; src:url("../fonts/EBGaramond-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"EB Garamond"; src:url("../fonts/EBGaramond-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Work Sans"; src:url("../fonts/WorkSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Work Sans"; src:url("../fonts/WorkSans-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Work Sans"; src:url("../fonts/WorkSans-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }

/* ---------- 2. TOKENS ---------- */
:root {
  --beige:#f4f1ea;
  --marble:#ffffff;
  --velvet:#8b0000;
  --ink:#1a1a1a;
  --gold:#b8902f;
  --gold-soft:#d4af37;
  --dim:#6b6459;
  --line:rgba(26,26,26,0.14);
  --maxw:1180px;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --display:"Playfair Display", Georgia, serif;
  --sans:"Work Sans", system-ui, Arial, sans-serif;
}

/* ---------- 3. BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--serif);
  background:var(--beige);
  color:var(--ink);
  font-size:1.18rem; line-height:1.7;
  overflow-x:hidden; min-height:100vh;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; line-height:1.08; }
.italic { font-style:italic; }
.label { font-family:var(--sans); }

/* ---------- 4. PAPER TEXTURE (CSS only, no external image) ---------- */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.5;
  background-image:
    radial-gradient(rgba(26,26,26,0.025) 1px, transparent 1px),
    radial-gradient(rgba(26,26,26,0.02) 1px, transparent 1px);
  background-size:7px 7px, 11px 11px;
  background-position:0 0, 3px 4px;
}
body > * { position:relative; z-index:2; }

/* ---------- 5. A11Y ---------- */
.skip-link { position:absolute; left:8px; top:-52px; background:var(--ink); color:var(--gold-soft); font-family:var(--sans); font-weight:600; padding:10px 18px; z-index:400; transition:top .2s ease; }
.skip-link:focus { top:8px; }
:focus-visible { outline:3px solid var(--velvet); outline-offset:3px; }
.vh { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 6. HEADER ---------- */
.site-header { position:sticky; top:0; z-index:200; background:rgba(244,241,234,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:18px 28px; max-width:var(--maxw); margin:0 auto; }
.brand { font-family:var(--display); font-weight:900; font-size:1.5rem; letter-spacing:1px; text-transform:uppercase; }
.brand .dot { color:var(--velvet); }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a { font-family:var(--sans); font-size:.74rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--ink); }
.nav-cta { font-family:var(--sans); font-weight:600; border:1px solid var(--ink); padding:9px 18px; letter-spacing:.14em!important; color:var(--ink)!important; }
.nav-cta:hover { background:var(--ink); color:var(--beige)!important; }
.nav-toggle { display:none; background:none; border:1px solid var(--ink); color:var(--ink); width:46px; height:42px; font-size:1.2rem; cursor:pointer; }

/* ---------- 7. MASTHEAD (museum plaque hero) ---------- */
.masthead { text-align:center; padding:90px 24px 70px; border-bottom:1px solid var(--line); }
.masthead .estd { font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.4em; color:var(--gold); margin-bottom:26px; }
.masthead h1 { font-family:var(--display); font-weight:900; font-size:clamp(2.6rem,8vw,6rem); letter-spacing:-0.5px; text-transform:uppercase; }
.masthead .tagline { font-style:italic; font-size:clamp(1.1rem,2.6vw,1.6rem); color:var(--velvet); margin-top:14px; }
.masthead .rule { width:120px; height:1px; background:var(--gold); margin:34px auto; position:relative; }
.masthead .rule::before { content:"\2767"; position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--beige); padding:0 10px; color:var(--gold); }
.masthead .intro { max-width:60ch; margin:0 auto 32px; color:var(--dim); }
.masthead .actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- 8. BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--sans); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; padding:16px 34px; border:1px solid var(--ink); cursor:pointer; transition:all .3s cubic-bezier(0.175,0.885,0.32,1.1); }
.btn-gold { background:var(--gold-soft); border-color:var(--gold-soft); color:var(--ink); }
.btn-gold:hover { background:transparent; color:var(--ink); transform:translateY(-3px); }
.btn-ink { background:var(--ink); color:var(--beige); }
.btn-ink:hover { background:var(--velvet); border-color:var(--velvet); transform:translateY(-3px); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { background:var(--ink); color:var(--beige); }

/* ---------- 9. GALLERY (salon hang of framed exhibits) ---------- */
.section { padding:90px 0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section-kicker { font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.34em; color:var(--gold); text-align:center; display:block; margin-bottom:14px; }
.section-title { font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3.2rem); text-align:center; margin-bottom:10px; }
.section-sub { text-align:center; color:var(--dim); max-width:56ch; margin:0 auto 54px; font-style:italic; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:36px 30px; align-items:end; }
.exhibit { background:var(--marble); padding:16px; border:12px solid #20201e; border-image:linear-gradient(135deg,#4a4a46,#15150f,#4a4a46) 1; box-shadow:0 24px 50px rgba(0,0,0,0.22); }
.exhibit img { width:100%; height:auto; display:block; filter:sepia(0.12) contrast(1.05); }
.exhibit-1 { grid-column:1 / span 5; }
.exhibit-2 { grid-column:7 / span 4; margin-bottom:40px; }
.exhibit-3 { grid-column:2 / span 4; }
.exhibit-4 { grid-column:7 / span 5; }
.exhibit-label { background:var(--marble); border:1px solid var(--line); padding:14px 16px; margin-top:18px; font-family:var(--sans); font-size:.76rem; line-height:1.5; box-shadow:5px 5px 0 rgba(0,0,0,0.05); display:inline-block; }
.exhibit-label strong { display:block; font-family:var(--display); font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.exhibit-label .meta { color:var(--dim); }
.exhibit-label .award { color:var(--velvet); font-weight:600; }

/* ---------- 10. MANIFESTO ---------- */
.manifesto { max-width:760px; margin:0 auto; text-align:center; border-top:3px double var(--gold); border-bottom:3px double var(--gold); padding:54px 0; }
.manifesto h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:18px; }
.manifesto p { font-size:1.25rem; color:var(--ink); }
.manifesto .italic { color:var(--velvet); }

/* ---------- 11. PRACTICE INDEX (editorial numbered list) ---------- */
.index-list { border-top:1px solid var(--ink); }
.index-row { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line); transition:padding-left .3s ease, background .3s ease; }
.index-row:hover { padding-left:14px; background:rgba(184,144,47,0.06); }
.index-row .no { font-family:var(--sans); font-size:.8rem; color:var(--gold); letter-spacing:.1em; }
.index-row h3 { font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,3vw,2.2rem); }
.index-row p { color:var(--dim); margin-top:4px; font-size:1rem; }
.index-row .arrow { font-family:var(--sans); color:var(--velvet); }

/* ---------- 12. PROCESS ---------- */
.process { background:var(--ink); color:var(--beige); }
.process .section-title, .process .section-sub { color:var(--beige); }
.process .section-sub { color:#bcb6a8; }
.proc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14); }
.proc { background:var(--ink); padding:34px 26px; }
.proc .rn { font-family:var(--display); font-weight:900; font-size:2.6rem; color:var(--gold-soft); line-height:1; }
.proc h3 { font-size:1.4rem; margin:14px 0 8px; }
.proc p { color:#bcb6a8; font-size:.98rem; }

/* ---------- 13. PLAQUE STATS ---------- */
.plaques { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.plaque { text-align:center; border:1px solid var(--gold); padding:38px 20px; background:var(--marble); }
.plaque .fig { font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,5vw,3.4rem); color:var(--velvet); line-height:1; }
.plaque .cap { font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim); margin-top:10px; }

/* ---------- 14. VOICES (guestbook) ---------- */
.voices { max-width:880px; margin:0 auto; }
.voice { text-align:center; padding:30px 0; border-bottom:1px solid var(--line); }
.voice:last-child { border-bottom:0; }
.voice blockquote { font-size:clamp(1.3rem,3vw,1.8rem); font-style:italic; }
.voice .who { font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; color:var(--gold); margin-top:14px; }

/* ---------- 15. FAQ ---------- */
.faq { max-width:820px; margin:0 auto; border-top:1px solid var(--ink); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q { width:100%; text-align:left; background:none; border:none; font-family:var(--display); font-weight:700; font-size:1.3rem; padding:24px 0; cursor:pointer; display:flex; gap:16px; align-items:baseline; color:var(--ink); }
.faq-q .sign { margin-left:auto; color:var(--gold); font-family:var(--serif); font-size:1.5rem; transition:transform .2s; }
.faq-q[aria-expanded="true"] .sign { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a div { padding:0 0 24px; color:var(--dim); max-width:68ch; }

/* ---------- 16. VISIT / CTA ---------- */
.cta { background:var(--ink); color:var(--beige); text-align:center; padding:80px 24px; }
.cta h2 { font-size:clamp(2rem,5vw,3.4rem); margin-bottom:14px; }
.cta h2 .gold { color:var(--gold-soft); }
.cta p { color:#bcb6a8; max-width:48ch; margin:0 auto 30px; font-style:italic; }

/* ---------- 17. FORMS / subpages ---------- */
.page-head { text-align:center; padding:80px 24px 50px; border-bottom:1px solid var(--line); }
.page-head .estd { font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.34em; color:var(--gold); display:block; margin-bottom:18px; }
.page-head h1 { font-family:var(--display); font-weight:900; font-size:clamp(2.4rem,7vw,4.6rem); text-transform:uppercase; }
.prose { max-width:720px; margin:0 auto; }
.prose h2 { font-size:1.7rem; margin:34px 0 12px; }
.prose p, .prose li { color:#3a352e; margin-bottom:14px; }
.prose ul { padding-left:22px; list-style:square; }
.disclaimer { background:var(--marble); border:1px solid var(--gold); padding:18px 22px; font-family:var(--sans); font-size:.86rem; color:var(--dim); margin-top:30px; }
.contact-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:50px; align-items:start; max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.field { margin-bottom:20px; }
.field label { display:block; font-family:var(--sans); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; margin-bottom:8px; }
.field input, .field textarea, .field select { width:100%; background:var(--marble); border:1px solid var(--ink); padding:14px 16px; font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--velvet); box-shadow:0 0 0 3px rgba(139,0,0,0.12); }
.form-status { margin-top:14px; font-family:var(--sans); font-size:.86rem; background:var(--ink); color:var(--gold-soft); display:inline-block; padding:8px 14px; }
.form-status:empty { display:none; }
.form-note { color:var(--dim); font-size:.86rem; margin-top:10px; font-family:var(--sans); }
.info { border:1px solid var(--ink); padding:28px; background:var(--marble); }
.info li { padding:16px 0; border-bottom:1px solid var(--line); }
.info li:last-child { border-bottom:0; }
.info .k { display:block; font-family:var(--sans); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold); margin-bottom:4px; }

/* ---------- 18. FOOTER ---------- */
.site-footer { background:var(--ink); color:var(--beige); padding:64px 0 30px; border-top:4px double var(--gold); }
.footer-top { max-width:var(--maxw); margin:0 auto 44px; padding:0 28px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; }
.footer-brand .brand { color:var(--beige); font-size:1.8rem; }
.footer-brand p { color:#bcb6a8; margin-top:12px; max-width:34ch; font-style:italic; }
.footer-col h4 { font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:var(--gold-soft); margin-bottom:14px; }
.footer-col a { display:block; color:#cfc9bc; padding:6px 0; font-family:var(--sans); font-size:.9rem; }
.footer-col a:hover { color:var(--beige); }
.footer-bottom { max-width:var(--maxw); margin:0 auto; padding:22px 28px 0; border-top:1px solid rgba(255,255,255,0.14); text-align:center; font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.18em; color:#9a948a; }

/* ---------- 19. 404 ---------- */
.error-page { min-height:70vh; display:grid; place-items:center; text-align:center; padding:80px 24px; }
.error-page .code { font-family:var(--display); font-weight:900; font-size:clamp(5rem,20vw,12rem); line-height:.8; color:var(--velvet); }
.error-page .rule { width:120px; height:1px; background:var(--gold); margin:24px auto; }

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:900px){
  .gallery { grid-template-columns:1fr 1fr; gap:28px; }
  .exhibit-1,.exhibit-2,.exhibit-3,.exhibit-4 { grid-column:auto; margin-bottom:0; }
  .proc-grid { grid-template-columns:1fr 1fr; }
  .plaques { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .nav-links { position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0; background:var(--beige); border-bottom:1px solid var(--ink); padding:6px 0; transform:translateY(-130%); transition:transform .3s ease; }
  .nav-links.open { transform:translateY(0); }
  .nav-links a { padding:15px 28px; width:100%; }
  .nav-links .nav-cta { margin:10px 28px; text-align:center; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .gallery { grid-template-columns:1fr; }
  .proc-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .section { padding:60px 0; }
}

/* ---------- 21. MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}


/* ============================================================
   23. MOBILE REFINEMENTS (overflow + rhythm, baked in)
   ============================================================ */
html, body { overflow-x:clip; }
.search-bar input, .field input, .field textarea, .field select { min-width:0; }

@media (max-width:900px){
  .pdp { grid-template-columns:1fr; padding:44px 24px; gap:36px; }
  .pdp-media { position:static; }
  .product-grid { grid-template-columns:1fr 1fr; gap:24px; }
  .cart-line { grid-template-columns:84px 1fr; }
  .cart-line .th { width:84px; }
  .cart-line .qcol, .cart-line .lp { grid-column:2; }
  .cart-wrap, .acct-wrap, .article-body { padding:44px 24px 64px; }
  .page-head { padding:52px 24px 36px; }
  .masthead { padding:56px 24px 48px; }
}
@media (max-width:560px){
  .product-grid { grid-template-columns:1fr; }
  .page-head h1 { font-size:clamp(2rem,9vw,2.9rem); }
  .search-bar { padding:0 24px; }
  .search-bar button { padding:0 18px; }
  .masthead .rule { margin:24px auto; }
  .pdp-info h1 { font-size:clamp(1.8rem,8vw,2.5rem); }
  .cart-tot .row { font-size:1.15rem; }
  .index-row { gap:16px; }
}