/* G&A Legal — design concept
   Palette sampled from the firm's own business card and letterhead. */

:root {
  --ground:#F4F2ED; --card:#FFFFFF; --sunk:#EAE6DE;
  --ink:#121212; --ink-2:#4B4845; --muted:#86817C;
  --line:#E2DED5; --line-2:#D3CEC4;
  --coral-lt:#E8C0BB; --coral:#D16B63; --coral-dp:#B4544B;
  /* Veils the practice-page hero photograph so the ink keeps its contrast. */
  --scrim:rgba(244,242,237,.86); --scrim-2:rgba(244,242,237,.96);
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --ease:cubic-bezier(.22,.61,.24,1);
}
@media (prefers-color-scheme: dark) {
  :root { --ground:#141414; --card:#1D1D1C; --sunk:#212120;
    --ink:#F1EFEA; --ink-2:#C3BFB9; --muted:#8B8681;
    --line:#2E2E2C; --line-2:#3A3A38;
    --scrim:rgba(20,20,20,.80); --scrim-2:rgba(20,20,20,.94);
    --coral-lt:#4A2622; --coral:#D16B63; --coral-dp:#E0857D; }
}
:root[data-theme="dark"] { --ground:#141414; --card:#1D1D1C; --sunk:#212120;
  --ink:#F1EFEA; --ink-2:#C3BFB9; --muted:#8B8681;
  --line:#2E2E2C; --line-2:#3A3A38;
  --scrim:rgba(20,20,20,.80); --scrim-2:rgba(20,20,20,.94);
  --coral-lt:#4A2622; --coral:#D16B63; --coral-dp:#E0857D; }
:root[data-theme="light"] { --ground:#F4F2ED; --card:#FFFFFF; --sunk:#EAE6DE;
  --ink:#121212; --ink-2:#4B4845; --muted:#86817C;
  --line:#E2DED5; --line-2:#D3CEC4;
  --scrim:rgba(244,242,237,.86); --scrim-2:rgba(244,242,237,.96);
  --coral-lt:#E8C0BB; --coral:#D16B63; --coral-dp:#B4544B; }

* { box-sizing:border-box; }

/* <picture> wrappers must not become layout boxes, otherwise direct-child
   selectors like `.hero > img` stop matching and images render at intrinsic
   width. display:contents keeps the <img> as the real child. */
picture { display: contents; }
source { display: none; }

html { -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }

.flag { position:fixed; top:0; right:0; z-index:90; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; background:var(--ink); color:var(--ground);
  padding:.35rem .8rem; border-bottom-left-radius:8px; }

.bound { max-width:1200px; margin:0 auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
.bound-r { max-width:760px; margin:0 auto; padding-inline:clamp(1.1rem,4vw,2.5rem); }
a:focus-visible, button:focus-visible { outline:2px solid var(--coral); outline-offset:3px; border-radius:4px; }

/* ---------- chrome ---------- */
.strip { background:var(--ink); color:var(--ground); font-size:.74rem; text-align:center; padding:.5rem 1rem; }
.strip a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }

nav { border-bottom:1px solid var(--line); background:var(--ground); position:sticky; top:0; z-index:60; }
.nav-in { display:flex; align-items:center; gap:1rem; padding-block:.9rem; }
.logo { display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
.logo img { display:block; height:30px; width:auto; }
.logo.lg img { height:38px; }
.logo .on-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .on-light { display:none; }
  :root:not([data-theme="light"]) .logo .on-dark  { display:block; }
}
:root[data-theme="dark"]  .logo .on-light { display:none; }
:root[data-theme="dark"]  .logo .on-dark  { display:block; }
:root[data-theme="light"] .logo .on-light { display:block; }
:root[data-theme="light"] .logo .on-dark  { display:none; }

.nav-links { display:none; gap:clamp(1rem,2.6vw,2.1rem); margin-inline:auto; }
@media (min-width:900px){ .nav-links{ display:flex; } }
.nav-links a { color:var(--ink-2); text-decoration:none; font-size:.87rem; transition:color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--ink); }
.nav-links a[aria-current="page"] { text-decoration:underline; text-underline-offset:5px;
  text-decoration-color:var(--coral); text-decoration-thickness:2px; }
.nav-cta { margin-left:auto; flex:0 0 auto; background:var(--ink); color:var(--ground);
  text-decoration:none; font-size:.82rem; font-weight:500; padding:.55rem 1.05rem;
  border-radius:7px; transition:opacity .2s ease; white-space:nowrap; }
.nav-cta:hover { opacity:.85; }

.navtoggle { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--line-2); background:var(--card); border-radius:8px; cursor:pointer;
  color:var(--ink); padding:0; }
@media (min-width:900px){ .navtoggle{ display:none; } }
.navtoggle i { display:block; width:16px; height:1.5px; background:currentColor; position:relative;
  transition:background .2s ease; }
.navtoggle i::before, .navtoggle i::after { content:""; position:absolute; left:0; width:16px; height:1.5px;
  background:currentColor; transition:transform .25s ease, top .25s ease; }
.navtoggle i::before { top:-5px; } .navtoggle i::after { top:5px; }
nav.open .navtoggle i { background:transparent; }
nav.open .navtoggle i::before { top:0; transform:rotate(45deg); }
nav.open .navtoggle i::after  { top:0; transform:rotate(-45deg); }
@media (max-width:899px){
  .nav-links { position:absolute; left:0; right:0; top:100%; margin:0; flex-direction:column; gap:0;
    background:var(--ground); border-bottom:1px solid var(--line);
    padding:.2rem clamp(1.1rem,4vw,2.5rem) .9rem; }
  nav.open .nav-links { display:flex; }
  .nav-links a { padding-block:.8rem; font-size:.98rem; border-bottom:1px solid var(--line); }
  .nav-links a:last-child { border-bottom:none; }
}

/* ---------- shared type ---------- */
.head2 { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1.3rem,3vw,2rem); }
.head2 h2 { margin:0; font-weight:400; font-size:clamp(1.55rem,4vw,2.5rem); letter-spacing:-.04em; line-height:1.05; }
.head2 h2 span { color:var(--muted); }
.head2 .spacer { margin-left:auto; }
.eyebrow { font-size:.66rem; letter-spacing:.19em; text-transform:uppercase; color:var(--coral-dp); font-weight:600; }

.ghost-btn { display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; flex:0 0 auto;
  border:1px solid var(--line-2);
  border-radius:8px; padding:.45rem .85rem; font-size:.8rem; color:var(--ink); text-decoration:none;
  background:var(--card); transition:background .2s ease, border-color .2s ease; }
.ghost-btn:hover { background:var(--sunk); border-color:var(--muted); }
.arw { width:36px; height:36px; flex:0 0 auto; border:1px solid var(--line-2); border-radius:8px;
  background:var(--card); display:grid; place-items:center; cursor:pointer; color:var(--ink);
  transition:background .25s ease, border-color .25s ease, transform .25s ease; }
.arw svg { width:13px; height:13px; }
.arw:hover, a:hover > .arw, a:hover .arw { background:var(--coral); border-color:var(--coral); color:#fff;
  transform:translate(1px,-1px); }

.roll { display:inline-block; position:relative; overflow:hidden; vertical-align:bottom;
  white-space:nowrap; flex:0 0 auto; }
.roll > span { display:block; transition:transform .52s var(--ease); }
.roll > span + span { position:absolute; inset:0; transform:translateY(100%); }
a:hover > .roll > span:first-child, button:hover > .roll > span:first-child,
a:focus-visible > .roll > span:first-child, button:focus-visible > .roll > span:first-child { transform:translateY(-100%); }
a:hover > .roll > span + span, button:hover > .roll > span + span,
a:focus-visible > .roll > span + span, button:focus-visible > .roll > span + span { transform:translateY(0); }

.hoverchip { position:fixed; left:0; top:0; z-index:120; pointer-events:none;
  background:var(--ink); color:var(--ground); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.5rem .9rem; border-radius:100px; white-space:nowrap;
  opacity:0; transform:translate(-50%,-50%) scale(.7);
  transition:opacity .28s var(--ease), transform .38s var(--ease); }
.hoverchip.on { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---------- intro + page transition ---------- */
.veil { position:fixed; inset:0; z-index:200; background:var(--ground); pointer-events:none;
  display:grid; place-items:center; animation:veilOut .55s var(--ease) .92s forwards; }
@keyframes veilOut { from { opacity:1; } to { opacity:0; visibility:hidden; } }
.veil-mark { position:relative; width:min(52vw,330px); }
.veil-mark img { display:block; width:100%; height:auto; }
.veil-mark .ghost { opacity:.13; }
.veil-mark .fill { position:absolute; inset:0; clip-path:inset(0 100% 0 0);
  animation:markFill .78s var(--ease) .1s forwards; }
@keyframes markFill { to { clip-path:inset(0 0 0 0); } }

/* ---------- page transitions ----------
   Native cross-document View Transitions. The incoming page wipes across the
   outgoing one, which dims behind it — no gap, no colour flash. No library and
   no link interception; unsupported browsers just navigate. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vtDim  .46s var(--ease) both; }
::view-transition-new(root) { animation: vtWipe .52s var(--ease) both; }

@keyframes vtDim  { from { opacity: 1; } to { opacity: .4; } }
@keyframes vtWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- footer ---------- */
footer { border-top:1px solid var(--line); padding-block:2.2rem 3rem; margin-top:auto; }
.foot-in { display:flex; flex-direction:column; gap:1.5rem; }
.foot-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.6rem; }
.foot-cols .collabel { margin:0 0 .6rem; font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.foot-cols ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.foot-cols a { color:var(--ink-2); text-decoration:none; font-size:.88rem; }
.foot-cols a:hover { color:var(--ink); }
.tagline { margin:.85rem 0 0; font-size:.9rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.fnote { font-size:.76rem; color:var(--muted); line-height:1.7; max-width:80ch; margin-top:1.2rem; }
.fnote strong { color:var(--ink); }
footer .logo { align-self:flex-start; }

/* ---------- reveals ---------- */
.rv { opacity:0; transform:translateY(18px); }
.rv.in { opacity:1; transform:none; transition:opacity .75s var(--ease), transform .75s var(--ease); }

/* ---------- page header (interior pages) ---------- */
.phead { padding-block:clamp(2.4rem,6vw,4.2rem) clamp(1.6rem,4vw,2.6rem); border-bottom:1px solid var(--line); }
.phead .crumb { display:flex; gap:.5rem; align-items:center; font-size:.78rem; color:var(--muted); margin-bottom:1rem; }
.phead .crumb a { color:var(--muted); text-decoration:none; }
.phead .crumb a:hover { color:var(--ink); }
.phead h1 { margin:0; font-weight:300; font-size:clamp(2.1rem,6vw,4rem); line-height:1; letter-spacing:-.04em; text-wrap:balance; }
.phead .lede { margin:1.2rem 0 0; max-width:60ch; font-size:clamp(1rem,1.9vw,1.15rem); color:var(--ink-2); }

/* Practice heroes run the section photograph as the header's own background.
   The scrim is theme-aware, so the ink keeps its contrast in both modes rather
   than the header needing a second set of colours.
   The header stays a block: .bound centres itself with auto margins, which a
   grid or flex parent reads as "do not stretch" and collapses to content. */
.phead.has-art { position:relative; isolation:isolate;
  padding-block:clamp(3.4rem,9vw,6rem) clamp(3rem,8vw,5rem); }
.phead-bg { position:absolute; inset:0; overflow:hidden; z-index:0; background:var(--sunk); }
/* No display override here — picture stays display:contents so the <img> is the
   real child and height:100% resolves against .phead-bg. */
.phead-bg img { width:100%; height:100%; object-fit:cover; object-position:center 42%; }
/* Heavier at the leading edge, where the crumb and title sit. */
.phead-bg::after { content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--scrim-2) 0%, var(--scrim-2) 38%, var(--scrim) 82%, var(--scrim) 100%); }
.phead.has-art > .bound { position:relative; z-index:1; }
/* --muted tops out at 3.9:1 on pure white, so it cannot carry small text over a
   photograph. --ink-2 clears AA with room to spare and keeps the hierarchy. */
.phead.has-art .crumb, .phead.has-art .crumb a { color:var(--ink-2); }
.phead.has-art .crumb a:hover { color:var(--ink); }

/* ---------- practice pages ---------- */
.pbody { padding-block:clamp(2.2rem,5vw,3.6rem); }
.pgrid2 { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.6rem,4vw,3rem); }
@media (min-width:900px){ .pgrid2 { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; } }
.prose h2 { font-size:clamp(1.2rem,2.6vw,1.6rem); font-weight:500; letter-spacing:-.03em; margin:2.2rem 0 .7rem; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:1.02rem; font-weight:600; margin:1.6rem 0 .5rem; letter-spacing:-.01em; }
.prose p { margin:0 0 1rem; color:var(--ink-2); }
.prose ul { margin:0 0 1.2rem; padding-left:1.1rem; display:flex; flex-direction:column; gap:.45rem; }
.prose li { color:var(--ink-2); }
.prose li::marker { color:var(--coral); }
.prose blockquote { margin:1.4rem 0; padding:1rem 1.2rem; background:var(--sunk);
  border-left:3px solid var(--coral); font-size:1.02rem; color:var(--ink); }
.prose blockquote p:last-child { margin:0; }

.aside { display:flex; flex-direction:column; gap:1rem; position:sticky; top:82px; }
.abox { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.2rem; }
.abox h2 { margin:0 0 .7rem; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.abox ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.abox li a { color:var(--ink); text-decoration:none; font-size:.92rem; display:flex; justify-content:space-between; gap:.6rem; }
.abox li a:hover { color:var(--coral-dp); }
.abox li a[aria-current="page"] { color:var(--coral-dp); font-weight:600; }
.abox .cta { display:block; background:var(--ink); color:var(--ground); text-align:center;
  text-decoration:none; padding:.75rem 1rem; border-radius:8px; font-size:.9rem; font-weight:500; }
.abox .cta:hover { opacity:.88; }

.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:.2rem 0 1.4rem; }
.chip-s { border:1px solid var(--line-2); background:var(--card); border-radius:100px;
  padding:.34rem .8rem; font-size:.82rem; color:var(--ink-2); }

.anchor-target { display:block; position:relative; top:-72px; visibility:hidden; }

/* ---------- blog ---------- */
.post-meta { display:flex; gap:.9rem; flex-wrap:wrap; font-size:.8rem; color:var(--muted); margin-top:1rem; }
.post-meta .tag { background:var(--coral-lt); color:var(--coral-dp); padding:.16rem .55rem;
  border-radius:100px; font-weight:600; font-size:.72rem; }
:root[data-theme="dark"] .post-meta .tag,
:root:not([data-theme="light"]) .post-meta .tag { color:var(--coral-dp); }

.article { padding-block:clamp(2rem,5vw,3.4rem); }
.article .body { font-family:var(--serif); font-size:1.09rem; line-height:1.75; }
.article .body p { margin:0 0 1.25rem; }
.article .body p strong { font-family:var(--sans); font-size:.98rem; }
.article .body em { font-style:italic; }
.article .body a { color:var(--coral-dp); word-break:break-word; }
.article .kicker-note { font-family:var(--sans); font-size:.85rem; color:var(--muted);
  border-top:1px solid var(--line); padding-top:1.1rem; margin-top:2rem; }

.mark-plate { position:relative; border-radius:14px; overflow:hidden; margin-bottom:clamp(1.4rem,3vw,2.2rem);
  min-height:210px; display:grid; place-items:center; padding:2rem 1.2rem; }
.mark-plate .rings { position:absolute; width:min(58%,230px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.15); }
.mark-plate .rings::before { content:""; position:absolute; inset:9%; border-radius:50%; border:1px solid rgba(255,255,255,.11); }
.mark-plate .rings::after { content:""; position:absolute; inset:20%; border-radius:50%; border:1px dashed rgba(255,255,255,.09); }
.mark-plate .term { position:relative; text-align:center; font-weight:300; max-width:14ch;
  font-size:clamp(1.3rem,4.2vw,2.3rem); letter-spacing:.085em; line-height:1.14; color:rgba(255,255,255,.95); }
.mark-plate .sym { font-size:.46em; vertical-align:super; opacity:.8; margin-left:.14em; letter-spacing:0; }
.mark-plate .status { position:absolute; bottom:1rem; left:0; right:0; text-align:center;
  font-size:.6rem; letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.5); }

.postnav { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:2.4rem;
  border-top:1px solid var(--line); padding-top:1.6rem; }
@media (min-width:640px){ .postnav { grid-template-columns:1fr 1fr; } }
.postnav a { text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:1rem 1.1rem; background:var(--card); transition:border-color .25s ease, transform .3s var(--ease); }
.postnav a:hover { border-color:var(--muted); transform:translateY(-2px); }
.postnav .k { display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.postnav .t { font-size:.95rem; line-height:1.35; }
.postnav .next { text-align:right; }

/* blog index */
.bloglist { display:grid; grid-template-columns:minmax(0,1fr); gap:1.1rem; }
@media (min-width:760px){ .bloglist { grid-template-columns:1fr 1fr; } }
.bcard { display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card);
  transition:border-color .25s ease, transform .3s var(--ease); }
.bcard:hover { border-color:var(--muted); transform:translateY(-3px); }
.bcard .plate { min-height:168px; display:grid; place-items:center; position:relative; padding:1.4rem; }
.bcard .plate .term { color:rgba(255,255,255,.95); font-weight:300; font-size:clamp(1.05rem,2.6vw,1.5rem);
  letter-spacing:.085em; text-align:center; max-width:14ch; }
.bcard .plate .sym { font-size:.46em; vertical-align:super; opacity:.8; margin-left:.14em; }
.bcard .txt { padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.45rem; }
.bcard .meta { font-size:.74rem; color:var(--muted); display:flex; gap:.8rem; }
.bcard h2 { margin:0; font-size:1.05rem; font-weight:500; letter-spacing:-.02em; line-height:1.3; }
.bcard p { margin:0; font-size:.88rem; color:var(--ink-2); line-height:1.55; }

@media (prefers-reduced-motion: reduce) {
  .rv,.rv.in { opacity:1; transform:none; transition:none; }
  .roll > span, .roll > span + span { transition:none; }
  .hoverchip, .veil { display:none; }
  .arw:hover, .bcard:hover, .postnav a:hover { transform:none; }
  * { scroll-behavior:auto !important; }
}

/* ================= mobile refinements =================
   Audited at 375px: 43 tap targets under 44px, 76 text nodes under 13px,
   and a 22-cell logo wall running 11 rows deep. */

@media (max-width: 899px) {

  /* Top strip carries the phone number — the primary contact route on a
     phone. It was 11.8px type in a 17px tap target. */
  .strip { font-size: .84rem; padding: .7rem 1rem; line-height: 1.5; }
  .strip a { display: inline-block; padding: .35rem .1rem; min-height: 44px;
             line-height: 34px; border-bottom-width: 1px; }

  /* Primary chrome to 44px */
  .nav-in { padding-block: .7rem; }
  .nav-cta { padding: .78rem 1.15rem; font-size: .88rem; }
  .navtoggle { width: 44px; height: 44px; }
  .logo { min-height: 44px; }
  .logo img { height: 26px; }


  /* Arrow buttons and inline links */
  .arw { width: 44px; height: 44px; }
  .ghost-btn { padding: .7rem 1rem; font-size: .86rem; }
  .prow { padding-block: 1.05rem; }
  /* padding alone left these at 36-38px; enforce the floor directly */
  .foot-cols a, .abox li a, .cd .v a, .modal-side a {
    display: inline-flex; align-items: center; min-height: 44px; }
  .foot-cols li { line-height: 1.3; }
  .phead .crumb { gap: .2rem; }
  .phead .crumb a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .35rem; }


  /* Readability floor */
  .prow .meta, .bcard .meta, .post-meta { font-size: .78rem; }
  .fnote { font-size: .8rem; }
  .foot-cols a, .foot-cols li { font-size: .92rem; }


  /* Article measure and rhythm */
  .article .body { font-size: 1.05rem; line-height: 1.72; }
  .prose h2 { margin-top: 1.8rem; }

  /* Sticky sidebar makes no sense stacked */
  .aside { position: static; }
}

/* Very small phones */
@media (max-width: 360px) {
  .strip { font-size: .8rem; }
}

/* ---------- skip link ---------- */
.skip { position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:var(--ground);
  padding:.8rem 1.2rem; border-radius:0 0 8px 0; font-size:.9rem; text-decoration:none; }
.skip:focus, .skip:focus-visible { left:0; }