/* ==================== PAGES.CSS ====================
   Shared shell for the static content pages (about.html, contact.html).

   index.html deliberately keeps its own inline <style>: it carries the hero,
   the plan films and the scroll choreography, none of which these pages use,
   and splitting it would mean editing the one page that is already proven in
   a browser. What IS shared is the sheet itself — the tokens, the header, the
   title block, the dimension rule — and that lives here so a second content
   page cannot drift from the first.

   Served from /public/, so the path is root-absolute (/styles/pages.css) and
   Vite copies it verbatim. Keep the COLOUR token values in sync with
   index.html's :root block; they are the same drawing. The type tokens are
   not duplicated here at all — they live in /styles/type.css, which every
   page links, because keeping them in sync by hand is exactly what failed
   (see .mono below).
   ==================================================== */

:root {
    --paper: #F4F2ED;
    --ink: #14171A;
    --ink-2: #565D65;
    --rule: #CFC9C0;
    --rule-soft: #E2DED7;
    --accent: #013975;   /* the mark's navy carries the type */
    --link: #2983E7;     /* the mark's blue carries interaction */
    --green: #6EB950;
    --green-ink: #38703A;
    --tab: 34px;         /* the green run that opens a rule */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink);
    letter-spacing: -0.012em;
    -webkit-font-smoothing: antialiased;
    background-image:
        linear-gradient(rgba(1,57,117,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1,57,117,0.045) 1px, transparent 1px);
    background-size: 88px 88px, 88px 88px;
}

/* The label face. `.mono` is a name this class has outgrown — it is the
   ANNOTATION role (eyebrows, numbered section labels, the dimension-rule
   caption), and it is set in Oswald, not a monospace. Kept as `.mono`
   because it is the class the markup on both pages already carries;
   /styles/type.css says which role each token is.

   Until 2026-09-19 this was the system mono stack at 0.12em while
   index.html's identical `.mono` was Oswald at 0.18em, so the same label
   changed face between the home page and the page one click away. */
.mono {
    font-family: var(--label);
    font-weight: 500;
    letter-spacing: var(--label-tracking);
}

.shell { max-width: 1180px; margin: 0 auto; padding: 0 48px; }

/* ── Header ─────────────────────────────────────────────────────────── */

/* <header> is a body-level band the full width of the page; the .shell
   inside it carries the gutters and .bar is the row. Full width on purpose:
   Safari 26 fills the iPhone status bar from the first fixed or sticky
   element at the top edge's midpoint, and rejects one narrower than 90% of
   the viewport — a header inside .shell is 88% on a 390px phone, so the
   page showed through the status bar (2026-09-19; the long note is in
   index.html above its sticky rules, and inspect:pages asserts the rule on
   every page). */
header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
}

header .bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 0 16px;
    border-bottom: 2px solid var(--ink);
}

.logo {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.logo img { width: 44px; height: 32px; flex-shrink: 0; }
.logo .tld { font-weight: 400; }

.nav { display: flex; align-items: center; gap: 30px; }

.nav a:not(.cta) {
    color: var(--ink-2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}

.nav a:not(.cta):hover { color: var(--ink); }

/* The page you are on names itself rather than pretending to be a link. */
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    background: var(--green);
    color: var(--ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 22px;
    transition: background 0.2s cubic-bezier(0.22,1,0.36,1), color 0.2s cubic-bezier(0.22,1,0.36,1);
}

.cta:hover { background: var(--green-ink); color: var(--paper); }
.cta svg { transition: transform 0.2s cubic-bezier(0.22,1,0.36,1); }
.cta:hover svg { transform: translateX(3px); }
.cta:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* ── Page head ──────────────────────────────────────────────────────── */

.page-head { padding: 64px 0 0; max-width: 62ch; }

.eyebrow {
    display: inline-block;
    font-size: 10.5px;
    background: var(--green);
    color: var(--ink);
    padding: 6px 11px 5px;
    margin-bottom: 26px;
}

h1 {
    font-size: clamp(36px, 4.2vw, 56px);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -0.035em;
    max-width: 16ch;
}

h1 em { font-style: normal; color: var(--accent); }

.lede {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 54ch;
}

/* ── Dimension rule (the section divider) ───────────────────────────── */

.dim { position: relative; height: 30px; margin: 68px 0 0; }
.dim .bar { position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: var(--green); }
.dim .tick { position: absolute; top: 8px; width: 2px; height: 15px; background: var(--green); }
.dim .tick.r { right: 0; }
.dim span.mono {
    position: absolute; top: 7px; left: 0;
    background: var(--paper); padding: 0 16px 0 0;
    font-size: 10.5px; color: var(--green-ink);
}

/* ── Prose sections ─────────────────────────────────────────────────── */

/* Two columns: a mono section label in the margin, the prose beside it.
   The label is the drawing's callout, so it stays put while the text runs. */
.sec {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0 56px;
    padding: 38px 0 40px;
    position: relative;
    border-top: 1px solid var(--rule);
}

.sec::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: var(--tab); height: 2px;
    background: var(--green);
}

.sec > .label {
    font-size: 10.5px;
    color: var(--ink-2);
    padding-top: 4px;
}

.sec h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    max-width: 22ch;
}

.sec h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 26px 0 8px;
}

.sec p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
    max-width: 62ch;
}

.sec p + p { margin-top: 15px; }

.sec p strong { color: var(--ink); font-weight: 600; }

.sec ul { list-style: none; margin-top: 16px; max-width: 62ch; }

.sec ul li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
}

.sec ul li:last-child { border-bottom: 0; }

.sec ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 17px;
    width: 9px; height: 2px;
    background: var(--green);
}

.sec ul li b { color: var(--ink); font-weight: 600; }

/* A pulled-out line: the one sentence a section is really about. */
.pull {
    margin: 24px 0 4px;
    padding: 0 0 0 20px;
    border-left: 3px solid var(--green);
    font-size: 19px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-weight: 600;
    max-width: 44ch;
}

.sec a, .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.sec a:hover, .prose a:hover { color: var(--link); }

/* ── Contact rows ───────────────────────────────────────────────────── */

.channels { margin-top: 4px; }

.channel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--rule-soft);
}

.channel:first-child { border-top: 1px solid var(--rule-soft); }

.channel b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.channel span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin-top: 3px; max-width: 52ch; }

.channel a.go {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid var(--green);
    padding-bottom: 2px;
}

.channel a.go:hover { color: var(--link); }

/* ── Bio ────────────────────────────────────────────────────────────── */

/* One column until a headshot exists. The photo track used to be
   unconditional, which left the text sitting IN the 148px column while the
   <img> was commented out and squeezed the bio to four words a line. Add
   class="bio has-photo" at the same time as the image, not before. */
.bio { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.bio.has-photo { grid-template-columns: 148px 1fr; }
.bio img { width: 148px; height: 148px; object-fit: cover; border: 1px solid var(--rule); }
.bio .who { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 58ch; }
.bio .who b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 2px; }
.bio .who .role { display: block; font-size: 11px; color: var(--ink-2); margin-bottom: 14px; }

/* ── Closing call to action ─────────────────────────────────────────── */

.closer {
    margin-top: 72px;
    border-top: 2px solid var(--ink);
    padding-top: 24px;
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 48px;
    align-items: center;
}

.closer::before { content: ''; position: absolute; top: -2px; left: 0; width: var(--tab); height: 2px; background: var(--green); }
.closer h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; max-width: 20ch; }
.closer p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); margin-top: 12px; max-width: 48ch; }

/* ── Title block ────────────────────────────────────────────────────── */

footer { margin-top: 80px; padding-bottom: 56px; }
.block { border: 1px solid var(--rule); border-left: 3px solid var(--green); font-size: 11px; max-width: 620px; }
.block .row { display: flex; border-bottom: 1px solid var(--rule); }
.block .row:last-child { border-bottom: 0; }
.block b {
    flex: 0 0 132px; padding: 10px 14px; color: var(--ink-2);
    border-right: 1px solid var(--rule); font-weight: 500;
}
/* An email address in this cell is one unbreakable token. Without a min
   width of 0 the flex item refuses to shrink below it, which pushed the
   title block 11px past a 390px viewport. */
.block s { flex: 1; min-width: 0; padding: 10px 14px; text-decoration: none; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.block s a { color: var(--accent); text-decoration: none; }
.block s a:hover { color: var(--link); text-decoration: underline; }
.colophon { margin-top: 20px; font-size: 11.5px; color: var(--ink-2); }
.colophon a { color: var(--ink-2); }

@media (max-width: 900px) {
    .shell { padding: 0 24px; }
    .sec { grid-template-columns: 1fr; gap: 10px; padding-top: 30px; }
    .sec > .label { padding-top: 0; }
    .closer { grid-template-columns: 1fr; gap: 24px; }
    .bio { grid-template-columns: 1fr; }
    .channel { grid-template-columns: 1fr; gap: 10px; }
    .nav a:not(.cta) { display: none; }
    h1 { max-width: none; }
    .dim { margin-top: 48px; }
}

/* ── Contact form ───────────────────────────────────────────────────── */

/* Posts into the same `feedback` table the planner's feedback button uses
   (supabase.js submitFeedback), so contact messages land where the owner
   already looks. No new backend, no new RLS policy. */

.form { margin-top: 26px; max-width: 46rem; }

.field { margin-bottom: 20px; }

.field label {
    display: block;
    font-size: 11px;
    font-family: var(--label);
    font-weight: 500;
    letter-spacing: var(--label-tracking);
    color: var(--ink-2);
    margin-bottom: 7px;
}

.field .opt { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: 400; }

.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ink);
    background: #FBFAF7;
    border: 1px solid var(--rule);
    border-radius: 0;          /* the sheet has no rounded corners anywhere */
    padding: 12px 14px;
    letter-spacing: -0.01em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }

.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--green-ink);
    box-shadow: inset 0 0 0 1px var(--green-ink);
}

.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; }

/* Bots fill everything, including what they cannot see. Left in the flow
   and hidden, not display:none, because some bots skip undisplayed inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.form button[type="submit"] {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    background: var(--green);
    border: 0;
    padding: 13px 26px;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.22,1,0.36,1), color 0.2s cubic-bezier(0.22,1,0.36,1);
}

.form button[type="submit"]:hover:not(:disabled) { background: var(--green-ink); color: var(--paper); }
.form button[type="submit"]:disabled { cursor: default; opacity: 0.55; }
.form button[type="submit"]:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* One status line for every outcome, announced to screen readers. It is
   empty until something happens, so it never reserves space it is not using. */
.form-status { font-size: 13.5px; line-height: 1.5; max-width: 42ch; }
.form-status:empty { display: none; }
.form-status.ok { color: var(--green-ink); font-weight: 600; }
.form-status.err { color: #A3341F; }

/* Direct links, under the form: the people who would rather use their own
   mail client, and the ones checking that a real person is behind this. */
.direct { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 4px; }
/* An email address is one unbreakable token, and at 390px it was 11px wider
   than the viewport. min-width:0 lets the flex item shrink below its content,
   and anywhere lets the address itself break. */
.direct a { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--green); padding-bottom: 3px; overflow-wrap: anywhere; }
.direct a:hover { color: var(--accent); }
.direct a svg { flex-shrink: 0; }

@media (max-width: 900px) {
    .form { max-width: none; }
    .direct { gap: 18px 24px; }
    /* The label column gives ground first when the value needs the room. */
    .block b { flex-basis: 96px; }
}