/* ==========================================================================
Code Organa — site.css
Hand-maintained stylesheet for codeorgana.com (static rebuild of the
SquareSpace 7.1 site). Design tokens measured from the original site.
========================================================================== */
/* ---- Tokens ---------------------------------------------------------- */
:root {
/* Color primitives (HSL triplets match the original SquareSpace palette) */
--accent-hsl: 204.39, 79.49%, 38.24%; /* Code Organa blue #1470AF */
--light-hsl: 240, 10.53%, 92.55%; /* pale lavender-gray #EBEBF1 */
--dark-hsl: 209.23, 52.7%, 70.98%; /* soft slate blue #8EB4DC */
--white-hsl: 0, 0%, 100%;
--black-hsl: 0, 0%, 0%;
--accent: hsl(var(--accent-hsl));
--heading-font: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Type scale. Lifted verbatim from live's stylesheet (site.css?nocustom),
which sizes type in TWO branches:
@media (max-width: 767px) and (orientation: portrait)
font-size: calc((k - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
@media (min-width: 768px), (orientation: landscape)
font-size: min(calc((k - 1) * 1.2vw + 1rem),
max(calc((k - 1) * .012 * 1400px + 1rem),
calc(k * 1rem)))
(1400px there is live's --maxPageWidth.)
where k is live's size token: h1 6.37, h2 4.12, h3 2.74, h4 1.57,
large-text 1.5, normal-text 1.1. Every K below is (k - 1) * 1.2, so the
SAME K drives both branches — K per 1vw on the wide branch, K per 1% of
min(100vh, 900px) in portrait — and the inner `max(...)` never wins for
this site's k values, so the wide branch reduces to the min() below.
This supersedes the earlier "it's vmax" reading, which was a coincidence
of the viewports it was checked at: in portrait vmax IS vh, and 874 < 900
so the cap never bit. It breaks in two places vmax cannot express —
a portrait viewport taller than 900px (live stops growing, vmax does not:
at 402x1032 live's h1 is 74.0px where vmax gives 82.5, enough to push
"Expressive" past the Inkwork hero's 354px column and split the word),
and portrait tablets >=768px, where live switches to the vw branch. */
--fs-h1: min(calc(1rem + 6.444vw), calc(1rem + 6.444 * 14px));
--fs-h2: min(calc(1rem + 3.744vw), calc(1rem + 3.744 * 14px));
--fs-h3: min(calc(1rem + 2.088vw), calc(1rem + 2.088 * 14px));
--fs-h4: min(calc(1rem + 0.684vw), calc(1rem + 0.684 * 14px));
--fs-p: min(calc(1rem + 0.12vw), calc(1rem + 0.12 * 14px));
--fs-lead: min(calc(1rem + 0.6vw), calc(1rem + 0.6 * 14px));
--fs-small: 1rem;
--fs-btn-sm: min(calc(1rem + 0.096vw), calc(1rem + 0.096 * 14px));
--pad-section-v: clamp(3.2rem, 6.6vw, 6rem);
--pad-section-h: clamp(1.5rem, 4vw, 3.2rem);
--cw-narrow: 46vw; /* live narrow text col = 588.8px @1280 */
--cw-medium: 69vw;
--cw-wide: 87.5rem;
--radius-img: 8px;
--radius-btn: 6.4px;
}
/* The portrait branch of live's type scale (see the note above): sized off the
viewport HEIGHT, capped at 900px of it, and never off the width. */
@media screen and (max-width: 767px) and (orientation: portrait) {
:root {
--fs-h1: calc(1rem + 6.444 * min(1vh, 9px));
--fs-h2: calc(1rem + 3.744 * min(1vh, 9px));
--fs-h3: calc(1rem + 2.088 * min(1vh, 9px));
--fs-h4: calc(1rem + 0.684 * min(1vh, 9px));
--fs-p: calc(1rem + 0.12 * min(1vh, 9px));
--fs-lead: calc(1rem + 0.6 * min(1vh, 9px));
--fs-btn-sm: calc(1rem + 0.096 * min(1vh, 9px));
}
}
@font-face {
font-family: 'Inter Tight';
src: url('../assets/fonts/InterTight-var.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--body-font);
font-size: var(--fs-p);
line-height: 1.8;
letter-spacing: 0.02em; /* live body text: 0.35px @17.5px */
color: #000;
background: #fff;
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
/* Responsive images are
(built by _reference/tools/build-media.py). display:contents keeps the
out of layout so every existing `… img` rule and the lightbox
keep working exactly as with a bare . */
picture { display: contents; }
h1, h2, h3, h4 {
font-family: var(--heading-font);
font-weight: 700;
line-height: 1.15;
margin: 0 0 0.5em;
overflow-wrap: break-word;
/* Live sets --heading-font-letter-spacing: 0em against the body's .02em;
without this the headings inherit the body's 0.341px and run wider than
live's, which moves wrap points (the Inkwork hero measured 327.3/179 per
line against live's 324.2/176.9 — exact once this is normal). */
letter-spacing: normal;
}
/* SquareSpace leaves inside a heading at the heading's own weight
(measured 700 on live). Without this the UA default `bolder` resolves 700
to 900, which on the Inter Tight VARIABLE font renders a genuinely heavier
cut — the Inkwork quote and both Contact headings looked over-bold. */
h1 strong, h2 strong, h3 strong, h4 strong,
h1 b, h2 b, h3 b, h4 b { font-weight: inherit; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.33; }
h4 { font-size: var(--fs-h4); line-height: 1.4; }
/* Heading levels with another level's look. Added in the SEO pass so every
page carries exactly one