/* MESA — prints laid on a table. A grey name and a small mono print, the covers scattered across a white page in their own shapes, one photograph at a time on a collection page with its title beneath, the bio beside a photograph on the About page, and a foot of one line. */ /* Unlayered CSS, so it beats every Tailwind utility: every selector is scoped under [data-site-theme="mesa"], and nothing here may reach an element any other way (see _site.css for why). What a theme changes is a token or a part's own rule; a photographer's colours and type arrive in after this file and win over anything declared here. url() syntax, not a bare string: Propshaft digests only what sits inside url(), so a plain @import would point at a file production never serves. */ @import url("/assets/themes/_site-99ef2adf.css"); [data-site-theme="mesa"] { --site-logo-height: 2rem; --site-inset: clamp(1rem, 3.5vw, 3.125rem); --site-max-width: none; --site-brand-size: 2rem; --site-title-size: 2rem; --site-label-size: 0.8125rem; --site-label-case: none; --site-label-tracking: 0.06em; /* The vertical rhythm of the collage. */ --site-gap-large: clamp(3rem, 8vw, 7rem); } /* ---- The header: the name in grey, the pages and the links together ------ */ [data-site-theme="mesa"] [data-site-part="header"] { align-items: center; gap: 1rem 2.5rem; padding-block: 2.5rem 1.5rem; } [data-site-theme="mesa"] [data-site-part="brand"] { color: var(--site-ink-muted); letter-spacing: -0.01em; } [data-site-theme="mesa"] [data-site-part="header"] [data-site-part="nav"] { margin-inline-start: auto; font-family: var(--site-display-font); color: var(--site-ink-muted); } [data-site-theme="mesa"] [data-site-part="header"] [data-site-part="nav"] a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; } /* Under 80rem the row cannot hold a name and six pages, and flex wrapping dropped the nav under the name with its `auto` margin still pushing it right — a third shape at a third width. So the header is a grid there: the name on one row, the pages on their own full row beneath, the same shape from 1279px down to a phone. */ @media (max-width: 79.99rem) { [data-site-theme="mesa"] [data-site-part="header"] { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: 0.75rem; } [data-site-theme="mesa"] [data-site-part="header"] [data-site-part="nav"] { margin-inline-start: 0; } } /* On a phone the masthead is the name and the pages, 1.5rem above and 1rem below, and the pages wrap tighter than the shared row. */ @media (max-width: 47.99rem) { [data-site-theme="mesa"] [data-site-part="header"] { gap: 0.5rem; padding-block: 1.5rem 1rem; } [data-site-theme="mesa"] [data-site-part="header"] [data-site-part="nav"] > ul { gap: 0 1rem; } } /* ---- The words: prose in the display face, the small print in the mono -- */ [data-site-theme="mesa"] [data-site-part="tagline"] { font-family: var(--site-display-font); font-size: 1rem; letter-spacing: 0.047em; line-height: 1.1; max-width: 31rem; } /* The bio is prose, not a line: the display face at a reading size and leading, with no tracking — 0.047em over 1.1 is a setting for one line, and it was applied to paragraphs. */ [data-site-theme="mesa"] [data-site-part="bio"] { font-family: var(--site-display-font); font-size: 1.0625rem; line-height: 1.5; max-width: 31rem; } [data-site-theme="mesa"] [data-site-part="page-title"], [data-site-theme="mesa"] [data-site-part="contact-title"] { letter-spacing: -0.01em; line-height: 1.15; } /* ---- The collage --------------------------------------------------------- */ [data-site-theme="mesa"] [data-site-part="work"] { padding-block: 2.5rem 5rem; } [data-site-theme="mesa"] [data-site-part="collection-title"] { font-family: var(--site-body-font); font-size: var(--site-label-size); letter-spacing: var(--site-label-tracking); margin-top: 0.5rem; } /* ---- A collection page: the photograph, then its name ------------------- */ [data-site-theme="mesa"] [data-site-part="page"]:has([data-site-part="gallery"]) [data-site-part="work"] { padding-block: 1.5rem 1rem; } [data-site-theme="mesa"] [data-gallery-layout="slideshow_simple"] [data-site-part="slideshow-track"] { margin-inline: auto; max-width: 83%; } [data-site-theme="mesa"] [data-gallery-layout="slideshow_simple"] [data-site-part="frame"], [data-site-theme="mesa"] [data-gallery-layout="slideshow_simple"] [data-site-part="frame"] img { max-height: min(900px, 80svh); } [data-site-theme="mesa"] [data-site-part="page"]:has([data-site-part="gallery"]) [data-site-part="intro"] { gap: 0.75rem; padding-block: 1.5rem 1rem; } /* A grid names itself first (the title is the caption of one photograph, not of thirty), and the work follows with no second gap. */ [data-site-theme="mesa"] [data-site-part="page"]:has([data-site-part="gallery"]) [data-site-part="intro"] + [data-site-part="work"] { padding-block: 0.5rem 1rem; } [data-site-theme="mesa"] [data-site-part="page"]:has([data-site-part="gallery"]) [data-site-part="bio"] { font-family: var(--site-body-font); font-size: var(--site-label-size); letter-spacing: var(--site-label-tracking); line-height: 1.4; } [data-site-theme="mesa"] [data-site-part="caption"] { font-family: var(--site-body-font); } [data-site-theme="mesa"] [data-site-part="pagination"] { padding-block: 1rem 4rem; } /* ---- The About page: the words on the left, the photograph on the right -- */ /* The About page is the one page with a title and no gallery section — a collection page renders the section even when empty, and the home has no title — so it is told apart with :has() rather than a class. */ /* The title is the one heading on the page, so it is set at the title size in ink — the name above it is grey, and a 13px mono title (the old setting) measured the same size as the footer's labels and smaller than the bio it heads. */ [data-site-theme="mesa"] [data-site-part="page"]:has([data-site-part="page-title"]):not(:has([data-site-part="gallery"])) [data-site-part="intro"] { gap: 1.25rem; padding-block: 1.5rem 2rem; } [data-site-theme="mesa"] [data-site-part="about-photo"] { max-height: none; } /* The two columns are the shared sheet's; the intro starts at this theme's 1.5rem, and the photograph is capped at the collage's width. */ [data-site-theme="mesa"] { --site-about-top: 1.5rem; } @media (min-width: 64rem) { [data-site-theme="mesa"] [data-site-part="about-photo"] { max-width: 31rem; } } /* ---- A photograph on a phone ------------------------------------------- */ /* The stacked neighbours are the shared sheet's; untracked, each fits its half on one line in the mono. */ @media (max-width: 47.99rem) { [data-site-theme="mesa"] [data-site-part="photo-nav"] { letter-spacing: 0; } [data-site-theme="mesa"] [data-site-part="photo-nav"] a { text-wrap: nowrap; } } /* ---- The foot: one line ------------------------------------------------- */ [data-site-theme="mesa"] [data-site-part="footer"] { border-top: 0; padding-block: 4rem calc(3rem + env(safe-area-inset-bottom)); font-family: var(--site-body-font); font-size: var(--site-label-size); letter-spacing: var(--site-label-tracking); } [data-site-theme="mesa"] [data-site-part="footer-name"] { font-family: var(--site-body-font); font-size: var(--site-label-size); color: var(--site-ink-muted); } [data-site-theme="mesa"] [data-site-part="footer"] [data-site-part="credit"] { font-size: var(--site-label-size); color: inherit; }