/* SOURCE-FORMATTED — DO NOT HAND-MINIFY. Phase 2A.1: this stylesheet is kept expanded on purpose — one selector per line in a selector list, one declaration per line, two-space indent inside @media. It was semi-minified, which made every change unreviewable: a one-property fix and a wholesale rewrite produced the same diff. Minify at deploy, never in source. Source order is also load-bearing here; several rules depend on later-wins cascade, so do not reorder or merge selectors. */ /* Shared portfolio chrome: one readable header and footer treatment across every page system. AUTHORITY --------- This file is the LAST stylesheet in on all 22 routes, so plain class selectors win on source order alone. The rules that must be universal (position, z-index, header band height, tap-target sizes, type floors) are therefore written with real class specificity and carry NO `!important`. Previously every selector here was `:where(...)` — specificity 0-0-0 — which lost to every page-level `.site-header{}` rule, so the "universal" header was sticky on 9 routes and fixed on 13, at z-index 20 / 50 / 80. `:where()` is kept ONLY for cosmetic defaults a page system is allowed to override (background, colour, grid tracks, type family, transitions). That is deliberate: raising those would silently repaint four different art directions. SAFE AREA --------- Fixed top and bottom chrome adds env(safe-area-inset-*) so it clears the notch and the iOS home indicator (F-11 / P3.4). Every inset resolves to 0px until `` ships in the HTML — that lives in markup owned elsewhere and must NOT land before these insets do. */ :root { --chrome-edge: clamp(18px,3vw,46px); --chrome-h: 72px; /* header band height, notch excluded */ --chrome-tap: 44px; /* WCAG 2.2 / Apple HIG minimum target */ --chrome-paper: #171310; --chrome-bg: rgba(238,226,208,.98); --chrome-rule: rgba(23,19,16,.18); /* One header height for every page system. Overrides the fallback in tokens.css: the chrome owns its own metric, and tokens.css only reaches 10 of 22 routes. */ --header-h: calc(var(--chrome-h) + env(safe-area-inset-top,0px)); } /* --- Header: cosmetic defaults (a page system may override these) --------- */ :where(.site-header,.archive-header) { align-items: center; background: transparent; border-bottom: 1px solid transparent; color: var(--chrome-paper); display: grid; font-family: Inter,"Helvetica Neue",Arial,sans-serif; grid-template-columns: 1fr auto 1fr; text-shadow: none; transition: background-color .35s ease,border-color .35s ease,color .35s ease; } /* --- Header: structure (universal, wins everywhere) ---------------------- */ .site-header, .archive-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; min-height: calc(var(--chrome-h) + env(safe-area-inset-top,0px)); padding-top: env(safe-area-inset-top,0px); padding-bottom: 0; padding-left: max(var(--chrome-edge),env(safe-area-inset-left,0px)); padding-right: max(var(--chrome-edge),env(safe-area-inset-right,0px)); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .home-page .site-header, .home-page .archive-header { background: transparent; border-bottom-color: transparent; color: #faf8f3; backdrop-filter: none; -webkit-backdrop-filter: none; } body:not(.home-page) .site-header, body:not(.home-page) .archive-header { background: transparent; border-bottom-color: transparent; color: var(--chrome-hero-ink, #171310); backdrop-filter: none; -webkit-backdrop-filter: none; } body.resume-page .site-header, body.resume-page .archive-header { border-bottom-color: #171310; } body:not(.home-page) .site-header.is-scrolled, body:not(.home-page) .archive-header.is-scrolled { background: var(--chrome-scrolled-bg, var(--chrome-bg)); border-bottom-color: var(--chrome-scrolled-rule, var(--chrome-rule)); color: var(--chrome-scrolled-ink, #171310); } .contact-page .site-header:not(.is-scrolled), .contact-page .archive-header:not(.is-scrolled) { color: #faf8f3; } /* Inner row: tracks stay low-specificity so each page system keeps its own composition. */ :where(.site-header,.archive-header)>:where(.header-inner,.site-header__inner) { align-items: center; display: grid; grid-column: 1/-1; grid-template-columns: 1fr auto 1fr; min-height: var(--chrome-h); width: 100%; } /* --- Wordmark ------------------------------------------------------------ */ :where(.site-header,.archive-header) :where(.mark,.brand), :where(.site-header,.archive-header)>.mark { color: inherit; text-decoration: none; white-space: nowrap; } .site-header :is(.mark,.brand)>span, .archive-header :is(.mark,.brand)>span { display: none; } /* The wordmark is a link: font-size:0 hides the source text so the ::after M / M can replace it, but the link itself still needs a real 44px hit box. */ .site-header :is(.mark,.brand), .archive-header :is(.mark,.brand) { align-items: center; display: inline-flex; font-size: 0; min-height: var(--chrome-tap); } :where(.site-header,.archive-header) :where(.mark,.brand)::after { content: "M / M"; font: 400 25px/1 "Bodoni Moda",Bodoni,Georgia,serif; letter-spacing: .08em; } .site-header .mm-monogram { display: none; } /* --- Primary nav --------------------------------------------------------- */ /* Container stays low-specificity: on the components pages the mobile panel is a stretched column, and forcing align-items:center here would shrink-wrap every link. */ :where(.site-header,.archive-header) :where(nav,.nav,.site-nav) { align-items: center; display: flex; gap: clamp(20px,2.2vw,34px); } /* Links DO get authority — this is the 44px tap-target rule that used to be ignored. */ .site-header :is(nav,.nav,.site-nav) a, .archive-header :is(nav,.nav,.site-nav) a { align-items: center; color: inherit; display: inline-flex; font-size: 14px; font-weight: 500; justify-content: center; letter-spacing: .01em; /* 44x44 without inflating the type or the visual gap between items (P2.1). */ min-height: var(--chrome-tap); min-width: var(--chrome-tap); /* No padding here on purpose: the minimums guarantee the 44x44 box, and each page system keeps its own spacing so the nav rhythm is unchanged. */ text-decoration: none; text-transform: none; } .site-header :is(nav,.nav,.site-nav) a[href="/contact/"], .archive-header :is(nav,.nav,.site-nav) a[href="/contact/"] { border: 1px solid currentColor; border-radius: 999px; justify-content: center; min-height: var(--chrome-tap); padding: 0 22px; position: absolute; right: max(var(--chrome-edge),env(safe-area-inset-right,0px)); top: 50%; transform: translateY(-50%); text-decoration: none; } .site-header :is(nav,.nav,.site-nav) a:hover, .site-header :is(nav,.nav,.site-nav) a:focus-visible, .site-header :is(nav,.nav,.site-nav) a[aria-current=page], .archive-header :is(nav,.nav,.site-nav) a:hover, .archive-header :is(nav,.nav,.site-nav) a:focus-visible, .archive-header :is(nav,.nav,.site-nav) a[aria-current=page] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; } body:not(.home-page) .site-header :is(nav,.nav,.site-nav) a[aria-current=page], body:not(.home-page) .archive-header :is(nav,.nav,.site-nav) a[aria-current=page] { text-decoration-color: #47121d; } .site-header :is(nav,.nav,.site-nav) a[aria-current=page]::after, .archive-header :is(nav,.nav,.site-nav) a[aria-current=page]::after { display: none; } /* --- Header utilities ---------------------------------------------------- */ :where(.site-header,.archive-header) :where(.counter,.project-total,.header-resume) { color: rgba(250,248,243,.76); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-weight: 600; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .site-header .header-cta, .archive-header .header-cta { display: none; } .site-header :is(.counter,.project-total,.header-resume), .archive-header :is(.counter,.project-total,.header-resume) { display: none; font-size: 12px; } .site-header>.header-contact, .archive-header>.header-contact { align-items: center; border: 1px solid currentColor; border-radius: 999px; display: inline-flex; font-size: 14px; font-weight: 500; justify-content: center; justify-self: end; letter-spacing: .01em; min-height: var(--chrome-tap); padding: 10px 22px; text-decoration: none; text-transform: none; } /* --- Footer -------------------------------------------------------------- */ /* Surface + colour stay low-specificity so each page system keeps its own footer band. */ :where(.site-footer,.archive-footer) { background: transparent; border-top: 1px solid currentColor; color: inherit; font-family: Inter,"Helvetica Neue",Arial,sans-serif; line-height: 1.45; } :where(.site-footer,.archive-footer) a, .portfolio-finale__footer a { color: inherit; text-underline-offset: 5px; } .site-footer, .archive-footer, .portfolio-finale__footer { font-size: 14px; } .site-footer>:is(.footer-inner,.site-footer__inner), .archive-footer>:is(.footer-inner,.site-footer__inner) { font-size: 14px; } .portfolio-finale__footer { font-family: Inter,Arial,sans-serif; line-height: 1.45; } :where(.site-footer,.archive-footer) nav, .portfolio-finale__footer nav { display: flex; gap: clamp(18px,2vw,30px); } /* Footer links are the smallest targets on the site — give them a real hit area. */ .site-footer a, .archive-footer a, .portfolio-finale__footer a, .footer-nav a { align-items: center; display: inline-flex; font-size: 14px; justify-content: center; min-height: var(--chrome-tap); min-width: var(--chrome-tap); text-decoration: none; } .site-footer a:hover, .site-footer a:focus-visible, .archive-footer a:hover, .archive-footer a:focus-visible, .portfolio-finale__footer a:hover, .portfolio-finale__footer a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; } /* --- Back-links ---------------------------------------------------------- */ .project-return, .page-return { font: 500 13px/1.2 Inter,"Helvetica Neue",Arial,sans-serif; letter-spacing: .08em; margin: 0 0 clamp(22px,4vw,48px); text-transform: uppercase; } .project-return a, .page-return a { align-items: center; color: inherit; display: inline-flex; min-height: var(--chrome-tap); text-decoration: none; } .project-return a:hover, .project-return a:focus-visible, .page-return a:hover, .page-return a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; } /* --- One focus ring for the whole site (P2-10) --------------------------- */ /* currentColor so the ring is legible against cream, ink and photographic chrome alike; a page may opt into a branded ring by setting --focus-ring. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring,currentColor); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } @media (max-width:760px) { :root { --chrome-h: 64px; } .site-header, .archive-header { padding-left: max(18px,env(safe-area-inset-left,0px)); padding-right: max(18px,env(safe-area-inset-right,0px)); } :where(.site-header,.archive-header)>:where(.header-inner,.site-header__inner) { min-height: var(--chrome-h); } .site-header :is(.mark,.brand), .archive-header :is(.mark,.brand), .site-header .brand__mark { font-size: 0; } :where(.site-header,.archive-header) :where(nav,.nav,.site-nav) { gap: 0; } .site-header :is(nav,.nav,.site-nav) a, .archive-header :is(nav,.nav,.site-nav) a { font-size: 13px; min-height: 48px; padding-inline: 10px; } .site-header :is(nav,.nav,.site-nav) a[href="/contact/"], .archive-header :is(nav,.nav,.site-nav) a[href="/contact/"] { position: static; transform: none; } .site-header :is(.counter,.project-total,.header-resume), .archive-header :is(.counter,.project-total,.header-resume) { font-size: 12px; } .site-footer, .archive-footer, .portfolio-finale__footer { font-size: 13px; } .site-footer>:is(.footer-inner,.site-footer__inner), .archive-footer>:is(.footer-inner,.site-footer__inner) { font-size: 13px; } .site-footer a, .archive-footer a, .portfolio-finale__footer a, .footer-nav a { font-size: 13px; } /* Fixed bottom nav bars (home, contact, work index) must clear the home indicator. */ .home-page .site-header nav, .contact-page .site-header nav, .work-page .archive-header nav { bottom: calc(12px + env(safe-area-inset-bottom,0px)); left: max(12px,env(safe-area-inset-left,0px)); right: max(12px,env(safe-area-inset-right,0px)); position: fixed; top: auto; transform: none; } .home-page .site-header, .home-page .archive-header { backdrop-filter: none; -webkit-backdrop-filter: none; } } /* Media reset — here because this is the only stylesheet that reaches all 22 routes. base.css already carries it but ships on 10 of them, which is exactly why nine images on the dossier pages rendered at their literal `height` ATTRIBUTE: that attribute maps to the CSS `height` property, which outranks `aspect-ratio` (that only applies when one axis is `auto`). With `width:100%` and no `height:auto`, a 1200x750 capture in a 155px-wide column rendered 155x750 with the picture filling 97px of it. Specificity 0-0-1, so any component rule that genuinely wants a fixed height still wins. */ img, video { height: auto; }