:root {
  color-scheme: dark;
  --bg: #101215;
  --panel: #191d23;
  --hover: #202731;
  --ink: #f1f3f6;
  --muted: #a7b0bd;
  --line: #303944;
  --accent: #9ebce0;
  --active: #25364a;
  --shade: #0b0e12;
  --pink: #ff01b1;
  --shadow: 0 20px 80px #0005;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #fff;
  --hover: #edf2f9;
  --ink: #17212e;
  --muted: #5b6879;
  --line: #d8e0e9;
  --accent: #345c89;
  --active: #dbe7f5;
  --shade: #eaf0f7;
  --shadow: 0 20px 80px #17212e20;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    15px/1.5 Arial,
    Helvetica,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
}
button,
input,
select {
  font: inherit;
  color: inherit;
}
a,
button,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
h1,
h2,
h3,
p {
  margin: 0;
}
button svg {
  pointer-events: none;
}
svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shell {
  display: grid;
  min-height: 100vh;
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  padding: 31px 18px 22px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 20;
}
.brand {
  display: flex;
  gap: 11px;
  font-weight: 700;
  padding: 0 13px;
}
.brand small {
  display: block;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: 0 0;
  color: var(--muted);
  font-size: 14px;
}
.nav button.active {
  background: var(--active);
  color: var(--accent);
}
.nav button:hover,
.sidefoot button:hover {
  background: var(--hover);
  color: var(--ink);
}
.nav .gap {
  height: 15px;
}
.sidefoot {
  margin-top: auto;
  display: grid;
  gap: 5px;
}
.sidefoot button,
.top {
  display: flex;
  align-items: center;
}
.sidefoot button {
  background: 0 0;
  gap: 12px;
  padding: 10px 13px;
  text-align: left;
  font-size: 13px;
  border-radius: 8px;
}
main {
  max-width: 1580px;
  width: 100%;
  min-width: 0;
}
.top {
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}
.crumb,
.sidefoot button {
  color: var(--muted);
}
.mobile-menu,
.theme {
  background: 0 0;
  padding: 8px;
}
.theme {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}
.mobile-menu {
  display: none;
  color: var(--ink);
}
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
h1 {
  line-height: 1.15;
  font-weight: 500;
}
.pagecount,
.subline {
  color: var(--muted);
}
.pagecount {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.searchbox,
.toolbar {
  display: flex;
  align-items: stretch;
}
.searchbox {
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0 16px;
  flex: 1;
  min-width: 0;
}
.drawer dt,
.searchbox svg {
  color: var(--muted);
}
.searchbox input {
  border: 0;
  background: 0 0;
  outline: 0 !important;
  min-width: 0;
  width: 100%;
  font-size: 14px;
  height: 46px;
}
.searchbox input::placeholder {
  color: var(--muted);
}
.clear {
  color: var(--muted);
  background: 0 0;
  padding: 6px;
  font-size: 18px;
}
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 27px;
}
.filterbar select {
  height: 43px;
  font-size: 13px;
}
.pill,
.reset {
  background: 0 0;
  color: var(--muted);
}
.pill {
  border: 1px solid var(--line);
  white-space: nowrap;
}
.pill.active,
.pill:hover {
  border-color: var(--accent);
  background: var(--active);
  color: var(--accent);
}
.reset {
  font-size: 12px;
  text-decoration: underline;
  padding: 12px;
}
.section:first-child {
  margin-top: 0;
}
.sectionhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}
h2 {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.45px;
}
.sectionhead .small,
.sectionlink {
  font-size: 12px;
  color: var(--muted);
}
.sectionlink {
  background: 0 0;
  padding: 6px 0;
}
.sectionlink:hover {
  color: var(--accent);
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.card:hover {
  background: var(--hover);
}
.cardtop {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.card h3 {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.card h3 a {
  display: inline;
}
.external,
.star {
  color: var(--muted);
}
.external {
  display: inline-block;
  font-size: 15px;
  margin-left: 5px;
}
.star {
  background: 0 0;
  padding: 3px;
  margin: -2px -5px 0 0;
  flex: 0 0 28px;
}
.star svg {
  width: 19px;
  height: 19px;
}
.detail:hover,
.home-foot button:hover {
  color: var(--accent);
}
.desc {
  margin-bottom: 17px;
}
.country,
.desc,
.tags {
  color: var(--muted);
}
.country {
  font-size: 12px;
  margin-bottom: 14px;
  min-height: 18px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 11px;
}
.drawer h2,
.tag {
  overflow-wrap: anywhere;
}
.tag {
  white-space: normal;
}
.cardfooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.detail,
.kind {
  font-size: 10px;
  color: var(--muted);
}
.detail {
  background: 0 0;
  font-size: 11px;
  padding: 3px 0;
}
.studio-card .cardtop {
  margin-bottom: 7px;
}
.drawer details,
.drawer dl,
.home-foot button,
.quiet {
  font-size: 12px;
  color: var(--muted);
}
.folder {
  padding: 27px;
  min-height: 220px;
  cursor: pointer;
}
.folder .folder-icon {
  color: var(--accent);
  margin-bottom: 28px;
}
.folder .folder-icon svg {
  width: 32px;
  height: 32px;
}
.folder h3 {
  font-size: 24px;
}
.folder small {
  margin-top: 10px;
  color: var(--muted);
}
.folder .folder-arrow {
  position: absolute;
  right: 24px;
  bottom: 25px;
  color: var(--accent);
  font-size: 22px;
}
.folders {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-foot {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 35px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.home-foot button {
  background: 0 0;
  padding: 0;
}
.empty {
  padding: 50px 15px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.empty p {
  margin-top: 9px;
  font-size: 13px;
}
.breadcrumb,
.pagination {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.pagination {
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.pagination button {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 15px;
}
.breadcrumb {
  gap: 9px;
  margin-bottom: 18px;
}
.breadcrumb button {
  color: var(--muted);
  background: 0 0;
  padding: 0;
}
.backdrop {
  position: fixed;
  inset: 0;
  background: #0007;
  z-index: 49;
  backdrop-filter: blur(3px);
}
.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(660px, 100%);
  border-left: 1px solid var(--line);
  background: var(--bg);
  z-index: 50;
  overflow-y: auto;
  padding: 34px 40px;
  box-shadow: var(--shadow);
}
[hidden] {
  display: none !important;
}
.drawerbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 43px;
}
.close,
.service-actions button {
  background: var(--panel);
  border: 1px solid var(--line);
}
.close,
.drawer p {
  color: var(--muted);
}
.close {
  padding: 10px;
  display: flex;
}
.drawer h2 {
  font-size: 35px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 15px;
}
.drawer .tags {
  margin: 25px 0;
  font-size: 12px;
}
.drawer p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 17px;
}
.primarylink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 19px;
  margin: 18px 0 27px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
}
.primarylink:hover {
  opacity: 0.8;
  color: var(--bg);
}
.drawer details,
.drawer dl {
  border-top: 1px solid var(--line);
}
.drawer dl {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding-top: 21px;
}
.drawer dd {
  margin: 0;
}
.drawer details {
  margin-top: 28px;
  padding-top: 18px;
}
.drawer summary {
  cursor: pointer;
}
.drawer details p {
  font-size: 12px;
  margin-top: 15px;
  line-height: 1.7;
}
.service-actions {
  display: grid;
  gap: 11px;
  margin: 28px 0;
}
.service-actions button {
  color: var(--ink);
  padding: 15px;
  text-align: left;
  font-size: 13px;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 13px;
  z-index: 70;
  max-width: 90vw;
}
.countline {
  font-size: 11px;
  color: var(--muted);
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.drawer dd {
  overflow-wrap: anywhere;
}
@media (min-width: 1700px) {
  main {
    padding-left: 60px;
    padding-right: 60px;
  }
  .grid {
    gap: 18px;
  }
  .card {
    padding: 25px;
  }
}
@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 210px minmax(0, 1fr);
  }
  main {
    padding: 25px 28px 60px;
  }
  .side {
    padding-left: 12px;
    padding-right: 12px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card {
    padding: 21px;
  }
  .nav button {
    font-size: 13px;
    gap: 9px;
  }
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  .side {
    display: none;
    position: fixed;
    width: 245px;
    box-shadow: var(--shadow);
    height: 100dvh;
  }
  .mobile-menu,
  .side.open {
    display: flex;
  }
  .top {
    padding-bottom: 16px;
  }
  .top .crumb {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .top-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .theme span {
    display: none;
  }
  main {
    padding: 18px 20px 50px;
  }
  .pagehead {
    padding: 27px 0 23px;
    align-items: start;
  }
  .drawer h2,
  h1 {
    font-size: 30px;
  }
  .pagecount {
    font-size: 11px;
    padding-top: 8px;
  }
  .subline {
    font-size: 12px;
    max-width: 340px;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  .searchbox {
    flex-basis: 100%;
  }
  .filterbar {
    gap: 10px;
  }
  .grid {
    gap: 12px;
  }
  .card {
    padding: 19px;
    min-height: 180px;
  }
  .card h3 {
    font-size: 18px;
  }
  .section {
    margin-top: 29px;
  }
  .sectionhead {
    align-items: baseline;
  }
  .folder h3,
  h2 {
    font-size: 20px;
  }
  .drawer {
    padding: 23px 25px;
  }
  .drawerbar {
    margin-bottom: 33px;
  }
  .drawer dl {
    grid-template-columns: 110px minmax(0, 1fr);
  }
  .folders .folder {
    min-height: 210px;
  }
}
@media (max-width: 520px) {
  .folders,
  .grid {
    grid-template-columns: 1fr;
  }
  .pagehead {
    display: block;
  }
  .pagecount {
    margin-top: 9px;
    padding: 0;
  }
  .card {
    min-height: 170px;
  }
  .studio-card {
    min-height: 180px;
  }
  .cardfooter {
    padding-top: 12px;
  }
  .sectionhead .small {
    font-size: 10px;
  }
  .folders .folder {
    min-height: 195px;
  }
  .folder .folder-icon {
    margin-bottom: 18px;
  }
  .crumb {
    max-width: 210px;
  }
  .drawer h2 {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.shell {
  grid-template-columns: 218px minmax(0, 1fr);
}
.side {
  gap: 38px;
  padding-top: 29px;
}
/* Wordmark: the mark is a lens with a line of sight through it; "arrigins" in the interface grotesk,
   "sightline" in the italic serif that also voices the daily note. */
.brand {
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.brand-mark {
  flex: none;
  width: 30px;
  height: 30px;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.brand-mark circle {
  stroke: var(--accent);
}
.brand-mark path {
  stroke: var(--pink);
}
.brand-name {
  display: grid;
  gap: 1px;
}
.brand-name b {
  font-size: 19px;
  letter-spacing: -0.6px;
}
.brand-name i {
  color: var(--accent);
  font:
    italic 500 25px/0.9 "Cormorant Garamond",
    Georgia,
    serif;
  letter-spacing: -0.2px;
}
.brand:hover .brand-name b {
  color: var(--ink);
}
.nav button {
  border-radius: 100px;
  padding: 10px 13px;
}
.theme {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  justify-content: center;
}
.crumb {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.pagehead {
  padding: 35px 0 27px;
}
/* Home has no visible title, so the search keeps the gap the title used to give. */
h1.sr + .toolbar {
  margin-top: 32px;
}
/* Daily note: an envelope on a soft pink-to-blue glow, the line set in an italic serif as the portal's voice.
   Sizes hang off --ew (envelope width), so the phone layout only changes that and the type size. */
.note {
  --ew: 184px;
  --pad: 40px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--ew) minmax(0, 1fr);
  align-items: center;
  gap: 44px;
  margin: 32px 0 18px;
  padding: 30px var(--pad) 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
/* The glow covers the whole panel and is centred on the envelope body, so it has no edges of its own;
   eased stops keep it from showing a rim. */
.note::before {
  --glow-at: calc(var(--pad) + var(--ew) / 2) calc(50% + var(--ew) * 0.2);
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    circle 260px at var(--glow-at),
    color-mix(in srgb, var(--pink) 60%, transparent),
    color-mix(in srgb, var(--pink) 30%, transparent) 25%,
    color-mix(in srgb, var(--pink) 12%, transparent) 50%,
    color-mix(in srgb, var(--pink) 4%, transparent) 75%,
    transparent
  );
  opacity: 0.55;
  transform-origin: var(--glow-at);
  transform: scale(0.9);
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.note.is-open::before {
  opacity: 0.85;
  transform: scale(1.1);
}
.envelope {
  position: relative;
  width: var(--ew);
  height: calc(var(--ew) * 0.66);
  margin-top: calc(var(--ew) * 0.4);
  padding: 0;
  border-radius: 6px;
  background: none;
  perspective: 700px;
  box-shadow:
    0 0 24px color-mix(in srgb, #fff 30%, transparent),
    0 0 70px color-mix(in srgb, var(--pink) 45%, transparent);
  transition: transform 0.3s;
}
.note:not(.is-open) .envelope:hover {
  transform: translateY(-3px) rotate(-1.5deg);
}
.envelope > span {
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.env-back {
  z-index: 0;
  background: linear-gradient(160deg, #ffe1f3, #cfdff6);
}
.env-letter {
  z-index: 1;
  inset: 6% 8% auto !important;
  height: 86%;
  display: grid;
  place-items: start center;
  padding-top: 9%;
  border-radius: 4px !important;
  background: #fff;
  color: var(--pink);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
}
.env-letter svg {
  width: 22%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.env-front {
  z-index: 2;
  /* Light from inside the envelope, plus the two lower folds. */
  background:
    linear-gradient(to top right, transparent calc(50% - 0.6px), #ffffffa0 50%, transparent calc(50% + 0.6px)),
    linear-gradient(to top left, transparent calc(50% - 0.6px), #ffffffa0 50%, transparent calc(50% + 0.6px)),
    radial-gradient(60% 70% at 50% 45%, #fff5fb, transparent),
    linear-gradient(180deg, #f4c6e5, #b9cff0);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  z-index: 3;
  background: linear-gradient(180deg, #fbe4f3, #d9e5f6);
  clip-path: polygon(0 0, 100% 0, 50% 60%);
  transform-origin: top;
  transition:
    transform 0.45s ease,
    z-index 0s 0.22s;
}
.note.is-open .env-flap {
  z-index: 0;
  transform: rotateX(180deg);
}
.note.is-open .env-letter {
  transform: translateY(-44%);
}
.note-body {
  display: grid;
  gap: 12px;
  max-width: 640px;
  /* Same offset as the envelope, so the text centres on the envelope itself, not on the room above it. */
  margin-top: calc(var(--ew) * 0.4);
}
.note-stack {
  display: grid;
}
.note-stack > p {
  grid-area: 1 / 1;
  font:
    italic 500 34px/1.12 "Cormorant Garamond",
    Georgia,
    serif;
  letter-spacing: -0.2px;
  transition:
    opacity 0.5s 0.45s,
    transform 0.5s 0.45s,
    visibility 0s 0.45s;
}
.note-hint {
  color: var(--muted);
}
.note.is-open .note-hint,
.note:not(.is-open) .note-text {
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}
.note.is-still *,
.note.is-still::before {
  transition: none !important;
}
[data-theme="light"] .note::before {
  opacity: 0.3;
}
[data-theme="light"] .note.is-open::before {
  opacity: 0.5;
}
[data-theme="light"] .envelope > span:not(.env-letter) {
  outline: 1px solid #17212e14;
}
@media (max-width: 900px) {
  .note {
    --ew: 112px;
    --pad: 24px;
    gap: 24px;
    padding: 24px;
  }
  .note-stack > p {
    font-size: 25px;
  }
}
@media (max-width: 420px) {
  .note {
    --ew: 92px;
    --pad: 18px;
    gap: 18px;
    padding: 22px 18px;
  }
  .note-stack > p {
    font-size: 22px;
  }
}
h1 {
  font-size: 46px;
  letter-spacing: -2px;
}
.subline {
  font-size: 13px;
  margin-top: 12px;
}
main {
  padding: 26px 38px 70px;
}
.top {
  padding-bottom: 20px;
}
.grid {
  gap: 22px 17px;
}
.card {
  padding: 20px;
  border-radius: 20px;
  min-height: 188px;
  overflow: hidden;
}
.card:hover {
  border-color: var(--accent);
}
.card h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.6px;
}
.desc {
  font-size: 13px;
  line-height: 1.5;
}
.cardfooter {
  padding-top: 11px;
}
.star[aria-pressed="true"] {
  color: var(--pink);
}
.star[aria-pressed="true"] svg {
  fill: var(--pink);
}
.tag {
  color: var(--muted);
}
.tag {
  background: var(--hover);
  border-radius: 100px;
}
.tags {
  gap: 6px;
}
.searchbox {
  border-radius: 100px;
  background: 0 0;
}
.toolbar {
  gap: 10px;
  margin-bottom: 18px;
}
.code-art i,
.pill {
  border-radius: 100px;
}
.pill {
  font-size: 12px;
  padding: 9px 15px;
  transition: background 0.15s;
}
.pill.active {
  background: #9ebce0;
  border-color: #9ebce0;
  color: #15243b;
}
.topicbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 27px;
}
.filterbar {
  align-items: center;
  margin-bottom: 25px;
}
.section {
  margin-top: 40px;
}
.section h2 {
  font-size: 25px;
  letter-spacing: -0.8px;
}
.cover {
  display: block;
  position: relative;
  min-height: 170px;
  height: 170px;
  overflow: hidden;
  margin: -20px -20px 19px;
  border-radius: 20px 20px 0 0;
  color: #152339 !important;
  background: #9ebce0;
  text-decoration: none;
}
.cover-topic,
.cover-word {
  position: absolute;
  left: 20px;
}
.cover-word {
  right: 20px;
  top: 24px;
  font-size: clamp(24px, 2.5vw, 39px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -1.5px;
  overflow-wrap: anywhere;
}
.cover-topic {
  bottom: 18px;
  font-size: 11px;
}
.tone-1 {
  background: #d8e5f6;
}
.tone-2 {
  background: #b5c8e3;
}
.tone-3 {
  background: #dce0e9;
}
.tone-4 {
  background: #c0d8ed;
}
.tone-5 {
  background: #d8d5e8;
}
.cover-editorial:after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -65px;
  width: 160px;
  height: 160px;
  border: 1px solid #15233920;
  border-radius: 50%;
  pointer-events: none;
}
.cover-editorial .cover-word {
  z-index: 1;
}
.cover-label {
  position: absolute;
  bottom: 15px;
  left: 18px;
  font-size: 10px;
  z-index: 2;
  background: #f8fbffb0;
  padding: 4px 8px;
  border-radius: 100px;
}
.dots-art {
  height: 100%;
  background-image: radial-gradient(#234771 2px, transparent 3px);
  background-size: 13px 13px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000, transparent 70%);
  transform: rotate(-12deg) scale(1.3);
}
.code-art {
  padding: 28px 22px;
  transform: rotate(-5deg);
}
.code-art span {
  font-size: 27px;
  letter-spacing: -1px;
  font-family: monospace;
}
.code-art i {
  display: block;
  height: 7px;
  background: #2b5173;
  margin: 13px 0;
  width: 70%;
}
.code-art i:nth-child(3) {
  width: 48%;
  margin-left: 24px;
  background: #fff9;
}
.code-art i:nth-child(4) {
  width: 60%;
}
.shape-art {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-bottom: 15px;
}
.shape-art i {
  width: 70px;
  height: 80px;
  background: #28476b;
  border-radius: 50%;
}
.shape-art i:nth-child(2) {
  border-radius: 0;
  background: #f2f6fc;
  transform: rotate(30deg);
}
.shape-art i:nth-child(3) {
  border-radius: 0 50% 50%0;
  background: #638abc;
}
.orbit-art,
.orbit-art i {
  position: absolute;
  inset: 12px 40px 30px;
}
.orbit-art i {
  inset: 10px;
  border: 2px solid #23477180;
  border-radius: 50%;
  transform: rotate(-25deg);
}
.orbit-art i:nth-child(2) {
  transform: rotate(50deg) scaleX(0.5);
}
.orbit-art i:nth-child(3) {
  transform: rotate(-50deg) scaleX(0.5);
}
.orbit-art b {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #f4faff, #82a7d4 45%, #244e7e);
  left: calc(50% - 34px);
  top: calc(50% - 34px);
}
.chart-art {
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
  padding: 20px 30px 35px;
  gap: 12px;
}
.chart-art i {
  height: 40%;
  width: 28px;
  background: #305781;
  border-radius: 4px 4px 0 0;
}
.chart-art i:nth-child(2) {
  height: 70%;
}
.chart-art i:nth-child(3) {
  height: 50%;
  background: #fff;
}
.chart-art i:nth-child(4) {
  height: 90%;
}
.chart-art i:nth-child(5) {
  height: 65%;
}
.type-art {
  font:
    110px/0.9 Georgia,
    serif;
  padding: 12px 25px;
  letter-spacing: -9px;
}
.dropdown {
  position: relative;
  min-width: 0;
  flex: 0 1 215px;
}
.drop-menu,
.drop-trigger {
  background: var(--panel);
  border: 1px solid var(--line);
}
.drop-trigger {
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  height: 48px;
  padding: 0 17px;
  width: 100%;
  font-size: 13px;
}
.drop-trigger > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drop-trigger svg {
  width: 16px;
  height: 16px;
}
.drop-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--active);
}
.drop-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 250px);
  max-width: calc(100vw - 40px);
  border-radius: 17px;
  padding: 6px;
  box-shadow: var(--shadow);
  z-index: 35;
}
.drop-menu [role="listbox"] {
  max-height: 290px;
  overflow: auto;
}
.drop-menu [role="option"] {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 13px;
  background: 0 0;
  color: var(--ink);
}
.drop-menu [role="option"]:focus-visible,
.drop-menu [role="option"]:hover {
  background: var(--hover);
}
.drop-menu [aria-selected="true"] {
  background: var(--active);
}
.drop-search {
  margin: 5px 5px 8px;
  width: calc(100% - 10px);
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg);
  font-size: 12px;
}
.primarylink {
  background: #9ebce0;
  color: #15243b !important;
  border-radius: 100px;
}
.service-actions button {
  border-radius: 15px;
}
.folder {
  border-radius: 20px;
}
.kind {
  letter-spacing: 0;
}
.close {
  border-radius: 50%;
}
.studio-card {
  min-height: 205px;
}
.card:has(.cover) {
  min-height: 310px;
}
.countline {
  margin-bottom: 18px;
}
@media (min-width: 1700px) {
  main {
    padding-left: 55px;
    padding-right: 55px;
  }
  .card {
    padding: 20px;
  }
}
@media (max-width: 1180px) {
  .shell {
    grid-template-columns: 195px minmax(0, 1fr);
  }
  main {
    padding-left: 26px;
    padding-right: 26px;
  }
  .cover-word {
    font-size: 32px;
  }
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  main {
    padding: 18px 20px 50px;
  }
  h1 {
    font-size: 37px;
  }
  .toolbar > .dropdown {
    flex: 0 1 215px;
  }
  .filterbar > .dropdown {
    flex: 1 1 190px;
  }
  .card {
    padding: 20px;
  }
  .cover {
    height: 170px;
  }
  .section h2 {
    font-size: 23px;
  }
  .pagehead {
    padding-top: 27px;
  }
}
@media (max-width: 520px) {
  .filterbar > .dropdown,
  .toolbar > .dropdown {
    flex: 1 1 100%;
  }
  .cover {
    height: 188px;
  }
  .cover-word {
    font-size: 38px;
  }
  .topicbar {
    gap: 7px;
  }
  .pill {
    font-size: 12px;
    padding: 8px 12px;
  }
  .sectionlink {
    font-size: 11px;
  }
  .pagehead h1 {
    font-size: 35px;
  }
  .grid {
    gap: 16px;
  }
  .drop-menu {
    width: 100%;
  }
  .drawer {
    padding: 23px;
  }
  .studio-card {
    min-height: 190px;
  }
}
.country {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 9px;
}
.country-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
}
.country-separator {
  opacity: 0.55;
}
.drop-trigger .country-item {
  font-size: 13px;
}
.tag {
  border: 1px solid var(--tag-line, #526176);
  background: var(--tag-bg, #29313e);
  color: var(--tag-ink, #ccd5e3);
  line-height: 1.4;
  padding: 5px 10px;
}
[data-tone="blue"] {
  --tag-bg: #253c56;
  --tag-ink: #b9d9ff;
  --tag-line: #40638b;
}
[data-tone="indigo"] {
  --tag-bg: #303754;
  --tag-ink: #c7d1ff;
  --tag-line: #535f8d;
}
[data-tone="sage"] {
  --tag-bg: #2a3e38;
  --tag-ink: #bcdfcc;
  --tag-line: #4b6b5c;
}
[data-tone="ochre"] {
  --tag-bg: #473b27;
  --tag-ink: #ecd2a0;
  --tag-line: #796141;
}
[data-tone="lavender"] {
  --tag-bg: #3c3350;
  --tag-ink: #dac8f2;
  --tag-line: #6c5985;
}
[data-tone="coral"] {
  --tag-bg: #4c3331;
  --tag-ink: #f0c2b8;
  --tag-line: #83574e;
}
[data-tone="plum"] {
  --tag-bg: #493348;
  --tag-ink: #ecc3e5;
  --tag-line: #7c5578;
}
[data-tone="rose"] {
  --tag-bg: #48333e;
  --tag-ink: #f0c5d8;
  --tag-line: #7b5365;
}
[data-tone="sand"] {
  --tag-bg: #403b32;
  --tag-ink: #dfd4bd;
  --tag-line: #6e6655;
}
[data-tone="teal"] {
  --tag-bg: #253f42;
  --tag-ink: #b4dddf;
  --tag-line: #456d74;
}
[data-tone="slate"] {
  --tag-bg: #313a47;
  --tag-ink: #d0d9e6;
  --tag-line: #566478;
}
[data-theme="light"] [data-tone="blue"] {
  --tag-bg: #e4edf9;
  --tag-ink: #34577e;
  --tag-line: #b9cde6;
}
[data-theme="light"] [data-tone="indigo"] {
  --tag-bg: #e9ebf8;
  --tag-ink: #454d80;
  --tag-line: #c7cde8;
}
[data-theme="light"] [data-tone="sage"] {
  --tag-bg: #e5eee7;
  --tag-ink: #3f6251;
  --tag-line: #bcd1c3;
}
[data-theme="light"] [data-tone="ochre"] {
  --tag-bg: #f4eddf;
  --tag-ink: #75592c;
  --tag-line: #ddcbab;
}
[data-theme="light"] [data-tone="lavender"] {
  --tag-bg: #eee8f7;
  --tag-ink: #695180;
  --tag-line: #d3c4e5;
}
[data-theme="light"] [data-tone="coral"] {
  --tag-bg: #f6e8e2;
  --tag-ink: #885544;
  --tag-line: #e4c4b7;
}
[data-theme="light"] [data-tone="plum"] {
  --tag-bg: #f0e5ef;
  --tag-ink: #7b4b76;
  --tag-line: #dbc1d7;
}
[data-theme="light"] [data-tone="rose"] {
  --tag-bg: #f6e7ee;
  --tag-ink: #855368;
  --tag-line: #e5c3d2;
}
[data-theme="light"] [data-tone="sand"] {
  --tag-bg: #f1ede5;
  --tag-ink: #6d604a;
  --tag-line: #d8cfbd;
}
[data-theme="light"] [data-tone="teal"] {
  --tag-bg: #e3eff0;
  --tag-ink: #3c6269;
  --tag-line: #b9d4d8;
}
[data-theme="light"] [data-tone="slate"] {
  --tag-bg: #e8edf3;
  --tag-ink: #4c6078;
  --tag-line: #c5d0df;
}
.daily {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.daily-head,
.daily-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.eyebrow {
  color: var(--accent);
  font-size: 12px;
}
.daily h2 {
  font-size: 38px;
  letter-spacing: -1.4px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.daily .country,
.daily .tags {
  margin: 0;
}
.daily-desc {
  max-width: 72ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.daily-q {
  max-width: 72ch;
  padding-left: 12px;
  border-left: 2px solid var(--pink);
  font-size: 13px;
}
.daily-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.daily .primarylink {
  margin: 0;
}
.quick {
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.quick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.quick-row > span {
  min-width: 190px;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 760px) {
  .daily {
    padding: 20px;
  }
  .daily h2 {
    font-size: 30px;
  }
  .quick-row > span {
    flex-basis: 100%;
  }
}
.shot,
.daily-shot,
.drawer-shot {
  display: block;
  overflow: hidden;
  background: var(--hover);
  aspect-ratio: 16 / 10;
  max-width: 100%;
}
.shot {
  width: calc(100% + 40px);
  max-width: none;
  margin: -20px -20px 16px;
  border-radius: 20px 20px 0 0;
}
.shot img,
.daily-shot img,
.drawer-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.3s;
}
.card:hover .shot img {
  transform: scale(1.02);
}
.daily-shot {
  max-width: 560px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.drawer-shot {
  margin-bottom: 26px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.brief {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: -4px 0 14px;
}
.facts {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}
.facts span {
  color: var(--muted);
  margin-right: 6px;
}
.drawer .facts {
  font-size: 13px;
  margin: 0 0 10px;
  color: var(--ink);
}
.studio-card:has(.shot) {
  min-height: 0;
}
.collbar {
  margin-bottom: 14px;
}
.collactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 22px;
}
.collactions button:not(.primarylink) {
  background: none;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collactions button:hover {
  color: var(--accent);
}
.collactions .primarylink {
  margin: 0;
}
.collpick {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.collpick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.collpick-row:empty {
  display: none;
}
.newcoll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.newcoll input {
  flex: 1 1 240px;
  min-width: 0;
  height: 40px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  font-size: 13px;
}
.drawer .newcoll {
  margin-top: 6px;
}
/* v10: clickable facts, filter counts, studio dossier page, sitemap */
.facet:not(.tag) {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
}
.facet-text:hover,
.facet-country:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tag.facet:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.facts i {
  font-style: normal;
}
.optcount {
  margin-right: 8px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.sectionnote {
  margin-top: 6px;
  max-width: 72ch;
  color: var(--muted);
  font-size: 12px;
}
.dossier {
  display: grid;
  gap: 18px;
  margin-bottom: 40px;
}
.dossier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
}
.dossier-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.dossier h1 {
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -0.04em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.dossier .country,
.dossier .tags,
.dossier .facts {
  margin: 0;
}
.dossier .country {
  font-size: 14px;
}
.dossier .tags {
  font-size: 12px;
}
.dossier .facts {
  font-size: 14px;
}
.dossier-brief {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
}
.dossier .primarylink {
  margin: 0;
}
.dossier-shot {
  position: sticky;
  top: 24px;
  margin: 0;
}
.dossier-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 18px;
  margin: 6px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.dossier-facts dt {
  color: var(--muted);
}
.dossier-facts dd {
  margin: 0;
}
.dossier-sources {
  font-size: 12px;
  color: var(--muted);
}
.dossier-sources dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
}
.dossier-sources dd {
  margin: 0;
}
.dossier .collpick {
  margin-top: 4px;
}
.sitemap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.sitemap > div {
  display: grid;
  gap: 7px;
  align-content: start;
  justify-items: start;
}
.sitemap h2 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.sitemap button {
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}
.sitemap button:hover {
  color: var(--accent);
}
@media (max-width: 900px) {
  .dossier-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .dossier-shot {
    position: static;
    order: -1;
  }
  .sitemap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .sitemap {
    grid-template-columns: 1fr;
  }
}
.dossier-card {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.dossier-card .dossier-facts {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  gap: 8px 18px;
}
.dossier-card .src {
  margin-left: 4px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.dossier-cases {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.dossier-cases .label {
  font-size: 12px;
  color: var(--muted);
}
.dossier-cases ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.dossier-card .quiet {
  margin: 0;
}
/* v11: one cover system — typographic cover underneath, the site's own share image on top when it exists */
.cover2 {
  --cv-bg: #26303d;
  --cv-ink: #dfe6ef;
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  overflow: hidden;
  background: var(--cv-bg);
  color: var(--cv-ink) !important;
  text-decoration: none;
}
.cover2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.card:hover .cover2 img {
  transform: scale(1.02);
}
.cover-type {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  padding: 14px 16px 16px;
}
.cover-kind {
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cover-glyph {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}
.cover-name {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 30px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cover-name-l {
  font-size: 24px;
}
.cover-name-xl {
  font-size: 19px;
}
.card .card-cover {
  width: calc(100% + 40px);
  max-width: none;
  margin: -20px -20px 16px;
  border-radius: 20px 20px 0 0;
}
.daily-cover {
  max-width: 560px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.daily-cover .cover-name {
  font-size: 44px;
}
.dossier-cover {
  position: sticky;
  top: 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.dossier-cover .cover-name {
  font-size: clamp(32px, 4vw, 52px);
}
.drawer-cover {
  margin-bottom: 26px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
@media (max-width: 900px) {
  .dossier-cover {
    position: relative;
    top: 0;
    order: -1;
  }
}
/* Tones: deep in the dark theme, soft tints in the light one; same families as the tags */
[data-tone="blue"].cover2 { --cv-bg: #1f3554; --cv-ink: #cfe0f6; }
[data-tone="indigo"].cover2 { --cv-bg: #2a2d5a; --cv-ink: #d7d9fb; }
[data-tone="coral"].cover2 { --cv-bg: #5a2a26; --cv-ink: #ffd8d0; }
[data-tone="ochre"].cover2 { --cv-bg: #4d3a17; --cv-ink: #f5e2b8; }
[data-tone="lavender"].cover2 { --cv-bg: #3b2e55; --cv-ink: #e6dbfb; }
[data-tone="rose"].cover2 { --cv-bg: #55263d; --cv-ink: #fbd5e4; }
[data-tone="plum"].cover2 { --cv-bg: #40244b; --cv-ink: #efd5f6; }
[data-tone="sand"].cover2 { --cv-bg: #453c2d; --cv-ink: #efe4cf; }
[data-tone="teal"].cover2 { --cv-bg: #183f43; --cv-ink: #c9ecee; }
[data-tone="sage"].cover2 { --cv-bg: #2b3f2f; --cv-ink: #d6ebd8; }
[data-tone="slate"].cover2 { --cv-bg: #2a3442; --cv-ink: #d8e1ec; }
[data-theme="light"] [data-tone="blue"].cover2 { --cv-bg: #dce8f7; --cv-ink: #1f3a5f; }
[data-theme="light"] [data-tone="indigo"].cover2 { --cv-bg: #e2e3fa; --cv-ink: #2f3270; }
[data-theme="light"] [data-tone="coral"].cover2 { --cv-bg: #fbe1db; --cv-ink: #7a2f25; }
[data-theme="light"] [data-tone="ochre"].cover2 { --cv-bg: #f6ead0; --cv-ink: #6a4c12; }
[data-theme="light"] [data-tone="lavender"].cover2 { --cv-bg: #ebe3f8; --cv-ink: #48336e; }
[data-theme="light"] [data-tone="rose"].cover2 { --cv-bg: #f8dfe9; --cv-ink: #7a2a4b; }
[data-theme="light"] [data-tone="plum"].cover2 { --cv-bg: #f0e0f4; --cv-ink: #5a2c68; }
[data-theme="light"] [data-tone="sand"].cover2 { --cv-bg: #f1ebdf; --cv-ink: #5e4f34; }
[data-theme="light"] [data-tone="teal"].cover2 { --cv-bg: #dcefef; --cv-ink: #1f5459; }
[data-theme="light"] [data-tone="sage"].cover2 { --cv-bg: #e1eee2; --cv-ink: #2f5535; }
[data-theme="light"] [data-tone="slate"].cover2 { --cv-bg: #e4eaf1; --cv-ink: #384a60; }
/* v12: brand covers — logo on its own background, never cropped; latest cases underneath */
.cover-brand {
  display: flex;
  flex-direction: column;
  background: var(--brand-bg);
  color: var(--brand-ink) !important;
}
.cover-brand img {
  position: static;
  inset: auto;
}
.brand-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12%;
}
.cover-brand {
  container-type: inline-size;
}
/* Wide wordmarks are limited by width, square marks by height, so both read at a similar visual weight */
.cover-brand .brand-logo {
  width: 64%;
  height: 36%;
  object-fit: contain;
}
.cover-brand.has-works .brand-logo {
  width: 60%;
  height: 46%;
}
.cover-brand .brand-logo.mono {
  filter: brightness(0);
}
.brand-word {
  font-size: 11cqw;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--brand-ink);
}
.brand-word-l {
  font-size: 8cqw;
}
.brand-word-xl {
  font-size: 6cqw;
  white-space: normal;
  text-wrap: balance;
}
.brand-works {
  flex: 0 0 36%;
  display: flex;
  gap: 2px;
  background: var(--brand-bg);
}
.brand-works img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card:hover .cover-brand img.brand-logo {
  transform: none;
}

/* Layout option: menu across the top instead of the sidebar (settings → меню). Phones keep the drawer,
   so every rule here starts above the phone breakpoint. The theme button moves into this bar from JS. */
@media (min-width: 761px) {
  [data-layout="top"] .shell {
    display: block;
  }
  [data-layout="top"] .side {
    position: sticky;
    top: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 14px 38px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
  }
  [data-layout="top"] .brand {
    padding: 0;
  }
  [data-layout="top"] .brand-name {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  [data-layout="top"] .nav {
    flex-direction: row;
    gap: 2px;
  }
  [data-layout="top"] .nav .gap {
    display: none;
  }
  [data-layout="top"] .nav button {
    padding: 9px 14px;
    white-space: nowrap;
  }
  [data-layout="top"] .nav svg {
    display: none;
  }
  [data-layout="top"] .sidefoot {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 0 auto;
  }
  [data-layout="top"] .sidefoot button {
    white-space: nowrap;
  }
  [data-layout="top"] .sidefoot .theme {
    margin-left: 8px;
    padding: 0;
    border-radius: 50%;
  }
  [data-layout="top"] h1.sr + .note {
    margin-top: 12px;
  }
  [data-layout="top"] main {
    margin: 0 auto;
  }
  [data-layout="top"] .top {
    display: none;
  }
}
/* Narrower screens: brand and service links on the first row, sections on the second. */
@media (min-width: 761px) and (max-width: 1180px) {
  [data-layout="top"] .side {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 28px;
  }
  [data-layout="top"] .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
}
.layout-switch {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
/* Weekly digest: four topic columns of headlines in one panel; topic labels reuse the tag tones. */
.digest {
  margin-bottom: 40px;
}
.digest .digest-range {
  margin-left: 6px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
.digest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 24px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
}
.digest-col {
  display: grid;
  align-content: start;
  gap: 14px;
}
.digest-topic {
  justify-self: start;
}
.digest ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.digest li {
  display: grid;
  gap: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.digest-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}
.digest-meta {
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 1180px) {
  .digest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .digest-grid {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  /* On a phone the home page shows two headlines per topic; the full issue is in «Культура». */
  #homecontent .digest li:nth-child(n + 3) {
    display: none;
  }
}