:root {
  color-scheme: light;
  --bg: #F1EFEC;
  --sheet: #FFFFFF;
  --soft: #F6F4F1;
  --ink: #1E1A1C;
  --ink-2: #5E5659;
  --ink-3: #8C8486;
  --line: #ECE7E2;
  --chip: #F1EEEA;
  --chip-h: #E7E2DC;
  --link: #A8413E;
  --link-h: #56132E;
  --logo: #56132E;
  --mustard: #D09352;
  --tip: #F8EBD8;
  --tip-ink: #36271A;
  --tip-acc: #8E541B;
  --winter: #56132E;
  --winter-ink: #F6F0E6;
  --ad: #F4F1ED;
  --ad-line: #E3DCD5;
  --shadow: 0 1px 1px rgba(70, 35, 40, .03), 0 10px 30px -14px rgba(70, 35, 40, .16);
  --shadow-h: 0 2px 4px rgba(70, 35, 40, .04), 0 18px 40px -16px rgba(70, 35, 40, .26);
  --photo-sh: 0 22px 44px -22px rgba(70, 25, 35, .55);
  --pxK: #56132E; --pxC: #A8413E; --pxB: #B55D44; --pxD: #7B3038; --pxM: #D09352;
  --pxS: #F0C877; --pxP: #F6F0E6; --pxO: #7F8C3C; --pxR: #D9773F;
  --img-f: none;
  --r-xl: 28px; --r-l: 24px; --r-m: 18px; --r-s: 14px;

  
  --life-bg: #F5DCDA;   --life-ink: #3B0E1E;   --life-ink2: #5E2433;   --life-acc: #A8413E;
  --money-bg: #F2DEAC;  --money-ink: #352306;  --money-ink2: #56390F;  --money-acc: #9A6420;
  --rights-bg: #EDE3D3; --rights-ink: #30251A; --rights-ink2: #53412F; --rights-acc: #8A6845;
  --health-bg: #DEE3C5; --health-ink: #232D0F; --health-ink2: #3A4419; --health-acc: #66752E;
  --tech-bg: #E4DEE8;   --tech-ink: #292133;   --tech-ink2: #4A3E56;   --tech-acc: #6E5A80;
  --travel-bg: #D7E4E6; --travel-ink: #122D36; --travel-ink2: #2B4751; --travel-acc: #3F7280;
  --shop-bg: #F8DDCB;   --shop-ink: #41200F;   --shop-ink2: #663219;   --shop-acc: #B5552E;
  --bio-bg: #CBE7D6;    --bio-ink: #0D2B1C;    --bio-ink2: #21473A;    --bio-acc: #2F7A55;
  
  --hacks-bg: #C3E8E8;  --hacks-ink: #002929;  --hacks-ink2: #08494A;  --hacks-acc: #007D7F;
  --house-bg: #F1D7E8;  --house-ink: #31172A;  --house-ink2: #54334B;  --house-acc: #915480;
  --kino-bg: #D4E0FB;   --kino-ink: #16213A;   --kino-ink2: #313F60;   --kino-acc: #5069A6;
  --on-plate: rgba(255, 255, 255, .58);
  --plate-line: rgba(50, 25, 25, .13);

  
  --num: #A8413E;
  
  --ok-bg: #E4E9CC;  --ok-ink: #232D0F;  --ok-acc: #56651F;  --ok-band: #475418;
  --no-bg: #F6DEDB;  --no-ink: #3B0E1E;  --no-acc: #A8413E;  --no-band: #8E3034;
  --mid-bg: #F5E2B8; --mid-ink: #3A2708; --mid-acc: #8E541B; --mid-band: #D09352;
  --band-ink: #FBF4EA; --mid-band-ink: #150C04;
  --sum-bg: #2A2326; --sum-ink: #F6F0E6; --sum-acc: #E9B867;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1A1C;
  --sheet: #262427;
  --soft: #2C292D;
  --ink: #EDE9E6;
  --ink-2: #B9B2AF;
  --ink-3: #8B8482;
  --line: #363337;
  --chip: #312E32;
  --chip-h: #3B383C;
  --link: #EE9D93;
  --link-h: #F7C6BE;
  --logo: #F6F0E6;
  --tip: #352C22;
  --tip-ink: #F2E4D0;
  --tip-acc: #E4AE6C;
  --winter: #3F1022;
  --ad: #2C292D;
  --ad-line: #3B383C;
  --shadow: none;
  --shadow-h: 0 14px 34px -16px rgba(0, 0, 0, .6);
  --photo-sh: 0 22px 44px -20px rgba(0, 0, 0, .7);
  --pxK: #CB8590; --pxD: #A9545E;
  --img-f: brightness(.9) saturate(.95);

  --life-bg: #4A2C33;   --life-ink: #F8DEDC;   --life-ink2: #E9C2C1;   --life-acc: #E8928C;
  --money-bg: #443A26;  --money-ink: #F6E5C0;  --money-ink2: #E3CB98;  --money-acc: #E2AE5E;
  --rights-bg: #413A31; --rights-ink: #F1E7D9; --rights-ink2: #DFD1BD; --rights-acc: #CDAA80;
  --health-bg: #383E2A; --health-ink: #E7ECCF; --health-ink2: #CCD4A8; --health-acc: #AFBF6A;
  --tech-bg: #3B3543;   --tech-ink: #ECE6F0;   --tech-ink2: #D3C9DC;   --tech-acc: #B8A2CC;
  --travel-bg: #2C3D44; --travel-ink: #DEEDF0; --travel-ink2: #B9D3D9; --travel-acc: #86B8C4;
  --shop-bg: #47332A;   --shop-ink: #F9E3D5;   --shop-ink2: #EAC3AB;   --shop-acc: #EB9A73;
  --bio-bg: #203E31;    --bio-ink: #DDF2E5;    --bio-ink2: #B3D6C1;    --bio-acc: #7CC49B;
  --hacks-bg: #1F3E3E;  --hacks-ink: #D7F1F1;  --hacks-ink2: #AED9D9;  --hacks-acc: #67BFBF;
  --house-bg: #44313E;  --house-ink: #F9E4F2;  --house-ink2: #E4C5DA;  --house-acc: #D299C1;
  --kino-bg: #2F384B;   --kino-ink: #E2EBFF;   --kino-ink2: #C2CFEE;   --kino-acc: #95ADE5;
  --on-plate: rgba(0, 0, 0, .2);
  --plate-line: rgba(255, 245, 235, .13);

  --num: #EE9D93;
  --ok-bg: #343A24;  --ok-ink: #E7ECCF;  --ok-acc: #B5C46E;
  --no-bg: #46272B;  --no-ink: #F8DEDC;  --no-acc: #EE9D93;
  --mid-bg: #44371F; --mid-ink: #F6E5C0; --mid-acc: #E4AE5E;
  --sum-bg: #EFE6DA; --sum-ink: #241C1F; --sum-acc: #6E3F12;
}
.c-life   { --c-bg: var(--life-bg);   --c-ink: var(--life-ink);   --c-ink2: var(--life-ink2);   --c-acc: var(--life-acc) }
.c-money  { --c-bg: var(--money-bg);  --c-ink: var(--money-ink);  --c-ink2: var(--money-ink2);  --c-acc: var(--money-acc) }
.c-rights { --c-bg: var(--rights-bg); --c-ink: var(--rights-ink); --c-ink2: var(--rights-ink2); --c-acc: var(--rights-acc) }
.c-health { --c-bg: var(--health-bg); --c-ink: var(--health-ink); --c-ink2: var(--health-ink2); --c-acc: var(--health-acc) }
.c-tech   { --c-bg: var(--tech-bg);   --c-ink: var(--tech-ink);   --c-ink2: var(--tech-ink2);   --c-acc: var(--tech-acc) }
.c-travel { --c-bg: var(--travel-bg); --c-ink: var(--travel-ink); --c-ink2: var(--travel-ink2); --c-acc: var(--travel-acc) }
.c-shop   { --c-bg: var(--shop-bg);   --c-ink: var(--shop-ink);   --c-ink2: var(--shop-ink2);   --c-acc: var(--shop-acc) }
.c-bio    { --c-bg: var(--bio-bg);    --c-ink: var(--bio-ink);    --c-ink2: var(--bio-ink2);    --c-acc: var(--bio-acc) }
.c-hacks  { --c-bg: var(--hacks-bg);  --c-ink: var(--hacks-ink);  --c-ink2: var(--hacks-ink2);  --c-acc: var(--hacks-acc) }
.c-house  { --c-bg: var(--house-bg);  --c-ink: var(--house-ink);  --c-ink2: var(--house-ink2);  --c-acc: var(--house-acc) }
.c-kino   { --c-bg: var(--kino-bg);   --c-ink: var(--kino-ink);   --c-ink2: var(--kino-ink2);   --c-acc: var(--kino-acc) }

.c-kex { --c-bg: var(--tip); --c-ink: var(--tip-ink); --c-ink2: #5B4127; --c-acc: #B5752F }
:root[data-theme="dark"] .c-kex { --c-ink2: #DCC6A6; --c-acc: #E4AE6C }


*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px }
html:has(body.pg-post) { scroll-padding-top: 76px }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.45 Onest, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
}
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer }
h1, h2, h3 { margin: 0 }
:focus-visible { outline: 2.5px solid var(--link); outline-offset: 3px; border-radius: 10px }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.px { flex: none; display: block }
.pK { fill: var(--pxK) } .pC { fill: var(--pxC) } .pB { fill: var(--pxB) } .pD { fill: var(--pxD) }
.pM { fill: var(--pxM) } .pS { fill: var(--pxS) } .pP { fill: var(--pxP) } .pO { fill: var(--pxO) } .pR { fill: var(--pxR) }
.lg-d { display: none }
:root[data-theme="dark"] .lg-l { display: none }
:root[data-theme="dark"] .lg-d { display: block }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px }
.sheet {
  background: var(--sheet); border-radius: var(--r-xl); box-shadow: var(--shadow);
  transition: background-color .25s ease;
}


.hdr { padding: 14px 0 }
.hdr-in { display: flex; align-items: center; gap: 10px }
.logo { display: flex; align-items: center; gap: 10px; flex: none; width: 264px }
.logo-ic { width: 44px; height: 58px; display: grid; place-items: center; flex: none }
.logo-ic img { height: 54px; width: auto }
.logo-tx { display: flex; flex-direction: column; line-height: .84; padding-top: 2px }
.logo-tx b { font-weight: 900; font-size: 35px; letter-spacing: -.02em; color: var(--logo); transition: color .25s }
.logo-tx i { font-style: normal; font-weight: 700; font-size: 19.2px; letter-spacing: -.005em; color: #D09352; margin-top: 3px }

.pills { display: flex; gap: 8px }
.pill {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px 0 13px;
  background: var(--sheet); border-radius: 999px; font-weight: 700; font-size: 16.5px; letter-spacing: -.01em;
  transition: background-color .2s, transform .2s;
}
.pill .px { width: 22px; height: 22px }
.pill:hover { transform: translateY(-1px); background: var(--soft) }

.search { margin-left: auto; flex: 0 1 300px; min-width: 0 }
.search label {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px;
  background: var(--sheet); color: var(--ink-2); cursor: text; transition: background-color .25s;
}
.search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 16px Onest, sans-serif; color: var(--ink);
  -webkit-appearance: none; appearance: none; padding: 0;
}
.search input::placeholder { color: var(--ink-2); opacity: 1 }
.search label:focus-within { box-shadow: 0 0 0 2.5px var(--link) }
.ibtn {
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; flex: none;
  background: var(--sheet); color: var(--ink); transition: background-color .2s, transform .2s;
}
.ibtn:hover { background: var(--soft) }
.ibtn:active { transform: scale(.94) }
.burger { display: none }

.menu { padding: 0 0 8px }
.menu[hidden] { display: none }
.menu:not([hidden]) + .rubrow { display: none }
.menu-in { margin: 0 8px; background: var(--sheet); border-radius: var(--r-l); padding: 12px }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.mtile {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px; border-radius: 18px;
  background: var(--c-bg); color: var(--c-ink); font-weight: 700; font-size: 17px;
}
.mtile-all { background: var(--chip); color: var(--ink); gap: 10px; font-size: 16px; white-space: nowrap }
.menu-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 14px 6px 4px; font-weight: 600; font-size: 16px }
.menu-links a { display: inline-flex; align-items: center; gap: 8px }

.rubrow { display: none }
.rubrow-in {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 32px 14px; max-width: 1440px; margin: 0 auto;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.rubrow-in::-webkit-scrollbar { display: none }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--c-bg); color: var(--c-ink); font-weight: 700; font-size: 15.5px; scroll-snap-align: start;
}
.chip.on { box-shadow: inset 0 0 0 2px var(--c-ink) }


.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 6px }
.side { position: sticky; top: 16px; padding-bottom: 24px }
.pg-post .side, .ad-sticky { transition: top .28s cubic-bezier(.2, .7, .2, 1) }
body.stuck .side, body.stuck .ad-sticky { top: 76px }
.side-nav { display: flex; flex-direction: column; gap: 0 }
.side-nav a {
  display: flex; align-items: center; gap: 13px; padding: 5px 14px 5px 6px; border-radius: 16px;
  font-size: 17.5px; font-weight: 500; transition: background-color .2s;
}
.sn-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--c-bg); flex: none; transition: transform .2s }
.side-nav .px { width: 24px; height: 24px }
.side-nav a:hover { background: var(--sheet) }
.side-nav a:hover .sn-ic { transform: rotate(-6deg) }
.side-nav a.on { background: var(--sheet); font-weight: 700; box-shadow: var(--shadow) }
.side-card { margin-top: 26px; padding: 18px 18px 20px; border-radius: var(--r-l); background: var(--tip); color: var(--tip-ink) }
.side-card p { margin: 10px 0 12px; font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -.01em }
.side-card a { font-weight: 700; font-size: 15px; color: var(--link) }
.side-card a:hover { color: var(--link-h) }

@media (max-height: 840px) { .side-card { display: none } }
@media (max-height: 680px) {
  .side-nav a { padding: 3px 12px 3px 5px; font-size: 16.5px; gap: 11px }
  .side-nav .sn-ic { width: 34px; height: 34px; border-radius: 11px }
  .side-nav .px { width: 21px; height: 21px }
}

.main { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding-bottom: 28px }


.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; font-weight: 500; color: var(--ink-2); line-height: 1.3 }
.sep { opacity: .55 }
.fmt { font-weight: 700 }
.rtag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 7px; border-radius: 999px;
  background: var(--c-bg); color: var(--c-ink); font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap;
}
.rtag .px { width: 18px; height: 18px }
.tt { font-weight: 700; letter-spacing: -.012em; text-wrap: pretty; transition: color .2s }
.ph { display: block; overflow: hidden; background: var(--chip); border-radius: var(--r-m); position: relative }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-f); transition: transform .6s cubic-bezier(.2, .7, .2, 1) }
a:hover .ph img { transform: scale(1.04) }
a:hover .tt { color: var(--link) }

.sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px }
.sh h2 { display: flex; align-items: center; gap: 11px; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.024em }
.sh .px { width: 26px; height: 26px }
.sh-note { font-size: 15px; color: var(--ink-2); font-weight: 500 }
.sh-out { margin: 6px 4px 14px }
.sh-out h2 { font-size: 30px; font-weight: 900; letter-spacing: -.03em }
.panel { padding: 24px 28px 22px }

.row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 18px; align-items: start; padding: 16px 0 }
.row + .row { border-top: 1px solid var(--line) }
.row .tx { display: flex; flex-direction: column; gap: 9px; min-width: 0 }
.row .tt { font-size: 18px; line-height: 1.28 }
.row .ph { aspect-ratio: 4 / 3; border-radius: var(--r-s) }

.acts { display: flex; gap: 6px; position: relative; z-index: 2 }
.abtn { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: var(--chip); color: var(--ink);
  transition: background-color .2s, color .2s, transform .2s; flex: none }
.abtn:hover { background: var(--chip-h) }
.abtn:active { transform: scale(.92) }
.abtn[aria-pressed="true"] { color: var(--link) }


.cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); padding: 10px }
.cv-plate {
  grid-column: 1 / -1; grid-row: 1; position: relative; overflow: hidden;
  background: var(--c-bg); color: var(--c-ink); border-radius: 22px; padding: 30px 40px 32px;
  transition: background-color .25s;
}
.cv-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1 }
.cv-flag {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px;
  background: var(--c-ink); color: var(--c-bg); font: 800 14.5px/1 Onest, sans-serif;
}
.cv-flag .px { width: 16.5px; height: 16.5px }
.cv-fmt { font: 700 14px/1 Onest, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink2) }
.cv-tt {
  position: relative; z-index: 1; margin: 26px 0 0; max-width: calc(100% - 190px);
  font-size: 64px; line-height: .99; font-weight: 900; letter-spacing: -.038em; text-wrap: balance;
}
.cv-tt a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 4px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .35s ease }
.cv-tt a:hover { background-size: 100% 4px }
.cv-meta {
  position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin-top: 64px;
  max-width: calc(47% - 30px); font-size: 15px; font-weight: 500; color: var(--c-ink2);
}
.cv-rub { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--c-ink) }
.cv-rub .px { width: 18px; height: 18px }
.cv-art { position: absolute; top: 26px; right: 34px; transition: transform .4s steps(4) }
.cover:hover .cv-art { transform: translateY(-6px) rotate(-4deg) }
.cv-ph {
  grid-column: 2; grid-row: 2; position: relative; z-index: 1; display: block; margin: -104px 24px 0 0; align-self: start;
  aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--chip); box-shadow: var(--photo-sh);
}
.cv-ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-f); transition: transform .8s cubic-bezier(.2, .7, .2, 1) }
.cover:hover .cv-ph img { transform: scale(1.03) }
.cv-ft { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 18px; padding: 24px 34px 12px 30px; min-width: 0 }
.cv-lead { margin: 0; font-size: 18.5px; line-height: 1.5; color: var(--ink) }
.cv-by { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 15.5px }
.cv-lines { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line) }
.cv-lines-h { font: 700 14px/1 Onest, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2) }
.cv-lines a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center }
.cv-lines .tt { font-size: 16.5px; line-height: 1.3 }
.cl-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c-bg) }
.cl-ic .px { width: 18px; height: 18px }


.blk { min-width: 0; scroll-margin-top: 16px }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; grid-auto-flow: row dense }
.bento .big { grid-column: span 2; grid-row: span 2 }
.bento .wide { grid-column: span 2 }
.card { border-radius: var(--r-l); min-width: 0; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background-color .25s }
.card:hover { transform: translateY(-3px) }

.pc { display: flex; flex-direction: column; background: var(--sheet); padding: 8px; box-shadow: var(--shadow) }
.pc:hover { box-shadow: var(--shadow-h) }
.pc .ph { aspect-ratio: 3 / 2 }
.pc .tx { display: flex; flex-direction: column; gap: 10px; padding: 14px 10px 12px }
.pc .tt { font-size: 19px; line-height: 1.25 }
.pc .ld { font-size: 16.5px; line-height: 1.45; color: var(--ink-2) }
.pc.big .ph { aspect-ratio: auto; flex: 1; min-height: 300px }
.pc.big .tx { padding: 18px 16px 14px; gap: 12px }
.pc.big .tt { font-size: 31px; line-height: 1.1; font-weight: 800; letter-spacing: -.026em; text-wrap: balance }

.ill {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 20px 20px 18px; background: var(--c-bg); color: var(--c-ink); min-height: 280px; overflow: hidden;
}
.ill-tx { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.ill-k { display: flex; align-items: center; gap: 7px; font: 700 14.5px/1.25 Onest, sans-serif; color: var(--c-ink2) }
.ill-k .px { width: 18px; height: 18px }
.ill .tt { font-size: 21.5px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em }
.ill .ld { font-size: 16px; line-height: 1.45; color: var(--c-ink2) }
.ill-ft { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px }
.ill-m { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.25; font-weight: 500; color: var(--c-ink2) }
.ill-m b { font-weight: 700; color: var(--c-ink) }
.ill-art { display: block; flex: none; transition: transform .35s steps(3) }
.ill:hover .ill-art { transform: translateY(-6px) }
.ill:hover .tt, .tall:hover .tt, .spread a:hover .tt, .also a:hover .tt {
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px
}
.ill.wide { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; column-gap: 28px; row-gap: 16px; padding: 24px 28px 20px }
.ill.wide .ill-tx { grid-column: 1; grid-row: 1 }
.ill.wide .ill-ft { display: contents }
.ill.wide .ill-m { grid-column: 1; grid-row: 2; align-self: end }
.ill.wide .ill-art { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-right: 6px }
.ill.wide .tt { font-size: 29px; line-height: 1.1; letter-spacing: -.026em; text-wrap: balance }

.tipc { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 20px; background: var(--tip); color: var(--tip-ink) }
.tipc-h { display: inline-flex; align-items: center; gap: 9px; font: 800 15px/1 Onest, sans-serif; color: var(--tip-acc) }
.tipc-q { font-family: 'Charis SIL', Charter, Georgia, serif; font-size: 22px; line-height: 1.42; hyphens: auto; -webkit-hyphens: auto }
.tipc-src { margin-top: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--tip-acc) 25%, transparent) }
.tipc-t { font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--link); transition: color .2s }
.tipc:hover .tipc-t { color: var(--link-h) }


.pop { list-style: none; margin: 0; padding: 0 }
.pop li + li { border-top: 1px solid var(--line) }
.pop a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; align-items: start }
.pop li:first-child a { padding-top: 2px }
.pop .n { color: var(--num); padding-top: 2px; transition: transform .2s steps(2) }
.num-rub .pop .n { color: var(--c-acc) }
.pop .n .px { width: 20px; height: 28px }
.pop a:hover .n { transform: translateY(-3px) }
.pop-tx { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.pop .tt { font-size: 16.5px; line-height: 1.3; font-weight: 600 }
.meta-s { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-2) }
.meta-s .px { width: 18px; height: 18px }

.popx-sec { padding-bottom: 24px }
.popx { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) }
.popx li + li { border-top: 0; border-left: 1px solid var(--line) }
.popx a { display: flex; flex-direction: column; gap: 16px; padding: 4px 20px 4px; height: 100% }
.popx li:first-child a { padding: 4px 20px 4px 0 }
.popx li:last-child a { padding-right: 0 }
.popx .n { padding: 0 }
.popx .n .px { width: 45px; height: 63px }
.popx .tt { font-size: 17.5px; line-height: 1.28; font-weight: 700 }
.popx .meta-s { margin-top: auto }


.shelf-sec {
  position: relative; overflow: hidden; background: var(--winter); color: var(--winter-ink); border-radius: var(--r-xl);
  padding: 28px 0 30px; scroll-margin-top: 16px;
  --pxK: #F2C9A6; --pxD: #D47F7F;
}
.shelf-sec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' shape-rendering='crispEdges'%3E%3Cg fill='%23F6F0E6' fill-opacity='.16'%3E%3Crect x='12' y='14' width='4' height='4'/%3E%3Crect x='70' y='40' width='4' height='4'/%3E%3Crect x='130' y='10' width='4' height='4'/%3E%3Crect x='40' y='86' width='4' height='4'/%3E%3Crect x='108' y='76' width='4' height='4'/%3E%3Crect x='148' y='100' width='4' height='4'/%3E%3Crect x='92' y='112' width='4' height='4'/%3E%3C/g%3E%3C/svg%3E");
}
.shelf-sec > * { position: relative }
.shelf-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 30px; margin-bottom: 22px }
.shelf-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 Onest, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #E9B867 }
.shelf-tag .px { width: 18px; height: 18px }
.shelf-h h2 { margin: 12px 0 8px; font-size: 34px; line-height: 1.08; font-weight: 900; letter-spacing: -.03em; color: #F6F0E6 }
.shelf-h p { margin: 0; max-width: 560px; font-size: 16.5px; line-height: 1.45; color: rgba(246, 240, 230, .82) }
.shelf-nav { display: flex; gap: 8px; flex: none }
.snav { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; background: rgba(246, 240, 230, .12); color: #F6F0E6; transition: background-color .2s, opacity .2s }
.snav:hover:not(:disabled) { background: rgba(246, 240, 230, .22) }
.snav:disabled { opacity: .35; cursor: default }
.shelf {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 30px;
  padding: 4px 30px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.shelf::-webkit-scrollbar { display: none }
.shelf::after { content: ""; flex: 0 0 14px }
.shelf:focus-visible { outline-offset: -3px }
.tall {
  flex: none; width: 244px; min-height: 412px; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--c-bg); color: var(--c-ink); scroll-snap-align: start; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.tall:hover { transform: translateY(-4px) }
.tall .ph { height: 232px; border-radius: 0; flex: none }
.tl-tx { display: flex; flex-direction: column; gap: 9px; padding: 16px 16px 16px; flex: 1 }
.tl-k { font: 700 14px/1 Onest, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink2) }
.tall .tt { font-size: 18.5px; line-height: 1.22; font-weight: 800; letter-spacing: -.016em }
.tl-rub { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--c-ink2) }
.tl-rub .px { width: 18px; height: 18px }


.spread { --sp-ink2: var(--ink-2); --sp-line: var(--line); --sp-ph: var(--chip); padding: 10px 10px 30px; scroll-margin-top: 16px }
.sp-h {
  position: relative; display: flex; align-items: center; gap: 24px; margin-bottom: 28px; padding: 24px 30px 24px 32px;
  border-radius: 22px; background: var(--c-bg); color: var(--c-ink); transition: background-color .25s;
}
.sp-ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--on-plate); flex: none }
.sp-ic .px { width: 48px; height: 48px }
.sp-ic.sm { width: 42px; height: 42px; border-radius: 13px }
.sp-ic.sm .px { width: 24px; height: 24px }
.sp-tt { min-width: 0 }
.sp-tt h2 { font-size: 42px; line-height: 1; font-weight: 900; letter-spacing: -.034em }
.sp-tt h2 a { display: inline-flex; align-items: center; gap: 12px }
.sp-tt .chev { color: var(--c-ink2); font-weight: 600; font-size: .78em; transition: transform .2s }
.sp-tt h2 a:hover .chev { transform: translateX(4px) }
.sp-tt p { margin: 8px 0 0; font-size: 16.5px; line-height: 1.35; font-weight: 500; color: var(--c-ink2) }
.spread .sp-ic { order: 2; margin-left: auto; width: auto; height: auto; border-radius: 0; background: none; transition: transform .35s steps(3) }
.spread .sp-ic .px { width: 84px; height: 84px }
.sp-h:hover .sp-ic { transform: translateY(-5px) rotate(-4deg) }
.sp-body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 36px; align-items: start; padding: 0 20px }
.spread.mirror .sp-big { order: 2 }
.sp-big { display: flex; flex-direction: column; min-width: 0 }
.sp-big .ph { aspect-ratio: 3 / 2; border-radius: 20px; background: var(--sp-ph) }
.sp-big .tx { display: flex; flex-direction: column; gap: 10px; padding: 18px 4px 0 }
.sp-big .tt { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.026em; text-wrap: balance }
.sp-big .ld { font-size: 17px; line-height: 1.45; color: var(--sp-ink2) }
.spread .meta { color: var(--sp-ink2) }
.spread .rows .row:first-child { padding-top: 0 }
.spread .row { grid-template-columns: minmax(0, 1fr) 150px; padding: 20px 0 }
.spread .row + .row { border-top-color: var(--sp-line) }
.spread .row .tt { font-size: 19px; line-height: 1.26 }
.spread .row .ph { border-radius: 16px; background: var(--sp-ph) }


body.sec-full .spread {
  --sp-ink2: var(--c-ink2); --sp-line: var(--plate-line); --sp-ph: var(--on-plate);
  background: var(--c-bg); color: var(--c-ink); padding: 26px 30px 30px; box-shadow: none;
}
body.sec-full .sp-h { gap: 18px; padding: 0 0 20px; margin-bottom: 24px; border-radius: 0; background: none; border-bottom: 2px solid var(--plate-line) }
body.sec-full .spread .sp-ic { order: 0; margin-left: 0; width: 76px; height: 76px; border-radius: 22px; background: var(--on-plate); transform: none }
body.sec-full .spread .sp-ic .px { width: 48px; height: 48px }
body.sec-full .sp-body { padding: 0 }


.adsheet { padding: 16px 20px 20px }
.adsheet:empty { display: none }
.ad-lbl { font: 600 12px/1 Onest, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 9px 4px }
.ad-box {
  height: 250px; border-radius: var(--r-m); background: var(--ad); border: 1px dashed var(--ad-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-3);
}
.ad-mark { opacity: .35; filter: grayscale(1) }
.ad-size { font: 500 13px/1 Onest, sans-serif; letter-spacing: .04em }
.sz-m { display: none }


.sub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 26px 28px }
.sub-ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--tip) }
.sub-ic .px { width: 44px; height: 44px }
.sub h2 { font-size: 28px; font-weight: 900; letter-spacing: -.026em; line-height: 1.12 }
.sub p { margin: 8px 0 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.45 }
.sub-btns { display: flex; flex-wrap: wrap; gap: 10px }
.sbtn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 7px; border-radius: 999px;
  background: var(--chip); font-weight: 700; font-size: 16px; transition: background-color .2s, transform .2s;
}
.sbtn:hover { background: var(--chip-h); transform: translateY(-1px) }
.sic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 13px/1 Onest, sans-serif; letter-spacing: -.02em; flex: none }
.sic.vk { background: #0077FF } .sic.ok { background: #EE8208 } .sic.tg { background: #2AABEE } .sic.mx { background: #3F4BE8 }
.sic svg { width: 17px; height: 17px }


.rtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.rtile {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 16px 18px;
  border-radius: var(--r-l); background: var(--c-bg); color: var(--c-ink); transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .25s;
}
.rtile:hover { transform: translateY(-3px) }
.rtile-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--on-plate); flex: none; transition: transform .25s steps(3) }
.rtile:hover .rtile-ic { transform: rotate(-6deg) }
.rtile-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.rtile-t { font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: -.02em }
.rtile-d { font-size: 15.5px; line-height: 1.42; color: var(--c-ink2) }
.rtile-n { font-size: 14px; font-weight: 600; color: var(--c-ink2) }
.rtile-l { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1.5px solid var(--plate-line) }
.rtile-l span { font-size: 15.5px; line-height: 1.3; font-weight: 600 }
.rtile-all .rtile-ic { color: var(--c-ink2) }
.rtile-go { position: absolute; top: 20px; right: 18px; color: var(--c-ink2); transition: transform .2s }
.rtile:hover .rtile-go { transform: translateX(3px) }
.rtiles.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.rtiles.big .rtile { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px 18px; padding: 22px 24px 22px; align-items: start }
.rtiles.big .rtile-ic { width: 76px; height: 76px; border-radius: 22px }
.rtiles.big .rtile-t { font-size: 28px; font-weight: 900; letter-spacing: -.028em; padding-right: 30px }
.rtiles.big .rtile-l { grid-column: 1 / -1 }
.rtiles.big .rtile-go { top: 26px; right: 24px }


.rtiles > .rtile:last-child:nth-child(4n+3) { grid-column: span 2 }
.rtiles.big > .rtile:last-child:nth-child(odd) { grid-column: 1 / -1 }

.rtiles.home .rtile { min-height: 168px }
.rtiles.home .rtile-d { font-size: 15px; line-height: 1.38 }
.rtile-srch .rtile-ic { color: var(--c-ink2) }


.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 28px }
.post-col { display: flex; flex-direction: column; gap: 20px; min-width: 0 }
.art { padding: 10px 10px 40px }


.pc-plate {
  position: relative; background: var(--c-bg); color: var(--c-ink); border-radius: 22px; padding: 26px 44px 96px;
  transition: background-color .25s;
}
.pc-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap }
.rtag-w {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px 0 10px; border-radius: 999px;
  background: var(--on-plate); color: var(--c-ink); font-weight: 700; font-size: 15px; transition: background-color .2s;
}
.rtag-w .px { width: 18px; height: 18px }
.rtag-w:hover { background: var(--sheet) }
.pc-fmt { font: 700 14px/36px Onest, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink2) }
.pc-art { margin-left: auto; margin-top: -4px }
.pc-art .px { width: 84px; height: 84px }
.art h1 { font-size: 50px; line-height: 1.03; font-weight: 900; letter-spacing: -.034em; margin: 8px 0 18px; text-wrap: balance }
.lead { margin: 0 0 26px; font-size: 21px; line-height: 1.45; color: var(--c-ink); max-width: 36em }
.pc-meta { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1.5px solid var(--plate-line) }
.ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--on-plate); color: var(--c-ink); font: 800 15px/1 Onest, sans-serif }
.by { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.by b { font-weight: 700; font-size: 16px }
.by b a { color: inherit; text-decoration: none }
.by b a:hover { text-decoration: underline; text-underline-offset: 3px }
.by > span { font-size: 14.5px; color: var(--c-ink2) }
.pc-meta .acts { margin-left: auto }
.pc-plate .abtn { background: var(--on-plate); color: var(--c-ink) }
.pc-plate .abtn:hover { background: var(--sheet) }


.pcover { margin: -64px 30px 0; padding: 0; display: block; position: relative; z-index: 1 }
.cover-ph { aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; background: var(--chip); box-shadow: var(--photo-sh) }
.cover-ph img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-f) }
.pcover figcaption { padding: 10px 4px 0; font-size: 14px; line-height: 1.35; color: var(--ink-2) }
.art-in { max-width: 700px; margin: 0 auto; padding: 30px 32px 0 }

.body { font-family: 'Charis SIL', Charter, Georgia, serif; font-size: 20px; line-height: 1.58; color: var(--ink);
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; font-kerning: normal }
.body > p { margin: 0 0 .95em }
.body > h2 { font: 800 27px/1.2 Onest, sans-serif; letter-spacing: -.02em; margin: 1.55em 0 .6em; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance }
.body > h2.step { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 1.7em }
.step-n { width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; background: var(--c-bg); color: var(--c-acc) }
.step-n .px { width: 30px; height: 42px }
.step-tx { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.step-l { font: 700 14px/1 Onest, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2) }
.body > ul { list-style: none; padding: 0; margin: 0 0 1.1em }
.body > ul li { position: relative; padding-left: 30px; margin: 0 0 .5em }
.body > ul li::before {
  content: ""; position: absolute; left: 7px; top: .62em; width: 3px; height: 3px; background: var(--mustard);
  box-shadow: 3px 0 var(--mustard), -3px 0 var(--mustard), 0 3px var(--mustard), 0 -3px var(--mustard);
}
.tip { margin: 1.5em 0; padding: 20px 24px 22px; border-radius: 22px; background: var(--tip); color: var(--tip-ink); font-family: Onest, sans-serif }
.tip-h { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -.005em; color: var(--tip-acc); margin-bottom: 8px }
.tip p { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 500 }

.body > h3 { font: 800 21px/1.25 Onest, sans-serif; letter-spacing: -.012em; margin: 1.35em 0 .45em; hyphens: manual; -webkit-hyphens: manual; text-wrap: balance }
.body > ol { list-style: none; padding: 0; margin: 0 0 1.1em; counter-reset: ol }
.body > ol li { position: relative; padding-left: 40px; margin: 0 0 .6em; counter-increment: ol }
.body > ol li::before { content: counter(ol); position: absolute; left: 0; top: .1em; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--c-bg); color: var(--c-ink); font: 800 14px/1 Onest, sans-serif }
.q cite { display: block; margin-top: 12px; font: 600 15px/1.35 Onest, sans-serif; font-style: normal; color: var(--c-ink2) }
.sum { margin: 1.9em 0 1.2em; padding: 22px 26px 16px; border-radius: 22px; background: var(--c-bg); color: var(--c-ink); font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual }
.sum-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 21px/1.2 Onest, sans-serif; letter-spacing: -.01em }
.sum ul { list-style: none; margin: 0; padding: 0 }
.sum li { position: relative; padding-left: 22px; margin: 0 0 .6em; font-size: 17.5px; line-height: 1.45; font-weight: 500 }
.sum li::before { content: ""; position: absolute; left: 3px; top: .58em; width: 7px; height: 7px; background: var(--c-acc) }
.body > .note { margin: 1.2em 0; font: 500 15px/1.45 Onest, sans-serif; color: var(--ink-2) }
.srcs { margin: 1.6em 0 .4em; padding-top: 16px; border-top: 1.5px solid var(--line); font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual }
.srcs-h { margin: 0 0 10px; font: 800 14px/1.2 Onest, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2) }
.srcs ol { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.4; color: var(--ink-2) }
.srcs li { margin: 0 0 7px }
.srcs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; overflow-wrap: anywhere }
.srcs li span { margin-left: 6px; font-size: 13.5px }


.q { margin: 1.7em -40px; padding: 30px 40px 32px; border-radius: 26px; background: var(--c-bg); color: var(--c-ink); position: relative }
.q .pC { fill: var(--c-acc) }
.q p { margin: 16px 0 0; font: 800 31px/1.22 Onest, sans-serif; letter-spacing: -.022em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual }


.inl {
  display: block; margin: 1.6em 0; padding: 16px 18px 18px; border-radius: 22px; background: var(--soft); border: 1.5px solid var(--line);
  font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual; transition: border-color .2s, background-color .2s;
}
.inl:hover { border-color: var(--chip-h) }
.inl-l { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 14px/1 Onest, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2) }
.inl-l .px { width: 16.5px; height: 16.5px }
.inl-in { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center }
.inl .ph { aspect-ratio: 3 / 2; border-radius: 14px }
.inl-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0 }
.inl .tt { font-size: 19px; line-height: 1.25; font-weight: 800 }

.body .ad { margin: 1.7em 0 1.8em; font-family: Onest, sans-serif }
.body .ad-box { height: 280px }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 80px }
.share-l { font-weight: 800; font-size: 18px; margin-right: 6px; letter-spacing: -.01em }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px }


.also { background: var(--c-bg); color: var(--c-ink); padding: 24px 28px 28px; box-shadow: none }
.also .sh h2 { font-size: 28px; font-weight: 900; letter-spacing: -.028em; gap: 12px }
.also .sh-note { color: var(--c-ink2); font-weight: 600; text-align: right }
.also .sh-note:hover { text-decoration: underline; text-underline-offset: 3px }
.also-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
.ac { display: flex; flex-direction: column; min-width: 0 }
.ac .ph { aspect-ratio: 3 / 2; border-radius: 16px; background: var(--on-plate) }
.ac .tx { display: flex; flex-direction: column; gap: 9px; padding-top: 13px }
.ac .tt { font-size: 18px; line-height: 1.26 }
.also .meta { color: var(--c-ink2) }

.aside { display: flex; flex-direction: column; gap: 20px; min-width: 0 }
.aside .panel { padding: 22px 22px 12px }
.aside .sh h2 { font-size: 22px; gap: 9px }
.aside .sh .px { width: 22px; height: 22px }
.ad-sticky { position: sticky; top: 16px }
.ad-tall .ad-box { width: 300px; height: 600px; background: var(--sheet); border-color: var(--ad-line) }
.ad-tall .ad-lbl { margin-left: 6px }

.more { grid-column: 1 / -1; margin-top: 12px }


.stick {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  background: color-mix(in srgb, var(--sheet) 95%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 26px -14px rgba(40, 20, 25, .22);
  transform: translateY(-105%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s .28s;
}
.stick.on { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s }
.stick-in { max-width: 1440px; margin: 0 auto; height: 60px; padding: 0 32px; display: flex; align-items: center; gap: 12px }
.stick-logo { flex: none; display: grid; place-items: center; width: 30px }
.stick-logo img { height: 40px; width: auto }
.stick-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--c-bg); flex: none; margin-left: 10px }
.stick-ic .px { width: 18px; height: 18px }
.stick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.stick-r { font-size: 13px; font-weight: 600; line-height: 1; color: var(--ink-2) }
.stick-t b { font-size: 16.5px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.stick-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-acc); transform-origin: 0 50%; transform: scaleX(var(--p, 0)) }




.art.fmt-bio { padding-top: 10px }
.bio-ph { margin: 0 }
.bio-ph .cover-ph { position: relative; aspect-ratio: 3 / 2; border-radius: 22px; box-shadow: none }

.bio-ph .cover-ph::before, .bio-ph .cover-ph::after {
  content: ""; position: absolute; z-index: 1; width: 48px; height: 48px; background: var(--c-bg); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0H8V1H7V2H6V3H5V4H4V5H3V6H2V7H1V8H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 0H8V1H7V2H6V3H5V4H4V5H3V6H2V7H1V8H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.bio-ph .cover-ph::before { top: 0; left: 0 }
.bio-ph .cover-ph::after { right: 0; bottom: 0; transform: rotate(180deg) }
.bio-ph figcaption { padding: 10px 8px 0; font-size: 14px; line-height: 1.35; color: var(--ink-2) }
.pc-plate.bio-plate { margin-top: 12px; padding: 26px 44px 28px }
.bio-plate .lead { margin-bottom: 22px }

.bio-facts {
  margin: 0 0 22px; display: grid; grid-template-columns: max-content minmax(0, 1fr);
  border-radius: 18px; background: var(--on-plate); overflow: hidden;
}
.bio-facts > div { padding: 15px 22px 16px; min-width: 0 }
.bio-facts .bf-b { border-left: 1.5px solid var(--plate-line) }
.bio-facts .bf-k { grid-column: 1 / -1; border-top: 1.5px solid var(--plate-line) }
.bio-facts dt { margin: 0 0 7px; font: 700 14px/1.2 Onest, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink2) }
.bio-facts dd { margin: 0; font: 600 17.5px/1.4 Onest, sans-serif; color: var(--c-ink) }
.bio-facts .bf-y dd { font: 900 32px/1.02 Onest, sans-serif; letter-spacing: -.025em; white-space: nowrap; font-variant-numeric: tabular-nums }

.tl {
  margin: 1.8em 0 .4em; padding: 24px 28px 14px; border-radius: 24px; background: var(--c-bg); color: var(--c-ink);
  font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual;
}
.tl-h { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; font: 900 27px/1.1 Onest, sans-serif; letter-spacing: -.024em }
.tl-h .px { width: 26px; height: 26px }
.tl-list { list-style: none; margin: 0; padding: 0; position: relative }
.tl-list::before {
  content: ""; position: absolute; left: 6px; top: 24px; bottom: 30px; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--c-acc) 0 6px, transparent 6px 12px);
}
.tl-list li { position: relative; display: grid; grid-template-columns: 15px 84px minmax(0, 1fr); column-gap: 18px; align-items: baseline; padding: 12px 0 }
.tl-mk { align-self: start; margin-top: 4px; padding: 3px 0; background: var(--c-bg); color: var(--c-acc); position: relative; z-index: 1 }
.tl-y { font: 900 28px/1 Onest, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.tl-e { font: 500 17.5px/1.45 Onest, sans-serif }

.bios .bc .ph { aspect-ratio: 4 / 3 }
.bios .tx { gap: 7px }
.bc-y { font: 800 14px/1 Onest, sans-serif; letter-spacing: .05em; color: var(--c-ink2); font-variant-numeric: tabular-nums }
.bios .tt { font-size: 21px; line-height: 1.15; font-weight: 900; letter-spacing: -.02em }
.bc-s { font-size: 15.5px; line-height: 1.4; color: var(--c-ink2) }


.vd { margin: 0 0 1.5em; border-radius: 24px; overflow: hidden; background: var(--vd-bg); color: var(--vd-ink); font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual }
.vd-myth   { --vd-bg: var(--no-bg);  --vd-ink: var(--no-ink);  --vd-band: var(--no-band);  --vd-on: var(--band-ink) }
.vd-truth  { --vd-bg: var(--ok-bg);  --vd-ink: var(--ok-ink);  --vd-band: var(--ok-band);  --vd-on: var(--band-ink) }
.vd-partly { --vd-bg: var(--mid-bg); --vd-ink: var(--mid-ink); --vd-band: var(--mid-band); --vd-on: var(--mid-band-ink) }
.vd-band { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--vd-band); color: var(--vd-on) }

.vd-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: repeating-linear-gradient(90deg, var(--vd-band) 0 6px, transparent 6px 12px) }
.vd-ic { width: 62px; height: 62px; border-radius: 17px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--vd-on) 15%, transparent) }
.vd-ic .px { width: 36px; height: 36px }
.vd-hd { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.vd-k { font: 700 14px/1 Onest, sans-serif; letter-spacing: .09em; text-transform: uppercase }
.vd-l { font: 900 36px/1 Onest, sans-serif; letter-spacing: -.03em }
.vd-tx { margin: 0; padding: 24px 26px 22px; font: 500 18.5px/1.5 Onest, sans-serif }


.pcn { margin: 1.5em 0 1.6em; font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual }
.pcn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.pcn-col { border-radius: 22px; padding: 18px 20px 10px; background: var(--x-bg); color: var(--x-ink) }
.pcn-pro { --x-bg: var(--ok-bg); --x-ink: var(--ok-ink); --x-acc: var(--ok-acc); --x-band: var(--ok-band) }
.pcn-con { --x-bg: var(--no-bg); --x-ink: var(--no-ink); --x-acc: var(--no-acc); --x-band: var(--no-band) }
.pcn-h { display: flex; align-items: center; gap: 11px; margin: 0 0 6px; font: 900 25px/1 Onest, sans-serif; letter-spacing: -.02em }
.pcn-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--x-band); color: var(--band-ink) }
.pcn-col ul { list-style: none; margin: 0; padding: 0 }
.pcn-col li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; padding: 11px 0; font: 500 17.5px/1.42 Onest, sans-serif }
.pcn-col li + li { border-top: 1.5px solid color-mix(in srgb, var(--x-ink) 12%, transparent) }
.pcn-col li .px { margin-top: .42em; color: var(--x-acc) }
.pcn-sum { margin-top: 12px; padding: 20px 24px 22px; border-radius: 22px; background: var(--sum-bg); color: var(--sum-ink) }
.pcn-sum-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; font: 800 15px/1 Onest, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--sum-acc) }
.pcn-sum p { margin: 0; font: 600 19px/1.45 Onest, sans-serif }


.quiz {
  margin: 0 0 1.6em; padding: 22px 26px 24px; border-radius: 26px; background: var(--c-bg); color: var(--c-ink);
  font-family: Onest, sans-serif; hyphens: manual; -webkit-hyphens: manual;
}
.qz-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px }
.qz-badge { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 11px; border-radius: 999px; background: var(--c-ink); color: var(--c-bg); font: 800 15px/1 Onest, sans-serif }
.qz-badge .px { width: 12px; height: 18px }
.qz-cnt { font: 600 15px/1 Onest, sans-serif; color: var(--c-ink2) }
.qz-intro { margin: 14px 0 0; font: 500 18px/1.5 Onest, sans-serif }
.qz-prog { display: flex; gap: 6px; margin-top: 20px }
.qz-seg { flex: 1; height: 10px; background: var(--on-plate); transition: background-color .25s }
.qz-seg.done { background: var(--c-acc) }
.qz-seg.cur { background: color-mix(in srgb, var(--c-acc) 38%, transparent) }
.qz-stage { margin-top: 18px; scroll-margin-top: 90px }
.qz-step { margin: 0 0 9px; font: 700 14px/1 Onest, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink2) }
.qz-q { margin: 0 0 18px; font: 800 27px/1.18 Onest, sans-serif; letter-spacing: -.022em; text-wrap: balance }
.qz-q:focus, .qz-res-t:focus { outline: none }
.qz-opts { display: flex; flex-direction: column; gap: 10px }
.qz-o {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 66px; width: 100%;
  padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--sheet); color: var(--ink); text-align: left;
  font: 600 18px/1.35 Onest, sans-serif; box-shadow: 0 1px 2px rgba(60, 30, 35, .06);
  transition: transform .15s ease, background-color .2s, color .2s, box-shadow .2s, opacity .2s;
}
.qz-o:hover { box-shadow: inset 0 0 0 2px var(--c-ink) }
.qz-o:active { transform: scale(.985) }
.qz-l { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--c-bg); color: var(--c-ink); font: 900 18px/1 Onest, sans-serif; transition: background-color .2s, color .2s }
.qz-o[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); box-shadow: none }
.qz-o[aria-pressed="true"] .qz-l { background: var(--c-bg); color: var(--c-ink) }
.qz-o:disabled { cursor: default }
.qz-o:disabled:not([aria-pressed="true"]) { opacity: .5 }
.qz-back {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; margin-top: 14px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--on-plate); color: var(--c-ink); font: 700 15.5px/1 Onest, sans-serif; transition: background-color .2s;
}
.qz-back:hover { background: var(--sheet) }
.qz-res { padding: 6px 0 2px; text-align: center }
.qz-res-ic { width: 100px; height: 100px; margin: 0 auto 16px; border-radius: 28px; display: grid; place-items: center; background: var(--on-plate) }
.qz-res-ic .px { width: 55px; height: 55px }
.qz-res-k { margin: 0; font: 700 14px/1.3 Onest, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink2) }
.qz-res-t { margin: 10px auto 12px; max-width: 18em; font: 900 34px/1.06 Onest, sans-serif; letter-spacing: -.03em; text-wrap: balance }
.qz-res-p { margin: 0 auto; max-width: 30em; font: 500 18px/1.5 Onest, sans-serif }
.qz-res-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px }
.qbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px 0 20px; border-radius: 999px;
  background: var(--c-ink); color: var(--c-bg); font: 800 17px/1 Onest, sans-serif; transition: transform .15s, background-color .2s;
}
.qbtn.alt { background: var(--sheet); color: var(--ink) }
.qbtn:active { transform: scale(.97) }

.qz-opts .qz-o.ok { background: rgba(63, 125, 83, .16); color: var(--ink); box-shadow: inset 0 0 0 2px #3F7D53; opacity: 1 }
.qz-opts .qz-o.ok .qz-l { background: #3F7D53; color: #fff }
.qz-opts .qz-o.bad { background: rgba(168, 65, 62, .14); color: var(--ink); box-shadow: inset 0 0 0 2px #A8413E }
.qz-opts .qz-o.bad .qz-l { background: #A8413E; color: #fff }
.qz-fb { margin-top: 14px; padding: 16px 18px 18px; border-radius: 18px; background: var(--sheet); color: var(--ink) }
.qz-fb-k { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font: 800 17px/1.2 Onest, sans-serif }
.qz-fb.is-ok .qz-fb-k { color: #3F7D53 }
.qz-fb.is-bad .qz-fb-k { color: #A8413E }
.qz-fb-t { margin: 0 0 14px; font: 500 17px/1.5 Onest, sans-serif }
.qz-next .px { width: 14px; height: 12px }
:root[data-theme="dark"] .qz-fb.is-ok .qz-fb-k { color: #8FC79F }
:root[data-theme="dark"] .qz-fb.is-bad .qz-fb-k { color: #E59A92 }


.ftr { padding: 8px 0 32px }
.ftr-sheet { background: var(--sheet); border-radius: var(--r-xl); padding: 30px 32px 26px; box-shadow: var(--shadow); transition: background-color .25s }
.ftr-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--line) }
.ftr-brand { max-width: 440px }
.ftr-brand p { margin: 14px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5 }
.logo-f { width: auto }
.ftr-rubs { display: grid; grid-template-columns: repeat(3, auto); gap: 12px 30px; align-content: start }
.ftr-rubs a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px }
.ftr-rubs a:hover, .ftr-links a:hover { color: var(--link) }
.ftr-links { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 18px 0; font-size: 15.5px; font-weight: 500 }
.ftr-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--ink-2) }
.ftr-bot .copy { margin-left: auto }
.age { font: 800 13px/1 Onest, sans-serif; color: var(--ink); border: 2px solid currentColor; border-radius: 8px; padding: 4px 6px 3px }


.tabs { display: none }


@media (max-width: 1439px) {
  .cv-tt { font-size: 56px }
}

@media (max-width: 1279px) {
  .wrap { padding: 0 24px }
  .shell { grid-template-columns: minmax(0, 1fr) }
  .side { display: none }
  .logo { width: auto; margin-right: 6px }
  .rubrow { display: block }
  .rubrow-in { padding: 0 24px 14px }
  .search { flex-basis: 240px }
  .cv-tt { font-size: 54px }
  .stick-in { padding: 0 24px }
  .rtiles.big { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}

@media (max-width: 1023px) {
  .wrap { padding: 0 }
  .hdr { padding: 6px 0 }
  .hdr-in { height: 44px; padding: 0 10px 0 14px; gap: 8px }
  .logo { gap: 7px; margin-right: 2px }
  .logo-ic { width: 28px; height: 40px }
  .logo-ic img { height: 37px }
  .logo-tx b { font-size: 23px }
  .logo-tx i { font-size: 12.7px; margin-top: 2px }
  .pills { display: none }
  .search { flex: 1 1 auto; margin-left: 6px }
  .search label { height: 42px; padding: 0 14px; gap: 8px }
  .ibtn { width: 42px; height: 42px }
  .burger { display: grid }
  .rubrow-in { padding: 4px 8px 10px; gap: 6px }
  .chip { height: 40px; font-size: 15px }
  body.pg-post .rubrow { display: none }

  .shell { padding-top: 0; max-width: 720px; margin: 0 auto }
  .main { gap: 8px; padding-bottom: 8px }
  .sheet { border-radius: var(--r-l) }
  .ftr-sheet { border-radius: var(--r-l) }
  .sh { margin-bottom: 14px }
  .sh h2 { font-size: 24px; gap: 10px }
  .sh .px { width: 24px; height: 24px }
  .sh-out { margin: 14px 16px 10px }
  .sh-out h2 { font-size: 26px }
  .panel { padding: 20px 16px 16px }
  .card:hover, .tall:hover { transform: none }

  
  .cover { grid-template-columns: minmax(0, 1fr); padding: 8px }
  .cv-plate { padding: 16px 16px 84px; border-radius: 18px }
  .cv-flag { height: 30px; font-size: 14px }
  .cv-tt { font-size: 34px; line-height: 1.04; letter-spacing: -.032em; margin-top: 20px; max-width: none }
  .cv-meta { margin-top: 16px; max-width: none; font-size: 14px }
  .cv-art { top: 10px; right: 12px }
  .cv-art .px { width: 48px; height: 48px }
  .cv-ph { grid-column: 1; grid-row: 2; margin: -66px 14px 0; border-radius: 16px }
  .cv-ft { grid-column: 1; grid-row: 3; padding: 16px 8px 6px; gap: 16px }
  .cv-lead { font-size: 17px }
  .cv-lines .tt { font-size: 16.5px }

  
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .bento .big, .bento .wide { grid-column: 1 / -1; grid-row: auto }
  .pc { padding: 6px; border-radius: 22px }
  .pc .ph { border-radius: 16px }
  .pc .tx { padding: 11px 6px 8px; gap: 8px }
  .pc .tt { font-size: 16.5px; line-height: 1.25 }
  .pc.big { padding: 8px }
  .pc.big .ph { aspect-ratio: 3 / 2; min-height: 0; flex: none }
  .pc.big .tx { padding: 14px 8px 8px }
  .pc.big .tt { font-size: 24px; line-height: 1.13 }
  .pc.big .ld { font-size: 16px }
  .ill { min-height: 0; padding: 15px 14px 13px; gap: 14px; border-radius: 22px }
  .ill-tx { gap: 10px }
  .ill .tt { font-size: 17.5px; line-height: 1.2 }
  .ill-art .px { width: 60px; height: 60px }
  .ill-m { font-size: 14px }
  .bento .pc:not(.big) .meta .sep { display: none }
  .ill.wide { display: flex; padding: 18px 16px 15px }
  .ill.wide .ill-ft { display: flex }
  .ill.wide .tt { font-size: 23px; line-height: 1.13 }
  .ill.wide .ld { font-size: 16px }
  .ill.wide .ill-art { margin: 0 }
  .ill.wide .ill-art .px { width: 72px; height: 72px }
  .tipc { padding: 18px 18px 16px; border-radius: 22px }
  .tipc-q { font-size: 19.5px }

  
  .popx { grid-template-columns: minmax(0, 1fr) }
  .popx li + li { border-left: 0; border-top: 1px solid var(--line) }
  .popx a, .popx li:first-child a, .popx li:last-child a { flex-direction: row; align-items: flex-start; gap: 16px; padding: 14px 0 }
  .popx li:first-child a { padding-top: 2px }
  .popx .n .px { width: 35px; height: 49px }
  .popx .pop-tx { padding-top: 2px }
  .popx-sec .sh-note { display: none }

  
  .shelf-sec { padding: 22px 0 20px; border-radius: var(--r-l) }
  .shelf-h { padding: 0 16px; margin-bottom: 16px }
  .shelf-h h2 { font-size: 26px; margin: 10px 0 6px }
  .shelf-h p { font-size: 15.5px }
  .shelf-nav { display: none }
  .shelf { gap: 10px; padding: 2px 16px 4px; scroll-padding: 0 16px }
  .shelf::after { flex-basis: 6px }
  .tall { width: 218px; min-height: 380px; border-radius: 20px }
  .tall .ph { height: 196px }
  .tl-tx { padding: 14px 14px 14px; gap: 8px }
  .tall .tt { font-size: 17.5px }

  
  .spread { padding: 8px 8px 6px; border-radius: var(--r-l) }
  .sp-h { gap: 12px; padding: 16px 14px 16px 18px; margin-bottom: 14px; border-radius: 18px }
  .spread .sp-ic .px { width: 60px; height: 60px }
  .sp-tt h2 { font-size: 31px }
  .sp-tt p { font-size: 15px; margin-top: 6px }
  .sp-body { display: block; padding: 0 8px }
  .sp-big .ph { border-radius: 16px }
  .sp-big .tx { padding: 14px 2px 18px }
  .sp-big .tt { font-size: 23px; line-height: 1.14 }
  .sp-big .ld { font-size: 16px }
  .spread .rows { border-top: 1.5px solid var(--sp-line) }
  .spread .rows .row:first-child { padding-top: 16px }
  .spread .row { grid-template-columns: minmax(0, 1fr) 108px; gap: 14px; padding: 16px 0 }
  .spread .row .tt { font-size: 17px; line-height: 1.28 }
  .spread .row .ph { border-radius: 14px }
  body.sec-full .spread { padding: 18px 16px 10px }
  body.sec-full .sp-h { gap: 14px; padding: 0 0 16px; margin-bottom: 16px }
  body.sec-full .spread .sp-ic { width: 58px; height: 58px; border-radius: 17px }
  body.sec-full .spread .sp-ic .px { width: 36px; height: 36px }

  .adsheet { padding: 14px 16px 16px }
  .adsheet .ad-box { height: 280px; max-width: 336px; margin: 0 auto }
  .adsheet .ad-lbl { text-align: center; margin-left: 0 }

  .sub { grid-template-columns: auto minmax(0, 1fr); padding: 22px 16px 20px; gap: 16px 14px }
  .sub-ic { width: 56px; height: 56px; border-radius: 17px; align-self: start }
  .sub-ic .px { width: 33px; height: 33px }
  .sub h2 { font-size: 23px }
  .sub p { font-size: 16px }
  .sub-btns { grid-column: 1 / -1 }
  .sub-btns, .share-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
  .sub-btns .sbtn, .share-btns .sbtn { flex-direction: column; justify-content: center; gap: 7px; height: auto; padding: 12px 4px 11px; border-radius: 20px; font-size: 14px; letter-spacing: -.01em; text-align: center }
  .sub-btns .sbtn:hover, .share-btns .sbtn:hover { transform: none }
  .sz-d { display: none } .sz-m { display: inline }

  .rtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .rtile { padding: 14px 14px 15px; gap: 10px; border-radius: 22px }
  .rtile-ic { width: 46px; height: 46px; border-radius: 14px }
  .rtile-t { font-size: 18px }
  .rtile-go { top: 16px; right: 14px }
  .rtile:hover { transform: none }
  .rtiles.big { grid-template-columns: minmax(0, 1fr) }
  .rtiles.big .rtile { grid-template-columns: 58px minmax(0, 1fr); gap: 12px 14px; padding: 16px 16px 16px }
  .rtiles.big .rtile-ic { width: 58px; height: 58px; border-radius: 17px }
  .rtiles.big .rtile-ic .px { width: 36px; height: 36px }
  .rtiles.big .rtile-t { font-size: 24px }
  .rtiles.big .rtile-go { top: 20px; right: 16px }
  .rtiles > .rtile:last-child:nth-child(4n+3) { grid-column: auto }
  .rtiles > .rtile:last-child:nth-child(odd) { grid-column: 1 / -1 }
  .rtiles.home { gap: 8px }
  .rtiles.home .rtile { min-height: 0; flex-direction: row; align-items: center; gap: 11px; padding: 10px 10px 10px 10px; border-radius: 20px }
  .rtiles.home .rtile-ic { width: 44px; height: 44px; border-radius: 13px }
  .rtiles.home .rtile-ic .px { width: 26px; height: 26px }
  .rtiles.home .rtile-t { font-size: 16.5px; line-height: 1.2; letter-spacing: -.012em }
  .rtiles.home .rtile-d { display: none }
  .rtiles.home .rtile-go { display: none }

  
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .post-col { gap: 8px }
  .aside { display: none }
  .art { padding: 8px 8px 28px }
  .pc-plate { padding: 14px 16px 72px; border-radius: 18px }
  .rtag-w { height: 34px; font-size: 14.5px }
  .pc-fmt { line-height: 34px }
  .pc-art { margin-top: -2px }
  .pc-art .px { width: 48px; height: 48px }
  .art h1 { font-size: 31px; line-height: 1.08; letter-spacing: -.028em; margin: 12px 0 12px }
  .lead { font-size: 18.5px; line-height: 1.45; margin-bottom: 18px }
  .pc-meta { padding-top: 14px; gap: 10px }
  .ava { width: 42px; height: 42px; font-size: 14px }
  .by b { font-size: 15.5px }
  .by > span { font-size: 14px }
  .pcover { margin: -52px 14px 0 }
  .cover-ph { border-radius: 16px }
  .pcover figcaption { padding: 8px 2px 0 }
  .art-in { padding: 22px 12px 0 }
  .body { font-size: 18.5px; line-height: 1.6 }
  .body > h2 { font-size: 23px; margin: 1.4em 0 .55em }
  .body > h2.step { grid-template-columns: 56px minmax(0, 1fr); gap: 14px }
  .step-n { width: 56px; height: 56px; border-radius: 17px }
  .step-n .px { width: 25px; height: 35px }
  .tip { padding: 16px 18px 18px; border-radius: 20px; margin: 1.3em -4px }
  .tip p { font-size: 17.5px }
  .body > h3 { font-size: 19.5px }
  .sum { padding: 18px 18px 10px; border-radius: 20px; margin: 1.6em -4px 1em }
  .sum-h { font-size: 19px }
  .sum li { font-size: 17px }
  .qz-fb-t { font-size: 16.5px }
  .q { padding: 20px 20px 22px; border-radius: 22px; margin: 1.4em -4px }
  .q p { font-size: 23px; line-height: 1.25; margin-top: 12px }
  .inl { margin: 1.4em -4px; padding: 14px 14px 14px; border-radius: 20px }
  .inl-in { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start }
  .inl .ph { aspect-ratio: 4 / 3 }
  .inl .tt { font-size: 17px; line-height: 1.26 }
  .body .ad-box { max-width: 336px; height: 280px; margin: 0 auto }
  .body .ad-lbl { text-align: center; margin-left: 0 }
  .share { gap: 8px; margin-top: 26px; padding-top: 20px }
  .share-l { flex-basis: 100%; margin: 0 0 4px }

  .also { padding: 20px 16px 10px }
  .also .sh { flex-wrap: wrap; gap: 6px 12px }
  .also .sh h2 { font-size: 24px }
  .also .sh-note { text-align: left; font-size: 14.5px }
  .also-grid { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .ac { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 14px; align-items: start; padding: 16px 0 }
  .ac:first-child { padding-top: 4px }
  .ac + .ac { border-top: 1px solid var(--plate-line) }
  .ac .ph { order: 2; aspect-ratio: 4 / 3; border-radius: 14px }
  .ac .tx { padding: 0; gap: 8px }
  .ac .tt { order: -1; font-size: 17px; line-height: 1.28 }

  .more { margin-top: 2px }

  .stick-in { height: 54px; padding: 0 8px 0 14px; gap: 10px }
  .stick-logo { width: 24px }
  .stick-logo img { height: 34px }
  .stick-ic { display: none }
  .stick-t b { font-size: 15px }
  .stick-up { display: none }

  .ftr { padding: 8px 0 16px }
  .ftr-sheet { padding: 24px 18px 22px }
  .ftr-top { gap: 20px }
  .ftr-rubs { grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 28px }
  .ftr-links { flex-direction: column; gap: 10px }
  .ftr-bot .copy { margin-left: 0; flex-basis: 100% }

  
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(58px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--sheet) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-radius: 20px 20px 0 0; box-shadow: 0 -1px 0 var(--line), 0 -10px 28px -12px rgba(40, 20, 25, .18);
  }
  .tabs a, .tabs button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font: 600 12px/1 Onest, sans-serif; color: var(--ink-2); transition: color .2s;
  }
  .tabs .on { color: var(--link) }
  .tabs .px { width: 24px; height: 24px }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)) }
}


@media (max-width: 1023px) {
  .art.fmt-bio { padding-top: 8px }
  .bio-ph .cover-ph { aspect-ratio: 4 / 3; border-radius: 18px }
  .bio-ph .cover-ph::before, .bio-ph .cover-ph::after { width: 32px; height: 32px }
  .bio-ph figcaption { padding: 8px 6px 0 }
  .pc-plate.bio-plate { margin-top: 10px; padding: 16px 16px 18px; border-radius: 18px }
  .bio-plate .lead { margin-bottom: 18px }
  .bio-facts { grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; border-radius: 16px }
  .bio-facts > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 14px 12px }
  .bio-facts .bf-k { display: block }
  .bio-facts .bf-k dt { margin-bottom: 5px }
  .bio-facts .bf-b { border-left: 0; border-top: 1.5px solid var(--plate-line) }
  .bio-facts dt { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none }
  .bio-facts .bf-y dd { font-size: 24px }
  .bio-facts dd { font-size: 16.5px }

  .tl { margin: 1.5em -4px .4em; padding: 18px 16px 8px; border-radius: 22px }
  .tl-h { font-size: 23px; margin-bottom: 6px }
  .tl-list::before { top: 20px; bottom: 24px }
  .tl-list li { grid-template-columns: 15px minmax(0, 1fr); column-gap: 14px; row-gap: 5px; padding: 10px 0 }
  .tl-mk { grid-row: 1 / 3; margin-top: 2px }
  .tl-y { grid-column: 2; font-size: 24px }
  .tl-e { grid-column: 2; font-size: 17px }

  .bios .ac .tt { order: 0; font-size: 19px }
  .bios .ac .ph { aspect-ratio: 1 / 1 }
  .bc-s { font-size: 15px }

  .vd { margin: 0 -4px 1.3em; border-radius: 22px }
  .vd-band { gap: 14px; padding: 14px 16px }
  .vd-ic { width: 54px; height: 54px; border-radius: 15px }
  .vd-ic .px { width: 30px; height: 30px }
  .vd-l { font-size: 29px }
  .vd-tx { padding: 20px 18px 18px; font-size: 17.5px }

  .pcn { margin: 1.4em -4px 1.5em }
  .pcn-cols { grid-template-columns: minmax(0, 1fr); gap: 8px }
  .pcn-col { padding: 16px 16px 8px; border-radius: 20px }
  .pcn-h { font-size: 23px }
  .pcn-col li { font-size: 17px }
  .pcn-sum { margin-top: 8px; padding: 18px 18px 20px; border-radius: 20px }
  .pcn-sum p { font-size: 17.5px }

  .quiz { margin: 0 -4px 1.4em; padding: 18px 14px 16px; border-radius: 22px }
  .qz-intro { font-size: 17px }
  .qz-prog { margin-top: 16px; gap: 5px }
  .qz-q { font-size: 23px; margin-bottom: 14px }
  .qz-o { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; min-height: 62px; padding: 11px 14px 11px 10px; font-size: 17.5px; border-radius: 16px }
  .qz-o:hover { box-shadow: 0 1px 2px rgba(60, 30, 35, .06) }
  .qz-l { width: 38px; height: 38px; font-size: 17px }
  .qz-res-ic { width: 88px; height: 88px; border-radius: 24px }
  .qz-res-ic .px { width: 44px; height: 44px }
  .qz-res-t { font-size: 29px }
  .qz-res-p { font-size: 17px }
  .qz-res-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
}

@media (min-width: 600px) and (max-width: 1023px) {
  .cv-tt { font-size: 46px }
  .art h1 { font-size: 40px }
  .pc.big .tt { font-size: 30px }
}

@media (max-width: 420px) {
  .cv-tt { font-size: 32px }
  .art h1 { font-size: 30px }
}


@media (max-width: 380px) {
  .rtiles.home .rtile { gap: 9px; padding: 9px 8px 9px 9px }
  .rtiles.home .rtile-ic { width: 38px; height: 38px; border-radius: 12px }
  .rtiles.home .rtile-ic .px { width: 23px; height: 23px }
  .rtiles.home .rtile-t { font-size: 15.5px }
}


.cookie { position: fixed; left: 50%; bottom: 20px; z-index: 50; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); display: flex; align-items: center; gap: 18px;
  padding: 14px 14px 14px 20px; border-radius: var(--r-l); background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(40, 20, 25, .35) }
.cookie p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2) }
.cookie a { color: var(--link); text-decoration: underline; text-underline-offset: 3px }
.cookie button { flex: none; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: var(--sheet); font: 800 15px/1 Onest, sans-serif; cursor: pointer }
@media (max-width: 1023px) { .cookie { bottom: calc(58px + env(safe-area-inset-bottom) + 10px) } }
@media (max-width: 520px) { .cookie { gap: 12px; padding: 12px 12px 12px 16px } .cookie p { font-size: 13.5px; line-height: 1.4 } .cookie button { height: 40px; padding: 0 16px; font-size: 14px } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}