/* serif trial 2026-10-19 (James 19 Oct 05:4x: "the smaller the text, the more professional your site looks";
   the phone name was "too thick"; contact "taking way too much room"). One face, light weights, small type.
   Menu, logo and small tracked labels stay as they are (he "absolutely loves" the menu). */
:root{ --serif:"Erode", Georgia, "Times New Roman", serif; }

/* phone opening screen */
.phero-name{ font-family:var(--serif); font-weight:300; font-size:30px; letter-spacing:-.005em; line-height:1.05; margin:0 0 10px; }
.phero-line{ font-family:var(--serif); font-weight:400; font-size:14px; line-height:1.5; max-width:32ch; margin:0 0 16px; }
.phero-cta{ font-size:12px; padding:8px 14px; font-weight:500; }
.phero-role{ font-size:9px; letter-spacing:.24em; }

/* page titles (Work. / Contact. / About name / showreel title) */
h1, #title h2{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; }
h1:not(.name){ font-size:clamp(30px,4vw,52px); }
h1.name{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; line-height:1; font-size:clamp(34px,5vw,84px); }
h1.name .ch{ will-change:auto; }
.role{ font-size:10px; font-weight:600; letter-spacing:.22em; }
.namerule{ height:1px; width:64px; margin:0 0 20px; }
.bio{ font-family:var(--serif); font-weight:400; font-size:clamp(14px,1vw,16px); line-height:1.6; }
.bio strong{ font-weight:500; }
.stat .n{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,4vw,60px); }

/* contact: smaller, tighter */
.kicker{ font-size:10px !important; letter-spacing:.3em !important; }
.field input, .field textarea{ font-family:var(--serif) !important; font-size:15px !important; font-weight:400; }
.head .num, .head label{ font-size:10px !important; }
form{ gap:20px !important; }
.page{ padding-top:120px !important; }
.send{ font-size:12px !important; }
#thanks h2{ font-family:var(--serif) !important; font-weight:300 !important; }

@media (max-width:600px){
  h1:not(.name){ font-size:32px; }
  h1.name{ font-size:34px; white-space:normal; }
}

/* readability + one voice (pass 2) */
.field input::placeholder, .field textarea::placeholder{ color:#6b6b6b !important; }
.alt-contact{ font-family:var(--serif); font-size:13px !important; letter-spacing:0 !important; }
.bio em{ font-style:normal; }

/* pass 3: the rest of About in the same voice; solid menu bar on text pages so scrolled text never shows through */
.cli span{ font-family:var(--serif); font-weight:400; font-size:17px; letter-spacing:0; }
.awd .tx{ font-family:var(--serif); font-size:14px; }
.awd .tx b{ font-weight:500; }
.awd .yr{ font-weight:600; }
@media (hover:none) and (pointer:coarse) and (max-width:600px){
  body:not(:has(#phero)) .topbar{ background:linear-gradient(to bottom, #000 0%, #000 82%, rgba(0,0,0,0) 100%); }
}

/* pass 4: Work page intro and card titles in the same face */
.intro{ font-family:var(--serif); font-size:14.5px; line-height:1.6; }
.pcard .meta h3, #lightbox .meta h3{ font-family:var(--serif); font-weight:400; font-size:17px; letter-spacing:0; }

/* pass 5 (James 19 Oct 18:10): Erode picked. "See the work" = underlined green words, never a solid pill;
   "also underline the page that you're on" - the current menu item keeps its green and gets an underline. */
.phero-cta{ background:none !important; color:var(--accent) !important; padding:0 0 3px !important; border-radius:0 !important;
            border-bottom:1px solid var(--accent); font-weight:500; }
.topbar nav a.active{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }

/* pass 6 (James 19 Oct 19:37 + 20:10, two rounds running): the NAME only in Red Hat Display Black, italic, ALL CAPITALS -
   "a different font that looks good italicized and bold ... to contrast the kind of elegant one". Everything else stays Erode.
   Loaded by its OWN Fontshare request (red-hat-display@900,900i) - a combined request drops the italics. Kept small. */
.phero-name, h1.name{ font-family:"Red Hat Display", "Helvetica Neue", Arial, sans-serif !important; font-weight:900 !important;
            font-style:italic !important; text-transform:uppercase; letter-spacing:-.01em !important; line-height:1 !important; }
.phero-name{ font-size:30px !important; }
h1.name{ font-size:clamp(32px,3.6vw,56px) !important; }
@media (max-width:600px){ h1.name{ font-size:32px !important; } }
/* the About name is split into one box per letter (the cursor magnet), which drops the font's kerning:
   "ZWADL O" showed a gap. Measured pairs in Red Hat Display 900 italic: LO -.09em, WA -.065em, JA -.01em (rest 0).
   Put them back on the letters (word 1 = JAMES, word 2 = ZWADLO.). */
h1.name .word:first-child .ch:nth-child(1){ margin-right:-.01em; }
h1.name .word:last-child .ch:nth-child(2){ margin-right:-.065em; }
h1.name .word:last-child .ch:nth-child(5){ margin-right:-.09em; }