/* KRUGER — implements design tokens v2.0. Fades only; no shadows; brass at most once per screen. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('assets/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/caslon-display.woff2') format('woff2');
}

:root {
  --paper: #F2F0EB;
  --surface: #FAF9F6;
  --ink: #1C1C1A;
  --grey: #6B6B66;
  --field: #1B2119;
  --green: #3E4A34;
  --brass: #A08A5B;
  --hair: #D9D6CE;
  --marg-dark: #99A392; /* marginalia over the field: 5.8:1 on #1B2119 */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}
html { scrollbar-width: thin; scrollbar-color: #B9B5AA transparent; }
html, body { margin: 0; overflow-x: clip; background: var(--paper); }
body { font-family: 'Archivo', system-ui, sans-serif; color: var(--ink); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Libre Caslon Display', 'Newsreader', Georgia, serif; font-weight: 400; text-wrap: balance; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); transition: border-color 600ms var(--ease); }
a:hover { border-bottom-color: var(--ink); }
a:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }
::selection { background: #E3E0D8; }
[hidden] { display: none !important; }
.mark { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 125%; font-weight: 500; letter-spacing: 0.20em; }
.mark-s { letter-spacing: 0.28em; } /* at or below 24px, per tokens */
.eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.fade { opacity: 0; transition: opacity 900ms var(--ease); }
.fade.on { opacity: 1; }
.fade.hold { transition-delay: 900ms; }
@media (prefers-reduced-motion: reduce) { .fade.hold { transition-delay: 0ms; } }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

.skip { position: fixed; left: -9999px; top: 14px; z-index: 90; background: var(--paper); border: 1px solid var(--ink); border-radius: 2px; padding: 10px 18px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.skip:focus-visible { left: 14px; }

/* ---- persistent top bar: hidden over the opening, fades in after it ---- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 70; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 3vw, 32px); height: 58px; background: var(--paper); border-bottom: 1px solid var(--hair);
  opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.top.on { opacity: 1; pointer-events: auto; }
.top .mark { font-size: 14px; border: 0; }
.menu-btn { border: 0; background: transparent; padding: 10px 0; cursor: pointer; font-family: 'Archivo', system-ui, sans-serif;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.menu-btn:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }
@media (min-width: 900px) { .menu-btn { display: none; } }
/* below 900 the menu button must be reachable from the very top, before the bar fades in */
@media (max-width: 899.98px) {
  .top { opacity: 1; pointer-events: auto; background: transparent; border-bottom-color: transparent;
    transition: background 600ms var(--ease), border-color 600ms var(--ease); }
  .top .mark { opacity: 0; transition: opacity 600ms var(--ease); }
  .top.on { background: var(--paper); border-bottom-color: var(--hair); }
  .top.on .mark { opacity: 1; }
}

/* ---- menu: a fade to the field, per the motion rules ---- */
.veil { position: fixed; inset: 0; z-index: 80; background: var(--field); display: flex; flex-direction: column;
  padding: clamp(20px, 4vw, 44px) clamp(22px, 5vw, 52px); opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); }
.veil.open { opacity: 1; pointer-events: auto; }
.veil-top { display: flex; justify-content: space-between; align-items: center; }
.veil-top .mark { color: #EDEBE4; font-size: 14px; border: 0; }
.veil .menu-btn { color: #EDEBE4; }
.veil nav { display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 14px); margin: auto 0; }
.veil nav a { border: 0; font-family: 'Libre Caslon Display', Georgia, serif; font-size: clamp(26px, 4.5vh, 40px);
  line-height: 1.3; color: #B9C0B2; transition: color 600ms var(--ease); width: fit-content; }
.veil nav a:hover, .veil nav a.here { color: #EDEBE4; }
.veil nav a.here { border-bottom: 1px solid var(--brass); }
.veil nav a:focus-visible { outline: 1px solid #8E9686; outline-offset: 6px; }
.veil-foot { display: flex; flex-wrap: wrap; gap: 8px 34px; }
.veil-foot span, .veil-foot a { font-size: 13px; color: var(--marg-dark); border: 0; }
.veil-foot a:hover { color: #EDEBE4; }

.in { border: 0; border-bottom: 1px solid var(--hair); background: transparent; border-radius: 0; padding: 10px 0; font-family: 'Archivo', system-ui, sans-serif; font-size: 16px; color: var(--ink); width: 100%; transition: border-color 600ms var(--ease); }
.in:hover { border-bottom-color: var(--grey); }
.in:focus { outline: none; border-bottom-color: var(--ink); }
.in:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }
.act { display: inline-block; border: 1px solid var(--ink); background: transparent; border-radius: 2px; padding: 13px 26px; font-family: 'Archivo', system-ui, sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: background 600ms var(--ease), color 600ms var(--ease); }
.act:hover { background: var(--ink); color: var(--paper); }
.act:active { background: var(--field); border-color: var(--field); color: var(--paper); }
.act:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }
.act:disabled { opacity: 0.6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .fade { opacity: 1; transition: none; } }

.rail { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 50; display: none; flex-direction: column; gap: 18px; padding: 20px 26px 20px 18px; }
@media (min-width: 900px) { .rail { display: flex; } }
.rail a { display: flex; align-items: center; gap: 12px; border: 0; color: var(--grey); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; transition: color 500ms var(--ease); }
.rail a:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; }
.rail i { display: block; width: 10px; height: 1px; background: currentColor; opacity: 0.45; transition: width 500ms var(--ease), opacity 500ms var(--ease), background 500ms var(--ease); }
.rail a.here { color: var(--ink); }
.rail a.here i { width: 26px; opacity: 1; background: var(--brass); } /* the screen's one brass mark */
.rail span { opacity: 0; transition: opacity 500ms var(--ease); white-space: nowrap; }
.rail:hover span { opacity: 1; }
.rail:hover a:hover { color: var(--ink); }
.rail.dark a { color: #8E9686; }
.rail.dark a.here, .rail.dark:hover a:hover { color: #E2E5DA; }
@media (prefers-reduced-motion: reduce) { .rail a, .rail i, .rail span { transition: none; } }
.marg { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.quote { font-family: 'Libre Caslon Display', Georgia, serif; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.3; }
.dialgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
@media (min-width: 760px) { .dialgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* photographs: quiet entrance once loaded, slow hover */
.ph { display: block; width: 100%; height: auto; border-radius: 2px; background: var(--field);
  opacity: 0; transition: opacity 900ms var(--ease), transform 1400ms var(--ease); }
.ph.ld { opacity: 1; }
.dialgrid figure:hover .ph { transform: scale(1.015); }
.dialgrid figure { overflow: hidden; }
.dialgrid figure > span { display: block; overflow: hidden; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .ph { transition: opacity 900ms var(--ease); } .dialgrid figure:hover .ph { transform: none; } }

/* opening choreography: the mark settles, then the line beneath it */
.hero-mark { opacity: 0; animation: markIn 1400ms var(--ease) 150ms forwards; }
.hero-line { opacity: 0; animation: lineIn 1200ms var(--ease) 700ms forwards; }
@keyframes markIn { from { opacity: 0; letter-spacing: 0.30em; } to { opacity: 1; letter-spacing: 0.20em; } }
@keyframes lineIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-mark, .hero-line { animation: none; opacity: 1; }
}

/* ---- long-form layout helpers (sections added for the customer-facing build) ---- */
.wrap { max-width: 62ch; margin: 0 auto; }
.wide { max-width: 1080px; margin: 0 auto; }
.sec { padding: clamp(120px, 16vh, 240px) 24px; }
.sec-tight { padding: clamp(84px, 11vh, 150px) 24px; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-l { display: flex; flex-direction: column; gap: clamp(34px, 4.5vw, 58px); }
h2.t { margin: 0; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; }
h3.t { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.12; }
.lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.6; }
.note { color: var(--grey); font-size: 16px; }
.rule { padding-top: 26px; border-top: 1px solid var(--hair); }

.two { display: grid; gap: clamp(28px, 4vw, 60px); align-items: start; }
@media (min-width: 860px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* commitments, and the edition cards: same quiet rule-topped block */
.marks { display: grid; gap: clamp(24px, 3vh, 36px); }
@media (min-width: 760px) { .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4vw, 52px); } }
.marks > div { display: flex; flex-direction: column; gap: 9px; padding-top: 20px; border-top: 1px solid var(--hair); }
.marks h3 { margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.18; }
.marks p { margin: 0; }

/* the process, on the dark band */
.steps { display: grid; gap: clamp(28px, 4vh, 44px); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 4vw, 58px); } }
.step { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(214,218,206,0.22); }
.step h3 { margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.18; color: #EDEBE4; }
.step p { margin: 0; color: #C2C9B9; }

/* forms that ask more than one thing */
.row { display: grid; gap: 26px; }
@media (min-width: 660px) { .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fld { display: flex; flex-direction: column; gap: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
select.in { appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background-repeat: no-repeat; background-position: right 2px center; background-size: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236B6B66'/%3E%3C/svg%3E"); }
select.in::-ms-expand { display: none; }

/* a quiet inline link that still reads as an action */
.go { display: inline-flex; align-items: center; gap: 10px; border: 0; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px;
  border-bottom: 1px solid var(--hair); transition: border-color 600ms var(--ease); width: fit-content; }
.go:hover { border-bottom-color: var(--ink); }
.go.on-dark { color: #EDEBE4; border-bottom-color: rgba(214,218,206,0.3); }
.go.on-dark:hover { border-bottom-color: #EDEBE4; }

/* a light-on-field section: inverts the helpers above */
.dark-band { background: var(--field); color: #C2C9B9; }
.dark-band h2, .dark-band h3 { color: #EDEBE4; }
.dark-band .marks > div, .dark-band .rule { border-top-color: rgba(214,218,206,0.22); }
.dark-band .note { color: var(--marg-dark); }
.dark-band .eyebrow { color: var(--marg-dark); }

/* ---- accessibility and navigation fixes ---- */
/* anchor jumps and keyboard focus must clear the fixed header (WCAG 2.2 2.4.11) */
html { scroll-padding-top: 78px; }

/* WCAG 2.2 2.5.8: every rail tick needs a 24px target, not a 17px one */
.rail a { min-height: 24px; }

/* header action: the commission is reachable from any scroll position */
.top-act { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.top-cta { border: 0; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  min-height: 24px; display: inline-flex; align-items: center; border-bottom: 1px solid transparent;
  transition: border-color 600ms var(--ease); }
.top-cta:hover { border-bottom-color: var(--ink); }
@media (max-width: 899.98px) { .top-cta { display: none; } }
.top .mark { min-height: 24px; display: inline-flex; align-items: center; }
.veil-foot a, .veil-foot span { min-height: 24px; display: inline-flex; align-items: center; }