/* SKIN: education (college consulting, admissions advising, tutoring, academic coaching) Feel: editorial and unhurried — a good book, not a brochure. Warm off-white paper, dark-purple ink, ONE orange accent doing all the pointing. Built 2026-08-27 for studio-sb-coaching (10th vertical). Two things make this vertical different from `professional`, and both are why it needed its own file: 1. The paper is WARM off-white, not white on cool grey. professional.css is #ffffff over #f4f6f9 (a blue-grey), which fights an orange/purple brand. 2. This vertical PUBLISHES LONG-FORM WRITING. Every other skin dresses up short service blurbs; a college-essay practice puts 700-word student essays on the page, so a real reading column is a first-class need here (.prose below), not decoration. Deliberately does NOT override .btn. base.css gives buttons a 2px --dark border, which reads as crisp/editorial against warm paper and is worth keeping. The one button change needed (orange fill with no contrasting outline) is done at TOKEN level via --accent-border, which base.css already reads in BOTH .btn-accent and .mobile-nav a.mobile-cta. That avoids the laundry-skin bug entirely: a skin restyling .btn beats base.css's own .btn-accent/.btn-primary at equal (0,1,0) specificity because the skin loads later, so it must restate every variant. Not touching .btn = nothing to restate. See site-factory/CLAUDE.md Log, 2026-08-25. */ :root{ --paper:#FBF8F3; /* warm off-white */ --ink:#2B1B3D; /* 14.94:1 on paper */ --muted:#5C5266; /* 6.95:1 on paper, 6.34:1 on --section-bg-alt */ --radius:10px; --shadow:0 2px 14px rgba(43,27,61,.07); --tile-border:1px solid #E7DED1; /* warm hairline, not grey */ --header-line:1px solid #E7DED1; --section-bg-alt:#F4EDE4; /* Orange fill, no contrasting outline. base.css reads this in .btn-accent AND the mobile menu's CTA, so both change from one token and neither rule is forked. Accent #F0894A + --dark text measures 6.32:1 (AA at any size). */ --accent-border:var(--accent); /* Heavier than the base overlay ON PURPOSE. Every other skin sits over a photograph that is already mid-to-dark; this brand's images are black line art on near-white, so the default .62 overlay leaves a washed-out grey field with low-contrast white text over it. At these values the artwork reads as pale purple linework on a deep purple ground — still visibly an image (the fleet rule is no flat-color heroes), with white text sitting comfortably clear of it. Tuned against real renders, not guessed. */ --hero-overlay:linear-gradient(180deg,rgba(43,27,61,.86),rgba(43,27,61,.68) 48%,rgba(43,27,61,.9)); } /* Display face here is a high-contrast serif. base.css tightens all headings by -.015em, which is right for a grotesk and closes up a didone's thin strokes — so tracking goes back to near-normal. Equal specificity, skin loads later. */ h1,h2,h3{letter-spacing:-.004em} /* Sized so this vertical's hero headlines hold ONE line across the desktop range. Measured, not guessed: the .wrap content column caps at 1096px, and the longest headline on the site ("Essays that sound like the student who wrote them", 49 chars) breaks to two lines above 47.5px. The cap is 2.85rem (45.6px), leaving ~4% headroom for font-metric variation between machines, and the vw term is 3.9 so the same holds at 1100px and below rather than only at full width. Below ~840px the 2.05rem floor takes over and headlines wrap, which is correct on a phone. */ h1{font-size:clamp(2.05rem,3.9vw,2.85rem)} .hero{min-height:68vh} .tile h3{color:var(--primary)} .eyebrow{color:var(--primary)} /* 10.23:1 on paper, 9.33:1 on --section-bg-alt */ /* MEASURED FIX, not a preference. base.css colors the hero eyebrow var(--accent), which is right over a photograph. Over THIS vertical's near-white line art it is not: composited against the overlay at the eyebrow's real position, accent #F0894A measures 2.61:1, and 2.21:1 at the hero's brightest point — nowhere near the 4.5:1 that AA wants for 12.8px text. The text-shadow base.css adds is a perceptual safety net; it does not move a measured ratio. Darkening the overlay until the accent passes needs alpha >= 0.88, and at that point the artwork's own line-vs-ground contrast collapses from 3.01:1 to 1.47:1 — the illustration becomes the flat-color hero the fleet rule forbids. So the TEXT gives way, not the image: a warm off-white drawn from this palette rather than plain white, measured 4.88:1 at the BRIGHTEST point anywhere in the hero (worst case = compositing over pure white, which is what every illustration in this vertical grounds to). Same class of bug as yossefs-laffa-milia's warm-accent-over-warm-photo finding; opposite resolution, because here the backdrop is what needs protecting. */ .hero .eyebrow{color:#F7EFE8} /* ---------- nav width ---------- Two things compete for the header bar here: a multi-item nav and (on the sites that use one) a wordmark lockup that is ~165px wider than a bare logo. Measured: with the wordmark showing, brand+nav+phone+CTA needs ~953px, which overflows the 862px case the fleet cares about (a Windows laptop at 150% scaling). Dropping the mini phone link below 990px brings it to ~809px and it fits. The phone is still in the mobile menu, the footer, and every page CTA. The laundry skin hit the same wall from the other direction (five nav items, no wordmark) and took the same two measures. Base rules first, media queries after (the CSS ordering trap). */ .main-nav a,.nav-item > a{white-space:nowrap} /* This vertical's primary CTA is "Schedule a Conversation" — 23 characters, against the fleet default's 16. Measured: without nowrap it wraps to two lines anywhere under ~1080px and the header grows from 78px to 103px, which reads as a broken header rather than a long label. Scoped to this skin rather than base.css because forcing nowrap on every fleet CTA is a real rendered change on 17 live sites for a problem only this one has. */ .hdr-cta .btn{white-space:nowrap} /* Measured widths with the wordmark lockup, a 4-item nav and a nowrap CTA: lockup + phone + button needs ~1069px, so the mini phone link stands down below 1080 rather than the fleet's 860. It is still in the mobile menu, the footer, and on the contact page. */ @media (max-width:1080px){.tel-mini{display:none}} /* ----------