/* ==========================================================================
Craig Legal — the engagement letter
One document on bone paper. Three type voices from one face: italic 600
for display (the monogram's voice), upright 400 for body, tracked caps
for labels (the letterhead's contact line). Hairline rules are the only
graphic device. No accent color; one functional tone for errors only.
========================================================================== */

/* One warm stone axis, hue 68-100, stated in oklch so lightness is
   the only real dial */
:root {
  color-scheme: light;
  --paper: oklch(0.954 0.0094 100);
  --ink: oklch(0.374 0.0087 67.6);
  --ink-soft: oklch(0.466 0.0189 82.7);
  --rule: oklch(0.822 0.0237 96);
  --field: oklch(0.92 0.0162 99);
  --chip: oklch(0.885 0.0185 97);
  --error: oklch(0.53 0.2 29);
  /* The one working accent: fountain-pen blue, so the clickable
     announces itself against the stone */
  --link: oklch(0.47 0.1 252);
  --press: oklch(0.291 0.0084 75.3);
  --on-ink: oklch(0.99 0.006 100);
  /* the badge's eased-square corner, at UI scale */
  --corner: 0.1rem;
}

/* The same sheet after dark: warm stone deepens to night, the ink
   pales to bone. One axis, two hours of the day. The system
   preference rules unless the visitor has chosen; the switch in the
   corner sets data-theme and the choice wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: oklch(0.244 0.008 84.6);
    --ink: oklch(0.87 0.0168 91.6);
    --ink-soft: oklch(0.698 0.0229 86);
    --rule: oklch(0.381 0.0128 81.8);
    --field: oklch(0.282 0.01 80.6);
    --chip: oklch(0.325 0.0115 82);
    --error: oklch(0.72 0.18 30);
    --link: oklch(0.67 0.055 250);
    --press: oklch(0.922 0.0166 91.6);
    --on-ink: oklch(0.22 0.008 85);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: oklch(0.244 0.008 84.6);
  --ink: oklch(0.87 0.0168 91.6);
  --ink-soft: oklch(0.698 0.0229 86);
  --rule: oklch(0.381 0.0128 81.8);
  --field: oklch(0.282 0.01 80.6);
  --chip: oklch(0.325 0.0115 82);
  --error: oklch(0.72 0.18 30);
  --link: oklch(0.67 0.055 250);
  --press: oklch(0.922 0.0166 91.6);
  --on-ink: oklch(0.22 0.008 85);
}

* {
  box-sizing: border-box;
}

/* The hidden attribute must always win: layout rules (the form's flex
   field divs) otherwise override the browser's built-in hiding */
[hidden] {
  display: none !important;
}

html {
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Serif', serif;
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--ink-soft);
  outline-offset: 3px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
the topbar: the square badge, three doors
-------------------------------------------------------------------------- */

:root {
  --topbar-h: 4.4rem;
}

/* One centered row; on interior pages the badge joins it just ahead
   of the links, as the way home. One variable drives all the gaps:
   the badge-to-nav distance adds the links' chip padding, so the
   badge sits visually equidistant with the links */
:root {
  --nav-gap: 4rem;
}

.topbar {
  align-items: center;
  display: flex;
  gap: calc(var(--nav-gap) + 0.8rem);
  height: var(--topbar-h);
  justify-content: center;
}

.topbar-badge {
  color: var(--ink-soft);
  display: block;
  line-height: 0;
}

.topbar-badge:hover {
  color: var(--ink);
}

/* On home the badge wears the chip fill inside its own frame, the
   same "you are here" the links get */
.topbar-badge[aria-current='page'] .badge-square rect {
  fill: var(--chip);
}

.topbar-badge .badge-square {
  height: 2.1rem;
  width: auto;
}

/* The client-form pages carry the full plate lockup, not the bare
   mark; their topbar grows to hold it with air on both sides */
.topbar:has(.lockup-plate) {
  height: auto;
  padding: 2rem 0 1.5rem;
}

.topbar-badge .lockup-plate {
  height: 3.375rem;
  width: auto;
}

.topbar-nav {
  display: flex;
  gap: var(--nav-gap);
}

.topbar-nav a {
  border-radius: var(--corner);
  color: var(--ink-soft);
  font-size: 1.05rem;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
}

.topbar-nav a:hover {
  color: var(--ink);
}

.topbar-nav a[aria-current='page'] {
  background: var(--chip);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
the cover: paper, the wordmark on the top-third line, the thesis
-------------------------------------------------------------------------- */

.landing {
  height: calc(100svh - var(--topbar-h));
  position: relative;
  text-align: center;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* No performance: the nav stands from the first paint, and only the
   firm name and the taglines breathe in -- the cover on a longer
   breath than the working pages, the taglines more slowly still */
.landing {
  animation: fade-in 1.8s ease both 0.1s;
}

.landing .tagline {
  animation: fade-in 2.2s ease both 1s;
}

@media (prefers-reduced-motion: reduce) {
  .landing,
  .landing .tagline {
    animation: none;
  }
}

/* Greeting and shorthand center on the same line: the two
   presentations trade places without the page seeming to move.
   The old per-line lifts are gone — one anchor, one station. */
.tagline .tag-a {
  display: block;
}

.tagline .tag-b {
  display: block;
  margin-top: 1.5rem;
}

.tagline-brief[hidden] {
  display: none;
}

.tagline-brief .brief-dot {
  color: var(--rule);
  padding: 0 0.75rem;
}

/* The wordmark rides high on the cover; the tagline holds the line
   between the middle and bottom thirds. The landing already sits below
   the topbar, so percentages are of the remaining sheet. */
.wordmark-hero {
  color: var(--ink-soft);
  left: 0;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  /* The anchor drops by half the letterhead's height, so the
     wordmark keeps its station; the base sits a notch above the old
     23% now that the letterhead rides below */
  top: calc(20% + 2.5rem);
  transform: translateY(-50%);
}

.tagline {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  /* The motto's old station, now shared by both presentations */
  top: calc(75.5% - min(3rem, 5svh));
  transform: translateY(-50%);
}

.wordmark-hero .lh-stack {
  display: block;
  height: auto;
  margin: 0 auto;
  width: min(24rem, 80vw);
}

/* The letterhead line: the trade and the town under a short rule,
   in the contact-line voice — the stationery's own furniture, and
   the cover's first plain words */
/* Scoped under the hero: the bare .rule sits later in the sheet and
   its margin: 0 would otherwise defeat the centering */
.wordmark-hero .letterhead-rule {
  margin: 3rem auto 3rem;
  width: 3.5rem;
}

.letterhead {
  color: var(--ink-soft);
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  margin: 1rem 0 0;
  text-transform: uppercase;
}

/* The letter's separator: a middot standing between phrases wherever
   the page lists things in one line — firmer than a rule, quieter
   than the words it divides */
.sep-dot {
  color: color-mix(in oklch, var(--rule) 40%, var(--ink-soft));
  padding: 0 0.75rem;
}

.tagline {
  color: var(--ink-soft);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 40rem;
  padding: 0 1.5rem;
}

/* Short viewports: let the cover flow instead of forcing both onto
   one screen — the ceiling sits a little higher now that the
   letterhead rides under the wordmark */
@media (max-height: 700px) {
  .landing {
    height: auto;
    padding: 3.5rem 0 4.5rem;
  }

  .wordmark-hero,
  .tagline {
    position: static;
    transform: none;
  }

  .tagline {
    margin-top: 2.75rem;
  }

  .replay {
    bottom: 0.75rem;
    position: fixed;
  }
}

/* Offered quietly from the corner: the greeting, again */
.replay {
  background: none;
  border: none;
  bottom: 1.5rem;
  /* a step darker than the rule, still well short of text */
  color: color-mix(in oklch, var(--rule) 45%, var(--ink-soft));
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.5rem;
  position: absolute;
  right: 1.5rem;
}


/* Day and night: two small moons in the upper corner, where theme
   switches live. The chosen moon wears a halo in its own tone. */
.theme-switch {
  align-items: center;
  display: flex;
  gap: 0.25rem;
  position: fixed;
  right: 2.5rem;
  top: 1.5rem;
  z-index: 10;
}

.theme-switch button {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 0;
  padding: 0.25rem;
}

/* The moons keep their own absolute colors in every theme: day is
   always paper, night is always ink */
.theme-switch .moon {
  border: 1px solid #5f594e;
  border-radius: 50%;
  display: block;
  height: 0.7rem;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
  width: 0.7rem;
}

.theme-switch .moon-light {
  background: #f1f0e9;
}

.theme-switch .moon-dark {
  background: #44403c;
}

/* Identity lives in the fill (hollow day, solid night); selection
   speaks through presence: the chosen moon full and slightly grown */
.theme-switch button[aria-pressed='true'] .moon {
  opacity: 1;
  transform: scale(1.25);
}

.section[id] {
  scroll-margin-top: 3rem;
}

/* --------------------------------------------------------------------------
the sheet
-------------------------------------------------------------------------- */

.letter {
  margin: 0 auto;
  max-width: 40rem;
  padding: 2rem 1.5rem 5rem;
  position: relative;
}

/* The ledger pages run wider than the letter proper */
.letter-wide {
  max-width: 48rem;
}

/* The team page runs a touch wider than the letter: the ledger sets
   a plate beside each bio and the text keeps a readable measure */
.letter-team {
  max-width: 52rem;
}

/* Working pages breathe in as one quick unit: consistency with the
   tiled ledgers, but a form never makes its visitor wait */
.letter-fade {
  animation: fade-in 0.9s ease both 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .letter-fade {
    animation: none;
  }
}

.rule {
  background: var(--rule);
  border: none;
  height: 1px;
  margin: 0;
}

.rule-short {
  margin-bottom: 1rem;
  width: 3.5rem;
}

/* --------------------------------------------------------------------------
masthead: the letterhead cluster, continued
-------------------------------------------------------------------------- */

.masthead {
  margin-bottom: 1.5rem;
}

.wordmark {
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
the opening
-------------------------------------------------------------------------- */

.opening {
  margin-top: 5rem;
}

h1 {
  font-size: 1.95rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  margin: 1.5rem 0 0;
}

.lede {
  color: var(--ink-soft);
  margin: 2.25rem 0 0;
}

.values {
  color: var(--ink-soft);
  font-size: 1rem;
  letter-spacing: 0.16em;
  margin: 2.5rem 0 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
sections
-------------------------------------------------------------------------- */

.section {
  margin-top: 6.5rem;
}

.section-first {
  margin-top: 0;
}

/* With the page titles gone, the first block's old below-title margin
   is vestigial; every interior page starts on the same line */
.section-first > :first-child {
  margin-top: 0;
}

.eyebrow {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  margin: 0;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
the firm: a ledger of three names
-------------------------------------------------------------------------- */

.team {
  margin: 2rem 0 0;
}

.team > div {
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: 13rem 1fr;
  padding: 1.5rem 0;
}

/* Entries that sit for a portrait fold the name above its bio, like
   a heading over its paragraph, and hand the freed column to a
   larger plate on the right, its top edge flush with the bio's
   first line; the values ledger keeps its two */
.team > div:has(.portrait) {
  grid-template-columns: 1fr 13.75rem;
}

.team > div:has(.portrait) dt {
  grid-column: 1;
  grid-row: 1;
}

.team > div:has(.portrait) dd {
  grid-column: 1;
  grid-row: 2;
}

.team > div:first-child {
  border-top: none;
  padding-top: 0.5rem;
}

.team dt {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

/* The team roster: entries tile in one at a time; names in tracked
   caps at full ink -- the darkest voice on the site -- with titles
   in title case beneath */
.roster > div {
  animation: fade-in 0.9s ease both;
}

.roster > div:nth-child(1) {
  animation-delay: 0.1s;
}

.roster > div:nth-child(2) {
  animation-delay: 0.55s;
}

.roster > div:nth-child(3) {
  animation-delay: 1s;
}

.roster > div:nth-child(4) {
  animation-delay: 1.45s;
}

.roster > div:nth-child(5) {
  animation-delay: 1.9s;
}


@media (prefers-reduced-motion: reduce) {
  .roster > div {
    animation: none;
  }
}

.roster dt {
  color: var(--ink-soft);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roster dt .role {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  margin-top: 0.5rem;
  text-transform: none;
}

.team .role {
  color: var(--ink-soft);
  display: block;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  margin-top: 0.25rem;
  text-transform: uppercase;
}

.team dd {
  color: var(--ink-soft);
  hyphens: auto;
  margin: 0;
  text-align: justify;
}

/* Each entry carries a small photographic plate on the right edge:
   the sitters mostly in their own color — a quarter-turn of gray and a
   sepia cast lean the plates toward the stone page */
/* The gradient lives on the figure, outside the image's grayscale
   filter — a filter desaturates its own element's background too,
   which turned the warm ground invisibly gray. The gradient itself
   is the old site's slate backdrop translated to the stone axis:
   the 300-level tone falling to paper. Frameless, softly rounded. */
.team .portrait {
  aspect-ratio: 3 / 4;
  background: linear-gradient(var(--rule), var(--paper));
  border-radius: 0.3rem;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  overflow: hidden;
}

.team .portrait img {
  display: block;
  filter: grayscale(0.25) sepia(0.25);
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

/* On the dark page the plates dim like prints under lamplight; the
   sky keeps the day's shape — a distinct tone above falling to the
   page below — rising only as far as the chip tone */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .team .portrait {
    background: linear-gradient(var(--chip), var(--paper));
  }

  :root:not([data-theme='light']) .team .portrait img {
    filter: grayscale(0.25) sepia(0.25) brightness(0.82);
  }
}

:root[data-theme='dark'] .team .portrait {
  background: linear-gradient(var(--chip), var(--paper));
}

:root[data-theme='dark'] .team .portrait img {
  filter: grayscale(0.25) sepia(0.25) brightness(0.82);
}

/* The ledger descriptions come from markdown includes, which wrap
   in paragraphs; the ledger supplies the spacing */
.team dd p {
  margin: 0 0 0.6em;
}

.team dd p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
the reply card
-------------------------------------------------------------------------- */

/* The form's letterhead line: upright and unweighted, plain ink —
   stated explicitly, since the global h1 speaks in italic 600 */
.page-title {
  /* The soft ink the plate wears, so title and lockup speak in one voice */
  color: var(--ink-soft);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 400;
  margin: 2.25rem 0 0;
}

/* Form preambles read as set paragraphs, like the letter they are */
.guide-preamble {
  text-align: justify;
}

.guide {
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
}

/* Where the form follows the preamble directly, a fuller breath between */
.guide-spaced {
  margin-bottom: 2rem;
}

form {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

.span2 {
  grid-column: span 2;
}

/* Labels speak in their natural case: short names in Title Case,
   full questions as sentences — the text itself carries the casing */
label {
  color: var(--ink-soft);
  display: block;
  font-size: 1rem;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='search'],
textarea {
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  width: 100%;
}

input:focus,
textarea:focus {
  box-shadow: 0 0 0 2px var(--ink-soft);
  outline: none;
}

/* Choice fields open as small cards instead of the OS's white list */
.dropdown {
  position: relative;
}

.select-btn {
  align-items: center;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  color: var(--ink);
  display: flex;
  font-size: 1rem;
  justify-content: space-between;
  letter-spacing: 0.02em;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  text-align: left;
  width: 100%;
}

.select-btn:focus {
  box-shadow: 0 0 0 2px var(--ink-soft);
  outline: none;
}

.select-chevron {
  color: var(--ink-soft);
  flex-shrink: 0;
  height: 1em;
  margin-left: 0.5rem;
  width: 1em;
}

.dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  box-shadow: 0 10px 24px oklch(0 0 0 / 0.16);
  display: none;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  z-index: 30;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-menu button {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--ink);
  display: block;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  text-align: left;
  width: 100%;
}

.dropdown-menu button:hover,
.dropdown-menu button:focus {
  background: var(--field);
  outline: none;
}

/* The supplement's sections ride the same grid as the form around
   them: the container dissolves so its children become grid items */
#supplement-sections {
  display: contents;
}

/* Section headings ride the grid full-width, ruled like the ledger */
.form-heading {
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  text-transform: uppercase;
}

/* Bottom-align each field in its row so a label that wraps to two
   lines doesn't push its input out of line with its row-mate's */
form > div:not(.check-row):not(.submit-row):not(.wizard-nav):not(.email-well) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* A passing check on the test forms: a quiet chip that rises from
   the foot of the page and takes its leave on its own */
.toast {
  animation:
    toast-in 0.3s ease,
    toast-out 0.6s ease 4.5s forwards;
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  bottom: 2rem;
  color: var(--ink);
  left: 50%;
  padding: 0.75rem 1.75rem;
  position: fixed;
  transform: translateX(-50%);
  z-index: 40;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 0.8rem);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* The link panels on the office intake page: the global form rule is
   a two-column grid, so these small rows opt out */
form.link-send-row {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0 0.5rem;
}

form.link-send-row input {
  flex: 1;
  max-width: 24rem;
}

form.link-mint-row {
  display: block;
  margin: 0.5rem 0 1.25rem;
}

/* Office tables: full-size type, hairline rows, aligned columns */
.office-table {
  border-bottom: 1px solid var(--rule);
  border-collapse: collapse;
  border-top: 1px solid var(--rule);
  margin-top: 1.75rem;
  width: 100%;
}

.office-table th {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
  padding: 0.75rem 1.25rem 0.5rem 0;
  text-align: left;
}

.office-table td {
  border-top: 1px solid var(--rule);
  padding: 0.75rem 1.25rem 0.75rem 0;
  vertical-align: top;
}

.office-table td:last-child {
  white-space: nowrap;
}

.office-table a {
  text-decoration: none;
}

.office-table a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink);
}

/* The intake desk: indentation carries the hierarchy — headings stand
   unruled and what follows each one sits a step in from the margin.
   Hairlines belong to the tables alone. */
.intake-page .form-heading {
  border-top: 0;
  margin-top: 4rem;
  padding-top: 0;
}

/* The first heading stands closer to the actions above it */
.intake-page h2.form-heading:first-of-type {
  margin-top: 3.5rem;
}

/* The way back: a quiet crumb line above the client's name */
.crumbs {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0;
}

.crumbs .crumb-sep {
  color: var(--rule);
  padding: 0 0.5rem;
}

/* The title stands close under its crumb line */
.intake-page .page-title {
  margin-top: 0.5rem;
}

/* The link-minting actions read as links proper: fountain blue, like
   every clickable word on the site */
.intake-page .link-mint-row .linklike {
  color: var(--link);
}

.intake-page .link-mint-row .linklike:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The one destructive act stands apart: far off to the right, in a
   sealing-wax red drawn from the palette's own error tone, sharpening
   on approach */
.intake-page .office-actions .icon-link {
  color: color-mix(in oklch, var(--error) 70%, var(--ink-soft));
  margin-left: auto;
}

.intake-page .office-actions .icon-link:hover {
  color: var(--error);
}

.heading-inset {
  padding-left: 1.25rem;
}

/* A row's action may be a one-button form (the attach rows): the form
   is an ordinary inline box, not the global two-column form grid, and
   its button dresses exactly like the row links around it */
.office-table form {
  display: inline;
  margin: 0;
}

.office-table button.linklike {
  color: var(--link);
  font-size: inherit;
}

.office-table button.linklike:hover {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--ink);
  text-underline-offset: 3px;
}

.office-subrow td:first-child {
  padding-left: 1.5rem;
}

/* The review index: one ruled line per form, like the ledger; ledger
   links read as entries, not prose, so no underline until hovered */
.review-list {
  list-style: none;
  padding: 0;
}

.review-list li {
  border-top: 1px solid var(--rule);
  padding: 0.75rem 0;
}

.review-list a {
  text-decoration: none;
}

.review-list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink);
}

/* The invite link is itself the door: one ellipsized line, with Copy
   and the quiet replace-refresh beside it */
.invite-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* One well holds the whole affair: the link (the door itself), Copy
   flush beside it, and the refresh held apart at the far edge. Both
   panels' wells share one fixed measure, long enough for the full
   link to read. */
.invite-row .invite-well {
  align-items: center;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  display: flex;
  gap: 0.75rem;
  max-width: 50rem;
  min-width: 0;
  padding: 0.5rem 1rem;
  width: 100%;
}

.invite-well .invite-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-well .invite-url:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Refresh and destroy stand at the well's left, each confirmed
   before it acts; their little forms opt out of the global form grid */
.invite-well form {
  display: flex;
  margin: 0;
}

/* Destroy wears the sealing-wax red, sharpening on approach */
.invite-well button.destroy-link {
  color: color-mix(in oklch, var(--error) 70%, var(--ink-soft));
}

.invite-well button.destroy-link:hover {
  color: var(--error);
}

/* The email well matches the link well above it: the address rides
   inside, the send icon at its right edge. The input sheds its own
   dress — the well wears it — and the focus ring moves to the well. */
.link-send-row .email-well {
  align-items: center;
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  display: flex;
  gap: 0.75rem;
  max-width: 50rem;
  padding: 0.5rem 1rem;
  width: 100%;
}

.link-send-row .email-well input {
  background: none;
  border: 0;
  flex: 1;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.link-send-row .email-well input:focus {
  box-shadow: none;
}

.link-send-row .email-well:focus-within {
  box-shadow: 0 0 0 2px var(--ink-soft);
}

/* Copy, refresh, and send: quiet icon buttons beside their wells */
.invite-row button.linklike,
.link-send-row button.linklike {
  align-items: center;
  color: var(--ink-soft);
  display: inline-flex;
  padding: 0 0.25rem;
}

.invite-row button.linklike:hover,
.link-send-row button.linklike:hover {
  color: var(--ink);
}

.invite-row button.linklike .icon,
.link-send-row button.linklike .icon {
  height: 1.15rem;
  width: 1.15rem;
}

/* Action links wearing lucide icons instead of words */
.icon-link {
  align-items: center;
  display: inline-flex;
}

.icon-link .icon {
  height: 1.15rem;
  width: 1.15rem;
}

/* --------------------------------------------------------------------------
the office: the firm's private ledger of submissions
-------------------------------------------------------------------------- */

/* The office pages run wider than the ledgers: reports and tables
   want the room */
.letter-office {
  /* The office canvas: full width to one standard cap, sized for
     extra-large monitors */
  max-width: 90rem;
}

/* Finding, not managing: the name filter rides the actions row and
   the pages walk the roster; triage itself lives in Kosmos */
form.roster-filter {
  display: block;
  margin: 0 0 0 auto;
}

form.roster-filter input {
  max-width: 18rem;
  padding: 0.25rem 0.75rem;
}

.roster-pages {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.office-table td:first-child,
.office-table th:first-child {
  width: 26%;
}

/* A row's actions spread the cell: the named link left, the icon
   flush against the table's right edge */
.office-table td.row-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-right: 0;
}

.office-table td:nth-child(3) {
  white-space: nowrap;
}

/* The office wears a vertical sidebar — its own voice, distinct from
   the public site's horizontal doors. The body splits into sidebar
   and page; the theme switch stays pinned in its fixed corner. */
body:has(.office-sidebar) {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
}

body:has(.office-sidebar) > main {
  grid-column: 2;
}

.office-sidebar {
  align-self: start;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100vh;
  padding: 1.5rem 1.25rem;
  position: sticky;
  top: 0;
}

.sidebar-badge {
  color: var(--ink-soft);
  line-height: 0;
  margin: 0 0 1.75rem 0.5rem;
}

.sidebar-badge:hover {
  color: var(--ink);
}

.sidebar-badge .lockup-plate {
  height: auto;
  width: 10.5rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-nav a {
  border-radius: var(--corner);
  color: var(--ink-soft);
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.sidebar-nav a:hover {
  color: var(--ink);
}

.sidebar-nav a[aria-current='page'] {
  background: var(--chip);
  color: var(--ink);
}

.sidebar-account {
  margin-top: auto;
  padding-left: 0.75rem;
}

.sidebar-account form {
  margin: 0;
}

/* On office pages the letter justifies left against the sidebar;
   when a section rail is present it keeps the same left-margin
   gutter the public form uses — one navigation idiom for form and
   report alike */
/* Fixed margins, never auto: an auto margin on a grid item defeats
   stretch and shrinks the letter to its content's width */
body:has(.office-sidebar) > main.letter {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

body:has(.office-sidebar):has(.section-rail) > main.letter {
  margin-left: 19rem;
}

body:has(.office-sidebar) .section-rail {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-right: 2.5rem;
  position: absolute;
  right: 100%;
  top: 5rem;
  width: 15rem;
}

/* Narrow screens: the sidebar lies down into a top strip and the
   rail yields to Back/Next */
@media (max-width: 1023px) {
  body:has(.office-sidebar) {
    display: block;
  }

  .office-sidebar {
    align-items: center;
    border-bottom: 1px solid var(--rule);
    border-right: 0;
    flex-direction: row;
    gap: 1.25rem;
    height: auto;
    padding: 0.75rem 1.25rem;
    position: static;
  }

  .sidebar-badge {
    margin: 0;
  }

  .sidebar-nav {
    flex-direction: row;
  }

  .sidebar-account {
    margin: 0 3.5rem 0 auto;
    padding-left: 0;
  }

  body:has(.office-sidebar) .section-rail {
    display: none;
  }

  body:has(.office-sidebar) > main.letter {
    margin-left: auto;
  }
}

/* The global form rule is a two-column grid; a form wrapping a menu
   item must be an ordinary block or its button only fills one column */
.dropdown-menu form {
  display: block;
  margin: 0;
}

button.linklike {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 0;
}

button.linklike:hover {
  color: var(--ink);
}

.account-btn {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

/* Checkbox rows in the office's user forms */
.check-row input[type='checkbox'] {
  accent-color: var(--ink);
}

.check-row label {
  display: inline;
  margin: 0 0 0 0.5rem;
}

.submission-meta {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-left: 0.5rem;
}

.submission-supplements {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0 0 0 1.5rem;
}

.submission-supplements li {
  border-top: 0;
  padding: 0.25rem 0;
}

.office-actions {
  align-items: baseline;
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

.office-actions form {
  display: inline;
  margin: 0;
}

/* The send action reads like its sibling links */
button.office-send {
  color: var(--ink);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

button.office-send:hover {
  text-decoration-color: var(--ink);
}

/* Cancel stands beside the ink buttons in the same dress; buttons
   line-height is the browser's `normal`, so match it or the anchor
   stands taller on the body's 1.75 */
.office-cancel {
  background: var(--ink);
  border-radius: var(--corner);
  color: var(--on-ink);
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: normal;
  margin-right: 0.5rem;
  padding: 0.5rem 1.25rem;
  text-decoration: none;
}

/* The rendered intake report: hairline tables, one per section.
   The page header carries the client's name, so the report's own
   title line stays out of sight here (email and Kosmos keep it). */
.report-md {
  margin-top: 1.5rem;
}

.report-md > h1 {
  display: none;
}

/* Older stored reports carried a timestamp line under the title */
.report-md > h1 + p {
  display: none;
}

/* Each section opens on a lightly shaded band */
.report-md h2 {
  background: var(--chip);
  border-radius: var(--corner);
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin: 1.75rem 0 0.5rem;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
}

.report-md table {
  border-bottom: 1px solid var(--rule);
  border-collapse: collapse;
  width: 100%;
}

.report-md thead {
  display: none;
}

.report-md td {
  border-top: 1px solid var(--rule);
  padding: 0.5rem 0.75rem 0.5rem 0;
  vertical-align: top;
}

.report-md td:first-child {
  color: var(--ink-soft);
  padding-right: 2.5rem;
  width: 42%;
}

.report-md p {
  margin: 0.5rem 0;
}

.field-note {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0.5rem 0 0;
}

/* Optional fields say so; everything else is required */
.optional-flag {
  color: var(--ink-soft);
  font-size: 1em;
}

/* The running word count beneath the long answers */
.char-counter {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 0.5rem 0 0;
  text-align: right;
}

/* Or riding the label's own line, keeping the count in view before
   the writing starts */
.label-row {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.label-row .char-counter {
  margin: 0;
}

.char-counter.over-limit {
  color: var(--error);
}

.intro-start {
  margin-top: 2.25rem;
}

/* The quiet line that appears when a saved draft is restored */
.draft-notice {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 1rem 0 0;
}

/* One section at a time: the wizard walks the letter's own headings.
   !important because a utility hide must beat every layout rule — the
   field divs' flex alignment rule otherwise outweighs it */
.step-hidden {
  display: none !important;
}

.step-invisible {
  visibility: hidden;
}

.wizard-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.wizard-progress {
  color: var(--ink-soft);
  font-size: 1rem;
  letter-spacing: 0.08em;
}

/* The section rail: the form's table of contents, standing in the
   left margin on wide screens and yielding to Back/Next elsewhere */
.section-rail {
  display: none;
}

/* From 1280 (a 1080p screen at 150% scaling) the rail stands in a
   slimmer cut; from 1440 at full ease */
@media (min-width: 1280px) {
  .section-rail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-right: 1.5rem;
    position: absolute;
    right: 100%;
    top: 9rem;
    width: 14rem;
  }
}

@media (min-width: 1440px) {
  .section-rail {
    margin-right: 2.5rem;
    width: 15rem;
  }
}

button.rail-item {
  background: none;
  border: none;
  border-radius: var(--corner);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

button.rail-item:hover {
  color: var(--ink);
}

button.rail-item.rail-current {
  background: var(--chip);
  color: var(--ink);
}

button.rail-item.rail-done::after {
  color: var(--ink-soft);
  content: " ✓";
}

button.rail-item.rail-locked {
  cursor: default;
  opacity: 0.45;
}

.wizard-actions {
  align-items: center;
  display: flex;
  gap: 1.25rem;
}

/* Back stands as a quiet outlined button beside the ink Next */
button.wizard-back {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--corner);
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.25rem;
}

button.wizard-back:hover {
  border-color: var(--ink-soft);
}

.field-error,
.form-error {
  color: var(--error);
  font-size: 1rem;
  margin: 0.5rem 0 0;
}

.form-error {
  margin-top: 1.5rem;
}

.submit-row {
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  text-align: right;
}

button {
  background: var(--ink);
  border: none;
  border-radius: var(--corner);
  color: var(--on-ink);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.25rem;
}

.btn-arrow {
  height: 1.05em;
  margin-left: 0.5rem;
  vertical-align: -0.2em;
  width: 1.05em;
}

.fine {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin: 2.5rem 0 0;
  text-align: center;
}

/* Fine-print links speak in the paragraph's own soft ink; the
   underline alone marks them clickable — no blue in the small type */
.fine a {
  color: var(--ink-soft);
}

/* the badge floats over the whole letter otherwise; the attribution
   line beside the form covers the requirement */
.grecaptcha-badge {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
colophon
-------------------------------------------------------------------------- */

.colophon {
  margin-top: 7rem;
}

.colophon p {
  color: var(--ink-soft);
  font-size: 1rem;
  margin: 1.25rem 0 0;
}

/* --------------------------------------------------------------------------
subsidiary pages: privacy, success, absence
-------------------------------------------------------------------------- */

.prose {
  margin-top: 2rem;
}

.prose h1,
.prose h2 {
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  margin: 2.5rem 0 0.75rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: 1rem;
}

.plain {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
smaller sheets
-------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .topbar {
    gap: 1.25rem;
  }

  .topbar-nav {
    gap: 0.25rem;
  }

  .tagline {
    font-size: 1.3rem;
  }

  /* On phones the moons descend to the lower left, clearing the
     nav row they collide with up top */
  .theme-switch {
    bottom: 1rem;
    left: 1.25rem;
    right: auto;
    top: auto;
  }

  /* On phones the letterhead stacks, its dot retiring like the
     motto's */
  .letterhead .lh-line {
    display: block;
  }

  .letterhead .sep-dot {
    display: none;
  }

  /* On phones the motto stacks and the bullets retire */
  .tagline-brief .brief-w {
    display: block;
  }

  .tagline-brief .brief-w + .brief-dot + .brief-w {
    margin-top: 1rem;
  }

  .tagline-brief .brief-dot {
    display: none;
  }

  .opening {
    margin-top: 3.5rem;
  }

  h1 {
    font-size: 1.6rem;
  }

  .section {
    margin-top: 5rem;
  }

  /* Restated inside the query: the mobile .section rule above sits
     later in the file than the global .section-first override and
     would win the cascade, re-opening the top gap on phones */
  .section-first {
    margin-top: 0;
  }

  .team > div {
    grid-template-columns: 1fr;
  }

  /* Restated at the portrait entries' own specificity: the desktop
     :has() rule would otherwise keep its 11rem plate column and
     crush the bios against a phantom gutter */
  .team > div:has(.portrait) {
    grid-template-columns: 1fr;
  }

  /* On phones the ledger stacks; the plate leads each entry, with
     the name and bio restated to the rows beneath it */
  .team .portrait {
    grid-column: 1;
    grid-row: 1;
    width: 10.5rem;
  }

  .team > div:has(.portrait) dt {
    grid-row: 2;
  }

  .team > div:has(.portrait) dd {
    grid-row: 3;
  }

  form {
    grid-template-columns: 1fr;
  }

  .span2 {
    grid-column: span 1;
  }

  .submit-row {
    margin-right: 0;
    text-align: center;
  }
}