/* ============================================================
   Dimmich Litigation
   Palette sampled directly from Sarah's mood board photographs.
   The colour fields are constants in both themes; only the
   paper/ink neutrals flip.
   ============================================================ */
:root {
  --wrap-max: 1600px;   /* page width on large screens (was 1120px; she found the sides too empty 10/18) */
  --wine:    #7E1547;  /* bromeliad centre, brooch */
  --magenta: #C42D77;  /* cordyline edge, graffiti, the tie */
  --coral:   #E8563F;  /* camellia red */
  --gold:    #E9A428;  /* gold leaf, combine wheel */
  --lime:    #8DB93B;  /* fern, lily pad */
  --forest:  #23491F;  /* pond water */
  --cobalt:  #2B4BC4;  /* the glass orbs */
  --plum:    #56276B;  /* wildflower delphinium */

  --night:   #140F1C;  /* the hero ground and the nav */

  --paper:    #F7F2E8;
  --paper-2:  #EFE7D7;
  --ink:      #1A1526;
  --body:     #4A4356;
  --muted:    #7C7389;
  --rule:     #DDD2BE;
  --focus:    #C42D77;
  /* --magenta at 10.9px on --night measures 3.58:1, below the 4.5:1 floor for
     small text. This is the same hue lifted to 5.32:1, used only for the small
     eyebrow labels on dark grounds. */
  --mark-on-dark: #E0559A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #17131F;
    --paper-2:  #1F1A2A;
    --ink:      #F4EEE2;
    --body:     #C0B7CC;
    --muted:    #92879F;
    --rule:     #332B42;
    --focus:    #F2A0C4;
  }
}
:root[data-theme="dark"] {
  --paper:    #17131F;
  --paper-2:  #1F1A2A;
  --ink:      #F4EEE2;
  --body:     #C0B7CC;
  --muted:    #92879F;
  --rule:     #332B42;
  --focus:    #F2A0C4;
}

:root {
  --display: Didot, "Bodoni MT", "Big Caslon", "Bookman Old Style", "Palatino Linotype", Georgia, serif;
  --sans:    Corbel, Optima, "Gill Sans", Candara, "Segoe UI", system-ui, sans-serif;
  --mark:    Consolas, "SF Mono", ui-monospace, "DejaVu Sans Mono", monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 18.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--display); color: var(--ink); font-weight: 400; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:where(a, button):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
img { max-width: 100%; }

.wrap { width: min(var(--wrap-max), 100% - 3rem); margin-inline: auto; }
.measure { max-width: 60ch; }
p.measure + p.measure { margin-top: 0.95rem; }

.mark {
  font-family: var(--mark);
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.band { padding-block: clamp(3.4rem, 8vw, 6.5rem); }
.band-paper { background: var(--paper); }
.band-paper2 { background: var(--paper-2); }

.section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3.4rem; }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.08; max-width: 20ch; }

/* ============================================================
   THE MARK — DIMMICH over a length of track, LITIGATION beside
   it, the whole lockup in brass. Rail sized in em so the ties
   keep their proportion wherever it is used.
   ============================================================ */
/* Proportions are taken off the photograph of the sign on the wall:
   DIMMICH and the lock below it are the SAME width, so LITIGATION runs all the
   way out and its N finishes flush under the H. The rail is the flexible piece:
   it stretches to fill whatever LITIGATION leaves. Measured off the sign, the
   lower line is 100% of the DIMMICH width, LITIGATION about 52% of it, the rail
   about 43%, and the LITIGATION cap height about 40% of the DIMMICH cap height.
   The D is set a little larger than the letters that follow it, as on the sign. */
.wordmark {
  display: inline-flex; flex-direction: column;
  align-items: stretch; width: max-content;
  gap: 0.06em; line-height: 1;
}
.wm-name {
  font-size: 1em;
  font-family: var(--display);
  text-transform: uppercase; font-weight: 700;
  letter-spacing: 0.005em; line-height: 0.94;
  color: var(--gold);
  background-image: linear-gradient(176deg, #F7DE9C 0%, #E9A428 46%, #C4861B 62%, #F2D488 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.wm-name::first-letter { font-size: 1.13em; }
/* --wm-sub-scale is the one number that holds the lockup together: the size of
   the LITIGATION line as a fraction of the DIMMICH line. Set on .wordmark so
   the whole mark scales from a single font-size at every breakpoint. */
.wm-lock {
  font-size: var(--wm-sub-scale, 0.294em);
  display: flex; align-items: center; gap: 0.62em; width: 100%;
}
.wm-rail { position: relative; flex: 1 1 auto; min-width: 1.5em; height: 0.92em; }
.wm-rail::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--gold) 0 0.11em, transparent 0.11em 0.56em);
}
.wm-rail::after {
  content: ""; position: absolute; left: 0; right: 0; top: 24%; bottom: 24%;
  border-top: 0.1em solid var(--gold); border-bottom: 0.1em solid var(--gold);
}
.wm-sub {
  font-family: var(--sans); color: var(--gold);
  text-transform: uppercase; line-height: 1;
  flex: none; font-size: 1em; letter-spacing: 0.3em;
  white-space: nowrap;
  /* letter-spacing leaves a trailing gap after the N; pull it back so the N,
     not the empty space behind it, is what lands under the H. */
  margin-right: -0.3em;
}

/* hero scale */
.hero .wordmark {
  font-size: clamp(2.5rem, 8vw, 6.2rem);
  /* a tight dark edge first, so the letters stay solid where they cross the photo */
  filter: drop-shadow(0 0 1.5px rgba(20,15,28,.95)) drop-shadow(0 0 4px rgba(20,15,28,.6)) drop-shadow(0 2px 12px rgba(0,0,0,.6));
}
/* a railroad track engraved faintly through the middle of DIMMICH: two rails, each with a
   thin highlight above it as if pressed into the gold, and ties barely there */
.wm-name {
  background-image:
    linear-gradient(rgba(255,236,180,.35), rgba(255,236,180,.35)), linear-gradient(rgba(110,64,10,.38), rgba(110,64,10,.38)),
    linear-gradient(rgba(255,236,180,.35), rgba(255,236,180,.35)), linear-gradient(rgba(110,64,10,.38), rgba(110,64,10,.38)),
    repeating-linear-gradient(90deg, rgba(110,64,10,.20) 0 .03em, transparent .03em .17em),
    linear-gradient(176deg, #F4CF78 0%, #E9A428 46%, #B97A15 62%, #E7BE62 100%);
  background-size: 100% .008em, 100% .016em, 100% .008em, 100% .016em, 100% .15em, 100% 100%;
  background-position: 0 calc(45% - .01em), 0 45%, 0 calc(60% - .01em), 0 60%, 0 52.5%, 0 0;
  background-repeat: no-repeat;
}

/* nav scale */
.nav .wordmark { font-size: 2.7rem; }

/* ============================================================
   NAV — one dark bar on every page, so it reads as a continuation
   of the hero rather than a separate chrome strip.
   ============================================================ */
.nav { background: var(--night); }
.nav-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding-block: 1.05rem;
}
.nav a.brand { text-decoration: none; }
.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem;
}
.nav ul a {
  font-family: var(--mark); font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #C9BFD6; text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s;
}
.nav ul a:hover { color: var(--gold); }
.nav ul a[aria-current="page"] { color: #FBF6EC; border-bottom-color: var(--magenta); }
/* the language button: the same page in the other language */
.nav ul li.lang-switch a { color: #FBF6EC; border: 1px solid rgba(251,246,236,.6); border-radius: 999px; padding: 0.3rem 0.8rem; text-transform: none; letter-spacing: 0.04em; }
.nav ul li.lang-switch a:hover { color: var(--gold); border-color: var(--gold); }
/* on Spanish pages: how the translation was made, and the limit on Sarah's Spanish */
.lang-note { background: #FBF6EC; color: #3A2E42; font-size: 0.86rem; border-bottom: 1px solid rgba(58,46,66,.15); }
.lang-note p { margin: 0; padding-block: 0.55rem; }
.lang-note a { color: inherit; }

/* ============================================================
   HERO — a dense bed of rosettes drawn live, from the bromeliad
   and cordyline photographs.
   ============================================================ */
.hero {
  position: relative;
  min-height: min(80svh, 720px);
  display: grid; align-items: center;
  background: var(--night);
  overflow: hidden; isolation: isolate;
}
#bloom { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(75% 95% at 8% 58%, rgba(20,15,28,.9) 0%, rgba(20,15,28,.78) 38%, rgba(20,15,28,.3) 68%, rgba(20,15,28,0) 92%),
    linear-gradient(to top, rgba(20,15,28,.45), rgba(20,15,28,0) 35%);
}
.hero-inner { position: relative; z-index: 5; padding-block: clamp(2.6rem, 7vw, 4.4rem); }

/* The home page is a stage of layers (see index.html), back to front:
   #bloom 0, scrim 1, Sarah on the cube 3, the masthead 4, her head again 5,
   the copy 7. .hero-inner gives up its own stacking context there so the
   masthead can sit between the two photo layers. The masthead is sized off
   the column width: DIMMICH is 4.5em wide, so it spans 90% of the column and
   its H tucks behind her head. */
.hero-stage { align-items: start; }
.hero-stage .hero-inner { z-index: auto; padding-block: clamp(1rem, 2.4vw, 1.8rem) clamp(2.6rem, 6vw, 4rem); }
/* Until art.js has dropped the masthead under her chin it would sit across her
   face, so it stays hidden for that first frame. */
html.js .hero-stage .hero-inner:not(.is-fit) { visibility: hidden; }
.hero-stage .wordmark { position: relative; z-index: 4; font-size: min(calc(min(var(--wrap-max), 100vw - 3rem) * 0.9 / 4.5), 21vh); }   /* capped by screen height so the hero fits on one screen */
.hero-stage .hero-inner .mark,
.hero-stage .hero-lede,
.hero-stage .actions { position: relative; z-index: 7; }
.hero-stage .hero-inner .mark { margin: 1.5rem 0 0; }
.hero-stage .hero-lede { max-width: min(46ch, 52%); margin-top: 1.2rem; }
@media (max-width: 900px) { .hero-stage .hero-lede { max-width: 44%; } }
.hero-sitter {
  position: absolute; margin: 0; z-index: 3;
  top: 0; bottom: auto; height: 100%;   /* her head sits clear above the masthead; art.js drops the masthead to her chin */
  right: calc((100% - min(var(--wrap-max), 100% - 3rem)) / 2 - 1%);
  animation: sitter-in 1.4s cubic-bezier(.2,.7,.2,1) both .15s;
}
.hero-sitter::before {
  content: ""; position: absolute; z-index: -1;
  left: 70%; top: -4%; width: 150%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(233,164,40,.26), rgba(196,45,119,.14) 45%, rgba(20,15,28,0) 100%);
}
.hero-sitter img {
  display: block; height: 100%; width: auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
}
.hero-head { z-index: 5; pointer-events: none; }
.hero-head::before { display: none; }
.hero-head img { filter: none; }
@keyframes sitter-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-sitter { animation: none; } }
@media (max-width: 560px) {
  .hero { align-items: start; }
  /* Phones: her photo first, at the top, with the masthead crossing her jacket
     and the copy below. The bottom of the photo fades into the ground. */
  .hero-stage { --sit-h: min(560px, 118vw); }
  .hero-stage .hero-inner { padding-top: calc(var(--sit-h) * 0.66); padding-bottom: clamp(2.6rem, 6vw, 4rem); }
  .hero-stage .hero-lede { max-width: none; }
  .hero-sitter { height: var(--sit-h); top: 0; bottom: auto; left: 0; right: 0; margin-inline: auto; width: fit-content;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }
}
.hero-lede {
  color: #E4DCEC;
  font-size: clamp(1.06rem, 2vw, 1.3rem);
  max-width: 46ch; margin-top: 1.9rem;
}
.hero .mark { color: var(--mark-on-dark); margin-bottom: 1.4rem; }

/* a slimmer dark opener for the interior pages */
.pagehead.has-art { position: relative; overflow: hidden; isolation: isolate; }
.pagehead.has-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.pagehead { background: var(--night); padding-block: clamp(2.8rem, 7vw, 4.6rem); }
.pagehead .mark { color: var(--mark-on-dark); margin-bottom: 1rem; }
.pagehead h1 {
  color: #FBF6EC; font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1.04; max-width: 22ch;
}
.pagehead p { color: #C9BFD6; max-width: 58ch; margin-top: 1.2rem; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.6rem; }
.btn {
  font-family: var(--sans); font-size: 1rem;
  padding: 0.9rem 1.7rem; text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .18s, color .18s, border-color .18s;
}
.btn-solid { background: var(--magenta); color: #FFF6FA; font-weight: 600; }
.btn-solid:hover { background: var(--coral); color: #1A1526; }
.btn-ghost { border-color: #6C5F7E; color: #E4DCEC; }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }

/* ============================================================
   DOCKET — each row carries the colour of the photograph it came
   out of, and floods with it on hover.
   ============================================================ */
.docket { border-top: 2px solid var(--ink); }
.docket-row {
  display: grid;
  grid-template-columns: 1.5rem 11rem 1fr;
  gap: 1.4rem 2rem; align-items: start;
  padding: 2.1rem 1.2rem 2.1rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  transition: background-color .22s ease;
}
.docket-row:hover { background: color-mix(in srgb, var(--tint) 13%, transparent); }
.chip { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--tint); margin-top: 0.35rem; }
.docket-row h3 { font-size: 1.5rem; line-height: 1.18; margin-bottom: 0.45rem; }
.docket-row .measure { max-width: 56ch; }
/* p is margin:0 site-wide, so a row that runs to a second paragraph sets its own gap. */
.docket-row .measure + .measure { margin-top: 0.95rem; }
@media (max-width: 760px) {
  .docket-row { grid-template-columns: 1.1rem 1fr; gap: 0.8rem 1.1rem; }
  .docket-row .mark { grid-column: 2; }
  .docket-row > div { grid-column: 2; }
}

/* ============================================================
   FIRST DAYS — cobalt field, suspended glass orbs
   ============================================================ */
.band-first { position: relative; background: var(--cobalt); color: #EAF0FF; overflow: hidden; }
#orbs { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; opacity: .85; }
.band-first > .wrap { position: relative; z-index: 1; }
/* the OCCUPIED CAMP CAR / DO NOT MOVE sign, ghosted into the right side of "The first days" (10/22) */
.camp-sign { position: absolute; top: 0; right: 0; height: 62%; width: min(40%, 560px); margin: 0; z-index: 0; opacity: .5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); }
.camp-sign img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
@media (max-width: 760px) { .camp-sign { width: 70%; opacity: .22; } }
.band-first h2 { color: #FFFFFF; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; }
.band-first p { color: #DCE5FF; }
.band-first .mark { color: var(--gold); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.6rem 3rem; margin-top: 3.4rem; }
.fact { border-top: 3px solid var(--gold); padding-top: 1.15rem; }
.fact h3 { color: #FFFFFF; font-size: 1.2rem; margin-bottom: 0.5rem; }
.fact p { font-size: 1.05rem; line-height: 1.58; }

/* ============================================================
   FOR RAILROADS — the forest field, the pond water in her photographs.
   ============================================================ */
.band-forest { background: var(--forest); color: #E4EEDC; }
.band-forest h2, .band-forest h3 { color: #FFFFFF; }
.band-forest p { color: #D2E0C8; }
.band-forest .mark { color: var(--gold); }
.band-forest .fact { border-top-color: var(--gold); }

/* ============================================================
   AI — a plum field, the one colour from the wildflower wall that
   nothing else on the site uses.
   ============================================================ */
.band-plum { background: var(--plum); color: #EFE3F5; }
.band-plum h2, .band-plum h3 { color: #FFFFFF; }
.band-plum p { color: #DCCBE6; }
.band-plum .mark { color: var(--gold); }
.band-plum .fact { border-top-color: var(--gold); }

/* ============================================================
   SARAH — portraits and prose
   ============================================================ */
.lattice { position: relative; overflow: hidden; }
.lattice::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23C42D77' stroke-width='1'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z'/%3E%3C/g%3E%3Cg fill='%23E9A428'%3E%3Ccircle cx='20' cy='20' r='2'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='40' cy='0' r='2'/%3E%3Ccircle cx='0' cy='40' r='2'/%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.lattice > .wrap { position: relative; z-index: 1; }

.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.2rem, 5vw, 4rem); align-items: start; }
.about-grid.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .about-grid, .about-grid.even { grid-template-columns: 1fr; } }   /* phones stack it (10/24: the even pair on the AI page ran off a phone) */
.portrait { margin: 0; }
.conf-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); max-width: 50rem; align-items: end; }
.conf-photos img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 560px) { .conf-photos { grid-template-columns: 1fr; } }
.portrait img {
  display: block; width: 100%; max-width: 24rem; height: auto;
  border: 2px solid var(--ink); background: var(--paper);
}
.portrait figcaption {
  font-family: var(--mark); font-size: 1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wine); margin-top: 0.7rem;
}
.about-body { display: flex; flex-direction: column; gap: 1.2rem; }
.about-body h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; margin-bottom: 0.5rem; }
.about-body p { max-width: 58ch; }

.card { background: var(--paper); border: 2px solid var(--ink); padding: 2rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.card h2 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.cred {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 clamp(1.6rem, 3vw, 3rem);
}
.cred li { padding-block: 0.8rem; border-top: 1px solid var(--rule); font-size: 1.02rem; }
.cred .k {
  display: block; font-family: var(--mark); font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); margin-bottom: 0.28rem;
}
.cred .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.cred .v a, .cred .k a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.cred .v a:hover, .cred .k a:hover { color: var(--gold); }

/* ============================================================
   THE COMBINE — a forest field for the Benton County story. The
   only place on the site where a photograph gets the full width.
   ============================================================ */
.band-field { background: var(--night); color: #DED6E6; }
.band-field .mark { color: var(--gold); }
.band-field h2 { color: #FFFFFF; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.06; max-width: 18ch; }
.field-photo { margin: 2.6rem 0 0; }
.field-photo img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--gold);
}
.field-photo figcaption {
  font-family: var(--mark); font-size: 1rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); opacity: 0.85; margin-top: 0.8rem;
}
.field-story {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.3rem clamp(2rem, 4vw, 3.4rem); margin-top: 2.8rem;
}
.field-story p { color: #C9BFD6; }
.field-story p + p { margin-top: 1.1rem; }
.field-note { color: #C9BFD6; max-width: 62ch; margin-top: 1.4rem; }  /* the colleague line, right under the combine photo (10/22) */
.field-family { margin: 1.8rem 0 0; max-width: 26rem; }  /* her parents, under the line about her dad (10/22) */
.field-family figcaption { color: #DED6E6; line-height: 1.6; }

/* ============================================================
   QUESTIONS — question and answer in facing columns
   ============================================================ */
.faq { border-top: 2px solid var(--ink); }
.qa {
  display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 1.1rem 3.2rem; align-items: start;
  padding: 2.5rem 0; border-bottom: 1px solid var(--rule);
}
.qa h3 { font-size: 1.32rem; line-height: 1.22; }
.qa-body { display: flex; flex-direction: column; gap: 1.05rem; max-width: 60ch; }
@media (max-width: 900px) { .qa { grid-template-columns: 1fr; gap: 0.9rem; } }

/* ============================================================
   PRAISE
   ============================================================ */
.praise {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 3.2rem 4rem;
}
.praise blockquote { margin: 0; display: flex; flex-direction: column; gap: 1.35rem; }
.praise .quo { font-family: var(--display); font-size: 3.6rem; line-height: 0.55; color: var(--gold); height: 1.5rem; }
.praise .said { font-family: var(--display); color: var(--ink); font-size: clamp(1.1rem, 1.7vw, 1.28rem); line-height: 1.5; }
.praise .attr { border-top: 2px solid var(--wine); padding-top: 0.85rem; display: flex; flex-direction: column; gap: 0.2rem; }
.praise .who { color: var(--ink); font-size: 1rem; }
.praise .where { font-family: var(--mark); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wine); }
/* the long CSX quote leads across the full width in two columns of slightly larger type, and the three shorter
   ones sit in a row beneath it, so no column runs long beside empty space (10/23) */
.praise blockquote.lead { grid-column: 1 / -1; }
.praise blockquote.lead .said { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.55; }
@media (min-width: 900px) {
  .praise { grid-template-columns: repeat(3, 1fr); }
  .praise blockquote.lead .said { column-count: 2; column-gap: clamp(2.4rem, 4vw, 4rem); }
  .praise blockquote.lead .attr { max-width: calc(50% - clamp(1.2rem, 2vw, 2rem)); }
}

/* ============================================================
   THINGS I LOVE — a wall, not a grid. Columns let the portrait
   and landscape frames sit at their own heights the way they do
   on a camera roll.
   ============================================================ */
.gallery { columns: 4 220px; column-gap: 1.15rem; }
.gallery figure { margin: 0 0 1.15rem; break-inside: avoid; display: block; }
.gallery .pair { column-span: all; display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; margin: 0 auto 1.15rem; max-width: 46rem; }
.gallery img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.gallery figcaption {
  font-family: var(--mark); font-size: 1rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink); opacity: 0.85;
  margin-top: 0.5rem; line-height: 1.5;
}

/* ============================================================
   CONTACT — wine field
   ============================================================ */
.band-contact { background: var(--wine); color: #FBEAF2; }
.contact-grid { display: grid; grid-template-columns: 0.7fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .contact-grid { grid-template-columns: 1fr; } }
.band-contact .portrait img { border-color: #F3DCE7; max-width: 20rem; }
.band-contact h2 { color: #FFFFFF; font-size: clamp(2.3rem, 5.4vw, 3.6rem); line-height: 1.03; }
.band-contact p { color: #F3DCE7; }
.band-contact .mark { color: var(--gold); }
.lines { display: flex; flex-direction: column; gap: 1.3rem; }
.line { display: flex; flex-direction: column; gap: 0.2rem; }
.line a {
  font-family: var(--display); font-size: clamp(1.35rem, 3vw, 2rem);
  color: #FFFFFF; text-decoration: none;
  border-bottom: 2px solid var(--gold); padding-bottom: 3px; width: fit-content;
  font-variant-numeric: tabular-nums;
  transition: color .18s, border-color .18s;
}
.line a:hover { color: var(--gold); border-color: var(--lime); }
.addr { font-family: var(--display); font-size: clamp(1.1rem, 2.2vw, 1.45rem); line-height: 1.35; color: #FFFFFF; }

/* ---------- footer ---------- */
.foot { background: var(--paper); padding-block: 2.6rem 3.4rem; }
.foot-rule { position: relative; height: 0.95rem; margin-bottom: 2.4rem; }
.foot-rule::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 10px);
}
.foot-rule::after {
  content: ""; position: absolute; left: 0; right: 0; top: 28%; bottom: 28%;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; justify-content: space-between; align-items: baseline; }
/* --muted measures 4.03:1 on --paper, under the 4.5:1 floor. The disclaimer is
   the one place that text is long enough that people actually have to read it. */
.disclaimer { font-size: 0.95rem; color: #4F475C; max-width: 62ch; line-height: 1.55; }

/* ============================================================
   THE RECORD — night field on the Railroads page. Counts and case
   types only: no party names, no carrier class.
   ============================================================ */
.band-night { background: var(--night); color: #DED6E6; }
.band-night .mark { color: var(--gold); }
.band-night .section-head h2 { color: #FFFFFF; }
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); }
.tally-item { border-top: 3px solid var(--gold); padding-top: 1.2rem; }
.tally-n {
  font-family: var(--display); font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1;
  color: #FFFFFF; font-variant-numeric: tabular-nums; margin-bottom: 0.7rem;
}
.tally-n span { font-size: 0.36em; color: var(--gold); letter-spacing: 0.04em; }
.tally-item p:not(.tally-n) { color: #C9BFD6; font-size: 1rem; line-height: 1.58; }
.tally-note { color: #C9BFD6; margin-top: clamp(2.2rem, 4vw, 3rem); }

/* dark bands */
.band-night h2 { color: #FFFFFF; }
.band-night .about-body p:not(.mark) { color: #C9BFD6; }

/* ============================================================
   MOTION — three effects, all switched on by art.js adding .motion
   to <html>. Without the script, or with reduced motion requested,
   everything is simply there.
   ============================================================ */
/* 1. Sections glide up into place as they reach the screen. */
.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* 2. The rail lays itself down, left to right. */
.motion .wm-rail, .motion .foot-rule { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.6,0,.2,1) .25s; }
.motion .wm-rail.is-in, .motion .foot-rule.is-in { clip-path: inset(0 0 0 0); }

/* 3. Gallery photos open full screen. */
.gallery img { cursor: zoom-in; }
.lightbox {
  border: 0; padding: 0; margin: auto; background: transparent; color: #FBF6EC;
  max-width: 96vw; max-height: 96vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(20, 15, 28, .93); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lightbox img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; display: block; box-shadow: 0 12px 50px rgba(0,0,0,.6); }
.lightbox figcaption { font-family: var(--mark); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.lightbox button {
  position: fixed; background: none; border: 0; color: #FBF6EC; font: 400 2.4rem/1 var(--display);
  cursor: pointer; padding: .6rem 1rem; opacity: .8;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; color: var(--gold); }
.lightbox .lb-close { top: 1rem; right: 1rem; }
.lightbox .lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
.motion .lightbox[open] img { animation: lb-in .35s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Small Business and Local Counsel pages: hash marks in front of LITIGATION instead of rail and ties. */
.page-small-business .wm-rail, .page-local-counsel .wm-rail { container-type: inline-size; display: flex; align-items: center; }
.page-small-business .wm-rail::before, .page-local-counsel .wm-rail::before {
  content: "###########"; background: none; inset: auto; position: static;
  color: var(--gold); font-family: var(--mark); font-weight: 700;
  font-size: calc(100cqi / 6.6); line-height: 1; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; width: 100%;
}
.page-small-business .wm-rail::after, .page-local-counsel .wm-rail::after { content: none; }
.page-small-business .wm-lock, .page-local-counsel .wm-lock { gap: 0.12em; }
/* Small Business header: Sarah's cutout at half opacity on the open right side (her call). */
.page-small-business .pagehead { position: relative; overflow: visible; }
.page-small-business .pagehead .wrap { position: relative; z-index: 1; }
/* Standing full-length cutout, large and behind the copy; the words may cross her. */
.page-small-business .pagehead-cut { position: absolute; right: max(2%, min(20%, calc(50vw - 520px))); bottom: 0; height: 128%; width: auto; opacity: .8; z-index: 0; pointer-events: none; }   /* on wide screens she moves in from the edge, into the open space beside the copy (10/23) */
.page-espanol .pagehead { position: relative; overflow: visible; }
.page-espanol .pagehead .wrap { position: relative; z-index: 1; }
.page-espanol .pagehead-cut { position: absolute; right: 2%; bottom: 0; height: 128%; width: auto; opacity: .8; z-index: 0; pointer-events: none; }
/* CUIDADO CON EL TREN crossbuck planted at the right of "Como empezo" (10/22), pole running off the band's bottom */
.band-cuidado { position: relative; overflow: hidden; }
.band-cuidado > .wrap { position: relative; z-index: 1; }
.cuidado-sign { position: absolute; right: max(2%, calc((100% - var(--wrap-max)) / 2)); bottom: -2px; height: 92%; width: auto; max-width: 44%; object-fit: contain; object-position: bottom right; z-index: 0; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(40,24,10,.28)); }
@media (max-width: 900px) { .cuidado-sign { height: auto; width: 46%; opacity: .25; } }
.page-espanol .en { opacity: .75; font-style: italic; margin-top: .35rem; }
.page-espanol .mark.en { margin-top: .1rem; font-style: normal; }
.page-espanol .en-head { font-family: inherit; font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-top: .5rem; }
.page-espanol .en-sub { font-size: 1rem; margin-top: .2rem; margin-bottom: .6rem; }
.page-espanol p[lang="es"] + p.en:not(.mark):not(.en-head):not(.en-sub) { margin-bottom: 1rem; }
/* the menu reads over any cutout whose head rises into the nav bar */
.nav ul { position: relative; z-index: 2; }
/* Small Business header logo: cream on the forest green, not gold (her call). */
.page-small-business .nav .wm-name { background: none; color: #FBF6EC; -webkit-text-fill-color: #FBF6EC; }
.page-small-business .nav .wm-sub, .page-small-business .nav .wm-rail::before { color: #FBF6EC; }

/* No black anywhere at the top of a page (her call 10/18). Each page takes a jewel
   tone from the palette: the menu bar is the bright shade of it and the page header a
   deeper one, so the two read as two shades of the same color and nothing is black. */
.page-local-counsel { --head-a: #101B4A; --head-b: #2B4BC4; }
.page-work { --head-a: #2A1236; --head-b: #56276B; }
.page-railroad { --head-a: #3A0A22; --head-b: #7E1547; }
.page-small-business { --head-a: #0F2410; --head-b: #2C5A27; }
.page-ai { --head-a: #1A1446; --head-b: #3D3399; }
.page-ai-railroads { --head-a: #3A0A22; --head-b: #7E1547; }
.page-sarah { --head-a: #3E0B26; --head-b: #A8195C; }
.page-questions { --head-a: #3A0A12; --head-b: #8E1C2A; }   /* the pin's red (10/21) */
.page-clients { --head-a: #2A1236; --head-b: #56276B; }
.page-loves { --head-a: #3E0B26; --head-b: #A8195C; }
.page-contact { --head-a: #101B4A; --head-b: #2B4BC4; }
.page-espanol { --head-a: #0B2E33; --head-b: #157A80; }   /* teal */
.page-404 { --head-a: #2A1236; --head-b: #56276B; }
.page-index { --head-a: #1E1440; --head-b: #3B2270; }   /* royal purple, from her pin */
.nav { background: var(--head-b, var(--night)); }   /* the bright shade on top, never near-black */
.pagehead { background: linear-gradient(135deg, color-mix(in srgb, var(--head-a, var(--night)) 70%, var(--head-b, var(--night))) 0%, color-mix(in srgb, var(--head-a, var(--night)) 35%, var(--head-b, var(--night))) 100%); }
.band-night { background: var(--night); color: #DED6E6; }
.band-night .mark { color: var(--gold); }
.band-night .section-head h2 { color: #FFFFFF; }
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); }
.tally-item { border-top: 3px solid var(--gold); padding-top: 1.2rem; }
.tally-n {
  font-family: var(--display); font-size: clamp(3.2rem, 7vw, 4.6rem); line-height: 1;
  color: #FFFFFF; font-variant-numeric: tabular-nums; margin-bottom: 0.7rem;
}
.tally-n span { font-size: 0.36em; color: var(--gold); letter-spacing: 0.04em; }
.tally-item p:not(.tally-n) { color: #C9BFD6; font-size: 1rem; line-height: 1.58; }
.tally-note { color: #C9BFD6; margin-top: clamp(2.2rem, 4vw, 3rem); }

/* dark bands */
.band-night h2 { color: #FFFFFF; }
.band-night .about-body p:not(.mark) { color: #C9BFD6; }

/* ============================================================
   MOTION — three effects, all switched on by art.js adding .motion
   to <html>. Without the script, or with reduced motion requested,
   everything is simply there.
   ============================================================ */
/* 1. Sections glide up into place as they reach the screen. */
.motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* 2. The rail lays itself down, left to right. */
.motion .wm-rail, .motion .foot-rule { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.6,0,.2,1) .25s; }
.motion .wm-rail.is-in, .motion .foot-rule.is-in { clip-path: inset(0 0 0 0); }

/* 3. Gallery photos open full screen. */
.gallery img { cursor: zoom-in; }
.lightbox {
  border: 0; padding: 0; margin: auto; background: transparent; color: #FBF6EC;
  max-width: 96vw; max-height: 96vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(20, 15, 28, .93); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.lightbox img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; display: block; box-shadow: 0 12px 50px rgba(0,0,0,.6); }
.lightbox figcaption { font-family: var(--mark); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.lightbox button {
  position: fixed; background: none; border: 0; color: #FBF6EC; font: 400 2.4rem/1 var(--display);
  cursor: pointer; padding: .6rem 1rem; opacity: .8;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; color: var(--gold); }
.lightbox .lb-close { top: 1rem; right: 1rem; }
.lightbox .lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: .5rem; top: 50%; transform: translateY(-50%); }
.motion .lightbox[open] img { animation: lb-in .35s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Small Business and Local Counsel pages: hash marks in front of LITIGATION instead of rail and ties. */
.page-small-business .wm-rail, .page-local-counsel .wm-rail { container-type: inline-size; display: flex; align-items: center; }
.page-small-business .wm-rail::before, .page-local-counsel .wm-rail::before {
  content: "###########"; background: none; inset: auto; position: static;
  color: var(--gold); font-family: var(--mark); font-weight: 700;
  font-size: calc(100cqi / 6.6); line-height: 1; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; width: 100%;
}
.page-small-business .wm-rail::after, .page-local-counsel .wm-rail::after { content: none; }
.page-small-business .wm-lock, .page-local-counsel .wm-lock { gap: 0.12em; }

/* No black page headers (her call 10/18). Each page takes a jewel tone from the
   palette, dark at the left where the headline sits and brighter to the right. */
.page-local-counsel .pagehead   { background: linear-gradient(135deg, #101B4A 0%, #2B4BC4 100%); }   /* cobalt */
.page-work .pagehead            { background: linear-gradient(135deg, #2A1236 0%, #56276B 100%); }   /* plum */
.page-railroad .pagehead        { background: linear-gradient(135deg, #3A0A22 0%, #7E1547 100%); }   /* wine */
.page-small-business .pagehead  { background: linear-gradient(135deg, #0F2410 0%, #2C5A27 100%); }   /* forest */
.page-ai .pagehead              { background: linear-gradient(135deg, #1A1446 0%, #3D3399 100%); }   /* indigo */
.page-ai-railroads .pagehead    { background: linear-gradient(135deg, #3A0A22 0%, #7E1547 100%); }   /* wine, like Railroads */
.page-sarah .pagehead           { background: linear-gradient(135deg, #3E0B26 0%, #A8195C 100%); }   /* magenta */
.page-questions .pagehead       { background: linear-gradient(135deg, #3A0A12 0%, #8E1C2A 100%); }   /* red, from her pin */
.page-clients .pagehead         { background: linear-gradient(135deg, #2A1236 0%, #56276B 100%); }   /* plum */
.page-loves .pagehead           { background: linear-gradient(135deg, #3E0B26 0%, #A8195C 100%); }   /* magenta */
.page-contact .pagehead         { background: linear-gradient(135deg, #101B4A 0%, #2B4BC4 100%); }   /* cobalt */
.page-espanol .pagehead         { background: linear-gradient(135deg, #0B2E33 0%, #157A80 100%); }   /* teal */
.page-404 .pagehead             { background: linear-gradient(135deg, #2A1236 0%, #56276B 100%); }
.band-night { background: linear-gradient(135deg, #2A1236 0%, #56276B 100%); }                     /* Railroads "The record" */
.band-field { background: linear-gradient(135deg, #3A0A12 0%, #8E1C2A 100%); }                     /* Sarah, Benton County: the pin red of the Questions header (10/22; kelly green and deep purple tried and dropped) */
.band-field .field-story p, .band-field .field-note, .band-field .field-photo figcaption { color: #FFFFFF; opacity: 1; }
.page-sarah .pagehead .mark, .page-loves .pagehead .mark, .page-railroad .pagehead .mark { color: var(--gold); }   /* pink label disappears on magenta */
.page-sarah .nav ul a[aria-current="page"], .page-loves .nav ul a[aria-current="page"] { border-bottom-color: var(--gold); }
.pay-link { display: inline-block; margin: 0.4rem 0 1rem; font-family: var(--mark); font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wine); }
.band-contact .pay-link { color: var(--gold); margin-top: 1rem; }
/* Contact keeps to one family (10/22, "too many colors"): the header's navy carries
   down through the contact band, so the page is navy, gold and cream, no wine */
.page-contact .band-contact { background: linear-gradient(135deg, #101B4A 0%, #1C2F7A 100%); color: #EEF1FB; }
.page-contact .band-contact p, .page-contact .band-contact .addr { color: #E4E8F7; }
.page-contact .band-contact .portrait img { border-color: #D8DEF2; }
/* her office tower under the address (10/23). Nakashi's 2008 Commons photo, CC BY-SA 2.0, with the old Locke Reynolds lettering retouched out; the credit line must stay with it */
.building { margin: .4rem 0 0; }
.building img { display: block; width: 100%; max-width: 15rem; height: auto; border: 2px solid #D8DEF2; }
.building figcaption { font-family: var(--mark); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: rgba(228,232,247,.68); margin-top: .5rem; max-width: 15rem; }
.building figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-contact .pagehead .mark { color: var(--gold); }

/* Wide screens: the hero spreads to the wider column, and she sits just right of
   DIMMICH so the end of the masthead still crosses her jacket. */
@media (min-width: 1200px) {
  .hero-stage { --hf: min(calc(min(var(--wrap-max), 100vw - 3rem) * 0.2), 21vh); }
  .hero-sitter { right: auto; left: calc((100% - min(var(--wrap-max), 100% - 3rem)) / 2 + var(--hf) * 3.3); }
}


/* Phone menu: a Menu button that opens the page list. Without JavaScript the
   list simply stays open, as it always was. */
.nav-toggle { display: none; }
@media (max-width: 600px) {
  .js .nav-toggle {
    display: inline-block; background: none; border: 1px solid rgba(233,164,40,.6); color: var(--gold);
    font-family: var(--mark); font-size: 0.86rem; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.55rem 0.9rem; border-radius: 2px; cursor: pointer;
  }
  .js .nav ul { display: none; width: 100%; flex-direction: column; gap: 0; padding-bottom: 0.4rem; }
  .js .nav.is-open ul { display: flex; }
  .js .nav ul a { display: block; padding-block: 0.7rem; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .js .nav ul a[aria-current="page"] { border-bottom-color: var(--gold); }
}

/* Clients page: the logo in the red of her enamel pin, against its purple (10/21) */
.page-clients .wm-name {
  background-image:
    linear-gradient(rgba(255,214,214,.35), rgba(255,214,214,.35)), linear-gradient(rgba(90,10,20,.42), rgba(90,10,20,.42)),
    linear-gradient(rgba(255,214,214,.35), rgba(255,214,214,.35)), linear-gradient(rgba(90,10,20,.42), rgba(90,10,20,.42)),
    repeating-linear-gradient(90deg, rgba(90,10,20,.22) 0 .03em, transparent .03em .17em),
    linear-gradient(176deg, #FF8A8E 0%, #E0414C 42%, #B5222F 64%, #F0646C 100%);
}
.page-clients .wm-sub { color: #F2575F; }
.page-clients .wm-rail::before { background: repeating-linear-gradient(90deg, #F2575F 0 0.11em, transparent 0.11em 0.56em); }
.page-clients .wm-rail::after { border-color: #F2575F; }
.page-clients .nav .wordmark { filter: drop-shadow(0 0 1px rgba(40,6,16,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.45)); }

/* her own photographs, cut from their backgrounds and laid into a page's art (10/21) */
.layer-photo { position: absolute; margin: 0; z-index: 0; pointer-events: none; }
.layer-photo img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 14px 24px rgba(0,0,0,.5)); }
.layer-photo figcaption { position: absolute; font-family: var(--mark); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,240,225,.82); line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pagehead.has-art .wrap { position: relative; z-index: 1; }
.layer-parents, .layer-chris { bottom: 0; right: calc((100% - min(var(--wrap-max), 100% - 3rem)) / 2); height: 96%; }
.layer-parents figcaption, .layer-chris figcaption { right: 102%; bottom: 1.4rem; text-align: right; white-space: nowrap; }
.layer-diploma { top: 2.2rem; right: calc((100% - min(var(--wrap-max), 100% - 3rem)) / 2 - 1%); height: clamp(180px, 19vw, 300px); }
.layer-diploma img { filter: none; }
.layer-diploma figcaption { right: 96%; bottom: 18%; text-align: right; white-space: nowrap; }
/* on phones the law school photo is no longer hidden (10/23, she asked why it was): it sits at the top of its
   section as an ordinary photo with its caption under it */
@media (max-width: 900px) {
  .layer-photo { position: relative; top: auto; right: auto; bottom: auto; height: auto; width: min(100% - 3rem, 26rem); margin: 0 auto 2rem; z-index: 1; }
  .layer-photo img { width: 100%; height: auto; }
  .layer-photo figcaption { position: static; text-align: left; white-space: normal; margin-top: .6rem; }
}

/* the red pages (Questions, AI for Railroads): the logo in the pin's purple (10/21). Railroads went back to gold, to match its header label (10/22) */
.page-questions .wm-name, .page-ai-railroads .wm-name {
  background-image:
    linear-gradient(rgba(245,230,255,.35), rgba(245,230,255,.35)), linear-gradient(rgba(40,14,70,.42), rgba(40,14,70,.42)),
    linear-gradient(rgba(245,230,255,.35), rgba(245,230,255,.35)), linear-gradient(rgba(40,14,70,.42), rgba(40,14,70,.42)),
    repeating-linear-gradient(90deg, rgba(40,14,70,.22) 0 .03em, transparent .03em .17em),
    linear-gradient(176deg, #E6D2FF 0%, #B38AF0 42%, #7E52C4 64%, #CDB0F7 100%);
}
.page-questions .wm-sub, .page-ai-railroads .wm-sub { color: #C9A9F5; }
.page-questions .wm-rail::before, .page-ai-railroads .wm-rail::before { background: repeating-linear-gradient(90deg, #C9A9F5 0 0.11em, transparent 0.11em 0.56em); }
.page-questions .wm-rail::after, .page-ai-railroads .wm-rail::after { border-color: #C9A9F5; }
.page-questions .nav .wordmark, .page-railroad .nav .wordmark, .page-ai-railroads .nav .wordmark { filter: drop-shadow(0 0 1px rgba(30,6,20,.9)) drop-shadow(0 1px 3px rgba(0,0,0,.45)); }

/* the non-railroad logo (Small Business, Local Counsel): a row of small squares before
   LITIGATION in place of the hash marks (her call, 10/21) */
.page-small-business .wm-rail::before, .page-local-counsel .wm-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.36em; transform: translateY(-50%);
  width: auto; font-size: inherit; overflow: visible;
  background: repeating-linear-gradient(90deg, var(--gold) 0 0.36em, transparent 0.36em 0.62em);
}
.page-small-business .wm-rail::before { background: repeating-linear-gradient(90deg, #FBF6EC 0 0.36em, transparent 0.36em 0.62em); }
.page-small-business .wm-lock, .page-local-counsel .wm-lock { gap: 0.5em; }
/* ...and on every page that is not about railroads; the railroad pages keep the rail and ties */
body:not(.page-railroad):not(.page-ai-railroads) .wm-rail::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 0.36em; transform: translateY(-50%);
  width: auto; inset: auto 0 auto 0; top: 50%;
  background: repeating-linear-gradient(90deg, var(--sq, var(--gold)) 0 0.36em, transparent 0.36em 0.62em) !important;
  border: 0;
}
body:not(.page-railroad):not(.page-ai-railroads) .wm-rail::after { content: none !important; }
body:not(.page-railroad):not(.page-ai-railroads) .wm-lock { gap: 0.5em; }
.page-small-business { --sq: #FBF6EC; }
.page-clients { --sq: #F2575F; }
.page-questions { --sq: #C9A9F5; }
/* hollow squares (her call, 10/22): the square row is drawn as outlines through a mask, so it keeps each page's color */
body:not(.page-railroad):not(.page-ai-railroads) .wm-rail::before {
  background: var(--sq, var(--gold)) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 36'%3E%3Crect x='3' y='3' width='30' height='30' fill='none' stroke='white' stroke-width='6'/%3E%3C/svg%3E") left center / 0.62em 0.36em repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 36'%3E%3Crect x='3' y='3' width='30' height='30' fill='none' stroke='white' stroke-width='6'/%3E%3C/svg%3E") left center / 0.62em 0.36em repeat-x;
}
body:not(.page-railroad):not(.page-ai-railroads) .wm-rail::before { -webkit-mask-repeat: space no-repeat; mask-repeat: space no-repeat; }
/* bigger squares (her call, 10/22: "the little squares are too small") */
body:not(.page-railroad):not(.page-ai-railroads) .wm-rail::before {
  height: 0.6em; -webkit-mask-size: 1.03em 0.6em; mask-size: 1.03em 0.6em;
}
/* the squares fly in from the left the way the rails do (her call, 10/22): instead of the
   wipe, the whole row slides in from off the left edge, clipped to the logo */
.motion body:not(.page-railroad):not(.page-ai-railroads) .wm-rail { clip-path: inset(0 0 0 0); }
.motion body:not(.page-railroad):not(.page-ai-railroads) .wm-rail::before {
  transform: translate(-105%, -50%); transition: transform 1.5s cubic-bezier(.6,0,.2,1) .25s;
}
.motion body:not(.page-railroad):not(.page-ai-railroads) .wm-rail.is-in::before { transform: translate(0, -50%); }

/* old signs, laid over the page art (10/22; she loves old signs). Higgsfield originals, cut out, never boxed. */
.band-signpost { position: relative; overflow: hidden; }
.band-signpost > .wrap { position: relative; z-index: 1; }
/* the Indiana sign sits IN the plum, not on it: soft-light blend, no shadow, edges feathered, bleeding off the top right corner (10/22, she wanted it to blend in more) */
.sign-indiana { position: absolute; top: -1.5rem; right: -3%; width: min(44%, 640px); height: auto; z-index: 0; pointer-events: none;
  transform: rotate(-4deg); filter: saturate(.8); opacity: .85; mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 60% 60% at 50% 45%, #000 45%, transparent 100%); }
/* the arrow sign is nailed up sideways in the "Where to start" head, pointing down at the three kinds of call (10/23; beside the buttons it didn't fit) */
.head-arrow { position: relative; }
.sign-arrow { position: absolute; right: 6%; top: 50%; width: clamp(130px, 13vw, 200px); height: auto; pointer-events: none;
  transform: translateY(-35%) rotate(76deg); filter: drop-shadow(0 8px 10px rgba(40,20,10,.35)); }
@media (max-width: 900px) { .sign-indiana { width: 50%; top: -2rem; right: -12%; opacity: .75; } }
@media (max-width: 560px) { .sign-arrow { display: none; } }
/* the crossbuck stands well back up the line, beside the rails: small, dusk-hazed, its posts fading into the ballast (10/22) */
.sign-crossing { position: absolute; right: calc(max(1.5%, calc((100% - var(--wrap-max)) / 2)) + 9%); bottom: 25.5%; height: 25%; width: auto; z-index: 0; pointer-events: none;
  filter: brightness(.56) saturate(.85) sepia(.18) contrast(1.05) blur(.25px) drop-shadow(0 3px 4px rgba(20,6,14,.5));
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
@media (max-width: 900px) { .sign-crossing { height: 24%; opacity: .55; } }
@media (max-width: 700px) { .sign-crossing { display: none; } }
/* Railroads opener: a real dusk track photo in place of the drawn #track canvas (10/22, she no longer loved the drawing) */
.pagehead-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 62%; z-index: -1; pointer-events: none; }
.page-railroad .pagehead.has-art::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(40,6,24,.93) 0%, rgba(40,6,24,.82) 30%, rgba(40,6,24,.35) 55%, rgba(40,6,24,0) 75%),
              linear-gradient(0deg, rgba(40,6,24,.35) 0%, rgba(40,6,24,0) 30%); }
@media (max-width: 900px) { .pagehead-photo { object-position: 68% 60%; } .page-railroad .pagehead.has-art::after { background: rgba(40,6,24,.72); } }
/* the freight train: the Railroads page's centerpiece, right under the opening words (10/22) */
.train-band { position: relative; height: clamp(320px, 34vw, 560px); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); background: linear-gradient(180deg, #5F86D6 0%, #C9DDF2 70%, #5E6B3C 100%); overflow: hidden; }
.train-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the train stays pinned to the top of the Railroads page while the reader scrolls (10/23). Once pinned it slims
   to about 40 percent of its height (10/23: she wanted it smaller still) so the text has room; the margin grows by exactly what the height gives up, so the
   page below never jumps. The class is set by train.js from a marker just above the band. */
.train-band { position: sticky; top: 0; z-index: 30; transition: height .3s ease, margin-bottom .3s ease; }
.train-band.is-pinned { height: clamp(140px, 14vw, 230px); margin-bottom: calc(clamp(320px, 34vw, 560px) - clamp(140px, 14vw, 230px)); box-shadow: 0 6px 14px rgba(20, 10, 30, .28); }
@media (prefers-reduced-motion: reduce) { .train-band { transition: none; } }
.page-railroad .pagehead { padding-block: clamp(1.6rem, 3vw, 2.4rem); }   /* a compact opener, so the train is in full view on arrival */
.page-railroad .pagehead .wrap { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "mark mark" "h1 p"; column-gap: 3rem; align-items: end; }
.page-railroad .pagehead .mark { grid-area: mark; }
.page-railroad .pagehead h1 { grid-area: h1; font-size: clamp(1.9rem, 3vw, 2.7rem); max-width: 28ch; }
.page-railroad .pagehead .wrap > p:not(.mark) { grid-area: p; margin: 0; }
@media (max-width: 820px) { .page-railroad .pagehead .wrap { grid-template-columns: 1fr; grid-template-areas: "mark" "h1" "p"; } .page-railroad .pagehead .wrap > p:not(.mark) { margin-top: 1rem; } }

/* the last three of her old signs, 10/23, worked into the page art the way the Indiana sign is: no box, no
   shadow, sunk into the page's own color with the edges faded out */
/* AI for Railroads: the aged RAILWAY CROSSING crossbuck stands at the right of the wine header, posts fading out */
.sign-crossbuck { position: absolute; right: max(2%, calc((100% - var(--wrap-max)) / 2 + 1rem)); bottom: -3%; height: 80%; width: auto; z-index: 0; pointer-events: none;
  opacity: .8; filter: saturate(.85) brightness(.9);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
@media (max-width: 900px) { .sign-crossbuck { height: 70%; opacity: .25; right: -6%; } }
/* Contact: the DIMMICH LITIGATION sign, an old car side with the firm's name, fades into the cobalt at every edge */
.sign-dimmich { position: absolute; right: 2.5%; top: 0; height: 100%; width: min(50%, 720px); object-fit: contain; object-position: 50% 50%; z-index: 0; pointer-events: none;
  opacity: .78; mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 98.5%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 98.5%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
@media (max-width: 900px) { .sign-dimmich { width: 80%; opacity: .22; } }
/* the Work page gets the same treatment (10/23, she loves the Contact sign): the weathered side of an old plum passenger car,
   riveted straps and rust drips, laid into the plum header. No lettering (she had INDIANAPOLIS taken off) and big: it fills
   the header's height across the right side, fading out toward the text */
.sign-carside { right: 0; width: min(60%, 1150px); object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 34%, #000 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); }
@media (max-width: 900px) { .sign-carside { width: 100%; } }
/* Things I Love: her grandma's ruby brooch (mb11, cut out by Higgsfield), blown up and faded into the right of the
   magenta header in its own red and silver, not tinted (10/23) */
.loves-brooch { position: absolute; right: -2%; top: 50%; width: min(44%, 760px); height: auto; transform: translateY(-50%) rotate(-8deg);
  z-index: 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, transparent 4%, #000 30%, #000 70%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 45%), linear-gradient(to bottom, transparent 4%, #000 30%, #000 70%, transparent 96%); mask-composite: intersect; }
@media (max-width: 900px) { .loves-brooch { width: 80%; right: -20%; opacity: .28; } }
/* Clients: the rainy platform sign photo IS the header (10/23, "so much better": the whole palette, letters you can't read).
   The sign holds the left; the heading sits right, over the misty end of the platform, with a soft shade behind it */
.head-platform { min-height: clamp(340px, 38vw, 640px); display: flex; align-items: center; }
.head-platform .pagehead-photo { object-position: 40% 50%; }
.head-platform::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to left, rgba(8,20,28,.78) 0%, rgba(8,20,28,.55) 26%, rgba(8,20,28,0) 52%); }
.head-platform .wrap { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.head-platform h1 { max-width: 12ch; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.head-platform .mark { color: var(--gold); }
@media (max-width: 700px) {
  .head-platform { min-height: 430px; align-items: flex-end; }
  .head-platform .pagehead-photo { object-position: 30% 0%; }
  .head-platform h1 { max-width: none; }
  .head-platform::after { background: linear-gradient(to top, rgba(8,20,28,.82) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,0) 70%); }
  .head-platform .wrap { align-items: flex-start; text-align: left; }
}
/* Railroads, Outside Indiana: a strip of the rusty ladder patina down the right edge of the section */
.band-ladder { position: relative; overflow: hidden; }
.band-ladder > .wrap { position: relative; z-index: 1; }
.ladder-patina { position: absolute; right: 0; top: 0; height: 100%; width: clamp(64px, 7vw, 130px); object-fit: cover; object-position: 50% 30%; z-index: 0; pointer-events: none;
  opacity: .9; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%); mask-image: linear-gradient(to left, #000 45%, transparent 100%); }
.band-ladder .about-grid { padding-right: clamp(48px, 6vw, 112px); }       /* the text stops short of the ladder */
@media (max-width: 700px) { .ladder-patina { width: 40px; opacity: .6; } .band-ladder .about-grid { padding-right: 28px; } }

/* Small Business header: her fern photo ("The perfect shade of green"), tinted toward the forest green and faded in
   softly behind the right side, in place of the standing photo (10/23, her pick: "a subtle something-or-other") */
.page-small-business .pagehead { overflow: hidden; isolation: isolate; }
.sb-fern { position: absolute; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; object-position: 50% 50%; z-index: 0; pointer-events: none; opacity: .62;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,.7) 40%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 22%, rgba(0,0,0,.7) 40%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-composite: intersect; }
@media (max-width: 900px) { .sb-fern { width: 100%; opacity: .3; } }

/* Questions: her tulips (mb33), cut out and in their own colors, standing in the red header to the right of the
   heading (10/23: she wanted the tulips, but not faded into the red). Both drawn toward the middle a little so
   there isn't a big gap between them (her note); the bouquet's crop edges fade out on both sides. */
.q-tulips { position: absolute; right: -10%; bottom: 0; height: 62%; opacity: .4; width: auto; z-index: 0; pointer-events: none;
  filter: drop-shadow(0 12px 16px rgba(20, 4, 8, .4)); }
/* side by side on wider screens: the heading and the bouquet sit together as one group, centered across the header,
   the bouquet starting about 70px past the end of the heading's lines (the heading is about 420px wide) */
@media (min-width: 1100px) {
  .page-questions .pagehead .wrap { padding-left: max(0px, (100% - 1200px) / 2 - (100% - min(var(--wrap-max), 100% - 3rem)) / 2); }
  .q-tulips { right: auto; left: calc(max((100% - min(var(--wrap-max), 100% - 3rem)) / 2, (100% - 1200px) / 2) + 488px);
    height: 94%; max-height: 380px; opacity: 1; }
  html[lang="es"] .q-tulips { left: calc(max((100% - min(var(--wrap-max), 100% - 3rem)) / 2, (100% - 1200px) / 2) + 520px); }   /* the Spanish heading runs a little wider */
}

/* Sarah: the foulard from her old Brooks Brothers tie (mb16), redrawn as a repeating pattern in the tie's own blue
   and gold on the magenta, across the right of the header and fading out before the text (10/23) */
.sarah-tie { position: absolute; inset: 0 0 0 auto; width: 62%; z-index: 0; pointer-events: none; opacity: .75;
  background: url(img/tie-pattern.svg?v=2) 0 0 / 126px 180px repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 25%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 25%, #000 55%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect; }
@media (max-width: 900px) { .sarah-tie { width: 100%; opacity: .22; } }

/* Questions: her studio portrait in the magenta tie (moved here from the end of the Sarah page, 10/23) stands in
   the open space to the right of the answers and stays in view while the reader scrolls through them */
.faq-portrait img { max-width: 100%; }
@media (min-width: 1100px) {
  .faq-side { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 17vw, 290px); gap: 0 clamp(2rem, 3vw, 3.4rem); align-items: start; }
  .faq-side .faq { grid-column: 1; grid-row: 1; }
  .faq-portrait { grid-column: 2; grid-row: 1; position: sticky; top: 2rem; margin-top: 2.5rem; }
}
@media (max-width: 1099px) { .faq-portrait { max-width: 15rem; margin: 0 0 2.4rem; } }

/* Home, Experience: with the shorter, plainer text (10/23) the four facts start below the graduation photo and its
   caption instead of running into them */
@media (min-width: 901px) { .layer-diploma ~ .wrap h2 + .facts { margin-top: max(3.4rem, calc(2.2rem + clamp(180px, 19vw, 300px) + 24px - 178px)); } }