/*
  ============================================================
  L5, LLC · The Register of the Company
  File: css/style.css
  Rebuilt 2026-07-20. One bright page set like a finely printed
  corporate record: front matter, five Articles, a charcoal
  colophon. Self-hosted type, hairline rules, dotted contents
  leaders, no cards, no overlays, no fixed chrome.
  Palette carried forward from the first site (Bishop-approved
  warmth): paper, stone, ink, charcoal, graphite, gold.
  Owner: Bishop Robert Warren Lyons, Jr.
  ============================================================
*/

/* ---------- Self-hosted type ---------- */
/* Faces copied from the repo's print-engine library
   (output/scripts/_fonts/). No font CDN: this site is a
   household asset and must not depend on a third party
   staying in business. */

@font-face {
  font-family: "Libre Caslon Display";
  src: url("../assets/fonts/LibreCaslonDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("../assets/fonts/Spectral-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("../assets/fonts/Spectral-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("../assets/fonts/Spectral-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("../assets/fonts/Spectral-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spectral";
  src: url("../assets/fonts/Spectral-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --ink: #141514;
  --charcoal: #20231f;
  --graphite: #363a35;
  --stone: #f5f0e8;
  --paper: #fffaf1;
  --gold: #b88a43;
  --gold-deep: #876329;
  --blue-gray: #60727b;
  --line: rgba(32, 35, 31, 0.16);
  --line-soft: rgba(32, 35, 31, 0.1);
  --serif: "Spectral", "Iowan Old Style", Georgia, serif;
  --display: "Libre Caslon Display", "Spectral", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  --measure: 44rem;      /* prose column */
  --page-pad: 24px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

/* NOTE: no scroll-behavior:smooth. It has broken anchor landings
   on house sites before (Chrome cancels the glide mid-flight).
   Instant jumps plus scroll-margin-top land exactly. */

body {
  margin: 0;
  /* Paper, not a background color: a faint fractal-noise grain
     (inline SVG, ~300 bytes, no request) laid over the paper
     tone so the ground reads as stock. */
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums;
}

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

p, h1, h2, h3, ol { margin: 0; }

::selection { background: rgba(184, 138, 67, 0.28); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--charcoal);
  color: var(--paper);
  padding: 10px 18px;
  z-index: 50;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Anchors land with a little air above them. */
section[id], [id="top"] { scroll-margin-top: 24px; }

/* ---------- The mark's craft moment ----------
   The monogram ink is revealed top to bottom, the direction the
   brush was pulled. A soft-edged CSS mask sweeps down once,
   unhurried, then the mark simply is. The finished state is the
   default: no JS involved, reduced-motion skips the sweep, and
   browsers without mask support just show the mark. */
@media (prefers-reduced-motion: no-preference) {
  @supports ((mask-image: linear-gradient(#000, #0000)) or (-webkit-mask-image: linear-gradient(#000, #0000))) {
    .ink-reveal {
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 67%, transparent 76%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 67%, transparent 76%, transparent 100%);
      -webkit-mask-size: 100% 400%;
      mask-size: 100% 400%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      animation: ink-down 2.4s cubic-bezier(0.5, 0, 0.3, 1) 0.35s both;
    }
  }
}

@keyframes ink-down {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to   { -webkit-mask-position: 0 0%;   mask-position: 0 0%; }
}

/* ---------- Masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 0 var(--page-pad);
}

.masthead-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 68rem;
  padding: 18px 0;
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  text-decoration: none;
}

.brand-mark { height: 44px; width: auto; }

.brand-name {
  color: var(--charcoal);
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.masthead-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.masthead-nav a {
  color: var(--graphite);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.masthead-nav a:hover { color: var(--gold-deep); }

/* ---------- Front matter ---------- */
.frontmatter { padding: 64px var(--page-pad) 72px; }

.frontmatter-inner {
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: 68rem;
}

.front-mark {
  display: flex;
  justify-content: center;
}

.front-mark img {
  height: clamp(240px, 32vw, 400px);
  width: auto;
}

.front-register {
  color: var(--graphite);
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 18px;
}

/* Old-style figures suit the prose (dates, the colophon year)
   but the company name is a monogram: its 5 must stand full
   height wherever the name is set as display type. */
h1, .brand-name, .seal-ring { font-variant-numeric: lining-nums; }

h1 {
  color: var(--charcoal);
  font-family: var(--display);
  font-size: clamp(3.2rem, 9vw, 5.4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

.front-rule {
  border-bottom: 1px solid var(--gold);
  border-top: 3px solid var(--gold);
  height: 3px;
  margin: 26px 0 18px;
  width: 84px;
}

.front-descriptor {
  color: var(--gold-deep);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.front-statement {
  color: var(--graphite);
  font-size: 1.28rem;
  font-weight: 300;
  line-height: 1.7;
  margin-top: 30px;
  max-width: 33em;
}

/* Contents: a printed contents leaf with dotted leaders. */
.contents {
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  margin-top: 44px;
  max-width: 30rem;
  padding-top: 22px;
}

.contents-label {
  color: var(--graphite);
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 12px;
}

.contents-list {
  list-style: none;
  padding: 0;
}

.contents-list li + li { margin-top: 2px; }

.contents-list a {
  align-items: baseline;
  color: var(--ink);
  display: flex;
  gap: 10px;
  padding: 6px 2px;
  text-decoration: none;
}

.contents-list a:hover .c-name { color: var(--gold-deep); }

.c-name { font-size: 1.02rem; }

.c-leader {
  border-bottom: 1px dotted rgba(135, 99, 41, 0.55);
  flex: 1;
  min-width: 40px;
  transform: translateY(-0.3em);
}

.c-no {
  color: var(--gold-deep);
  font-family: var(--display);
  font-size: 1.1rem;
  min-width: 1.6em;
  text-align: right;
}

/* ---------- Articles ---------- */
.article {
  margin: 0 auto;
  max-width: var(--measure);
  padding: 72px var(--page-pad);
}

.article-head {
  align-items: baseline;
  display: flex;
  gap: 16px;
  margin-bottom: 26px;
}

.art-no {
  color: var(--gold-deep);
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.art-line {
  background: var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  flex: 1;
  height: 1px;
  transform: translateY(-0.28em);
}

.art-name {
  color: var(--graphite);
  font-size: 1rem;
  font-style: italic;
  white-space: nowrap;
}

.article h2 {
  color: var(--charcoal);
  font-family: var(--display);
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.12;
  margin-bottom: 28px;
}

/* The gold full stop: the house sets its landings this way
   (cf. "I Train." on rwlyonsjr.com). */
.gp { color: var(--gold); }

.article p + p { margin-top: 20px; }

/* The first paragraph after each article heading is set larger
   and lighter, like a printed lede, so the articles breathe. */
.article h2 + p {
  color: var(--graphite);
  font-size: 1.19rem;
  font-weight: 300;
  line-height: 1.72;
}

.article p { color: var(--ink); }

/* NOTE: a printerly drop cap was tried on Article I and cut.
   The paragraph opens with the company name, and a drop cap
   splits "L5" into a giant L and an orphaned 5. If a drop cap
   ever returns, it must open a paragraph that does not begin
   with the monogram. */

.signatory {
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  margin-top: 40px;
  padding-top: 22px;
}

.sig-image {
  height: auto;
  margin-bottom: 10px;
  width: min(230px, 60vw);
}

.sig-name {
  color: var(--charcoal);
  font-family: var(--display);
  font-size: 1.2rem;
}

.sig-office {
  color: var(--graphite);
  font-size: 0.95rem;
  font-style: italic;
  margin-top: 2px;
}

/* Training: two manners of work, set as ruled rows, not cards. */
.modes { margin-top: 36px; }

.mode {
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 6px 32px;
  grid-template-columns: minmax(0, 1fr);
  padding: 22px 0;
}

.mode:last-child { border-bottom: 1px solid var(--line); }

.mode h3 {
  color: var(--charcoal);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.3;
}

.mode p { color: var(--graphite); font-size: 1rem; }

.article-close {
  color: var(--graphite);
  font-style: italic;
  margin-top: 30px;
}

.article-link-line { margin-top: 26px; }

.quiet-link {
  color: var(--gold-deep);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(135, 99, 41, 0.45);
  text-underline-offset: 5px;
}

.quiet-link:hover { text-decoration-color: var(--gold-deep); }

/* The house's devices: the imprint seal and the press seal,
   set like the stamped seals on the books themselves. */
.seals { margin: 44px 0 6px; }

.seals-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 6vw, 56px);
  justify-content: center;
}

.seals-row img {
  filter: drop-shadow(0 10px 18px rgba(20, 21, 20, 0.16));
  height: auto;
  width: clamp(132px, 22vw, 176px);
}

.seals figcaption {
  color: var(--graphite);
  font-size: 0.92rem;
  font-style: italic;
  margin-top: 20px;
  text-align: center;
}

/* The dark desk image: a framed plate on a bright page. */
.plate-figure { margin: 44px 0 0; }

.plate-frame {
  background: var(--stone);
  border: 1px solid var(--line);
  box-shadow:
    0 24px 48px rgba(20, 21, 20, 0.14),
    0 6px 14px rgba(20, 21, 20, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 12px;
}

.plate-frame img { border: 1px solid rgba(135, 99, 41, 0.35); }

.plate-figure figcaption {
  color: var(--graphite);
  font-size: 0.92rem;
  font-style: italic;
  margin-top: 12px;
  text-align: center;
}

/* Correspondence */
.write-line-wrap { margin-top: 34px; }

.write-line {
  border-bottom: 2px solid var(--gold);
  color: var(--charcoal);
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.35rem, 4.6vw, 2.1rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
  padding-bottom: 4px;
  text-decoration: none;
}

.write-line:hover { color: var(--gold-deep); }

.correspondence-note {
  color: var(--graphite);
  font-size: 0.98rem;
  font-style: italic;
  margin-top: 18px;
}

/* ---------- Dividers between articles ---------- */
.divider {
  align-items: center;
  display: flex;
  gap: 16px;
  margin: 0 auto;
  max-width: var(--measure);
  padding: 0 var(--page-pad);
}

.d-line {
  background: var(--line-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  flex: 1;
  height: 1px;
}

.d-mark {
  background: var(--gold);
  flex-shrink: 0;
  height: 8px;
  transform: rotate(45deg);
  width: 8px;
}

.d-mark--small {
  height: 5px;
  opacity: 0.75;
  width: 5px;
}

.divider { gap: 12px; }

.divider .d-line { margin: 0 6px; }

/* ---------- Colophon ---------- */
.colophon {
  background-color: var(--charcoal);
  background-image: var(--grain);
  border-top: 3px solid var(--gold-deep);
  color: rgba(255, 250, 241, 0.82);
  margin-top: 72px;
  padding: 64px var(--page-pad) 56px;
  text-align: center;
}

.seal { margin-bottom: 22px; }

.seal-ring {
  align-items: center;
  border: 1px solid rgba(184, 138, 67, 0.75);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--charcoal), 0 0 0 5px rgba(184, 138, 67, 0.35);
  color: var(--gold);
  display: inline-flex;
  font-family: var(--display);
  font-size: 1.6rem;
  height: 68px;
  justify-content: center;
  letter-spacing: 0.06em;
  padding-left: 0.06em;
  width: 68px;
}

.col-line { font-size: 0.95rem; }

.col-line + .col-line { margin-top: 8px; }

.col-name {
  color: var(--paper);
  font-family: var(--display);
  font-size: 1.1rem;
}

.col-note {
  color: rgba(255, 250, 241, 0.62);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.7;
  margin: 18px auto 18px;
  max-width: 34em;
}

.col-legal { color: rgba(255, 250, 241, 0.62); }

.col-domain {
  color: var(--gold);
  letter-spacing: 0.14em;
}

.col-top {
  color: rgba(255, 250, 241, 0.75);
  display: inline-block;
  margin-top: 20px;
  text-decoration: underline;
  text-decoration-color: rgba(184, 138, 67, 0.5);
  text-underline-offset: 5px;
}

.col-top:hover { color: var(--gold); }

.colophon :focus-visible { outline-color: var(--gold); }

/* ---------- Scroll reveal (JS-gated; page is fully visible
     without JS and under prefers-reduced-motion) ---------- */
.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .rv.seen { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 760px) {
  .frontmatter { padding-top: 88px; }

  .frontmatter-inner {
    align-items: center;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 72px;
  }

  .front-mark { justify-content: flex-end; }

  .mode { grid-template-columns: 11rem minmax(0, 1fr); }

  .article { padding-top: 88px; padding-bottom: 88px; }
}

@media (max-width: 759px) {
  .masthead-inner { justify-content: center; text-align: center; }
  .masthead-nav { justify-content: center; }
  .frontmatter { padding-top: 44px; text-align: left; }
  .front-mark img { height: clamp(200px, 44vw, 280px); }
  .contents { max-width: none; }
}

@media (max-width: 420px) {
  .masthead-nav { gap: 4px 14px; }
  .masthead-nav a { font-size: 0.88rem; }
  .art-name { display: none; }   /* the heading itself names the article */
}

/* Print: the register should print like a document. */
@media print {
  .masthead-nav, .skip-link, .col-top { display: none; }
  body { background: #fff; }
  .js .rv { opacity: 1; transform: none; }
}