/* ==========================================================================
   Love Fine Art, Inc.  Shared design system, build three
   Static site. All assets local and relative. No external requests.

   Composition rules this stylesheet enforces:
   1. Chrome is a single slim fixed bar. The monogram stands alone at
      top left as the home link, tracked uppercase nav inline at top
      right. Never a centered stacked masthead, never a wordmark.
   2. Every page opens full viewport (100svh) with artwork bleeding to
      the edges or a flat navy field, and oversized display type placed
      asymmetrically. Carried unchanged from build two (approved).
   3. The monogram lives in the architecture: inline in the header,
      inline in the footer, and its L geometry recurs as the site
      bracket device (frames, section markers, list markers).
   4. Content is itemized. Source prose is distilled into .ledger,
      .facts and .item-illus structures. At most one short full
      sentence passage per page (.prose reserved for that moment).
   5. Grids are asymmetric and editorial. Center only single statement
      moments (.statement), never whole pages.
   6. One full bleed navy section per page (.navy-band).
   7. Works run large and unadorned. No frames, borders, or shadows.
   8. Illustrations are navy line drawings only, stroke via
      currentColor, consistent weight. When in doubt, omit; whitespace
      beats ornament.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Faces (T1). Apple viewers resolve Helvetica Neue first and never
   download Franklin; everyone else gets Libre Franklin instead of Arial.
   Files are local; no external requests.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color */
  --navy: #061068;
  --ink: #17171c;
  --ink-soft: #4a4a52;
  --paper: #faf8f3;
  --paper-deep: #f3f0e8;
  --hairline: rgba(6, 16, 104, 0.18);
  --hairline-soft: rgba(6, 16, 104, 0.10);
  --ghost-navy: rgba(6, 16, 104, 0.12);
  /* Light values used on navy ground */
  --on-navy: #faf8f3;
  --on-navy-soft: rgba(250, 248, 243, 0.72);
  --on-navy-hairline: rgba(250, 248, 243, 0.28);

  /* Type */
  --serif: "Didot", "Bodoni 72", "Hoefler Text", Georgia, serif;
  --sans: "Helvetica Neue", "Libre Franklin", Helvetica, sans-serif;

  /* Scale */
  --fs-hero: clamp(3rem, 9vw, 7.5rem);
  --fs-display: clamp(2.25rem, 5.5vw, 4rem);
  --fs-title: clamp(1.5rem, 3vw, 2.25rem);
  --fs-subtitle: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-caption: 0.9375rem;
  --fs-label: 0.6875rem;

  /* Rhythm */
  --measure: 38rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section: clamp(4.5rem, 11vw, 8.5rem);
  --header-h: 3.75rem;

  /* Bracket device. Proportions echo the monogram L: a thick short
     stroke turning through a long thin arm reads as ownership marks,
     so the stroke stays heavier than the site hairlines. */
  --bracket-arm: 1.375rem;
  --bracket-arm-lg: clamp(1.5rem, 3vw, 2.25rem);
  --bracket-stroke: 2px;

  /* Motion */
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-rise: 0.9s;
  --roll-duration: 90s;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: block;
}

a {
  color: var(--navy);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 4px;
}

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--navy);
  max-width: 11ch;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.08;
  color: var(--navy);
}

.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-title);
  line-height: 1.2;
  color: var(--navy);
}

.subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: 1.4;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-bottom: 1.25rem;
}

/* Section marker: an eyebrow led by the monogram L, drawn as a small
   bracket. The primary way a section announces itself in build three. */
.marker {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.marker::before {
  content: "";
  flex: 0 0 auto;
  width: 0.6875rem;
  height: 0.6875rem;
  border-left: var(--bracket-stroke) solid currentColor;
  border-bottom: var(--bracket-stroke) solid currentColor;
  transform: translateY(-0.1em);
}

/* One sanctioned full sentence passage per page. Everything else is
   itemized. */
.prose {
  max-width: var(--measure);
}

.prose p + p {
  margin-top: 1.4em;
}

.prose .lede {
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--ink);
}

.caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-soft);
}

.rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--section) 0;
}

.rule-short {
  border: 0;
  border-top: 1px solid var(--navy);
  width: 3.5rem;
  margin: 2.5rem 0;
}

/* Oversized numeral as a graphic object, e.g. 1994 */
.numeral {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: var(--ghost-navy);
  user-select: none;
}

/* Small establishment prefix inside the numeral; inherits the numeral's
   color in every context and rides its reveal because it lives inside
   the animated element. */
.numeral .numeral-est {
  font-size: 0.2em;
  letter-spacing: 0.08em;
  margin-right: 0.2em;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section);
  padding-bottom: var(--section);
}

.section-deep {
  background: var(--paper-deep);
}

/* Asymmetric two column editorial grid. Narrow column left by default. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.split.wide-left {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.split.flip {
  direction: rtl;
}

.split.flip > * {
  direction: ltr;
}

/* Push a block off the left axis to break symmetry */
.offset-right {
  margin-left: auto;
  max-width: min(var(--measure), 100%);
}

/* Full bleed helpers. Let content escape .wrap to the viewport edge. */
.bleed {
  margin-left: calc((100vw - 100%) / -2);
  margin-right: calc((100vw - 100%) / -2);
}

.bleed-right {
  margin-right: calc((100vw - 100%) / -2);
}

.bleed-left {
  margin-left: calc((100vw - 100%) / -2);
}

/* Overlap utilities: type crossing an image edge */
.pull-left {
  margin-left: clamp(-7rem, -9vw, -2rem);
  position: relative;
  z-index: 1;
}

.pull-up {
  margin-top: clamp(-7rem, -9vw, -2.5rem);
  position: relative;
  z-index: 1;
}

/* Single statement moment. The only sanctioned centered block. */
.statement {
  text-align: center;
}

.statement .prose,
.statement .rule-short {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   5. Bracket frame device
   Two opposed corners of the monogram L frame a key block: top left
   opening down and right, bottom right opening up and left. Use on at
   most one block per screenful; the device loses authority when it
   repeats within view.
   -------------------------------------------------------------------------- */

.bracket-frame {
  position: relative;
  padding: var(--bracket-arm-lg);
}

.bracket-frame::before,
.bracket-frame::after {
  content: "";
  position: absolute;
  width: var(--bracket-arm-lg);
  height: var(--bracket-arm-lg);
  pointer-events: none;
}

.bracket-frame::before {
  top: 0;
  left: 0;
  border-top: var(--bracket-stroke) solid var(--navy);
  border-left: var(--bracket-stroke) solid var(--navy);
}

.bracket-frame::after {
  bottom: 0;
  right: 0;
  border-bottom: var(--bracket-stroke) solid var(--navy);
  border-right: var(--bracket-stroke) solid var(--navy);
}

/* Single corner variant: one L at top left, mirroring the monogram
   itself. Lighter than the full frame; suits a pull quote or a fact
   cluster. */
.bracket-corner {
  position: relative;
  padding: var(--bracket-arm-lg) 0 0 var(--bracket-arm-lg);
}

.bracket-corner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bracket-arm-lg);
  height: var(--bracket-arm-lg);
  border-top: var(--bracket-stroke) solid var(--navy);
  border-left: var(--bracket-stroke) solid var(--navy);
  pointer-events: none;
}

.navy-band .bracket-frame::before,
.navy-band .bracket-frame::after,
.navy-band .bracket-corner::before {
  border-color: var(--on-navy);
}

/* --------------------------------------------------------------------------
   6. Header. Slim fixed bar, monogram alone at left (34px, no wordmark),
   nav right.
   Exact markup (the SVG paths are the monogram from
   assets/lfa-monogram.svg with fill moved to currentColor):

   <header class="site-header">
     <a class="brand" href="index.html" aria-label="Love Fine Art home">
       <svg class="brand-mark" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
         <g fill="currentColor" fill-rule="evenodd">
           <path d="M7.5,7.5 L15.6,7.5 L15.6,84.5 L92.5,84.5 L92.5,92.5 L7.5,92.5 Z"/>
           <path d="M22.9,15.2 L54.0,15.2 L54.0,23.2 L30.9,23.2 L30.9,34.5 L48.7,34.5 L48.7,42.4 L30.9,42.4 L30.9,77.0 L22.9,77.0 Z"/>
           <path d="M65.4,15.2 L84.7,77.1 L46.1,77.1 Z M65.4,38.5 L69.2,55.2 L61.5,55.2 Z M58.8,61.7 L72.0,61.7 L76.7,77.1 L54.1,77.1 Z"/>
         </g>
       </svg>
     </a>
     <nav class="site-nav" aria-label="Primary"> ... </nav>
   </header>
   -------------------------------------------------------------------------- */

html,
body {
  overflow-x: clip;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0.625rem var(--gutter);
  background: rgba(250, 248, 243, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--navy);
  white-space: nowrap;
}

.brand-mark {
  /* The monogram stands alone in the chrome at 34px; no wordmark beside it. */
  width: 2.125rem;
  height: 2.125rem;
  flex: 0 0 auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.site-nav a {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 0.25rem;
  position: relative;
  white-space: nowrap;
}

/* Underline draw on hover */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-rise);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   6b. Language switcher (I18N-1). Three tracked codes closing the nav,
   separated from the page items by a hairline. Current edition carries the
   persistent underline; the others sit quiet until hover. Logical inline
   properties so the hairline sits on the correct side under dir="rtl".
   -------------------------------------------------------------------------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-inline-start: clamp(1rem, 2.5vw, 2.25rem);
  border-inline-start: 1px solid var(--hairline);
}

.site-nav .lang-switch a:not([aria-current]) {
  color: rgba(6, 16, 104, 0.55);
}

.site-nav .lang-switch a:hover,
.site-nav .lang-switch a:focus-visible {
  color: var(--navy);
}

.site-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   7. Page openings. Every page starts with one of these at 100svh.
   Carried unchanged from build two (approved treatment).
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(3rem, 9vh, 5.5rem);
}

/* Variant A: artwork bleeding to the edges behind the type */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Soft foot scrim for type legibility over imagery. Keep subtle. */
.hero-media.scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(250, 248, 243, 0.88) 0%,
    rgba(250, 248, 243, 0.45) 26%,
    transparent 55%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Variant B: flat navy field */
.hero-navy {
  background: var(--navy);
}

.hero-navy .hero-title,
.hero-navy .display {
  color: var(--on-navy);
}

.hero-navy .eyebrow,
.hero-navy .marker {
  color: var(--on-navy-soft);
}

.hero-navy .subtitle,
.hero-navy .caption {
  color: var(--on-navy-soft);
}

/* Deck line under a hero title */
.hero-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32rem;
  margin-top: 1.75rem;
}

.hero-navy .hero-deck {
  color: var(--on-navy-soft);
}

/* Ghost monogram: the mark at architectural scale on a navy hero,
   anchored to the right edge, cropped by the viewport. Optional; use
   on at most one page. Markup: the same inline SVG as .brand-mark
   with class="hero-mark" placed inside .hero-navy before
   .hero-content. */
.hero-mark {
  position: absolute;
  right: -6vw;
  bottom: -8vh;
  width: clamp(18rem, 44vw, 38rem);
  height: auto;
  color: rgba(250, 248, 243, 0.07);
  fill: currentColor;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Navy band. One full bleed navy section per page.
   -------------------------------------------------------------------------- */

.navy-band {
  background: var(--navy);
  color: var(--on-navy-soft);
  padding-top: var(--section);
  padding-bottom: var(--section);
}

.navy-band .display,
.navy-band .title,
.navy-band .hero-title {
  color: var(--on-navy);
}

.navy-band .eyebrow,
.navy-band .marker {
  color: var(--on-navy-soft);
}

.navy-band .subtitle,
.navy-band .caption,
.navy-band .prose .lede {
  color: var(--on-navy-soft);
}

.navy-band .prose {
  color: var(--on-navy-soft);
}

.navy-band .numeral {
  color: rgba(250, 248, 243, 0.14);
}

.navy-band .rule-short {
  border-top-color: var(--on-navy-hairline);
}

.navy-band a {
  color: var(--on-navy);
  border-bottom: 1px solid var(--on-navy-hairline);
}

.navy-band a:hover,
.navy-band a:focus-visible {
  border-bottom-color: var(--on-navy);
}

.navy-band a:focus-visible {
  outline-color: var(--on-navy);
}

.navy-band ::selection {
  background: var(--paper);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   9. Ledger  (.ledger)
   The primary itemization structure. Short headed items over hairline
   rules, each led by the monogram L as its marker. Replaces the
   paragraph walls of build two: head carries the service, body carries
   the substance in a fragment of two to eight words.

   Markup:
   <ul class="ledger">
     <li class="rv">
       <h3 class="ledger-head">Acquisition</h3>
       <p class="ledger-body">Sourcing at auction and privately</p>
     </li>
     ...
   </ul>
   -------------------------------------------------------------------------- */

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
}

.ledger > li {
  position: relative;
  padding: 1.625rem 0 1.625rem 2.75rem;
  border-top: 1px solid var(--hairline-soft);
}

.ledger > li:last-child {
  border-bottom: 1px solid var(--hairline-soft);
}

/* The L marker, set on the head's baseline zone */
.ledger > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.0625rem;
  width: 0.8125rem;
  height: 0.8125rem;
  border-left: var(--bracket-stroke) solid var(--navy);
  border-bottom: var(--bracket-stroke) solid var(--navy);
}

.ledger-head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.3;
  color: var(--navy);
}

.ledger-body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 0.375rem;
  max-width: 34rem;
}

/* Wider two column ledger for long service lists. Items keep their own
   rules; columns stay balanced. */
.ledger.ledger-cols {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 6vw, 5rem);
}

.ledger.ledger-cols > li:last-child {
  border-bottom: 0;
}

.ledger.ledger-cols > li:nth-last-child(-n + 2) {
  border-bottom: 1px solid var(--hairline-soft);
}

/* Navy ground */
.navy-band .ledger > li,
.navy-band .ledger > li:last-child,
.navy-band .ledger.ledger-cols > li:nth-last-child(-n + 2) {
  border-color: var(--on-navy-hairline);
}

.navy-band .ledger > li::before {
  border-color: var(--on-navy);
}

.navy-band .ledger-head {
  color: var(--on-navy);
}

.navy-band .ledger-body {
  color: var(--on-navy-soft);
}

/* --------------------------------------------------------------------------
   10. Facts grid  (.facts)
   Short fragments in an asymmetric grid: a tracked label over a serif
   value, each cell opened by a navy rule. Twelve column base; span
   utilities set the asymmetry. Never fill a row evenly across a whole
   page; vary spans so the grid reads editorial.

   Markup:
   <dl class="facts">
     <div class="fact fact-wide rv">
       <dt class="fact-label">Founded</dt>
       <dd class="fact-value">1994, New York</dd>
     </div>
     ...
   </dl>
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  margin: 0;
}

.fact {
  grid-column: span 4;
  border-top: 1px solid var(--navy);
  padding-top: 1.125rem;
}

.fact-wide {
  grid-column: span 6;
}

.fact-narrow {
  grid-column: span 3;
}

.fact-full {
  grid-column: 1 / -1;
}

.fact-label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.625rem;
}

.fact-value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.3;
  color: var(--navy);
  margin: 0;
}

.fact-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.navy-band .fact {
  border-top-color: var(--on-navy-hairline);
}

.navy-band .fact-label,
.navy-band .fact-note {
  color: var(--on-navy-soft);
}

.navy-band .fact-value {
  color: var(--on-navy);
}

/* --------------------------------------------------------------------------
   11. Item with illustration  (.item-illus)
   Pairing block: a narrow illustration column beside an itemized
   column (a .ledger, a .facts grid, or a .marker plus fragments).
   The drawing sits high and small; the content column carries the
   weight. Flip alternates the axis down a page.

   Markup:
   <div class="item-illus">
     <div class="illus rv" aria-hidden="true"> [inline svg] </div>
     <div class="rv rv-d1"> [ledger or facts] </div>
   </div>
   -------------------------------------------------------------------------- */

.item-illus {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.item-illus.flip {
  direction: rtl;
}

.item-illus.flip > * {
  direction: ltr;
}

.illus {
  color: var(--navy);
}

.illus svg {
  width: min(100%, 15rem);
  height: auto;
}

/* Small inline drawing beside a head, e.g. inside a .ledger item */
.illus-inline svg {
  width: 3.5rem;
  height: auto;
  color: var(--navy);
}

.navy-band .illus,
.navy-band .illus-inline svg {
  color: var(--on-navy);
}

/* --------------------------------------------------------------------------
   12. Works. Large and unadorned.
   -------------------------------------------------------------------------- */

/* Single work in the page flow, left anchored */
.work {
  margin: 0;
}

.work img {
  max-height: 85vh;
  width: auto;
  max-width: 100%;
}

.work figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 1rem;
  max-width: 26rem;
}

.work figcaption .artist,
.roll figcaption .artist {
  font-style: normal;
  color: var(--ink);
}

.navy-band .work figcaption {
  color: var(--on-navy-soft);
}

.navy-band .work figcaption .artist {
  color: var(--on-navy);
}

/* --------------------------------------------------------------------------
   13. Rolling gallery  (.roll)
   One slow continuous row, single direction. The track holds the works
   twice over; the keyframe travels half the track width for a seamless
   loop. Pauses only on KEYBOARD focus (:focus-visible) so keyboard users can read
   labels; each .roll is a focusable region (tabindex="0" in the
   markup). No hover freeze by design. Works ride at 70vh; .roll-tall
   raises them to 82vh for a single showcase row per page.
   -------------------------------------------------------------------------- */

.roll {
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.roll-track {
  display: flex;
  align-items: flex-start;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: roll-drift var(--roll-duration) linear infinite;
}

.roll:focus-visible .roll-track,
.roll:has(:focus-visible) .roll-track {
  animation-play-state: paused;
}

.roll:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* On navy ground the navy outline vanishes; use the light value */
.navy-band .roll:focus-visible {
  outline-color: var(--on-navy);
}

@keyframes roll-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Works sit unadorned: no frame, no border, no shadow */
.roll figure {
  flex: 0 0 auto;
  margin: 0;
}

.roll img {
  height: 70vh;
  width: auto;
}

.roll-tall img {
  height: 82vh;
}

.roll figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 0.875rem;
  max-width: 26rem;
}

.navy-band .roll figcaption {
  color: var(--on-navy-soft);
}

.navy-band .roll figcaption .artist {
  color: var(--on-navy);
}

/* --------------------------------------------------------------------------
   14. Collection sequence  (modern, contemporary)
   Static editorial flow for the collection pages. Works sit in the
   page at varied positions: left anchored by default, right anchored
   with .seq-right, two works sharing a line with .seq-pair. Nothing
   drifts and nothing is masked; each work holds still for the viewer.
   -------------------------------------------------------------------------- */

.sequence {
  display: flex;
  flex-direction: column;
  gap: clamp(5.5rem, 12vw, 10rem);
}

.seq-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.seq-right figcaption {
  text-align: right;
}

.seq-pair {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.seq-pair.flip {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Low resolution sources render from the halved width and height
   attributes set in their markup, so they never exceed half native
   size and stay sharp on high density displays. No CSS width rule
   here: the attributes govern. */
.work-sm {
  margin: 0;
}

.work-sm img {
  max-width: 100%;
}

.work-sm figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 1rem;
  max-width: 26rem;
}

.work-sm figcaption .artist {
  font-style: normal;
  color: var(--ink);
}

/* Study row: the low resolution sources of a collection gathered into
   one deliberate cluster inside a bracket frame. Images keep the
   halved width and height attributes from their markup; the shared
   baseline and frame make the small scale read as a curated set. */
.study-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(2.25rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5.5rem);
}

.study-row figure {
  margin: 0;
}

/* --------------------------------------------------------------------------
   15. Artist index. Serif names in balanced columns over soft
   hairlines.
   -------------------------------------------------------------------------- */

.artist-index {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  max-width: 60rem;
}

.artist-index li {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--navy);
  break-inside: avoid;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.navy-band .artist-index li {
  color: var(--on-navy);
  border-bottom-color: var(--on-navy-hairline);
}

/* --------------------------------------------------------------------------
   16. Scroll reveal  (.rv / .rv-in)
   Elements marked .rv begin lowered and transparent; the inline
   IntersectionObserver snippet adds .rv-in as they enter the viewport.
   Every page also runs the 1.2s force reveal failsafe (see SPEC.md);
   no .rv element may stay hidden past that point.
   -------------------------------------------------------------------------- */

/* Hide before reveal applies only when scripting is available to run
   the observer. With JS off or blocked, .rv content renders visible
   and static. */
@media (scripting: enabled) {
  .rv {
    opacity: 0;
    transform: translateY(1.75rem);
    transition:
      opacity var(--dur-rise) var(--ease-rise),
      transform var(--dur-rise) var(--ease-rise);
  }
}

.rv-in {
  opacity: 1;
  transform: none;
}

/* Optional stagger for sibling groups */
.rv-d1 { transition-delay: 0.1s; }
.rv-d2 { transition-delay: 0.2s; }
.rv-d3 { transition-delay: 0.3s; }

/* --------------------------------------------------------------------------
   17. Footer. Monogram beside the full legal name; address and email
   right. Exact markup in SPEC.md.
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--hairline-soft);
  margin-top: var(--section);
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
}

.footer-grid {
  max-width: 76rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem 4rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  color: var(--navy);
  fill: currentColor;
}

.footer-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.site-footer address {
  font-style: normal;
  font-size: var(--fs-caption);
  line-height: 2;
  color: var(--ink-soft);
  text-align: right;
}

.site-footer a {
  color: var(--navy);
  border-bottom: 1px solid var(--hairline);
  transition: border-color 0.3s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  border-bottom-color: var(--navy);
}

.footer-fine {
  max-width: 76rem;
  margin: 2.5rem auto 0;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pull-left,
  .pull-up {
    margin-left: 0;
    margin-top: 0;
  }
}

@media (max-width: 820px) {
  .split,
  .split.wide-left,
  .split.flip {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .item-illus,
  .item-illus.flip {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 2.5rem;
  }

  .illus svg {
    width: min(100%, 11rem);
  }

  .ledger.ledger-cols {
    grid-template-columns: 1fr;
  }

  .ledger.ledger-cols > li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .ledger.ledger-cols > li:last-child {
    border-bottom: 1px solid var(--hairline-soft);
  }

  .navy-band .ledger.ledger-cols > li:last-child {
    border-bottom-color: var(--on-navy-hairline);
  }

  .fact,
  .fact-wide,
  .fact-narrow {
    grid-column: span 6;
  }

  .roll img {
    height: 52vh;
  }

  .roll-tall img {
    height: 60vh;
  }

  .work img {
    max-height: 70vh;
  }

  .artist-index {
    columns: 2;
  }

  .site-footer address {
    text-align: left;
  }
}

@media (max-width: 700px) {
  :root {
    --header-h: 6rem;
  }

  .site-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  /* Two balanced rows of three, centered under the mark. Grid (not a
     free wrap) so the composition is deliberate at every width. */
  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.7rem 1.4rem;
    justify-content: center;
    justify-items: center;
  }

  .site-nav a {
    letter-spacing: 0.14em;
  }

  /* No-JS mobile grid: six page items fill two rows of three; the
     switcher takes the final row alone, so let it span the full width
     and centre its codes rather than rag in the first column. */
  .lang-switch {
    grid-column: 1 / -1;
    justify-content: center;
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .seq-pair,
  .seq-pair.flip {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

@media (max-width: 540px) {
  .roll-track {
    gap: 1.75rem;
  }

  .fact,
  .fact-wide,
  .fact-narrow {
    grid-column: 1 / -1;
  }

  .ledger > li {
    padding-left: 2.25rem;
  }

  .artist-index {
    columns: 1;
  }

  .bracket-frame {
    padding: var(--bracket-arm);
  }

  .bracket-frame::before,
  .bracket-frame::after {
    width: var(--bracket-arm);
    height: var(--bracket-arm);
  }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   Everything visible and static. The rolling row holds still, reveals
   render in place, smooth scrolling is disabled.
   -------------------------------------------------------------------------- */

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

  .roll-track {
    animation: none;
  }

  /* With the drift stilled, the row becomes a plain scrollable strip:
     pointer and keyboard scrolling take over, the edge fade is lifted
     so nothing is obscured, and the duplicate loop set is removed so
     the row reads once through. */
  .roll {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .roll figure[aria-hidden="true"] {
    display: none;
  }

  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav a::after,
  .site-footer a {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   20. (Retired) The sweeping collection-run and the roll-sm reduced-size
   treatment were removed per ledger G2 and G6-superseded: every work now
   rides the single roll at uniform height, and gallery pages carry the
   compact two-column Selected Artists list instead of the name run.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   20. Mobile nav (MB2)
   Under 700px with JS present: compact chrome (monogram left, three
   hairlines right), full-screen paper menu. Desktop and no-JS keep the
   existing treatments.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
}

@media (max-width: 700px) {
  html.has-navjs .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  html.has-navjs {
    --header-h: 4rem;
  }

  html.has-navjs .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }

  html.has-navjs .nav-toggle span {
    display: block;
    height: 1px;
    background: var(--navy);
    transition: transform 300ms var(--m-ease, ease), opacity 200ms ease;
  }

  html.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  html.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  html.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  html.has-navjs .site-nav {
    /* absolute, not fixed: the header's backdrop-filter makes it the
       containing block for fixed descendants, collapsing the overlay */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    z-index: 99;
    background: var(--paper, #faf8f3);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }

  html.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity 300ms ease;
  }

  html.has-navjs .site-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
  }

  html.has-navjs .site-nav a {
    font-size: 0.8125rem;
    letter-spacing: 0.22em;
  }

  /* Switcher row sits centred below the stacked items, border removed. */
  html.has-navjs .site-nav .lang-switch {
    flex-direction: row;
    border-inline-start: 0;
    padding-inline-start: 0;
    gap: 2rem;
    margin-top: 0.75rem;
  }

  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }
}