/* ==========================================================================
   OOBLOG - "Aurora" editorial blog skin for DCR CMS
   --------------------------------------------------------------------------
   Deliberately different architecture from the other skins in this project:

     skin        wrapper classes   card block      layout technique
     ---------   ---------------   -------------   -------------------------
     blog        .nb-*             .nb-card        floats-ish flex
     hotblog     .hb-*             .hb-card        flex + gradients
     niceblog    .nc-*             .nc-card        grid, sticky sidebar
     shopify     .grid__item       .grid-view-item float grid (Dawn)
     ooblog      .o-*  (BEM)       .o-card        CSS Grid AREAS + container
                                                   queries + dark mode

   New here that no other skin has:
     - full dark mode via prefers-color-scheme
     - container queries for the card component
     - CSS Grid named template areas for every page shell (no flexbox hacks)
     - a colour-block accent section system
     - fluid type scale with clamp() throughout
     - motion-reduce + print + forced-colors friendly

   Sections
     01 Tokens (light)          09 Article card (.o-card, container query)
     02 Tokens (dark)           10 Article detail / prose
     03 Reset + type scale      11 Forms
     04 Helpers                 12 Pager + breadcrumb
     05 Shell: header           13 Custom blocks / news list
     06 Shell: drawer           14 Footer
     07 Shell: hero             15 Blog-mode kill switch
     08 Shell: main page grids  16 Responsive / a11y / print
   ========================================================================== */

/* ===== 01. Tokens (light) ============================================== */
:root {
  --o-bg: #f4f5f9;
  --o-surface: #ffffff;
  --o-surface-2: #eceef6;
  --o-surface-3: #e2e6f2;
  --o-ink: #16182b;
  --o-ink-2: #2b2f4a;
  --o-body: #454a68;
  --o-muted: #767c9c;
  --o-line: #dcdfec;
  --o-line-2: #e9ecf5;

  --o-accent: #4a3aff;
  --o-accent-2: #00b3a4;
  --o-accent-3: #ff5a8a;
  --o-accent-soft: #ecebff;
  --o-grad: linear-gradient(115deg, #4a3aff 0%, #7b4dff 45%, #ff5a8a 100%);

  --o-ok: #1f873d;
  --o-warn: #b45309;

  --o-r-sm: 8px;
  --o-r: 16px;
  --o-r-lg: 26px;
  --o-r-pill: 999px;

  --o-sh-1: 0 1px 2px rgba(22, 24, 43, .05), 0 8px 20px rgba(22, 24, 43, .06);
  --o-sh-2: 0 2px 6px rgba(22, 24, 43, .07), 0 22px 44px rgba(22, 24, 43, .12);
  --o-sh-3: 0 30px 70px rgba(74, 58, 255, .20);

  --o-display: "Futura", "Century Gothic", "Avenir Next", "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --o-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", Arial, sans-serif;

  --o-max: 1280px;
  --o-ease: cubic-bezier(.22, .68, .32, 1);
  --o-blob: 42% 58% 63% 37% / 45% 42% 58% 55%;
}

/* ===== 02. Tokens (dark) ============================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --o-bg: #0e1020;
    --o-surface: #171a2e;
    --o-surface-2: #1e2238;
    --o-surface-3: #262b45;
    --o-ink: #f2f3fb;
    --o-ink-2: #dfe1f2;
    --o-body: #c3c7de;
    --o-muted: #8b91b4;
    --o-line: #2c3252;
    --o-line-2: #242941;

    --o-accent: #8b7bff;
    --o-accent-2: #2fd4c4;
    --o-accent-3: #ff7ba3;
    --o-accent-soft: #232148;
    --o-grad: linear-gradient(115deg, #6d5cff 0%, #9a6bff 45%, #ff7ba3 100%);

    --o-sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .35);
    --o-sh-2: 0 2px 8px rgba(0, 0, 0, .45), 0 24px 50px rgba(0, 0, 0, .5);
    --o-sh-3: 0 30px 70px rgba(109, 92, 255, .35);
  }
}

/* ===== 03. Reset + fluid type scale =================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body.o-body {
  margin: 0;
  padding: 0;
  background: var(--o-bg);
  color: var(--o-body);
  font-family: var(--o-text);
  font-size: clamp(16px, .55vw + 14.6px, 17.5px);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.o-body img { max-width: 100%; height: auto; border: 0; }
body.o-body a { color: var(--o-accent); text-decoration: none; }
body.o-body a:hover { color: var(--o-accent-3); }
body.o-body ul, body.o-body ol { list-style: none; margin: 0; padding: 0; }
body.o-body table { border-collapse: collapse; }

/* scoped control reset: cannot outrank component rules */
body.o-body button:not([class]),
body.o-body input:not([class]),
body.o-body select:not([class]),
body.o-body textarea:not([class]) { font: inherit; color: var(--o-ink); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  color: var(--o-ink);
  font-family: var(--o-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.028em;
  text-wrap: balance;
  word-wrap: break-word;
}
h1 { font-size: clamp(2rem, 4.6vw + .6rem, 3.9rem); }
h2 { font-size: clamp(1.5rem, 2.6vw + .5rem, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.3vw + .5rem, 1.6rem); }
h4 { font-size: 1.0rem; letter-spacing: -.015em; }
h5, h6 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
p { margin: 0 0 1.1em; }

::selection { background: var(--o-accent); color: #fff; }
:focus-visible { outline: 3px solid var(--o-accent); outline-offset: 3px; border-radius: 4px; }

/* ===== 04. Helpers ==================================================== */
.o-shell {
  width: 100%;
  max-width: var(--o-max);
  margin-inline: auto;
  padding-inline: clamp(18px, 3.4vw, 40px);
}
.o-shell--tight { max-width: 880px; }
.o-main { display: block; }
.o-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.o-skip {
  position: absolute; left: 50%; top: -100px; z-index: 999;
  transform: translateX(-50%);
  padding: 12px 22px;
  background: var(--o-ink); color: var(--o-bg);
  border-radius: 0 0 var(--o-r) var(--o-r);
  transition: top .2s var(--o-ease);
}
.o-skip:focus { top: 0; color: var(--o-bg); }

.o-icon {
  width: 19px; height: 19px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.o-icon--sm { width: 15px; height: 15px; }
.o-icon--lg { width: 26px; height: 26px; }

.o-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--o-text);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--o-accent);
}
.o-eyebrow::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--o-grad);
  border-radius: 2px;
}

.o-lede { font-size: clamp(1rem, .5vw + .9rem, 1.18rem); color: var(--o-muted); }

/* ===== 05. Shell: header ============================================== */
.o-ticker {
  background: var(--o-ink);
  color: var(--o-bg);
  font-size: .82rem;
  letter-spacing: .02em;
}
.o-ticker__in {
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 0; text-align: center;
}
.o-ticker__in > * { margin: 0; }
.o-ticker a { color: var(--o-accent-2); text-decoration: underline; }
.o-ticker:empty { display: none; }

.o-header {
  position: sticky; top: 0; z-index: 70;
  background: color-mix(in srgb, var(--o-bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--o-line);
}
.o-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 76px;
  padding-block: 12px;
}
.o-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.o-brand img { max-height: 42px; width: auto; }
/* If the site has no logo configured the CMS still emits an <img> pointing at a
   file that does not exist. Fall back to a clean typographic wordmark instead
   of leaving an empty box in the header. */
.o-brand img:not([src]),
.o-brand img[src=""],
.o-brand img[src$="/"] { display: none; }
.o-brand__fallback {
  display: none;
  font-family: var(--o-display);
  font-size: 1.22rem; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--o-ink);
  white-space: nowrap;
}
.o-brand:has(img:not([src])) .o-brand__fallback,
.o-brand:has(img[src=""]) .o-brand__fallback { display: inline; }
.o-brand__mark {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 12px 12px 12px 4px;
  background: var(--o-grad);
  box-shadow: var(--o-sh-1);
}
.o-brand__name {
  font-family: var(--o-display);
  font-size: 1.22rem; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--o-ink);
  white-space: nowrap;
}
.o-brand:hover .o-brand__name { color: var(--o-accent); }

.o-nav { display: flex; align-items: center; gap: 2px; justify-content: center; }
.o-nav a {
  padding: 9px 14px;
  border-radius: var(--o-r-pill);
  color: var(--o-ink-2);
  font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  transition: background .18s var(--o-ease), color .18s var(--o-ease);
}
.o-nav a:hover { background: var(--o-accent-soft); color: var(--o-accent); }
.o-nav a.is-current { background: var(--o-ink); color: var(--o-bg); }

.o-tools { display: flex; align-items: center; gap: 8px; }
.o-tool {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-pill);
  background: var(--o-surface);
  color: var(--o-ink-2);
  cursor: pointer;
  transition: all .18s var(--o-ease);
}
.o-tool:hover { border-color: var(--o-accent); color: var(--o-accent); transform: translateY(-1px); }
.o-tool--menu { display: none; }

.o-search { display: none; padding-bottom: 16px; }
.o-search.is-open { display: block; animation: o-drop .22s var(--o-ease); }
@keyframes o-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.o-search__form {
  display: flex;
  max-width: 640px; margin-inline: auto;
  border: 1.5px solid var(--o-line);
  border-radius: var(--o-r-pill);
  background: var(--o-surface);
  overflow: hidden;
}
.o-search__form:focus-within { border-color: var(--o-accent); box-shadow: 0 0 0 4px var(--o-accent-soft); }
.o-search__form input {
  flex: 1 1 auto; min-width: 0;
  padding: 13px 22px;
  border: 0; outline: 0; background: transparent;
  color: var(--o-ink); font-size: .95rem;
}
.o-search__form button {
  flex: 0 0 auto;
  padding: 0 24px;
  border: 0; cursor: pointer;
  background: var(--o-ink);
  color: var(--o-bg) !important;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background .2s var(--o-ease);
}
.o-search__form button:hover { background: var(--o-accent); color: #fff !important; }

/* scrolling category rail - different from the wrap nav of the other skins */
.o-rail {
  border-top: 1px solid var(--o-line);
  background: var(--o-surface);
}
.o-rail__in { display: flex; align-items: center; gap: 14px; }
.o-rail__scroll {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0;
  padding: 9px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.o-rail__scroll::-webkit-scrollbar { display: none; }
.o-rail__scroll > li { position: relative; flex: 0 0 auto; scroll-snap-align: start; }
.o-rail__scroll > li > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-pill);
  background: var(--o-bg);
  color: var(--o-ink-2);
  font-size: .855rem; font-weight: 600;
  white-space: nowrap;
  transition: all .18s var(--o-ease);
}
.o-rail__scroll > li > a:hover { border-color: var(--o-accent); color: var(--o-accent); background: var(--o-accent-soft); }
.o-rail__scroll > li > a.is-current { background: var(--o-ink); border-color: var(--o-ink); color: var(--o-bg); }
.o-rail__scroll > li > a i, .o-rail__scroll > li > a .fa { display: none; }
.o-rail__scroll > li:has(> ul) > a::after {
  content: "";
  width: 5px; height: 5px; margin-left: 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .55;
}
.o-rail__all {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 700;
  color: var(--o-accent);
  white-space: nowrap;
}
.o-rail__all:hover { color: var(--o-accent-3); }

/* second-level popover (anchored to the pill) */
.o-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 95;
  min-width: 250px; max-width: 330px;
  padding: 10px;
  background: var(--o-surface);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r);
  box-shadow: var(--o-sh-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--o-ease), transform .2s var(--o-ease), visibility .2s;
}
.o-rail__scroll > li:hover > .o-pop,
.o-rail__scroll > li:focus-within > .o-pop { opacity: 1; visibility: visible; transform: none; }
.o-pop a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--o-r-sm);
  color: var(--o-ink-2);
  font-size: .875rem;
  line-height: 1.45;
  white-space: normal;
}
.o-pop a:hover { background: var(--o-accent-soft); color: var(--o-accent); }

/* ===== 06. Shell: drawer ============================================== */
.o-scrim {
  position: fixed; inset: 0; z-index: 900;
  background: color-mix(in srgb, var(--o-ink) 55%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--o-ease), visibility .3s;
}
.o-scrim.is-open { opacity: 1; visibility: visible; }

.o-drawer {
  position: fixed; inset-block: 0; right: 0; z-index: 1000;
  width: 340px; max-width: 90vw;
  display: flex; flex-direction: column;
  background: var(--o-surface);
  box-shadow: -10px 0 50px rgba(0, 0, 0, .22);
  transform: translateX(102%);
  transition: transform .36s var(--o-ease);
  overflow-y: auto;
}
.o-drawer.is-open { transform: none; }
.o-drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--o-line);
  position: sticky; top: 0;
  background: var(--o-surface);
  z-index: 2;
}
.o-drawer__mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px 9px 9px 3px;
  background: var(--o-grad);
}
.o-drawer__close {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--o-line); border-radius: var(--o-r-pill);
  background: transparent; color: var(--o-ink-2); cursor: pointer;
}
.o-drawer__close:hover { border-color: var(--o-accent-3); color: var(--o-accent-3); }
.o-drawer__meta { padding: 14px 22px; border-bottom: 1px solid var(--o-line-2); font-size: .875rem; }
.o-drawer__meta a { font-weight: 600; }
.o-drawer .language_currency { padding: 10px 22px; border-bottom: 1px solid var(--o-line-2); font-size: .875rem; }
.o-drawer .language_currency a { color: var(--o-ink-2); }
.o-drawer__nav { padding: 8px 0 44px; }
.o-drawer__nav > li { border-bottom: 1px solid var(--o-line-2); }
.o-drawer__nav > li > a {
  display: block; position: relative;
  padding: 14px 22px;
  color: var(--o-ink);
  font-family: var(--o-display);
  font-size: 1rem; font-weight: 700;
  letter-spacing: -.015em;
}
.o-drawer__nav > li > a:hover { color: var(--o-accent); }
.o-dnode.is-branch > a { padding-right: 54px; cursor: pointer; }
.o-dnode.is-branch > a::after {
  content: "";
  position: absolute; right: 24px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--o-muted);
  border-bottom: 2px solid var(--o-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .24s var(--o-ease);
}
.o-dnode.is-open > a::after { transform: translateY(-30%) rotate(-135deg); }
.o-dchildren { display: none; background: var(--o-bg); }
.o-dchildren a {
  display: block;
  padding: 11px 22px 11px 40px;
  border-top: 1px solid var(--o-line-2);
  color: var(--o-ink-2);
  font-size: .9rem;
}
.o-dchildren a:hover { color: var(--o-accent); background: var(--o-accent-soft); }

/* ===== 07. Shell: hero (colour-block, asymmetric) ===================== */
.o-hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 104px);
  background:
    radial-gradient(1100px 460px at 12% -8%, var(--o-accent-soft), transparent 62%),
    radial-gradient(900px 420px at 96% 4%, color-mix(in srgb, var(--o-accent-3) 16%, transparent), transparent 60%),
    var(--o-surface);
  border-bottom: 1px solid var(--o-line);
  overflow: hidden;
}
.o-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas: "copy art";
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}
.o-hero__copy { grid-area: copy; min-width: 0; }
.o-hero__art { grid-area: art; position: relative; min-height: 240px; }
/* organic blobs - nothing else in this project uses shapes like these */
.o-blob {
  position: absolute;
  border-radius: var(--o-blob);
  filter: blur(0.5px);
}
.o-blob--a {
  inset: 6% 18% 26% 4%;
  background: var(--o-grad);
  box-shadow: var(--o-sh-3);
  animation: o-float 14s ease-in-out infinite;
}
.o-blob--b {
  right: 2%; bottom: 4%;
  width: 44%; aspect-ratio: 1;
  background: color-mix(in srgb, var(--o-accent-2) 70%, transparent);
  mix-blend-mode: multiply;
  animation: o-float 18s ease-in-out infinite reverse;
}
@media (prefers-color-scheme: dark) {
  .o-blob--b { mix-blend-mode: screen; }
}
.o-blob--c {
  left: 0; bottom: 12%;
  width: 30%; aspect-ratio: 1;
  border: 3px solid var(--o-accent-3);
  border-radius: var(--o-blob);
  background: transparent;
  animation: o-float 22s ease-in-out infinite;
}
@keyframes o-float {
  0%, 100% { border-radius: 42% 58% 63% 37% / 45% 42% 58% 55%; transform: translateY(0) rotate(0deg); }
  50% { border-radius: 58% 42% 37% 63% / 55% 58% 42% 45%; transform: translateY(-14px) rotate(3deg); }
}

.o-hero__title { margin: 0 0 18px; }
.o-hero__title span {
  background: var(--o-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.o-hero__lede { max-width: 56ch; margin-bottom: 28px; }
.o-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.o-hero__facts {
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--o-line);
}
.o-fact { min-width: 120px; }
.o-fact b {
  display: block;
  font-family: var(--o-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 800; letter-spacing: -.03em;
  color: var(--o-ink);
}
.o-fact span { font-size: .8rem; color: var(--o-muted); letter-spacing: .04em; }

/* ===== 08. Shell: main page grids (named areas) ====================== */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--o-r-pill);
  background: var(--o-ink);
  color: var(--o-bg) !important;
  font-family: var(--o-text);
  font-size: .9rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s var(--o-ease), color .2s var(--o-ease),
              border-color .2s var(--o-ease), transform .2s var(--o-ease), box-shadow .2s var(--o-ease);
}
.o-btn:hover {
  background: var(--o-accent);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(74, 58, 255, .28);
}
.o-btn--line {
  background: transparent;
  border-color: var(--o-line);
  color: var(--o-ink) !important;
}
.o-btn--line:hover { background: var(--o-accent-soft); border-color: var(--o-accent); color: var(--o-accent) !important; }
.o-btn--grad { background: var(--o-grad); color: #fff !important; }
.o-btn--grad:hover { filter: brightness(1.06); }
.o-btn--wide { width: 100%; }

.o-section { padding-block: clamp(44px, 5.4vw, 84px); }
.o-section--alt { background: var(--o-surface); border-block: 1px solid var(--o-line); }
.o-section--dark {
  background: var(--o-ink);
  color: color-mix(in srgb, var(--o-bg) 78%, transparent);
}
.o-section--dark h2, .o-section--dark h3 { color: var(--o-bg); }

.o-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.o-head h2 { margin: 6px 0 0; }
.o-head__note { color: var(--o-muted); font-size: .92rem; margin: 10px 0 0; }
.o-head__side { font-size: .82rem; font-weight: 700; letter-spacing: .06em; color: var(--o-accent); white-space: nowrap; }
.o-head__side:hover { color: var(--o-accent-3); }

/* page shell with sidebar: uses grid-template-areas, not flex order hacks */
.o-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas: "content aside";
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(28px, 4vw, 52px) 8px;
  align-items: start;
}
.o-page__content { grid-area: content; min-width: 0; }
.o-page__aside { grid-area: aside; min-width: 0; }
.o-page--flush { grid-template-areas: "content"; grid-template-columns: minmax(0, 1fr); }

.o-pagehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.o-pagehead h1 { margin: 4px 0 0; }
.o-pagehead__sub { margin: 0; max-width: 60ch; color: var(--o-muted); }

.o-side { position: sticky; top: 96px; display: grid; gap: 18px; }
.o-panel {
  background: var(--o-surface);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r);
  padding: 20px;
}
.o-panel__title {
  margin: 0 0 14px;
  font-family: var(--o-text);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--o-muted);
}
.o-panel p { font-size: .9rem; color: var(--o-muted); }
.o-panel__contact { font-size: .9rem; line-height: 1.75; }
.o-panel__contact a { font-weight: 600; }
.o-panel--accent { background: var(--o-accent-soft); border-color: transparent; }
.o-side__links { display: grid; gap: 2px; }
.o-side__links a {
  padding: 11px 0;
  border-bottom: 1px solid var(--o-line-2);
  color: var(--o-ink-2);
  font-size: .9rem; font-weight: 600;
}
.o-side__links a:last-child { border-bottom: 0; }
.o-side__links a:hover { color: var(--o-accent); padding-left: 5px; transition: padding .2s var(--o-ease); }

.o-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.o-chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.o-chips li { display: inline; }
.o-chips a, .o-chips > a, .o-chips ul li a, .o-chips li h5 { margin: 0; }
.o-chips a, .o-chips ul li a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-pill);
  background: var(--o-surface);
  color: var(--o-ink-2);
  font-size: .85rem; font-weight: 600;
  transition: all .18s var(--o-ease);
}
.o-chips a:hover, .o-chips ul li a:hover {
  background: var(--o-accent); border-color: var(--o-accent); color: #fff;
}
.o-chips font { color: inherit !important; }

.o-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.o-tagcloud a, #prohref a {
  display: inline-block;
  padding: 6px 13px;
  border-radius: var(--o-r-pill);
  background: color-mix(in srgb, var(--o-accent) 12%, transparent);
  color: var(--o-accent);
  font-size: .82rem; font-weight: 600;
  transition: all .18s var(--o-ease);
}
.o-tagcloud a:hover, #prohref a:hover { background: var(--o-accent); color: #fff; }
.o-tagcloud--keys a { background: color-mix(in srgb, var(--o-accent-2) 16%, transparent); color: var(--o-accent-2); }
.o-tagcloud--keys a:hover { background: var(--o-accent-2); color: #06201d; }

/* ===== 09. Article card (container query) ============================ */
.o-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.o-grid--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.o-grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.o-slot { min-width: 0; }

/* scroll reveal (added by oo.js). Elements are only hidden when JS is running,
   so a JS-less visitor or crawler sees everything. */
.o-js .o-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--o-ease), transform .6s var(--o-ease);
}
.o-js .o-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .o-js .o-reveal { opacity: 1; transform: none; }
}

.o-card {
  container-type: inline-size;
  container-name: card;
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--o-surface);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-lg);
  overflow: hidden;
  transition: transform .32s var(--o-ease), box-shadow .32s var(--o-ease), border-color .32s var(--o-ease);
}
.o-card:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: var(--o-sh-2);
}
.o-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(130deg, var(--o-surface-2), var(--o-surface-3));
}
.o-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s var(--o-ease);
}
.o-card:hover .o-card__media img { transform: scale(1.055) rotate(.4deg); }

.o-card__label {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 13px;
  border-radius: var(--o-r-pill);
  background: color-mix(in srgb, var(--o-ink) 78%, transparent);
  backdrop-filter: blur(6px);
  color: var(--o-bg);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
}
.o-card__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: clamp(16px, 1.6vw, 24px);
}
.o-card__title {
  margin: 0 0 10px;
  font-size: clamp(1.02rem, .5vw + .9rem, 1.28rem);
  line-height: 1.26;
}
.o-card__title a {
  color: var(--o-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .2s var(--o-ease);
}
.o-card:hover .o-card__title a { color: var(--o-accent); }
.o-card__foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--o-line-2);
}
.o-card__more {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700;
  color: var(--o-accent);
  letter-spacing: .02em;
}
.o-card__more::after { content: "\2192"; transition: transform .25s var(--o-ease); }
.o-card:hover .o-card__more::after { transform: translateX(5px); }
.o-card__tag { font-size: .72rem; color: var(--o-muted); letter-spacing: .06em; text-transform: uppercase; }

/* the card adapts to its own width, not the viewport */
@container card (min-width: 460px) {
  .o-card { flex-direction: row; align-items: stretch; }
  .o-card__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 210px; }
  .o-card__body { flex: 1 1 auto; justify-content: center; }
  .o-card__title { font-size: clamp(1.1rem, 1.5cqw + .8rem, 1.45rem); }
}
@container card (max-width: 259px) {
  .o-card__foot { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* list variant: media left, text right (pure grid areas) */
.o-grid--list .o-card {
  container-type: inline-size;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "media body";
  border: 0;
  border-bottom: 1px solid var(--o-line);
  border-radius: 0;
  background: transparent;
  transform: none;
  box-shadow: none;
}
.o-grid--list .o-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.o-grid--list .o-card__media {
  grid-area: media;
  aspect-ratio: 4 / 3;
  border-radius: var(--o-r);
  margin-block: 22px;
}
.o-grid--list .o-card__body { grid-area: body; padding: 24px 0 24px 26px; }
.o-grid--list .o-card:hover .o-card__title a { color: var(--o-accent); }
.o-grid--list .o-slot:last-child .o-card { border-bottom: 0; }

/* ===== 10. Article detail / prose =================================== */
.o-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
  background: var(--o-surface);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-lg);
  padding: clamp(22px, 3.6vw, 60px);
}
.o-article__head { display: grid; gap: 14px; }
.o-article__title { margin: 0; }
.o-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--o-line-2);
  color: var(--o-muted);
  font-size: .845rem;
}
.o-article__meta a { color: var(--o-muted); }
.o-article__meta a:hover { color: var(--o-accent); }
.o-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--o-line); }

.o-figure {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}
.o-figure img {
  width: 100%; height: 88px;
  object-fit: cover;
  border-radius: var(--o-r-sm);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s var(--o-ease), transform .2s var(--o-ease);
}
.o-figure img:hover { opacity: 1; transform: translateY(-3px); }
.o-figure img:first-child {
  grid-column: 1 / -1;
  height: auto; max-height: 680px;
  object-fit: contain;
  background: var(--o-surface-2);
  border-radius: var(--o-r);
  opacity: 1; cursor: default; transform: none;
}

.o-prose { font-size: clamp(1rem, .34vw + .95rem, 1.12rem); line-height: 1.8; }
.o-prose > *:first-child { margin-top: 0; }
.o-prose h2 { margin: 1.7em 0 .6em; }
.o-prose h2::before {
  content: "";
  display: block;
  width: 44px; height: 4px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: var(--o-grad);
}
.o-prose h3 { margin: 1.5em 0 .5em; }
.o-prose h4 { margin: 1.3em 0 .45em; font-family: var(--o-text); font-weight: 800; }
.o-prose p { margin-bottom: 1.15em; }
.o-prose img { display: block; margin: 1.6em auto; border-radius: var(--o-r); height: auto; }
.o-prose a { color: var(--o-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.o-prose a:hover { color: var(--o-accent-3); }
.o-prose ul, .o-prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.o-prose ul { list-style: disc; }
.o-prose ol { list-style: decimal; }
.o-prose li { margin-bottom: .55em; }
.o-prose blockquote {
  margin: 1.7em 0;
  padding: 22px 26px;
  border-left: 4px solid var(--o-accent);
  border-radius: 0 var(--o-r) var(--o-r) 0;
  background: var(--o-accent-soft);
  color: var(--o-ink-2);
  font-size: 1.06em;
}
.o-prose blockquote p:last-child { margin-bottom: 0; }
.o-prose code {
  padding: 2px 7px; border-radius: 6px;
  background: var(--o-surface-2);
  color: var(--o-accent-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}
.o-prose pre { padding: 20px 22px; overflow-x: auto; background: var(--o-ink); color: var(--o-bg); border-radius: var(--o-r); }
.o-prose pre code { background: none; color: inherit; padding: 0; }
.o-prose hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--o-line); }
.o-prose table { width: 100%; margin-bottom: 1.5em; font-size: .95em; }
.o-prose th, .o-prose td { padding: 11px 14px; border: 1px solid var(--o-line); text-align: left; }
.o-prose th { background: var(--o-surface-2); font-weight: 800; }
.o-prose figcaption { margin-top: 10px; color: var(--o-muted); font-size: .85em; text-align: center; }
.o-prose iframe { max-width: 100%; border-radius: var(--o-r); }

.o-article__tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 34px; padding-top: 22px;
  border-top: 1px solid var(--o-line-2);
}
.o-article__tags > strong {
  font-size: .7rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--o-muted);
}
.o-article__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.o-article__actions a {
  padding: 9px 16px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-pill);
  color: var(--o-ink-2);
  font-size: .85rem; font-weight: 600;
}
.o-article__actions a:hover { border-color: var(--o-accent); color: var(--o-accent); background: var(--o-accent-soft); }

.o-comments { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--o-line-2); }
.o-comments h2 { font-size: 1.3rem; margin-bottom: 18px; }
#review { font-size: .97rem; }
#review > * { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--o-line-2); }
#review b, #review strong { color: var(--o-ink); }
#review img { border-radius: 50%; }

.o-related { margin-top: clamp(34px, 4vw, 56px); }
.o-related h2 { margin-bottom: 22px; }

/* ===== 11. Forms ==================================================== */
.o-form { display: grid; gap: 18px; max-width: 640px; margin-top: 22px; }
.o-field { display: grid; gap: 8px; }
.o-field > label {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--o-muted);
}
.o-field em, .o-field .required { color: var(--o-accent-3); font-style: normal; }
.o-input,
.o-form input[type="text"],
.o-form input[type="email"],
.o-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--o-line);
  border-radius: var(--o-r);
  background: var(--o-bg);
  color: var(--o-ink);
  font-family: var(--o-text);
  font-size: .97rem;
  transition: border-color .18s var(--o-ease), box-shadow .18s var(--o-ease);
}
.o-input:focus, .o-form input:focus, .o-form textarea:focus {
  outline: 0; border-color: var(--o-accent); box-shadow: 0 0 0 4px var(--o-accent-soft);
}
textarea.o-input { min-height: 150px; resize: vertical; }
.o-hint { font-size: .82rem; color: var(--o-muted); }

.o-notice {
  display: grid; gap: 16px; justify-items: center;
  max-width: 620px; margin-inline: auto;
  padding: clamp(32px, 5vw, 58px) clamp(22px, 4vw, 48px);
  background: var(--o-surface);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-lg);
  text-align: center;
}
.o-notice__icon {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: var(--o-blob);
  background: var(--o-grad);
  color: #fff;
}
.o-notice p { color: var(--o-muted); max-width: 46ch; }

/* ===== 12. Pager + breadcrumb ====================================== */
.o-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; margin-top: 40px; font-size: 0; }
.o-pager > font {
  flex: 0 0 100%; display: block; margin-bottom: 14px;
  font-size: .8rem; color: var(--o-muted); text-align: center; letter-spacing: .04em;
}
.o-pager > font font { color: var(--o-accent); font-size: inherit; }
.o-pager select {
  height: 42px; padding: 0 32px 0 16px;
  border: 1.5px solid var(--o-line); border-radius: var(--o-r-pill);
  background: var(--o-surface); color: var(--o-ink-2);
  font-family: var(--o-text); font-size: .85rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--o-muted) 50%),
                    linear-gradient(135deg, var(--o-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.o-pager li { list-style: none; font-size: .92rem; }
.o-pager li a, .o-pager li span, .o-pager a, .o-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 13px;
  border: 1.5px solid var(--o-line);
  border-radius: var(--o-r-pill);
  background: var(--o-surface);
  color: var(--o-ink-2);
  font-size: .9rem; font-weight: 600;
  transition: all .18s var(--o-ease);
}
.o-pager li a:hover, .o-pager a:hover { border-color: var(--o-accent); color: var(--o-accent); }
.o-pager .current a, .o-pager .current span,
.o-pager li.active a, .o-pager li.active span, .o-pager .thisclass {
  background: var(--o-ink); border-color: var(--o-ink); color: var(--o-bg);
}

.o-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 20px;
  font-size: .82rem; color: var(--o-muted);
}
.o-crumbs > * { display: inline-flex; align-items: center; }
.o-crumbs a { color: var(--o-muted); }
.o-crumbs a:hover { color: var(--o-accent); }
.o-crumbs i, .o-crumbs .fa { margin-right: 5px; color: var(--o-accent); }
.o-crumbs .divider { color: var(--o-line); }

/* ===== 13. Custom blocks / news list =============================== */
.o-block { background: var(--o-surface); border-block: 1px solid var(--o-line); }
.o-block__in { padding-block: clamp(30px, 4vw, 54px); }
.o-block::after { content: ""; display: table; clear: both; }
.o-block h2 { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.o-block p { color: var(--o-ink-2); }
.o-block a { color: var(--o-accent); text-decoration: underline; }
.o-block img { border-radius: var(--o-r); }
.o-block ul, .o-block ol { margin-bottom: 16px; padding-left: 24px; color: var(--o-ink-2); }
.o-block ul { list-style: disc; }
.o-block ol { list-style: decimal; }
.o-block .adaptive-container { width: 100% !important; float: none !important; }
.o-block table { width: 100%; }
.o-block td, .o-block th { padding: 10px 12px; border: 1px solid var(--o-line); }

.o-news { display: grid; gap: 0; }
.o-news .item, .o-news li {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--o-line-2);
}
.o-news .thumb { border-radius: var(--o-r); overflow: hidden; }
.o-news .thumb img { width: 100%; height: 142px; object-fit: cover; display: block; }
.o-news .info { min-width: 0; }
.o-news h3, .o-news h2 { font-size: 1.2rem; margin-bottom: 10px; }
.o-news h3 a, .o-news h2 a { color: var(--o-ink); }
.o-news h3 a:hover, .o-news h2 a:hover { color: var(--o-accent); }
.o-news .desc { color: var(--o-muted); font-size: .93rem; }

/* article directory (two-level, same generated data as niceblog) */
.o-dir { display: grid; gap: 46px; }
.o-dir__group { display: grid; }
.o-dir__parent {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 2px solid var(--o-ink);
}
.o-dir__parent a { color: var(--o-ink); font-family: var(--o-display); font-size: clamp(1.25rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; }
.o-dir__parent a:hover { color: var(--o-accent); }
.o-dir__count {
  margin-left: auto; white-space: nowrap;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--o-muted);
}
.o-dir__children {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 24px; padding-left: 18px;
  border-left: 2px solid var(--o-line);
}
.o-dir__children li { position: relative; }
.o-dir__children li::before {
  content: ""; position: absolute; left: -18px; top: 1.05em;
  width: 11px; height: 2px; background: var(--o-line);
}
.o-dir__children a {
  display: block; padding: 9px 0;
  color: var(--o-ink-2); font-size: .94rem;
  transition: color .18s var(--o-ease), padding .18s var(--o-ease);
}
.o-dir__children a:hover { color: var(--o-accent); padding-left: 6px; }
.o-dir__solo { display: block; padding: 6px 0 6px 18px; border-left: 2px solid var(--o-line); font-size: .94rem; }
.o-dir__note {
  margin-top: 40px; padding: 22px 24px;
  background: var(--o-accent-soft); border-radius: var(--o-r);
  color: var(--o-ink-2); font-size: .93rem;
}

/* legacy flat category output fallback */
.o-catlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 24px; padding-left: 18px; border-left: 2px solid var(--o-line); }
.o-catlist > a, .o-catlist > div > a, .o-catlist ul li a, .o-catlist h2, .o-catlist h3 {
  display: block; margin: 0; padding: 9px 0;
  color: var(--o-ink-2); font-family: var(--o-text); font-size: .94rem; font-weight: 600;
  border: 0; background: none; text-transform: none; letter-spacing: 0;
}
.o-catlist > a:hover, .o-catlist > div > a:hover, .o-catlist ul li a:hover { color: var(--o-accent); }
.o-catlist a font { color: inherit !important; }
.o-catlist ul { display: contents; }

/* ===== 14. Footer ================================================= */
.o-footer {
  margin-top: clamp(50px, 6vw, 90px);
  background: var(--o-ink);
  color: color-mix(in srgb, var(--o-bg) 72%, transparent);
}
.o-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 52px);
  padding-block: clamp(38px, 5vw, 66px);
}
.o-footer h2 {
  font-family: var(--o-text);
  font-size: .7rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--o-bg) 60%, transparent);
  margin-bottom: 16px;
}
.o-footer__brand { font-family: var(--o-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--o-bg); display: inline-block; margin-bottom: 14px; }
.o-footer p { font-size: .92rem; }
.o-footer a { color: color-mix(in srgb, var(--o-bg) 76%, transparent); }
.o-footer a:hover { color: var(--o-accent-2); }
.o-footer__list li { margin-bottom: 10px; }
.o-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-block: 20px;
  border-top: 1px solid color-mix(in srgb, var(--o-bg) 14%, transparent);
  font-size: .85rem;
}
.o-footer__bottom p { margin: 0; }
.o-footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.o-footer__code { padding-bottom: 22px; font-size: .85rem; }

/* ===== 15. Floating + back to top ================================ */
.o-float { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 70; display: grid; gap: 10px; }
.o-float img { max-width: 52px; height: auto; }
.o-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 85;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--o-r-pill);
  background: var(--o-ink); color: var(--o-bg);
  cursor: pointer;
  box-shadow: var(--o-sh-2);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .3s var(--o-ease);
}
.o-top.is-on { opacity: 1; visibility: visible; transform: none; }
.o-top:hover { background: var(--o-accent); color: #fff; }

/* ===== 16. Blog-mode kill switch ================================ */
.mini_cart_wrapper, .mini_cart, .nb-minicart, .cart_table_border,
.price_box, .payments, .nb-countdown, #product_addtocart_form,
.add_to_cart, .cart_button, .quantity, .qty, .o-qty,
.o-variant, .hb-variant, .nb-variant, .o-price, .o-card__price,
input[name="qty"] { display: none !important; }

/* ===== 17. Responsive / a11y / print ============================ */
@media (max-width: 1080px) {
  .o-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "aside"; }
  .o-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .o-grid--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art"; }
  .o-hero__art { min-height: 200px; max-width: 460px; }
  .o-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .o-header__bar { grid-template-columns: auto 1fr auto; }
  .o-nav { display: none; }
  .o-tool--menu { display: inline-flex; }
  .o-brand { justify-self: start; }
}

@media (max-width: 720px) {
  .o-grid { grid-template-columns: minmax(0, 1fr); }
  .o-grid--trio { grid-template-columns: minmax(0, 1fr); }
  .o-grid--list .o-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "body"; }
  .o-grid--list .o-card__media { margin-bottom: 0; border-radius: var(--o-r) var(--o-r) 0 0; }
  .o-grid--list .o-card__body { padding: 20px 0 22px; }
  .o-head { grid-template-columns: minmax(0, 1fr); }
  .o-head__side { white-space: normal; }
  .o-float { display: none; }
  .o-top { right: 14px; bottom: 16px; }
  .o-news .item, .o-news li { grid-template-columns: minmax(0, 1fr); }
  .o-news .thumb img { height: 190px; }
  .o-footer__top { grid-template-columns: minmax(0, 1fr); }
  .o-footer__bottom { flex-direction: column; align-items: flex-start; }
  .o-article { border-radius: var(--o-r); }
  .o-dir__children { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .o-ticker, .o-rail, .o-drawer, .o-scrim, .o-top, .o-float,
  .o-footer, .o-side, .o-tools, .o-article__actions { display: none !important; }
  body.o-body { background: #fff; font-size: 11.5pt; }
  .o-article { border: 0; padding: 0; }
  .o-prose { font-size: 11.5pt; }
}

/* forced-colors / high contrast */
@media (forced-colors: active) {
  .o-card, .o-panel, .o-article, .o-notice { border: 1px solid CanvasText; }
  .o-btn, .o-tool, .o-top { border: 1px solid CanvasText; }
  .o-blob { display: none; }
}

.adaptive-container{display:flex;gap:28px;align-items:stretch;max-width:1180px;margin:0 auto;padding:8px 0;}
.adaptive-container .left-column{flex:0 0 46%;max-width:46%;min-width:0;}
.adaptive-container .left-column img{width:100%;height:100%;max-height:460px;object-fit:cover;display:block;border:1px solid var(--line);}
.adaptive-container .right-column{flex:1;min-width:0;background:var(--white);border:1px solid var(--line);padding:30px 32px;display:flex;flex-direction:column;justify-content:center;}
.adaptive-container .right-column h1,.adaptive-container .right-column h2{margin:0 0 16px;font-family:var(--serif);font-size:26px;line-height:1.3;color:var(--ink);}
.adaptive-container .right-column h1::after,.adaptive-container .right-column h2::after{content:"";display:block;width:54px;height:2px;background:var(--accent);margin-top:12px;}
.adaptive-container .right-column p{margin:0 0 14px;font-family:var(--serif);font-size:16px;line-height:1.65;color:var(--ink-soft);}
.adaptive-container .right-column ul{margin:8px 0 0;padding-left:22px;}
.adaptive-container .right-column li{margin-bottom:9px;font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--ink-soft);}
.adaptive-container .right-column li::marker{color:var(--accent);}