/* Layout: one calm column (max 68rem) with a sticky header; practice pages use a text column plus a side panel. */
:root {
  --paper: #fafaf7;
  --surface: #f0f1ec;
  --ink: #1c2629;
  --muted: #56636a;
  --line: #d9ddd6;
  --accent: #1e5566;
  --accent-ink: #ffffff;
  --brass: #9a7a35;
  --todo-bg: #fff1b8;
  --todo-fg: #5a4600;
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12191b; --surface: #1a2427; --ink: #e8ecea; --muted: #a3b0b4;
    --line: #2c393d; --accent: #7fbccc; --accent-ink: #0d1517; --brass: #d0b06a;
    --todo-bg: #4a3d0a; --todo-fg: #ffe9a3; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12191b; --surface: #1a2427; --ink: #e8ecea; --muted: #a3b0b4;
  --line: #2c393d; --accent: #7fbccc; --accent-ink: #0d1517; --brass: #d0b06a;
  --todo-bg: #4a3d0a; --todo-fg: #ffe9a3; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); }
img { max-width: 100%; }
a { color: var(--accent); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: 1.25rem; }
.todo { background: var(--todo-bg); color: var(--todo-fg); padding: 0 .25em; border-radius: 3px; }

.lang-bar { background: var(--accent); color: var(--accent-ink); font-size: .875rem; }
.lang-bar .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .4rem; }
.lang-bar a { color: inherit; font-weight: 600; text-decoration: none; }
.lang-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; }
.lang-bar a.lang-switch { border: 1px solid currentColor; border-radius: 999px; padding: .05rem .7rem; }
.lang-bar a.lang-switch:hover { background: var(--accent-ink); color: var(--accent); }

header.site { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .85rem; }
/* Logo and the two name lines share one height: name lines total 2.8 units x 1.15 line height = 3.22 units. */
.brand { --logo: clamp(56px, calc(10vw - 4px), 95px); --unit: calc(var(--logo) / 3.22); text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: .9rem; line-height: 1.15; }
.brand .logo { width: var(--logo); height: var(--logo); border-radius: 4px; flex: none; }
.brand-text { display: grid; }
.brand b { font-family: var(--display); font-size: calc(var(--unit) * 1.8); font-weight: 600; }
.brand small { color: var(--muted); font-size: var(--unit); letter-spacing: .08em; text-transform: uppercase; }
nav.main { display: flex; gap: .25rem 1.1rem; flex-wrap: wrap; align-items: center; font-size: .95rem; }
nav.main a { color: var(--ink); text-decoration: none; padding-block: .2rem; border-bottom: 2px solid transparent; }
nav.main a[aria-current] { border-color: var(--brass); }
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; padding: .7rem 1.2rem; border-radius: 4px; }
.btn.ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
nav.main a.btn { padding: .45rem .9rem; color: #ffffff; background: #1e5566; border-bottom: 0; }

section { padding-block: 4rem; }
section.tint { background: var(--surface); }
.eyebrow { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 40rem; }
.stack { display: grid; gap: 1rem; }
.measure { max-width: 40rem; }

.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; }
/* The photo takes its height from the text beside it, so it never sets the row height. */
.hero-photo { position: relative; }
.hero-photo .portrait.photo { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; aspect-ratio: 4 / 5; }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; background: var(--surface); border: 1px dashed var(--line); display: grid; place-items: center; text-align: center; color: var(--muted); font-size: .9rem; padding: 1rem; }
.portrait.photo { display: block; width: 100%; height: auto; object-fit: cover; padding: 0; border: 0; border-radius: 4px; }
.portrait b { display: block; font-family: var(--display); font-size: 3.5rem; color: var(--accent); font-weight: 500; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 1.5rem; display: grid; gap: .75rem; align-content: start; }
.card ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .95rem; }
.card a.more { font-weight: 600; text-decoration: none; }

.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.why > div { display: grid; gap: .5rem; border-top: 2px solid var(--brass); padding-top: 1rem; }
.press { display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-family: var(--display); font-size: 1.3rem; color: var(--muted); }

.press a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
blockquote { margin: 0; display: grid; gap: .75rem; }
blockquote p { font-family: var(--display); font-size: 1.2rem; font-style: italic; }
blockquote cite { font-style: normal; color: var(--muted); font-size: .9rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
.prose { display: grid; gap: 1.25rem; max-width: 42rem; }
.prose h2 { margin-top: 1rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
dl.services { margin: 0; display: grid; gap: 1.25rem; }
dl.services dt { font-weight: 700; }
dl.services dd { margin: .2rem 0 0; color: var(--muted); }
aside.panel { background: var(--surface); border-radius: 6px; padding: 1.5rem; display: grid; gap: .9rem; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 6rem); }
aside.panel .note { font-size: .85rem; color: var(--muted); }

#estate > section, #employment > section { background: var(--paper); }
#immigration > section { background: var(--surface); }
.jump { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-weight: 600; }
.qa-list { display: grid; gap: 1.75rem; max-width: 46rem; }
.qa { display: grid; gap: .45rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.qa h3 { font-size: 1.2rem; }
a.more { font-weight: 600; text-decoration: none; }
.book { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; max-width: 46rem; background: var(--surface); border-radius: 6px; padding: 1.75rem; }
.book .field { display: grid; gap: .35rem; min-width: 0; }
.book .wide { grid-column: 1 / -1; }
.book label { font-weight: 600; font-size: .95rem; }
.book input, .book select, .book textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .6rem .7rem; width: 100%; }
.book input:focus-visible, .book select:focus-visible, .book textarea:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.book .hint { font-size: .85rem; color: var(--muted); }
.book .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.book .check input { width: auto; margin-top: .3rem; }
.book .hp { position: absolute; left: -9999px; }
.book button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.book button:disabled { opacity: .6; cursor: wait; }
.book .status.good { color: var(--accent); font-weight: 600; }
.book .status.bad { color: var(--ink); background: var(--todo-bg); padding: .2rem .4rem; border-radius: 3px; }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.big { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }

footer.site { border-top: 1px solid var(--line); padding-block: 2.5rem; font-size: .85rem; color: var(--muted); }
footer.site .wrap { display: grid; gap: 1rem; }
footer.site .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
footer.site b { color: var(--ink); }

@media (max-width: 820px) {
  .book { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .hero .wrap, .split, .cards, .why, .quotes, .contact-grid, footer.site .cols { grid-template-columns: minmax(0, 1fr); }
  .hero-photo .portrait.photo { position: static; transform: none; height: auto; width: 100%; max-width: 18rem; }
  aside.panel { position: static; }
  section { padding-block: 2.75rem; }
}