/* Consolidated site stylesheet — shared rules global; page-specific rules scoped under body.. */ @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap'); /* ===================== shared ===================== */ :root { --paper: #e6ddcf; /* warm fluorescent greige — the wall */ --paper-2: #ded3c2; /* panel / document stock */ --paper-3: #d3c7b3; /* recessed field */ --ink: #221d18; /* warm charcoal */ --ink-soft: #5a5147; /* secondary text */ --taupe: #8a7d6b; /* the suit */ --mauve: #b6a3a0; /* the chairs — dusty rose-grey */ --burgundy: #6e2a33; /* corporate maroon — the action color */ --line: rgba(34,29,24,.22); --line-2: rgba(34,29,24,.40); --rec: #a8313a; } /* ===================== plain-language register (see PLAIN-LANGUAGE.md) ===================== Camp is default; html.pf-plain-on (set pre-paint by an inline setter, toggled by pf-register.js) flips to the plain register. Twin blocks carry .pf-camp / .pf-plain and swap by DISPLAY here — no JS runs the swap, so it can't flash or fail. Leaf text/attributes use data-plain-* and are swapped by pf-register.js instead. We force-hide ONLY the inactive twin (scoped by mode, with !important so it beats any component `display:` a twin's own class sets, e.g. .kicker{display:flex}). The ACTIVE twin is never touched by these rules, so it keeps its natural component display and layout. The hidden twin is display:none, so screen readers read only the active register. */ html:not(.pf-plain-on) .pf-plain { display: none !important; } html.pf-plain-on .pf-camp { display: none !important; } /* The toggle control — a segmented switch (the naive visitor's escape hatch). Both registers show side-by-side; a burgundy thumb slides to the live one. Built by pf-register.js as .pf-reg-toggle > .pf-reg-thumb + two .pf-reg-seg buttons; the .is-plain class (on the group) drives the thumb position. */ .pf-reg-toggle { position: relative; isolation: isolate; display: inline-flex; align-items: stretch; padding: 3px; background: color-mix(in srgb, var(--paper) 60%, transparent); border: 1px solid var(--line-2); border-radius: 3px; font-family: "Space Mono", monospace; } .pf-reg-toggle:hover { border-color: var(--burgundy); } /* the sliding thumb: covers exactly one segment (each seg = 50% of the inner width, i.e. 50% of the group minus the 3px padding), slides right when plain */ .pf-reg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--burgundy); border-radius: 2px; box-shadow: 0 1px 6px -2px rgba(110,42,51,.7); transition: transform .22s ease; } .pf-reg-toggle.is-plain .pf-reg-thumb { transform: translateX(100%); } /* the two segments */ .pf-reg-seg { position: relative; z-index: 1; flex: 1 1 0; min-height: 34px; padding: 7px 13px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); transition: color .2s; } .pf-reg-seg[aria-pressed="false"]:hover { color: var(--burgundy); } .pf-reg-seg[aria-pressed="true"] { color: var(--paper); } .pf-reg-seg:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; border-radius: 2px; } /* Fallback placement when a page exposes no [data-register-toggle] and has no .docband. */ .pf-reg-fixed { position: fixed; right: clamp(10px, 2vw, 20px); bottom: clamp(10px, 2vw, 20px); z-index: 20; background: var(--paper); box-shadow: 0 6px 22px -12px rgba(34,29,24,.8); } @media (min-width: 380px) { .pf-reg-seg { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .pf-reg-thumb, .pf-reg-seg { transition: none; } } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } body { background: var(--paper); color: var(--ink); font-family: "Archivo", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; position: relative; padding: clamp(14px, 2.4vw, 30px); min-height: 100vh; } .room { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 75% at 50% -10%, rgba(255,252,244,.55), transparent 55%), radial-gradient(140% 90% at 50% 120%, rgba(40,33,28,.20), transparent 60%); animation: flicker 7s steps(1) infinite; } @keyframes flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: .82; } 98% { opacity: .97; } 99% { opacity: .88; } } .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .10; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .scan { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(34,29,24,1) 2px 3px); } .sheet { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2) 88%, #000 12%) 220%); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 30px 80px -50px rgba(34,29,24,.8); padding: clamp(20px, 3vw, 40px); } .sheet::before, .sheet::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; } .sheet::before { top: 8px; left: 8px; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); } .sheet::after { bottom: 8px; right: 8px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); } .masthead { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .org { display: flex; align-items: baseline; gap: 12px; } .org .mark { font-family: "Bodoni Moda", serif; font-weight: 900; font-size: clamp(15px, 1.7vw, 19px); letter-spacing: .02em; } .org .div { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); } .docmeta { display: flex; align-items: center; gap: 16px; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } .conf { color: var(--burgundy); font-weight: 700; } .rec { display: inline-flex; align-items: center; gap: 7px; } .rec .led { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 8px var(--rec); animation: blink 1.5s steps(1) infinite; } @keyframes blink { 50% { opacity: .15; } } .kicker { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 12px; } .kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); } h1 .b { display: block; font-style: normal; font-weight: 400; margin-left: 0; color: var(--burgundy); } .sub { font-family: "Space Mono", monospace; font-size: clamp(11px, 1.1vw, 13px); text-transform: uppercase; color: var(--ink-soft); letter-spacing: .22em; line-height: 1.55; } .lede { max-width: 46ch; font-size: clamp(14px, 1.35vw, 16px); line-height: 1.7; color: var(--ink); } .lede b { font-weight: 700; } .form-head .no { color: var(--ink-soft); } form { display: flex; flex-direction: column; } .field:focus-within { border-bottom-color: var(--burgundy); } .note { margin-top: 14px; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); min-height: 1.3em; line-height: 1.5; } .note.ok { color: var(--burgundy); } .note.err { color: #9a2a22; } .colophon { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border-top: 2px solid var(--ink); padding-top: 12px; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); } .colophon a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: .2s; } .colophon a:hover { color: var(--burgundy); border-bottom-color: var(--burgundy); } .colophon .mid { display: flex; gap: 18px; } @media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; } } /* ===================== body.home ===================== */ body.home .grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3.4vw, 56px); align-items: stretch; padding: clamp(26px, 3.6vw, 52px) 0 clamp(20px, 2.4vw, 34px); } body.home h1 { font-family: "Black Ops One", system-ui, sans-serif; font-weight: 400; line-height: .92; letter-spacing: .005em; text-transform: uppercase; font-size: clamp(46px, 8.4vw, 104px); margin: clamp(16px, 2vw, 26px) 0 6px; } body.home h1 .a { display: block; } body.home .rule { height: 1px; background: var(--line); margin: clamp(20px, 2.4vw, 30px) 0; } body.home .lede + .lede { margin-top: 14px; color: var(--ink-soft); font-size: 13px; } body.home .book-cta { margin-top: 20px; font-size: 14px; color: var(--ink); } body.home .book-cta a { color: var(--burgundy); text-decoration: none; font-weight: 600; border-bottom: 1px solid color-mix(in srgb, var(--burgundy) 40%, transparent); transition: border-color .2s; } body.home .book-cta a:hover { border-bottom-color: var(--burgundy); } body.home .signup { margin-top: clamp(24px, 3vw, 36px); max-width: 480px; } body.home .form-head { display: flex; justify-content: space-between; align-items: baseline; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; margin-bottom: 6px; } body.home .field { position: relative; padding: 16px 2px 7px; border-bottom: 1px solid var(--line); } body.home .field label { position: absolute; top: 3px; left: 2px; font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } body.home .field input { width: 100%; background: transparent; border: 0; color: var(--ink); font-family: "Archivo", sans-serif; font-size: 16px; padding: 2px 0; letter-spacing: .01em; } body.home .field input::placeholder { color: color-mix(in srgb, var(--ink-soft) 55%, transparent); } body.home .field input:focus { outline: none; } body.home .field:focus-within label { color: var(--burgundy); } body.home button { font-family: "Space Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper); background: var(--burgundy); border: 0; cursor: pointer; padding: 16px 20px; margin-top: 18px; align-self: flex-start; transition: background .2s, transform .12s, letter-spacing .2s; } body.home button:hover { background: var(--ink); letter-spacing: .3em; } body.home button:active { transform: translateY(1px); } body.home .media { position: relative; align-self: stretch; min-height: 320px; border: 1px solid var(--line-2); background: #0c0a09; overflow: hidden; } body.home .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.home .media .base { filter: saturate(.8) contrast(1.05) brightness(.97); animation: chroma-pump__home 6s ease-in-out infinite; } body.home .media .ghost { mix-blend-mode: screen; opacity: .9; } body.home .media .ghost.r { filter: url(#ch-r); animation: split-r__home 5.5s steps(60) infinite; } body.home .media .ghost.c { filter: url(#ch-c); animation: split-c__home 5.5s steps(60) infinite; } @keyframes split-r__home { 0%,82%,100% { transform: translateX(-1.5px); } 84% { transform: translateX(-7px); } 88% { transform: translateX(-3px); } 92% { transform: translateX(-9px); } } @keyframes split-c__home { 0%,82%,100% { transform: translateX(1.5px); } 84% { transform: translateX(6px); } 88% { transform: translateX(2px); } 92% { transform: translateX(8px); } } @keyframes chroma-pump__home { 0%,100% { filter: saturate(.8) contrast(1.05) brightness(.97); } 50% { filter: saturate(.92) contrast(1.08) brightness(1); } } body.home .media .lines { position: absolute; inset: 0; pointer-events: none; opacity: .25; z-index: 3; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.6) 2px 4px); } body.home .media .track { position: absolute; left: 0; right: 0; height: 30px; pointer-events: none; z-index: 4; background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,0) 60%); box-shadow: 0 -1px 0 rgba(255,255,255,.5), 0 1px 8px rgba(0,0,0,.5); mix-blend-mode: screen; animation: roll__home 7s linear infinite; } @keyframes roll__home { 0% { top: -12%; } 100% { top: 112%; } } body.home .media .noise { position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; mix-blend-mode: screen; animation: snow__home 5.5s steps(1) infinite; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); } @keyframes snow__home { 0%,83%,100% { opacity: 0; } 84% { opacity: .35; } 85% { opacity: 0; } 91% { opacity: .28; } 92% { opacity: 0; } } body.home .media::after { content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 14px; z-index: 5; pointer-events: none; background: rgba(255,255,255,.06); mix-blend-mode: screen; transform: translateX(0); animation: tear__home 5.5s steps(1) infinite; } @keyframes tear__home { 0%,85%,100% { opacity: 0; transform: translateX(0); } 86% { opacity: 1; transform: translateX(10px); } 88% { opacity: 1; transform: translateX(-8px); } 90% { opacity: 0; } } body.home .osd { position: absolute; z-index: 6; font-family: "Space Mono", monospace; color: #f2ede2; font-size: 11px; letter-spacing: .18em; text-shadow: -1px 0 rgba(255,40,60,.7), 1px 0 rgba(40,200,255,.7), 0 1px 2px rgba(0,0,0,.9); } body.home .osd.tl { top: 12px; left: 13px; display: flex; align-items: center; gap: 7px; } body.home .osd.tl .led { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 8px var(--rec); animation: blink 1.5s steps(1) infinite; } body.home .osd.tr { top: 12px; right: 13px; } body.home .osd.bl { bottom: 12px; left: 13px; } body.home .osd.br { bottom: 12px; right: 13px; opacity: .85; } body.home .caption { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; text-align: right; } body.home .stamp { position: absolute; z-index: 4; top: clamp(150px, 24vw, 250px); right: clamp(-6px, 2vw, 34px); transform: rotate(-13deg); pointer-events: none; color: var(--burgundy); border: 3px double var(--burgundy); border-radius: 4px; padding: 7px 16px; font-family: "Space Mono", monospace; font-weight: 700; font-size: clamp(15px, 2.1vw, 26px); letter-spacing: .16em; text-transform: uppercase; opacity: .42; mix-blend-mode: multiply; } @media (max-width: 820px) { body.home .grid { grid-template-columns: 1fr; gap: 30px; } body.home .media { min-height: 56vw; order: -1; } body.home .stamp { top: auto; bottom: 26%; right: 8%; } body.home .docmeta { gap: 12px; } } @media (max-width: 480px) { body.home .docmeta .docno { display: none; } body.home button { align-self: stretch; text-align: center; } } /* ===================== body.book ===================== */ body.book .grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(24px, 3.4vw, 56px); align-items: start; padding: clamp(26px, 3.6vw, 48px) 0 clamp(20px, 2.4vw, 30px); } body.book h1 { font-family: "Black Ops One", system-ui, sans-serif; font-weight: 400; line-height: .95; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(38px, 5.8vw, 78px); margin: clamp(14px, 1.8vw, 22px) 0 6px; } body.book .rule { height: 1px; background: var(--line); margin: clamp(18px, 2.2vw, 26px) 0; } body.book .procedure { margin-top: clamp(20px, 2.6vw, 30px); list-style: none; display: flex; flex-direction: column; gap: 14px; } body.book .procedure li { display: flex; gap: 13px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } body.book .procedure .n { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-2); font-family: "Space Mono", monospace; font-size: 12px; color: var(--burgundy); } body.book .procedure b { color: var(--ink); font-weight: 700; } body.book .form-head { display: flex; justify-content: space-between; align-items: baseline; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; margin-bottom: 4px; } body.book .two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } body.book .field { position: relative; padding: 17px 2px 7px; border-bottom: 1px solid var(--line); } body.book .field > label { position: absolute; top: 3px; left: 2px; font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } body.book .field .opt { color: var(--taupe); letter-spacing: .12em; } body.book .field input, body.book .field textarea { width: 100%; background: transparent; border: 0; color: var(--ink); font-family: "Archivo", sans-serif; font-size: 16px; padding: 2px 0; letter-spacing: .01em; resize: vertical; } body.book .field textarea { min-height: 116px; line-height: 1.6; } body.book .field input::placeholder, body.book .field textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 55%, transparent); } body.book .field input:focus, body.book .field textarea:focus { outline: none; } body.book .field:focus-within > label { color: var(--burgundy); } body.book .field input[type="datetime-local"] { color-scheme: light; } body.book .dropzone { display: block; margin-top: 16px; border: 1px dashed var(--line-2); background: rgba(255,255,255,.14); padding: 16px; cursor: pointer; text-align: center; transition: border-color .2s, background .2s; } body.book .dropzone.drag { border-color: var(--burgundy); background: rgba(110,42,51,.07); } body.book .dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } body.book .dz-cue { display: block; font-size: 13px; color: var(--ink); } body.book .dz-cue b { color: var(--burgundy); } body.book .dz-meta { display: block; margin-top: 4px; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); } body.book .filelist { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } body.book .filelist li { display: flex; align-items: center; gap: 10px; font-size: 13px; } body.book .filelist .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.book .filelist .st { font-family: "Space Mono", monospace; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); } body.book .filelist .st.ok { color: var(--burgundy); } body.book .filelist .st.err { color: #9a2a22; } body.book .filelist .rm { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: 14px; padding: 0 4px; margin: 0; letter-spacing: 0; } body.book .filelist .rm:hover { color: var(--burgundy); background: none; } body.book button.submit { font-family: "Space Mono", monospace; font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper); background: var(--burgundy); border: 0; cursor: pointer; padding: 16px 20px; margin-top: 20px; align-self: flex-start; transition: background .2s, transform .12s, letter-spacing .2s; } body.book button.submit:hover { background: var(--ink); letter-spacing: .3em; } body.book button.submit:active { transform: translateY(1px); } body.book button.submit:disabled { opacity: .5; cursor: not-allowed; } body.book .gate { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } body.book .schedule { display: none; padding: clamp(20px, 3vw, 40px) 0 clamp(8px, 1.4vw, 16px); } body.book .schedule.show { display: block; animation: rise__book .5s ease both; } body.book .grid.hide { display: none; } body.book .sched-head { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 9px; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } body.book .sched-head .ok { color: var(--burgundy); font-weight: 700; } body.book .sched-intro { max-width: 60ch; font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin: 14px 0 6px; } body.book .sched-intro b { color: var(--ink); font-weight: 700; } body.book #cal-embed { width: 100%; min-height: 660px; margin-top: 14px; overflow: auto; border: 1px solid var(--line-2); background: rgba(255,255,255,.18); } body.book .skip { display: inline-block; margin-top: 16px; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; } body.book .skip:hover { color: var(--burgundy); border-bottom-color: var(--burgundy); } @keyframes rise__book { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (max-width: 860px) { body.book .grid { grid-template-columns: 1fr; gap: 30px; } body.book .col-text { order: -1; } } @media (max-width: 480px) { body.book .two { grid-template-columns: 1fr; } body.book .docmeta .docno { display: none; } body.book button.submit { align-self: stretch; text-align: center; } } /* ===================== body.legal ===================== */ /* Long-form compliance prose — the corporate-memo register, single readable column. Privacy Policy + Accessibility Statement live on one page. */ body.legal .doc { max-width: 50rem; margin: 0 auto; padding: clamp(20px, 3vw, 36px) 0 0; } body.legal .doc-head { padding-bottom: clamp(18px, 2.4vw, 28px); } body.legal h1 { font-family: "Black Ops One", system-ui, sans-serif; font-weight: 400; line-height: .95; letter-spacing: .01em; text-transform: uppercase; font-size: clamp(36px, 5.4vw, 70px); margin: clamp(12px, 1.6vw, 20px) 0 12px; } body.legal h1 .a { display: block; } body.legal .docmeta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } body.legal .docmeta-line .dot { color: var(--line-2); } /* table of contents */ body.legal .toc { border: 1px solid var(--line-2); background: rgba(255,255,255,.14); padding: clamp(16px, 2vw, 22px); margin: 0 0 clamp(30px, 4vw, 46px); } body.legal .toc-head { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 8px; margin-bottom: 12px; } body.legal .toc-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 28px; } body.legal .toc-list a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink-soft); font-size: 13.5px; line-height: 1.35; transition: color .2s; } body.legal .toc-list a:hover { color: var(--burgundy); } body.legal .toc-list .t-no { flex: none; min-width: 1.4em; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .12em; color: var(--burgundy); } /* document sections */ body.legal .document { } body.legal .doc-title { font-family: "Bodoni Moda", serif; font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.01em; padding-bottom: 10px; border-bottom: 2px solid var(--ink); margin-bottom: clamp(18px, 2.4vw, 26px); } body.legal .lede { max-width: none; font-family: "Bodoni Moda", serif; font-style: italic; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--ink); margin-bottom: 16px; } body.legal .sec { display: flex; align-items: baseline; gap: 14px; font-family: "Bodoni Moda", serif; font-weight: 700; font-size: clamp(18px, 2.1vw, 23px); letter-spacing: -.005em; color: var(--ink); margin: clamp(30px, 3.6vw, 44px) 0 14px; padding-top: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--line); scroll-margin-top: 18px; } body.legal .sec .s-no { flex: none; font-family: "Space Mono", monospace; font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--burgundy); transform: translateY(-.1em); } body.legal .lead { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--burgundy); margin: 20px 0 6px; } body.legal .document p { font-size: clamp(14px, 1.3vw, 15.5px); line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; } body.legal .document p.lede, body.legal .document p.lead { color: inherit; } body.legal .document ul { list-style: none; margin: 0 0 16px; display: flex; flex-direction: column; gap: 9px; } body.legal .document ul li { position: relative; padding-left: 22px; font-size: clamp(14px, 1.3vw, 15.5px); line-height: 1.65; color: var(--ink-soft); } body.legal .document ul li::before { content: "▸"; position: absolute; left: 2px; top: 0; color: var(--burgundy); font-size: 11px; } body.legal .document ul li b { color: var(--ink); font-weight: 700; } body.legal .document a { color: var(--burgundy); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--burgundy) 40%, transparent); transition: border-color .2s; } body.legal .document a:hover { border-bottom-color: var(--burgundy); } /* entity / contact block */ body.legal .contact { font-style: normal; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--burgundy); padding: 4px 0 4px 16px; margin-top: 6px; } body.legal .contact .ent { font-family: "Bodoni Moda", serif; font-weight: 700; font-size: 17px; color: var(--ink); } /* divider between the two documents */ body.legal .docbreak { height: 1px; background: var(--line-2); margin: clamp(44px, 6vw, 72px) 0; position: relative; } body.legal .docbreak::after { content: "§"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--paper-2); padding: 0 14px; color: var(--burgundy); font-family: "Bodoni Moda", serif; font-size: 18px; } body.legal .topcue { margin-top: clamp(34px, 4.4vw, 54px); text-align: right; } body.legal .topcue a { font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: .2s; } body.legal .topcue a:hover { color: var(--burgundy); border-bottom-color: var(--burgundy); } @media (max-width: 560px) { body.legal .toc-list { grid-template-columns: 1fr; } }