/* =========================================================
driftwood it — stylesheet
Fonts: Space Mono (body/paragraphs) + VT323 (accents)
Both are set as variables below so you can swap in one place.
Make sure your loads both:
========================================================= */
/* ---- FONTS ---- */
:root{
--font-body: "Space Mono", monospace; /* paragraphs, lists, button, footer */
--font-accent: "VT323", monospace; /* headings + tagline */
}
/* ---- COLORS: change these to re-theme the whole page ---- */
:root{
color-scheme: light dark; /* themes scrollbars/form fields for both modes */
--bg: #0d0a05; /* background — to lighten, try #1c150c or #241a0e */
--amber: #ffb000; /* headings / accents */
--text: #e8ab4e; /* body text */
--dim: #a57c2e; /* labels / muted text */
--line: #2e2109; /* borders / dividers — bump to #4a3820 if you */
/* lighten --bg and the divider lines start to vanish */
}
/* ---- LIGHT MODE: used automatically when the device is set to light ---- */
@media (prefers-color-scheme: light){
:root{
--bg: #f5eeda; /* warm paper */
--amber: #a25c00; /* burnt amber accents */
--text: #40300f; /* deep brown body text */
--dim: #7c6438; /* muted labels */
--line: #d9c9a4; /* soft tan dividers */
}
}
/* ---- RESET ---- */
*{ box-sizing:border-box; margin:0; padding:0; }
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:15px;
line-height:1.65;
}
/* ---- PAGE CONTAINER ---- */
.wrap{
max-width:760px;
margin:0 auto;
padding:40px 20px 60px;
}
/* ---- LOGO (two-block responsive ASCII) ----
Kept in plain monospace so the art stays crisp and grid-aligned.
Font size is set by the fit script in the HTML, not here. */
.logo{
display:flex;
align-items:center;
justify-content:center;
gap:0.3em 1.5ch; /* vertical gap when stacked / horizontal when side-by-side */
padding:0 4px; /* tiny safety margin so a rounding pixel never clips */
overflow:hidden;
}
.logo .art{
font-family:monospace;
color:var(--amber);
line-height:1.05;
white-space:pre;
margin:0;
font-size:10px; /* placeholder; the script overrides this */
}
/* stack driftwood over it on narrow screens */
@media (max-width:640px){
.logo{ flex-direction:column; }
}
/* ---- HEADINGS (VT323 accent font) ---- */
h2{
font-family:var(--font-accent);
color:var(--amber);
font-size:34px;
font-weight:400; /* VT323 has no bold anyway */
line-height:1.1;
margin-bottom:6px;
}
h3{
font-family:var(--font-accent);
color:var(--amber);
font-size:26px;
font-weight:400;
line-height:1.1;
margin-bottom:4px;
}
/* ---- SECTIONS ---- */
section{ margin-top:32px; }
/* ---- TEXT ---- */
p{ margin:0 0 14px; max-width:62ch; }
.tagline{
font-family:var(--font-accent);
color:var(--amber);
font-size:28px;
line-height:1.2;
margin-top:14px;
}
/* ---- SERVICES: LIST version (
) ---- */
ul{ list-style:none; }
li{
padding:10px 0;
border-bottom:1px dashed var(--line);
}
li:last-child{ border-bottom:0; }
li b{
font-family:var(--font-accent);
color:var(--amber);
font-size:24px; /* VT323 reads small, so size it up vs the 15px body */
font-weight:400; /* VT323 has no bold */
}
/* ---- SERVICES: TABLE version (