/* ============================================================ AI-Generated section — scoped editorial layer Activates only inside . Outside this scope, the rest of the site is untouched. ============================================================ */ /* tokens */ .section-ai { --ai-ink: #1F1B2E; --ai-paper: #FAF6EC; --ai-rule: #C8B89A; --ai-accent: #7A2E2A; --ai-muted: #6A6470; } html.dark .section-ai { --ai-ink: #E8E2D4; --ai-paper: #1A1822; --ai-rule: #3A3344; --ai-accent: #D89B7A; --ai-muted: #9A9290; } /* explicit dark-mode body fallback (Tailwind CDN's dark: variants don't always apply when the dark class is toggled at runtime) */ html.dark body { background: var(--color-background-dark); color: var(--color-text-dark); } /* ====== shared editorial primitives ====== */ .section-ai .ai-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } .section-ai .ai-wrap-narrow { max-width: 42rem; margin: 0 auto; padding: 0 1.5rem; } .section-ai .ai-wrap-wide { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } .section-ai .ai-eyebrow { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ai-accent); font-weight: 600; margin: 0 0 1rem; } .section-ai .ai-eyebrow--muted { color: var(--ai-muted); } .section-ai .ai-readmore { font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ai-accent); text-decoration: none; font-weight: 600; align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: letter-spacing 300ms; } .section-ai .ai-readmore::after { content: " →"; display: inline; } .section-ai .ai-readmore:hover { letter-spacing: 0.3em; } .section-ai .ai-subhead { display: flex; align-items: center; gap: 1.25rem; margin: 3.5rem 0 2rem; } .section-ai .ai-subhead__line { flex: 1; height: 1px; background: var(--ai-rule); } .section-ai .ai-subhead__text { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ai-muted); white-space: nowrap; } /* ====== section index — masthead ====== */ .section-ai .ai-masthead { margin: 3rem auto 2.5rem; max-width: 64rem; text-align: center; position: relative; } .section-ai .ai-masthead__rule { border: 0; border-top: 1px solid var(--ai-rule); margin: 0; } .section-ai .ai-masthead__wordmark { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 600; font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: 0.18em; color: var(--ai-ink); margin: 1.5rem 0 0.75rem; line-height: 1; } .section-ai .ai-masthead__wordmark .em-dash { color: var(--ai-accent); font-variation-settings: "opsz" 144, "wght" 400; margin: 0 0.4em; display: inline-block; } .section-ai .ai-masthead__editor { font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ai-muted); margin: 0 0 1.75rem; } .section-ai .ai-masthead__standfirst { font-family: 'Newsreader', serif; font-style: italic; font-variation-settings: "opsz" 32, "wght" 400; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--ai-ink); max-width: 40rem; margin: 0 auto 2rem; } /* ====== departments strip ====== */ .section-ai .ai-departments { display: flex; flex-wrap: wrap; gap: 2rem; align-items: baseline; justify-content: center; padding: 1.25rem 0 1rem; border-top: 1px solid var(--ai-rule); border-bottom: 1px solid var(--ai-rule); margin: 0 0 3.5rem; } .section-ai .ai-departments__label { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ai-muted); margin-right: 0.5rem; } .section-ai .ai-dept { font-family: 'Inter', sans-serif; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ai-muted); text-decoration: none; padding: 0.25rem 0; border: 0; background: transparent; cursor: pointer; transition: color 200ms; font-weight: 500; } .section-ai .ai-dept:hover { color: var(--ai-ink); } .section-ai .ai-dept--active { color: var(--ai-accent); font-weight: 700; position: relative; padding-left: 1rem; } .section-ai .ai-dept--active::before { content: "▌"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--ai-accent); font-size: 1.1em; } /* ====== featured H tile ====== */ .section-ai .ai-featured { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: stretch; margin: 0 0 1rem; } @media (max-width: 880px) { .section-ai .ai-featured { grid-template-columns: 1fr; gap: 1.5rem; } } .section-ai .ai-featured__image { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--ai-rule); display: block; } .section-ai .ai-featured__image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 800ms ease; } .section-ai .ai-featured:hover .ai-featured__image img { transform: scale(1.025); } .section-ai .ai-featured__body { display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0; } .section-ai .ai-featured__title { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 600; font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.05; letter-spacing: -0.012em; color: var(--ai-ink); margin: 0 0 1rem; } .section-ai .ai-featured__title a { color: inherit; text-decoration: none; } .section-ai .ai-featured__title a:hover { color: var(--ai-accent); } .section-ai .ai-featured__deck { font-family: 'Newsreader', serif; font-variation-settings: "opsz" 22, "wght" 400; font-size: 1.0625rem; line-height: 1.6; color: var(--ai-ink); opacity: 0.86; margin: 0 0 1.5rem; } /* ====== V tile grid ====== */ .section-ai .ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 3rem; margin: 0 0 4rem; } @media (max-width: 720px) { .section-ai .ai-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .section-ai .ai-tile { display: flex; flex-direction: column; } .section-ai .ai-tile__image { aspect-ratio: 16/9; overflow: hidden; background: var(--ai-rule); margin-bottom: 1.25rem; display: block; } .section-ai .ai-tile__image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 700ms ease; } .section-ai .ai-tile:hover .ai-tile__image img { transform: scale(1.035); } .section-ai .ai-tile__title { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 72, "SOFT" 20, "wght" 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.005em; color: var(--ai-ink); margin: 0 0 0.75rem; } .section-ai .ai-tile__title a { color: inherit; text-decoration: none; } .section-ai .ai-tile__title a:hover { color: var(--ai-accent); } .section-ai .ai-tile__deck { font-family: 'Newsreader', serif; font-variation-settings: "opsz" 16, "wght" 400; font-size: 1rem; line-height: 1.55; color: var(--ai-ink); opacity: 0.78; margin: 0 0 1.25rem; } .section-ai .ai-tile__meta { margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--ai-rule); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ai-muted); } .section-ai .ai-tile__tags { font-weight: 500; } .section-ai .ai-tile__date { white-space: nowrap; font-weight: 500; } /* ====== reading progress (post pages) ====== */ .section-ai .ai-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; } .section-ai .ai-progress__fill { height: 100%; width: 0%; background: var(--ai-accent); transition: width 80ms linear; } /* ====== post page header ====== */ .section-ai .ai-back { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ai-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 2rem; } .section-ai .ai-back:hover { color: var(--ai-accent); } .section-ai .ai-post-eyebrow { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ai-accent); font-weight: 600; margin: 0 0 1.25rem; } .section-ai .ai-post-title { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 600; font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: 1.02; letter-spacing: -0.015em; color: var(--ai-ink); margin: 0 0 1.5rem; max-width: 22ch; } .section-ai .ai-post-standfirst { font-family: 'Newsreader', serif; font-variation-settings: "opsz" 32, "wght" 400; font-style: italic; font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.55; color: var(--ai-ink); opacity: 0.92; max-width: 38rem; margin: 0 0 2.5rem; } .section-ai .ai-post-byline { font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ai-muted); margin: 0 0 3rem; display: flex; align-items: center; gap: 1rem; } .section-ai .ai-post-byline__rule { flex: 1; height: 1px; background: var(--ai-rule); max-width: 6rem; } /* ====== post hero ====== */ .section-ai .ai-post-hero { margin: 0 -3rem 3rem; max-width: none; } @media (max-width: 700px) { .section-ai .ai-post-hero { margin: 0 -1.5rem 2.5rem; } } .section-ai .ai-post-hero__img { width: 100%; max-height: 64vh; object-fit: cover; display: block; } .section-ai .ai-post-hero__caption { font-family: 'Newsreader', serif; font-style: italic; font-size: 0.9375rem; line-height: 1.5; color: var(--ai-muted); margin: 0.875rem 1rem 0; text-align: center; } /* ====== in-prose image styling ====== */ /* tighten the existing image-include wrapper inside prose */ .section-ai .prose .py-3.p-1 { margin: 2.25rem -1rem; padding: 0; text-align: center; } .section-ai .prose .py-3.p-1 a { display: block; line-height: 0; } .section-ai .prose .py-3.p-1 img { border-radius: 0; box-shadow: none; width: 100%; height: auto; } /* the FIRST image in prose acts as the hero — break out of the reading column */ .section-ai .prose > div.py-3:first-of-type { margin: 0.5rem -3rem 3rem; } @media (max-width: 700px) { .section-ai .prose > div.py-3:first-of-type { margin: 0.5rem -1.5rem 2.5rem; } } .section-ai .prose > div.py-3:first-of-type img { max-height: 64vh; object-fit: cover; } /* ====== prose body overrides (post layout) ====== The post layout still wraps {{ content }} in `prose prose-lg dark:prose-invert` for code/lists/blockquotes/tables. We override the typography only. Specificity wins: `.section-ai .prose ...` beats `.prose ...`. */ .section-ai .prose { max-width: 42rem; margin-left: auto; margin-right: auto; font-family: 'Newsreader', serif; font-variation-settings: "opsz" 16, "wght" 400; font-size: 1.125rem; line-height: 1.72; color: var(--ai-ink); } html.dark .section-ai .prose { color: var(--ai-ink); } /* hide the markdown body's own H1 — page.title is rendered by the layout */ .section-ai .prose h1 { display: none; } .section-ai .prose h2, .section-ai .prose h3, .section-ai .prose h4 { font-family: 'Fraunces', serif; color: var(--ai-ink); letter-spacing: -0.005em; } .section-ai .prose h2 { font-variation-settings: "opsz" 72, "wght" 600, "SOFT" 30; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.18; margin: 3.25rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid var(--ai-rule); max-width: 28ch; } .section-ai .prose > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .section-ai .prose h3 { font-variation-settings: "opsz" 60, "wght" 600; font-size: 1.25rem; margin-top: 2.25rem; } .section-ai .prose p { margin: 0 0 1.5rem; color: var(--ai-ink); } .section-ai .prose em, .section-ai .prose i { font-style: italic; } .section-ai .prose strong, .section-ai .prose b { font-weight: 700; color: var(--ai-ink); } .section-ai .prose a { color: var(--ai-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .section-ai .prose blockquote { border-left: 2px solid var(--ai-accent); font-style: italic; color: var(--ai-ink); opacity: 0.9; margin: 2rem 0; padding: 0 0 0 1.25rem; } .section-ai .prose blockquote p { margin-bottom: 0.5rem; } .section-ai .prose code { font-size: 0.9em; background: rgba(122, 46, 42, 0.08); padding: 0.1em 0.3em; border-radius: 0.25em; } html.dark .section-ai .prose code { background: rgba(216, 155, 122, 0.15); } .section-ai .prose ul, .section-ai .prose ol { margin: 0 0 1.5rem 1.5rem; } .section-ai .prose li { margin: 0.4rem 0; } .section-ai .prose hr { border: 0; border-top: 1px solid var(--ai-rule); margin: 3rem auto; max-width: 8rem; } /* drop cap on the first paragraph of long-form (article/story) */ .section-ai .prose.has-dropcap > p:first-of-type::first-letter, .section-ai .prose.has-dropcap > h2:first-of-type + p::first-letter { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 0; font-size: 4.5em; line-height: 0.86; float: left; margin: 0.06em 0.1em 0 -0.04em; color: var(--ai-accent); } /* ====== end-of-article tag strip ====== */ .section-ai .ai-post-end { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--ai-rule); font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ai-muted); } /* ====== prev/next + related ====== */ .section-ai .ai-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 4rem 0 3rem; } @media (max-width: 700px) { .section-ai .ai-pn { grid-template-columns: 1fr; } } .section-ai .ai-pn__item { border-top: 1px solid var(--ai-rule); padding: 1.25rem 0 0; text-decoration: none; color: inherit; display: block; } .section-ai .ai-pn__item--right { text-align: right; } .section-ai .ai-pn__dir { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ai-muted); margin: 0 0 0.5rem; } .section-ai .ai-pn__title { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 72, "wght" 600; font-size: 1.25rem; line-height: 1.2; color: var(--ai-ink); margin: 0; } .section-ai .ai-pn__item:hover .ai-pn__title { color: var(--ai-accent); } .section-ai .ai-related-head { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 2rem; } .section-ai .ai-related-head__line { flex: 1; height: 1px; background: var(--ai-rule); } .section-ai .ai-related-head__text { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ai-muted); white-space: nowrap; } .section-ai .ai-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 3.5rem; } @media (max-width: 880px) { .section-ai .ai-related-grid { grid-template-columns: 1fr; } } .section-ai .ai-rtile { display: flex; flex-direction: column; } .section-ai .ai-rtile__image { aspect-ratio: 16/9; overflow: hidden; background: var(--ai-rule); margin-bottom: 1rem; display: block; } .section-ai .ai-rtile__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms; } .section-ai .ai-rtile:hover .ai-rtile__image img { transform: scale(1.04); } .section-ai .ai-rtile__title { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 60, "wght" 600; font-size: 1.125rem; line-height: 1.2; color: var(--ai-ink); margin: 0 0 0.4rem; } .section-ai .ai-rtile__title a { color: inherit; text-decoration: none; } .section-ai .ai-rtile:hover .ai-rtile__title a { color: var(--ai-accent); } .section-ai .ai-rtile__meta { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ai-muted); } /* ====== return link ====== */ .section-ai .ai-return { text-align: center; margin: 3rem 0 5rem; } .section-ai .ai-return a { font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ai-accent); text-decoration: none; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* ====== category/tag department header ====== */ .section-ai .ai-dept-header { margin: 3rem auto 3rem; max-width: 64rem; padding: 1.5rem 0; border-top: 1px solid var(--ai-rule); border-bottom: 1px solid var(--ai-rule); text-align: center; } .section-ai .ai-dept-header__name { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 600; font-size: clamp(1.75rem, 3.5vw, 2.5rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ai-ink); margin: 0 0 0.5rem; } .section-ai .ai-dept-header__desc { font-family: 'Newsreader', serif; font-style: italic; font-size: 1.0625rem; line-height: 1.55; color: var(--ai-muted); max-width: 36rem; margin: 0 auto 0.5rem; } .section-ai .ai-dept-header__count { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ai-muted); } /* ====== editorial footer (colophon) ====== */ .section-ai .ai-foot { max-width: 72rem; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; } .section-ai .ai-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; align-items: start; } @media (max-width: 720px) { .section-ai .ai-foot__grid { grid-template-columns: 1fr; gap: 2.25rem; } } .section-ai .ai-foot__col { display: flex; flex-direction: column; gap: 0.875rem; } .section-ai .ai-foot__label { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ai-accent); font-weight: 600; margin: 0; padding-bottom: 0.625rem; border-bottom: 1px solid var(--ai-rule); } .section-ai .ai-foot__about { font-family: 'Newsreader', serif; font-style: italic; font-variation-settings: "opsz" 18, "wght" 400; font-size: 0.9375rem; line-height: 1.6; color: var(--ai-ink); margin: 0; } .section-ai .ai-foot__wordmark { font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 600; font-size: 0.875rem; letter-spacing: 0.22em; color: var(--ai-muted); margin: 0.5rem 0 0; } .section-ai .ai-foot__wordmark .em-dash { color: var(--ai-accent); font-variation-settings: "opsz" 144, "wght" 400; margin: 0 0.3em; } .section-ai .ai-foot__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; } .section-ai .ai-foot__list li { display: flex; flex-direction: column; gap: 0.2rem; } .section-ai .ai-foot__link { font-family: 'Newsreader', serif; font-variation-settings: "opsz" 20, "wght" 500; font-size: 0.9375rem; line-height: 1.35; color: var(--ai-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms; align-self: flex-start; } .section-ai .ai-foot__link:hover { border-bottom-color: var(--ai-accent); color: var(--ai-accent); } .section-ai .ai-foot__meta, .section-ai .ai-foot__count { font-family: 'Inter', sans-serif; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ai-muted); } .section-ai .ai-foot__list--depts li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; } .section-ai .ai-foot__list--depts .ai-foot__count::before { content: ""; } .section-ai .ai-foot__list--depts .ai-foot__count { font-variant-numeric: tabular-nums; } /* ====== reader controls — side bind ====== */ .section-ai .ai-side-bind { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.6rem 0.45rem; background: var(--ai-paper); border: 1px solid var(--ai-rule); border-radius: 999px; box-shadow: 0 8px 24px -14px rgba(31, 27, 46, 0.35); } html.dark .section-ai .ai-side-bind { box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55); } .section-ai .ai-side-bind__label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Inter', sans-serif; font-size: 0.625rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ai-muted); margin: 0.35rem 0 0.1rem; } .section-ai .ai-side-bind__btn { appearance: none; background: transparent; border: 1px solid transparent; color: var(--ai-ink); width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: color 180ms, border-color 180ms, background 180ms; } .section-ai .ai-side-bind__btn .material-symbols-rounded { font-size: 1.1rem; line-height: 1; } .section-ai .ai-side-bind__btn:hover { color: var(--ai-accent); border-color: var(--ai-accent); } .section-ai .ai-side-bind__btn:focus-visible { outline: 2px solid var(--ai-accent); outline-offset: 2px; } .section-ai .ai-side-bind__btn[hidden] { display: none; } @media (max-width: 720px) { .section-ai .ai-side-bind { top: auto; bottom: 0.75rem; right: 50%; transform: translate(50%, 0); flex-direction: row; padding: 0.4rem 0.7rem; gap: 0.55rem; } .section-ai .ai-side-bind__label { writing-mode: horizontal-tb; transform: none; margin: 0 0.1rem 0 0; } }