/* ============================================================
   MARIOTTINI — WEBSITE WIREFRAME
   Blueprint / drawing-set treatment. Monochrome by design.
   No brand colour, no type selection, no visual design intent.
   ============================================================ */

:root {
  --ink:        #111111;
  --ink-2:      #4a4a4a;
  --ink-3:      #8c8c8c;
  --ink-4:      #b4b4b4;
  --line:       #111111;
  --line-soft:  #c7c7c7;
  --line-faint: #e4e4e4;
  --paper:      #ffffff;
  --grid:       #e9ecef;
  --fill:       #f5f5f5;
  --bar-h:      40px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: calc(var(--bar-h) + 26px) 20px 80px;
  font-family: var(--sans);
  color: var(--ink);
  background-color: #fafbfc;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ---------- Placeholder site nav (sticky, doubles as sheet nav) ---- */

.topbar {
  position: sticky;
  top: var(--bar-h);
  z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--line);
  display: flex;
  align-items: stretch;
}

.topbar__site {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  min-width: 0;
}

.topbar__logo {
  border: 1px solid var(--line-soft);
  padding: 9px 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.topbar__logo:hover { border-color: var(--line); color: var(--ink); }
.topbar__logo span { color: var(--ink); font-weight: 700; }
.topbar__logo span::before { content: "/"; color: var(--ink-4); font-weight: 400; margin: 0 5px 0 3px; }

.topbar__nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.topbar__item { position: relative; }
.topbar__nav a {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 9px 11px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.topbar__nav a:hover { color: var(--ink); border-bottom-color: var(--line-soft); }
.topbar__nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.topbar__nav .has-child::after { content: " \25BE"; color: var(--ink-4); }

.topbar__sub {
  position: absolute;
  top: 100%; left: 0;
  min-width: 152px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: none;
  z-index: 60;
}
.topbar__item:hover .topbar__sub,
.topbar__item:focus-within .topbar__sub { display: block; }
.topbar__sub a { border-bottom: 1px solid var(--line-faint); padding: 11px 14px; }
.topbar__sub a:last-child { border-bottom: 0; }
.topbar__sub a:hover { background: var(--fill); border-bottom-color: var(--line-faint); }

.topbar__cta {
  border: 1.5px solid var(--line);
  padding: 10px 17px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}

.bar__toggle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: #b4b4b4;
  border: 1px solid #4a4a4a;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.bar__toggle:hover { border-color: #8c8c8c; color: #fff; }
.bar__toggle::before {
  content: "\25A1";
  margin-right: 7px;
  font-size: 9px;
  vertical-align: 1px;
}
body:not(.anno-off) .bar__toggle {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
  font-weight: 700;
}
body:not(.anno-off) .bar__toggle::before { content: "\25A0"; }

/* ---------- Sheet ------------------------------------------ */

.sheet {
  max-width: 1160px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 18px 40px -28px rgba(0,0,0,.35);
}

/* Wireframe banner — fixed viewport chrome, deliberately not part of the drawing */
.wfbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  background: var(--ink);
  color: #fff;
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--mono);
  font-size: 11px;
}
.wfbar__brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid #3a3a3a;
}
.wfbar__brand span { color: #8c8c8c; font-weight: 400; }

.wfbar__sheet {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.wfbar__name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.wfbar__url {
  color: #8c8c8c;
  font-size: 11px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout-option switcher — only on sheets that have an alt layout to compare. */
.wfbar__variants {
  display: flex;
  align-items: center;
  flex: none;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  overflow: hidden;
  margin-left: 4px;
}
.wfbar__variants a {
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8c8c8c;
  text-decoration: none;
  white-space: nowrap;
}
.wfbar__variants a + a { border-left: 1px solid #3a3a3a; }
.wfbar__variants a:hover { color: #fff; }
.wfbar__variants a[aria-current="page"] { background: #fff; color: var(--ink); font-weight: 700; }
.wfbar__variants a[aria-current="page"]:hover { color: var(--ink); }

.wfbar__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.wfbar__tools a {
  color: #b4b4b4;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wfbar__tools a:hover,
.wfbar__tools a[aria-current="page"] { color: #fff; }

/* ---------- Sections --------------------------------------- */

.sec {
  display: grid;
  grid-template-columns: 78px 1fr;
  border-bottom: 1px solid var(--line-faint);
}
.sec:last-of-type { border-bottom: 0; }

.sec__gutter {
  border-right: 1px solid var(--line-faint);
  padding: 30px 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sec__num {
  width: 34px; height: 34px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.sec__rule {
  flex: 1;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line-soft) 0 3px, transparent 3px 7px);
  min-height: 20px;
}

.sec__body { padding: 30px 34px 38px; min-width: 0; }

.sec__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.sec__name {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sec__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: auto;
}
.tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid var(--ink-3);
  color: var(--ink-2);
  padding: 2px 6px;
}
.tag--solid { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Copy ------------------------------------------- */

.wf-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.wf-h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.023em;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 20ch;
}
.wf-h2 {
  font-size: clamp(23px, 2.8vw, 33px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 24ch;
}
.wf-h3 {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 8px;
}
.wf-h4 {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 6px;
}
.wf-lead {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.48;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 56ch;
}
.wf-body {
  font-size: 16px;
  line-height: 1.62;
  margin: 0 0 14px;
  max-width: 64ch;
}
.wf-sm { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0 0 10px; max-width: 62ch; }
.wf-body:last-child, .wf-sm:last-child, .wf-lead:last-child { margin-bottom: 0; }

.wf-rule { border: 0; border-top: 1px solid var(--line-faint); margin: 26px 0; }

/* ---------- Structural primitives -------------------------- */

.wf-btn {
  display: inline-block;
  border: 1.5px solid var(--line);
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wf-btn--ghost { border-width: 1px; border-style: dashed; color: var(--ink-2); font-weight: 400; }
.wf-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.wf-field {
  border: 1px solid var(--line-soft);
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  background: #fcfcfc;
}
.wf-field--tall { min-height: 108px; align-items: flex-start; }

.wf-box {
  border: 1px solid var(--line-soft);
  padding: 18px;
}
.wf-box--heavy { border-color: var(--line); }

.wf-grid { display: grid; gap: 16px; }
.wf-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.wf-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.wf-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* Media placeholder — outlined box with drawing-style cross */
.wf-media {
  position: relative;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: #fcfcfc;
  background-image:
    linear-gradient(to top right,  transparent calc(50% - 0.5px), var(--line-faint) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--line-faint) 50%, transparent calc(50% + 0.5px));
  min-height: 120px;
}
.wf-media--21x9 { aspect-ratio: 21/9; }
.wf-media--16x9 { aspect-ratio: 16/9; }
.wf-media--4x3  { aspect-ratio: 4/3; }
.wf-media--1x1  { aspect-ratio: 1/1; }
.wf-media--3x4  { aspect-ratio: 3/4; }
.wf-media--band { min-height: 92px; }

.wf-media__tag {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.45;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  max-width: 90%;
}
.wf-media__tag b { color: var(--ink); display: block; letter-spacing: 0.1em; }

/* ---------- Pinned horizontal scroller ---------------------
   Default (touch / narrow / no JS): native snap-scroll strip.
   Desktop with JS: section pins and vertical scroll drives it sideways.
   Uses position:sticky rather than wheel hijacking, so the scrollbar,
   keyboard and trackpad momentum all keep working and it releases at both ends.
------------------------------------------------------------ */

.wf-hscroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin-right: -34px;
  padding: 0 34px 14px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) var(--line-faint);
}
.wf-hscroll::-webkit-scrollbar { height: 6px; }
.wf-hscroll::-webkit-scrollbar-track { background: var(--line-faint); }
.wf-hscroll::-webkit-scrollbar-thumb { background: var(--ink-4); }

.wf-hscroll__panel {
  flex: 0 0 80%;
  scroll-snap-align: start;
  border: 1px solid var(--line-soft);
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Photo runs the full panel, edge to edge — copy is laid over it rather
   than sitting beside it in its own column. */
.wf-hscroll__media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  aspect-ratio: 4/5;
  min-height: 320px;
}
.wf-hscroll__media .wf-media__tag {
  position: absolute;
  top: 18px;
  left: 18px;
  max-width: 240px;
  text-align: left;
  z-index: 1;
}
/* Copy sits in its own card over the photo, same visual language as the
   wf-media__tag caption — white, thin border — just larger. */
.wf-hscroll__copy {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  max-width: calc(100% - 48px);
  margin: 0 24px 24px;
  padding: 26px 28px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
}
.wf-hscroll__copy > *:last-child { margin-bottom: 0; }

/* --- pinned mode (added by JS on desktop) --- */
/* The stage fills the viewport while pinned. It has to — the wrapper below it
   is taller by the scroll distance, and anything the stage doesn't cover shows
   through as empty space. Panels then stretch to fill the stage. */
.wf-pin.is-pinned .wf-pin__stage {
  position: sticky;
  top: calc(var(--bar-h) + 20px);
  height: calc(100vh - var(--bar-h) - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The strip must NOT clip: it carries the transform, and a transformed
   element drags its own clip rectangle along with it. Clipping happens on
   .wf-pin__stage above, which never moves. */
.wf-pin.is-pinned .wf-hscroll {
  overflow: visible;
  width: max-content;
  scroll-snap-type: none;
  will-change: transform;
  margin-right: 0;
  padding: 0;
  /* Cards tuck up against the top of the stage, right under the heading —
     the stage itself must stay viewport-height to cover the pinning wrapper,
     so any leftover space sits below the card instead of above it. */
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}
/* Panel is wider than the stage, so the image column runs off the right edge.
   Copy column is sized against the stage (not the panel) so it lands at a
   predictable share of the page regardless of how wide the panel gets. */
/* Floor on card height so a short panel still reads at section scale.
   Now that cards tuck to the top (not centred), this also controls how much
   space is left below the card before the scroll-progress bar — kept high
   so that gap stays tight. */
.wf-pin.is-pinned .wf-hscroll__panel {
  height: auto;
  min-height: 92%;
}
/* Photo fills whatever height the stage gives the panel — no longer
   matched against a separate copy column. */
.wf-pin.is-pinned .wf-hscroll__media {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
  height: 100%;
}
/* width:max-content makes percentage children indefinite, so the panel
   width is handed down from JS as a pixel value instead. */
.wf-pin.is-pinned .wf-hscroll__panel {
  flex: 0 0 var(--panel-w, 80%);
  width: var(--panel-w, 80%);
}
.wf-pin.is-pinned .wf-hscroll-btn { display: none; }

.wf-pin__hint {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.wf-pin.is-pinned .wf-pin__hint { display: block; }
.wf-hscroll__idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-bottom: 14px;
  padding: 20px 26px 8px;
  border-bottom: 1px solid var(--line-faint);
}

.wf-hscroll-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.wf-hscroll-track {
  flex: 1;
  height: 2px;
  background: var(--line-faint);
  position: relative;
}
.wf-hscroll-track i {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 33.333%;
  background: var(--ink);
  transition: left .25s ease;
}
.wf-hscroll-btn {
  width: 38px; height: 38px;
  border: 1.5px solid var(--line);
  background: transparent;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  color: var(--ink);
}
.wf-hscroll-btn:hover { background: var(--fill); }
.wf-hscroll-btn:disabled { border-color: var(--line-faint); color: var(--ink-4); cursor: default; background: transparent; }


/* Missing-copy marker — stays visible even with annotations off */
.wf-missing {
  border: 1px dashed var(--ink-3);
  padding: 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, #f2f2f2 7px 14px);
}
.wf-missing b { display: block; color: var(--ink); margin-bottom: 5px; letter-spacing: 0.13em; }

/* ---------- Annotations ------------------------------------ */

.anno {
  border-left: 3px solid var(--ink);
  background: var(--fill);
  padding: 11px 15px;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
.anno + .anno { margin-top: 7px; }
.anno b, .anno strong { color: var(--ink); }
.anno--gap {
  border: 1.5px solid var(--ink);
  border-left-width: 4px;
  background: #fff;
}
.anno__tag {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-right: 9px;
  vertical-align: 1px;
}
.anno__tag--open { background: #fff; color: var(--ink); border: 1px solid var(--ink); padding: 1px 6px; }
.anno ul { margin: 7px 0 0; padding-left: 17px; }
.anno li { margin-bottom: 3px; }

/* Compact single-line variant */
.anno--mini {
  border-left-width: 2px;
  padding: 7px 11px;
  font-size: 11px;
  margin-top: 10px;
}
.anno--mini .anno__tag { font-size: 9px; padding: 1px 5px; margin-right: 7px; }

body.anno-off .anno { display: none; }
/* Prevents a flash of annotations before the saved state is applied. */
html.pre-off .anno { display: none; }

/* ---------- Component blocks (nav / footer) ---------------- */


.footmock {
  border: 1px solid var(--line-soft);
  padding: 22px;
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 22px;
}
.footmock__col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-faint);
}
.footmock__col p {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 0;
}

/* ---------- Sheet index ------------------------------------ */

.idx { width: 100%; border-collapse: collapse; }
.idx th, .idx td {
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-faint);
  font-family: var(--mono);
  font-size: 12px;
  vertical-align: top;
}
.idx th {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.idx td a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.idx td a:hover { background: var(--fill); }
.idx .idx__st { color: var(--ink-2); }

/* ---------- In-page sub-nav (Approach) ----------------------- */

.wf-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 22px 0 4px;
  padding: 4px 0;
  border-top: 1px solid var(--line-faint);
  border-bottom: 1px solid var(--line-faint);
}
.wf-subnav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  padding: 10px 16px;
  border-right: 1px solid var(--line-faint);
}
.wf-subnav a:first-child { padding-left: 0; }
.wf-subnav a:last-child { border-right: 0; }
.wf-subnav a:hover { color: var(--ink); }

/* ---------- Process diagram (Approach §03) -------------------- */

.wf-diagram__track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 17px;
}
.wf-diagram__track::before {
  content: "";
  position: absolute;
  left: 17px; right: 17px; top: 50%;
  height: 1px;
  background: var(--line-soft);
  z-index: 0;
}
.wf-diagram__node {
  position: relative;
  z-index: 1;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Leadership bio lightbox (About §04) --------------- */

button.wf-box.wf-bio-card {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.wf-box.wf-bio-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.wf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.wf-lightbox[hidden] { display: none; }
.wf-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .6);
}
.wf-lightbox__panel {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  max-height: 86vh;
  overflow-y: auto;
}
.wf-lightbox__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.wf-lightbox__close:hover { background: var(--fill); }

/* ---------- Sheet footer nav -------------------------------- */

.sheetnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-top: 2px solid var(--line);
  padding: 18px 34px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.sheetnav a { color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 1px; }
.sheetnav a:hover { background: var(--fill); }
.sheetnav span { color: var(--ink-3); }

/* ---------- Responsive -------------------------------------- */

@media (max-width: 900px) {
  .wf-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wf-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footmock { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .wf-hscroll { margin-right: -20px; padding-right: 20px; }
  .wf-hscroll__panel { flex: 0 0 86%; }
  .wf-hscroll__idx { padding: 16px 18px 8px; }
  body { padding: calc(var(--bar-h) + 14px) 10px 60px; }
  .wfbar { padding: 0 12px; }
  .wfbar__brand { display: none; }
  .wfbar__url { display: none; }
  .wfbar__variants a { padding: 5px 8px; }
  .topbar__site { gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
  .topbar__nav { justify-content: flex-start; order: 3; flex-basis: 100%; }
  .topbar__cta { font-size: 10px; padding: 9px 13px; }
  .topbar__sub { position: static; border: 0; border-left: 1px solid var(--line-soft); margin-left: 11px; display: block; }
  .topbar__sub a { padding: 7px 12px; font-size: 10px; }
  .sec { grid-template-columns: 1fr; }
  .sec__gutter {
    flex-direction: row;
    justify-content: flex-start;
    border-right: 0;
    border-bottom: 1px solid var(--line-faint);
    padding: 14px 20px;
  }
  .sec__rule { flex: none; width: 40px; height: 1px; align-self: center;
    background: repeating-linear-gradient(to right, var(--line-soft) 0 3px, transparent 3px 7px); }
  .sec__body { padding: 22px 20px 30px; }
  .wf-grid--2, .wf-grid--3, .wf-grid--4 { grid-template-columns: 1fr; }
  .footmock { grid-template-columns: 1fr; }
  .sheetnav { padding: 16px 20px; }
}

/* ---------- Print ------------------------------------------- */

@media print {
  body { padding: 0; background: #fff; }
  .wfbar, .sheetnav { display: none; }
  .topbar { position: static; }
  .sheet { border: 0; box-shadow: none; max-width: none; }
  .sec { break-inside: avoid; }
  .anno { break-inside: avoid; }
}