/* Hallmark · shape: Index-First · genre: editorial · theme: brand · redesign: full
 * paper: oklch(97.5% 0.007 85) · accent: oklch(72% 0.1 80) · display: Cormorant Garamond · body: Inter · hero: Stage (/), Banner (portals, dottrina, legal pages) · nav: edge-aligned · footer: mast · signature: the four practice areas as a numbered index, I to IV, each a door to its own portal
 * axes: light/high-contrast-serif/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S3 R4 V4 · weakest: S, the firm's own copy is generic in places; the page leans on its real nouns instead (the statutes, the four portal domains, the library photograph) */
/* Hallmark · answered F18 · no slot script: the hero photo is a file the owner swaps on disk, and the CSP forbids inline script */
@import url("./tokens.css");
@import url("./base.css");

/* surfaces: .on-ink swaps the paper family for the navy field, so every component works on both */
.on-ink {
  --color-paper: var(--color-field); --color-paper-2: var(--color-field-3); --color-paper-3: var(--color-field-3);
  --color-ink: var(--color-field-ink); --color-ink-2: var(--color-field-ink); --color-muted: var(--color-field-muted);
  --color-rule: var(--color-field-rule); --color-focus: var(--color-accent); --color-accent-text: var(--color-accent);
  background: var(--color-paper); color: var(--color-ink);
}
.on-ink.deep { --color-paper: var(--color-field-2); }
body { line-height: 1.65; }
h1, h2, h3 { color: var(--color-ink); }
h1 { line-height: 1.02; }
.lead { color: var(--color-ink-2); }
.on-ink .lead { color: var(--color-muted); }
p + p { margin-top: var(--space-md); }
strong { font-weight: 600; color: var(--color-ink); }
.skip { position: absolute; left: var(--space-md); top: calc(var(--space-2xl) * -1); z-index: var(--z-tooltip); background: var(--color-paper); color: var(--color-ink); padding: var(--space-xs) var(--space-md); }
.skip:focus-visible { top: var(--space-md); }

/* grid */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.c1-4 { grid-column: 1 / 5; } .c1-5 { grid-column: 1 / 6; } .c1-7 { grid-column: 1 / 8; } .c1-8 { grid-column: 1 / 9; }
.c6-12 { grid-column: 6 / 13; } .c8-12 { grid-column: 8 / 13; } .c5-12 { grid-column: 5 / 13; } .c10-12 { grid-column: 10 / 13; } .c1-12 { grid-column: 1 / -1; }
@media (max-width: 60rem) { .grid > * { grid-column: 1 / -1; } }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); font: 600 var(--text-sm)/1.2 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-field-ink); border-color: var(--color-field-ink); }
.btn:active { transform: translateY(1px); }
.btn.quiet { background: transparent; color: var(--color-ink); border-color: var(--color-accent); }
.btn.quiet:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.textlink { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; font-weight: 600; font-size: var(--text-sm); transition: color var(--dur-short) var(--ease-out); }
.textlink:hover { color: var(--color-accent-text); }
.textlink:active { opacity: 0.7; }
a:active { opacity: 0.8; }
.btn:disabled, .form :disabled { opacity: 0.55; cursor: not-allowed; }

/* header */
.top { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: var(--rule-hair) solid var(--color-rule); }
.top .container { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: var(--space-lg); }
.nav { display: flex; align-items: center; gap: var(--space-xl); font-size: var(--text-sm); }
.nav a:not(.btn) { text-decoration: none; color: var(--color-ink); transition: color var(--dur-short) var(--ease-out); }
.nav a:not(.btn):hover { color: var(--color-accent); }
.menu { display: none; }
@media (max-width: 60rem) {
  .top .container > .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--color-accent); font-size: var(--text-sm); font-weight: 600; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu .nav { position: absolute; right: 0; top: calc(100% + var(--space-sm)); z-index: var(--z-dropdown); flex-direction: column; align-items: flex-start; gap: var(--space-lg); min-width: 16rem; padding: var(--space-lg); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
}

/* hero, home: Stage */
.hero { padding-block: var(--space-3xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: min(calc(100dvh - var(--nav-h) - var(--space-3xl) * 2), 760px); }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; }
.actions { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-xl); }
.hero figure { margin: 0 calc(var(--gutter) * -1) 0 0; height: min(70dvh, 640px); min-height: 520px; }
.hero figure img { object-position: 40% 50%; }
@media (max-width: 60rem) {
  .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .hero figure { min-height: 0; height: auto; aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); }
}

/* banner, inner pages */
.banner { padding-block: var(--section-gap-s) var(--space-3xl); }
.banner .grid { align-items: end; row-gap: var(--space-lg); }
.banner h1 { font-size: var(--text-display-s); max-width: 22ch; }
.banner .lead { margin-top: var(--space-lg); }
.banner .byline { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.numeral { font: 500 clamp(6rem, 14vw, 13rem)/0.8 var(--font-display); color: var(--color-accent); justify-self: end; }
@media (max-width: 60rem) { .numeral { display: none; } }

/* sections */
.sec { padding-block: var(--section-gap); }
.sec.s { padding-block: var(--section-gap-s); }
.sec.l { padding-block: var(--section-gap-l); }
.well { background: var(--color-paper-2); }
.head .lead { margin-top: var(--space-md); }
.sticky { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); align-self: start; }
@media (max-width: 60rem) { .sticky { position: static; } .head { margin-bottom: var(--space-xl); } }

/* studio */
.intro { font: 500 var(--text-3xl)/1.2 var(--font-display); color: var(--color-ink); max-width: 30ch; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); color: var(--color-ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; }
.facts div { border-top: var(--rule-hair) solid var(--color-rule); padding: var(--space-md) var(--space-lg) 0 0; }
.facts dt { font: 600 var(--text-xl)/1.2 var(--font-display); color: var(--color-ink); }
.facts dd { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 40rem) { .cols2, .facts { grid-template-columns: minmax(0, 1fr); } .facts div { padding-bottom: var(--space-md); } }

/* the practice index: the signature */
.index { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.index a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.index a:hover { background: var(--color-paper-2); }
.index .n { grid-column: 1 / 3; font: 500 var(--text-display-s)/0.9 var(--font-display); color: var(--color-accent-text); padding-left: var(--space-xs); }
.index h3 { grid-column: 3 / 7; font-size: var(--text-2xl); }
.index p { grid-column: 7 / 13; color: var(--color-ink-2); }
.index .dom { grid-column: 7 / 13; grid-row: 2; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }
.index a:hover .dom { color: var(--color-accent-text); }
@media (max-width: 60rem) {
  .index a { grid-template-columns: 4rem minmax(0, 1fr); row-gap: var(--space-xs); }
  .index .n { grid-column: 1; grid-row: 1 / span 3; font-size: var(--text-3xl); }
  .index h3, .index p, .index .dom { grid-column: 2; justify-self: start; }
}

/* articles list */
.notes { list-style: none; margin: 0; padding: 0; counter-reset: note; border-top: var(--rule-hair) solid var(--color-rule); }
.notes li { counter-increment: note; }
.notes a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); text-decoration: none; color: var(--color-ink); }
.notes a::before { content: counter(note, decimal-leading-zero); font: 500 var(--text-lg)/1.6 var(--font-display); color: var(--color-accent-text); }
.notes h3 { transition: color var(--dur-short) var(--ease-out); }
.notes a:hover h3 { color: var(--color-accent-text); }
.notes p { grid-column: 2; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* prose */
.prose { max-width: 66ch; color: var(--color-ink-2); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-3xl); margin-top: var(--space-2xl); scroll-margin-top: calc(var(--nav-h) + var(--space-lg)); }
.prose h3 { margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-left: var(--space-lg); }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-accent-text); }
.prose a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.dropcap > p:first-of-type::first-letter { float: left; font: 600 4.6em/0.8 var(--font-display); color: var(--color-accent-text); margin: var(--space-2xs) var(--space-sm) 0 0; }
.toc { font-size: var(--text-sm); }
.toc p { color: var(--color-muted); margin-bottom: var(--space-sm); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: var(--rule-hair) solid var(--color-rule); }
.toc a { display: block; padding: var(--space-xs) 0 var(--space-xs) var(--space-md); color: var(--color-ink-2); text-decoration: none; }
.toc a:hover { color: var(--color-accent-text); }
.note { margin-top: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; }

/* services */
.services { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.services li { border-top: var(--rule-hair) solid var(--color-ink); padding: var(--space-md) 0 var(--space-xl); font: 500 var(--text-xl)/1.25 var(--font-display); color: var(--color-ink); }
@media (max-width: 60rem) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .services { grid-template-columns: minmax(0, 1fr); } .services li { padding-bottom: var(--space-md); } }

/* case studies */
.case { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); row-gap: var(--space-lg); }
.case h3 { font-size: var(--text-2xl); grid-column: 1 / 5; }
.case dl { grid-column: 6 / 13; margin: 0; }
.case dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); column-gap: var(--gap-columns); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.case dl div:first-child { padding-top: 0; }
.case dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-text); padding-top: var(--space-3xs); }
.case dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 40rem) { .case dl div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); } }

/* contact */
.contact h2 { max-width: 14ch; }
.contact .lead { margin-top: var(--space-md); }
.contact .lead a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); }
.form .full { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-input-edge); border-radius: var(--radius-card); background: var(--color-input); color: var(--color-field); font-size: var(--text-md); }
.form textarea { resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--color-accent); }
.consent { display: flex; gap: var(--space-sm); align-items: flex-start; }
.consent input { width: 20px; min-height: 20px; height: 20px; flex-shrink: 0; margin-top: var(--space-2xs); accent-color: var(--color-accent); }
.consent label { font-weight: 400; color: var(--color-muted); margin: 0; }
.consent a { color: var(--color-ink); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 40rem) { .form { grid-template-columns: minmax(0, 1fr); } }

/* footer: mast */
.foot { padding-block: var(--section-gap-s) var(--space-xl); font-size: var(--text-sm); }
.foot .wordmark { font: 600 clamp(4rem, 12vw, 10rem)/0.85 var(--font-display); letter-spacing: 0.18em; color: var(--color-accent); margin-bottom: var(--space-2xl); }
.foot .grid { row-gap: var(--space-xl); }
.foot h2 { font: 600 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--color-ink); margin-bottom: var(--space-sm); max-width: none; }
.foot p, .foot li { color: var(--color-muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot a { color: var(--color-ink); text-decoration: none; }
.foot a:hover { color: var(--color-accent); }
.foot .c1-4 { grid-column: 1 / 5; } .foot .c5-8 { grid-column: 5 / 9; } .foot .c9-12 { grid-column: 9 / 13; }
.base { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); color: var(--color-muted); }
.base ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.credits { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) { .foot .c1-4, .foot .c5-8, .foot .c9-12 { grid-column: 1 / -1; } }

/* —— brand, icons, buttons —— */
.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.btn { gap: var(--space-sm); }
.btn .ic { transition: transform var(--dur-short) var(--ease-out); }
.btn:hover .ic { transform: translateX(3px); }
.brand { display: block; flex-shrink: 0; }
.brand img { display: block; height: 54px; width: auto; }
@media (max-width: 40rem) { .brand img { height: 44px; } }
.top .container { gap: var(--space-xl); }
.top .nav { margin-left: auto; }
.calm { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-xs); color: var(--color-muted); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.calm:hover { color: var(--color-accent); }
.calm span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.calm .ic { width: 1rem; height: 1rem; }
.calm .off { display: none; }
body:has(#calm:checked) .calm .on { display: none; }
body:has(#calm:checked) .calm .off { display: inline-flex; }
body:has(#calm:focus-visible) .calm { outline: 2px solid var(--color-focus); outline-offset: 2px; }
body:has(#calm:checked) *, body:has(#calm:checked) *::before, body:has(#calm:checked) *::after { animation-play-state: paused !important; }
@media (max-width: 60rem) { .top .container { gap: var(--space-md); } .calm { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .calm { display: none; } }
.pledges { list-style: none; padding: 0; margin: var(--space-xl) 0 0; display: grid; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.pledges li { display: flex; gap: var(--space-sm); align-items: center; }
.pledges .ic { color: var(--color-accent); }
.index .dom { display: inline-flex; align-items: center; gap: var(--space-xs); }
.index .dom .ic { color: var(--color-accent-text); width: 1.5rem; height: 1.5rem; }
.facts dt { display: flex; align-items: center; gap: var(--space-sm); }
.facts dt .ic { color: var(--color-accent-text); }
.foot-logo { display: block; width: clamp(200px, 22vw, 300px); height: auto; margin-bottom: var(--space-2xl); }

/* —— live backgrounds: drifting light and a turning globe —— */
.live { position: relative; overflow: clip; isolation: isolate; }
.live > .container { position: relative; z-index: var(--z-raised); }
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; }
.aurora::before { width: 60%; aspect-ratio: 1; left: 40%; top: -30%; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-accent) 22%, transparent), transparent); animation: drift-a 28s var(--ease-in-out) infinite alternate; }
.aurora::after { width: 70%; aspect-ratio: 1; left: -20%; top: 10%; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-glow) 45%, transparent), transparent); animation: drift-b 36s var(--ease-in-out) infinite alternate; }
@keyframes drift-a { to { transform: translate(-18%, 22%) scale(1.15); } }
@keyframes drift-b { to { transform: translate(24%, -12%) scale(0.9); } }
.orbit { position: absolute; z-index: 0; pointer-events: none; color: var(--color-accent); opacity: 0.16; width: min(80vh, 760px); aspect-ratio: 1; right: -8%; top: 50%; translate: 0 -50%; }
.orbit .mer { transform-box: fill-box; transform-origin: center; animation: turn 30s var(--ease-in-out) infinite; }
.orbit .mer:nth-of-type(2) { animation-delay: -5s; } .orbit .mer:nth-of-type(3) { animation-delay: -10s; } .orbit .mer:nth-of-type(4) { animation-delay: -15s; } .orbit .mer:nth-of-type(5) { animation-delay: -20s; } .orbit .mer:nth-of-type(6) { animation-delay: -25s; }
@keyframes turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.hero .orbit { right: auto; left: -18%; top: 80%; opacity: 0.1; }
@media (max-width: 60rem) { .orbit { width: 120vw; right: -50%; opacity: 0.1; } }

/* —— rotating gallery in the hero —— */
.slides { position: relative; overflow: hidden; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: slide 28s var(--ease-in-out) infinite backwards; animation-delay: -1.2s; }
/* delays live here, not in style attributes: the CSP forbids inline styles */
.slides > :nth-child(2) img, .ticks > :nth-child(2)::after { animation-delay: 5.8s; }
.slides > :nth-child(3) img, .ticks > :nth-child(3)::after { animation-delay: 12.8s; }
.slides > :nth-child(4) img, .ticks > :nth-child(4)::after { animation-delay: 19.8s; }
@keyframes slide { 0% { opacity: 0; transform: scale(1.02); } 4% { opacity: 1; } 25% { opacity: 1; } 29% { opacity: 0; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.1); } }
.ticks { position: absolute; z-index: var(--z-raised); left: var(--space-lg); bottom: var(--space-lg); display: flex; gap: var(--space-xs); }
.ticks span { width: 40px; height: 2px; background: color-mix(in oklab, var(--color-field-ink) 35%, transparent); overflow: hidden; }
.ticks span::after { content: ""; display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(0); animation: tick 28s linear infinite; animation-delay: -1.2s; }
@keyframes tick { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 25.01%, 100% { transform: scaleX(0); } }

/* —— photo banners on inner pages —— */
.banner.photo { min-height: min(72dvh, 640px); display: flex; align-items: flex-end; }
.banner.photo > .container { width: 100%; }
.banner-photo { position: absolute; inset: 0; z-index: 0; margin: 0; }
.banner-photo img { width: 100%; height: 100%; object-fit: cover; animation: zoom 40s var(--ease-in-out) infinite alternate; }
.banner-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-scrim) 0%, color-mix(in oklab, var(--color-scrim) 88%, transparent) 45%, color-mix(in oklab, var(--color-scrim) 45%, transparent) 100%), linear-gradient(0deg, var(--color-scrim) 0%, transparent 45%); }
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.banner.photo .orbit { opacity: 0.12; }

/* —— call-to-action band —— */
.band { padding-block: var(--section-gap-s); }
.band .grid { align-items: end; row-gap: var(--space-xl); }
.band h2 { max-width: 18ch; }
.band .actions { justify-content: flex-end; margin: 0; }
@media (max-width: 60rem) { .band .actions { justify-content: flex-start; } }

/* —— teasers on the landing page —— */
.teaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; row-gap: var(--space-xl); }
.teaser figure { grid-column: 1 / 7; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.teaser figure img { width: 100%; height: 100%; object-fit: cover; }
.teaser > div { grid-column: 8 / 13; }
.teaser .actions { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .teaser figure, .teaser > div { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .slides img, .ticks span::after, .banner-photo img, .orbit .mer, .aurora::before, .aurora::after { animation: none; }
  .slides > span:not(:first-child) { display: none; }
}