/* ============================================================================ saibrazier.com — site styles Hand-written. No framework, no build step, no CDN. Works offline. ANTI-DRIFT RULES — these are what separate this from a generic template. If any one of them lapses, the design collapses. Do not "improve" them away. 1. Body copy is NEVER a serif. The serif is display only. 2. Nothing is centered except the footer bottom line. 3. No border-radius above 2px (logo plates are the sole exception, 8px). 4. No box-shadow anywhere. Depth comes from 1px borders and one offset frame. 5. The ONLY gradient on the site is the run2live lane rule. 6. Exactly two animations sitewide, both inside prefers-reduced-motion. 7. Display serif is always weight 400. Never bold. Bold serif at display size is what makes a site look like a 2009 blog. ========================================================================= */ /* ---------- tokens ------------------------------------------------------ */ :root { --bg: #F7F5F1; --surface: #FFFFFF; --ink: #171614; --ink-muted: #6B675F; --border: #DFDAD0; --graphite: #22262A; --graphite-ink: #F4F1EA; --quiet-bg: #F2EFE9; /* Personal accent — burgundy, drawn from the stripe in his own tie. It marks the pages that are about Sai, so they carry a colour that belongs to none of the three ventures. */ --venture: #6E2C3A; --venture-fill: #6E2C3A; --venture-2: #6E2C3A; --venture-tint: rgba(110, 44, 58, .06); --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --step--1: .875rem; /* meta. 14px, not 13 — it carries most of the page's information and 13 was below the floor. */ --step-0: 1.0625rem; --step-1: 1.3125rem; --step-2: clamp(1.5rem, 1.15rem + 1.4vw, 1.9375rem); --step-3: clamp(1.9375rem, 1.35rem + 2.4vw, 2.75rem); --step-4: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem); --gutter: clamp(20px, 5vw, 48px); --measure: 68ch; --radius: 2px; } /* SUB-BRAND LAW — one mechanism, zero exceptions. --venture-fill is the raw brand hex. It may ONLY be a <=4px rule, a <=12px swatch, a logo-plate ground, or the run2live lane. Never text, never a button, never a large panel. --venture is the darkened AA-safe variant and is the ONLY thing allowed to carry brand identity in text. Naming them this way makes the contrast-failing colour awkward to reach for by accident. These classes go on for a page, and on .idx-row for a single row. */ .v-eof { --venture: #3E5468; --venture-fill: #56708A; --venture-2: #D5CCA3; --venture-tint: rgba(86, 112, 138, .09); } .v-belingo { --venture: #14697F; --venture-fill: #6ACAE0; --venture-2: #80D0E0; --venture-tint: rgba(106, 202, 224, .12); } .v-r2l { --venture: #A34E0E; --venture-fill: #F89850; --venture-2: #FFD65C; --venture-tint: rgba(248, 152, 80, .10); } /* ---------- dark theme -------------------------------------------------- * * Three states, driven by data-theme on : * absent follow the operating system (the default) * "light" forced light, even if the OS says dark * "dark" forced dark, even if the OS says light * * The dark declarations are deliberately written TWICE — once inside the media * query for visitors following their OS, once for visitors who picked dark from * the toggle. CSS cannot share one block between a media query and an attribute * selector, and light-dark() would silently blank the whole palette on older * browsers, which is a worse failure than duplication. KEEP THE TWO IN SYNC. * ------------------------------------------------------------------------ */ :root { color-scheme: light; } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #121110; --surface: #1B1917; --ink: #EDEAE3; --ink-muted: #A29C92; /* Lifted from #2F2C28, which was 1.36:1 — invisible on a site whose entire structure is 1px rules. */ --border: #454039; --quiet-bg: #191817; --venture: #D4949B; --venture-tint: rgba(212, 148, 155, .16); } /* Tints are re-tuned for dark: the light-mode 9-12% alpha is a ~2% lift on #121110 and vanishes entirely. */ :root:not([data-theme="light"]) .v-eof { --venture: #9FB6CC; --venture-tint: rgba(159, 182, 204, .16); } :root:not([data-theme="light"]) .v-belingo { --venture: #7FD3E6; --venture-tint: rgba(127, 211, 230, .16); } :root:not([data-theme="light"]) .v-r2l { --venture: #F8A860; --venture-tint: rgba(248, 168, 96, .16); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #121110; --surface: #1B1917; --ink: #EDEAE3; --ink-muted: #A29C92; --border: #454039; --quiet-bg: #191817; --venture: #D4949B; --venture-tint: rgba(212, 148, 155, .16); } :root[data-theme="dark"] .v-eof { --venture: #9FB6CC; --venture-tint: rgba(159, 182, 204, .16); } :root[data-theme="dark"] .v-belingo { --venture: #7FD3E6; --venture-tint: rgba(127, 211, 230, .16); } :root[data-theme="dark"] .v-r2l { --venture: #F8A860; --venture-tint: rgba(248, 168, 96, .16); } /* ---------- base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } /* Every grid/flex child holding text needs this or long words force overflow. */ .grid > *, .flex > * { min-width: 0; } a { color: var(--venture); } :focus-visible { outline: 2px solid var(--venture); outline-offset: 3px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: .75rem 1rem; z-index: 100; font-family: var(--font-mono); font-size: var(--step--1); } .skip:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- typography -------------------------------------------------- */ h1, h2 { font-family: var(--font-display); font-weight: 400; /* never bold — see anti-drift rule 7 */ margin: 0; } h1 { font-size: var(--step-3); line-height: 1.15; letter-spacing: -.02em; } h2 { font-size: var(--step-2); line-height: 1.25; letter-spacing: -.01em; } h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--step-1); line-height: 1.35; margin: 0; } p { margin: 0 0 1.1em; max-width: var(--measure); } p:last-child { margin-bottom: 0; } .lede { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.4; max-width: 34ch; } .eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin: 0 0 1.5rem; padding-top: 12px; border-top: 1px solid var(--border); } .meta { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); font-variant-numeric: tabular-nums; /* dates align like a printed result sheet */ margin: 0; } .meta li { display: inline; } .meta li + li::before { content: " | "; opacity: .55; } ul.meta { list-style: none; padding: 0; } /* Letterspaced serif caps are RESERVED sitewide for the literal phrase "EYE OF FAITH", because that is how Sai already typesets it in both the logo and the poem artwork. Used nowhere else. */ .eof-caps { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .22em; font-weight: 400; } /* Unresolved facts ship as visibly unfilled fields — never as plausible invention. */ .todo { font-family: var(--font-mono); font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); border: 1px dashed var(--border); border-radius: var(--radius); padding: .1em .45em; white-space: normal; } /* ---------- layout ------------------------------------------------------ */ .wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: clamp(3rem, 7vw, 5.5rem); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3rem); } @media (max-width: 899px) { .grid { grid-template-columns: 1fr; } .grid > * { grid-column: auto !important; } } .full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); } /* ---------- header / nav ------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); } /* The venture stripe. Solid --venture-fill by default; the home page overrides it with the segmented three-venture bar. This and the footer swatches are the ONLY two places on the whole site where all three brand colours touch. */ .site-header::before { content: ""; display: block; height: 3px; background: var(--venture-fill); } body.v-home .site-header::before { background: linear-gradient(90deg, #56708A 0 33.333%, #6ACAE0 33.333% 66.666%, #F89850 66.666% 100%); } .nav-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; } .brand { font-family: var(--font-display); font-size: .9375rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); text-decoration: none; padding-block: .875rem; } /* Six links on a six-page site never needed a disclosure. A wrapping flex row removes the JS, the overlay edge cases, and the empty-accessible-name bug that a checkbox-under-an-aria-hidden-label pattern would have introduced. */ .nav-links { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0 clamp(.85rem, 2vw, 1.6rem); } .nav-links a { display: block; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); text-decoration: none; padding-block: .875rem; /* 14px + 14px + line-height => 44px target */ transition: color 100ms ease; } .nav-links a:hover { color: var(--ink); } .nav-links a[aria-current="page"] { color: var(--ink); box-shadow: 0 2px 0 var(--venture); /* --venture (text-safe), never --venture-fill */ } .nav-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0 clamp(.75rem, 2vw, 1.25rem); } /* Theme toggle. Mono uppercase like everything else in the chrome, so it reads as one more ledger label rather than a widget bolted on. It ships with the [hidden] attribute and theme.js removes it, so a visitor with JS disabled never sees a dead control — they just get their OS preference. */ .theme-toggle { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .65rem; min-height: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: color 100ms ease, border-color 100ms ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink-muted); } .theme-toggle[hidden] { display: none; } .theme-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; border: 1px solid var(--ink-muted); background: var(--ink); } /* Auto shows a half-filled dot: the site is deferring to the OS, not asserting a colour of its own. */ .theme-toggle[data-state="auto"] .theme-dot { background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50% 100%); } .theme-toggle[data-state="light"] .theme-dot { background: transparent; } @media (max-width: 560px) { .nav-inner { gap: 0; } .brand { width: 100%; padding-bottom: .35rem; } .nav-right { width: 100%; padding-bottom: .5rem; } .nav-links { width: 100%; } } /* ---------- masthead ---------------------------------------------------- */ .masthead { padding-block: clamp(2.5rem, 6vw, 6rem) clamp(3rem, 7vw, 5.5rem); } .masthead .lede { max-width: 30ch; margin-bottom: 1.25rem; } .facets { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); margin: .9rem 0 1.6rem; } .motto { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.45; border-left: 3px solid var(--venture); padding-left: 16px; margin: 0 0 1.75rem; max-width: 40ch; } .linkrow { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; } .linkrow a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--venture); padding-bottom: 2px; } .linkrow a:hover { border-bottom-width: 2px; } /* Portrait with a letterpress-style offset frame. This is the one offset element on the site (anti-drift rule 4 permits exactly this). */ /* The frame anchors to a wrapper around the image only. Anchoring it to the

would stretch it around the caption as well. */ .portrait-frame { position: relative; } .portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; /* keeps his eyeline in the upper third */ border: 1px solid var(--border); border-radius: var(--radius); } @media (min-width: 900px) { .portrait-frame::before { content: ""; position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--border); border-radius: var(--radius); z-index: -1; } } @media (max-width: 899px) { .portrait img { aspect-ratio: 3 / 2; object-position: 50% 22%; } } /* the bright field glares against #121110 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portrait img { filter: brightness(.94); } } :root[data-theme="dark"] .portrait img { filter: brightness(.94); } .caption { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 10px; } /* ---------- venture index (the home centrepiece) ------------------------ */ /* Not cards. A ledger. Cards are the failure state. */ .idx { border-bottom: 1px solid var(--border); } .idx-row { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0 1.5rem; align-items: baseline; padding: 2rem 1.25rem 2rem 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; background: transparent; transition: background-color 120ms ease; } .idx-num { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .12em; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .idx-name { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.15; letter-spacing: -.02em; display: block; } .idx-tag { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); display: block; margin: .4rem 0 .6rem; } .idx-desc { margin: 0; max-width: 46ch; } .idx-when { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .idx-row:hover, .idx-row:focus-visible { background: var(--venture-tint); /* fallback */ background: color-mix(in srgb, var(--venture-fill) 8%, transparent); box-shadow: inset 3px 0 0 var(--venture-fill); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .idx-row:hover, :root:not([data-theme="light"]) .idx-row:focus-visible { background: var(--venture-tint); background: color-mix(in srgb, var(--venture-fill) 16%, transparent); } } :root[data-theme="dark"] .idx-row:hover, :root[data-theme="dark"] .idx-row:focus-visible { background: var(--venture-tint); background: color-mix(in srgb, var(--venture-fill) 16%, transparent); } .idx-row:hover .idx-num, .idx-row:focus-visible .idx-num { color: var(--venture); } @media (max-width: 639px) { .idx-row { grid-template-columns: 1fr; padding-right: .5rem; } .idx-when { text-align: left; margin-top: .75rem; } .idx-num { margin-bottom: .35rem; } } /* ---------- bands ------------------------------------------------------- */ /* The loud band: graphite, a pull quote, an attribution. */ .band-quote { background: var(--graphite); color: var(--graphite-ink); padding-block: clamp(3.5rem, 8vw, 6rem); } .band-quote blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1.35; max-width: 24em; text-indent: -.42em; /* hanging opening quote */ } .band-quote .after { font-family: var(--font-body); font-size: var(--step-1); line-height: 1.55; max-width: 46ch; margin-top: 1.5rem; color: #D6D2C9; } .band-quote .attrib { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: #A8A399; margin-top: 2rem; } /* THE QUIET BAND — one section per page where the system deliberately stops. No accent colour, no mono, no motion, longer leading. The site proving it can stop is a better argument than anything in its own thesis, and it gives faith a room of its own inside a dossier. Do not add a rule, a label, or a caption to this. That is the entire point. */ .band-quiet { background: var(--quiet-bg); padding-block: clamp(4rem, 9vw, 7rem); } .band-quiet p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.75; max-width: 30ch; margin: 0; } /* ---------- ledgers, plates, cards -------------------------------------- */ .ledger { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); } .ledger li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1.25rem; align-items: baseline; border-top: 1px solid var(--border); padding-block: 20px; } .ledger .n { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .12em; color: var(--venture); font-variant-numeric: tabular-nums; } .ledger .t { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; } .roles { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); } .roles > li { border-top: 1px solid var(--border); padding-block: 1.75rem; } .roles h3 { margin-bottom: .35rem; } .roles .meta { margin-bottom: .9rem; } .roles ul { margin: .75rem 0 0; padding-left: 1.1rem; } .roles ul li { margin-bottom: .35rem; max-width: var(--measure); } /* Logo plates. Each mark sits on its own correct ground so no supplied asset is ever recoloured or knocked out. 8px radius is the sole exception to anti-drift rule 3. */ .plate { border: 1px solid var(--border); border-radius: 8px; padding: 32px; display: grid; place-items: center; } .plate img { width: 100%; } .plate--belingo { background: #FFFFFF; } .plate--belingo img { max-width: 480px; } /* HARD CAP — source is only 1135px */ .plate--eof { background: #D5CCA3; } .plate--eof img { max-width: 300px; border-radius: var(--radius); } /* Matches the black ground baked into the supplied run2live PNG, so the mark sits seamlessly instead of reading as a box inside a box. */ .plate--r2l { background: #000000; } .plate--r2l img { max-width: 320px; } /* HARD CAP — source is only 480px */ /* The studio headshot is a subject cut out on pure white WITH A BAKED SOFT DROP SHADOW. That shadow is why this is a plain white card and not a mix-blend-mode:multiply plate — multiplying would smear the shadow into a grey bruise on the plate. A white ground matches the photo's own background seamlessly, so the card edge is the only edge you see. The card stays light in dark mode ON PURPOSE (it reads as a photographic print); brightness() dims card and photo together so the seam is preserved. Its caption colours are HARD-CODED for the same reason — --ink-muted and --border would resolve to 2.37:1 and 1.05:1 against this fixed white. */ .print { background: #FFFFFF; border: 1px solid #E2DCD1; border-radius: var(--radius); padding: 0; overflow: hidden; } .print img { width: 100%; } .print .cap { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: #57534B; border-top: 1px solid #DDD6CA; padding: 8px 14px 10px; margin: 0; } /* The plate stays light in both themes on purpose — it reads as a photographic print. brightness() dims card and photo together so the seam is preserved. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .print { filter: brightness(.9); border-color: #C9C2B6; } } :root[data-theme="dark"] .print { filter: brightness(.9); border-color: #C9C2B6; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .cards li { background: var(--venture-tint); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; } .cards h3 { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--venture); margin-bottom: .6rem; } .cards p { font-size: var(--step-0); } /* ---------- the poem ---------------------------------------------------- */ /* Panel ground is #4A6076, NOT the brand slate #56708A. Cream #F8E8A8 on brand slate is 4.19:1 and fails AA at this size; the deepened slate is 5.30:1. The brand slate remains correct as a fill elsewhere. */ .poem-panel { background: #4A6076; color: #F8E8A8; box-shadow: inset 0 0 0 8px #D5CCA3; /* the sole inset; decorative frame */ padding: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3.5rem); border-radius: var(--radius); } .poem-panel h2 { color: #F8E8A8; margin-bottom: 2.25rem; } /* THE TURN. Stanzas 1-7 each execute the same hinge: name your own affliction, then relieve that same affliction in another. So half A sits at the margin, a short sand rule divides, and half B is indented. Stanza 8 alone turns inward and is set full measure with no rule and no indent. Single column by design — two columns at any breakpoint that fits gives ~340px measures, and his longest lines then wrap mid-line, which visibly rewrites the poem. */ .poem { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.85; max-width: 62ch; } .poem .stanza { margin-bottom: 2.5rem; } .poem p { margin: 0; max-width: none; } /* Each verse line is its own block, so every line starts at the same left edge and only a line too long for the column hangs. Doing this with
instead would indent every line after the first, which is the opposite of the intent. */ .poem .line { display: block; text-indent: -1.25em; padding-left: 1.25em; } .poem .half-b { margin-left: 2.5rem; margin-top: 1.1rem; padding-top: 1.1rem; position: relative; } .poem .half-b::before { /* the hinge: a short sand rule sitting in the gap */ content: ""; position: absolute; top: 0; left: -2.5rem; width: 24px; height: 1px; background: #D5CCA3; } .poem .stanza--turn { margin-top: 3.25rem; } .poem .sig { font-style: italic; text-align: right; margin-top: 2.5rem; color: #E4D9A4; } @media (max-width: 520px) { .poem .half-b { margin-left: 1.25rem; } .poem .half-b::before { left: -1.25rem; width: 14px; } } /* ---------- run2live ---------------------------------------------------- */ /* The lane rule. Echoes the road/track stroke that runs off both edges of the wordmark. This is the ONLY gradient on the site. It hangs off the section label rather than every h2, so it appears exactly once per section instead of under every heading on the page. */ body.v-r2l main .eyebrow::after { content: ""; display: block; height: 4px; width: 120px; margin-top: 12px; background: linear-gradient(90deg, #F89850, #FFD65C); } /* The wordmark is lowercase. Quoting it, never title-casing it. */ .lowercase { text-transform: lowercase; } /* ---------- contact ----------------------------------------------------- */ .contact-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); } .contact-list li { border-top: 1px solid var(--border); padding-block: 1.5rem; display: grid; grid-template-columns: 8rem 1fr; gap: 0 1.5rem; align-items: baseline; } .contact-list dt, .contact-list .k { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); } .contact-list .v { font-family: var(--font-display); font-size: var(--step-1); } .contact-list .v a { text-decoration: none; border-bottom: 1px solid var(--venture); } @media (max-width: 559px) { .contact-list li { grid-template-columns: 1fr; gap: .4rem; } } /* ---------- cross-index ------------------------------------------------- */ .cross { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 2rem; border-bottom: 1px solid var(--border); } .cross a { display: block; padding: 1.5rem 0; border-top: 1px solid var(--border); text-decoration: none; color: inherit; } .cross .n { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .12em; color: var(--ink-muted); } .cross .name { font-family: var(--font-display); font-size: var(--step-2); display: block; margin-top: .3rem; } .cross a:hover .name { color: var(--venture); } /* ---------- footer ------------------------------------------------------ */ .site-footer { border-top: 1px solid var(--border); padding-block: 4rem 2.5rem; margin-top: clamp(3rem, 7vw, 5rem); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.5rem; } .footer-grid h2 { font-family: var(--font-display); font-size: var(--step-1); letter-spacing: 0; margin-bottom: .35rem; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: .5rem; } .footer-grid a { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; } .footer-grid a:hover { color: var(--ink); } /* The second and final place on the site where the three brand colours meet. 10px each. */ .swatch { width: 10px; height: 10px; flex: none; border-radius: 1px; display: inline-block; } .sw-eof { background: #56708A; } .sw-belingo { background: #6ACAE0; } .sw-r2l { background: #F89850; } .colophon { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); text-align: center; /* the one centered thing on the site */ border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.75rem; } /* ---------- motion ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }