@layer properties;
@layer theme, base, components, utilities;
@layer theme {
:root, :host {
--font-sans: "Manrope", "Avenir Next", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
monospace;
--color-white: #ffffff;
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-primary: #DE0068;
--color-primary-text: #B80056;
--color-primary-soft: #f9dce6;
--color-secondary: #ff6b5f;
--color-ink: #17130f;
--color-ink-soft: #3f3731;
--color-paper: #f7f1e8;
--color-paper-deep: #eee3d4;
--color-cream: #fffaf4;
--color-line: #d9cec0;
--color-muted: #766d65;
--font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
}
}
@layer base {
*, ::after, ::before, ::backdrop, ::file-selector-button {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
tab-size: 4;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentcolor;
@supports (color: color-mix(in lab, red, red)) {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden='until-found'])) {
display: none !important;
}
}
@layer utilities {
.static {
position: static;
}
.block {
display: block;
}
.hidden {
display: none;
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.resize {
resize: both;
}
}
@layer base {
:root {
--site-width: 1240px;
--reading-width: 720px;
--gutter: clamp(1.1rem, 4vw, 2.5rem);
--shadow-soft: 0 18px 60px rgba(53, 36, 28, 0.09);
--shadow-card: 0 12px 35px rgba(53, 36, 28, 0.08);
}
*,	*::before,	*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 7rem;
}
body {
margin: 0;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body.admin-bar .site-header {
top: 32px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
button,	input,	textarea,	select {
font: inherit;
}
button,	summary {
-webkit-tap-highlight-color: transparent;
}
::selection {
background: var(--color-primary);
color: var(--color-white);
}
:focus-visible {
outline: 3px solid var(--color-secondary);
outline-offset: 4px;
}
h1,	h2,	h3,	h4 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
}
@layer components {
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus {
position: fixed !important;
z-index: 100000;
top: 1rem;
left: 1rem;
width: auto;
height: auto;
margin: 0;
padding: 0.8rem 1rem;
clip: auto;
background: var(--color-white);
color: var(--color-ink);
border-radius: 0.5rem;
box-shadow: var(--shadow-card);
}
.site-shell {
width: min(100% - (2 * var(--gutter)), var(--site-width));
margin-inline: auto;
}
.narrow-shell {
width: min(100% - (2 * var(--gutter)), 860px);
margin-inline: auto;
}
.section {
padding-block: clamp(4rem, 8vw, 7.5rem);
}
.section--tight {
padding-block: clamp(3rem, 6vw, 5rem);
}
.section-kicker,	.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 1rem;
color: var(--color-primary);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}
.section-kicker::before,	.eyebrow::before {
width: 1.4rem;
height: 2px;
background: currentColor;
content: "";
}
.section-heading {
max-width: 760px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 4.8rem);
font-weight: 500;
letter-spacing: -0.045em;
line-height: 0.98;
}
.section-heading em {
color: var(--color-primary);
font-weight: 400;
}
.section-intro {
max-width: 640px;
margin: 1.2rem 0 0;
color: var(--color-muted);
font-size: clamp(1rem, 2vw, 1.18rem);
}
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.text-link {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--color-primary);
font-size: 0.9rem;
font-weight: 800;
text-decoration: none;
}
.text-link svg {
width: 1rem;
transition: transform 180ms ease;
}
.text-link:hover svg {
transform: translateX(0.25rem);
}
.button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.78rem 1.25rem;
border: 1px solid transparent;
border-radius: 999px;
background: var(--color-ink);
color: var(--color-white);
font-size: 0.88rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.button:hover {
transform: translateY(-2px);
background: var(--color-primary);
box-shadow: 0 10px 24px rgba(194, 24, 86, 0.2);
}
.button--light {
background: var(--color-white);
color: var(--color-ink);
}
.button--light:hover {
background: var(--color-paper);
color: var(--color-ink);
}
.button--outline {
border-color: currentColor;
background: transparent;
color: var(--color-ink);
}
.site-topbar {
background: var(--color-ink);
color: rgba(255, 255, 255, 0.82);
font-size: 0.72rem;
letter-spacing: 0.045em;
}
.site-topbar__inner {
display: flex;
min-height: 30px;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.site-topbar p {
margin: 0;
}
.site-topbar a {
color: var(--color-white);
font-weight: 700;
text-decoration: none;
}
.site-header {
position: sticky;
z-index: 1000;
top: 0;
border-bottom: 1px solid rgba(23, 19, 15, 0.09);
background: rgba(247, 241, 232, 0.93);
backdrop-filter: blur(16px);
}
.header-main {
display: grid;
min-height: 72px;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(1.2rem, 3vw, 2.8rem);
}
.brand {
display: inline-flex;
align-items: baseline;
gap: 0.28rem;
color: var(--color-ink);
line-height: 1;
text-decoration: none;
}
.brand__sexity {
font-size: 1.18rem;
font-weight: 900;
letter-spacing: 0.085em;
text-transform: uppercase;
}
.brand__mag {
color: var(--color-primary);
font-family: var(--font-display);
font-size: 1.5rem;
font-style: italic;
font-weight: 500;
letter-spacing: -0.03em;
}
.brand__dot {
width: 0.44rem;
height: 0.44rem;
margin-left: 0.05rem;
border-radius: 50%;
background: var(--color-secondary);
}
.primary-nav {
justify-self: center;
}
.nav-list {
display: flex;
align-items: center;
gap: clamp(0.8rem, 1.8vw, 1.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.nav-list a {
position: relative;
color: var(--color-ink-soft);
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.nav-list a::after {
position: absolute;
right: 0;
bottom: -0.4rem;
left: 0;
height: 2px;
background: var(--color-primary);
content: "";
transform: scaleX(0);
transform-origin: right;
transition: transform 180ms ease;
}
.nav-list a:hover::after,	.nav-list .current-menu-item > a::after {
transform: scaleX(1);
transform-origin: left;
}
.header-actions {
display: flex;
align-items: center;
gap: 0.55rem;
}
.header-search {
position: relative;
}
.header-search > summary,	.mobile-menu > summary {
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border: 1px solid var(--color-line);
border-radius: 50%;
cursor: pointer;
list-style: none;
transition: border-color 180ms ease, background 180ms ease;
}
.header-search > summary::-webkit-details-marker,	.mobile-menu > summary::-webkit-details-marker {
display: none;
}
.header-search > summary:hover,	.mobile-menu > summary:hover {
border-color: var(--color-primary);
background: var(--color-white);
}
.header-search svg,	.mobile-menu svg {
width: 19px;
height: 19px;
}
.header-search__panel {
position: absolute;
top: calc(100% + 0.9rem);
right: 0;
width: min(420px, calc(100vw - 2rem));
padding: 1rem;
border: 1px solid var(--color-line);
border-radius: 1rem;
background: var(--color-white);
box-shadow: var(--shadow-soft);
}
.mobile-menu {
display: none;
}
.mobile-menu__panel {
position: absolute;
top: 100%;
right: 0;
left: 0;
padding: 1rem var(--gutter) 1.4rem;
border-bottom: 1px solid var(--color-line);
background: var(--color-paper);
box-shadow: var(--shadow-soft);
}
.mobile-menu__panel .nav-list {
display: grid;
gap: 0;
}
.mobile-menu__panel .nav-list a {
display: block;
padding: 0.8rem 0;
border-bottom: 1px solid var(--color-line);
font-size: 0.95rem;
}
.mobile-menu__panel .button {
width: 100%;
margin-top: 1rem;
}
.search-form {
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-field {
width: 100%;
min-width: 0;
height: 48px;
padding: 0 1rem;
border: 1px solid var(--color-line);
border-radius: 999px;
background: var(--color-cream);
color: var(--color-ink);
outline: none;
}
.search-field:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(194, 24, 86, 0.12);
}
.search-submit {
display: inline-flex;
width: 48px;
height: 48px;
flex: 0 0 48px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
cursor: pointer;
}
.search-submit svg {
width: 20px;
}
.hero {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 10vw, 8.5rem) 0 clamp(4rem, 8vw, 7rem);
border-bottom: 1px solid var(--color-line);
}
.hero::before {
position: absolute;
top: -18rem;
right: -13rem;
width: min(48vw, 700px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), transparent 26%),	linear-gradient(145deg, var(--color-primary-soft), rgba(255, 107, 95, 0.38));
content: "";
filter: blur(1px);
opacity: 0.9;
}
.hero::after {
position: absolute;
right: 3vw;
bottom: 4rem;
width: 9rem;
height: 9rem;
border: 1px solid rgba(194, 24, 86, 0.35);
border-radius: 50%;
content: "";
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
align-items: end;
gap: clamp(2rem, 7vw, 7rem);
}
.hero h1 {
max-width: 900px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(3.5rem, 7.8vw, 7.5rem);
font-weight: 500;
letter-spacing: -0.065em;
line-height: 0.86;
}
.hero h1 em {
display: inline-block;
color: var(--color-primary);
font-weight: 400;
}
.hero__copy {
align-self: center;
padding-top: 3rem;
}
.hero__copy > p {
margin: 0 0 1.5rem;
color: var(--color-ink-soft);
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.55;
}
.hero-search {
max-width: 520px;
padding: 0.45rem;
border: 1px solid var(--color-line);
border-radius: 999px;
background: rgba(255, 250, 244, 0.9);
box-shadow: var(--shadow-card);
}
.hero-search .search-field {
border: 0;
background: transparent;
}
.hero-proof {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
margin: 1.35rem 0 0;
padding: 0;
color: var(--color-muted);
font-size: 0.74rem;
font-weight: 700;
list-style: none;
}
.hero-proof li {
display: flex;
align-items: center;
gap: 0.42rem;
}
.hero-proof li::before {
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--color-primary);
content: "";
}
.topic-rail {
position: relative;
z-index: 2;
margin-top: -1px;
border-bottom: 1px solid var(--color-line);
background: var(--color-cream);
}
.topic-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.topic-card {
position: relative;
display: block;
min-height: 150px;
padding: 1.4rem 1.25rem 1.25rem;
border-left: 1px solid var(--color-line);
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.topic-card:last-child {
border-right: 1px solid var(--color-line);
}
.topic-card:hover {
background: var(--color-primary);
color: var(--color-white);
}
.topic-card__number {
display: block;
margin-bottom: 1.8rem;
color: var(--color-primary);
font-family: var(--font-display);
font-size: 0.9rem;
font-style: italic;
}
.topic-card:hover .topic-card__number,	.topic-card:hover .topic-card__description {
color: rgba(255, 255, 255, 0.78);
}
.topic-card__title {
display: block;
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 600;
line-height: 1.05;
}
.topic-card__description {
display: block;
margin-top: 0.55rem;
color: var(--color-muted);
font-size: 0.75rem;
line-height: 1.45;
}
.lead-story {
display: grid;
overflow: hidden;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
border-radius: 1.6rem;
background: var(--color-ink);
color: var(--color-white);
box-shadow: var(--shadow-soft);
}
.lead-story__media {
position: relative;
min-height: 520px;
overflow: hidden;
background: radial-gradient(circle at 20% 20%, rgba(255, 107, 95, 0.75), transparent 34%),	linear-gradient(145deg, var(--color-primary), #4b1230);
}
.lead-story__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 650ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lead-story:hover .lead-story__media img {
transform: scale(1.025);
}
.lead-story__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2rem, 5vw, 4rem);
}
.lead-story__meta,	.card-meta,	.article-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.lead-story__meta {
color: rgba(255, 255, 255, 0.66);
}
.meta-divider {
width: 3px;
height: 3px;
border-radius: 50%;
background: currentColor;
}
.lead-story h2 {
margin: 1.1rem 0;
font-family: var(--font-display);
font-size: clamp(2.3rem, 4.2vw, 4.2rem);
font-weight: 500;
letter-spacing: -0.045em;
line-height: 0.98;
}
.lead-story h2 a {
text-decoration: none;
}
.lead-story__excerpt {
margin: 0 0 1.7rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.96rem;
}
.lead-story .text-link {
color: var(--color-white);
}
.cards-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.1rem, 2.5vw, 2rem);
}
.article-card {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: 1.15rem;
background: var(--color-cream);
box-shadow: 0 1px 0 rgba(53, 36, 28, 0.03);
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.article-card:hover {
border-color: rgba(194, 24, 86, 0.32);
box-shadow: var(--shadow-card);
transform: translateY(-5px);
}
.article-card__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.72), transparent 27%),	linear-gradient(145deg, var(--color-primary-soft), var(--color-secondary));
}
.article-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.article-card:hover .article-card__media img {
transform: scale(1.035);
}
.article-card__placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: rgba(23, 19, 15, 0.62);
font-family: var(--font-display);
font-size: 1.35rem;
font-style: italic;
}
.article-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1.35rem 1.35rem 1.5rem;
}
.article-card h3 {
margin: 0.75rem 0 0.7rem;
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.08;
}
.article-card h3 a {
text-decoration: none;
}
.article-card__excerpt {
margin: 0 0 1rem;
color: var(--color-muted);
font-size: 0.88rem;
line-height: 1.6;
}
.article-card .text-link {
margin-top: auto;
padding-top: 0.4rem;
}
.article-card--compact {
display: grid;
grid-template-columns: 118px 1fr;
border: 0;
border-top: 1px solid var(--color-line);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.article-card--compact:hover {
border-color: var(--color-line);
box-shadow: none;
transform: none;
}
.article-card--compact .article-card__media {
margin-top: 1.2rem;
aspect-ratio: 1;
border-radius: 0.8rem;
}
.article-card--compact .article-card__body {
padding: 1.2rem 0 1.2rem 1rem;
}
.article-card--compact h3 {
margin: 0.45rem 0;
font-size: 1.35rem;
}
.article-card--compact .article-card__excerpt,	.article-card--compact .text-link {
display: none;
}
.beginner-section {
position: relative;
overflow: hidden;
background: var(--color-primary-soft);
}
.beginner-section::after {
position: absolute;
right: -5rem;
bottom: -9rem;
width: 26rem;
height: 26rem;
border: 1px solid rgba(194, 24, 86, 0.24);
border-radius: 50%;
content: "";
}
.numbered-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid rgba(194, 24, 86, 0.22);
border-left: 1px solid rgba(194, 24, 86, 0.22);
}
.numbered-card {
display: flex;
min-height: 260px;
flex-direction: column;
padding: 1.5rem;
border-right: 1px solid rgba(194, 24, 86, 0.22);
border-bottom: 1px solid rgba(194, 24, 86, 0.22);
text-decoration: none;
transition: background 200ms ease, color 200ms ease;
}
.numbered-card:hover {
background: var(--color-primary);
color: var(--color-white);
}
.numbered-card__number {
color: var(--color-primary);
font-family: var(--font-display);
font-size: 0.9rem;
font-style: italic;
}
.numbered-card:hover .numbered-card__number,	.numbered-card:hover p {
color: rgba(255, 255, 255, 0.75);
}
.numbered-card h3 {
margin: auto 0 0.8rem;
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.5vw, 2rem);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.05;
}
.numbered-card p {
margin: 0;
color: var(--color-muted);
font-size: 0.8rem;
line-height: 1.5;
}
.dark-section {
background: var(--color-ink);
color: var(--color-white);
}
.dark-section .section-kicker {
color: var(--color-secondary);
}
.dark-section .section-heading {
color: var(--color-white);
}
.dark-section .section-intro {
color: rgba(255, 255, 255, 0.62);
}
.dark-section .article-card {
border-color: rgba(255, 255, 255, 0.14);
background: #241e19;
}
.dark-section .article-card h3,	.dark-section .article-card h3 a {
color: var(--color-white);
}
.dark-section .article-card__excerpt,	.dark-section .card-meta {
color: rgba(255, 255, 255, 0.56);
}
.dark-section .article-card .text-link {
color: var(--color-secondary);
}
.shop-bridge {
padding: clamp(3rem, 6vw, 5rem) 0;
background: var(--color-cream);
}
.shop-bridge__inner {
position: relative;
display: grid;
overflow: hidden;
grid-template-columns: 1fr auto;
align-items: center;
gap: 2rem;
padding: clamp(2rem, 5vw, 4rem);
border-radius: 1.6rem;
background: var(--color-primary);
color: var(--color-white);
}
.shop-bridge__inner::after {
position: absolute;
right: 9rem;
bottom: -8rem;
width: 20rem;
height: 20rem;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 50%;
content: "";
}
.shop-bridge__copy {
position: relative;
z-index: 1;
max-width: 720px;
}
.shop-bridge h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2.3rem, 5vw, 4.5rem);
font-weight: 500;
letter-spacing: -0.045em;
line-height: 0.95;
}
.shop-bridge p {
max-width: 640px;
margin: 1rem 0 0;
color: rgba(255, 255, 255, 0.78);
}
.shop-bridge .button {
position: relative;
z-index: 1;
}
.archive-hero,	.search-hero,	.page-hero {
padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid var(--color-line);
background: radial-gradient(circle at 86% 18%, rgba(194, 24, 86, 0.14), transparent 25%),	var(--color-paper);
}
.archive-hero h1,	.search-hero h1,	.page-hero h1 {
max-width: 900px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(3rem, 7vw, 6.2rem);
font-weight: 500;
letter-spacing: -0.055em;
line-height: 0.92;
}
.archive-description,	.page-lede {
max-width: 680px;
margin: 1.2rem 0 0;
color: var(--color-muted);
font-size: 1.08rem;
}
.archive-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
padding-block: clamp(3rem, 6vw, 6rem);
}
.pagination,	.nav-links {
display: flex;
grid-column: 1 / -1;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
margin-top: 2rem;
}
.page-numbers {
display: inline-flex;
min-width: 42px;
height: 42px;
align-items: center;
justify-content: center;
padding-inline: 0.7rem;
border: 1px solid var(--color-line);
border-radius: 999px;
background: var(--color-cream);
font-size: 0.82rem;
font-weight: 800;
text-decoration: none;
}
.page-numbers.current,	.page-numbers:hover {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-white);
}
.article-header {
padding: clamp(4rem, 8vw, 7rem) 0 clamp(2.6rem, 5vw, 4.5rem);
text-align: center;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin: 0 0 1.8rem;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 700;
}
.breadcrumbs a {
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--color-primary);
}
.article-category {
display: inline-flex;
margin-bottom: 1.2rem;
padding: 0.45rem 0.72rem;
border-radius: 999px;
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.09em;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
}
.article-header h1 {
max-width: 980px;
margin: 0 auto;
font-family: var(--font-display);
font-size: clamp(3rem, 7.2vw, 6.8rem);
font-weight: 500;
letter-spacing: -0.06em;
line-height: 0.91;
}
.article-standfirst {
max-width: 760px;
margin: 1.5rem auto 0;
color: var(--color-ink-soft);
font-family: var(--font-display);
font-size: clamp(1.2rem, 2.4vw, 1.65rem);
font-style: italic;
line-height: 1.4;
}
.article-meta {
justify-content: center;
margin-top: 1.7rem;
}
.article-feature {
width: min(100% - (2 * var(--gutter)), 1180px);
max-height: 720px;
margin: 0 auto;
overflow: hidden;
border-radius: 1.6rem;
background: var(--color-paper-deep);
box-shadow: var(--shadow-soft);
}
.article-feature img {
width: 100%;
max-height: 720px;
object-fit: cover;
}
.article-layout {
display: grid;
width: min(100% - (2 * var(--gutter)), 1100px);
grid-template-columns: 230px minmax(0, var(--reading-width));
justify-content: center;
gap: clamp(2.5rem, 6vw, 5.5rem);
margin: clamp(3.5rem, 7vw, 6rem) auto;
}
.article-layout--solo {
grid-template-columns: minmax(0, var(--reading-width));
}
.article-sidebar {
min-width: 0;
}
.article-toc {
position: sticky;
top: 8rem;
padding-top: 0.25rem;
}
.article-toc__title {
margin: 0 0 0.8rem;
color: var(--color-ink);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.article-toc ol {
margin: 0;
padding: 0;
list-style: none;
}
.article-toc li {
margin: 0;
border-top: 1px solid var(--color-line);
}
.article-toc a {
display: block;
padding: 0.65rem 0;
color: var(--color-muted);
font-size: 0.76rem;
line-height: 1.4;
text-decoration: none;
}
.article-toc a:hover {
color: var(--color-primary);
}
.article-toc .toc-level-3 a {
padding-left: 0.8rem;
font-size: 0.72rem;
}
.mobile-toc {
display: none;
}
.article-body {
min-width: 0;
color: var(--color-ink-soft);
font-family: var(--font-display);
font-size: clamp(1.12rem, 1.5vw, 1.25rem);
line-height: 1.78;
}
.article-body > *:first-child {
margin-top: 0;
}
.article-body p,	.article-body ul,	.article-body ol {
margin: 0 0 1.45em;
}
.article-body h2,	.article-body h3,	.article-body h4 {
scroll-margin-top: 7rem;
color: var(--color-ink);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.035em;
line-height: 1.08;
}
.article-body h2 {
margin: 2.5em 0 0.8em;
font-size: clamp(2.1rem, 4.5vw, 3.3rem);
}
.article-body h3 {
margin: 2em 0 0.7em;
font-size: clamp(1.55rem, 3vw, 2.1rem);
}
.article-body h4 {
margin: 1.8em 0 0.55em;
font-size: 1.35rem;
}
.article-body a {
color: var(--color-primary);
font-weight: 600;
text-decoration-thickness: 0.07em;
}
.article-body strong {
color: var(--color-ink);
font-weight: 700;
}
.article-body ul,	.article-body ol {
padding-left: 1.3em;
}
.article-body li {
margin-bottom: 0.55em;
padding-left: 0.25em;
}
.article-body blockquote,	.article-body .wp-block-quote {
margin: 2em 0;
padding: 1.5rem 1.6rem 1.4rem;
border: 0;
border-left: 4px solid var(--color-primary);
border-radius: 0 1rem 1rem 0;
background: var(--color-primary-soft);
color: var(--color-ink);
font-size: 1.1em;
font-style: italic;
}
.article-body blockquote p:last-child {
margin-bottom: 0;
}
.article-body img {
border-radius: 1rem;
}
.article-body figure {
margin: 2em 0;
}
.article-body figcaption {
margin-top: 0.65rem;
color: var(--color-muted);
font-family: var(--font-sans);
font-size: 0.72rem;
text-align: center;
}
.article-body table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 0.85rem;
}
.article-body th,	.article-body td {
padding: 0.8rem;
border: 1px solid var(--color-line);
text-align: left;
}
.article-body th {
background: var(--color-paper-deep);
}
.article-body .wp-block-button__link {
display: inline-flex;
padding: 0.85rem 1.25rem;
border-radius: 999px;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.85rem;
text-decoration: none;
}
.article-body .toc_container {
width: 100% !important;
margin: 2rem 0;
padding: 1.35rem 1.45rem;
border: 1px solid var(--color-line);
border-radius: 1rem;
background: var(--color-cream);
font-family: var(--font-sans);
font-size: 0.82rem;
line-height: 1.5;
}
.article-body .toc_container .toc_title {
margin: 0 0 0.85rem;
color: var(--color-ink);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.1em;
text-align: left !important;
text-transform: uppercase;
}
.article-body .toc_container ul {
margin: 0;
padding-left: 0;
list-style: none;
}
.article-body .toc_container ul ul {
margin-top: 0.25rem;
padding-left: 1rem;
}
.article-body .toc_container li {
margin: 0.3rem 0;
padding: 0;
}
.article-body .toc_container a {
color: var(--color-muted);
font-weight: 600;
text-decoration: none;
}
.article-body .toc_container a:hover {
color: var(--color-primary);
}
.article-body .sm-encadre {
margin: 2rem 0;
padding: 1.35rem 1.45rem;
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-primary);
border-radius: 0 1rem 1rem 0;
background: var(--color-cream);
color: var(--color-ink-soft);
font-size: 0.94em;
}
.article-body .sm-encadre-warning {
border-left-color: var(--color-secondary);
background: #fff0e9;
}
.article-body .sm-encadre-tip {
border-left-color: var(--color-primary);
background: var(--color-primary-soft);
}
.article-body .sm-encadre-titre {
margin-bottom: 0.55rem;
color: var(--color-ink);
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.035em;
}
.article-body .sm-encadre p:last-child {
margin-bottom: 0;
}
.article-body .wp-block-media-text {
gap: 1.3rem;
margin: 2.2rem 0;
}
.article-body .wp-block-media-text__content {
padding: 0 0 0 5%;
}
.article-body .wp-block-media-text__content p:last-child {
margin-bottom: 0;
}
.article-body .wp-block-columns {
gap: 1.3rem;
}
.article-body .wp-block-group {
border-radius: 1rem;
}
.article-author-card {
display: grid;
grid-template-columns: 68px 1fr;
gap: 1.1rem;
margin-top: 3.5rem;
padding-top: 2rem;
border-top: 1px solid var(--color-line);
font-family: var(--font-sans);
}
.article-author-card__mark {
display: grid;
width: 68px;
height: 68px;
place-items: center;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-display);
font-size: 1.25rem;
font-style: italic;
}
.article-author-card__label {
margin: 0 0 0.2rem !important;
color: var(--color-muted);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.article-author-card__name {
margin: 0 !important;
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 600;
}
.article-author-card p {
margin: 0.45rem 0 0.65rem;
color: var(--color-muted);
font-size: 0.8rem;
line-height: 1.55;
}
.article-disclosure {
margin-top: 2rem;
padding: 1.3rem 1.4rem;
border: 1px solid var(--color-line);
border-radius: 1rem;
background: var(--color-cream);
color: var(--color-muted);
font-family: var(--font-sans);
font-size: 0.78rem;
line-height: 1.6;
}
.article-disclosure strong {
color: var(--color-ink);
}
.related-section {
border-top: 1px solid var(--color-line);
background: var(--color-cream);
}
.comments-area {
width: min(100% - (2 * var(--gutter)), var(--reading-width));
margin: 0 auto;
padding: 4rem 0;
}
.comments-title,	.comment-reply-title {
font-family: var(--font-display);
font-size: 2rem;
}
.page-content {
width: min(100% - (2 * var(--gutter)), var(--reading-width));
margin: clamp(3rem, 6vw, 5.5rem) auto;
}
.not-found {
display: grid;
min-height: 65vh;
place-items: center;
padding: 4rem var(--gutter);
text-align: center;
}
.not-found__code {
margin: 0;
color: var(--color-primary);
font-family: var(--font-display);
font-size: clamp(6rem, 22vw, 15rem);
font-weight: 500;
letter-spacing: -0.08em;
line-height: 0.72;
}
.not-found h1 {
margin: 1.5rem 0 0.7rem;
font-family: var(--font-display);
font-size: clamp(2.3rem, 6vw, 4.2rem);
font-weight: 500;
letter-spacing: -0.045em;
}
.not-found p {
max-width: 540px;
margin: 0 auto 1.6rem;
color: var(--color-muted);
}
.empty-state {
grid-column: 1 / -1;
padding: 3rem;
border: 1px solid var(--color-line);
border-radius: 1.2rem;
background: var(--color-cream);
text-align: center;
}
.empty-state h2 {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: 2rem;
}
.empty-state p {
color: var(--color-muted);
}
.article-body .wpforms-container,	.comment-form {
font-family: var(--font-sans);
font-size: 0.9rem;
}
.article-body .wpforms-field {
padding-block: 0.65rem !important;
}
.article-body .wpforms-field-label,	.comment-form label {
color: var(--color-ink);
font-size: 0.78rem !important;
font-weight: 800 !important;
}
.article-body .wpforms-field input,	.article-body .wpforms-field textarea,	.comment-form input,	.comment-form textarea {
width: 100%;
padding: 0.85rem 1rem !important;
border: 1px solid var(--color-line) !important;
border-radius: 0.7rem !important;
background: var(--color-white) !important;
color: var(--color-ink) !important;
box-shadow: none !important;
}
.article-body .wpforms-field input:focus,	.article-body .wpforms-field textarea:focus,	.comment-form input:focus,	.comment-form textarea:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px rgba(194, 24, 86, 0.12) !important;
outline: none;
}
.article-body .wpforms-submit,	.comment-form .submit {
min-height: 48px !important;
padding: 0.8rem 1.3rem !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--color-primary) !important;
color: var(--color-white) !important;
font-weight: 800 !important;
cursor: pointer;
}
.site-footer {
padding: clamp(3.5rem, 7vw, 6rem) 0 1.5rem;
background: var(--color-ink);
color: var(--color-white);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 0.75fr 0.75fr;
gap: clamp(2rem, 6vw, 6rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer-brand .brand {
color: var(--color-white);
}
.footer-brand p {
max-width: 430px;
margin: 1.2rem 0 0;
color: rgba(255, 255, 255, 0.58);
font-family: var(--font-display);
font-size: 1.18rem;
line-height: 1.55;
}
.footer-heading {
margin: 0 0 1rem;
color: rgba(255, 255, 255, 0.45);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer-links {
display: grid;
gap: 0.65rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links a {
color: rgba(255, 255, 255, 0.82);
font-size: 0.83rem;
text-decoration: none;
}
.footer-links a:hover {
color: var(--color-secondary);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 1.3rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.4);
font-size: 0.68rem;
}
.footer-bottom p {
margin: 0;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.footer-legal a {
text-decoration: none;
}
@media (max-width: 1080px) {
.primary-nav {
display: none;
}
.header-main {
grid-template-columns: 1fr auto;
}
.mobile-menu {
display: block;
}
.header-actions > .button {
display: none;
}
.topic-grid {
overflow-x: auto;
grid-template-columns: repeat(5, minmax(190px, 1fr));
scroll-snap-type: x mandatory;
}
.topic-card {
scroll-snap-align: start;
}
}
@media (max-width: 900px) {
body.admin-bar .site-header {
top: 46px;
}
.hero__inner {
grid-template-columns: 1fr;
gap: 1.7rem;
}
.hero__copy {
max-width: 650px;
padding-top: 0;
}
.lead-story {
grid-template-columns: 1fr;
}
.lead-story__media {
min-height: auto;
aspect-ratio: 16 / 10;
}
.cards-grid,	.archive-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.numbered-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.article-layout {
display: block;
width: min(100% - (2 * var(--gutter)), var(--reading-width));
}
.article-sidebar > .article-toc {
display: none;
}
.mobile-toc {
display: block;
margin-bottom: 2rem;
border: 1px solid var(--color-line);
border-radius: 1rem;
background: var(--color-cream);
}
.mobile-toc > summary {
padding: 1rem 1.1rem;
cursor: pointer;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
list-style: none;
text-transform: uppercase;
}
.mobile-toc > summary::-webkit-details-marker {
display: none;
}
.mobile-toc .article-toc {
position: static;
padding: 0 1.1rem 1rem;
}
.shop-bridge__inner {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
:root {
--gutter: 1rem;
}
.site-topbar__inner {
justify-content: center;
text-align: center;
}
.site-topbar__inner p:last-child {
display: none;
}
.header-main {
min-height: 64px;
}
.brand__sexity {
font-size: 1rem;
}
.brand__mag {
font-size: 1.3rem;
}
.header-search {
display: none;
}
.hero {
padding-top: 3.5rem;
}
.hero::before {
top: -9rem;
right: -9rem;
width: 20rem;
}
.hero::after {
display: none;
}
.hero h1 {
font-size: clamp(3.35rem, 17vw, 5rem);
}
.hero__copy > p {
font-size: 1rem;
}
.hero-search {
border-radius: 1rem;
}
.hero-proof {
display: grid;
gap: 0.55rem;
}
.topic-card {
min-height: 135px;
}
.section {
padding-block: 4rem;
}
.section-head {
display: block;
}
.section-head .text-link {
margin-top: 1.1rem;
}
.section-heading {
font-size: clamp(2.5rem, 13vw, 3.6rem);
}
.lead-story {
border-radius: 1rem;
}
.lead-story__content {
padding: 1.6rem;
}
.lead-story h2 {
font-size: 2.35rem;
}
.cards-grid,	.archive-grid {
grid-template-columns: 1fr;
}
.article-card h3 {
font-size: 1.75rem;
}
.numbered-grid {
grid-template-columns: 1fr;
}
.numbered-card {
min-height: 210px;
}
.shop-bridge__inner {
padding: 1.7rem;
border-radius: 1rem;
}
.article-header {
padding-top: 3rem;
}
.article-header h1 {
font-size: clamp(2.8rem, 14vw, 4.3rem);
}
.article-feature {
width: 100%;
border-radius: 0;
box-shadow: none;
}
.article-layout {
margin-top: 2.5rem;
}
.article-body {
font-size: 1.08rem;
line-height: 1.72;
}
.article-body h2 {
font-size: 2.05rem;
}
.archive-hero h1,	.search-hero h1,	.page-hero h1 {
font-size: clamp(2.9rem, 14vw, 4.2rem);
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-brand {
grid-column: auto;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
*,	*::before,	*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
}
@layer components {
.reading-progress {
position: fixed;
z-index: 2000;
top: 0;
right: 0;
left: 0;
height: 3px;
pointer-events: none;
}
.reading-progress__bar {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
.article-cover {
position: relative;
overflow: hidden;
padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3.5rem, 7vw, 6.5rem);
border-bottom: 1px solid var(--color-line);
background: radial-gradient(circle at 8% 18%, rgba(194, 24, 86, 0.08), transparent 24%),	var(--color-cream);
}
.article-cover::after {
position: absolute;
right: -9rem;
bottom: -13rem;
width: 31rem;
height: 31rem;
border: 1px solid rgba(194, 24, 86, 0.13);
border-radius: 50%;
content: "";
}
.breadcrumbs--cover {
position: relative;
z-index: 2;
max-width: 760px;
justify-content: flex-start;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.breadcrumbs--cover [aria-current="page"] {
overflow: hidden;
max-width: 260px;
text-overflow: ellipsis;
white-space: nowrap;
}
.article-cover__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
align-items: center;
gap: clamp(2.5rem, 7vw, 7rem);
}
.article-cover__grid--solo {
grid-template-columns: minmax(0, 900px);
}
.article-cover__copy {
min-width: 0;
}
.article-cover__copy h1 {
max-width: 850px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(3.25rem, 6vw, 6.2rem);
font-weight: 560;
letter-spacing: -0.058em;
line-height: 0.91;
}
.article-cover .article-standfirst {
max-width: 720px;
margin: 1.5rem 0 0;
color: var(--color-ink-soft);
font-size: clamp(1.22rem, 2vw, 1.5rem);
font-style: normal;
font-weight: 430;
line-height: 1.42;
}
.article-meta--cover {
justify-content: flex-start;
margin-top: 1.7rem;
color: var(--color-muted);
font-family: var(--font-sans);
letter-spacing: 0;
text-transform: none;
}
.article-meta__author {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--color-ink);
font-weight: 750;
}
.article-meta__avatar {
display: inline-grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 50%;
background: var(--color-primary);
color: var(--color-white);
font-family: var(--font-display);
font-size: 0.67rem;
font-style: italic;
letter-spacing: 0;
}
.article-cover__media {
position: relative;
overflow: hidden;
width: 100%;
max-height: 650px;
margin: 0;
aspect-ratio: 4 / 5;
border-radius: 48% 48% 1.4rem 1.4rem;
background: var(--color-paper-deep);
box-shadow: 0 25px 70px rgba(58, 36, 28, 0.15);
}
.article-cover__media::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(23, 19, 15, 0.22));
content: "";
pointer-events: none;
}
.article-cover__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-cover__stamp {
position: absolute;
z-index: 2;
right: 1rem;
bottom: 1rem;
display: grid;
width: 72px;
height: 72px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.68);
border-radius: 50%;
background: rgba(255, 250, 244, 0.88);
color: var(--color-primary);
font-family: var(--font-display);
font-size: 0.84rem;
font-style: italic;
line-height: 0.92;
text-align: center;
transform: rotate(-7deg);
backdrop-filter: blur(8px);
}
.article-reading {
background: #fffdf9;
}
.article-reading__grid {
display: grid;
width: min(100% - (2 * var(--gutter)), 1040px);
grid-template-columns: 150px minmax(0, 700px);
justify-content: center;
gap: clamp(2.5rem, 7vw, 6rem);
margin-inline: auto;
padding-block: clamp(4rem, 8vw, 7rem);
}
.article-rail {
position: sticky;
top: 8rem;
align-self: start;
padding-top: 0.25rem;
font-family: var(--font-sans);
}
.article-rail__time {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.article-rail__time strong {
color: var(--color-primary);
font-family: var(--font-display);
font-size: 3.4rem;
font-weight: 500;
letter-spacing: -0.06em;
line-height: 1;
}
.article-rail__time span {
color: var(--color-muted);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.article-rail__rule {
width: 100%;
height: 1px;
margin: 1rem 0;
background: var(--color-line);
}
.article-rail p {
margin: 0 0 0.85rem;
color: var(--color-muted);
font-family: var(--font-display);
font-size: 0.95rem;
font-style: italic;
line-height: 1.35;
}
.article-rail a {
color: var(--color-ink);
font-size: 0.69rem;
font-weight: 800;
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-underline-offset: 0.25em;
}
.article-column {
min-width: 0;
}
.inline-toc {
margin: 0 0 2.7rem;
overflow: hidden;
border: 1px solid rgba(194, 24, 86, 0.2);
border-radius: 1.1rem;
background: linear-gradient(135deg, var(--color-primary-soft), #fff7f8);
font-family: var(--font-sans);
}
.inline-toc > summary {
position: relative;
display: flex;
min-height: 74px;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 3.3rem 1.1rem 1.35rem;
cursor: pointer;
list-style: none;
}
.inline-toc > summary::-webkit-details-marker {
display: none;
}
.inline-toc > summary::after {
position: absolute;
top: 50%;
right: 1.45rem;
width: 9px;
height: 9px;
border-right: 2px solid var(--color-primary);
border-bottom: 2px solid var(--color-primary);
content: "";
transform: translateY(-70%) rotate(45deg);
transition: transform 180ms ease;
}
.inline-toc[open] > summary::after {
transform: translateY(-25%) rotate(225deg);
}
.inline-toc > summary span {
color: var(--color-ink);
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.inline-toc > summary small {
color: var(--color-primary);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.inline-toc__content {
padding: 0 1.35rem 1.35rem;
border-top: 1px solid rgba(194, 24, 86, 0.16);
}
.inline-toc .article-toc {
position: static;
padding-top: 1rem;
}
.inline-toc .article-toc__title {
display: none;
}
.inline-toc .article-toc ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 1.5rem;
}
.inline-toc .article-toc li {
border-color: rgba(194, 24, 86, 0.13);
}
.inline-toc .article-toc a {
color: var(--color-ink-soft);
font-size: 0.75rem;
}
.article-body .inline-toc {
font-size: 1rem;
}
.article-body .inline-toc .toc_container {
max-height: 480px;
margin: 0 !important;
overflow-y: auto;
padding: 1rem 0 0 !important;
border: 0;
border-radius: 0;
background: transparent;
}
.article-body .inline-toc .toc_title {
display: none;
}
.article-body {
counter-reset: article-section;
color: #362e29;
font-family: var(--font-display);
font-size: clamp(1.18rem, 1.45vw, 1.3rem);
font-weight: 400;
line-height: 1.76;
}
.article-body > p:first-of-type {
color: var(--color-ink);
font-size: 1.22em;
font-weight: 470;
letter-spacing: -0.012em;
line-height: 1.58;
}
.article-body p {
margin-bottom: 1.5em;
}
.article-body > h2 {
position: relative;
counter-increment: article-section;
margin: 3.2em 0 0.85em;
padding-top: 1.15rem;
border-top: 1px solid var(--color-line);
font-size: clamp(2.35rem, 4.5vw, 3.65rem);
letter-spacing: -0.048em;
line-height: 0.98;
}
.article-body > h2::before {
display: block;
margin-bottom: 0.6rem;
color: var(--color-primary);
content: counter(article-section, decimal-leading-zero);
font-family: var(--font-sans);
font-size: 0.67rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 1;
}
.article-body > h3 {
position: relative;
margin-top: 2.3em;
padding-left: 1.15rem;
font-size: clamp(1.7rem, 3vw, 2.25rem);
}
.article-body > h3::before {
position: absolute;
top: 0.48em;
left: 0;
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--color-secondary);
content: "";
}
.article-body > figure.wp-block-image,	.article-body > .wp-block-image,	.article-body > .wp-block-media-text,	.article-body > .wp-block-gallery {
width: calc(100% + 100px);
max-width: none;
margin-top: 2.4rem;
margin-bottom: 2.4rem;
margin-left: -50px;
}
.article-body > figure.wp-block-image img,	.article-body > .wp-block-image img {
width: 100%;
}
.article-body > .wp-block-media-text {
overflow: hidden;
gap: 0;
border: 1px solid var(--color-line);
border-radius: 1.2rem;
background: var(--color-cream);
}
.article-body > .wp-block-media-text .wp-block-media-text__media {
height: 100%;
}
.article-body > .wp-block-media-text .wp-block-media-text__media img {
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
}
.article-body > .wp-block-media-text .wp-block-media-text__content {
padding: 1.5rem 1.7rem;
}
.article-body > .sm-encadre {
width: calc(100% + 38px);
margin: 2.3rem 0 2.3rem -19px;
padding: 1.5rem 1.7rem;
border: 0;
border-left: 4px solid var(--color-primary);
border-radius: 0 1rem 1rem 0;
box-shadow: 0 12px 32px rgba(58, 36, 28, 0.06);
}
.article-body .sm-encadre-titre {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.73rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.article-body .sm-encadre-titre::before {
display: block;
width: 9px;
height: 9px;
flex: 0 0 9px;
border: 2px solid currentColor;
border-radius: 50%;
content: "";
}
.article-body > blockquote,	.article-body > .wp-block-quote {
width: calc(100% + 80px);
margin: 2.7rem 0 2.7rem -40px;
padding: 0.3rem 0 0.3rem 1.7rem;
border-left: 3px solid var(--color-primary);
border-radius: 0;
background: transparent;
color: var(--color-ink);
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.35;
}
.article-body > .wp-block-table,	.article-body > table {
width: calc(100% + 80px);
max-width: none;
margin: 2.3rem 0 2.3rem -40px;
}
.article-body hr,	.article-body .wp-block-separator {
width: 5rem;
margin: 3.2rem auto;
border: 0;
border-top: 2px solid var(--color-primary);
opacity: 1;
}
.article-author-card {
margin-top: 4.5rem;
padding: 1.6rem;
border: 1px solid var(--color-line);
border-radius: 1.1rem;
background: var(--color-cream);
}
.article-disclosure {
border: 0;
border-left: 2px solid var(--color-line);
border-radius: 0;
background: transparent;
}
@media (max-width: 980px) {
.article-cover__grid {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
gap: 2.5rem;
}
.article-cover__copy h1 {
font-size: clamp(3rem, 6.5vw, 4.8rem);
}
.article-reading__grid {
grid-template-columns: 110px minmax(0, 700px);
gap: 2.5rem;
}
}
@media (max-width: 780px) {
.article-cover {
padding-top: 1.5rem;
}
.breadcrumbs--cover {
margin-bottom: 2rem;
}
.article-cover__grid {
grid-template-columns: 1fr;
gap: 2.3rem;
}
.article-cover__copy h1 {
font-size: clamp(3.1rem, 12vw, 5rem);
}
.article-cover__media {
max-height: 430px;
aspect-ratio: 16 / 10;
border-radius: 1.2rem;
}
.article-reading__grid {
display: block;
width: min(100% - (2 * var(--gutter)), 700px);
padding-top: 3rem;
}
.article-rail {
position: static;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.7rem;
padding: 0 0 1rem;
border-bottom: 1px solid var(--color-line);
}
.article-rail__time strong {
font-size: 2.6rem;
}
.article-rail__rule,	.article-rail p {
display: none;
}
.inline-toc .article-toc ol {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.article-cover {
padding-bottom: 2.6rem;
}
.breadcrumbs--cover [aria-current="page"] {
display: none;
}
.article-cover__copy h1 {
font-size: clamp(2.85rem, 13.8vw, 4.1rem);
letter-spacing: -0.052em;
line-height: 0.93;
}
.article-cover .article-standfirst {
font-size: 1.1rem;
}
.article-meta--cover {
gap: 0.45rem;
font-size: 0.67rem;
}
.article-meta--cover > .meta-divider:nth-of-type(n + 2),	.article-meta--cover > span:not(.article-meta__author) {
display: none;
}
.article-cover__media {
max-height: 310px;
aspect-ratio: 4 / 3;
}
.article-cover__stamp {
width: 58px;
height: 58px;
font-size: 0.72rem;
}
.article-body {
font-size: 1.1rem;
line-height: 1.72;
}
.article-body > p:first-of-type {
font-size: 1.15em;
}
.article-body > h2 {
margin-top: 2.7em;
font-size: 2.2rem;
}
.article-body > h3 {
font-size: 1.65rem;
}
.article-body > figure.wp-block-image,	.article-body > .wp-block-image,	.article-body > .wp-block-media-text,	.article-body > .wp-block-gallery,	.article-body > blockquote,	.article-body > .wp-block-quote,	.article-body > .wp-block-table,	.article-body > table,	.article-body > .sm-encadre {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.article-body > .wp-block-media-text .wp-block-media-text__content {
padding: 1.25rem;
}
.inline-toc > summary {
display: block;
min-height: 0;
}
.inline-toc > summary span,	.inline-toc > summary small {
display: block;
}
.inline-toc > summary small {
margin-top: 0.15rem;
}
.article-author-card {
grid-template-columns: 52px 1fr;
padding: 1.2rem;
}
.article-author-card__mark {
width: 52px;
height: 52px;
}
}
}
.sm-reading-pilot .article-cover {
background: var(--color-cream);
padding-block: 1.5rem 3rem;
}
.sm-reading-pilot .article-cover::after, .sm-reading-pilot .article-cover__media::after, .sm-reading-pilot .article-cover__stamp {
display: none;
}
.sm-reading-pilot .breadcrumbs--cover {
margin-bottom: 2rem;
font-size: 0.78rem;
}
.sm-reading-pilot .article-cover__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.7fr);
gap: clamp(2rem, 5vw, 4rem);
}
.sm-reading-pilot .article-cover__copy h1 {
max-width: 20ch;
font-size: clamp(2.65rem, 4.3vw, 4.1rem);
line-height: 1.08;
letter-spacing: -0.035em;
text-wrap: balance;
}
.sm-reading-pilot .article-cover .article-standfirst {
max-width: 54ch;
font-family: var(--font-sans);
font-size: 1.04rem;
line-height: 1.65;
margin-top: 1.2rem;
}
.sm-reading-pilot .article-cover__media {
aspect-ratio: 4 / 3;
max-height: 330px;
border-radius: 1.1rem;
box-shadow: none;
}
.sm-reading-pilot .article-cover__media img {
object-fit: cover;
}
.sm-reading-pilot .article-jump {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 44px;
margin-top: 0.7rem;
font: 700 0.84rem/1.5 var(--font-sans);
color: var(--color-primary-text);
text-decoration: underline;
text-underline-offset: 0.22em;
}
.sm-reading-pilot .article-meta--cover {
gap: 0.55rem 0.85rem;
margin-top: 1rem;
font-size: 0.75rem;
line-height: 1.6;
}
.sm-reading-pilot .article-meta--cover > span:not(.meta-divider), .sm-reading-pilot .article-meta--cover time {
display: inline;
}
.sm-reading-pilot .article-meta--cover > .article-meta__author {
display: inline-flex;
}
.sm-reading-pilot .article-meta--cover .meta-divider {
display: none;
}
.sm-reading-pilot .article-reading {
background: #fffdf9;
}
.sm-reading-pilot .article-reading__grid {
width: min(calc(100% - 2 * var(--gutter)), 990px);
grid-template-columns: 140px minmax(0, 690px);
gap: clamp(2rem, 5vw, 4rem);
padding-block: 3rem 4rem;
}
.sm-reading-pilot .article-body {
font-family: var(--font-display);
font-size: 1.24rem;
line-height: 1.8;
color: #362e29;
overflow-wrap: break-word;
}
.sm-reading-pilot .article-body > p:first-of-type {
font-size: 1.08em;
font-weight: 400;
line-height: 1.75;
}
.sm-reading-pilot .article-body p {
margin: 0 0 1.25em;
text-align: start;
}
.sm-reading-pilot .article-body strong {
color: var(--color-ink);
}
.sm-reading-pilot .article-body > h2 {
margin: 2.25em 0 0.8em;
padding-top: 1.2rem;
font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1.15;
letter-spacing: -0.025em;
border-color: var(--color-line);
}
.sm-reading-pilot .article-body > h2::before {
color: var(--color-primary-text);
margin-bottom: 0.75rem;
}
.sm-reading-pilot .article-body > h3 {
margin: 1.5em 0 0.65em;
padding-left: 0;
font-size: 1.65rem;
line-height: 1.25;
}
.sm-reading-pilot .article-body > h3::before {
display: none;
}
.sm-reading-pilot .article-body :is(h2,h3,h4) [id], .sm-reading-pilot #article-texte {
scroll-margin-top: 7rem;
}
.sm-reading-pilot .inline-toc {
background: #fff;
border: 1px solid var(--color-line);
border-radius: 0.8rem;
margin: 0 0 2rem;
}
.sm-reading-pilot .inline-toc > summary {
min-height: 64px;
padding: 1rem 3rem 1rem 1.2rem;
}
.sm-reading-pilot .inline-toc > summary span {
font-size: 1.35rem;
}
.sm-reading-pilot .inline-toc > summary small {
color: var(--color-primary-text);
}
.sm-reading-pilot .inline-toc .article-toc ol {
grid-template-columns: 1fr;
gap: 0;
}
.sm-reading-pilot .inline-toc .article-toc a {
display: block;
padding-block: 0.65rem;
font-size: 0.88rem;
line-height: 1.55;
}
.sm-reading-pilot .inline-toc__content {
padding-inline: 1.2rem;
}
.sm-reading-pilot .article-body a:not(.button) {
color: #a51048;
text-decoration: underline;
}
.sm-reading-pilot .article-body :is(.sm-usage-grid,.sm-grille) {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 1rem;
margin: 1.5rem 0 2rem;
}
.sm-reading-pilot .article-body :is(.sm-usage-card,.sm-carte) {
min-width: 0;
padding: 1.2rem;
border: 1px solid var(--color-line);
border-radius: 0.8rem;
background: var(--color-cream);
box-shadow: none;
font-family: var(--font-sans);
font-size: 0.92rem;
line-height: 1.7;
}
.sm-reading-pilot .article-body .sm-usage-icon {
display: none;
}
.sm-reading-pilot .article-body :is(.sm-usage-card h4,.sm-carte-titre) {
margin: 0 0 0.8rem;
font: 700 1rem/1.45 var(--font-sans);
color: var(--color-ink);
}
.sm-reading-pilot .article-body :is(.sm-usage-card,.sm-carte) p:last-child {
margin-bottom: 0;
}
.sm-reading-pilot .article-body :is(.sm-pros,.sm-cons) {
color: var(--color-ink-soft);
font-size: 0.86rem;
}
.sm-reading-pilot .article-body > .sm-encadre {
width: 100%;
margin: 2rem 0;
padding: 1.25rem 1.4rem;
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-primary);
border-radius: 0 0.75rem 0.75rem 0;
background: #fff7fa;
box-shadow: none;
}
.sm-reading-pilot .article-body .sm-encadre-titre {
color: #a51048;
font-size: 0.82rem;
line-height: 1.6;
letter-spacing: 0.02em;
text-transform: none;
}
.sm-reading-pilot .article-body > .sm-encadre p:last-child {
margin-bottom: 0;
}
.sm-reading-pilot .sm-table-scroll {
width: 100%;
overflow-x: auto;
margin-block: 1.6rem 2rem;
border: 1px solid var(--color-line);
border-radius: 0.75rem;
-webkit-overflow-scrolling: touch;
}
.sm-reading-pilot .sm-table-scroll table {
display: table;
width: 100%;
min-width: 520px;
max-width: none;
margin: 0;
border-collapse: collapse;
font: 400 0.88rem/1.6 var(--font-sans);
}
.sm-reading-pilot .sm-table-scroll :is(th,td) {
padding: 0.9rem 1rem;
border: 0;
border-bottom: 1px solid var(--color-line);
text-align: left;
vertical-align: top;
}
.sm-reading-pilot .sm-table-scroll th {
background: #f9dce6;
color: var(--color-ink);
font-weight: 700;
}
.sm-reading-pilot .sm-table-scroll tbody tr:nth-child(even) {
background: var(--color-cream);
}
.sm-reading-pilot .sm-table-scroll tr:last-child td {
border-bottom: 0;
}
.sm-reading-pilot .sm-table-scroll:focus-visible {
outline: 3px solid #a51048;
outline-offset: 3px;
}
.sm-reading-pilot .sm-faq-item {
padding: 1.35rem 0;
border-bottom: 1px solid var(--color-line);
background: transparent;
}
.sm-reading-pilot .sm-faq-question {
margin-bottom: 0.6rem;
font: 700 1.02rem/1.5 var(--font-sans);
color: var(--color-ink);
}
.sm-reading-pilot .sm-faq-answer {
font-size: 1.12rem;
line-height: 1.75;
}
.sm-reading-pilot .article-author-card {
margin-top: 3rem;
box-shadow: none;
}
.sm-reading-pilot .article-author-card p {
line-height: 1.65;
}
.sm-reading-pilot .article-disclosure {
font-size: 0.85rem;
line-height: 1.7;
}
@media (max-width: 780px) {
.sm-reading-pilot .article-cover__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.sm-reading-pilot .article-cover__copy h1 {
max-width: 22ch;
}
.sm-reading-pilot .article-cover__media {
max-height: 300px;
aspect-ratio: 16 / 9;
}
.sm-reading-pilot .article-reading__grid {
display: block;
width: min(calc(100% - 2 * var(--gutter)), 690px);
padding-top: 2rem;
}
.sm-reading-pilot .article-rail {
margin-bottom: 1.2rem;
padding-bottom: 0.9rem;
}
}
@media (max-width: 620px) {
.sm-reading-pilot .article-cover {
padding-block: 1.1rem 1.75rem;
}
.sm-reading-pilot .breadcrumbs--cover {
margin-bottom: 1.2rem;
}
.sm-reading-pilot .article-cover__copy h1 {
max-width: none;
font-size: clamp(2.15rem,9.2vw,2.85rem);
line-height: 1.12;
}
.sm-reading-pilot .article-cover .article-standfirst {
font-size: 1rem;
margin-top: 1rem;
}
.sm-reading-pilot .article-cover__media {
max-height: 230px;
}
.sm-reading-pilot .article-body {
font-size: 1.15rem;
line-height: 1.8;
}
.sm-reading-pilot .article-body > h2 {
font-size: 1.85rem;
margin-top: 2em;
}
.sm-reading-pilot .article-body > h3 {
font-size: 1.5rem;
}
.sm-reading-pilot .article-body :is(.sm-usage-grid,.sm-grille) {
grid-template-columns: minmax(0,1fr);
}
.sm-reading-pilot .article-body :is(.sm-usage-card,.sm-carte) {
padding: 1.1rem;
}
.sm-reading-pilot .article-body > .sm-encadre {
padding: 1.1rem;
}
.sm-reading-pilot .article-body :is(iframe,video,img) {
max-width: 100%;
}
.sm-reading-pilot .article-body .wp-block-columns {
flex-wrap: wrap !important;
}
.sm-reading-pilot .article-body .wp-block-column {
flex-basis: 100% !important;
min-width: 0;
}
}
.article-card .article-card__title {
margin: .75rem 0 .7rem;
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -.035em;
line-height: 1.12;
overflow-wrap: anywhere;
}
.article-card .article-card__title a {
text-decoration: none;
}
.article-card .article-card__body {
min-width: 0;
}
.cards-grid, .archive-grid, .header-main, .footer-grid {
min-width: 0;
}
.cards-grid > *, .archive-grid > *, .header-main > *, .footer-grid > * {
min-width: 0;
}
.archive-hero h1, .search-hero h1 {
overflow-wrap: anywhere;
}
.archive-grid .pagination, .archive-grid .empty-state {
grid-column: 1 / -1;
}
.page-numbers {
min-width: 44px;
min-height: 44px;
height: auto;
}
.nav-links {
align-items: center;
row-gap: .7rem;
}
.site-header .header-search > summary, .site-header .mobile-menu > summary {
width: 44px;
height: 44px;
}
.site-header .mobile-menu__panel {
max-height: calc(100vh - 105px);
max-height: calc(100dvh - 105px);
overflow-y: auto;
overscroll-behavior: contain;
}
.site-header .mobile-menu__panel a {
min-height: 44px;
}
.search-form .search-field {
font-size: 16px;
}
.search-form > label {
min-width: 0;
}
.footer-links a, .footer-legal a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.dark-section .article-card .article-card__title {
color: #fff;
}
.dark-section .text-link:focus-visible, .site-footer a:focus-visible {
outline-color: #ff9cc9;
}
.sm-reading-pilot .article-body figure {
max-width: 100%;
}
.sm-reading-pilot .article-body .wp-block-image img {
height: auto;
}
.sm-reading-pilot .article-body :is(iframe,video) {
max-width: 100%;
}
@media (min-width: 901px) {
.cards-grid, .archive-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 621px) and (max-width: 900px) {
.cards-grid, .archive-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.numbered-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
.cards-grid, .archive-grid {
grid-template-columns: minmax(0, 1fr);
gap: 1.75rem;
}
.article-card .article-card__title {
font-size: 1.65rem;
line-height: 1.16;
}
.article-card .article-card__body {
padding: 1.25rem;
}
.article-card .article-card__excerpt {
font-size: .92rem;
line-height: 1.7;
}
.article-card .text-link {
min-height: 44px;
}
.article-card__media {
min-height: 0;
aspect-ratio: 16 / 10;
}
.article-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.search-hero, .archive-hero {
padding-block: 2rem;
}
.search-hero h1, .archive-hero h1 {
font-size: clamp(2rem, 9.5vw, 3rem);
line-height: 1.12;
}
.archive-description {
font-size: 1rem;
line-height: 1.7;
}
.footer-grid {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.footer-links {
gap: .15rem;
}
.site-header .header-search__panel {
right: -3.3rem;
width: min(420px, calc(100vw - 2.25rem));
}
.comments-area input:not([type=checkbox]):not([type=radio]), .comments-area textarea,	.page-content input:not([type=checkbox]):not([type=radio]), .page-content textarea {
max-width: 100%;
font-size: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@layer base {
input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
appearance: none;
background-color: #fff;
border-color: oklch(55.1% 0.027 264.364);
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
--tw-shadow: 0 0 #0000;
&:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,  );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: oklch(54.6% 0.245 262.881);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: oklch(54.6% 0.245 262.881);
}
}
input::placeholder,textarea::placeholder {
color: oklch(55.1% 0.027 264.364);
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5em;
}
::-webkit-date-and-time-value {
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
padding-top: 0;
padding-bottom: 0;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
print-color-adjust: exact;
}
select:where([multiple]),select:where([size]:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-right: 0.75rem;
print-color-adjust: unset;
}
input:where([type='checkbox']),input:where([type='radio']) {
appearance: none;
padding: 0;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: oklch(54.6% 0.245 262.881);
background-color: #fff;
border-color: oklch(55.1% 0.027 264.364);
border-width: 1px;
--tw-shadow: 0 0 #0000;
}
input:where([type='checkbox']) {
border-radius: 0px;
}
input:where([type='radio']) {
border-radius: 100%;
}
input:where([type='checkbox']):focus,input:where([type='radio']):focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,  );
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: oklch(54.6% 0.245 262.881);
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
input:where([type='checkbox']):checked,input:where([type='radio']):checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
input:where([type='checkbox']):checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
@media (forced-colors: active) {
appearance: auto;
}
}
input:where([type='radio']):checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
@media (forced-colors: active) {
appearance: auto;
}
}
input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
border-color: transparent;
background-color: currentColor;
}
input:where([type='checkbox']):indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
@media (forced-colors: active) {
appearance: auto;
}
}
input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
input:where([type='file']) {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
input:where([type='file']):focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
}
}
}