/* Self-hosted fonts (latin subset): no request ever goes to Google Fonts. *//* cormorant-garamond-latin-300-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/_astro/cormorant-garamond-latin-300-normal.Cw-E_7L1.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-300-normal.BuXLI6C0.woff) format('woff');
}
/* cormorant-garamond-latin-300-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 300;
  src: url(/_astro/cormorant-garamond-latin-300-italic.qkwBXYHn.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-300-italic.DRnsRYID.woff) format('woff');
}
/* cormorant-garamond-latin-400-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/cormorant-garamond-latin-400-normal.B-1hWBU7.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-400-normal.B7YtguxJ.woff) format('woff');
}
/* cormorant-garamond-latin-400-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/cormorant-garamond-latin-400-italic.Dc_OZ8oc.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-400-italic.BLh7T8o8.woff) format('woff');
}
/* cormorant-garamond-latin-500-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/cormorant-garamond-latin-500-normal.BsRWmXhO.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-500-normal.zIXX3Q-H.woff) format('woff');
}
/* cormorant-garamond-latin-500-italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/cormorant-garamond-latin-500-italic.Y14P-dkT.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-500-italic.DhNIfkTX.woff) format('woff');
}
/* cormorant-garamond-latin-700-normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/cormorant-garamond-latin-700-normal.DajfzrDU.woff2) format('woff2'), url(/_astro/cormorant-garamond-latin-700-normal.O25Qpphb.woff) format('woff');
}
/* inter-latin-200-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 200;
  src: url(/_astro/inter-latin-200-normal.CGIQ4gbF.woff2) format('woff2'), url(/_astro/inter-latin-200-normal.fAycq8N-.woff) format('woff');
}
/* inter-latin-300-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/_astro/inter-latin-300-normal.BVlfKGgI.woff2) format('woff2'), url(/_astro/inter-latin-300-normal.i8F0SvXL.woff) format('woff');
}
/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-400-normal.C38fXH4l.woff2) format('woff2'), url(/_astro/inter-latin-400-normal.CyCys3Eg.woff) format('woff');
}
/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-latin-500-normal.Cerq10X2.woff2) format('woff2'), url(/_astro/inter-latin-500-normal.BL9OpVg8.woff) format('woff');
}
/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-600-normal.LgqL8muc.woff2) format('woff2'), url(/_astro/inter-latin-600-normal.CiBQ2DWP.woff) format('woff');
}
/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-latin-700-normal.Yt3aPRUw.woff2) format('woff2'), url(/_astro/inter-latin-700-normal.BLAVimhd.woff) format('woff');
}
/* body text on the hand-written pages (system.css): a text serif, easier to read small than Cormorant */
/* newsreader-latin-400-normal */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/newsreader-latin-400-normal.BFBkh4jY.woff2) format('woff2'), url(/_astro/newsreader-latin-400-normal.gRTjlS2D.woff) format('woff');
}
/* newsreader-latin-400-italic */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/newsreader-latin-400-italic.CEihAR-f.woff2) format('woff2'), url(/_astro/newsreader-latin-400-italic.CNZoH1hn.woff) format('woff');
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; color: #5E1823; }
/* the footer sits at the bottom of the screen on pages shorter than it (Contact) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; }

/* ---- one page, one variant on screen ------------------------------------------------
   Every page renders its desktop (1440), tablet (800) and mobile (390) boards; the viewport
   picks one. Breakpoints follow the boards' own container queries (tablet <=1079, mobile <=640). */
.b { display: none; }
@media (min-width: 1080px) { .v-d { display: block; } }
@media (min-width: 641px) and (max-width: 1079.98px) { .v-t { display: block; } }
@media (max-width: 640.98px) { .v-m { display: block; } }

/* ==== STOPGAP: no tablet boards for Home, Thesis, Services, About (Tim, 2026-10-31) ======
   Below 1080px these four pages use the mobile layout as a centered column, capped at 640px,
   on white. Delete this block (and the no-t class in src/components/Page.astro) when real
   tablet boards replace it. */
@media (min-width: 641px) and (max-width: 1079.98px) {
  .no-t .v-m { display: block; }
  .no-t .v-m .pg { max-width: 640px; margin-left: auto; margin-right: auto; }
}
/* ==== end of stopgap ==================================================================== */

/* Keyboard focus, in the site's maroon (the boards define no focus style) */
:focus-visible { outline: 2px solid #5E1823; outline-offset: 3px; }
.b button:focus-visible, .b a:focus-visible { outline-offset: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 400; padding: 10px 14px;
  background: #FFFFFF; color: #5E1823; border: 1px solid #5E1823;
  font: 500 11px/1.5 Inter, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase;
}
.skip:focus { top: 12px; }

/* Videos wait for their poster until they are on screen (src/scripts/site.ts) */
video[data-autoplay] { background: #EFE9E8; }
/* Lightbox, from the category boards' "lightbox v2" rules. One overlay per page, outside the
   board variants. Videos are sized by their own aspect (--ar, set by src/scripts/site.ts):
   height = min(86vh, 88vw / aspect); the Restaurant boards' 156vw is that rule for 9:16. */
.lx{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:lxin .3s ease-out both;font-family:Inter,system-ui,sans-serif}
.lx[hidden]{display:none}
@keyframes lxin{from{opacity:0}to{opacity:1}}
.lx-bg{position:absolute;inset:0;z-index:0;cursor:pointer} /* closes the viewer; CSS has no 'close' cursor (Tim) */
.lx-f{position:relative;z-index:1;margin:0;display:flex;max-width:min(88vw,1600px);touch-action:pan-y}
.lx-m{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;object-fit:contain;box-shadow:0 24px 60px -28px rgba(63,9,16,.4)}
video.lx-m{background:#FFFFFF;height:min(86vh,calc(88vw / var(--ar,1)))}
video.lx-m.lx-g{background:none}
.lx-b{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:52px;height:52px;padding:0;border-radius:50%;background:rgba(255,255,255,.55);border:1.5px solid #5E1823;color:#5E1823;cursor:pointer;transition:background .2s ease,transform .2s ease}
.lx-b:hover{background:rgba(94,24,35,.1)}
.lx-b[hidden]{display:none}
.lx-b svg{width:22px;height:22px;stroke:#5E1823;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lx-p{left:max(12px,2vw);top:50%;transform:translateY(-50%)}
.lx-n{right:max(12px,2vw);top:50%;transform:translateY(-50%)}
.lx-x{top:20px;right:max(16px,3vw)}
.lx-c{position:absolute;z-index:2;bottom:22px;left:0;right:0;text-align:center;font-size:11px;color:#7A3540;pointer-events:none;letter-spacing:.2em;text-transform:uppercase;font-weight:500;line-height:1.5}
/* Phones (Tim, 2026-10-31): previous/next at the bottom, either side of the counter; a slightly
   lighter backdrop; media kept clear of the bottom controls */
@media (max-width:640px){
 .lx{background:rgba(255,255,255,.66)}
 .lx-b{width:44px;height:44px}.lx-b svg{width:20px;height:20px}.lx-x{top:12px;right:12px}
 .lx-p,.lx-n{top:auto;bottom:max(10px,env(safe-area-inset-bottom));transform:none}
 .lx-p{left:calc(50% - 98px)}.lx-n{right:calc(50% - 98px)}
 .lx-c{bottom:calc(max(10px,env(safe-area-inset-bottom)) + 14px)}
 .lx-m{max-height:calc(100svh - 150px)}
 video.lx-m{height:min(calc(100svh - 150px),calc(88vw / var(--ar,1)))}
}
@media (prefers-reduced-motion:reduce){.lx{animation:none !important}}
html.lx-open{overflow:hidden}
/* ==== Tim's edits on top of the boards =====================================================
   These rules adjust the imported board pages where Tim asked. They load after the board CSS
   and use !important where they override the boards' inline styles. Started 2026-10-31.
   Since 2026-11-02 the nav and footer are shared components (src/components/Nav.astro,
   Footer.astro, styled in system.css), so the board nav and footer rules are gone. */

/* ---- Media that opens in the lightbox: the pointing hand, not the zoom-in magnifier. */
.b button.gi, .b .st button.cell { cursor: pointer !important; }

/* ---- Home: one size for the section headlines and one for the text under them.
   Board: 3.6111cqw (52px at 1440, ~62px at 1728, no ceiling) and 1.1806cqw. Now 40px and 15px
   at 1440, scaling with the page but held between a floor and a ceiling. */
.b-home-d :is([data-anchor="thesis"], [data-anchor="services"], [data-anchor="about"], [data-anchor="contact"]) h3.dd {
  font-size: clamp(26px, 2.7778cqw, 44px) !important;
}
.b-home-d :is([data-anchor="thesis"], [data-anchor="services"], [data-anchor="about"], [data-anchor="contact"]) p.p {
  font-size: clamp(13px, 1.0417cqw, 16px) !important;
}

/* ---- Home Services: with the smaller headline, the board's fixed positions left big gaps, so
   headline, text and list now flow one under the other (starting where the board's headline
   starts: 13.17% of the 1440:820 stage = 7.5cqw). Label, rule, photo and the "How I can help"
   link keep their board positions. */
.b-home-d [data-anchor="services"] .st > .it:is(:nth-child(3), :nth-child(4), :nth-child(5)) {
  position: relative !important; top: auto !important; left: auto !important; margin-left: 4.4444%;
}
.b-home-d [data-anchor="services"] .st > .it:nth-child(3) { margin-top: 7.5cqw; }
.b-home-d [data-anchor="services"] .st > .it:nth-child(4) { margin-top: 2.2222cqw; }
.b-home-d [data-anchor="services"] .st > .it:nth-child(5) { margin-top: 3.3333cqw; }

/* ---- Home About: taller list rows (board: .75em on desktop, 13px on mobile). */
.b-home-d [data-anchor="about"] .ll > li { padding-top: 1.15em !important; padding-bottom: 1.15em !important; }
.b-home-m [data-anchor="about"] .ll > li { padding-top: 19px !important; padding-bottom: 19px !important; }

/* ---- Home Work: as wide as the other sections (no 1440 cap), cards in three columns that
   scale with the page; card titles smaller to match the new headline scale. */
.b-home-d [data-anchor="work"] .wrap { max-width: none !important; }
.b-home-d [data-anchor="work"] .st { aspect-ratio: auto !important; overflow: visible !important; }
.b-home-d [data-anchor="work"] .wrap { padding-top: 7.6389% !important; } /* 110px at 1440, scaling */
.b-home-d [data-anchor="work"] .st > .it:first-child { position: relative !important; top: auto !important; left: auto !important; margin-left: 4.4444%; }
.b-home-d [data-anchor="work"] .st > .it[aria-hidden] { position: relative !important; top: auto !important; left: auto !important; margin: 1.6667cqw 0 0 4.4444%; }
.b-home-d .wk-cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 4.1667%; margin: 3.3333cqw 4.4444% 0; }
.b-home-d .wk-col { display: flex; flex-direction: column; gap: 4.1667cqw; }
.b-home-d .wk-card h3.dd { font-size: clamp(20px, 1.9444cqw, 34px) !important; }
.b-home-d .wk-card:hover { opacity: 1; }
.b-home-d .wk-card .cell > img { transition: filter .4s ease; }
.b-home-d .wk-card:hover .cell > img { filter: brightness(1.06); }

/* ---- Home Contact: a flowing layout instead of a fixed-height stage, so the contact form fits
   under the reply line; the list on the right is narrower (a third of the width, was 43%). */
.b-home-d [data-anchor="contact"] .st {
  aspect-ratio: auto !important; overflow: visible !important;
  display: grid; grid-template-columns: 44.4444% 1fr 33.3333%;
  padding: 2.0833cqw 4.4444% 4.1667cqw; box-sizing: border-box;
}
.b-home-d [data-anchor="contact"] .st > .it { position: relative !important; left: auto !important; top: auto !important; width: auto !important; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(1) { grid-column: 1 / -1; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(2) { grid-column: 1 / -1; margin-top: 1.25cqw; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(3) { grid-column: 1; grid-row: 3; margin-top: 3.3333cqw; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(4) { grid-column: 1; grid-row: 4; margin-top: 1.9444cqw; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(5) { grid-column: 3; grid-row: 3 / span 2; margin-top: 2.9167cqw; align-self: start; }
.b-home-d [data-anchor="contact"] .cf { max-width: none; }

/* ==== Round 2 (Tim, 2026-10-31) ============================================================ */

/* ---- Home hero: "AURA CHU" a little higher, more room for the text under it (SVG units: the
   hero's 1440 x 820 drawing, so the move scales with the hero). */
.b-home-d [data-anchor="top"] .wm { transform: translateY(-48px); }

/* ---- Home: Thesis, Services and About headlines a bit larger than Contact's (round 1 set all
   four to 2.7778cqw). */
.b-home-d :is([data-anchor="thesis"], [data-anchor="services"], [data-anchor="about"]) h3.dd {
  font-size: clamp(28px, 3.125cqw, 50px) !important;
}

/* ---- Home CTAs: the same, slightly larger space above each (48px at 1440). Services' link
   leaves the bottom of the section and follows its list like the others. */
.b-home-d [data-anchor="thesis"] div:has(> a.cta),
.b-home-d [data-anchor="about"] div:has(> a.cta) { margin-top: 3.3333cqw !important; }
.b-home-d [data-anchor="services"] .st > .it:nth-child(6) {
  position: relative !important; top: auto !important; left: auto !important;
  margin: 3.3333cqw 0 0 4.4444%;
}

/* ---- Home Services list: first line like the others (light), no numbers, taller rows. */
.b-home-d [data-anchor="services"] ul.ll { border-top-color: rgba(94,24,35,.3) !important; }
.b-home-d [data-anchor="services"] ul.ll .ddi { display: none !important; }
.b-home-d [data-anchor="services"] ul.ll > li { padding-top: 1.15em !important; padding-bottom: 1.15em !important; }

/* ---- Home Work: the category links (clickable) larger; the project count at the size of the
   WORK label; more space at the bottom of the section. */
.b-home-d [data-anchor="work"] .st > .it:first-child > div:nth-child(2) .sn { font-size: max(12px, 0.9722cqw) !important; }
.b-home-d [data-anchor="work"] .st > .it:first-child > div:nth-child(3) .sn { font-size: max(11px, 0.8333cqw) !important; }
.b-home-d section[data-anchor="work"] { padding-bottom: 11.1111% !important; } /* 160px at 1440, was 110px */

/* ---- Home Contact: information list on the left (under the reply line), form on the right.
   The reply line's box is dissolved (display: contents) so its text and the form become
   separate grid items. */
.b-home-d [data-anchor="contact"] .st > .it:nth-child(4) { display: contents; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(4) > p { grid-column: 1; grid-row: 4; margin-top: 1.9444cqw; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(4) > .cf { grid-column: 3; grid-row: 3 / span 3; align-self: start; margin-top: 2.9167cqw; }
.b-home-d [data-anchor="contact"] .st > .it:nth-child(5) { grid-column: 1 !important; grid-row: 5 !important; margin-top: 2.5cqw !important; }
.b-home-d [data-anchor="contact"] .cf .cf-f:first-of-type { margin-top: 0; }
/* phones: the list first, then the form */
.b-home-m section[data-anchor="contact"] { display: flex; flex-direction: column; }
.b-home-m section[data-anchor="contact"] > .cf { order: 1; }

/* ==== Round 3 (Tim, 2026-10-31) ============================================================ */

/* ---- Text links underline on hover, the underline fading in. Links that are already
   underlined (.ul, .cta, .tl) keep theirs; links around photos and the Contents rows don't
   get one. Every page. */
.b a:not(.ul):not(.cta):not(.lead):not(.wk-card):not(:has(img, video)) {
  text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .28em;
  text-decoration-color: transparent; transition: text-decoration-color .3s ease, opacity .3s ease;
}
.b a:not(.ul):not(.cta):not(.lead):not(.wk-card):not(:has(img, video)):hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .b a { transition: none !important; } }

/* ---- Home Work header: more room around the slashes between the category links; the project
   count without its box, in normal case. */
.b-home-d [data-anchor="work"] .st > .it:first-child > div:nth-child(2) .sn { word-spacing: .55em; }
.b-home-d [data-anchor="work"] .st > .it:first-child > div:nth-child(3) .sn {
  border: 0 !important; padding: 0 !important; text-transform: none !important; letter-spacing: .02em !important;
}

/* ---- Home Work cards: larger titles (no italics; the copy was rewritten without them), larger
   "View projects / 2 projects" line. The three columns end level: each column stretches to the
   tallest, and the photos take up the difference (cropped, never distorted), so the cards stay
   staggered and only the column widths are equal. */
.b-home-d .wk-card h3.dd { font-size: clamp(24px, 2.3611cqw, 40px) !important; }
:is(.b-home-d, .b-home-m) [data-anchor="work"] h3 i { font-style: normal; }
.b-home-d .wk-card .sn { font-size: max(11px, 0.8333cqw) !important; }
.b-home-d .wk-col > .wk-card { display: flex !important; flex-direction: column; flex: 1 0 auto; }
.b-home-d .wk-card > .cell { flex: 1 0 auto; }

/* ---- Home About: the list's top line like the lines below it. */
:is(.b-home-d, .b-home-m) [data-anchor="about"] ul.ll { border-top-color: rgba(94,24,35,.3) !important; }

/* ---- Home Contact: the left column narrower, the form wider; larger values in the list. */
.b-home-d [data-anchor="contact"] .st { grid-template-columns: 37.5% 1fr 50% !important; }
.b-home-d [data-anchor="contact"] .ll .lead i.ddi { font-size: max(15px, 1.3194cqw) !important; }

/* ---- Category pages (Tim, 2026-11-02): the category links as in the homepage Work header
   (CatLinks.astro) at the top and the bottom; each project's first gallery, or the first row of its
   only gallery, above Context / Approach / Outcome (.sw-lead). */
.b .cl-bottom { margin-top: 28px; padding-bottom: 64px; }
.b .proj .sw.sw-lead { margin-top: max(40px, 3.6cqw); }
/* the homepage's category line as the subtitle, closer under the title (desktop: its top moved up
   in the boards, 56.7% → 50%) */
.b .ch-in .ch-s { margin-top: 12px; }
/* a gallery after Context / Approach / Outcome (or Fashion's disclaimer) as far below it as the lead
   gallery is above it */
.v-d .proj :is(.ap, .disc) + .sw { margin-top: max(72px, 6.4cqw); }
/* ==== The site's own design system (Tim, 2026-11-02) ======================================
   For everything written by hand since the boards were retired: the shared nav and footer,
   /work, /contact and the new homepage. The board pages keep their own sizes for now.

   Eight type sizes, nothing in between:
     wordmark (hero only, in its SVG) · display (magazine article title, light) · h2 section
     heading · h3 sub-heading · lead · body · small · label (uppercase).
   Faces: titles are Cormorant (serif), body text is Newsreader (a text serif, legible small),
   subtitles and eyebrows are Inter (sans). Serif, sans, caps and italic are a choice of face
   at one of those sizes, not a new size: .t-sub and .t-cap are the lead size in Inter. */
:root {
  --maroon: #5E1823;
  --maroon-2: #7A3540;
  --beige: #E6DCD0;
  --hair: rgba(94, 24, 35, .3);
  --gutter: 4.4444vw;            /* 64px at 1440, the boards' page edge */
  --fs-display: clamp(44px, 5.5556vw, 88px);
  --fs-h2: clamp(32px, 3.4722vw, 50px);
  --fs-h3: clamp(24px, 2.2222vw, 32px);
  --fs-lead: clamp(19px, 1.5278vw, 22px);
  --fs-body: 17px;
  --fs-small: 13px;
  --fs-label: 12px;
  --serif: 'Cormorant Garamond', serif;
  --text: Newsreader, Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}
@media (max-width: 759.98px) { :root { --gutter: 20px; } }

.ds { color: var(--maroon); font-family: var(--text); font-size: var(--fs-body); line-height: 1.6; }
.ds h1, .ds h2, .ds h3, .ds p, .ds ul, .ds ol, .ds dl, .ds dd { margin: 0; padding: 0; }
.ds a { color: inherit; }
.ds img, .ds video { display: block; max-width: 100%; }

/* display: large, light and tight, like a magazine article title (an experiment on the
   preview homepage, About and Services; .t-caps sets it in capitals) */
.t-display { font: 300 var(--fs-display)/.98 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
/* in capitals it's set tighter still, like a Vogue cover line */
.t-display.t-caps { text-transform: uppercase; letter-spacing: -.035em; line-height: .86; }
/* a magazine headline: light and slightly tight (the hero line, Philosophy's title) */
.t-h2 { font: 300 var(--fs-h2)/1.08 var(--serif); letter-spacing: -.015em; }
.t-h2 em, .t-display em { font-style: italic; }
.t-h3 { font: 500 var(--fs-h3)/1.12 var(--serif); }
.t-lead { font: 500 var(--fs-lead)/1.4 var(--serif); }
/* subtitle under a title: sans, extra light, at the body size */
.t-sub { font: 200 var(--fs-body)/1.5 var(--sans); text-wrap: pretty; }
/* sans capitals at the lead size: the Work category names */
.t-cap { font: 500 var(--fs-lead)/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.t-body { font: 400 var(--fs-body)/1.6 var(--text); }
.t-small { font: 400 var(--fs-small)/1.5 var(--sans); }
.t-label { font: 500 var(--fs-label)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.t-it { font-family: var(--serif); font-style: italic; font-weight: 500; }
/* the Roman numeral of a section, as in the hero's Contents list */
.sh-n { display: inline-block; min-width: 2.4em; font: italic 500 13px/1 var(--serif); letter-spacing: .04em; text-transform: none; }

/* calls to action: the label style (sans capitals), underlined; on the preview homepage and the
   inner pages (.ip: Philosophy, About, Services) they end in an arrow, which isn't underlined */
.cta-l { font: 500 var(--fs-label)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .32em; text-decoration-thickness: 1px; }
.cta-l:hover { opacity: .78; }
.ph .cta-l::after, .ip .cta-l::after { content: "→"; display: inline-block; margin-left: .6em; text-decoration: none; }
/* text links that underline on hover: the one hover underline, fading in (the footer's links too) */
.hov, .sf-bar a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; text-decoration-color: transparent; transition: text-decoration-color .3s ease; }
.hov:hover, .hov[aria-current], .sf-bar a:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .hov, .sf-bar a { transition: none; } }

.wrap-g { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- section header: the one style. Label on the left, an optional line on the right, a
   full-width rule under both. */
.sh { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--maroon); }
.sh-r { text-align: right; }
/* the categories in the Work header lines (homepage and /work) and on the category pages
   (src/components/CatLinks.astro) are separated by slashes */
.sh-r a + a::before, .cat-links a + a::before { content: "/"; margin: 0 .75em; display: inline-block; text-decoration: none; }
.cat-links { color: var(--maroon); }
.cat-links a { color: inherit; }
@media (max-width: 759.98px) { .cat-links { line-height: 2; } }

/* ---- page titles (h1 of /work, Philosophy, About, Services): the homepage's section titles,
   set close; the subtitle under one is body text in a narrower column */
.pt { line-height: .98; }
.ip-sub { margin-top: 1.1em !important; max-width: 30em; line-height: 1.5; }

/* the small arrow after the large email address, saying it opens elsewhere (the mail app) */
.ext-i { display: inline-block; width: .3em; height: .3em; margin-left: .2em; vertical-align: .36em; overflow: visible; }

/* ---- label-above-value grid (as on the category pages); .lv-stack: one fact per row, ruled */
.lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.lv > div { min-width: 0; }
.lv dt { margin-bottom: 6px; color: var(--maroon-2); }
.lv .wide { grid-column: 1 / -1; }
.lv.lv-stack { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--hair); }
.lv-stack > div { padding: 14px 0 15px; border-top: 1px solid var(--hair); }
.lv-stack dt { margin-bottom: 4px; }

/* ---- ruled rows: one item per row, its name on the left and its value on the right (the
   homepage's About facts, Services and Contact details) */
.rows { list-style: none; border-bottom: 1px solid var(--hair); }
.rows > * { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; padding: 14px 0 15px; border-top: 1px solid var(--hair); }
.rows > * > :first-child { flex: none; }
.rows > * > :last-child { text-align: right; }
.rows dt { color: var(--maroon-2); }
/* values as short comma-separated lists, a little above body size in light italic for legibility */
.rows .rv { font-size: 18.5px; font-weight: 400; line-height: 1.4; }

/* ---- Contents list: dotted leaders, reserved for Contents lists only */
.contents { list-style: none; }
.contents a { display: flex; align-items: baseline; gap: .6em; padding: .5em 0; text-decoration: none; }
.contents .num { min-width: 1.9em; font-size: 13px; }
.contents .tl { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; white-space: nowrap; }
.contents a::after { content: ""; order: 1; flex: 1; height: 2px; min-width: 1.5em; background: radial-gradient(circle at center, var(--maroon) .42px, transparent .75px) 0 100% / 3px 2px repeat-x; }
.contents .val { order: 2; color: var(--maroon-2); white-space: nowrap; font-size: var(--fs-body); line-height: 1.2; text-align: right; }
@media (max-width: 359.98px) { .contents .val { white-space: normal; } }

/* ==== shared nav ==================================================================== */
.sn { position: sticky; top: 0; z-index: 80; background: #FFFFFF; border-bottom: 1px solid rgba(94, 24, 35, .28); color: var(--maroon); }
.sn-in { position: relative; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); }
/* set like the hero wordmark: no added tracking, so the R and the A touch */
.sn-brand { font: 500 22px/1 var(--serif); letter-spacing: 0; text-transform: uppercase; color: var(--maroon); text-decoration: none; }
.sn-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 2.6em; white-space: nowrap; }
.sn a { color: var(--maroon); }
.sn-r { display: flex; align-items: center; gap: 18px; }
.sn-lang a { text-decoration: none; }
.sn-lang a.ul { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.sn-menu { display: none; }
.sn-menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.sn-menu summary::-webkit-details-marker { display: none; }
.sn-menu .mc { display: none; }
.sn-menu[open] .mc { display: inline; }
.sn-menu[open] .mo { display: none; }
/* the open menu fills the screen under the bar (which keeps the wordmark and Close) */
.sn-panel { position: fixed; top: 52px; left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; background: #FFFFFF; padding: 12px var(--gutter) max(28px, env(safe-area-inset-bottom)); }
.sn-pages a { display: block; padding: 16px 0; border-bottom: 1px solid var(--hair); font: 500 var(--fs-h2)/1.1 var(--serif); letter-spacing: 0; text-transform: none; text-decoration: none; }
.sn-pages a[aria-current] { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.sn-more { display: flex; flex-direction: column; gap: 14px; }
.sn-more a { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
.sn-more .sn-lang a { text-decoration: none; }
.sn-more .sn-lang a.ul { text-decoration: underline; }
html:has(.sn-menu[open]) { overflow: hidden; }
/* it fades in on opening and out on closing (site.ts holds it open while .closing plays) */
.sn-menu[open] .sn-panel { animation: sn-in .35s ease both; }
.sn-menu.closing .sn-panel { animation: sn-out .3s ease both; }
@keyframes sn-in { from { opacity: 0; } }
@keyframes sn-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sn-menu .sn-panel { animation: none !important; } }
@media (max-width: 1079.98px) {
  .sn-in { height: 52px; }
  .sn-brand { font-size: 20px; }
  .sn-links, .sn-r > .sn-lang { display: none; }
  .sn-menu { display: block; }
}

/* ==== shared footer ================================================================= */
.sf { padding: 56px var(--gutter) 40px; color: var(--maroon); }
.sf-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; padding-top: 16px; border-top: 1px solid var(--maroon); }
/* the wordmark with the copyright and Privacy beside it on the left, Back to top on the right */
.sf-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.sf-bar .sn-brand { font-size: 20px; }
/* Back to top: the full label on wide screens; on phones "Top" with an up arrow */
.sf-top-s, .sf-top svg { display: none; }
.sf-top svg { width: .95em; height: .95em; margin-left: .55em; overflow: visible; }
@media (max-width: 759.98px) {
  /* the wordmark with the copyright beside it, Privacy under them; Top level with the wordmark */
  .sf-bar { align-items: baseline; }
  .sf-l { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 8px 16px; }
  .sf-legal { display: contents; }
  .sf-dot { display: none; }
  .sf-priv { grid-column: 1 / -1; }
  .sf-top:not([hidden]) { display: inline-flex; align-items: center; }
  .sf-top-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sf-top-s, .sf-top svg { display: block; }
}

/* ---- load-in (marked by the inline script in src/layouts/Base.astro): text fades up, media wipes
   up from its bottom edge */
.ld { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.ld.in { opacity: 1; transform: none; }
.ld-m { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.65, 0, .25, 1); }
.ld-m.in { clip-path: inset(0 0 0 0); }
.ld-reset { transition: none !important; }
main:focus { outline: none; }

/* visually hidden, still read by screen readers */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }