/* Smith & McOwen — Sandpoint, Idaho
   CONCEIT: THE PANE. Their name is etched on the glass of the front door: from
   the street it reads forward, from the waiting room it reads backwards. One
   object, two readings, depending which side you stand on. That is what being
   admitted in two states IS.
   So the page is built from LAYERS IN Z, never territories in X — a California
   plate and an Idaho plate that physically overlap, with the firm living in the
   overlap. An overlap is native to a 390px column, so the argument survives the
   phone instead of collapsing into a stack. */

:root{
  /* sampled from the lamplit interior, not from a theme */
  --night:#14100C;
  --night-2:#1B1610;
  --cedar:#3B2415;
  --oxblood:#8C2438;
  --crimson:#A8324A;
  --brass:#C08A45;
  --glow:#F0B268;
  --bone:#EEE5D6;
  --bone-70:rgba(238,229,214,.70);
  --bone-45:rgba(238,229,214,.45);
  --hair:rgba(192,138,69,.26);

  --nav-h:76px;
  --pad:clamp(20px,4.6vw,76px);
  --pad-hero:var(--pad);   /* tiers: nav < hero < body (desktop only) */
  --pad-body:var(--pad);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sep:22px;                 /* the thickness of the glass */
}

@media (min-width:901px){
  :root{
    --pad-hero:calc(var(--pad) + 54px);
    --pad-body:calc(var(--pad) + 100px);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night);
  color:var(--bone);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(16px,.55vw + 14.6px,18.5px);
  line-height:1.62;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}

/* one family, everywhere — no sans anywhere on this page */
.micro,.pane-tag,.face-year,.face-role,.ledger-cap,.cite,
.hero-cap,.foot-stamp,.foot-fine,.reveal-note,.nav-links,.btn,.corner-addr{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
}

/* ── nav ──────────────────────────────────────────────── */
.nav{
  position:absolute;top:0;left:0;right:0;
  height:var(--nav-h);
  z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--pad);
}
.wordmark{display:block;line-height:0}
.wordmark img{height:34px;width:auto;filter:invert(1) brightness(1.85)}
.nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,36px);font-size:11.5px}
.nav-links a{
  color:var(--bone-70);text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.nav-links a:hover{color:var(--bone);border-bottom-color:var(--brass)}
.nav-tel{color:var(--glow) !important}

/* ── PANE ONE : the door, from outside ────────────────── */
.hero{
  position:relative;
  min-height:clamp(680px,100svh,1020px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 44px) var(--pad-hero) clamp(28px,4vh,48px);
  overflow:hidden;
  isolation:isolate;
}
.hero-photo{position:absolute;inset:0;z-index:-3}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;object-position:72% 34%;
  filter:saturate(.58) contrast(1.0) brightness(.66) blur(1.1px);
  transform:scale(1.05);
}
/* what moves when nobody touches it: the lamp behind the glass, breathing */
.lamp{
  position:absolute;z-index:-2;
  right:6%;top:26%;
  width:min(58vw,760px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(240,178,104,.40) 0%, rgba(240,178,104,.16) 38%, rgba(240,178,104,0) 68%);
  animation:breathe 14s ease-in-out infinite;
  will-change:opacity,transform;
}
@keyframes breathe{
  0%,100%{opacity:.62;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.06)}
}
.hero-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(12,9,7,.52) 0, rgba(12,9,7,.10) 26%, rgba(12,9,7,.42) 60%, rgba(12,9,7,.94) 100%),
    linear-gradient(100deg, rgba(14,11,8,.86) 0, rgba(14,11,8,.34) 54%, rgba(30,22,16,.16) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:1500px}

/* the two faces of one sheet of glass */
.glasstype{position:relative;display:inline-block}
.lockup,.ghost{margin:0;font-weight:300}
.lockup{
  position:relative;z-index:2;
  font-size:clamp(3rem,5.6vw,6.2rem);   /* the ramp lives on the h1 itself */
  color:var(--bone);
}
.ghost{
  position:absolute;left:0;top:0;z-index:1;
  font-size:clamp(3rem,5.6vw,6.2rem);
  color:var(--brass);
  opacity:.17;
  filter:blur(.7px);
  transform:scaleX(-1) translateX(calc(var(--sep) * -1)) translateY(7px);
  transform-origin:center center;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}
.lead{
  display:block;
  font-size:.3em;
  font-style:italic;
  font-weight:300;
  color:var(--bone-70);
  margin-bottom:.34em;
  letter-spacing:.004em;
}
.ghost .lead{color:var(--brass)}
.big{
  display:block;
  font-size:1em;
  line-height:.98;
  letter-spacing:-.016em;
}

.deck{
  max-width:44ch;
  margin:clamp(30px,4.4vh,54px) 0 0;
  font-size:clamp(1.02rem,.42vw + .92rem,1.24rem);
  line-height:1.58;
  color:var(--bone-70);
}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(24px,3.4vh,40px)}
.btn{
  display:inline-flex;align-items:center;
  min-height:54px;padding:0 32px;
  background:var(--oxblood);color:var(--bone);
  font-size:11.5px;
  text-decoration:none;
  border:1px solid var(--oxblood);
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.btn:hover{background:var(--crimson);border-color:var(--crimson);transform:translateY(-1px)}
.btn:focus-visible,.txtlink:focus-visible,.nav-links a:focus-visible,.mirror:focus-visible{
  outline:2px solid var(--glow);outline-offset:4px
}
.txtlink{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:1.04rem;color:var(--bone-70);text-decoration:none;
  padding-bottom:3px;
  transition:color .2s ease;
}
.txtlink:hover{color:var(--glow)}
.arw{transition:transform .24s ease}
.txtlink:hover .arw{transform:translateX(4px)}

.hero-cap{
  position:relative;z-index:2;
  margin:clamp(44px,7vh,88px) 0 0;
  font-size:10.5px;
  color:var(--bone-45);
}

/* ── shared type ──────────────────────────────────────── */
.h2{
  font-weight:300;
  font-size:clamp(2rem,3.5vw,3.5rem);
  line-height:1.06;letter-spacing:-.014em;
  margin:0;text-wrap:balance;
}
.h3{
  font-weight:300;
  font-size:clamp(1.42rem,1.9vw,2.05rem);
  line-height:1.16;margin:0 0 .75em;text-wrap:balance;
}

/* ── THE OVERLAP ──────────────────────────────────────── */
.glass{padding:clamp(80px,11vh,150px) var(--pad-body) clamp(60px,8vh,100px)}
.glass-head{margin:0 0 clamp(44px,6vh,76px)}
.glass-sub{
  margin:1.15em 0 0;
  max-width:60ch;                 /* a measure in ch — never a collapsing calc */
  color:var(--bone-70);
  font-size:1.06rem;
  text-wrap:pretty;
}

/* No z-index and no isolation anywhere in here: a stacking context would trap
   the plates' blend modes and the crossing would never brighten. Paint order
   is DOM order — California, then Idaho over it, then the crossing, then the
   lens seated in it. */
.overlap{position:relative;max-width:1500px;margin-inline:auto}
.pane{
  position:relative;
  border:1px solid var(--hair);
  padding:clamp(28px,3.2vw,58px);
  text-wrap:pretty;
  background:none;
}
/* the tint lives on a pseudo-element so it can ADD to the plate beneath it
   without dragging the type into the blend */
.pane::before{
  content:"";
  position:absolute;inset:0;
  mix-blend-mode:plus-lighter;
  pointer-events:none;
}
.pane > *{position:relative}
.pane p{margin:0 0 1.15em;max-width:44ch}
.pane p:last-child{margin-bottom:0}

.pane-ca{
  width:min(58%,800px);
  margin-right:auto;
  padding-bottom:clamp(80px,9vw,150px);       /* the crossing band stays empty */
}
.pane-ca::before{background:rgba(78,44,22,.62)}

.pane-id{
  width:min(58%,800px);
  margin-left:auto;
  margin-top:clamp(-146px,-8.2vw,-84px);
  padding-top:clamp(96px,10.5vw,176px);
  padding-bottom:clamp(80px,9vw,150px);
}
.pane-id::before{background:rgba(44,44,46,.56)}

/* THE CROSSING — the rectangle where both plates are present at once. Sized in
   JS from the two plates' real geometry. It is the brightest thing here, and it
   is the only place the firm speaks. */
.crossing{
  position:absolute;
  pointer-events:none;
  mix-blend-mode:plus-lighter;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(240,178,104,.30) 0%, rgba(240,178,104,.12) 55%, rgba(240,178,104,.04) 100%);
  box-shadow:inset 0 0 0 1px rgba(240,178,104,.34);
  animation:crossglow 11s ease-in-out infinite;
}
@keyframes crossglow{
  0%,100%{opacity:.72}
  50%    {opacity:1}
}
.pane-tag{
  font-size:10.5px;
  color:var(--glow);
  margin:0 0 1.8em !important;
}
.lens{
  position:relative;
  width:min(64%,900px);
  margin:clamp(-120px,-6vw,-56px) auto 0;
  padding:clamp(32px,3.4vw,56px);
  background:var(--oxblood);
  border:1px solid var(--crimson);
  text-align:center;
}
.lens-kicker{
  margin:0 0 .6em;
  font-size:clamp(1.4rem,2.5vw,2.3rem);
  line-height:1.16;
  font-weight:300;
  color:var(--bone);
  text-wrap:balance;
}
.lens-body{
  margin:0 auto 2em;
  max-width:56ch;
  color:rgba(238,229,214,.86);
  text-wrap:pretty;
}
.lens .btn{background:var(--night);border-color:rgba(238,229,214,.32)}
.lens .btn:hover{background:#000;border-color:var(--glow)}

.ledger{
  width:100%;max-width:42ch;
  border-collapse:collapse;
  margin:1.7em 0 1.2em;
  font-size:.94rem;
  font-variant-numeric:tabular-nums lining-nums;
}
.ledger-cap{
  caption-side:top;text-align:left;
  font-size:10px;color:var(--bone-45);padding-bottom:14px;
}
.ledger th,.ledger td{
  padding:10px 0;border-bottom:1px solid var(--hair);
  font-weight:400;text-align:left;color:var(--bone-70);
}
.ledger td{text-align:right;color:var(--bone)}
.ledger-sum th,.ledger-sum td{
  border-bottom:none;border-top:1.5px solid var(--bone);
  padding-top:14px;color:var(--bone);
}
.ledger-sum td{font-size:1.06rem}
.ledger-echo th,.ledger-echo td{border-bottom:none;padding-top:3px;color:var(--glow)}
.fine{
  font-size:.94rem;color:var(--bone-70);
  border-left:2px solid var(--brass);padding-left:16px;
  text-transform:none;letter-spacing:0;
}
.cite{
  display:block;margin-top:.7em;
  font-size:9.5px;color:var(--bone-45);
}
.pull{
  font-size:clamp(1.3rem,1.75vw,1.85rem);
  line-height:1.24;font-weight:300;
  color:var(--glow);
  margin:1.35em 0 1.2em !important;
  max-width:24ch !important;
}

/* ── THE FIRM : two faces of the name ─────────────────── */
.firm{padding:clamp(80px,11vh,150px) var(--pad-body);background:var(--night-2)}
.firm-h{max-width:20ch;margin-bottom:clamp(46px,6vh,78px)}
.faces{position:relative;max-width:1500px;margin-inline:auto}
.face{
  border:1px solid var(--hair);
  padding:clamp(28px,3.2vw,54px);
  width:min(62%,860px);
  background:rgba(59,36,21,.32);
}
.face-b{
  margin-left:auto;
  margin-top:clamp(-80px,-4.5vw,-40px);
  background:rgba(20,16,12,.86);
  position:relative;z-index:2;
}
.face-year{font-size:10.5px;color:var(--brass);margin:0 0 16px}
.face-name{
  font-weight:300;
  font-size:clamp(1.6rem,2.5vw,2.6rem);
  line-height:1.08;margin:0 0 .28em;
}
.face-role{font-size:10.5px;color:var(--bone-45);margin:0 0 1.9em}
.facts{list-style:none;margin:0;padding:0;max-width:52ch}
.facts li{
  padding:15px 0;border-top:1px solid var(--hair);
  font-size:.99rem;line-height:1.55;color:var(--bone-70);
  text-wrap:pretty;
}
.facts li:last-child{border-bottom:1px solid var(--hair)}
.firm-foot{
  margin:clamp(54px,6vh,86px) 0 0;
  max-width:34ch;
  font-size:clamp(1.1rem,1.5vw,1.44rem);
  line-height:1.4;color:var(--bone);
  text-wrap:balance;
}

/* ── ETCHED : the practice, printed on the glass ──────── */
.practice{padding:clamp(80px,11vh,150px) var(--pad-body)}
.practice .h2{margin-bottom:clamp(36px,4.6vh,58px);max-width:14ch}
.etched{list-style:none;margin:0;padding:0;max-width:1500px}
.etched li{
  display:grid;
  grid-template-columns:minmax(0,21ch) minmax(0,1fr);
  column-gap:clamp(24px,3vw,52px);
  align-items:baseline;
  padding:clamp(20px,2.5vh,30px) 0;
  border-top:1px solid var(--hair);
  transition:background .28s ease;
}
.etched li:last-child{border-bottom:1px solid var(--hair)}
.etched li:hover{background:rgba(192,138,69,.05)}
.e-name{
  font-size:clamp(1.28rem,2vw,1.95rem);
  line-height:1.12;font-weight:300;
  color:var(--bone);
  transition:color .24s ease;
}
.etched li:hover .e-name{color:var(--glow)}
.e-note{color:var(--bone-70);font-size:1.04rem;max-width:52ch;text-wrap:pretty}

/* ── PANE TWO : the same words, from inside ───────────── */
.corner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,5vw,90px);
  align-items:center;
  padding:clamp(80px,11vh,150px) var(--pad-body);
  background:var(--cedar);
}
.corner-fig{margin:0;border:1px solid var(--hair)}
.corner-fig img{width:100%;height:auto;filter:saturate(.84) contrast(1.02) brightness(.94)}
.corner-copy{max-width:46ch}
.corner-h{color:var(--glow);margin-bottom:.62em}
.corner-copy p{margin:0 0 1.2em;color:rgba(238,229,214,.86);text-wrap:pretty}
.reveal{margin:0 0 1.9em !important}
.mirror{
  display:inline-block;width:max-content;
  font-size:clamp(1.5rem,2.6vw,2.35rem);
  font-weight:300;
  color:rgba(240,178,104,.72);
  letter-spacing:.03em;
  transform:scaleX(-1);
  transform-origin:center;
  transition:transform .65s cubic-bezier(.22,.61,.36,1),color .65s ease;
  cursor:default;
}
.mirror:hover,.mirror:focus-visible{transform:scaleX(1);color:var(--glow)}
.reveal-note{
  display:block;margin-top:11px;
  font-size:9.5px;color:rgba(238,229,214,.42);
}
.corner-addr{
  font-size:11px;line-height:2.1;
  color:rgba(238,229,214,.72) !important;
  margin:0 0 2em !important;
}
.corner .btn{background:var(--oxblood);border-color:var(--oxblood)}
.corner .btn:hover{background:var(--crimson);border-color:var(--crimson)}

/* ── footer : the edge of the glass ───────────────────── */
.foot{background:#0C0907;padding:clamp(64px,8vh,104px) var(--pad) clamp(28px,3vh,40px)}
.foot-in{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  column-gap:clamp(32px,5vw,90px);
  align-items:start;
  max-width:1500px;
}
.foot-mark{height:32px;width:auto;filter:invert(1) brightness(1.85);margin-bottom:22px}
.foot-addr{margin:0;font-size:.96rem;line-height:1.78;color:var(--bone-70)}
.foot-addr a{color:var(--glow);text-decoration:none;border-bottom:1px solid transparent}
.foot-addr a:hover{border-bottom-color:var(--glow)}
.foot-stamp{
  display:flex;flex-direction:column;gap:10px;
  margin:0 0 22px;font-size:10.5px;color:var(--brass);
}
.foot-serve{margin:0;font-size:.96rem;color:var(--bone-45);max-width:34ch;text-wrap:pretty}
.foot-fine{
  margin:clamp(48px,6vh,80px) 0 0;padding-top:22px;
  border-top:1px solid rgba(238,229,214,.1);
  font-size:10px;color:rgba(238,229,214,.32);
  text-wrap:balance;
}

/* ── the phone : the plates still overlap ─────────────── */
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav-links a:not(.nav-tel){display:none}
  .wordmark img{height:28px}

  .lockup,.ghost{font-size:clamp(2.9rem,12.6vw,4.6rem)}
  .ghost{--sep:9px}
  .deck{max-width:34ch}
  .btn{width:100%;justify-content:center}
  .txtlink{font-size:.99rem}

  .glass-sub{max-width:none}

  /* the overlap survives a single column — it is a Z relationship, not an X one */
  .lens,.face,.face-b{width:100%;margin-left:0;margin-right:0}
  /* the plates still lap — staggered in X and in Y, exactly as on desktop */
  .pane-ca{width:91%;margin-right:auto;margin-left:0;padding-bottom:106px}
  .pane-id{width:91%;margin-left:auto;margin-right:0;margin-top:-72px;padding-top:106px;padding-bottom:52px}
  .lens{margin-top:-36px;text-align:left}
  .lens-body{margin-left:0}
  .pane p,.lens-body,.facts,.e-note,.foot-serve{max-width:none}
  .ledger{max-width:none}
  .pull{max-width:none !important}

  .face-b{margin-top:-32px}
  .firm-foot{max-width:none}

  .etched li{grid-template-columns:1fr;row-gap:8px}

  .corner,.foot-in{grid-template-columns:1fr;row-gap:clamp(32px,5vh,52px)}
  .corner-copy{max-width:none}
  .corner .btn,.lens .btn{width:100%;justify-content:center}
}

@media (max-width:380px){
  :root{--pad:18px}
  .lockup,.ghost{font-size:clamp(2.75rem,12.2vw,3.5rem)}
}

@media (prefers-reduced-motion:reduce){
  .lamp{animation:none;opacity:.8}
  .crossing{animation:none;opacity:.9}
  .ghost{transform:scaleX(-1) translateX(-12px)}
  .mirror,.arw,.btn,.e-name{transition:none}
  *{scroll-behavior:auto}
}

/* the injected claim ribbon must obey this page's floor too */
.fl-ribbon__title{text-wrap:balance !important}