/* ============================================================
   S. N. Tiwari, Advocate — Talc Legal
   Aesthetic: legal chambers / letterpress. Oxblood + brass on
   parchment.

   READABILITY BRIEF: primary audience is 45-70. Decisions that
   follow from that, and should not be "tidied" away later:
     - Bodoni Moda (didone, hairline thins) is used ONLY at
       display sizes >= ~32px. Never for body or sub-headings.
     - Body face is Source Sans 3 — humanist, large x-height, open
       apertures, familiar letterforms, and it holds up at 400.
       HISTORY: this was Atkinson Hyperlegible, picked because the
       Braille Institute drew it for low-vision reading. Rejected on
       owner review 2026-07-27: it is wide, its letterforms read as
       unusual, and at 400 it looks thin on the warm parchment.
       "Technically legible" turned out not to mean "comfortable to
       read". Do not switch back without testing on a real reader.
     - Base text is 20px / 1.7. Nothing informational below 16px.
     - Links are underlined, not colour-only.
     - No uppercase+letterspacing on anything you must READ;
       it survives only on short decorative labels.
   ============================================================ */

:root{
  --oxblood:      #4E0F14;
  --oxblood-deep: #360A0E;
  --oxblood-ink:  #290709;
  --brass:        #9A6F1E;   /* darkened from B0812A to hold AA on parchment */
  --brass-lit:    #C79A34;
  --brass-on-dark:#E3BE66;   /* lighter brass, for use on the oxblood blocks */
  --parchment:    #F8F4EC;
  --parchment-2:  #F1E9DC;
  --ink:          #141110;
  --ink-soft:     #3A322B;   /* darkened 2026-07-27 for body-copy contrast */
  --rule:         #D6C9B4;

  --measure: 36rem;
  --gutter: clamp(1.15rem, 5vw, 4.5rem);
  --shell: 74rem;

  --ff-display: "Bodoni Moda", Georgia, serif;
  --ff-text: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--parchment);
  color:var(--ink);
  font-family:var(--ff-text);
  font-size:1.25rem;            /* 20px — Source Sans sits smaller than Atkinson did */
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block }

/* Display type — Bodoni only where it is large enough to read. */
h1,h2{ font-family:var(--ff-display); font-weight:600; line-height:1.08; margin:0 }
h1{ font-size:clamp(2.9rem,8.5vw,6rem); letter-spacing:-.02em }
h2{ font-size:clamp(2.1rem,5.2vw,3.3rem); letter-spacing:-.012em }

/* Sub-headings use the text face — this is the main readability fix. */
h3{
  font-family:var(--ff-text); font-weight:700; font-size:1.3rem;
  line-height:1.35; margin:0; letter-spacing:-.005em;
}

p{ margin:0 0 1.1em }
p:last-child{ margin-bottom:0 }
a{ color:inherit }

/* ---------- shared bits ---------------------------------- */

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter) }
.measure{ max-width:var(--measure) }

.eyebrow{
  font-size:.92rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.13em; color:var(--brass); margin:0 0 1.1rem;
}

.grain{ position:relative; isolation:isolate }
.grain::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > *{ position:relative; z-index:2 }

.rule-2{ border:0; border-top:1px solid var(--brass); position:relative; margin:2.4rem 0; opacity:.5 }
.rule-2::after{ content:""; position:absolute; left:0; right:0; top:3px; border-top:1px solid var(--brass); opacity:.5 }

/* ---------- buttons — large, sentence case --------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:60px; padding:.9rem 1.9rem;
  font-family:var(--ff-text); font-size:1.09rem; font-weight:700;
  letter-spacing:.01em; text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn-brass{ background:var(--brass); color:#FFF8E8; border-color:var(--brass) }
.btn-brass:hover{ background:#835D15; border-color:#835D15 }
.btn-ghost{ background:transparent; color:var(--parchment); border-color:rgba(248,244,236,.6) }
.btn-ghost:hover{ border-color:var(--parchment); background:rgba(248,244,236,.1) }
.btn-ink{ background:var(--oxblood); color:var(--parchment); border-color:var(--oxblood) }
.btn-ink:hover{ background:var(--oxblood-deep); border-color:var(--oxblood-deep) }

:where(a,button,summary):focus-visible{ outline:3px solid var(--brass); outline-offset:3px }

/* ---------- masthead ------------------------------------- */

.masthead{ background:var(--oxblood-ink); color:var(--parchment) }
.masthead-in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:82px; padding-block:.9rem;
}
.wordmark{ text-decoration:none; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap }
.wordmark b{ font-family:var(--ff-display); font-weight:600; font-size:1.55rem; letter-spacing:-.01em }
.wordmark span{
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em;
  color:var(--brass-on-dark);
}
.nav{ display:flex; gap:.2rem; align-items:center }
.nav a{
  text-decoration:none; font-size:1.06rem; font-weight:700;
  padding:.75rem .95rem; color:rgba(248,244,236,.88); position:relative;
  transition:color .2s ease;
}
.nav a:hover, .nav a[aria-current="page"]{ color:#fff }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.95rem; right:.95rem; bottom:.4rem;
  height:2px; background:var(--brass-on-dark);
}
@media (max-width:760px){
  .masthead-in{ flex-direction:column; align-items:flex-start; gap:.3rem; padding-block:1rem }
  .nav{ margin-left:-.95rem; flex-wrap:wrap }
}

/* ---------- hero ----------------------------------------- */

/* Photographic hero. The overlay is deliberately heavy — legible text over the
   image beats showing off the image, for this audience. Do not lighten it. */
.hero{
  background:
    linear-gradient(96deg, rgba(41,7,9,.97) 0%, rgba(41,7,9,.91) 38%, rgba(54,10,14,.76) 70%, rgba(78,15,20,.62) 100%),
    url("/assets/img/hero.webp") center right / cover no-repeat,
    var(--oxblood-ink);
  color:var(--parchment);
  padding-block:clamp(3.5rem,11vw,7.5rem);
  border-bottom:1px solid rgba(199,154,52,.35);
}
@media (max-width:860px){
  /* Narrow screens sit the text over the busiest part of the photo — go darker. */
  .hero{
    background:
      linear-gradient(178deg, rgba(41,7,9,.95) 0%, rgba(41,7,9,.91) 55%, rgba(54,10,14,.88) 100%),
      url("/assets/img/hero.webp") center / cover no-repeat,
      var(--oxblood-ink);
  }
}
/* Interior pages keep a plain oxblood hero so the photo stays a home-page event. */
.hero-plain{
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(199,154,52,.16) 0%, transparent 58%),
    linear-gradient(168deg, var(--oxblood) 0%, var(--oxblood-deep) 58%, var(--oxblood-ink) 100%);
}
.hero .eyebrow{ color:var(--brass-on-dark) }
.hero h1{ color:#FDFBF7; max-width:15ch }
.hero-firm{
  font-family:var(--ff-display); font-style:italic; font-size:clamp(1.4rem,3vw,1.85rem);
  color:var(--brass-on-dark); margin:1rem 0 0; line-height:1.3;
}
.hero-lede{ max-width:40rem; margin:1.9rem 0 0; color:rgba(253,251,247,.93); font-size:1.24rem }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.5rem }
.hero-meta{
  margin-top:2.8rem; padding-top:1.5rem; border-top:1px solid rgba(248,244,236,.25);
  display:flex; flex-wrap:wrap; gap:.5rem 2.2rem;
  font-size:1rem; font-weight:700; letter-spacing:.06em; color:rgba(253,251,247,.82);
}

.rise{ animation:rise .8s cubic-bezier(.2,.7,.3,1) both }
.rise:nth-child(1){ animation-delay:.04s } .rise:nth-child(2){ animation-delay:.12s }
.rise:nth-child(3){ animation-delay:.2s }  .rise:nth-child(4){ animation-delay:.28s }
.rise:nth-child(5){ animation-delay:.36s } .rise:nth-child(6){ animation-delay:.44s }
@keyframes rise{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .rise{ animation:none } }

/* ---------- sections ------------------------------------- */

.band{ padding-block:clamp(3.5rem,8vw,6rem) }
.band-alt{ background:var(--parchment-2) }
.band-dark{ background:var(--oxblood-ink); color:#FDFBF7 }
.band-dark h2{ color:#FDFBF7 }
.band-dark .eyebrow{ color:var(--brass-on-dark) }

/* Roman numeral marker. Sized to be legible, not decorative-tiny.
   NB: the h2 sits inside .shell — must stay a DESCENDANT selector. */
.numbered h2{ display:flex; align-items:baseline; gap:1.05rem; flex-wrap:wrap }
.numbered h2[data-num]::before{
  content:attr(data-num);
  align-self:center; flex:none;
  font-family:var(--ff-text); font-size:1.05rem; font-weight:700; letter-spacing:0;
  color:var(--brass); border:2px solid var(--brass); border-radius:50%;
  width:2.9rem; height:2.9rem; display:inline-grid; place-items:center;
}
.band-dark .numbered h2[data-num]::before,
.band-dark h2[data-num]::before{ color:var(--brass-on-dark); border-color:var(--brass-on-dark) }

.lede{ font-size:1.3rem; color:var(--ink-soft); max-width:46rem; margin-top:1.6rem; line-height:1.7 }
.band-dark .lede{ color:rgba(253,251,247,.9) }

/* ---------- practice list -------------------------------- */

.practice{ margin-top:2.8rem; border-top:1px solid var(--rule) }
.practice-item{
  display:grid; grid-template-columns:5.5rem 1fr; gap:0 2rem;
  padding:2.1rem 0; border-bottom:1px solid var(--rule);
}
.practice-item .n{ font-family:var(--ff-display); font-size:2.3rem; color:var(--brass); line-height:1 }
.practice-item p{ color:var(--ink-soft); margin-top:.55rem; max-width:46rem; font-size:1.13rem }
@media (max-width:640px){
  .practice-item{ grid-template-columns:1fr; gap:.4rem }
  .practice-item .n{ font-size:1.6rem }
}

/* ---------- FAQ ------------------------------------------ */

.faq{ margin-top:2.6rem; border-top:1px solid var(--rule) }
.faq details{ border-bottom:1px solid var(--rule) }
.faq summary{
  cursor:pointer; list-style:none; padding:1.5rem 3rem 1.5rem 0; position:relative;
  font-weight:700; font-size:1.22rem; line-height:1.45; min-height:56px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:.4rem; top:1.35rem;
  font-size:1.9rem; line-height:1; color:var(--brass); font-weight:400;
}
.faq details[open] summary::after{ content:"–" }
.faq summary:hover{ color:var(--oxblood) }
.faq .a{ padding:0 3rem 1.6rem 0; color:var(--ink-soft); max-width:48rem; font-size:1.13rem }

/* ---------- contact -------------------------------------- */

.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:2.6rem; margin-top:3rem;
}
.cblock a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.cblock a:hover{ text-decoration-thickness:2px }
.band-dark .cblock a{ color:#FDFBF7 }

/* Phone numbers: the single most important element for this audience. */
.tel{
  font-family:var(--ff-text); font-weight:700; font-size:1.6rem; letter-spacing:.01em;
  display:inline-block; margin-bottom:.45rem; line-height:1.35;
}
address{ font-style:normal; font-size:1.13rem }

/* ---------- footer --------------------------------------- */

.foot{ background:var(--oxblood-ink); color:rgba(253,251,247,.8); padding-block:3rem; font-size:1.02rem }
.foot a{ color:#FDFBF7; text-decoration:underline; text-underline-offset:3px }
.foot-in{ display:flex; flex-wrap:wrap; gap:1.5rem 3rem; justify-content:space-between; align-items:flex-start }
.foot-note{ max-width:34rem; font-size:.98rem; line-height:1.65; color:rgba(253,251,247,.72) }
.foot nav{ display:flex; gap:1.5rem; flex-wrap:wrap }

/* ---------- sticky mobile call bar ----------------------- */

.callbar{ display:none }
@media (max-width:760px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; inset:auto 0 0 0; z-index:50;
    background:var(--oxblood-ink); border-top:2px solid var(--brass-on-dark);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .callbar a{
    min-height:64px; display:flex; align-items:center; justify-content:center;
    text-decoration:none; color:#FDFBF7; font-weight:700; font-size:1.12rem;
  }
  .callbar a + a{ border-left:1px solid rgba(248,244,236,.2) }
  .callbar a.primary{ background:var(--brass); color:#FFF8E8 }
  body{ padding-bottom:64px }
}

/* ---------- misc ----------------------------------------- */

.skip{
  position:absolute; left:-9999px; top:0; background:var(--brass); color:#FFF8E8;
  padding:.9rem 1.3rem; z-index:100; font-weight:700;
}
.skip:focus{ left:0 }

/* ============================================================
   IMAGERY
   All photographs are Unsplash-licensed stock and are ILLUSTRATIVE.
   They are not the advocate's chambers and must never be captioned
   as though they were. Alt text describes the picture itself.
   ============================================================ */

figure{ margin:0 }

.frame{
  position:relative; overflow:hidden; background:var(--parchment-2);
  border:1px solid var(--rule);
}
.frame img{ width:100%; height:100%; object-fit:cover; display:block }

/* ---------- split: text beside a picture ------------------ */

.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; margin-top:1.8rem;
}
.split-fig{ align-self:stretch; min-height:22rem }
.split-fig .frame{ height:100% }
@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:2rem }
  .split-fig{ min-height:15rem; order:-1 }
}

/* ---------- full-bleed picture band ----------------------- */

.bleed{ position:relative; height:clamp(13rem,26vw,20rem); overflow:hidden; background:var(--oxblood-ink) }
.bleed img{ width:100%; height:100%; object-fit:cover; opacity:.62 }
.bleed::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(41,7,9,.55) 0%, rgba(41,7,9,.2) 50%, rgba(41,7,9,.55) 100%);
}

/* ---------- carousel -------------------------------------- */
/* Manual advance only. Auto-rotating carousels are a known
   accessibility problem and are actively hostile to slower readers,
   which is the majority of this audience. Do not add autoplay.
   Works with JS off: the track is a native scroll-snap region.     */

.carousel{ margin-top:2.8rem }

.car-track{
  position:relative;   /* makes it the offsetParent, so slide.offsetLeft is track-relative */
  display:flex; gap:1.25rem; margin:0; padding:0 var(--gutter) .5rem; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--brass) transparent;
  -webkit-overflow-scrolling:touch;
}
@media (prefers-reduced-motion:reduce){ .car-track{ scroll-behavior:auto } }
.car-track::-webkit-scrollbar{ height:8px }
.car-track::-webkit-scrollbar-thumb{ background:var(--brass); border-radius:4px }

.car-slide{ flex:0 0 min(86vw, 27rem); scroll-snap-align:center }
.car-slide .frame{ aspect-ratio:4/3 }
.car-cap{ padding-top:1.1rem }
.car-cap h3{ margin-bottom:.35rem }
.car-cap p{ color:var(--ink-soft); font-size:1.08rem }
.band-dark .car-cap p{ color:rgba(253,251,247,.85) }

.car-controls{
  display:flex; align-items:center; gap:1.25rem; margin-top:1.8rem; flex-wrap:wrap;
}
.car-btn{
  width:60px; height:60px; flex:none; border-radius:50%; cursor:pointer;
  background:transparent; border:2px solid var(--brass); color:var(--brass);
  font-size:1.9rem; line-height:1; display:grid; place-items:center;
  transition:background-color .2s ease, color .2s ease;
  font-family:var(--ff-text);
}
.car-btn:hover:not(:disabled){ background:var(--brass); color:#FFF8E8 }
.car-btn:disabled{ opacity:.32; cursor:default }
.band-dark .car-btn{ border-color:var(--brass-on-dark); color:var(--brass-on-dark) }
.band-dark .car-btn:hover:not(:disabled){ background:var(--brass-on-dark); color:var(--oxblood-ink) }

.car-dots{ display:flex; gap:.6rem; align-items:center }
.car-dot{
  width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center;
}
.car-dot::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:transparent; border:2px solid var(--brass); transition:background-color .2s ease;
}
.car-dot[aria-current="true"]::before{ background:var(--brass) }
.band-dark .car-dot::before{ border-color:var(--brass-on-dark) }
.band-dark .car-dot[aria-current="true"]::before{ background:var(--brass-on-dark) }

/* Photo credit line — Unsplash needs none, but honesty about stock does. */
.credit{
  margin-top:1.6rem; font-size:.92rem; color:var(--ink-soft); opacity:.85;
}
.band-dark .credit{ color:rgba(253,251,247,.62) }

/* ============================================================
   NARROW-SCREEN FIXES  (measured on a 382px viewport)
   ============================================================ */

@media (max-width:470px){
  /* The control row needed ~403px in 382px, so the next-button wrapped onto
     a second line below the dots. Tighten the gaps rather than shrink the
     targets — buttons stay 60px and dots stay 44px, both above the 44px
     minimum; only the whitespace between them gives way. */
  .car-controls{ gap:.55rem; justify-content:center }
  .car-dots{ gap:0 }

  /* Hero: trim the vertical padding so the second call-to-action is not
     pushed a full screen below the fold. */
  .hero{ padding-block:2.5rem 2.75rem }
  .hero-lede{ font-size:1.16rem; margin-top:1.5rem }
  .hero-cta{ margin-top:1.9rem; gap:.7rem }
  .hero-cta .btn{ width:100% }          /* full-width taps beat side-by-side */
  .hero-meta{ margin-top:2rem; padding-top:1.2rem; gap:.4rem 1.5rem }

  /* Masthead was 134px of a 796px viewport before any content showed. */
  .masthead-in{ min-height:0; padding-block:.75rem }
  .wordmark b{ font-size:1.4rem }
}

/* ============================================================
   MOBILE FIRST FOLD  (owner review 2026-07-27: "full of things,
   no breathing space")
   The fold was carrying eight competing elements: wordmark, nav,
   eyebrow, h1, firm name, a long lede, two buttons, a four-item
   practice row — plus the fixed call bar. Nothing led, so nothing
   read. Cut to who / what / one action, and give them room.
   ============================================================ */

@media (max-width:470px){

  /* Reclaim the 134px the masthead spent before any content appeared. */
  .masthead-in{ padding-block:.6rem; gap:.15rem }
  .wordmark b{ font-size:1.35rem }
  .wordmark span{ font-size:.72rem }
  .nav a{ padding:.55rem .8rem; font-size:1rem }
  .nav{ margin-left:-.8rem }

  .hero{ padding-block:3rem 3.25rem }

  .hero .eyebrow{ font-size:.8rem; letter-spacing:.15em; margin-bottom:1.5rem }

  /* Slightly smaller than the desktop clamp so two lines do not dominate
     the whole screen, but still far above comfortable-reading minimum. */
  .hero h1{ font-size:2.5rem; line-height:1.14; max-width:none }

  .hero-firm{ font-size:1.22rem; margin-top:1.15rem }

  .hero-lede{ font-size:1.12rem; line-height:1.62; margin-top:1.75rem }

  .hero-cta{ margin-top:2.4rem; gap:.75rem }
  .hero-cta .btn{ width:100% }

  /* Two elements removed rather than shrunk — both were duplicates:
     the ghost button repeats "Chambers" in the fixed call bar, and the
     Civil/Criminal/Family/Corporate row repeats the carousel verbatim,
     one screen further down. */
  .hero-cta .btn-ghost{ display:none }
  .hero-meta{ display:none }
}