/* ==========================================================================
   pages/editorial.css: the journal (index, topics, article) and the
   information pages (about, legal, guidelines, list your company, contact /
   advertise, unsubscribe). Swiss Editorial: hairline rows, label in cols 1–2,
   content in 3–8, images in 9–12, big statements with grey continuation.
   ========================================================================== */

/* ---------- Journal: topics line ---------------------------------------- */
.journal-topics { align-items: baseline; }
.journal-topics__list a { display: inline-block; padding-block: 2px; }
.journal-topics__list a[aria-current="page"] { color: var(--ink); }

/* ---------- Journal rows (articles/_card) -------------------------------- */
.journal-list { padding-block-end: var(--row-end); }
/* Whole row clickable, gentle photo push on hover (scoped to the journal pages) */
:is(.journal-list, .article-related) .story { position: relative; }
:is(.journal-list, .article-related) .story__title a::after { content: ""; position: absolute; inset: 0; }
:is(.journal-list, .article-related) .story__media { position: relative; z-index: 1; overflow: hidden; border-radius: var(--radius); align-self: start; }
:is(.journal-list, .article-related) .story__media img { transition: transform 900ms var(--ease); }
:is(.journal-list, .article-related) .story:hover .story__media img { transform: scale(1.025); }

/* The opening story: photo across cols 3–12, headline at statement size */
.story--feature { row-gap: var(--s-6); padding-block: var(--s-7) var(--s-8); }
.story--feature .story__media { grid-column: 3 / -1; grid-row: 1; }
.story--feature .story__media img { aspect-ratio: 16 / 7; }
.story--feature .story__meta { grid-row: 2; padding-top: 0.55em; }
.story--feature .story__text { grid-column: 3 / span 8; grid-row: 2; }
.story--feature .story__title { font-size: var(--t-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); }
.story--feature .story__body { font-size: var(--t-lead); line-height: 1.5; letter-spacing: 0; max-width: var(--measure-lead); }
@media (max-width: 63.99rem) {
  .story--feature .story__media, .story--feature .story__meta, .story--feature .story__text { grid-column: 1 / -1; grid-row: auto; }
  .story--feature .story__media img { aspect-ratio: 4 / 3; }
  .story--feature .story__meta { padding-top: 0; }
  .story--feature .story__body { font-size: var(--t-body); }
}

.journal-ad { padding-block: var(--s-7); border-top: 1px solid var(--rule); }
.journal-ad .ad__frame { border-bottom: 0; }

/* ---------- Article page ------------------------------------------------- */
/* Head: kicker on the title's baseline · title t-hero ≤ 22ch · dek as a lead. */
.article-head { row-gap: var(--s-4); padding-block: clamp(40px, 5.6vw, 88px) clamp(32px, 4vw, 56px); }
.article-head__kicker { grid-column: 1 / span 2; align-self: first baseline; font-size: var(--t-s); line-height: var(--lh-s); }
.article-head__kicker .muted { display: block; }
.article-head__title { grid-column: 3 / span 9; align-self: first baseline; max-width: 22ch; font-size: var(--t-hero); line-height: var(--lh-hero); font-weight: 500; letter-spacing: var(--track-hero); text-wrap: balance; }
.article-head__dek { grid-column: 3 / span 7; max-width: var(--measure-lead); font-size: var(--t-lead); line-height: 1.5; font-weight: 400; letter-spacing: 0; color: var(--ink-2); text-wrap: pretty; }
.article-head__date { font-size: var(--t-s); color: var(--grey-text); }

.article-figure { margin-block-end: var(--s-7); }
.article-figure figcaption a:hover { color: var(--ink); }

.article-body { row-gap: var(--s-7); align-items: start; padding-block-end: var(--row-y); }
.article-body--plain { padding-block-start: var(--s-7); border-top: 1px solid var(--rule); }

/* Byline: a sticky hairline stack in cols 1–2 */
.article-byline { grid-column: 1 / span 2; position: sticky; top: calc(var(--header-h) + var(--s-6)); font-size: var(--t-s); line-height: var(--lh-s); }
.article-byline > div { padding-block: 10px 12px; border-top: 1px solid var(--rule); }
.article-byline > div:last-child { border-bottom: 1px solid var(--rule); }
.article-byline dt { color: var(--grey-text); }

/* Reading column: ≈ 66ch at 18px / 1.68, clear h2/h3 rhythm */
.article-prose { grid-column: 3 / span 6; max-width: var(--measure); font-size: var(--t-read); line-height: var(--lh-read); letter-spacing: 0; color: var(--ink); }
.article-prose > * + * { margin-block-start: 1.1em; }
.article-prose > p:first-child { font-size: var(--t-lead); line-height: 1.55; letter-spacing: 0; }
.article-prose h2 { margin-block-start: 2em; font-size: var(--t-l); line-height: var(--lh-head); letter-spacing: var(--track-head); text-wrap: balance; }
.article-prose h2 + * { margin-block-start: 0.6em; }
.article-prose a { text-underline-offset: 4px; }
.article-prose figcaption { font-size: var(--t-s); line-height: var(--lh-s); color: var(--grey-text); }
.article-ad { margin-block: 2.5em; font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: var(--track-body); }
.article-sources { margin-block-start: var(--s-8); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-s); line-height: var(--lh-s); letter-spacing: var(--track-body); color: var(--grey-text); }
.article-sources h2 { margin: 0 0 var(--s-2); font-size: var(--t-s); line-height: var(--lh-s); font-weight: 500; letter-spacing: var(--track-body); color: var(--ink); }
.article-sources p + p { margin-block-start: 0.6em; }

/* Aside: sticky list in cols 10–12 */
.article-aside { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.article-aside__title { margin-block-end: var(--s-3); font-size: var(--t-s); font-weight: 500; letter-spacing: var(--track-body); line-height: var(--lh-s); color: var(--ink); }
.article-aside__list { border-top: 1px solid var(--rule); }
.article-aside__list a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 48px; padding-block: 11px; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; transition: color 200ms var(--ease); }
.article-aside__list a:hover { color: var(--accent-ink); }
.article-aside__list .arrow { color: var(--grey); }

@media (max-width: 63.99rem) {
  .article-head__kicker { grid-column: 1 / -1; align-self: auto; }
  .article-head__kicker .muted { display: inline; }
  .article-head__kicker .muted::before { content: " · "; }
  .article-head__title, .article-head__dek { grid-column: 1 / -1; }
  .article-figure { margin-block-end: var(--s-6); }
  .article-byline { grid-column: 1 / -1; position: static; display: flex; flex-wrap: wrap; gap: 0 var(--s-6); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .article-byline > div, .article-byline > div:last-child { border: 0; }
  .article-prose, .article-aside { grid-column: 1 / -1; }
  .article-aside { position: static; }
}

.article-related__head { margin-block-end: var(--head-gap); }

/* ---------- Legal and guidelines: one hairline section per heading ------- */
.legal { padding-block-end: var(--row-end); }
.legal__section { padding-block: var(--s-6) var(--s-7); border-top: 1px solid var(--rule); }
.legal__section:last-child { border-bottom: 1px solid var(--rule); }
.legal__title { grid-column: 3 / span 3; font-size: var(--t-m); line-height: 1.3; letter-spacing: var(--track-head); }
.legal__text { grid-column: 6 / span 6; max-width: 38em; }
.legal__text strong { font-weight: 500; }
@media (max-width: 63.99rem) {
  .legal__title, .legal__text { grid-column: 1 / -1; }
  .legal__text { margin-block-start: var(--s-4); }
}

/* ---------- About -------------------------------------------------------- */
.about-lead { padding-block-start: var(--s-10); }
.about-lead__statement { grid-column: 3 / span 9; font-size: var(--t-hero); line-height: var(--lh-hero); font-weight: 500; letter-spacing: var(--track-hero); text-wrap: pretty; }
.about-credits { max-width: 36em; color: var(--grey-text); }
@media (max-width: 63.99rem) {
  .about-lead { padding-block-start: var(--s-8); }
  .about-lead__statement { grid-column: 1 / -1; }
}

/* ---------- List your company -------------------------------------------- */
.lyc-hero { row-gap: var(--s-6); padding-block: clamp(96px, 13vw, 208px) clamp(64px, 8vw, 120px); }
.lyc-hero__kicker { grid-column: 1 / span 2; padding-top: 0.55em; }
.lyc-hero__kicker .muted { display: block; }
.lyc-hero__main { grid-column: 3 / span 9; }
/* The title and lede read as one statement: ink, then grey continuation */
.lyc-hero__title, .lyc-hero__lede { display: inline; font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); }
.lyc-hero__lede { color: var(--grey); }
.lyc-hero__actions { margin-block-start: var(--s-8); }
.lyc-figure { margin-block-end: var(--s-4); }

.lyc-benefits { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8) var(--col-gap); margin-block-start: var(--s-9); }
.lyc-benefits li { padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
.lyc-benefits h3 { font-size: var(--t-m); line-height: 1.3; }
.lyc-benefits p { max-width: 26em; margin-block-start: var(--s-3); color: var(--grey-text); }

.lyc-steps { border-top: 1px solid var(--rule); }
.lyc-steps li { display: grid; gap: var(--s-3); padding-block: var(--s-5) var(--s-6); border-bottom: 1px solid var(--rule); }
.lyc-steps__n { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.lyc-steps p { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); text-wrap: pretty; }
.lyc-steps__cta { margin-block-start: var(--s-7); }
.lyc-side .figure img { aspect-ratio: 4 / 5; }

@media (max-width: 63.99rem) {
  .lyc-hero__kicker { grid-column: 1 / -1; padding: 0; color: var(--grey-text); }
  .lyc-hero__main, .lyc-benefits { grid-column: 1 / -1; }
  .lyc-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: var(--s-7); gap: var(--s-6) var(--col-gap); }
  .lyc-side .figure img { aspect-ratio: 4 / 3; }
}
@media (max-width: 47.99rem) {
  .lyc-benefits { grid-template-columns: 1fr; }
  .lyc-hero__actions { margin-block-start: var(--s-7); }
  .lyc-hero__actions .btn { width: 100%; }
}

/* ---------- Contact / advertise ------------------------------------------ */
.placement-list { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--col-gap); }
.placement-list li { padding-block-start: var(--s-4); border-top: 1px solid var(--rule); }
.placement-list h3 { font-size: var(--t-l); line-height: var(--lh-head); }
.placement-list p { max-width: 28em; margin-block-start: var(--s-3); color: var(--grey-text); }
.contact-principles li { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); text-wrap: pretty; }
.contact-principles li + li { margin-block-start: var(--s-5); }
.contact-form-row .flash { margin-block-start: var(--s-6); }
.contact-form { display: grid; gap: var(--s-6); margin-block-start: var(--s-7); }
.row__main > .contact-form:first-child { margin-block-start: 0; }
.contact-form .form-grid { row-gap: var(--s-6); }
.contact-form__interests .check-columns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.contact-form__submit { margin-block-start: var(--s-3); }
.contact-notes { border-top: 1px solid var(--rule); }
.contact-notes p { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); color: var(--grey-text); }
.contact-notes strong { display: block; margin-block-end: 4px; color: var(--ink); }
@media (max-width: 63.99rem) {
  .placement-list { grid-column: 1 / -1; }
  .contact-notes { margin-block-start: var(--s-8); }
}
@media (max-width: 47.99rem) {
  .placement-list { grid-template-columns: 1fr; gap: var(--s-6); }
  .contact-form__submit .btn { width: 100%; }
}

/* ---------- Notices (unsubscribe) ---------------------------------------- */
.notice-page { padding-block-end: var(--row-end); }
.notice-page__body { display: grid; justify-items: start; gap: var(--s-6); }
.notice-page__lede { font-size: var(--t-l); line-height: 1.25; font-weight: 500; letter-spacing: var(--track-head); text-wrap: pretty; }
.contact-form__interests legend { font-size: var(--t-s); font-weight: 400; color: var(--grey-text); }
.figure figcaption span:last-child { flex: none; white-space: nowrap; }
@media (max-width: 47.99rem) { .about-lead__statement { font-size: var(--t-xl); line-height: 1.15; } }