/* ============================================================================
FIELD NOTES — design system
----------------------------------------------------------------------------
Everything visual is driven by the tokens below. To re-skin the site,
edit :root (dark) and [data-theme="light"] (light) — nothing else.
Accent orange means ONE thing: "act here". Do not use it decoratively.
Teal is reserved for Telegram.
============================================================================ */
:root {
/* --- color: dark (default) --- */
--bg: #121110; /* near-black, warm */
--bg-raised: #181614; /* subtly lifted surfaces */
--bg-inset: #0d0c0b; /* recessed, e.g. input focus */
--text: #EDE8DF; /* warm off-white */
--text-dim: rgba(237, 232, 223, .58);
--text-faint: rgba(237, 232, 223, .36);
--hairline: rgba(237, 232, 223, .14); /* the ruled-sheet lines */
--hairline-strong: rgba(237, 232, 223, .34);
--accent: #E8722A; /* warm orange — ACTIONS ONLY */
--accent-ink: #121110; /* text on top of accent */
--teal: #4FA8C9; /* Telegram only */
/* --- type --- */
--font-display: "Space Grotesk", sans-serif;
--font-body: "Inter", sans-serif;
/* --- structure --- */
--sheet-max: 1180px; /* width of the ruled sheet */
--pad: clamp(1.25rem, 4vw, 2.5rem); /* standard section gutter */
--ease: cubic-bezier(.2, .6, .2, 1);
}
/* Light mode: same structure, paper-flipped values. */
[data-theme="light"] {
--bg: #F1ECE2;
--bg-raised: #EAE4D6;
--bg-inset: #F8F4EB;
--text: #1B1813;
--text-dim: rgba(27, 24, 19, .62);
--text-faint: rgba(27, 24, 19, .40);
--hairline: rgba(27, 24, 19, .18);
--hairline-strong: rgba(27, 24, 19, .40);
--accent: #D95F16;
--accent-ink: #F8F4EB;
--teal: #2B7A99;
color-scheme: light;
}
/* ============================================================================
field conditions (time-adaptive)
The inline script sets data-field-condition (dawn/day/dusk/night)
when the user has NOT chosen a theme manually. These blocks override the
base color tokens ONLY — layout, typography, and component rules are never
redeclared here. A stored 'fn-theme' (manual choice) removes the attribute
and wins via the base [data-theme] rules.
Mapping (LOCKED): dawn/day -> light base; dusk/night -> dark base.
============================================================================ */
/* day — existing light mode. No override needed; the [data-theme="light"] base applies as-is. */
/* dawn — light base, warmed for the golden hour; more golden hairlines. */
[data-field-condition="dawn"] {
--bg: #F3E9DA;
--bg-raised: #EDE0CD;
--bg-inset: #F8F0E3;
--hairline: rgba(109, 72, 38, .24);
--hairline-strong: rgba(109, 72, 38, .44);
}
/* dusk — dark base with transitioning warmth: warmer tint, warm hairlines. */
[data-field-condition="dusk"] {
--bg: #181410;
--bg-raised: #1E1913;
--bg-inset: #120E0A;
--hairline: rgba(231, 200, 158, .16);
--hairline-strong: rgba(231, 200, 158, .32);
}
/* night — existing dark palette, even subtler hairlines. */
[data-field-condition="night"] {
--hairline: rgba(237, 232, 223, .09);
--hairline-strong: rgba(237, 232, 223, .22);
}
/* ============================================================================
RESET / BASE
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2 { text-wrap: balance; }
img { max-width: 100%; }
a { color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: var(--accent-ink); }
/* Focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 3px;
}
/* ============================================================================
THE SHEET — signature device #1
The whole site lives inside a hairline-ruled sheet, like a page from a
lab notebook. Sections end in ruled lines; nothing floats free.
============================================================================ */
.sheet {
max-width: var(--sheet-max);
margin: 0 auto;
border-left: 1px solid var(--hairline);
border-right: 1px solid var(--hairline);
min-height: 100vh;
}
/* Every top-level section is a ruled row in the ledger. */
.rule { border-bottom: 1px solid var(--hairline); }
/* Small-caps label used for section eyebrows, meta lines, log headers. */
.label {
font-family: var(--font-display);
font-size: .72rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
}
.label--faint { color: var(--text-faint); }
/* Section numbering — the "№ 02" markers. Deliberately NOT accent-colored:
they are structure, not actions. */
.num { font-family: var(--font-display); color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* ============================================================================
component: site-header
Masthead strip. Name left, nav right; on phones the nav collapses behind
a text "Menu" toggle (no hamburger icon — type only).
============================================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: .85rem var(--pad);
}
.brand {
font-family: var(--font-display);
font-weight: 700;
font-size: .95rem;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
}
.brand small {
font-weight: 400;
color: var(--text-faint);
letter-spacing: .14em;
margin-left: .7em;
font-size: .68rem;
}
.nav-toggle {
font-family: var(--font-display);
font-size: .78rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text);
padding: .3rem 0;
}
.site-nav {
display: none; /* mobile: closed until toggled */
border-top: 1px solid var(--hairline);
}
.site-nav.is-open { display: block; }
.site-nav a {
display: block;
padding: .8rem var(--pad);
border-bottom: 1px solid var(--hairline);
text-decoration: none;
font-family: var(--font-display);
font-size: .9rem;
letter-spacing: .04em;
}
.site-nav a:last-child { border-bottom: 0; }
.site-nav a[aria-current] { color: var(--text-faint); }
.site-nav a:hover { background: var(--bg-raised); }
.site-nav a.nav-telegram { color: var(--teal); }
@media (min-width: 720px) {
.nav-toggle { display: none; }
.site-nav { display: flex; border-top: 0; gap: 1.6rem; align-items: baseline; }
.site-nav a {
padding: 0;
border: 0;
font-size: .78rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-dim);
}
.site-nav a:hover { background: none; color: var(--text); }
.site-nav a[aria-current] { color: var(--text); text-decoration: underline; text-underline-offset: .35em; }
}
/* ============================================================================
component: hero + wordmark — signature device #2
Oversized cropped wordmark. The surname is stroked (outline) so the pair
reads as one object with two densities. The portrait slot overlaps the
wordmark from below — the design works whether or not a photo is set.
============================================================================ */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.hero__kicker {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1rem var(--pad) 0;
}
.wordmark {
margin: .35em 0 0 -.045em; /* optical left-align of the huge caps */
padding: 0 var(--pad);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(4.4rem, 17.5vw, 11.5rem);
line-height: .80;
letter-spacing: -.045em;
text-transform: uppercase;
text-wrap: balance;
}
/* The stroked twin. On mobile the two words stack; on desktop they may
share a line — both are fine, the layout is built for either. */
.wordmark .outline {
color: transparent;
-webkit-text-stroke: 1.5px var(--text);
}
/* Asymmetric pair below the wordmark: intro text left (~7/12),
portrait right (~5/12), portrait pulled UP into the wordmark's space. */
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(1rem, 4vw, 3rem);
padding: 0 var(--pad) calc(var(--pad) * 1.2);
align-items: start;
}
.hero__intro { padding-top: 1.2rem; }
.hero__intro p {
margin: 0 0 1.1em;
font-size: clamp(1rem, 2.6vw, 1.2rem);
line-height: 1.65;
color: var(--text-dim);
max-width: 42ch;
}
.hero__intro p b { color: var(--text); font-weight: 500; }
/* Inline action links — text with arrows, not buttons. */
.link-act {
font-family: var(--font-display);
font-size: .9rem;
letter-spacing: .06em;
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.link-act:hover { border-bottom-color: var(--accent); }
.link-plain {
font-family: var(--font-display);
font-size: .9rem;
letter-spacing: .06em;
color: var(--text-dim);
text-decoration: none;
}
.link-plain:hover { color: var(--text); }
.hero__links { display: flex; gap: 1.8rem; align-items: baseline; flex-wrap: wrap; }
/* Portrait slot. Empty state shows a monogram + caption; drop an ![]()
inside and remove data-state="empty" when the photo exists. */
.portrait-frame {
position: relative;
aspect-ratio: 4 / 5;
margin: -3.2rem 0 0; /* the overlap into the wordmark zone */
border: 1px solid var(--hairline-strong);
background: var(--bg-raised);
overflow: hidden;
}
.portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Empty-state monogram */
.portrait-frame[data-state="empty"]::before {
content: "JF"; /* swap with initials; replaced by ![]()
*/
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.5rem, 8vw, 5rem);
letter-spacing: -.03em;
color: var(--text-faint);
}
.portrait-frame figcaption {
position: absolute;
left: .8rem;
bottom: .6rem;
font-family: var(--font-display);
font-size: .62rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--text-faint);
}
/* Crop mark — a small "+" at the top-left corner of the frame. Pure print. */
.portrait-frame::after {
content: "+";
position: absolute;
top: .35rem;
left: .55rem;
font-family: var(--font-display);
font-size: .8rem;
color: var(--text-faint);
}
@media (max-width: 560px) {
.hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.portrait-frame { margin-top: -2.2rem; }
}
@media (min-width: 720px) {
/* Desktop: the frame only kisses the wordmark's baseline — enough to read
as a deliberate overlap, never enough to swallow the surname. */
.portrait-frame { margin-top: -1.2rem; width: 100%; max-width: 360px; justify-self: end; }
}
/* ============================================================================
component: status-log ("Currently experimenting") — signature device #3
A live strip of bracketed checkboxes: [■] running, [ ] queued.
Day counters are computed by js/main.js from data-start attributes,
so updating the log = editing one date in the HTML.
============================================================================ */
.status-log {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--hairline);
background: var(--bg-raised);
}
.status-log__label {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: .6em;
padding: 1rem 1.1rem 1rem var(--pad);
border-right: 1px solid var(--hairline);
font-family: var(--font-display);
font-size: .72rem;
font-weight: 500;
letter-spacing: .18em;
text-transform: uppercase;
white-space: nowrap;
}
/* The live pulse. The ONLY continuously animated element on the site. */
.live-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
html { scroll-behavior: auto; }
}
.status-log__items {
display: flex;
align-items: stretch;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none; /* clean strip; swipeable on phones */
}
.status-log__items::-webkit-scrollbar { display: none; }
.status-log__items li {
display: flex;
align-items: center;
gap: .7em;
padding: 1rem 1.2rem;
border-right: 1px solid var(--hairline);
font-family: var(--font-display);
font-size: .85rem;
white-space: nowrap;
}
.status-log__items .box {
color: var(--text-faint);
letter-spacing: 0;
}
.status-log__items li.is-live .box { color: var(--accent); }
.status-log__items li.is-live { color: var(--text); }
.status-log__items li:not(.is-live) { color: var(--text-dim); }
.status-log__items .day {
color: var(--text-faint);
font-size: .78rem;
font-variant-numeric: tabular-nums;
}
.status-log__updated {
margin-left: auto;
flex: 0 0 auto;
display: none; /* hidden on phones, shown on desktop */
align-items: center;
padding: 1rem var(--pad) 1rem 1.1rem;
border-left: 1px solid var(--hairline);
}
@media (min-width: 720px) {
.status-log__updated { display: flex; }
}
/* ============================================================================
component: route-index
Navigation as a typographic table of contents. Rows, not cards.
Add or remove rows freely — the layout takes any count.
============================================================================ */
.route-index { border-bottom: 1px solid var(--hairline); }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: calc(var(--pad) * .9) var(--pad) 1rem;
}
.section-head h2 {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.5rem, 4.5vw, 2.2rem);
letter-spacing: -.025em;
}
.section-head .more { flex: 0 0 auto; }
.route-row {
display: grid;
grid-template-columns: 2.6rem 1fr auto;
grid-template-areas:
"num name arrow"
"num desc arrow";
column-gap: 1rem;
align-items: baseline;
padding: 1.15rem var(--pad);
border-top: 1px solid var(--hairline);
text-decoration: none;
color: inherit;
transition: background .2s var(--ease);
}
.route-row:hover { background: var(--bg-raised); }
.route-num { grid-area: num; font-family: var(--font-display); font-size: .8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.route-name {
grid-area: name;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.25rem, 3.8vw, 1.8rem);
letter-spacing: -.02em;
line-height: 1.1;
text-wrap: balance;
}
.route-desc {
grid-area: desc;
margin-top: .35em;
color: var(--text-dim);
font-size: .88rem;
line-height: 1.5;
max-width: 52ch;
}
.route-arrow {
grid-area: arrow;
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--text-faint);
transition: transform .25s var(--ease), color .25s var(--ease);
}
.route-row:hover .route-arrow { transform: translateX(6px); color: var(--accent); }
.route-row:hover .route-name { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
/* External destinations get the diagonal arrow. Telegram speaks teal. */
.route-row--ext .route-arrow { transform: none; }
.route-row--ext:hover .route-arrow { transform: translate(4px, -4px); }
.route-row--telegram:hover .route-arrow { color: var(--teal); }
.route-row--telegram .route-name::after { content: ""; }
@media (min-width: 720px) {
.route-row {
grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr) 3rem;
grid-template-areas: "num name desc arrow";
align-items: baseline;
}
.route-desc { margin-top: 0; }
}
/* ============================================================================
component: post-ledger + post-card
Writing surfaced as ledger entries: one feature entry, then compact rows.
Any count works — each entry is just another ruled row.
============================================================================ */
.post-ledger { border-bottom: 1px solid var(--hairline); padding-bottom: calc(var(--pad) * .8); }
.post-card {
display: block;
margin: 0 var(--pad);
padding: 1.3rem 0;
border-top: 1px solid var(--hairline);
text-decoration: none;
color: inherit;
content-visibility: auto;
}
.post-card__meta {
display: flex;
gap: 1.2em;
flex-wrap: wrap;
font-family: var(--font-display);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.post-card__title {
margin: .45em 0 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.12rem;
line-height: 1.28;
letter-spacing: -.015em;
max-width: 34ch;
text-wrap: balance;
}
.post-card__excerpt {
margin: .6em 0 0;
color: var(--text-dim);
font-size: .92rem;
line-height: 1.6;
max-width: 58ch;
}
.post-card:hover .post-card__title {
text-decoration: underline;
text-underline-offset: .22em;
text-decoration-thickness: 1px;
}
/* The most recent post gets the big treatment — but as an entry, not a card. */
.post-card--feature { padding: 1.6rem 0 1.9rem; }
.post-card--feature .post-card__title {
font-size: clamp(1.55rem, 5vw, 2.4rem);
line-height: 1.12;
max-width: 22ch;
}
.post-card--feature .post-card__excerpt { font-size: 1rem; }
/* ============================================================================
component: signup-block
The list is the engine — present, never pushy. One dedicated section on
the homepage + a compact repeat in the footer. No popups, ever.
ACTION: wire the