/* ========================================================================== Site styles Colours are defined once here; each section page picks its accent via . ========================================================================== */ /* ---------- Fonts ---------- Self-hosted (no requests to Google, see privacy.html). Inter and Newsreader are licensed under the SIL Open Font License, see assets/fonts/LICENSE-*.txt. Browsers only download the "latin-ext" files when a page uses those characters (e.g. ā, č, ē, š, ž). */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-normal.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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-italic.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: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/inter-latin-ext-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-normal.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: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-ext-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-italic.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: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url(fonts/newsreader-latin-ext-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { --bg: #f6f5f1; --surface: #ffffff; --text: #1b1b19; --muted: #66655f; --line: #e0ded6; --placeholder: #ebe9e2; /* Section colours. "-ink" is used for small text such as links, "on-" for text placed on top of the colour (the whitepaper button). */ --defense: #bca471; --defense-ink: #806c3e; --on-defense: #1b1b19; --agriculture: #19300d; --agriculture-ink: #19300d; --on-agriculture: #ffffff; --philosophy: #9d2235; --philosophy-ink: #9d2235; --on-philosophy: #ffffff; --accent: var(--text); --accent-ink: var(--text); --on-accent: var(--bg); --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, Consolas, monospace; --wrap: 1080px; --radius: 10px; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #131312; --surface: #1b1b19; --text: #ebe9e3; --muted: #9d9b93; --line: #2e2d2a; --placeholder: #222220; /* Lighter shades of the same hues, so they stay visible on the dark background. */ --defense: #bca471; --defense-ink: #bca471; --on-defense: #131312; --agriculture: #92c577; --agriculture-ink: #92c577; --on-agriculture: #131312; --philosophy: #d67180; --philosophy-ink: #d67180; --on-philosophy: #131312; } } body[data-page="defense"] { --accent: var(--defense); --accent-ink: var(--defense-ink); --on-accent: var(--on-defense); } body[data-page="precision-agriculture"] { --accent: var(--agriculture); --accent-ink: var(--agriculture-ink); --on-accent: var(--on-agriculture); } body[data-page="philosophy"] { --accent: var(--philosophy); --accent-ink: var(--philosophy-ink); --on-accent: var(--on-philosophy); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; } main { flex: 1; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); } h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .eyebrow { margin: 0 0 18px; font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .lede { margin: 0 0 16px; max-width: 62ch; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.6; } .notice { color: var(--muted); padding: 32px 0; margin: 0; } /* ---------- Header & footer ---------- */ .site-header { border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-top: 22px; padding-bottom: 22px; } .brand { font: 500 1.25rem/1.2 var(--serif); text-decoration: none; letter-spacing: -0.01em; } .site-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: .92rem; } .site-nav a { padding: 4px 0; color: var(--muted); text-decoration: none; border-bottom: 1.5px solid transparent; transition: color .2s, border-color .2s; } .site-nav a:hover { color: var(--text); } .site-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); } .site-footer { border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); } .site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 28px; padding-bottom: 28px; } .site-footer a { color: var(--muted); } .site-footer a:hover { color: var(--text); } /* ---------- Landing page ---------- */ .hero { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; gap: 40px 64px; padding: clamp(56px, 10vw, 120px) 0 clamp(40px, 7vw, 80px); } .hero-text { max-width: 760px; } .portrait { margin: 0; } .portrait img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--placeholder); } .portrait.is-missing img { display: none; } .portrait.is-missing::after { content: "[portrait image not found]"; display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 16px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: var(--radius); background: var(--placeholder); font-size: .85rem; color: var(--muted); text-align: center; } @media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .portrait { width: min(200px, 55%); } } .hero h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); margin-bottom: 28px; } .hero p:not(.eyebrow):not(.lede) { max-width: 62ch; color: var(--muted); } .section-list { list-style: none; margin: 0 0 96px; padding: 0; border-top: 1px solid var(--line); } .section-list li { border-bottom: 1px solid var(--line); } .section-link { display: grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 8px 24px; padding: 32px 0; text-decoration: none; } .section-link .num { font-size: .82rem; color: var(--c); font-variant-numeric: tabular-nums; } .section-link h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); transition: color .2s; } .section-link .arrow { font-size: 1.4rem; color: var(--muted); transition: transform .2s, color .2s; } .section-link p { grid-column: 2; margin: 0; max-width: 60ch; color: var(--muted); } .section-link:hover h2, .section-link:hover .arrow { color: var(--c); } .section-link:hover .arrow { transform: translateX(4px); } /* ---------- Section page header ---------- */ .page-head { max-width: 760px; padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); } .page-head .eyebrow { color: var(--accent); } .page-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 20px; } /* The motto under each section title: italic and semi-transparent, so it reads grey on both the light and the dark background. */ :is([data-page="defense"], [data-page="precision-agriculture"], [data-page="philosophy"]) .page-head .lede { font-style: italic; color: color-mix(in srgb, var(--text) 55%, transparent); } /* ---------- Projects (Defense / Precision Agriculture) ---------- */ .projects { margin-bottom: 96px; border-top: 1px solid var(--line); } .project { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; padding: 56px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; } .project-media { display: flex; flex-direction: column; gap: 10px; } .media-main { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--placeholder); } .media-main img { width: 100%; } .media-main.is-broken { pointer-events: none; } .media-main.is-broken img { display: none; } .media-main.is-broken::after { content: attr(data-missing); display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 16px; font-size: .85rem; color: var(--muted); text-align: center; word-break: break-all; } .media-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .media-thumbs button { aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--placeholder); cursor: pointer; opacity: .65; transition: opacity .2s; } .media-thumbs button:hover, .media-thumbs button[aria-pressed="true"] { opacity: 1; } .media-thumbs button[aria-pressed="true"] { border-color: var(--accent); } .media-thumbs img { width: 100%; height: 100%; object-fit: cover; } .img-placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 16px; border: 1px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: var(--radius); background: var(--placeholder); font-size: .9rem; color: var(--muted); text-align: center; } .project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .8rem; color: var(--muted); } .tag { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; } .project h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 10px; } .project-summary { margin: 0 0 20px; font-size: 1.08rem; color: var(--muted); } .btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 22px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .92rem; font-weight: 500; text-decoration: none; transition: opacity .15s; } .btn:hover { opacity: .85; } .btn.is-missing { border: 1px dashed color-mix(in srgb, var(--muted) 60%, transparent); background: transparent; color: var(--muted); cursor: default; } .btn.is-missing:hover { opacity: 1; } @media (min-width: 801px) { .project-media { position: sticky; top: 24px; align-self: start; } } @media (max-width: 800px) { .project { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; } } /* ---------- Prose (descriptions & essays) ---------- */ .prose { max-width: 68ch; } .prose > :first-child { margin-top: 0; } .prose p { margin: 0 0 1em; } .prose a { color: var(--accent-ink); text-underline-offset: 3px; } .prose h2 { font-size: 1.6rem; margin: 1.8em 0 .6em; } .prose h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; } .prose h4 { font-size: 1.1rem; margin: 1.4em 0 .4em; } .prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; } .prose li { margin-bottom: .35em; } .prose blockquote { margin: 1.5em 0; padding: 0 0 0 20px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; } .prose blockquote p:last-child { margin-bottom: 0; } .prose code { padding: .1em .35em; border-radius: 4px; background: var(--placeholder); font: .88em var(--mono); } .prose pre { overflow-x: auto; padding: 16px; border-radius: 8px; background: var(--placeholder); line-height: 1.5; } .prose pre code { padding: 0; background: none; } .prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); } .prose img { border-radius: 8px; } .prose figure { margin: 2em 0; } .prose figure img { border: 1px solid var(--line); } .prose figcaption { margin-top: .6em; font: .85rem/1.5 var(--sans); color: var(--muted); } .legal { padding-bottom: 96px; } .legal h2 { font-size: 1.35rem; } /* ---------- Philosophy ---------- */ .essay-list { list-style: none; max-width: 820px; margin: 0 0 96px; padding: 0; border-top: 1px solid var(--line); } .essay-list li { border-bottom: 1px solid var(--line); } .essay-list a { display: block; padding: 28px 0; text-decoration: none; } .essay-list time { font-size: .8rem; letter-spacing: .04em; color: var(--muted); } .essay-list h2 { margin: 6px 0 8px; font-size: clamp(1.5rem, 3vw, 1.9rem); transition: color .2s; } .essay-list p { margin: 0; max-width: 62ch; color: var(--muted); } .essay-list a:hover h2 { color: var(--accent); } .essay { max-width: 700px; padding: clamp(32px, 6vw, 64px) 0 96px; } .essay-head { margin: 36px 0 44px; } .essay-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); margin-bottom: 18px; } .essay-head .eyebrow { color: var(--accent); } .essay-head .lede { color: var(--muted); } .essay-body { font-family: var(--serif); font-size: 1.22rem; line-height: 1.7; } .essay-foot { margin: 48px 0 0; } .back { font-size: .88rem; color: var(--muted); text-decoration: none; } .back:hover { color: var(--accent-ink); } .fn-ref { line-height: 0; } .fn-ref a { padding: 0 .15em; font: 600 .7em var(--sans); color: var(--accent-ink); text-decoration: none; } .footnotes { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--line); font: .9rem/1.6 var(--sans); color: var(--muted); } .footnotes ol { margin: 0; padding-left: 1.2em; } .fn-back { text-decoration: none; } /* ---------- Small screens & motion ---------- */ @media (max-width: 600px) { .wrap { padding: 0 16px; } .section-link { grid-template-columns: 36px 1fr auto; gap: 6px 14px; padding: 26px 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }