/* Lakewright AI: the firm layer over theme.css.
   theme.css is copied unchanged from the product site (www/theme.css) so the
   firm and the product share tokens, type and chrome. This file adds:
   - a dark theme (prefers-color-scheme, overridable by data-theme on <html>)
   - the firm's slightly more editorial page furniture
   - phone-width chrome (the product site hides links; here they wrap) */

:root{ --accent-hover:#24507f; --hi:#7FA8DC; --warn:#8A5510; color-scheme:light; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1622; --bg-raise:#101D2B; --bg-sink:#0F1D2C;
    --text:#E8EDF3; --text-dim:#A3B3C4;
    --line:rgba(232,237,243,.12); --line-strong:rgba(232,237,243,.24);
    --rule:rgba(232,237,243,.8);
    --accent:#8DB4E6; --accent-ink:#0B1622; --accent-dim:rgba(141,180,230,.10);
    --accent-hover:#B6CFEF; --flag:#E0A45C; --warn:#E0A45C; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1622; --bg-raise:#101D2B; --bg-sink:#0F1D2C;
  --text:#E8EDF3; --text-dim:#A3B3C4;
  --line:rgba(232,237,243,.12); --line-strong:rgba(232,237,243,.24);
  --rule:rgba(232,237,243,.8);
  --accent:#8DB4E6; --accent-ink:#0B1622; --accent-dim:rgba(141,180,230,.10);
  --accent-hover:#B6CFEF; --flag:#E0A45C; --warn:#E0A45C; color-scheme:dark;
}

.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
a{text-underline-offset:3px}
.prose a,.lede a{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--bg);color:var(--text);padding:8px 12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- chrome ---------- */
.brand small{color:var(--hi);font-size:.68rem;letter-spacing:.24em}
nav.links a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--hi)}
nav.links a.btn{padding:8px 16px}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.22);border-radius:2px;background:transparent;color:#fff;cursor:pointer}
.theme-toggle:hover{border-color:var(--hi)}
.theme-toggle svg{width:16px;height:16px}
@media(max-width:860px){
  header.bar{position:static}
  .bar-in{height:auto;flex-wrap:wrap;gap:12px 20px;padding:16px 0 14px}
  nav.links{width:100%;gap:18px;flex-wrap:wrap;row-gap:10px}
}
@media(max-width:640px){ .wrap{padding:0 16px} }

footer .foot-in{align-items:baseline}
footer .foot-in nav{display:flex;flex-wrap:wrap;gap:6px 16px}

/* ---------- page furniture ---------- */
.hero{padding:88px 0 64px;border-bottom:2px solid var(--rule)}
.hero h1{font-weight:400;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.08;letter-spacing:-.02em;
  max-width:17ch;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-top:26px;font-size:clamp(1.08rem,1.6vw,1.26rem);max-width:56ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.page-head{padding:72px 0 44px;border-bottom:2px solid var(--rule)}
.page-head h1{font-weight:400;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.1;max-width:20ch;margin-top:14px}
.page-head .lede{margin-top:22px}
@media(max-width:640px){ .hero{padding:52px 0 44px} .page-head{padding:48px 0 34px} }

section.plate h2{font-weight:400}
.plate .prose{max-width:var(--measure);margin-top:18px}
.prose p{font-family:var(--font-serif);font-size:1.06rem;line-height:1.62;color:var(--text)}
.prose p+p{margin-top:14px}
.prose ul{font-family:var(--font-serif);font-size:1.02rem;margin:14px 0 0;padding-left:20px}
.prose li{margin-top:6px}
.prose h3{margin-top:28px}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:36px}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;margin-top:36px}
.cols3>div,.cols2>div{border-top:1px solid var(--line-strong);padding:20px 0 26px}
.cols3 h3,.cols2 h3{font-size:1.12rem}
.cols3 p,.cols2 p{margin-top:9px;color:var(--text-dim);font-size:.96rem;line-height:1.58}
@media(max-width:900px){ .cols3{grid-template-columns:1fr 1fr} }
@media(max-width:660px){ .cols3,.cols2{grid-template-columns:1fr} }

/* the three properties: recorded / attributable / reversible */
.props{display:grid;grid-template-columns:repeat(3,1fr);margin-top:38px;border-top:2px solid var(--rule)}
.props>div{padding:22px 24px 26px 0}
.props>div+div{padding-left:24px;border-left:1px solid var(--line)}
.props .k{font-family:var(--font-serif);font-size:1.5rem;line-height:1.2}
.props p{margin-top:10px;color:var(--text-dim);font-size:.95rem}
.props p b{color:var(--text);font-weight:600}
@media(max-width:760px){ .props{grid-template-columns:1fr} .props>div,.props>div+div{padding:18px 0;border-left:0;border-top:1px solid var(--line)} .props>div:first-child{border-top:0} }

.pull{margin:40px 0 0;padding:6px 0 6px 22px;border-left:2px solid var(--accent);max-width:60ch}
.pull p{font-family:var(--font-serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.45}
.pull cite{display:block;margin-top:10px;font-style:normal;font-size:.8rem;color:var(--text-dim)}

/* numbered service rows */
.svc{margin-top:36px;border-top:2px solid var(--rule)}
.svc a.row,.svc .row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 22px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.svc .n{font-family:var(--font-sans);font-weight:600;font-size:.78rem;letter-spacing:.1em;color:var(--accent)}
.svc .t{font-family:var(--font-serif);font-size:1.22rem;line-height:1.25}
.svc a.row:hover .t{color:var(--accent)}
.svc .d{grid-column:2/3;color:var(--text-dim);font-size:.95rem;max-width:64ch}
.svc .m{grid-row:1/2;grid-column:3/4;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
@media(max-width:640px){ .svc a.row,.svc .row{grid-template-columns:1fr} .svc .d,.svc .m{grid-column:1} .svc .m{grid-row:auto} }

.status{display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--warn);border:1px solid currentColor;border-radius:2px;padding:2px 7px;vertical-align:middle}

/* product panels */
.products{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:38px}
.product{border-top:2px solid var(--rule);padding:22px 0 8px}
.product h3{font-size:1.5rem;font-weight:400;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.product p{margin-top:12px;color:var(--text-dim);font-size:.98rem;max-width:52ch}
.product .more{display:inline-block;margin-top:18px;font-weight:600;font-size:.9rem;color:var(--accent);text-decoration:none}
.product .more:hover{text-decoration:underline}
@media(max-width:760px){ .products{grid-template-columns:1fr;gap:28px} }

/* service detail blocks */
.service{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.service:first-of-type{border-top:0}
.service .grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;margin-top:18px}
.service aside{border-left:1px solid var(--line);padding-left:26px}
.service aside h3{font-family:var(--font-sans);font-weight:600;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.service aside ul{list-style:none;margin:12px 0 22px;padding:0}
.service aside li{position:relative;padding-left:16px;margin-top:8px;font-size:.93rem;color:var(--text-dim)}
.service aside li::before{content:"—";position:absolute;left:0;color:var(--accent)}
@media(max-width:820px){ .service .grid{grid-template-columns:1fr;gap:26px} .service aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px} }

/* terminal-ish transcript */
pre.term{font-family:var(--font-mono);font-size:.8rem;line-height:1.7;background:#0D1F33;color:#E7ECEF;
  border-radius:3px;padding:16px 18px;overflow-x:auto;margin:20px 0 0;max-width:100%}
pre.term .c{color:#8FA0B2}

.close{padding:80px 0 88px;border-top:2px solid var(--rule)}
.close h2{font-weight:400;max-width:22ch}
.close p{margin-top:16px;font-family:var(--font-serif);font-size:1.08rem;color:var(--text-dim);max-width:56ch}

.todo{font-family:var(--font-mono);font-size:.82em;background:var(--text);color:var(--bg);padding:1px 6px;border-radius:2px}