/* Schildgen Law — landing page. Self-hosted font and image only. No JS. */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("/fonts/cormorant-garamond-500-subset.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
:root{
  --gold:#b8955a; --gold-hi:#d2b27a; --gold-lo:#9c7c48;
  --ivory:#ece6d8; --ink:#11151c; --legal:#83848c;
  --serif:"Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;color:var(--ivory);
  font-family:var(--serif);font-weight:500;line-height:1.4;font-variant-numeric:lining-nums;
  background-color:var(--ink);
  /* Fallback when the image is unavailable */
  background-image:
    radial-gradient(ellipse 80% 75% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(135deg,#1a2029 0%,#121821 45%,#161c25 70%,#0d1117 100%);
  background-size:cover;
}
@supports (background-image:url("/img/marble.webp")){
  body{background-image:
    radial-gradient(ellipse 80% 75% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    url("/img/marble.webp"),
    linear-gradient(135deg,#1a2029 0%,#121821 45%,#161c25 70%,#0d1117 100%);
    background-position:center;background-size:cover;background-repeat:no-repeat}
}
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:0 clamp(1.25rem,2.6vw,2.5rem);animation:fade 1.4s ease-out both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page{animation:none}}

a{color:inherit;text-decoration:none}
a:hover{color:var(--gold-hi)}
:focus-visible{outline:1px solid var(--gold-hi);outline-offset:6px}

/* Header. The gold rule is drawn at a fixed offset (row height), so the header can
   grow downward when the practice panel opens without moving the rule. */
.top{--pad:clamp(1rem,2.9vh,1.7rem);--hpad:clamp(.5rem,1.6vw,1.6rem);--mark:clamp(44px,4.6vw,68px);--row:max(var(--mark),calc(clamp(22px,3.6vh,32px) + 1rem));
  position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:var(--pad) var(--hpad) calc(var(--pad) + 1px)}
.top::after{content:"";position:absolute;left:0;right:0;top:calc(var(--pad) * 2 + var(--row));
  height:1px;background:rgba(184,149,90,.85)}
.mark{display:flex;align-items:center;height:var(--row);line-height:0;flex:none}
.mark svg{width:var(--mark);height:auto}
.tag{display:flex;align-items:center;gap:clamp(.7rem,1.5vw,1.4rem);color:var(--gold);height:var(--row)}
.tag p{margin:0;text-transform:uppercase;letter-spacing:.24em;font-size:clamp(.72rem,1.02vw,1rem)}
.vrule{display:block;width:1px;height:clamp(22px,3.6vh,32px);background:var(--gold);opacity:.85}
.chev{width:clamp(11px,1vw,15px);height:auto;margin-right:.4rem}

/* Center */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(2rem,6vh,5rem) 0 clamp(2rem,8vh,6rem)}
.wordmark{margin:0;font-weight:500;text-transform:uppercase;color:var(--gold);
  font-size:clamp(3rem,10vw,10rem);line-height:1.02;letter-spacing:.07em;margin-right:-.07em}
.wordmark span{display:block}
.wordmark.small{font-size:clamp(2.2rem,6vw,5rem);letter-spacing:.06em}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wordmark{background:linear-gradient(176deg,var(--gold-hi) 0%,var(--gold) 45%,var(--gold-lo) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.divider{width:clamp(76px,9vw,140px);height:0;border:0;border-top:1px solid var(--gold);
  margin:clamp(1.2rem,3vh,2.2rem) auto clamp(1.4rem,4.2vh,2.8rem)}
.referral{margin:0;color:var(--ivory);font-size:clamp(1.4rem,2.5vw,2.4rem);letter-spacing:.16em;margin-right:-.16em}

/* Contact row */
.contact{font-style:normal;display:flex;align-items:center;justify-content:center;
  gap:clamp(1.5rem,6vw,6rem);padding-bottom:clamp(1.5rem,6.5vh,4.2rem)}
.contact-item{margin:0;display:flex;align-items:center;gap:.8em;color:var(--ivory);
  font-size:clamp(1.05rem,1.75vw,1.65rem);letter-spacing:.03em}
.ico{flex:none;width:1.15em;height:auto}
.contact .vrule.tall{height:clamp(44px,8.5vh,76px);opacity:.8}

/* Legal footer: deliberately quiet */
.legal{padding:0 0 clamp(.7rem,1.6vh,1.1rem);text-align:center}
.legal p{margin:0 auto;max-width:60rem;color:var(--legal);font-family:Georgia,"Times New Roman",serif;
  font-size:.62rem;line-height:1.5;letter-spacing:.02em}

@media (max-width:640px){
  .tag p{letter-spacing:.16em;font-size:.68rem}
  .tag{gap:.6rem}
  .wordmark{font-size:12.6vw;letter-spacing:.06em;margin-right:-.06em}
  .contact{flex-direction:column;gap:.9rem}
  .contact .vrule.tall{width:48px;height:1px}
  .legal p{font-size:.6rem}
}
@media (max-width:360px){.tag p{font-size:.6rem;letter-spacing:.12em}}

/* Practice disclosure (details/summary, no JS).
   When open, the panel is IN FLOW inside the header: it hangs from the gold rule
   and pushes the hero down, so it can never overlap the wordmark. */
.practice{flex:1 1 auto;min-width:0}
.practice summary{list-style:none;cursor:pointer;width:max-content;margin-left:auto;border-radius:1px}
.practice summary::-webkit-details-marker{display:none}
.practice summary::marker{content:""}
.tag-text{text-transform:uppercase;letter-spacing:.24em;font-size:clamp(.72rem,1.02vw,1rem)}
.practice summary:hover .tag-text{color:var(--gold-hi)}
.practice summary:focus-visible{outline:1px solid var(--gold-hi);outline-offset:8px}
.chev{transition:transform .35s ease;transform-origin:50% 50%}
.practice[open] .chev{transform:rotate(180deg)}
.panel{margin:calc(var(--pad) + 1px) calc(-1 * var(--hpad)) 0 auto;width:max-content;max-width:calc(100% + var(--hpad));
  padding:clamp(1.5rem,2.2vw,2.1rem) clamp(1.8rem,2.6vw,2.5rem);
  background:rgba(15,19,26,.9);border:1px solid rgba(184,149,90,.7);border-top:0;
  text-align:left;font-family:var(--serif)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .panel{background:rgba(15,19,26,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.practice[open] .panel{animation:panel-in .4s ease-out both}
@keyframes panel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Smooth push-down where supported (progressive enhancement; no JS) */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .practice{interpolate-size:allow-keywords}
  .practice::details-content{height:0;overflow:visible;
    transition:height .4s ease,content-visibility .4s allow-discrete}
  .practice[open]::details-content{height:auto}
}
.panel p{margin:0}
.panel-head{color:var(--gold);text-transform:uppercase;letter-spacing:.28em;font-size:.8rem}
.panel-line{color:var(--ivory);font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.25;letter-spacing:.02em;margin-top:.9rem!important}
.panel-rule{width:48px;height:0;border:0;border-top:1px solid var(--gold);margin:1.2rem 0}
.panel-sub{color:var(--ivory);font-size:clamp(1.12rem,1.45vw,1.3rem);line-height:1.3;letter-spacing:.02em}
.panel-head + .panel-sub{margin-top:.8rem!important}
.panel-sub + .panel-sub{margin-top:.45rem!important}
.panel-note{color:#a7a59d;font-size:1rem;letter-spacing:.03em}
@media (min-width:641px){.panel-line,.panel-sub{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){
  .chev{transition:none}
  .practice[open] .panel{animation:none}
  .practice::details-content{transition:none!important}
}
@media (max-width:640px){
  .tag-text{letter-spacing:.16em;font-size:.68rem}
  .panel{width:auto;max-width:none;margin-left:calc(-1 * (var(--mark) + 1rem + var(--hpad)));padding:1.5rem 1.5rem 1.6rem}
  .panel-sub{font-size:1.08rem;text-wrap:balance}
  .panel-sub + .panel-sub{margin-top:.7rem!important}
}
@media (max-width:360px){.tag-text{font-size:.6rem;letter-spacing:.12em}}