/* TWIK — editorial-reading × editorial-authority × editorial-ink (generated) × editorial profile.
   Color comes only from .styleseed/palette.css semantic roles. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --page-inset: var(--space-6);
  --content-max: 1120px;
  --measure: 66ch;

  /* One gothic (sans) family for Latin and Hangul; hierarchy comes from size and weight. */
  --font-display: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-body: var(--font-display);
  --font-ko: var(--font-display);

  --radius: 2px;
  --rule: 1px solid var(--ss-border);
  --rule-strong: 2px solid var(--ss-foreground);

  --ease-silk: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-silk: 420ms;
  --dur-fast: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  word-break: keep-all;
  background: var(--ss-surface);
  color: var(--ss-foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "tnum" 0;
}

a { color: var(--ss-accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ss-focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  padding: var(--space-2) var(--space-4);
  background: var(--ss-foreground); color: var(--ss-surface);
  z-index: 10;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Masthead ---------- */
.masthead {
  background: var(--ss-background);
  border-bottom: var(--rule);
}
.masthead__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--page-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.wordmark {
  display: flex; align-items: baseline; gap: var(--space-3);
  color: var(--ss-foreground); text-decoration: none;
}
.wordmark { align-items: center; }
/* The logo's letter bodies sit low (tall t/k ascenders), so nudge the tagline to their optical centre. */
.wordmark__tag { position: relative; top: 0.16em; }
.wordmark__logo { display: block; height: 26px; width: auto; }
.wordmark__tag { font-size: 14px; color: var(--ss-muted-foreground); }
.masthead__nav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.masthead__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-3);
  color: var(--ss-foreground); text-decoration: none; font-size: 15px; font-weight: 500;
}
.masthead__nav a:hover { text-decoration: underline; }

/* ---------- Briefing (focal point) ---------- */
.briefing {
  background: var(--ss-background);
  border-bottom: var(--rule-strong);
}
.briefing__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-16) var(--page-inset) var(--space-12);
}
.briefing__issue {
  margin-top: 0; margin-bottom: var(--space-4);
  font-size: 14px; font-weight: 600; color: var(--ss-primary);
  font-variant-numeric: tabular-nums;
}
.briefing__title {
  margin-top: 0; margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}
.briefing__title { max-width: 18em; }
.briefing__deck {
  margin-top: 0; margin-bottom: var(--space-4);
  max-width: 60ch;
  font-size: 18px; line-height: 1.55; color: var(--ss-muted-foreground);
}
.briefing__meta {
  margin: 0;
  font-size: 14px; color: var(--ss-muted-foreground);
}

@media (prefers-reduced-motion: no-preference) {
  .briefing__title { animation: reveal-rise var(--dur-silk) var(--ease-silk) both; }
  .briefing__deck { animation: reveal-rise var(--dur-silk) var(--ease-silk) 60ms both; }
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Layout ---------- */
.layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-10) var(--page-inset) var(--space-20);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-16);
}
.rankings { max-width: 760px; }

/* ---------- Ranking page header ---------- */
.page-head { background: var(--ss-background); border-bottom: var(--rule-strong); }
.page-head__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-12) var(--page-inset) var(--space-10);
}
.page-head__crumb {
  margin: 0 0 var(--space-4);
  font-size: 14px; font-weight: 600; color: var(--ss-primary);
}
.page-head__crumb a { color: var(--ss-muted-foreground); font-weight: 500; }
.page-head__title {
  margin: 0 0 var(--space-4);
  max-width: 18em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.page-head__deck {
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  font-size: 18px; color: var(--ss-muted-foreground);
}
.page-head__meta { margin: 0; font-size: 14px; color: var(--ss-muted-foreground); }
@media (prefers-reduced-motion: no-preference) {
  .page-head__title { animation: reveal-rise var(--dur-silk) var(--ease-silk) both; }
}

.masthead__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--ss-primary);
}

/* ---------- Category section ---------- */
.cat + .cat { margin-top: var(--space-16); }
.cat__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-strong);
}
.cat__title {
  margin: 0;
  font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
}
.cat__title a { color: inherit; text-decoration: none; }
.cat__title a:hover { text-decoration: underline; }
.cat__source { margin: 0; font-size: 13px; color: var(--ss-muted-foreground); }
.cat__list--full .item:first-child { padding-top: 0; }

.item__role { font-family: var(--font-body); }
.source-link { color: inherit; text-decoration-color: var(--ss-border); }
.source-link:hover { color: var(--ss-accent); text-decoration-color: currentColor; }

/* Ranks 11+ : compact rows */
.rest__title {
  margin: var(--space-12) 0 0;
  padding-bottom: var(--space-3);
  border-bottom: var(--rule);
  font-size: 15px; font-weight: 600; color: var(--ss-muted-foreground);
}
.item--compact { padding: var(--space-3) 0; align-items: baseline; }
.item--compact .item__rank { font-size: 15px; line-height: 1.5; }
.item--compact .item__title { font-size: 16px; font-weight: 500; display: inline; }
.item--compact .item__ko { display: inline; margin: 0 0 0 var(--space-2); font-size: 13px; }
.item--compact.item--lead .item__rank { font-size: 15px; }
.item--compact.item--lead .item__title { font-size: 16px; }
.item--current .item__title a { text-decoration: underline; text-decoration-color: var(--ss-primary); text-decoration-thickness: 2px; }

/* Grouped rankings (men / women) */
.jump { display: flex; flex-wrap: wrap; column-gap: var(--space-6); margin: 0 0 var(--space-6); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.group + .group { margin-top: var(--space-16); }
.group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-strong);
}
.group__title { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.group__source { margin: 0; font-size: 13px; color: var(--ss-muted-foreground); }

/* ---------- Intro page ---------- */
.briefing__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: var(--space-8) 0 0; }
.intro {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-12) var(--page-inset) var(--space-20);
}
.intro__section { max-width: 760px; }
.intro__section + .intro__section { margin-top: var(--space-20); }
.intro__title {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-strong);
  font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em;
}
.intro__lede { margin: var(--space-4) 0 var(--space-6); color: var(--ss-muted-foreground); max-width: 60ch; }
.leaders { list-style: none; margin: 0; padding: 0; }
.leader {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  padding: var(--space-6) 0;
  border-bottom: var(--rule);
}
.leader__cat { margin: 0; font-size: 18px; font-weight: 600; }
.leader__cat a { color: var(--ss-foreground); text-decoration: none; }
.leader__cat a:hover { text-decoration: underline; }
.leader__source { margin: var(--space-1) 0 0; font-size: 13px; color: var(--ss-muted-foreground); }
.leader__tops { display: grid; gap: var(--space-2); }
.leader__top { margin: 0; font-size: 16px; }
.leader__top a { color: var(--ss-foreground); font-weight: 600; text-decoration: none; }
.leader__top a:hover { text-decoration: underline; }
.leader__top--empty { color: var(--ss-muted-foreground); }
.leader__label { display: block; font-size: 13px; color: var(--ss-muted-foreground); }
.leader__more { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.principles { margin: var(--space-6) 0 0; }
.principle { padding: var(--space-4) 0; border-bottom: var(--rule); }
.principle dt { font-weight: 600; font-size: 17px; }
.principle dd { margin: var(--space-1) 0 0; color: var(--ss-muted-foreground); max-width: 62ch; }

/* ---------- Item detail ---------- */
.page-head__ko { margin: 0 0 var(--space-6); font-family: var(--font-ko); font-size: 17px; color: var(--ss-muted-foreground); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); margin: 0 0 var(--space-4); }
.fact { min-width: 0; }
.fact__label { font-size: 13px; color: var(--ss-muted-foreground); }
.fact__value { margin: var(--space-1) 0 0; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fact__rank { font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--ss-primary); }
.fact__num { font-size: 20px; line-height: 1.4; font-weight: 600; }
.detail__section + .detail__section { margin-top: var(--space-12); }
.detail__title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-strong);
  font-size: 20px; line-height: 1.3; font-weight: 600;
}
.detail__lede { margin: 0; max-width: var(--measure); font-size: 18px; line-height: 1.65; }
.detail__pending { padding-top: 0; border-bottom: 0; }
.find__note { margin: var(--space-3) 0 0; font-size: 14px; color: var(--ss-muted-foreground); }
.prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-12); padding-top: var(--space-4); border-top: var(--rule);
}
.prevnext a { display: grid; gap: var(--space-1); padding: var(--space-2) 0; text-decoration: none; min-height: 44px; }
.prevnext__next { text-align: right; grid-column: 2; }
.prevnext__dir { font-size: 13px; color: var(--ss-muted-foreground); }
.prevnext__name { font-weight: 600; color: var(--ss-foreground); }
.prevnext a:hover .prevnext__name { text-decoration: underline; }
.detail__context { margin-top: var(--space-16); }
.next-cat {
  margin: var(--space-8) 0 0;
  font-size: 16px; font-weight: 500;
}
.next-cat a { display: inline-flex; align-items: center; min-height: 44px; }
.cat-index { list-style: none; margin: 0; padding: 0; }
.cat-index li { border-bottom: var(--rule); }
.cat-index a { display: flex; align-items: center; min-height: 56px; font-size: 18px; font-weight: 600; }
.cat__list { list-style: none; margin: 0; padding: 0; }
.cat__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; margin-top: var(--space-2);
  font-size: 15px; font-weight: 500;
}

/* ---------- Ranking row ---------- */
.item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: var(--rule);
}
.item__rank {
  font-size: 20px; line-height: 1.35; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ss-muted-foreground);
}
.item--lead .item__rank { color: var(--ss-primary); font-size: 28px; line-height: 1.1; }
.item__title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; }
.item--lead .item__title { font-size: 20px; }
.item__title a { color: var(--ss-foreground); text-decoration: none; }
.item__title a:hover { text-decoration: underline; }
.item__ko {
  margin: var(--space-1) 0 0;
  font-family: var(--font-ko); font-size: 14px; color: var(--ss-muted-foreground);
}
.item__why {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: 16px; line-height: 1.6;
}
.item__why-label { font-weight: 600; color: var(--ss-primary); }
.item__why-label::after { content: " —"; color: var(--ss-muted-foreground); font-weight: 400; }
.item:not(.item--lead) .item__why-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.item__move {
  justify-self: end;
  font-size: 14px; line-height: 1.9; font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ss-muted-foreground);
  white-space: nowrap;
}
.item__move--hot { color: var(--ss-primary); font-weight: 600; }
.item__stats { justify-self: end; display: grid; justify-items: end; align-content: start; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__value-num { font-size: 15px; line-height: 1.6; font-weight: 600; }
.item__value-unit { font-size: 12px; color: var(--ss-muted-foreground); }
.item--compact .item__value-num { font-weight: 500; font-size: 14px; color: var(--ss-muted-foreground); }

/* ---------- Rail ---------- */
.rail { font-size: 15px; line-height: 1.6; }
.rail__block { padding-top: var(--space-3); border-top: var(--rule-strong); }
.rail__block + .rail__block { margin-top: var(--space-10); }
.rail__title { margin: 0 0 var(--space-3); font-size: 15px; font-weight: 600; }
.rail p { margin: 0 0 var(--space-3); color: var(--ss-muted-foreground); }
.rail__small { font-size: 14px; }
.ad-slot {
  margin-top: var(--space-10);
  min-height: 250px;
  border: 1px dashed var(--ss-border);
  display: flex; align-items: flex-start; padding: var(--space-2) var(--space-3);
}
.ad-slot__label { font-size: 12px; color: var(--ss-muted-foreground); }

/* ---------- States ---------- */
.state { padding: var(--space-10) 0; border-top: var(--rule-strong); max-width: var(--measure); }
.state--inline { padding: var(--space-6) 0; border-top: 0; border-bottom: var(--rule); margin: 0; color: var(--ss-muted-foreground); }
.state__title { margin: 0 0 var(--space-2); font-size: 20px; font-weight: 600; }
.state p { margin: 0 0 var(--space-6); }
.btn {
  min-height: 44px; padding: 0 var(--space-6);
  font: inherit; font-weight: 600;
  color: var(--ss-primary-foreground); background: var(--ss-primary);
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: var(--ss-primary-800); }
.btn--link { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.btn--link:hover { color: var(--ss-primary-foreground); }

.cat--skeleton .sk--title { width: 120px; height: 24px; margin-bottom: var(--space-4); }
.sk-row { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: var(--rule); }
.sk-lines { display: grid; gap: var(--space-2); }
.sk { background: var(--ss-chrome); border-radius: var(--radius); }
.sk--rank { width: 20px; height: 20px; }
.sk--line { height: 16px; }
.sk--short { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .sk { animation: sk-pulse 1.4s ease-in-out infinite; }
}
@keyframes sk-pulse { 50% { opacity: 0.55; } }

/* ---------- Footer ---------- */
.footer { background: var(--ss-background); border-top: var(--rule); }
.footer__inner {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-10) var(--page-inset);
  font-size: 14px; color: var(--ss-muted-foreground);
}
.footer__inner p { margin: 0 0 var(--space-2); }
.footer__small { font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .rankings { max-width: none; }
  .ad-slot { min-height: 120px; }
}
@media (max-width: 600px) {
  :root { --page-inset: var(--space-4); }
  .masthead__inner { gap: var(--space-2); }
  .masthead__nav {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: calc(100% + 2 * var(--page-inset));
    margin: 0 calc(-1 * var(--page-inset));
    padding: 0 calc(var(--page-inset) - var(--space-3));
  }
  .masthead__nav a { flex: 0 0 auto; }
  .wordmark__tag { display: none; }
  .wordmark__logo { height: 22px; }
  .briefing__inner { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .briefing__deck { font-size: 17px; }
  .page-head__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .leader { grid-template-columns: minmax(0, 1fr) auto; }
  .leader__tops { grid-column: 1 / -1; grid-row: 2; }
  .leader__more { grid-column: 2; grid-row: 1; }
  .item--compact .item__ko { display: block; margin: 0; }
  .page-head__deck { font-size: 17px; }
  .item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--space-3); }
  .item--lead .item__rank { font-size: 24px; }
}

/* ---------- Icons (Google Material Symbols, inline SVG) ---------- */
.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; vertical-align: -0.25em; }
.icon--ext { width: 0.95em; height: 0.95em; margin-left: 0.2em; vertical-align: -0.1em; opacity: 0.7; }
.icon--cat { width: 1.15em; height: 1.15em; margin-right: var(--space-2); color: var(--ss-muted-foreground); vertical-align: -0.2em; }
.page-head__crumb .icon--cat { color: inherit; width: 1.1em; height: 1.1em; margin-right: var(--space-1); }
.btn--link .icon, .cat__more .icon, .leader__more .icon, .next-cat .icon { width: 1.15em; height: 1.15em; }
.prevnext__dir .icon { width: 1.1em; height: 1.1em; vertical-align: -0.22em; }
/* ---------- Photos ---------- */
/* Every entry in a photo category gets a slot. People are round in rankings; posters keep 2:3. */
.item--photo { grid-template-columns: 40px 64px minmax(0, 1fr) auto; align-items: start; }
.item--compact.item--photo { grid-template-columns: 40px 40px minmax(0, 1fr) auto; align-items: center; }
.item__photo {
  display: grid; place-items: center; overflow: hidden;
  width: 64px; height: 64px;
  background: var(--ss-chrome); color: var(--ss-muted-foreground);
}
.item__photo img, .page-head__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.item__photo--person { border-radius: 50%; }
.item__photo--poster { width: 48px; height: 72px; border-radius: var(--radius); }
.item__photo.is-empty .icon { width: 55%; height: 55%; opacity: 0.6; }
.item--compact .item__photo { width: 40px; height: 40px; }
.item--compact .item__photo--poster { width: 32px; height: 48px; }
.item--photo:has(.item__photo--poster) { grid-template-columns: 40px 48px minmax(0, 1fr) auto; }
.item--compact.item--photo:has(.item__photo--poster) { grid-template-columns: 40px 32px minmax(0, 1fr) auto; }
.item--compact .item__stats { align-content: center; }
.item__stats .item__move { font-size: 13px; line-height: 1.5; }

.page-head--photo .page-head__inner { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.page-head__figure { display: none; margin: 0; }
.page-head--photo .page-head__figure { display: block; }
.page-head__photo {
  display: grid; place-items: center; overflow: hidden;
  width: 160px; height: 160px;
  border-radius: var(--radius);
  background: var(--ss-chrome); color: var(--ss-muted-foreground);
}
.page-head__photo--poster { height: 240px; }
.page-head__photo.is-empty .icon { width: 45%; height: 45%; opacity: 0.55; }
.page-head__credit { margin-top: var(--space-2); font-size: 12px; color: var(--ss-muted-foreground); }

@media (max-width: 600px) {
  .item--photo { grid-template-columns: 28px 48px minmax(0, 1fr) auto; }
  .item--compact.item--photo { grid-template-columns: 28px 36px minmax(0, 1fr) auto; }
  .item__photo { width: 48px; height: 48px; }
  .item--compact .item__photo { width: 36px; height: 36px; }
  .item--photo:has(.item__photo--poster) { grid-template-columns: 28px 40px minmax(0, 1fr) auto; }
  .item__photo--poster { width: 40px; height: 60px; }
  .page-head--photo .page-head__inner { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); }
  .page-head__photo { width: 96px; height: 96px; }
  .page-head__photo--poster { height: 144px; }
}

/* ---------- Language toggle ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--ss-muted-foreground);
}
.lang-toggle__icon { width: 18px; height: 18px; margin-right: var(--space-1); }
.lang-toggle button {
  min-height: 36px; min-width: 44px; padding: 0 var(--space-3);
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--ss-foreground); background: transparent;
  border: var(--rule); border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.lang-toggle button + button { margin-left: -1px; }
.lang-toggle button[aria-pressed="true"] { background: var(--ss-foreground); color: var(--ss-surface); border-color: var(--ss-foreground); }
.lang-toggle button:hover:not([aria-pressed="true"]) { border-color: var(--ss-foreground); }
.masthead__nav { order: 2; margin-left: auto; }
.lang-toggle { order: 3; margin-left: var(--space-4); }
@media (max-width: 960px) {
  .masthead__inner { row-gap: var(--space-2); }
  .lang-toggle { order: 2; margin-left: auto; }
  .masthead__nav { order: 3; flex-basis: 100%; margin-left: calc(-1 * var(--space-3)); }
}
@media (max-width: 600px) {
  .lang-toggle button { min-height: 40px; }
}

/* ---------- Instagram ---------- */
.icon--stroke { fill: none; stroke: currentColor; stroke-width: 2; }
.icon--stroke .icon__dot { fill: currentColor; stroke: none; }
.ig-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--ss-muted-foreground); text-decoration: none; font-size: 13px; font-weight: 500;
}
.ig-link:hover { color: var(--ss-foreground); }
.ig-link .icon { width: 16px; height: 16px; }
.item__ig { margin-top: var(--space-2); min-height: 32px; }
.ig-link.btn-outline {
  min-height: 40px; padding: 0 var(--space-4); margin: 0 0 var(--space-4);
  font-size: 14px; color: var(--ss-foreground);
  border: var(--rule); border-radius: var(--radius);
}
.ig-link.btn-outline:hover { border-color: var(--ss-foreground); }
.ig-link.btn-outline .icon { width: 18px; height: 18px; }
.detail__small { margin: var(--space-2) 0 0; font-size: 13px; color: var(--ss-muted-foreground); }

/* ---------- Notes editor (admin) ---------- */
.admin { max-width: var(--content-max); margin: 0 auto; padding: var(--space-10) var(--page-inset) var(--space-20); }
.admin__title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.admin__lede { color: var(--ss-muted-foreground); max-width: 60ch; }
.admin__form { display: grid; gap: var(--space-2); max-width: 360px; margin-top: var(--space-6); }
.admin__form input { min-height: 44px; padding: 0 var(--space-3); font: inherit; border: var(--rule); border-radius: var(--radius); background: var(--ss-surface); color: var(--ss-foreground); }
.admin__msg { min-height: 1.5em; margin: 0; color: var(--ss-danger); font-size: 14px; }
.admin__bar { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: var(--rule-strong); }
.admin__status { margin: 0; font-size: 14px; color: var(--ss-muted-foreground); flex: 1; }
.btn-text { min-height: 44px; padding: 0 var(--space-2); font: inherit; font-size: 14px; color: var(--ss-accent); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.btn-outline { min-height: 44px; padding: 0 var(--space-4); font: inherit; font-weight: 500; color: var(--ss-foreground); background: transparent; border: var(--rule); border-radius: var(--radius); cursor: pointer; }
.btn-outline:hover { border-color: var(--ss-foreground); }
.admin__filters { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; padding: var(--space-4) 0; font-size: 14px; }
.admin__filters select { min-height: 40px; margin-left: var(--space-2); padding: 0 var(--space-2); font: inherit; border: var(--rule); border-radius: var(--radius); background: var(--ss-surface); }
.admin__list { list-style: none; margin: 0; padding: 0; }
.admin__empty { padding: var(--space-6) 0; color: var(--ss-muted-foreground); }
.arow { padding: var(--space-6) 0; border-bottom: var(--rule); }
.arow.is-busy { opacity: 0.6; }
.arow__head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; }
.arow__rank { font-weight: 600; color: var(--ss-muted-foreground); font-variant-numeric: tabular-nums; }
.arow__name { margin: 0; font-size: 17px; font-weight: 600; }
.arow__sub { margin: var(--space-1) 0 0; font-size: 13px; color: var(--ss-muted-foreground); }
.arow__badge { font-size: 12px; font-weight: 600; padding: 2px var(--space-2); border: var(--rule); border-radius: var(--radius); color: var(--ss-muted-foreground); white-space: nowrap; }
.arow__badge.is-empty { border-style: dashed; }
.arow__badge.is-ai { color: var(--ss-warning); border-color: currentColor; }
.arow__badge.is-ok { color: var(--ss-success); border-color: currentColor; }
.arow__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0 0 60px; }
.arow__label { display: grid; gap: var(--space-1); font-size: 13px; font-weight: 600; color: var(--ss-muted-foreground); }
.arow__label textarea { width: 100%; padding: var(--space-2) var(--space-3); font: inherit; font-size: 15px; font-weight: 400; line-height: 1.55; color: var(--ss-foreground); background: var(--ss-surface); border: var(--rule); border-radius: var(--radius); resize: vertical; }
.arow__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0 60px; }
.arow__msg { margin: 0; font-size: 13px; color: var(--ss-muted-foreground); }
@media (max-width: 760px) {
  .arow__fields { grid-template-columns: 1fr; margin-left: 0; }
  .arow__actions { margin-left: 0; }
}
