/* ========================================================================== AMBERSTONE: theme layer Loaded after Source's built/screen.css, before {{ghost_head}}. 0. Fonts self-hosted variable faces 1. Tokens palette, surfaces, faces, radius, measure 2. Base body, headings, links 3. Chrome navigation, footer shell, Portal, cards 4. Mono anything measured or identified 5. Post blocks recipe and PROJ cards used inside posts 6. Homepage hero, diptych, latest strip, members gate 7. Collections show banners and card grids 8. Footer 9. Post article canvas, header, feature image, paywall 10. Late additions brand hero, featured post, foil titles, pages 11. Motion and print 12. Wide viewports 1600px and above Two tokens control most of the look: --am-radius and --am-measure. Surfaces are Cinema (dark, default) and Page (paper, .page on ). ========================================================================== */ /* ========================================================================== 0. FONTS: self-hosted variable faces, in assets/fonts/ ========================================================================== */ @font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/CabinetGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Switzer"; src: url("../fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Martian Mono"; src: url("../fonts/MartianMonoVF.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; } /* ========================================================================== 1. TOKENS Cinema (dark) is the default surface. Page (paper) applies via .page on for posts and pages only. ========================================================================== */ :root { --am-aubergine: #170E14; --am-aubergine-alt: #241722; --am-warm-white: #F2E9E4; --am-mute-dark: #8A7F86; --am-copper: #C87F4A; --am-amber-light: #EDC488; --am-paper: #EDE3DD; --am-ink: #241722; --am-mute-light: #5E4F58; --am-copper-deep: #95511F; /* Per-project accent. Overridden by post code injection. Sample once, derive twice โ€” see design.md ยง3.4. */ --am-accent: var(--am-copper); --font-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Cabinet Grotesk", var(--font-sans); --font-mono: "Martian Mono", ui-monospace, Menlo, Consolas, monospace; --font-serif: var(--font-sans); --font-serif-alt: var(--font-sans); /* Cinema */ --background-color: var(--am-aubergine); --color-white: var(--am-aubergine); --color-darker-gray: var(--am-warm-white); --color-primary-text: var(--am-warm-white); --color-secondary-text: var(--am-mute-dark); --color-dark-gray: var(--am-mute-dark); --color-light-gray: rgb(242 233 228 / 0.14); --color-mid-gray: rgb(242 233 228 / 0.3); --color-lighter-gray: rgb(242 233 228 / 0.06); --color-border: rgb(242 233 228 / 0.14); --color-dark-border: rgb(242 233 228 / 0.5); --color-black: var(--am-warm-white); --container-width: 1180px; /* Corner radius. Set to 0 to return the site to hard corners. */ --am-radius: 10px; --am-measure: 60rem; /* reading measure: prose and in-article blocks */ /* Navigation scale. Source ships 1.5rem links and a 2.4rem wordmark, both of which read light against a 100px bar. Desktop only. */ --am-nav-size: 1.65rem; --am-logo-size: 2.7rem; } :root.page { --am-accent: var(--am-copper-deep); --background-color: var(--am-paper); --color-white: var(--am-paper); --color-darker-gray: var(--am-ink); --color-primary-text: var(--am-ink); --color-secondary-text: var(--am-mute-light); --color-dark-gray: var(--am-mute-light); --color-light-gray: rgb(36 23 34 / 0.12); --color-mid-gray: rgb(36 23 34 / 0.28); --color-lighter-gray: rgb(36 23 34 / 0.05); --color-border: rgb(36 23 34 / 0.12); --color-dark-border: rgb(36 23 34 / 0.5); --color-black: var(--am-ink); } /* ========================================================================== 2. BASE ========================================================================== */ body { background-color: var(--color-white); color: var(--color-primary-text); font-family: var(--font-sans); font-weight: 400; line-height: 1.62; -webkit-font-smoothing: antialiased; } html.page, html.page body { background-color: var(--am-paper); color: var(--am-ink); } h1, h2, h3, h4, h5, h6, .gh-article-title, .gh-card-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.028em; line-height: 1.06; } h1, .gh-article-title { letter-spacing: -0.032em; } h4, h5, h6 { font-weight: 500; letter-spacing: -0.015em; } a { color: var(--am-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } ::selection { background: var(--am-accent); color: var(--am-paper); } /* ========================================================================== 3. CHROME: navigation, footer shell, Portal, cards ========================================================================== */ .gh-navigation, .gh-footer { background-color: var(--color-white); color: var(--color-primary-text); border-color: var(--color-border); } .gh-navigation { position: relative; z-index: 5; } .gh-navigation a, .gh-footer a { color: var(--color-primary-text); } .gh-navigation .gh-navigation-brand, .gh-navigation .gh-navigation-logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; } .am-logo-cooks { color: var(--am-copper); } /* Desktop scale. The wordmark keeps Source's --factor so Ghost's site title size setting still applies. Mobile keeps Source's own 2.2rem. */ @media (min-width: 768px) { .gh-navigation { font-size: var(--am-nav-size); } .gh-navigation .gh-navigation-logo { font-size: calc(var(--am-logo-size) * var(--factor, 1)); } } @media (min-width: 768px) and (max-width: 1100px) { :root { --am-nav-size: 1.55rem; --am-logo-size: 2.5rem; } } /* Transparent over any full-bleed image header */ body:has(.am-hero) .gh-navigation, body:has(.am-band) .gh-navigation { background: transparent; border-bottom: none; } body:has(.am-hero) .gh-navigation-members a[data-portal="signin"], body:has(.am-band) .gh-navigation-members a[data-portal="signin"] { color: var(--am-warm-white); text-shadow: 0 1px 12px rgb(23 14 20 / 0.7); } .gh-navigation-actions, .gh-navigation-actions > *, .gh-navigation .gh-search, .gh-icon-button, .gh-navigation-members { background: transparent; color: var(--color-primary-text); } .gh-navigation-members a[data-portal="signup"], .gh-button { background: var(--am-copper); color: var(--am-aubergine); border: none; font-family: var(--font-sans); font-weight: 600; } .gh-navigation-members a[data-portal="signin"] { color: var(--color-secondary-text); background: transparent; } /* --- Persistent mobile Subscribe ------------------------------------------ Sits in the brand row so signup does not depend on opening the burger. Sign in stays in the panel: low frequency, and only used by people who already know the site. Markup goes in navigation.hbs inside .gh-navigation-brand, before the search toggle. -------------------------------------------------------------------------- */ .am-nav-cta { display: none; } @media (max-width: 767px) { #gh-navigation .gh-navigation-brand { grid-template-columns: 1fr auto auto auto; } .am-nav-cta { display: inline-flex; align-items: center; margin-right: 1.2rem; padding: 0.7rem 1.4rem; font-size: 1.3rem; line-height: 1; white-space: nowrap; border-radius: var(--am-radius); } /* Already present inside the panel */ #gh-navigation.is-open .am-nav-cta { display: none; } } /* --- Mobile panel -------------------------------------------------------- On .is-open Source turns the whole header into a fixed full-screen panel and leans on .gh-navigation's own background. The transparent-over-hero rule above strips that background, so the panel rendered as bare text on the hero photograph. The ID selector outranks body:has(.am-hero). Items are also pulled to the top left; Source centres them by default. -------------------------------------------------------------------------- */ @media (max-width: 767px) { #gh-navigation.is-open { background: var(--color-white); border-bottom: none; } #gh-navigation.is-open .gh-navigation-menu { align-self: start; justify-content: flex-start; } #gh-navigation.is-open .nav { gap: 0; width: 100%; align-items: stretch; } #gh-navigation.is-open .nav li { width: 100%; } #gh-navigation.is-open .nav a { display: block; padding: 1.4rem 0; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; border-bottom: 1px solid var(--color-border); } #gh-navigation.is-open .nav li:first-child a { border-top: 1px solid var(--color-border); } /* The actions bar is sticky, so it needs the panel colour under it */ #gh-navigation.is-open .gh-navigation-actions { background: var(--color-white); padding-bottom: max(var(--container-gap), env(safe-area-inset-bottom)); } #gh-navigation.is-open .gh-navigation-members { width: 100%; } #gh-navigation.is-open .gh-button { border-radius: var(--am-radius); } #gh-navigation.is-open a[data-portal="signin"] { color: var(--color-secondary-text); text-shadow: none; } } .gh-card-title { color: var(--color-primary-text); } .gh-card-excerpt { color: var(--color-secondary-text); } .gh-card a, .gh-card-link { color: inherit; } #sodo-search-root { color-scheme: dark; } /* ========================================================================== 4. MONO: anything measured or identified ========================================================================== */ .am-spec, .gh-article-meta, .gh-card-meta, time { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary-text); } .am-data { font-family: var(--font-mono); font-size: 1.15rem; line-height: 2.05; background: var(--am-aubergine-alt); color: var(--am-warm-white); border-left: 2px solid var(--am-accent); border-radius: 0 var(--am-radius) var(--am-radius) 0; padding: 1.5rem 1.4rem; } :root.page .am-data { background: rgb(36 23 34 / 0.04); color: var(--am-ink); } dl.am-data, .am-recipe-facts { margin-bottom: 2.4rem; display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0 1.6rem; } dl.am-data dt, dl.am-data dd { margin: 0; } .am-data dt { font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary-text); } :root.page .gh-content em { font-style: italic; font-weight: 400; color: inherit; } /* ========================================================================== 5. POST BLOCKS: recipe and PROJ cards, used inside post bodies ========================================================================== */ .am-recipe, .am-proj { margin: 3.2rem 0; } .am-recipe-heading { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 3.2rem 0 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); } .am-recipe-facts dd { color: var(--color-primary-text); } .am-recipe-facts time { font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: none; color: inherit; } .am-ing { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 1.35rem; line-height: 1.55; } .am-ing td { padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); vertical-align: top; } .am-ing-qty { color: var(--am-accent); font-weight: 600; display: inline-block; min-width: 7rem; padding-right: 1rem; } .am-ing td[itemprop="recipeIngredient"] { color: var(--color-primary-text); } .am-method { list-style: none; counter-reset: am-step; padding: 0; margin: 0; } .am-method > li { counter-increment: am-step; position: relative; padding: 1.6rem 0 1.6rem 4.4rem; border-bottom: 1px solid var(--color-border); } .am-method > li::before { content: counter(am-step, decimal-leading-zero); position: absolute; left: 0; top: 1.9rem; font-family: var(--font-mono); font-size: 1.1rem; color: var(--am-accent); } .am-method-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -0.015em; margin-bottom: 0.4rem; } .am-proj-question { margin-top: 2.4rem; padding-left: 1.4rem; border-left: 2px solid var(--am-accent); border-radius: 0 var(--am-radius) var(--am-radius) 0; font-size: 1.9rem; line-height: 1.5; } .am-proj-question .am-spec { display: block; margin-bottom: 0.6rem; } /* ========================================================================== 6. HOMEPAGE ========================================================================== */ .am-hero, .am-shows, .am-latest, .am-gate { position: relative; width: 100%; } /* --- Hero ---------------------------------------------------------------- */ .am-hero { min-height: min(88vh, 860px); display: flex; align-items: flex-end; margin-top: -8.4rem; padding-top: 8.4rem; overflow: hidden; } @media (min-width: 900px) { .am-hero--brand { align-items: center; } .am-hero--brand .am-hero-inner { padding-bottom: 0; } } .am-hero-img, .am-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; } .am-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, rgba(23,14,20,.97) 0%, rgba(23,14,20,.9) 26%, rgba(23,14,20,.55) 48%, rgba(23,14,20,.12) 72%), linear-gradient(0deg, rgba(23,14,20,.55) 0%, rgba(23,14,20,0) 30%); } .am-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 118rem; margin: 0 auto; padding: 0 var(--container-gap) clamp(4.8rem, 7vw, 8.8rem); } .am-hero-kicker { margin-bottom: 2.2rem; } .am-hero-num { color: var(--am-copper); } .am-hero-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(4rem, 7.4vw, 9.6rem); max-width: 64rem; text-wrap: normal; hyphens: none; color: var(--am-warm-white); } .am-hero-dek { margin-top: 2.6rem; font-size: clamp(1.6rem, 2.1vw, 2rem); line-height: 1.55; max-width: 46rem; color: rgb(242 233 228 / 0.82); text-wrap: pretty; } .am-hero-actions { margin-top: 3.4rem; display: flex; gap: 1.4rem; flex-wrap: wrap; } .am-btn { display: inline-block; padding: 1.3rem 2.4rem; border-radius: 2px; font-size: 1.5rem; font-weight: 600; text-decoration: none; } .am-btn-primary { background: var(--am-copper); color: var(--am-aubergine); } .am-btn-ghost { border: 1px solid rgb(242 233 228 / 0.28); color: var(--am-warm-white); font-weight: 400; } @media (max-width: 700px) { .am-hero { min-height: 68vh; } .am-hero-img { object-position: 72% center; } .am-hero-scrim { background: linear-gradient(0deg, rgba(23,14,20,.96) 0%, rgba(23,14,20,.86) 34%, rgba(23,14,20,.3) 62%, rgba(23,14,20,.05) 100%); } .am-hero-title, .am-hero-dek { max-width: none; } } /* --- Diptych ------------------------------------------------------------- */ .am-shows { display: grid; gap: 1px; background: rgb(242 233 228 / 0.12); border-top: 1px solid rgb(242 233 228 / 0.12); border-bottom: 1px solid rgb(242 233 228 / 0.12); } @media (min-width: 860px) { .am-shows { grid-template-columns: 1.35fr 1fr; } } .am-show { position: relative; display: flex; align-items: center; min-height: clamp(320px, 36vw, 520px); background: var(--am-aubergine); overflow: hidden; text-decoration: none; } .am-show-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center right; transition: transform 320ms linear; } .am-show:hover .am-show-img { transform: scale(1.02); } .am-show-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(94deg, rgba(23,14,20,.9) 0%, rgba(23,14,20,.62) 26%, rgba(23,14,20,.12) 48%, rgba(23,14,20,0) 62%); } .am-show-body { position: relative; z-index: 2; width: 100%; max-width: 56%; padding: 0 clamp(2rem, 2.4vw, 3.2rem); } @media (max-width: 620px) { .am-show-body { max-width: 72%; } } .am-show-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.034em; line-height: 0.96; font-size: clamp(3rem, 4.8vw, 5.8rem); margin: 1.6rem 0 2rem; text-shadow: 0 1px 24px rgb(23 14 20 / 0.55); overflow-wrap: normal; word-break: keep-all; hyphens: none; } .am-show--cmb .am-show-name { color: var(--am-copper); } .am-show--tip .am-show-name { color: var(--am-amber-light); font-size: clamp(2.6rem, 3.6vw, 4.6rem); } .am-show-line { font-size: clamp(1.5rem, 1.3vw, 1.8rem); line-height: 1.7; max-width: 34ch; color: rgb(242 233 228 / 0.86); } .am-show-count { margin-top: 3rem; display: flex; align-items: center; gap: 3rem; } .am-show-go { white-space: nowrap; } .am-show--cmb .am-show-go { color: var(--am-copper); } .am-show--tip .am-show-go { color: var(--am-amber-light); } .am-show:hover .am-show-go { text-decoration: underline; text-underline-offset: 3px; } /* --- Section heads (homepage and archive) -------------------------------- */ .am-section-head { width: 100%; max-width: 118rem; margin: 0 auto; padding: clamp(3.2rem, 4vw, 4.8rem) var(--container-gap) 1.8rem; display: flex; align-items: baseline; justify-content: flex-start; gap: 1.8rem; flex-wrap: wrap; } .am-section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 3.4vw, 4rem); letter-spacing: -0.03em; line-height: 1; color: var(--color-primary-text); margin: 0; } /* --- Latest strip (also used by the archive) ----------------------------- */ .am-latest { max-width: 118rem; margin: 0 auto; padding: clamp(4rem, 5vw, 6.4rem) var(--container-gap) clamp(4.8rem, 6vw, 8rem); } .am-latest-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 1.8rem; border-bottom: 1px solid rgb(242 233 228 / 0.16); } .am-latest-head a { font-size: 1.3rem; color: var(--am-copper); text-decoration: none; } .am-row { display: grid; gap: 0.6rem 2.8rem; padding: 2.4rem 0; border-bottom: 1px solid rgb(242 233 228 / 0.08); align-items: baseline; text-decoration: none; color: inherit; } @media (min-width: 760px) { .am-row { grid-template-columns: 11rem 1fr auto; } } .am-row-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 2.3vw, 2.5rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--color-primary-text); } .am-row:hover .am-row-title { color: var(--am-copper); } .am-row-meta { font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary-text); } .am-row-tag { color: var(--am-copper); } .am-row-sub { font-size: 1.45rem; line-height: 1.55; color: rgb(242 233 228 / 0.62); margin-top: 0.6rem; max-width: 56ch; } .am-more { padding-top: 2.8rem; } .am-more a { text-decoration: none; } /* --- Members gate (paper) ------------------------------------------------ */ .am-gate { background: var(--am-paper); color: var(--am-ink); padding: clamp(4.4rem, 5.5vw, 7.2rem) var(--container-gap); display: flex; justify-content: center; } .am-gate-inner { width: 100%; max-width: 148rem; margin: 0; } .am-gate-inner > * { max-width: 82rem; } .am-gate .am-spec { color: var(--am-mute-light); } .am-gate h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(3.2rem, 5.4vw, 6.2rem); margin: 1.8rem 0 2.4rem; max-width: none; text-wrap: normal; color: var(--am-ink); } .am-gate p { font-size: 1.7rem; line-height: 1.62; max-width: 52ch; color: var(--am-mute-light); } .am-gate ul { list-style: none; margin: 3rem 0 3.4rem; padding: 0; border-top: 1px solid rgb(36 23 34 / 0.16); } .am-gate li { position: relative; padding: 1.5rem 0 1.5rem 3.4rem; border-bottom: 1px solid rgb(36 23 34 / 0.1); font-size: 1.6rem; line-height: 1.5; } .am-gate li::before { content: attr(data-n); position: absolute; left: 0; top: 1.7rem; font-family: var(--font-mono); font-size: 1rem; color: var(--am-copper-deep); } .am-gate-form { display: flex; gap: 1rem; flex-wrap: wrap; } .am-gate-form input { flex: 1; min-width: 24rem; padding: 1.4rem 1.6rem; font-family: var(--font-sans); font-size: 1.5rem; background: transparent; border: 1px solid rgb(36 23 34 / 0.32); border-radius: 2px; color: var(--am-ink); } .am-gate-form button { background: var(--am-copper-deep); color: var(--am-paper); border: none; border-radius: 2px; padding: 1.4rem 2.6rem; font-family: var(--font-sans); font-weight: 600; font-size: 1.5rem; cursor: pointer; } .am-gate-note { margin-top: 1.4rem; } .am-gate-error:empty { display: none; } .am-gate-error { margin-top: 1.2rem; color: var(--am-copper-deep); font-size: 1.4rem; } /* ========================================================================== 7. COLLECTION LANDINGS Cook My Books and The Ingredient Project share this skeleton. They differ by accent, crop, column count and lead treatment. ========================================================================== */ /* --- Banner -------------------------------------------------------------- */ .am-band { position: relative; min-height: min(58vh, 560px); display: flex; align-items: flex-end; margin-top: -8.4rem; padding-top: 8.4rem; overflow: hidden; width: 100%; } .am-band-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, rgba(23,14,20,.92) 0%, rgba(23,14,20,.7) 26%, rgba(23,14,20,.2) 50%, rgba(23,14,20,0) 66%), linear-gradient(0deg, rgba(23,14,20,.6) 0%, rgba(23,14,20,0) 34%); } .am-band-inner { position: relative; z-index: 2; width: 100%; max-width: 118rem; margin: 0 auto; padding: 0 var(--container-gap) clamp(4rem, 5.4vw, 6.4rem); } .am-band-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.038em; line-height: 0.94; font-size: clamp(3.6rem, 6.6vw, 8.4rem); max-width: 52rem; margin: 1.6rem 0; color: var(--am-copper); } .am-band-title--tip { color: var(--am-amber-light); } .am-band-line { font-size: clamp(1.6rem, 1.9vw, 1.9rem); line-height: 1.55; max-width: 44rem; color: rgb(242 233 228 / 0.84); } .am-band-meta { margin-top: 2rem; } /* --- Card grid ----------------------------------------------------------- */ .am-grid-wrap { max-width: 118rem; margin: 0 auto; padding: clamp(5.6rem, 7vw, 9rem) var(--container-gap); } .am-grid { display: grid; gap: clamp(3.2rem, 4vw, 5.6rem); } @media (min-width: 760px) { .am-grid { grid-template-columns: repeat(2, 1fr); } } .am-card { display: block; text-decoration: none; color: inherit; } .am-card-img-wrap { aspect-ratio: 3 / 2; overflow: hidden; background: var(--am-aubergine-alt); } .am-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms linear; } .am-card:hover .am-card-img { transform: scale(1.02); } .am-card-body { padding-top: 1.8rem; } .am-card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 2.6vw, 2.8rem); letter-spacing: -0.025em; line-height: 1.1; margin: 0.8rem 0; color: var(--color-primary-text); } .am-card:hover .am-card-title { color: var(--am-copper); } .am-card-excerpt { font-size: 1.5rem; line-height: 1.6; color: rgb(242 233 228 / 0.62); max-width: 46ch; } .am-latest-flag { margin-right: 1.2rem; color: var(--am-copper); } /* Lead card โ€” Cook My Books only */ @media (min-width: 760px) { .am-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(3rem, 4vw, 5rem); align-items: end; border-top: 1px solid var(--color-border); padding-top: 2rem; padding-bottom: clamp(1rem, 2vw, 2rem); } .am-card:first-child .am-card-img-wrap { aspect-ratio: 3 / 2; } .am-card:first-child .am-card-body { border-top: none; } .am-card:first-child .am-card-title { font-size: clamp(3rem, 3.8vw, 4.4rem); margin: 0.8rem 0; } .am-card:first-child .am-card-excerpt { font-size: 1.6rem; max-width: 40ch; } } /* Rounded media and panels. One token, one place. */ .am-card-img-wrap, .am-feature-media, .am-show, .am-recipe { border-radius: var(--am-radius); overflow: hidden; } /* --- The Ingredient Project: same skeleton, different register ----------- */ .am-grid-wrap--tip .am-card-img-wrap { aspect-ratio: 1; } .am-grid-wrap--tip .am-card-num { display: block; color: var(--am-amber-light); margin-bottom: 0.4rem; } .am-grid-wrap--tip .am-card-title { font-size: clamp(1.9rem, 2.2vw, 2.4rem); } .am-grid-wrap--tip .am-card:hover .am-card-title { color: var(--am-amber-light); } .am-grid-wrap--tip .am-card-excerpt { font-size: 1.45rem; } .am-grid-wrap--tip .am-card-date { display: block; margin-top: 1rem; } @media (min-width: 900px) { .am-grid-wrap--tip .am-grid { grid-template-columns: repeat(3, 1fr); } } /* No lead card in a numbered series โ€” every entry is equal */ @media (min-width: 760px) { .am-grid-wrap--tip .am-card:first-child { grid-column: auto; display: block; border-top: none; padding-top: 0; } .am-grid-wrap--tip .am-card:first-child .am-card-img-wrap { aspect-ratio: 1; } .am-grid-wrap--tip .am-card:first-child .am-card-title { font-size: clamp(1.9rem, 2.2vw, 2.4rem); } .am-grid-wrap--tip .am-card:first-child .am-card-excerpt { font-size: 1.45rem; max-width: none; } } /* ========================================================================== 8. FOOTER ========================================================================== */ .am-footer { border-top: 1px solid var(--color-border); margin-top: 0; padding: clamp(4.8rem, 6vw, 8rem) var(--container-gap) clamp(3.2rem, 4vw, 4.8rem); } .am-footer-inner { max-width: 148rem; margin: 0 auto; } .am-footer-cols { display: grid; gap: clamp(3.2rem, 4vw, 5.6rem); grid-template-columns: 1fr; } @media (min-width: 700px) { .am-footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .am-footer-cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } .am-footer-logo { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 2.4vw, 2.6rem); letter-spacing: -0.03em; color: var(--color-primary-text); text-decoration: none; } .am-footer-line { margin-top: 1.2rem; font-size: 1.45rem; line-height: 1.6; max-width: 34ch; color: var(--color-secondary-text); } .am-footer-nav ul { list-style: none; margin: 1.4rem 0 0; padding: 0; } .am-footer-nav li { margin-bottom: 0.9rem; } .am-footer-nav a { font-size: 1.5rem; color: var(--color-primary-text); text-decoration: none; } .am-footer-nav a:hover { color: var(--am-copper); } .am-footer-bar { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: clamp(4rem, 5vw, 6.4rem); padding-top: 2rem; border-top: 1px solid var(--color-border); } /* ========================================================================== 9. POST ========================================================================== */ /* --- Canvas: one left edge for the whole article ------------------------- */ .post-template .gh-main, .page-template .gh-main { padding-top: 0; } .am-article .gh-canvas { display: block; max-width: 98rem; margin: 0 auto; padding-left: var(--container-gap); padding-right: var(--container-gap); } @media (min-width: 1600px) { .am-article .gh-canvas { max-width: 132rem; } } .am-article-header > *, .am-content > * { margin-left: 0; margin-right: auto; } /* --- Header: text left, image right -------------------------------------- */ .am-article-header { padding-top: clamp(2.4rem, 3.2vw, 4rem); padding-bottom: clamp(1.6rem, 2vw, 2.4rem); } .am-article-head { display: grid; gap: clamp(2.4rem, 3vw, 4rem); } @media (min-width: 900px) { .am-article-head { grid-template-columns: 1.05fr 0.95fr; align-items: start; /* shared TOP edge: the eye enters here */ gap: clamp(3.2rem, 4vw, 6rem); } .am-article-head-text { display: block; } } .am-article-kicker { display: flex; gap: 1.6rem; margin-bottom: 1.6rem; } .am-article-tag { color: var(--am-accent); text-decoration: none; } .am-article-num { color: var(--am-accent); } .am-article-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 4.4vw, 5.2rem); letter-spacing: -0.035em; line-height: 1; max-width: none; } .am-article-dek { margin-top: 1.8rem; font-size: clamp(1.7rem, 1.9vw, 1.95rem); line-height: 1.55; max-width: none; color: var(--color-secondary-text); } .am-article-meta { display: flex; gap: 2rem; flex-wrap: wrap; align-items: baseline; margin: 2.8rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--color-border); } .am-article-locked { color: var(--am-accent); } .am-article-share { margin-left: auto; text-decoration: none; color: var(--am-accent); } /* --- Feature image: caption bar, no mount -------------------------------- */ .am-article-head-media { display: flex; flex-direction: column; justify-content: flex-end; background: var(--am-aubergine-alt); overflow: hidden; border-radius: var(--am-radius); } .am-article-head-media figure, .am-article-head-media .gh-article-image { width: 100%; max-width: none; margin: 0; padding: 0; background: none; } .am-article-head-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .am-article-head-media figcaption { margin: 0; padding: 1.4rem clamp(1.6rem, 2vw, 2.4rem); font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; color: var(--am-mute-dark); } /* --- Content: two measures ----------------------------------------------- */ .am-content { padding-top: 0; } .am-content > *:first-child { margin-top: 0; } .am-content > * { max-width: var(--am-measure); } /* Images and embeds may run wider than the reading measure. */ .am-content > figure, .am-content > .kg-card { max-width: 76rem; } /* --- Paywall -------------------------------------------------------------- */ .gh-post-upgrade-cta { display: none !important; } .am-paywall { max-width: var(--am-measure); margin: clamp(3.2rem, 5vw, 5.6rem) 0 0; padding: clamp(3.2rem, 4vw, 4.8rem); border: 1px solid var(--color-border); border-radius: var(--am-radius); background: rgb(36 23 34 / 0.04); } .am-paywall h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 3.6vw, 4rem); letter-spacing: -0.03em; line-height: 1.02; margin: 1.4rem 0 1.6rem; max-width: none; text-wrap: normal; } .am-paywall p { font-size: 1.7rem; line-height: 1.6; max-width: 46ch; color: var(--color-secondary-text); } .am-paywall-actions { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-top: 2.8rem; } .am-paywall-signin { color: var(--am-accent); text-decoration: none; } /* --- Related -------------------------------------------------------------- */ .am-related { border-top: 1px solid var(--color-border); } .am-related .am-latest-head { border-bottom: none; padding-bottom: 2.4rem; } /* ========================================================================== 10. LATE ADDITIONS: brand hero, featured post, foil titles, static pages ========================================================================== */ /* --- Brand hero ----------------------------------------------------------- */ .am-hero--brand { min-height: min(78vh, 760px); } .am-hero-title--brand { font-size: clamp(3.6rem, 6.2vw, 8rem); max-width: none; text-wrap: normal; } /* --- Featured latest post ------------------------------------------------- */ .am-feature { display: grid; gap: clamp(2rem, 2.6vw, 3.6rem); padding: clamp(2.8rem, 3.4vw, 4.4rem) 0; border-bottom: 1px solid rgb(242 233 228 / 0.08); text-decoration: none; color: inherit; } @media (min-width: 860px) { .am-feature { grid-template-columns: 0.9fr 1.1fr; align-items: center; } } .am-feature-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--am-aubergine-alt); } .am-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms linear; } .am-feature:hover .am-feature-media img { transform: scale(1.02); } .am-feature-kicker { display: flex; gap: 1.8rem; margin-bottom: 1.4rem; } .am-feature-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 3.4vw, 4rem); letter-spacing: -0.03em; line-height: 1.02; color: var(--color-primary-text); } .am-feature:hover .am-feature-title { color: var(--am-copper); } .am-feature-excerpt { margin-top: 1.4rem; font-size: 1.6rem; line-height: 1.6; max-width: 52ch; color: rgb(242 233 228 / 0.66); } .am-feature-go { display: inline-block; margin-top: 1.8rem; color: var(--am-copper); } .am-related .am-card:first-child { grid-column: auto; display: block; border-top: none; padding-top: 0; } .am-related .am-card:first-child .am-card-title { font-size: clamp(2.1rem, 2.6vw, 2.8rem); } .am-related .am-card:first-child .am-card-excerpt { font-size: 1.5rem; max-width: 46ch; } /* --- Copper as material: Cook My Books display titles -------------------- */ .am-band-title--cmb, .am-show--cmb .am-show-name { background: linear-gradient(112deg, #A5602C 0%, #C87F4A 28%, #EDC488 50%, #C87F4A 72%, #8F4E20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (prefers-contrast: more) { .am-band-title--cmb, .am-show--cmb .am-show-name { background: none; color: var(--am-copper); } } /* --- Static pages (About etc) --------------------------------------------- */ .am-article-head--solo { grid-template-columns: 1fr; } .am-article-head--solo .am-article-head-text { max-width: 72rem; } /* ========================================================================== 11. MOTION AND PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { .am-recipe { break-inside: avoid; } .am-method > li { break-inside: avoid; } } /* ========================================================================== 12. WIDE VIEWPORTS: 1600px and above ========================================================================== */ @media (min-width: 1600px) { :root { --container-gap: 6.4rem; } .am-hero-inner, .am-band-inner, .am-latest, .am-grid-wrap, .am-section-head { max-width: 148rem; } .am-hero { min-height: min(84vh, 1040px); } .am-hero-title { max-width: 72rem; } .am-show { min-height: 620px; } }