@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/Newsreader-italic.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/Newsreader-normal.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/PlusJakartaSans-italic.woff2') format('woff2');}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/PlusJakartaSans-normal.woff2') format('woff2');}

/* ==========================================================================
   Life & Ideas
   Tokens (Tailwind zinc scale + the brand teal)
   ========================================================================== */
:root {
  --teal: #5A9EA6;
  --teal-2: #569CA4;
  --teal-hover: #488B93;
  --teal-active: #3d7a81;
  --z50: #fafafa;
  --z100: #f4f4f5;
  --z200: #e4e4e7;
  --z300: #d4d4d8;
  --z400: #a1a1aa;
  --z500: #71717a;
  --z600: #52525b;
  --z700: #3f3f46;
  --z800: #27272a;
  --z900: #18181b;
  --line: rgb(228 228 231 / .9);
  --serif: 'Newsreader', Georgia, Cambria, 'Times New Roman', Times, serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --sh-2xs: 0 1px rgb(0 0 0 / .05);
  --sh-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sh-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --sh-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --sh-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --sh-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}

/* Reset (Tailwind preflight, trimmed) */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font-family: var(--sans); color: #27272a; background: #FAF8F5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl, dd, hr { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
h1, h2, h3, .font-serif { font-family: var(--serif); }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: inherit; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; background: transparent; margin: 0; padding: 0; border-radius: 0; }
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--z400); opacity: 1; }
[hidden] { display: none !important; }
hr { border-top-width: 1px; height: 0; }
::selection { background: var(--z200); color: var(--z900); }

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--z900); padding: 8px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.site { min-height: 100vh; display: flex; flex-direction: column; background: #FAFAFA; color: var(--z800); font-family: var(--sans); }
.site__body { flex: 1 1 0%; }
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 24px; } }
@media (min-width: 1024px) { .wrap { padding: 0 32px; } }

.lai-icon { flex-shrink: 0; }
@keyframes laiFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Header
   ========================================================================== */
.hdr { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgb(228 228 231 / .8); }
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } }
.hdr__bar { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.hdr__burger { padding: 8px; color: var(--z700); border-radius: 8px; transition: background .15s; display: inline-flex; }
.hdr__burger:hover { background: var(--z100); }
.hdr__burger .lai-icon--close { display: none; }
.hdr__burger.is-open .lai-icon--close { display: block; }
.hdr__burger.is-open .lai-icon--menu { display: none; }
@media (min-width: 768px) { .hdr__burger { display: none; } }

/* Logo lockup */
.logo { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; text-align: left; transition: transform .3s; }
.logo:hover { transform: scale(1.02); }
.logo__mark { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; }
.logo__ring { position: absolute; inset: 0; border-radius: 9999px; border: 1px solid rgb(90 158 166 / .35); transition: all .5s; }
.logo:hover .logo__ring { border-color: var(--teal); transform: scale(1.1); box-shadow: 0 0 12px rgb(90 158 166 / .35); }
.logo__spark { width: 16px; height: 16px; color: var(--teal); transition: transform .7s ease-out; }
.logo:hover .logo__spark { transform: rotate(180deg) scale(1.15); }
.logo__word { font-family: var(--serif); font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--z950, #09090b); display: flex; align-items: baseline; line-height: 1.33333; }
.logo__t { transition: color .15s; }
.logo:hover .logo__t { color: #000; }
.logo__amp { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--teal); margin: 0 4px; line-height: 1; user-select: none; transition: all .3s; }
.logo:hover .logo__amp { transform: scale(1.25) rotate(6deg); filter: drop-shadow(0 0 8px rgb(90 158 166 / .4)); }
@media (min-width: 640px) {
  .logo { gap: 12px; }
  .logo__mark { width: 36px; height: 36px; }
  .logo__spark { width: 20px; height: 20px; }
  .logo__word { font-size: 30px; line-height: 1.2; }
  .logo__amp { margin: 0 6px; }
}
@media (min-width: 1024px) { .logo__word { font-size: 32px; } .logo__amp { font-size: 36px; } }
/* footer variant */
.logo--footer { gap: 12px; }
.logo--footer .logo__mark { width: 36px; height: 36px; }
.logo--footer .logo__ring { border-color: rgb(255 255 255 / .2); }
.logo--footer:hover .logo__ring { border-color: var(--teal); box-shadow: 0 0 16px rgb(90 158 166 / .45); }
.logo--footer .logo__spark { width: 20px; height: 20px; }
.logo--footer .logo__word { color: #fff; font-size: 30px; line-height: 1.2; }
.logo--footer:hover .logo__t { color: rgb(255 255 255 / .9); }
.logo--footer .logo__amp { margin: 0 6px; }
.logo--footer:hover .logo__amp { filter: drop-shadow(0 0 12px rgb(90 158 166 / .6)); }
@media (min-width: 640px) {
  .logo--footer { gap: 14px; }
  .logo--footer .logo__mark { width: 40px; height: 40px; }
  .logo--footer .logo__spark { width: 24px; height: 24px; }
  .logo--footer .logo__word { font-size: 36px; line-height: 1.1111; }
  .logo--footer .logo__amp { margin: 0 8px; font-size: 36px; }
}
@media (min-width: 1024px) { .logo--footer .logo__word { font-size: 38px; } .logo--footer .logo__amp { font-size: 44px; } }

/* Pills (nav + tabs) */
.hdr__nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 768px) { .hdr__nav { display: flex; } }
@media (min-width: 1024px) { .hdr__nav { gap: 8px; } }
.pill { display: inline-block; padding: 6px 16px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--z600); transition: all .2s; cursor: pointer; user-select: none; white-space: nowrap; }
.pill:hover { color: var(--teal); background: rgb(90 158 166 / .1); }
.pill:active { background: var(--teal-hover); color: #fff; }
.pill.is-active { background: var(--teal); color: #fff; font-weight: 600; box-shadow: var(--sh-xs); }
.pill.is-active:hover { color: #fff; background: var(--teal); }
.hdr__right { display: flex; align-items: center; gap: 12px; }
.hdr__search-btn { padding: 8px; border-radius: 9999px; color: var(--z500); transition: all .2s; display: inline-flex; }
.hdr__search-btn:hover { color: var(--teal); background: rgb(90 158 166 / .1); }
.hdr__search-btn.is-open { background: var(--teal); color: #fff; box-shadow: var(--sh-xs); }
.btn-subscribe { display: inline-flex; align-items: center; gap: 8px; background: var(--teal); color: #fff; padding: 8px 16px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .025em; box-shadow: var(--sh-xs); transition: all .15s; white-space: nowrap; }
.btn-subscribe:hover { background: var(--teal-hover); }
.btn-subscribe:active { background: var(--teal-active); transform: scale(.95); }
@media (min-width: 640px) { .btn-subscribe { padding: 8px 20px; font-size: 14px; line-height: 20px; } }

/* Search drawer */
.sdrawer { border-top: 1px solid var(--z200); background: #fff; padding: 16px 16px; box-shadow: var(--sh-xl); animation: laiFade .25s ease-out; }
@media (min-width: 640px) { .sdrawer { padding: 16px 32px; } }
.sdrawer__in { max-width: 48rem; margin: 0 auto; }
.sdrawer__in > * + * { margin-top: 12px; }
.sdrawer__form { display: flex; align-items: center; gap: 8px; }
.sdrawer__field { position: relative; flex: 1 1 0%; display: flex; align-items: center; background: var(--z50); border-radius: 9999px; border: 1px solid var(--z200); padding: 6px 14px; }
.sdrawer__field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.sdrawer__ico { color: var(--z400); margin-right: 8px; }
.sdrawer__input { width: 100%; font-size: 14px; line-height: 20px; color: var(--z900); outline: none; border: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.sdrawer__input::-webkit-search-cancel-button { display: none; }
.sdrawer__clear { color: var(--z400); padding: 4px; display: inline-flex; }
.sdrawer__clear:hover { color: var(--z600); }
.sdrawer__go { background: var(--teal); color: #fff; padding: 8px 20px; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .15s; }
.sdrawer__go:hover { background: var(--teal-hover); }
.sdrawer__close { font-size: 12px; font-weight: 600; color: var(--z400); padding: 0 8px; }
.sdrawer__close:hover { color: var(--z700); }
@media (min-width: 640px) { .sdrawer__go { font-size: 14px; } }
.sdrawer__res { padding-top: 8px; border-top: 1px solid var(--z100); }
.sdrawer__head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--z500); margin-bottom: 8px; gap: 12px; }
.sdrawer__all { color: var(--teal); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.sdrawer__all:hover { text-decoration: underline; }
.sdrawer__list { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .sdrawer__list { grid-template-columns: 1fr 1fr; } }
.sdrawer__item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; border: 1px solid var(--z100); transition: background .15s; }
.sdrawer__item:hover { background: var(--z50); }
.sdrawer__item img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sdrawer__item-b { min-width: 0; flex: 1 1 0%; }
.sdrawer__item-c { display: block; font-size: 10px; line-height: 15px; font-weight: 600; color: var(--z400); text-transform: uppercase; letter-spacing: .05em; }
.sdrawer__item-t { font-family: var(--serif); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--z800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdrawer__item:hover .sdrawer__item-t { color: var(--teal); }
.sdrawer__none { font-size: 12px; color: var(--z400); padding: 8px 0; grid-column: 1 / -1; }

/* Mobile menu */
.mmenu { border-top: 1px solid var(--z200); background: #fff; padding: 12px 16px 24px; box-shadow: var(--sh-lg); }
@media (min-width: 768px) { .mmenu { display: none !important; } }
.mmenu > * + * { margin-top: 8px; }
.mmenu__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--z400); padding: 8px 12px 0; }
.mmenu__link { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--z700); transition: background .15s; }
.mmenu__link:hover { color: var(--teal); background: rgb(90 158 166 / .1); }
.mmenu__link.is-active { background: var(--teal); color: #fff; font-weight: 600; box-shadow: var(--sh-xs); }
.mmenu__cta { padding-top: 8px; border-top: 1px solid var(--z100); }
.mmenu__sub { width: 100%; background: var(--teal); color: #fff; padding: 10px; border-radius: 12px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .025em; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--sh-xs); transition: background .15s; }
.mmenu__sub:hover { background: var(--teal-hover); }

/* ==========================================================================
   Footer
   ========================================================================== */
.ftr { background: #000; color: #FAF8F5; padding: 64px 0 48px; margin-top: 80px; border-top: 1px solid #27272a; }
.ftr__grid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; }
@media (min-width: 1024px) {
  .ftr__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px; }
  .ftr__brand { grid-column: span 5; }
  .ftr__col--pages { grid-column: span 3; }
  .ftr__col--tp { grid-column: span 4; }
}
.ftr__brand > * + * { margin-top: 20px; }
.ftr__disclosure { font-size: 12px; line-height: 1.625; color: rgb(255 255 255 / .75); max-width: 24rem; padding-top: 4px; }
@media (min-width: 640px) { .ftr__disclosure { font-size: 14px; } }
.ftr__social { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.soc { width: 40px; height: 40px; border-radius: 9999px; border: 1px solid rgb(255 255 255 / .2); color: rgb(255 255 255 / .8); display: flex; align-items: center; justify-content: center; transition: all .3s; }
.soc:hover { border-color: #569CA4; background: #569CA4; color: #fff; box-shadow: 0 0 14px rgb(86 156 164 / .6); transform: scale(1.1); }
.soc:active { transform: scale(.95); }
.soc__i { width: 16px; height: 16px; transition: transform .3s; }
.soc--x .soc__i { width: 14px; height: 14px; }
.soc:hover .soc__i { transform: scale(1.1); }
.ftr__col > * + * { margin-top: 16px; }
.ftr__h { font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 700; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .1); padding-bottom: 12px; }
.ftr__links { font-size: 14px; line-height: 20px; color: rgb(255 255 255 / .75); }
.ftr__links > li + li { margin-top: 12px; }
.ftr__links a { display: block; transition: color .15s; }
.ftr__links a:hover { color: #fff; }
.ftr__tp { padding-top: 4px; }
.ftr__tp > * + * { margin-top: 12px; }
.ftr__tp-t { font-size: 14px; line-height: 20px; font-weight: 700; color: #fff; letter-spacing: .025em; }
.ftr__stars { display: flex; align-items: center; gap: 6px; }
.ftr__star { width: 28px; height: 28px; background: #00B67A; display: flex; align-items: center; justify-content: center; border-radius: 3px; box-shadow: var(--sh-xs); }
.lai-icon--star { fill: #fff; stroke: #fff; }
.ftr__tp-s { font-size: 14px; line-height: 20px; font-weight: 700; color: #fff; }
.ftr__bar { border-top: 1px solid var(--teal); padding-top: 32px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 16px; color: rgb(255 255 255 / .6); }
@media (min-width: 640px) { .ftr__bar { flex-direction: row; } }
.ftr__top { padding: 10px 20px; border-radius: 9999px; background: var(--teal); color: #fff; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; box-shadow: var(--sh-md); transition: all .2s; }
.ftr__top:hover { background: var(--teal-hover); }
.ftr__top:active { transform: scale(.95); }

/* ==========================================================================
   Cards (shared)
   ========================================================================== */
.card { position: relative; background: #fff; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--sh-xs); transition: box-shadow .3s; }
.card:hover { box-shadow: var(--sh-lg); }
.card__a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card img.zoom { transition: transform .5s; }
.card:hover img.zoom { transform: scale(var(--lai-card-zoom, 1.05)); }
.card__bg { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.card__scrim { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.card__scrim--tall { background: linear-gradient(to bottom, rgb(0 0 0 / .85), rgb(0 0 0 / .25), rgb(0 0 0 / .85)); }
.card__scrim--banner { background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / .45), rgb(0 0 0 / .25)); }
.card__h { font-family: var(--serif); font-weight: 700; line-height: 1.375; }
.card__h--teal { color: var(--teal); }
.card:hover .card__h--teal { filter: brightness(.9); }
.card__h--white { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); }
.card:hover .card__h--white .card__a { color: var(--teal); }
.card__h--white .card__a { transition: color .15s; }
.card__h--dark { color: var(--z900); }
.card__h--gray { color: var(--z800); }
.card:hover .card__h--dark .card__a, .card:hover .card__h--gray .card__a { color: var(--teal); }
.card__h a { transition: color .15s; }
.card__ex { font-family: var(--sans); font-size: 14px; line-height: 1.625; color: var(--z500); }
.card__ex--sm { font-size: 12px; }
@media (min-width: 640px) { .card__ex--sm { font-size: 14px; } }
.card__ex--dark { color: var(--z600); }
.card__ex--2, .card__ex--3, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.card__ex--2 { -webkit-line-clamp: 2; line-clamp: 2; }
.card__ex--3, .clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.card__foot { border-top: 1px solid var(--z100); padding-top: 14px; margin-top: auto; }
.card__foot--dark { border-top-color: rgb(255 255 255 / .2); }
.card__hr { border-top: 1px solid var(--z100); margin: 16px 0; }

/* Byline */
.by { display: flex; align-items: center; gap: 8px; }
.by__av { width: 24px; height: 24px; border-radius: 9999px; object-fit: cover; border: 1px solid var(--z200); }
.by__name { font-size: 12px; line-height: 16px; font-weight: 500; }
.by--muted .by__name { color: var(--z500); }
.by--faint .by__name { color: var(--z400); }
.by--light .by__name { color: var(--z200); }
.by--light .by__av { border-color: rgb(255 255 255 / .3); }
.by--md { gap: 10px; }
.by--md .by__av { width: 28px; height: 28px; }
@media (min-width: 640px) { .by--md .by__name { font-size: 14px; line-height: 20px; } }

/* Category badge */
.badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; border: 1px solid; font-size: 11px; line-height: 16.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; transition: opacity .15s; }
.badge:hover { opacity: .85; }
.badge--plain { font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; align-self: flex-start; }
.badge--fashion { background: rgb(90 158 166 / .1); color: #3E7A81; border-color: rgb(90 158 166 / .25); }
.badge--beauty { background: rgb(201 124 149 / .1); color: #A6516D; border-color: rgb(201 124 149 / .25); }
.badge--lifestyle { background: rgb(108 160 129 / .1); color: #477B5C; border-color: rgb(108 160 129 / .25); }
.badge--travel { background: rgb(208 139 91 / .1); color: #AB6636; border-color: rgb(208 139 91 / .25); }
.badge--technology { background: rgb(99 139 184 / .1); color: #3E6796; border-color: rgb(99 139 184 / .25); }

/* ==========================================================================
   Category grid
   ========================================================================== */
.cgrid { max-width: 80rem; margin: 0 auto; padding: 40px 16px; }
@media (min-width: 640px) { .cgrid { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .cgrid { padding-left: 32px; padding-right: 32px; } }
.cgrid__head { display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--z200); padding-bottom: 16px; margin-bottom: 32px; gap: 12px; }
@media (min-width: 640px) { .cgrid__head { flex-direction: row; align-items: baseline; } }
.cgrid__title { font-family: var(--serif); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--z900); letter-spacing: -.025em; display: inline-block; }
@media (min-width: 640px) { .cgrid__title { font-size: 36px; line-height: 40px; } }
.cgrid__title a { transition: color .15s; }
.cgrid__title a:hover { color: var(--teal); }
.cgrid__links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; line-height: 16px; flex-shrink: 0; }
@media (min-width: 640px) { .cgrid__links { font-size: 14px; line-height: 20px; } }
.cgrid__dot { color: var(--z300); user-select: none; }
.cgrid__link { color: var(--teal); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: color .15s; }
.cgrid__link:hover { color: var(--teal-hover); text-decoration: underline; }
.cgrid__gt { font-size: 12px; font-weight: 700; }

.catpage { padding: 24px 0 0; }
@media (min-width: 640px) { .catpage { padding-top: 40px; } }
.catpage__grid { padding-bottom: 64px; }
.wrap--news { padding-bottom: 48px; }
.wrap--news-post { padding-top: 16px; padding-bottom: 56px; }
.empty { padding: 64px 16px; text-align: center; color: var(--z500); }
.empty__h { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--z900); margin-bottom: 8px; }

/* Panoramic layout */
.pano__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (min-width: 1024px) {
  .pano__row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pano__row > .card--split { grid-column: span 6; }
  .pano__row > .card--tall, .pano__row > .card--photo { grid-column: span 3; }
}
.card--split { padding: 24px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 24px; height: 100%; }
@media (min-width: 640px) { .card--split { flex-direction: row; padding: 28px; } }
.card--split__text { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.card__h--l { font-size: 24px; line-height: 1.375; }
@media (min-width: 640px) { .card__h--l { font-size: 30px; } }
.card--split .card__ex { margin-top: 12px; }
.card--split__img { width: 100%; aspect-ratio: 3 / 4; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: var(--z50); border: 1px solid var(--z100); align-self: center; }
@media (min-width: 640px) { .card--split__img { width: 192px; } }
@media (min-width: 1024px) { .card--split__img { width: 208px; } }
.card--split__img img, .card--wide__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.card--tall { isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; min-height: 380px; height: 100%; }
@media (min-width: 640px) { .card--tall { padding: 28px; min-height: 420px; } }

.card__h--m { font-size: 20px; line-height: 1.375; }
@media (min-width: 640px) { .card__h--m { font-size: 24px; } }
.card--tall:hover .card__bg, .card--banner:hover .card__bg { transform: scale(1.05); }
.card--banner:hover .card__bg { transform: scale(1.03); }

.card--photo { padding: 24px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
@media (min-width: 640px) { .card--photo { padding: 28px; } }
.card--photo-sm { padding: 20px; }
@media (min-width: 640px) { .card--photo-sm { padding: 24px; } }
.card__thumb { width: 100%; border-radius: 16px; overflow: hidden; background: var(--z50); border: 1px solid var(--z100); margin-bottom: 16px; }
.card__thumb--43 { aspect-ratio: 4 / 3; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.card--photo .card__ex { margin-top: 8px; }
.card--photo .card__foot { margin-top: 16px; }
.card__h--s3 { font-size: 18px; line-height: 1.375; }
@media (min-width: 640px) { .card__h--s3 { font-size: 20px; } }
.card__h--s2 { font-size: 18px; }
.card__h--s3.clamp-3 { line-clamp: 3; }

.card--banner { isolation: isolate; overflow: hidden; margin-top: 24px; height: 256px; min-height: 260px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); transition: box-shadow .3s; }
@media (min-width: 640px) { .card--banner { height: 288px; } }
@media (min-width: 1024px) { .card--banner { height: 320px; } }
.card--banner:hover { box-shadow: var(--sh-xl); }
.card--banner__in { padding: 32px 24px; text-align: center; max-width: 56rem; margin: 0 auto; }
.card--banner__in > * + * { margin-top: 12px; }
@media (min-width: 640px) { .card--banner__in { padding: 32px 48px; } .card--banner__in > * + * { margin-top: 16px; } }
.card__h--xl { font-size: 24px; line-height: 1.25; letter-spacing: -.025em; }
@media (min-width: 640px) { .card__h--xl { font-size: 30px; } }
@media (min-width: 1024px) { .card__h--xl { font-size: 36px; } }
.card--banner .by { justify-content: center; padding-top: 4px; }

/* Classic layout */
.classic { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .classic { grid-template-columns: repeat(12, minmax(0, 1fr)); } .classic > * { grid-column: span 6; } }
.card--lead { overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.card--lead__top { background: #fff; border-bottom: 1px solid var(--z100); padding: 28px; }
@media (min-width: 640px) { .card--lead__top { padding: 36px; } }
.card--lead__meta { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card--lead__feat { font-size: 11px; color: var(--z400); }
.card__h--lead { font-size: 24px; line-height: 1.25; }
@media (min-width: 640px) { .card__h--lead { font-size: 30px; } }
@media (min-width: 1024px) { .card__h--lead { font-size: 31.2px; } }
.card--lead__img { aspect-ratio: 4 / 3; width: 100%; overflow: hidden; background: var(--z50); }
@media (min-width: 640px) { .card--lead__img { aspect-ratio: 16 / 12; } }
.card--lead__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.card--lead:hover .card--lead__img img { transform: scale(1.03); }
.classic__side { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.card--wide { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px; flex: 1 1 0%; }
@media (min-width: 640px) { .card--wide { flex-direction: row; padding: 28px; } }
.card--wide__text { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; width: 100%; }
.card--wide__text > * + * { margin-top: 12px; }
.card__h--m2 { font-size: 20px; }
@media (min-width: 640px) { .card__h--m2 { font-size: 24px; } }
.card--wide .card__ex { margin-top: 8px; }
.card__foot--wide { margin-top: 8px; }
.card--wide__img { width: 100%; height: 160px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: var(--z50); padding: 4px; border: 1px solid var(--z100); }
@media (min-width: 640px) { .card--wide__img { width: 176px; } }
.classic__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (min-width: 640px) { .classic__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Extra posts list */
.cgrid__more { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--z200); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .cgrid__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cgrid__more { gap: 32px; } }
.card--row { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 640px) { .card--row { flex-direction: row; padding: 28px; } }
.card--row__img { width: 100%; aspect-ratio: 16 / 10; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: var(--z100); border: 1px solid var(--z100); }
@media (min-width: 640px) { .card--row__img { width: 192px; aspect-ratio: 4 / 3; } }
.card--row__img img { width: 100%; height: 100%; object-fit: cover; }
.card--row__body { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.card--row__top { display: flex; flex-direction: column; gap: 8px; }
.card__h--row { font-size: 18px; }
@media (min-width: 640px) { .card__h--row { font-size: 20px; } }
.card--row__foot { padding-top: 8px; border-top: 1px solid var(--z100); }

/* Pagination */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 0 32px; }
.pager__i .page-numbers { display: inline-block; padding: 6px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500; color: var(--z600); background: #fff; border: 1px solid var(--z200); transition: all .2s; }
.pager__i a.page-numbers:hover { color: var(--teal); background: rgb(90 158 166 / .1); }
.pager__i .page-numbers.current { background: var(--teal); color: #fff; border-color: var(--teal); font-weight: 600; }

/* ==========================================================================
   Newsletter card
   ========================================================================== */
.news { position: relative; overflow: hidden; border-radius: 24px; background: #fff; color: var(--z900); border: 1px solid var(--line); box-shadow: var(--sh-sm); padding: 64px 24px; margin: 56px 0; }
@media (min-width: 640px) { .news { padding: 64px 48px; } }
.news__glow { position: absolute; border-radius: 9999px; background: rgb(90 158 166 / .05); pointer-events: none; }
.news__glow--a { right: -80px; bottom: -80px; width: 320px; height: 320px; filter: blur(64px); }
.news__glow--b { left: -80px; top: -80px; width: 288px; height: 288px; filter: blur(40px); }
.news__in { position: relative; z-index: 10; max-width: 42rem; margin: 0 auto; text-align: center; }
.news__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: rgb(90 158 166 / .1); border: 1px solid rgb(90 158 166 / .25); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--teal); margin-bottom: 16px; }
.news__title { font-family: var(--serif); font-size: 30px; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--teal); }
@media (min-width: 640px) { .news__title { font-size: 36px; } }
@media (min-width: 1024px) { .news__title { font-size: 48px; } }
.news__lead { margin-top: 16px; font-size: 14px; line-height: 1.625; color: var(--z600); }
@media (min-width: 640px) { .news__lead { font-size: 16px; } }
.news__form { margin: 32px auto 0; max-width: 28rem; }
.news__row { display: flex; flex-direction: column; gap: 10px; padding: 6px; border-radius: 16px; background: var(--z50); border: 1px solid var(--line); transition: all .15s; }
.news__row:focus-within { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
@media (min-width: 640px) { .news__row { flex-direction: row; border-radius: 9999px; } }
.news__input { width: 100%; padding: 12px 20px; border-radius: 9999px; background: transparent; font-size: 14px; line-height: 20px; color: var(--z900); outline: none; border: 0; }
.news__input.is-ring, .sw__input.is-ring { box-shadow: 0 0 0 4px rgb(90 158 166 / .4); }
.news__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--teal); color: #fff; padding: 12px 28px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .025em; box-shadow: var(--sh-sm); transition: background .15s; white-space: nowrap; }
.news__btn:hover { background: var(--teal-hover); }
.news__err { font-size: 12px; line-height: 16px; color: #f43f5e; margin-top: 8px; font-weight: 500; text-align: left; padding: 0 16px; }
.news__perks { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px; font-size: 11px; color: var(--z500); }
.news__done { margin-top: 32px; padding: 24px; background: rgb(90 158 166 / .1); border-radius: 16px; border: 1px solid rgb(90 158 166 / .25); text-align: center; animation: laiFade .25s ease-out; }
.news__done-ico { margin: 0 auto 8px; color: var(--teal); }
.news__done h3 { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--z900); }
.news__done p { font-size: 12px; line-height: 16px; color: var(--z600); margin-top: 4px; }
.news__done .news__done-note { font-size: 11px; color: var(--z400); margin-top: 12px; font-style: italic; }

/* ==========================================================================
   Single post
   ========================================================================== */
.crumbbar { background: var(--z50); border-bottom: 1px solid var(--z200); padding: 14px 16px; }
@media (min-width: 640px) { .crumbbar { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .crumbbar { padding-left: 32px; padding-right: 32px; } }
.crumbbar__in { max-width: 80rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--z500); min-width: 0; }
.crumbs a:hover { color: var(--z900); }
.crumbs__cat { font-weight: 500; color: var(--z700); }
.crumbs__cur { color: var(--z900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
@media (min-width: 640px) { .crumbs__cur { max-width: 28rem; } }
.backpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 9999px; background: rgb(86 156 164 / .1); border: 1px solid rgb(86 156 164 / .3); color: #2B6067; font-size: 12px; line-height: 16px; font-weight: 600; box-shadow: var(--sh-2xs); transition: all .15s; }
.backpill:hover { background: rgb(86 156 164 / .2); color: #1E454A; }

.postmain { padding-top: 40px; padding-bottom: 40px; }
.postgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .postgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px; }
  .postcol { grid-column: span 8; }
  .side { grid-column: span 4; }
}
.postcol { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

.phero { position: relative; border-radius: 24px; overflow: hidden; min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; box-shadow: var(--sh-lg); }
@media (min-width: 640px) { .phero { min-height: 460px; padding: 40px; } }
.phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.phero:hover .phero__bg { transform: scale(1.05); }
.phero__s1 { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .55), rgb(0 0 0 / .25)); }
.phero__s2 { position: absolute; inset: 0; background: linear-gradient(to right, rgb(0 0 0 / .8), rgb(0 0 0 / .45), transparent); }
.phero__in { position: relative; z-index: 10; }
.phero__in > * + * { margin-top: 16px; }
.phero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.phero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .3); color: #fff; font-weight: 500; font-size: 12px; line-height: 16px; padding: 6px 16px; border-radius: 9999px; box-shadow: var(--sh-xs); }
.phero__all { display: inline-flex; align-items: center; gap: 6px; background: rgb(86 156 164 / .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font-weight: 500; font-size: 12px; line-height: 16px; padding: 6px 14px; border-radius: 9999px; box-shadow: var(--sh-xs); transition: background .15s; }
.phero__all:hover { background: var(--teal-2); }
.phero__h { font-family: var(--serif); font-size: 24px; line-height: 1.18; font-weight: 700; color: #fff; letter-spacing: -.025em; text-shadow: 0 3px 6px rgb(0 0 0 / .1), 0 2px 4px rgb(0 0 0 / .1); }
@media (min-width: 640px) { .phero__h { font-size: 36px; } }
@media (min-width: 1024px) { .phero__h { font-size: 48px; } }

/* Article body */
.entry { font-size: 16px; line-height: 1.625; color: var(--z700); font-family: var(--sans); padding-top: 0; }
@media (min-width: 640px) { .entry { font-size: 18px; } }
.entry p { margin: 0 0 16px; }
.entry > :last-child { margin-bottom: 0; }
.entry h2 { font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--z900); padding-top: 20px; margin: 24px 0 16px; }
@media (min-width: 640px) { .entry h2 { font-size: 30px; line-height: 36px; } }
.entry > h2:first-child { margin-top: 0; }
.entry h3 { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--z900); margin: 24px 0 12px; }
.entry > p:first-of-type::first-letter { font-family: var(--serif); font-size: 48px; line-height: 1; font-weight: 700; color: var(--z900); float: left; margin-right: 12px; }
@media (min-width: 640px) { .entry > p:first-of-type::first-letter { font-size: 60px; } }
.entry ul, .entry ol { margin: 0 0 16px; padding-left: 24px; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: 6px; }
.entry a { color: var(--teal); text-decoration: underline; }
.entry img { border-radius: 16px; }
.entry figure { margin: 24px 0; }
.entry figcaption { font-size: 14px; color: var(--z500); margin-top: 8px; }
.entry blockquote:not(.pullquote) { margin: 24px 0; padding-left: 20px; border-left: 4px solid var(--z300); font-style: italic; }
.pullquote { margin: 32px 0; padding: 24px; background: var(--z50); border-left: 4px solid var(--z400); border-radius: 0 16px 16px 0; }
.pullquote > * + * { margin-top: 8px; }
@media (min-width: 640px) { .pullquote { padding: 32px; } }
.pullquote__icon { color: var(--z400); opacity: .6; }
.entry .pullquote__text, .pullquote__text { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.375; font-style: italic; font-weight: 500; color: var(--z800); }
@media (min-width: 640px) { .pullquote__text { font-size: 24px; } }
.pullquote__cite { display: block; font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--z500); font-style: normal; margin-top: 8px; }

/* More in category */
.morebox { padding: 32px; background: var(--z50); border: 1px solid var(--z200); border-radius: 24px; margin-top: 16px; }
.morebox > * + * { margin-top: 24px; }
.morebox__head { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid rgb(228 228 231 / .8); padding-bottom: 16px; }
@media (min-width: 640px) { .morebox__head { flex-direction: row; align-items: center; justify-content: space-between; } }
.morebox__kicker { font-size: 11px; line-height: 16.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal-2); }
.morebox__h { font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--z900); margin-top: 2px; }
.morebox__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--teal-2); color: #fff; padding: 10px 20px; border-radius: 9999px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .025em; box-shadow: var(--sh-xs); transition: background .15s; align-self: flex-start; }
@media (min-width: 640px) { .morebox__btn { align-self: auto; } }
.morebox__btn:hover { background: var(--teal-hover); }
.morebox__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .morebox__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini { position: relative; background: #fff; padding: 12px; border-radius: 16px; border: 1px solid rgb(228 228 231 / .7); box-shadow: var(--sh-2xs); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; transition: border-color .15s; }
.mini:hover { border-color: var(--teal-2); }
.mini__img { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--z100); margin-bottom: 8px; }
.mini__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mini:hover .mini__img img { transform: scale(1.05); }
.mini__h { font-family: var(--serif); font-size: 12px; line-height: 1.375; font-weight: 700; color: var(--z900); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: color .15s; }
.mini:hover .mini__h { color: var(--teal-2); }
.mini__more { font-size: 11px; line-height: 16.5px; font-weight: 600; color: var(--teal-2); display: inline-flex; align-items: center; gap: 4px; padding-top: 4px; }
.mini:hover .mini__more { text-decoration: underline; }

/* Author */
.authorcard { padding: 24px; background: #fff; border: 1px solid var(--z200); border-radius: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; box-shadow: var(--sh-xs); }
@media (min-width: 640px) { .authorcard { padding: 32px; flex-direction: row; align-items: flex-start; } }
.authorcard__av { width: 80px; height: 80px; border-radius: 9999px; object-fit: cover; flex-shrink: 0; border: 2px solid var(--z200); }
.authorcard__body { text-align: center; }
.authorcard__body > * + * { margin-top: 8px; }
@media (min-width: 640px) { .authorcard__body { text-align: left; } }
.authorcard__top { display: flex; flex-direction: column; gap: 4px; justify-content: space-between; }
@media (min-width: 640px) { .authorcard__top { flex-direction: row; align-items: center; } }
.authorcard__name { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--z900); }
.authorcard__role { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--z500); text-transform: uppercase; letter-spacing: .05em; }
.authorcard__bio { font-size: 12px; line-height: 1.625; color: var(--z500); }
@media (min-width: 640px) { .authorcard__bio { font-size: 14px; } }
.authorcard__pub { padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--z600); }
@media (min-width: 640px) { .authorcard__pub { justify-content: flex-start; } }
.authorcard__pub-l { font-weight: 600; }

/* Sidebar */
.side { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding-bottom: 16px; }
.side > * { flex-shrink: 0; }
@media (min-width: 1024px) {
  .side { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .side::-webkit-scrollbar { display: none; }
  .admin-bar .side { top: 128px; }
}
.sw { border-radius: 24px; padding: 24px; box-shadow: var(--sh-xs); }
.sw--hub { background: rgb(86 156 164 / .1); border: 1px solid rgb(86 156 164 / .3); }
.sw--hub > * + * { margin-top: 12px; }
.sw__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; background: rgb(86 156 164 / .2); font-size: 11px; line-height: 16.5px; font-weight: 600; color: #224E54; }
.sw__h { font-family: var(--serif); font-size: 20px; line-height: 1.375; font-weight: 700; color: var(--z900); }
.sw__h--teal { font-size: 24px; line-height: 1.25; color: var(--teal); }
.sw__p { font-size: 12px; line-height: 1.625; color: var(--z600); }
.sw__p--gray { color: var(--z500); }
.sw__btn { width: 100%; background: var(--teal-2); color: #fff; padding: 10px; border-radius: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .025em; box-shadow: var(--sh-xs); display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; transition: background .15s; }
.sw__btn:hover { background: var(--teal-hover); }
.sw__btn:active { background: var(--teal-active); }
.sw--sub { background: #fff; border: 1px solid var(--z200); position: relative; overflow: hidden; }
.sw--sub > * + * { margin-top: 12px; }
@media (min-width: 640px) { .sw--sub { padding: 28px; } }
.sw__form > * + * { margin-top: 10px; }
.sw__form { padding-top: 8px; }
.sw__input { width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--z50); border: 1px solid var(--z200); font-size: 12px; line-height: 16px; color: var(--z900); outline: none; }
.sw__input:focus { box-shadow: 0 0 0 1px var(--teal); }
.sw__btn--sub { background: var(--teal); padding: 12px; margin-top: 10px; border: 0; }
.sw__btn--sub:hover { background: var(--teal-hover); }
.sw__err { font-size: 11px; color: #f43f5e; font-weight: 500; }
.sw__fine { font-size: 10px; line-height: 15px; text-align: center; color: var(--z400); }
.sw__done { padding: 16px; background: rgb(90 158 166 / .1); border-radius: 16px; border: 1px solid rgb(90 158 166 / .25); text-align: center; animation: laiFade .25s ease-out; color: var(--teal); }
.sw__done .lai-icon { margin: 0 auto 4px; }
.sw__done-t { display: block; font-size: 12px; font-weight: 700; color: var(--z900); }
.sw__done-s { font-size: 11px; color: var(--z500); }
.sw--recent { background: #fff; border: 1px solid var(--z200); }
.sw--recent > * + * { margin-top: 16px; }
.sw__rh { border-bottom: 1px solid var(--z200); padding-bottom: 12px; }
.sw__rh h3 { font-family: var(--serif); font-size: 18px; line-height: 28px; font-weight: 700; color: var(--z900); }
.rlist > * + * { margin-top: 16px; }
.ritem { position: relative; display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: 12px; transition: background .15s; }
.ritem:hover { background: var(--z50); }
.ritem__img { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--z100); border: 1px solid var(--z200); }
.ritem__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ritem:hover .ritem__img img { transform: scale(1.05); }
.ritem__body { flex: 1 1 0%; min-width: 0; }
.ritem__body > * + * { margin-top: 4px; }
.ritem__cat { display: block; font-size: 10px; line-height: 15px; font-weight: 600; color: var(--z400); }
.ritem__h { font-family: var(--serif); font-size: 12px; line-height: 1.375; font-weight: 700; color: var(--z800); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; transition: color .15s; }
@media (min-width: 640px) { .ritem__h { font-size: 14px; } }
.ritem:hover .ritem__h { color: var(--z500); }

.floatback { position: fixed; bottom: 24px; right: 24px; z-index: 50; }
.floatback a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 9999px; background: var(--teal-2); color: #fff; font-weight: 600; font-size: 12px; line-height: 16px; box-shadow: 0 0 0 4px rgb(255 255 255 / .9), var(--sh-xl); transition: all .3s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (min-width: 640px) { .floatback a { font-size: 14px; line-height: 20px; } }
.floatback a:hover { background: #438189; transform: scale(1.05); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact__main { padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 1024px) { .contact__main { padding-top: 64px; padding-bottom: 64px; } }
.contact__head { text-align: center; max-width: 42rem; margin: 0 auto 48px; }
.contact__head > * + * { margin-top: 12px; }
@media (min-width: 640px) { .contact__head { margin-bottom: 64px; } }
.contact__pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; text-transform: uppercase; font-weight: 600; letter-spacing: .05em; color: #fff; background: var(--teal); padding: 6px 16px; border-radius: 9999px; box-shadow: var(--sh-xs); transition: background .15s; }
.contact__pill:hover { background: var(--teal-hover); }
.contact__pill:active { background: var(--teal-active); }
.contact__h1 { font-family: var(--serif); font-size: 36px; line-height: 40px; font-weight: 700; color: var(--z900); letter-spacing: -.025em; }
@media (min-width: 640px) { .contact__h1 { font-size: 48px; line-height: 1; } }
@media (min-width: 1024px) { .contact__h1 { font-size: 60px; } }
.contact__lead { font-size: 14px; line-height: 1.625; color: var(--z500); }
@media (min-width: 640px) { .contact__lead { font-size: 16px; } }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px; }
  .contact__photo-col { grid-column: span 5; }
  .contact__form-col { grid-column: span 7; }
}
.contact__photo-col { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.contact__photo { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--z100); box-shadow: var(--sh-sm); border: 1px solid rgb(228 228 231 / .6); }
@media (min-width: 640px) { .contact__photo { aspect-ratio: 3 / 4; } }
@media (min-width: 1024px) { .contact__photo { aspect-ratio: 4 / 5; } }
.contact__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease-out; }
.contact__photo:hover img { transform: scale(1.05); }
.contact__form-col { display: flex; flex-direction: column; justify-content: center; }
.contact__form-in > * + * { margin-top: 24px; }
.contact__h2 { font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--z900); letter-spacing: -.025em; }
@media (min-width: 640px) { .contact__h2 { font-size: 30px; line-height: 36px; } }
.contact__sub { font-size: 12px; line-height: 16px; color: var(--z500); margin-top: 4px; }
@media (min-width: 640px) { .contact__sub { font-size: 14px; line-height: 20px; } }
.cform > * + * { margin-top: 16px; }
@media (min-width: 640px) { .cform > * + * { margin-top: 20px; } }
.cform__two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .cform__two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.cform__f > * + * { margin-top: 6px; }
.cform__f label { display: block; font-size: 11px; line-height: 16.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--z700); }
.cform__f label span { color: var(--z400); }
.cform__f input, .cform__f textarea { display: block; width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--z50); border: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--z800); outline: none; transition: all .15s; }
.cform__f input:focus, .cform__f textarea:focus { box-shadow: 0 0 0 2px var(--teal); border-color: var(--teal); background: #fff; }
.cform__f textarea { resize: none; }
.cform__err { font-size: 12px; line-height: 16px; color: #ef4444; font-weight: 500; }
.cform__submit { padding-top: 8px; }
.cform__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--teal); color: #fff; padding: 14px 32px; border-radius: 12px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .025em; box-shadow: var(--sh-xs); transition: all .15s; }
@media (min-width: 640px) { .cform__btn { width: auto; } }
.cform__btn:hover { background: var(--teal-hover); box-shadow: var(--sh-md); }
.cform__btn:active { background: var(--teal-active); }
.cform__priv { padding-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--z500); }
.cform__priv .lai-icon { color: var(--z400); }
.contact__done { padding: 32px; background: var(--z50); border: 1px solid var(--z200); border-radius: 24px; text-align: center; margin: 24px 0; animation: laiFade .25s ease-out; }
.contact__done > * + * { margin-top: 16px; }
@media (min-width: 640px) { .contact__done { padding: 40px; } }
.contact__done-ico { width: 56px; height: 56px; margin: 0 auto; border-radius: 9999px; background: rgb(90 158 166 / .1); display: flex; align-items: center; justify-content: center; border: 2px solid var(--teal); color: var(--teal); }
.contact__done h3 { font-family: var(--serif); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--z900); }
@media (min-width: 640px) { .contact__done h3 { font-size: 30px; line-height: 36px; } }
.contact__done p { font-size: 14px; line-height: 1.625; color: var(--z600); max-width: 28rem; margin-left: auto; margin-right: auto; }
.contact__done .contact__done-note { font-size: 12px; color: var(--z400); font-style: italic; }
.contact__again { margin-top: 8px; padding: 10px 24px; border-radius: 9999px; background: var(--teal); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; box-shadow: var(--sh-xs); transition: background .15s; }
.contact__again:hover { background: var(--teal-hover); }

/* ==========================================================================
   Legal + default pages
   ========================================================================== */
.legal { background: #FAFAF9; min-height: 100vh; padding: 40px 0; }
@media (min-width: 640px) { .legal { padding: 64px 0; } }
.legal__main { max-width: 56rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .legal__main { padding: 0 24px; } }
@media (min-width: 1024px) { .legal__main { padding: 0 32px; } }
.legal__doc { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; box-shadow: var(--sh-xs); }
.legal__doc > * + * { margin-top: 40px; }
@media (min-width: 640px) { .legal__doc { padding: 48px; } }
@media (min-width: 1024px) { .legal__doc { padding: 56px; } }
.legal__head { border-bottom: 1px solid var(--z200); padding-bottom: 32px; }
.legal__head > * + * { margin-top: 12px; }
.legal__kicker { display: block; font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); }
.legal__h1 { font-family: var(--serif); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--z900); letter-spacing: -.025em; }
@media (min-width: 640px) { .legal__h1 { font-size: 36px; line-height: 40px; } }
@media (min-width: 1024px) { .legal__h1 { font-size: 48px; line-height: 1; } }
.legal__body { font-size: 14px; line-height: 1.625; color: var(--z600); font-family: var(--sans); }
@media (min-width: 640px) { .legal__body { font-size: 15px; } }
.entry-legal > * + * { margin-top: 32px; }
.entry-legal .lai-intro { color: var(--z700); padding-bottom: 8px; border-bottom: 1px solid var(--z100); }
.entry-legal .lai-intro > * + * { margin-top: 12px; }
.entry-legal section { padding-top: 8px; }
.entry-legal section > * + * { margin-top: 12px; }
.entry-legal section > .lai-body-x { margin-top: 12px; }
.entry-legal h2 { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--z900); letter-spacing: -.025em; }
@media (min-width: 640px) { .entry-legal h2 { font-size: 24px; line-height: 32px; } }
.entry-legal h3 { font-family: var(--serif); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--z800); }
@media (min-width: 640px) { .entry-legal h3 { font-size: 18px; line-height: 28px; } }
.entry-legal .lai-paras > * + * { margin-top: 10px; }
.entry-legal .lai-subs { padding-top: 4px; }
.entry-legal .lai-subs > * + * { margin-top: 24px; }
.entry-legal .lai-sub { padding-left: 4px; border-left: 2px solid rgb(90 158 166 / .3); }
@media (min-width: 640px) { .entry-legal .lai-sub { padding-left: 12px; } }
.entry-legal .lai-sub > * + * { margin-top: 10px; }
.entry-legal ul { list-style: disc; list-style-position: inside; padding-left: 8px; }
.entry-legal ul > li + li { margin-top: 6px; }
.entry-legal li { padding-left: 4px; }
.entry-legal .lai-foot { padding-top: 4px; }
.entry-legal a { color: var(--teal); text-decoration: underline; }
.legal__back { padding-top: 32px; border-top: 1px solid var(--z200); }
.legal__back a { color: var(--teal); font-weight: 500; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: color .15s; }
@media (min-width: 640px) { .legal__back a { font-size: 16px; } }
.legal__back a:hover { color: var(--teal-hover); text-decoration: underline; }
.legal__back a span:first-child { transition: transform .2s; }
.legal__back a:hover span:first-child { transform: translateX(-4px); }
.notfound { text-align: center; padding-top: 96px; padding-bottom: 96px; }
.notfound > * + * { margin-top: 16px; }

/* ==========================================================================
   Search
   ========================================================================== */
.searchpage { padding: 40px 0; min-height: 70vh; }
@media (min-width: 640px) { .searchpage { padding: 64px 0; } }
.search__head { max-width: 48rem; margin: 0 auto 40px; text-align: center; }
.search__head > * + * { margin-top: 16px; }
.search__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 9999px; background: var(--z100); border: 1px solid var(--z200); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--z600); }
.search__pill .lai-icon { color: var(--teal); }
.search__h1 { font-family: var(--serif); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--z900); letter-spacing: -.025em; }
@media (min-width: 640px) { .search__h1 { font-size: 36px; line-height: 40px; } }
@media (min-width: 1024px) { .search__h1 { font-size: 48px; line-height: 1; } }
.search__lead { font-size: 14px; line-height: 1.5; color: var(--z500); }
@media (min-width: 640px) { .search__lead { font-size: 16px; } }
.search__box { position: relative; max-width: 36rem; margin: 24px auto 0; display: flex; align-items: center; background: #fff; border-radius: 9999px; border: 1px solid var(--z300); box-shadow: var(--sh-sm); padding: 6px; transition: all .15s; }
.search__box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 2px rgb(90 158 166 / .2), var(--sh-sm); }
.search__box-ico { margin-left: 16px; color: var(--z400); }
.search__box input { width: 100%; padding: 10px 12px; font-size: 14px; line-height: 20px; color: var(--z900); outline: none; border: 0; background: transparent; -webkit-appearance: none; appearance: none; }
@media (min-width: 640px) { .search__box input { font-size: 16px; line-height: 24px; } }
.search__pop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding-top: 12px; }
.search__pop-l { font-size: 12px; line-height: 16px; color: var(--z400); margin-right: 4px; display: inline-flex; align-items: center; gap: 4px; }
.search__box-clear { padding: 6px; margin-right: 4px; color: var(--z400); border-radius: 9999px; display: inline-flex; transition: all .15s; }
.search__box-clear:hover { color: var(--z700); background: var(--z100); }
.chip { padding: 4px 12px; border-radius: 9999px; font-size: 12px; line-height: 16px; border: 1px solid var(--z200); background: #fff; color: var(--z600); transition: all .15s; }
.chip:hover { color: var(--z900); background: var(--z50); }
.chip.is-active { background: var(--z900); color: #fff; border-color: var(--z900); box-shadow: var(--sh-xs); }
.search__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--z200); padding-bottom: 16px; margin-bottom: 32px; }
.search__tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-bottom: 4px; max-width: 100%; }
.pill--sm { font-size: 12px; line-height: 16px; }
@media (min-width: 640px) { .pill--sm { font-size: 14px; line-height: 20px; } }
.search__count { font-size: 12px; line-height: 16px; color: var(--z500); font-weight: 500; }
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .rgrid { gap: 32px; } }
.card--result { overflow: hidden; display: flex; flex-direction: column; }
.card--result__img { position: relative; aspect-ratio: 16 / 10; width: 100%; overflow: hidden; background: var(--z100); }
.card--result__img img { width: 100%; height: 100%; object-fit: cover; }
.card--result:hover .card--result__img img { transform: scale(1.04); }
.card--result__cat { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 9999px; background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--z900); font-size: 11px; line-height: 16.5px; font-weight: 600; letter-spacing: .025em; border: 1px solid rgb(228 228 231 / .6); box-shadow: var(--sh-xs); }
.card--result__body { padding: 24px; flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.card--result__txt > * + * { margin-top: 8px; }
.card__h--res { font-size: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.card--result__more { padding-top: 12px; border-top: 1px solid var(--z100); display: flex; align-items: center; justify-content: space-between; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--z700); transition: color .15s; }
.card--result:hover .card--result__more { color: var(--teal); }
.card--result__more .lai-icon { transition: transform .15s; }
.card--result:hover .card--result__more .lai-icon { transform: translateX(4px); }
.noresult { max-width: 28rem; margin: 0 auto; padding: 64px 0; text-align: center; }
.noresult > * + * { margin-top: 16px; }
.noresult__ico { width: 56px; height: 56px; border-radius: 9999px; background: var(--z100); margin: 0 auto; display: flex; align-items: center; justify-content: center; color: var(--z400); }
.noresult h3 { font-family: var(--serif); font-size: 20px; line-height: 28px; font-weight: 700; color: var(--z800); }
.noresult p { font-size: 12px; line-height: 1.625; color: var(--z500); }
@media (min-width: 640px) { .noresult p { font-size: 14px; } }
.noresult__btn { display: inline-block; padding: 8px 20px; border-radius: 9999px; background: var(--z900); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; transition: background .15s; }
.noresult__btn:hover { background: var(--z800); }
.noresult__btn--teal { background: var(--teal); padding: 12px 28px; font-size: 14px; }
.noresult__btn--teal:hover { background: var(--teal-hover); }
.listpage { padding-top: 40px; padding-bottom: 40px; }

/* Whole-box link: the sidebar category hub is clickable anywhere. */
.sw--hub { position: relative; transition: border-color .15s, box-shadow .3s; }
.sw--hub:hover { box-shadow: var(--sh-md); border-color: rgb(86 156 164 / .5); }
.sw--hub .sw__btn::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.card--result__cat { z-index: 2; transition: color .15s, border-color .15s; }
.card--result__cat:hover { color: var(--teal); border-color: var(--teal); }
.card--result__more { cursor: pointer; }

/* Elementor's `.elementor img { border-radius:0; border:none; height:auto }` outranks single-class
   image rules, so the card images are re-asserted here at a higher specificity. */
.cgrid .by__av { width: 24px; height: 24px; border-radius: 9999px; border: 1px solid var(--z200); }
.cgrid .by--md .by__av { width: 28px; height: 28px; }
.cgrid .by--light .by__av { border-color: rgb(255 255 255 / .3); }
.cgrid .card__thumb img, .cgrid .card--split__img img, .cgrid .card--wide__img img { width: 100%; height: 100%; border-radius: 12px; }
.cgrid .card--row__img img, .cgrid .card--lead__img img { width: 100%; height: 100%; }
.cgrid .card__bg { height: 100%; }
.cgrid .card__hr { margin: 16px 0; border-top: 1px solid var(--z100); height: 0; background: transparent; }