@charset "UTF-8";
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

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

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 100%;
  overflow-x: clip;
}
html[data-color-scheme=light] body {
  background-color: #ffffff;
  color: #4d4d4d;
}
html[data-color-scheme=dark] body {
  background-color: #111113;
  color: #c9c9c9;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

img {
  border-style: none;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid;
  margin: 2rem 0;
}
html[data-color-scheme=light] hr {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] hr {
  border-color: rgba(255, 255, 255, 0.12);
}

a {
  text-decoration: none;
  transition: color 180ms ease;
}
html[data-color-scheme=light] a {
  color: #000000;
}
html[data-color-scheme=dark] a {
  color: #ffffff;
}
html[data-color-scheme=light] a:hover {
  color: #000000;
}
html[data-color-scheme=dark] a:hover {
  color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, system-ui, sans-serif;
  font-weight: 600;
}
html[data-color-scheme=light] h1, html[data-color-scheme=light] h2, html[data-color-scheme=light] h3, html[data-color-scheme=light] h4, html[data-color-scheme=light] h5, html[data-color-scheme=light] h6 {
  color: #000000;
}
html[data-color-scheme=dark] h1, html[data-color-scheme=dark] h2, html[data-color-scheme=dark] h3, html[data-color-scheme=dark] h4, html[data-color-scheme=dark] h5, html[data-color-scheme=dark] h6 {
  color: #ffffff;
}

h1 {
  font-size: 2.75rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin: 0 0 0.75rem 0;
}

small, .small {
  font-size: 0.8125rem;
}
html[data-color-scheme=light] small, html[data-color-scheme=light] .small {
  color: #757575;
}
html[data-color-scheme=dark] small, html[data-color-scheme=dark] .small {
  color: #9a9a9a;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

ul, ol {
  margin: 0 0 0.75rem 0;
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.25rem;
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", Consolas, monospace;
}

code {
  padding: 0.1em 0.35em;
  border-radius: 8px;
  border: 1px solid;
}
html[data-color-scheme=light] code {
  background: #f1f1f1;
  border-color: rgba(0, 0, 0, 0.2);
  color: #000000;
}
html[data-color-scheme=dark] code {
  background: #1c1c1f;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

pre {
  padding: 0.875rem 1rem;
  border-radius: 14px;
  overflow-x: auto;
  border: 1px solid;
}
html[data-color-scheme=light] pre {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] pre {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
}

pre code {
  border: 0;
  background: transparent;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

th, td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid;
  text-align: left;
}
html[data-color-scheme=light] th, html[data-color-scheme=light] td {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] th, html[data-color-scheme=dark] td {
  border-color: rgba(255, 255, 255, 0.12);
}

thead th {
  font-weight: 600;
}
html[data-color-scheme=light] thead th {
  color: #000000;
}
html[data-color-scheme=dark] thead th {
  color: #ffffff;
}

input, select, textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  border: 1px solid;
  font: inherit;
  line-height: 1.6;
  background: transparent;
}
html[data-color-scheme=light] input, html[data-color-scheme=light] select, html[data-color-scheme=light] textarea {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
}
html[data-color-scheme=dark] input, html[data-color-scheme=dark] select, html[data-color-scheme=dark] textarea {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  background-color: #151518;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(106, 166, 255, 0.35);
  outline-offset: 2px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .button {
  background: #000000;
  color: #ffffff;
}
html[data-color-scheme=dark] .button {
  background: #ffffff;
  color: #000000;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.button-transparent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), color 180ms cubic-bezier(0.25, 1, 0.5, 1);
  background: transparent;
  border-color: rgba(0, 0, 0, 0.2);
  color: #757575;
}
.button-transparent:hover {
  background: #f3f3f3;
  color: #000000;
}
html[data-color-scheme=dark] .button-transparent {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9a9a9a;
}
html[data-color-scheme=dark] .button-transparent:hover {
  background: #1a1a1c;
  color: #ffffff;
}

.button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), color 180ms cubic-bezier(0.25, 1, 0.5, 1);
  min-height: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.5rem;
  border-radius: 50%;
}

.button-sm {
  min-height: 2.25rem;
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
}

.container {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
}

.main {
  padding-inline: 1rem;
  padding-top: calc(3.625rem + 0.75rem);
}

@media (min-width: 992px) {
  .main {
    padding-top: 1.25rem;
  }
}
.section {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
  margin: 0 auto 2rem;
  padding: 2rem;
  border-radius: 24px;
  border: 1px solid;
}
html[data-color-scheme=light] .section {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .section {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.hidden {
  display: none !important;
}

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

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mt-6 {
  margin-top: 0.75rem !important;
}

.mb-6 {
  margin-bottom: 0.75rem !important;
}

.pad-inline {
  padding-inline: 1rem !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), color 180ms cubic-bezier(0.25, 1, 0.5, 1);
  gap: 0.6em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
html[data-color-scheme=light] .btn {
  background: #000000;
  color: #ffffff;
  border-color: transparent;
}
html[data-color-scheme=dark] .btn {
  background: #ffffff;
  color: #000000;
  border-color: transparent;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: 3px solid rgba(106, 166, 255, 0.35);
  outline-offset: 2px;
}
.btn[disabled], .btn.is-disabled, .btn:disabled {
  opacity: 0.6;
  pointer-events: none;
  transform: none !important;
}
.btn i[class^=ph], .btn i[class*=" ph"] {
  font-size: 1.1em;
  line-height: 1;
}

.btn.is-sm {
  min-height: 2.25rem;
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
}

.btn.is-md {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn.is-lg {
  min-height: calc(2.5rem + 0.25rem);
  padding: 0.65rem calc(1.25rem + 0.25rem);
  font-size: 1rem;
}

.btn.is-block {
  display: inline-flex;
  width: 100%;
}

.btn.is-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  justify-content: center;
  align-items: center;
}
.btn.is-icon i[class^=ph], .btn.is-icon i[class*=" ph"] {
  font-size: 1.125rem;
}

html[data-color-scheme=light] .btn--outline {
  background: transparent;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .btn--outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-color-scheme=light] .btn--outline:hover {
  background: #f1f1f1;
}
html[data-color-scheme=dark] .btn--outline:hover {
  background: #1c1c1f;
}

html[data-color-scheme=light] .btn--muted {
  background: #f1f1f1;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .btn--muted {
  background: #1c1c1f;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-color-scheme=light] .btn--muted:hover {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .btn--muted:hover {
  background: #1a1a1c;
}

html[data-color-scheme=light] .btn--dark {
  background: #000000;
  color: #ffffff;
  border-color: transparent;
}
html[data-color-scheme=dark] .btn--dark {
  background: #000000;
  color: #ffffff;
  border-color: transparent;
}
.btn--dark:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

html[data-color-scheme=light] .btn--inverted {
  background: #ffffff;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .btn--inverted {
  background: #000000;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-color-scheme=light] .btn--inverted:hover {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .btn--inverted:hover {
  background: #1a1a1c;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
}
html[data-color-scheme=light] .btn--ghost {
  color: #000000;
}
html[data-color-scheme=dark] .btn--ghost {
  color: #ffffff;
}
html[data-color-scheme=light] .btn--ghost:hover {
  background: #f1f1f1;
}
html[data-color-scheme=dark] .btn--ghost:hover {
  background: #1c1c1f;
}

html[data-color-scheme=light] .btn--success {
  background: #16a34a;
  color: #ffffff;
  border-color: transparent;
}
html[data-color-scheme=dark] .btn--success {
  background: #22c55e;
  color: #000000;
  border-color: transparent;
}

html[data-color-scheme=light] .btn--danger {
  background: #dc2626;
  color: #ffffff;
  border-color: transparent;
}
html[data-color-scheme=dark] .btn--danger {
  background: #ef4444;
  color: #000000;
  border-color: transparent;
}

.btn-group {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:not(:last-child) {
  border-right: 0;
}
.btn-group .btn:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.btn-group .btn:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.toolbar {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .toolbar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.island-navbar {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  top: 1rem;
  z-index: 1000;
  margin: 0 auto 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: 24px;
  border: 1px solid;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 260ms cubic-bezier(0.25, 1, 0.5, 1), border-color 260ms cubic-bezier(0.25, 1, 0.5, 1), border-radius 260ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 260ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .island-navbar {
  background-color: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .island-navbar {
  background-color: rgba(20, 20, 22, 0.74);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.island-navbar.is-open {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

@media (max-width: 992px) {
  .island-navbar {
    width: 68.75rem;
    max-width: calc(100% - 2 * 1rem);
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    margin: 0 auto;
    border-radius: 24px;
  }
  body.has-fixed-nav {
    padding-top: calc(var(--nav-h, 3.625rem) + 1.25rem);
  }
}
/* --- Floating mobile panel under the centered island --- */
.island-panel {
  position: fixed;
  left: 1rem;
  right: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 68.75rem;
  top: calc(var(--nav-h, 3.625rem) + 0.375rem);
  border: 1px solid;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  z-index: 1100;
  transform: translateY(-6px);
  transition: max-height 500ms cubic-bezier(0.25, 1, 0.5, 1), opacity 300ms ease, transform 350ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 260ms cubic-bezier(0.25, 1, 0.5, 1);
  max-height: 0;
  opacity: 0;
  overflow: clip;
  pointer-events: none;
}
html[data-color-scheme=light] .island-panel {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .island-panel {
  background: rgba(18, 18, 20, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.island-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: calc(100vh - var(--nav-h, 3.625rem));
}
.island-panel .island-panel__inner {
  padding: 1.25rem;
  display: grid;
  gap: 0.75rem;
  max-height: calc(100vh - var(--nav-h, 3.625rem));
  overflow: auto;
}
@media (min-width: 992px) {
  .island-panel {
    display: none;
  }
}

/* bento grid: 2 cols → 3 on wider phones */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}
@media (min-width: 540px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bento-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: 14px;
  border: 1px solid;
  transition: transform 180ms ease, background 180ms ease;
}
html[data-color-scheme=light] .bento-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .bento-card {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
}
.bento-card:hover {
  transform: translateY(-2px);
}
html[data-color-scheme=light] .bento-card:hover {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .bento-card:hover {
  background: #1a1a1c;
}
.bento-card .bento-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid;
}
html[data-color-scheme=light] .bento-card .bento-icon {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .bento-card .bento-icon {
  border-color: rgba(255, 255, 255, 0.12);
}
.bento-card .bento-icon i {
  font-size: 1.125rem;
}
.bento-card .bento-title {
  font-weight: 600;
  font-size: 1rem;
}
html[data-color-scheme=light] .bento-card .bento-title {
  color: #000000;
}
html[data-color-scheme=dark] .bento-card .bento-title {
  color: #ffffff;
}
.bento-card .bento-sub {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .bento-card .bento-sub {
  color: #757575;
}
html[data-color-scheme=dark] .bento-card .bento-sub {
  color: #9a9a9a;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
.navbar-brand .navbar-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid;
}
html[data-color-scheme=light] .navbar-brand .navbar-avatar {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .navbar-brand .navbar-avatar {
  border-color: rgba(255, 255, 255, 0.12);
}
.navbar-brand .brand-text {
  display: grid;
  line-height: 1.1;
}
.navbar-brand .logo {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-color-scheme=light] .navbar-brand .logo {
  color: #000000;
}
html[data-color-scheme=dark] .navbar-brand .logo {
  color: #ffffff;
}
.navbar-brand .logo-sub {
  font-size: 0.8125rem;
}
html[data-color-scheme=light] .navbar-brand .logo-sub {
  color: #757575;
}
html[data-color-scheme=dark] .navbar-brand .logo-sub {
  color: #9a9a9a;
}

.navbar-menu ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar-menu a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.375rem 0.625rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 999px;
  transition: background-color 180ms, color 180ms;
}
.navbar-menu a i {
  font-size: 1.125rem;
  line-height: 1;
}
html[data-color-scheme=light] .navbar-menu a {
  color: #757575;
}
html[data-color-scheme=light] .navbar-menu a:hover, html[data-color-scheme=light] .navbar-menu a.active {
  color: #000000;
  background: #f3f3f3;
}
html[data-color-scheme=dark] .navbar-menu a {
  color: #9a9a9a;
}
html[data-color-scheme=dark] .navbar-menu a:hover, html[data-color-scheme=dark] .navbar-menu a.active {
  color: #ffffff;
  background: #1a1a1c;
}
@media (max-width: 992px) {
  .navbar-menu {
    display: none;
  }
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.navbar-actions .nav-icon, .navbar-actions .island-panel.is-open .mobile-menu-toggle, .island-panel.is-open .navbar-actions .mobile-menu-toggle,
.navbar-actions body.panel-open .mobile-menu-toggle,
body.panel-open .navbar-actions .mobile-menu-toggle, .navbar-actions .navbar-search .search-cancel, .navbar-search .navbar-actions .search-cancel, .navbar-actions .theme-toggle-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid;
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background-color 180ms, color 180ms, border-color 180ms;
}
html[data-color-scheme=light] .navbar-actions .nav-icon, html[data-color-scheme=light] .navbar-actions .island-panel.is-open .mobile-menu-toggle, .island-panel.is-open html[data-color-scheme=light] .navbar-actions .mobile-menu-toggle,
html[data-color-scheme=light] .navbar-actions body.panel-open .mobile-menu-toggle,
body.panel-open html[data-color-scheme=light] .navbar-actions .mobile-menu-toggle, html[data-color-scheme=light] .navbar-actions .navbar-search .search-cancel, .navbar-search html[data-color-scheme=light] .navbar-actions .search-cancel, html[data-color-scheme=light] .navbar-actions .theme-toggle-button {
  color: #757575;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=light] .navbar-actions .nav-icon:hover, html[data-color-scheme=light] .navbar-actions .island-panel.is-open .mobile-menu-toggle:hover, .island-panel.is-open html[data-color-scheme=light] .navbar-actions .mobile-menu-toggle:hover,
html[data-color-scheme=light] .navbar-actions body.panel-open .mobile-menu-toggle:hover,
body.panel-open html[data-color-scheme=light] .navbar-actions .mobile-menu-toggle:hover, html[data-color-scheme=light] .navbar-actions .navbar-search .search-cancel:hover, .navbar-search html[data-color-scheme=light] .navbar-actions .search-cancel:hover, html[data-color-scheme=light] .navbar-actions .theme-toggle-button:hover {
  color: #000000;
  background: #ededed;
}
html[data-color-scheme=dark] .navbar-actions .nav-icon, html[data-color-scheme=dark] .navbar-actions .island-panel.is-open .mobile-menu-toggle, .island-panel.is-open html[data-color-scheme=dark] .navbar-actions .mobile-menu-toggle,
html[data-color-scheme=dark] .navbar-actions body.panel-open .mobile-menu-toggle,
body.panel-open html[data-color-scheme=dark] .navbar-actions .mobile-menu-toggle, html[data-color-scheme=dark] .navbar-actions .navbar-search .search-cancel, .navbar-search html[data-color-scheme=dark] .navbar-actions .search-cancel, html[data-color-scheme=dark] .navbar-actions .theme-toggle-button {
  color: #9a9a9a;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-color-scheme=dark] .navbar-actions .nav-icon:hover, html[data-color-scheme=dark] .navbar-actions .island-panel.is-open .mobile-menu-toggle:hover, .island-panel.is-open html[data-color-scheme=dark] .navbar-actions .mobile-menu-toggle:hover,
html[data-color-scheme=dark] .navbar-actions body.panel-open .mobile-menu-toggle:hover,
body.panel-open html[data-color-scheme=dark] .navbar-actions .mobile-menu-toggle:hover, html[data-color-scheme=dark] .navbar-actions .navbar-search .search-cancel:hover, .navbar-search html[data-color-scheme=dark] .navbar-actions .search-cancel:hover, html[data-color-scheme=dark] .navbar-actions .theme-toggle-button:hover {
  color: #ffffff;
  background: #2c2c2f;
}
.navbar-actions .theme-toggle-button {
  position: relative;
  overflow: hidden;
}
.navbar-actions .theme-toggle-button i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .navbar-actions .theme-toggle-button .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
html[data-color-scheme=dark] .navbar-actions .theme-toggle-button .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.navbar-actions .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.25rem;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms, color 180ms;
}
html[data-color-scheme=light] .navbar-actions .nav-cta {
  background: #000000;
  color: #ffffff;
}
html[data-color-scheme=dark] .navbar-actions .nav-cta {
  background: #ffffff;
  color: #000000;
}
.navbar-actions .nav-cta:hover {
  transform: translateY(-2px);
}
.navbar-actions .nav-cta span {
  display: none;
}
@media (min-width: 768px) {
  .navbar-actions .nav-cta span {
    display: inline;
  }
}
.navbar-actions .mobile-menu-toggle {
  display: none;
}
@media (max-width: 992px) {
  .navbar-actions .mobile-menu-toggle {
    display: inline-grid;
  }
}

.island-panel.is-open {
  max-height: calc(100vh - (var(--nav-h, 3.625rem) + 0.375rem + 0.375rem));
}

.island-panel .island-panel__inner {
  max-height: calc(100vh - (var(--nav-h, 3.625rem) + 0.375rem + 0.375rem));
  overflow: auto;
}

/* ===================================================================== */
/* INLINE NAVBAR SEARCH (NEW) — animation + dark mode + result behavior  */
/* ===================================================================== */
/* Animations */
@keyframes ims-search-reveal {
  0% {
    opacity: 0;
    transform: scaleX(0.88) translateX(8px);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}
@keyframes ims-results-drop {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Global backdrop blur when search is active (page dims/blur; results sit above) */
body.search-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1098;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.18);
}
html[data-color-scheme=dark] body.search-active::before {
  background: rgba(0, 0, 0, 0.28);
}
body.search-active::before {
  pointer-events: auto;
}

/* Search form occupies navbar center when active */
.navbar-search {
  border: 0;
  box-shadow: none;
  background: transparent;
  display: none;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding-left: 0.5rem;
  padding-right: 0.25rem;
  transform-origin: right center;
}
.navbar-search i {
  opacity: 0.9;
}
html[data-color-scheme=light] .navbar-search i {
  color: #757575;
}
html[data-color-scheme=dark] .navbar-search i {
  color: #9a9a9a;
}
.navbar-search .search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 1rem;
}
html[data-color-scheme=light] .navbar-search .search-input {
  color: #000000;
}
html[data-color-scheme=dark] .navbar-search .search-input {
  color: #ffffff;
}
.navbar-search .search-input::placeholder {
  opacity: 0.9;
}
html[data-color-scheme=light] .navbar-search .search-input::placeholder {
  color: rgba(117, 117, 117, 0.9);
}
html[data-color-scheme=dark] .navbar-search .search-input::placeholder {
  color: rgba(154, 154, 154, 0.9);
}
.navbar-search .search-cancel {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
}

/* When active, hide brand/menu/cta; make room for search + animate */
body.search-active .navbar-search {
  display: flex;
  animation: ims-search-reveal 260ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
body.search-active .navbar-brand, body.search-active .navbar-menu, body.search-active .navbar-actions .cta-github {
  display: none;
}
body.search-active .island-navbar {
  gap: 0.375rem;
  display: grid;
  grid-template-columns: 1fr auto;
  z-index: 1101;
}

@media (max-width: 992px) {
  body.search-active .island-navbar {
    grid-template-columns: 1fr auto;
  }
}
/* Results container: hidden by default; matches island width; centered; sits above blur */
.search-results {
  position: sticky;
  top: calc(var(--nav-h, 3.625rem) + 0.375rem);
  z-index: 1100;
  max-width: 68.75rem;
  margin-left: auto;
  margin-right: auto;
  display: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow: hidden;
  border-radius: 24px;
}

/* On mobile: mirror island insets so widths match exactly */
@media (max-width: 992px) {
  .search-results {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: calc(var(--nav-h, 3.625rem) + 0.375rem);
  }
}
/* Only visible when JS adds .is-open (user typed/results exist) */
.search-results.is-open {
  display: block;
  animation: ims-results-drop 260ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
html[data-color-scheme=light] .search-results.is-open {
  background: #ffffff;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .search-results.is-open {
  background: #1a1a1c;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

/* Comfortable spacing & item polish */
.search-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
}

/* Result row:
   - full-row clickable (cursor pointer)
   - subtle hover elevation and underline on title
   - strictly clipped text areas to keep within island width */
.search-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: 18px;
  cursor: pointer;
}
html[data-color-scheme=light] .search-item:hover, html[data-color-scheme=light] .search-item[aria-selected=true] {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .search-item:hover, html[data-color-scheme=dark] .search-item[aria-selected=true] {
  background: #1a1a1c;
}
.search-item:hover .search-title {
  text-decoration: underline;
}

.search-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid;
}
html[data-color-scheme=light] .search-thumb {
  border-color: rgba(0, 0, 0, 0.2);
  background: #f3f3f3;
}
html[data-color-scheme=dark] .search-thumb {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1a1a1c;
}
.search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-thumb i {
  font-size: 1.125rem;
}
html[data-color-scheme=light] .search-thumb i {
  color: #757575;
}
html[data-color-scheme=dark] .search-thumb i {
  color: #9a9a9a;
}

/* Text column: clamp title to 1 line, excerpt to 2 lines.
   Ensure clipping even on narrow screens (min-width:0 triggers flex shrink behavior). */
.search-main {
  min-width: 0;
}

.search-title {
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-color-scheme=light] .search-title {
  color: #000000;
}
html[data-color-scheme=dark] .search-title {
  color: #ffffff;
}

.search-excerpt {
  margin-top: 0.2rem;
}
html[data-color-scheme=light] .search-excerpt {
  color: #757575;
}
html[data-color-scheme=dark] .search-excerpt {
  color: #9a9a9a;
}
.search-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA on the right */
.search-cta {
  font-size: 0.875rem;
  text-decoration: none;
}
html[data-color-scheme=light] .search-cta {
  color: #757575;
}
html[data-color-scheme=dark] .search-cta {
  color: #9a9a9a;
}
.search-cta:hover {
  text-decoration: underline;
}

/* ===================================================================== */
/* MOBILE MENU: hamburger → full panel; close (×) at top-right            */
/* ===================================================================== */
/* When the panel is open, float the toggle as a close button in the panel’s top-right. */
.island-panel.is-open + .whatever { /* placeholder to avoid accidental matches */ }

.island-panel.is-open ~ .noop { /* nothing */ }

/* Reposition the existing hamburger button when panel is open */
.island-panel.is-open ~ .ignore { /* safety */ }

.island-panel.is-open { /* scope helper only */ }

.island-panel.is-open,
body.panel-open {
  /* Move the same toggle button (hamburger) to the panel top-right and style as close (×) */
}
.island-panel.is-open .mobile-menu-toggle,
body.panel-open .mobile-menu-toggle {
  position: fixed;
  z-index: 1102;
  top: calc(var(--nav-h, 3.625rem) + 1rem);
  right: calc(1rem + 2px);
  background: transparent;
  /* When aria-expanded=true (panel open), draw an "×" instead of the hamburger icon */
}
.island-panel.is-open .mobile-menu-toggle[aria-expanded=true] i,
body.panel-open .mobile-menu-toggle[aria-expanded=true] i {
  opacity: 0;
}
.island-panel.is-open .mobile-menu-toggle[aria-expanded=true]::after,
body.panel-open .mobile-menu-toggle[aria-expanded=true]::after {
  content: "×";
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  font-size: 1.125rem;
}
html[data-color-scheme=light] .island-panel.is-open .mobile-menu-toggle[aria-expanded=true]::after,
html[data-color-scheme=light] body.panel-open .mobile-menu-toggle[aria-expanded=true]::after {
  color: #000000;
}
html[data-color-scheme=dark] .island-panel.is-open .mobile-menu-toggle[aria-expanded=true]::after,
html[data-color-scheme=dark] body.panel-open .mobile-menu-toggle[aria-expanded=true]::after {
  color: #ffffff;
}

/* Make the panel feel “full island menu” on mobile: larger grid, comfy spacing */
@media (max-width: 992px) {
  .island-panel.is-open .island-panel__inner {
    padding-top: 4rem;
  }
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
}
/* Optional hover affordance for bento items (looks tappable) */
.bento-card {
  cursor: pointer;
}

.footer-wrap {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
}

.footer-island {
  position: relative;
  border: 1px solid;
  border-bottom: 0;
  border-radius: 24px;
  overflow: hidden;
}
html[data-color-scheme=light] .footer-island {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .footer-island {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.footer-inner {
  padding: clamp(1.25rem, 5vw, 2rem);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "about about" "links contact" "news news";
}
@media (max-width: 380px) {
  .footer-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "about" "links" "contact" "news";
  }
}
@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "about about about" "links contact news";
  }
}
@media (min-width: 992px) {
  .footer-inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "about links contact news";
  }
}

/* Area placements */
.footer-about {
  grid-area: about;
}

.footer-links {
  grid-area: links;
}

.footer-contact {
  grid-area: contact;
}

.footer-newsletter {
  grid-area: news;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Headings */
.footer-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html[data-color-scheme=light] .footer-title {
  color: #000000;
}
html[data-color-scheme=dark] .footer-title {
  color: #ffffff;
}
.footer-title i {
  font-size: 1.125rem;
  opacity: 0.9;
}
.footer-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 0.25rem;
  border-radius: 2px;
}
html[data-color-scheme=light] .footer-title::after {
  background: #000000;
  opacity: 0.15;
}
html[data-color-scheme=dark] .footer-title::after {
  background: #ffffff;
  opacity: 0.2;
}

/* Text */
html[data-color-scheme=light] .footer-text, html[data-color-scheme=light] .footer-hint, html[data-color-scheme=light] .footer-credit, html[data-color-scheme=light] .footer-address {
  color: #000000;
}
html[data-color-scheme=dark] .footer-text, html[data-color-scheme=dark] .footer-hint, html[data-color-scheme=dark] .footer-credit, html[data-color-scheme=dark] .footer-address {
  color: #ffffff;
}
.footer-text, .footer-hint, .footer-credit, .footer-address {
  opacity: 0.9;
}

.footer-address p {
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-address a {
  text-decoration: none;
}
html[data-color-scheme=light] .footer-address a {
  color: #000000;
}
html[data-color-scheme=dark] .footer-address a {
  color: #ffffff;
}
.footer-address a:hover {
  text-decoration: underline;
}

/* Lists */
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}
.footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-size: 1rem;
}
html[data-color-scheme=light] .footer-list a {
  color: #000000;
}
html[data-color-scheme=dark] .footer-list a {
  color: #ffffff;
}
.footer-list a i {
  font-size: 1.125rem;
}
.footer-list a {
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), text-decoration-color 180ms;
}
.footer-list a:hover {
  text-decoration: underline;
  transform: translateX(2px);
}

.footer-legal {
  margin-top: 0.375rem;
}

/* Social icons */
.footer-social {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.footer-social a {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid;
  font-size: 1.125rem;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .footer-social a {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .footer-social a {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
.footer-social a:hover {
  transform: translateY(-2px);
}
html[data-color-scheme=light] .footer-social a:hover {
  background: #f3f3f3;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .footer-social a:hover {
  background: #1a1a1c;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

/* Newsletter */
.footer-form {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.footer-field {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  background: transparent;
}
html[data-color-scheme=light] .footer-field {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .footer-field {
  border-color: rgba(255, 255, 255, 0.12);
}
.footer-field i {
  font-size: 1.125rem;
  opacity: 0.9;
}
.footer-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
}
html[data-color-scheme=light] .footer-field input {
  color: #000000;
}
html[data-color-scheme=light] .footer-field input::placeholder {
  color: #757575;
}
html[data-color-scheme=dark] .footer-field input {
  color: #ffffff;
}
html[data-color-scheme=dark] .footer-field input::placeholder {
  color: #9a9a9a;
}
html[data-color-scheme=light] .footer-field:focus-within {
  border-color: #000000;
}
html[data-color-scheme=dark] .footer-field:focus-within {
  border-color: #ffffff;
}

.footer-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
  font-weight: 600;
}
html[data-color-scheme=light] .footer-submit {
  background: #000000;
  color: #ffffff;
}
html[data-color-scheme=dark] .footer-submit {
  background: #ffffff;
  color: #ffffff;
}
.footer-submit {
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), opacity 180ms;
}
.footer-submit i {
  font-size: 1.125rem;
}
.footer-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.35);
}
.footer-submit:active {
  transform: translateY(0);
  opacity: 0.92;
}

/* Wrapper spacing + centering */
.ad {
  margin-block: clamp(1.5rem, 4vw, 2.5rem);
  /* Constrain to parent; don't bleed past gutters */
  width: 100%;
  max-width: 100%;
  /* Create space for the top ribbon label */
  padding-top: 1rem;
  /* Layer context for the ribbon */
  position: relative;
  /* Center the slot without forcing extra width */
  display: grid;
  place-items: center;
}

/* Core slot: fluid within parent, no overflow */
.adsbygoogle.ad__slot {
  display: block;
  width: 100%;
  max-width: 100%; /* never exceed wrapper width */
  border-radius: 10px;
  overflow: hidden; /* safety if iframe tries to overflow */
  position: relative;
  z-index: 1; /* under the ribbon */
  /* Placeholder surface while loading */
}
html[data-color-scheme=light] .adsbygoogle.ad__slot {
  background: linear-gradient(180deg, #f3f3f3, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
html[data-color-scheme=dark] .adsbygoogle.ad__slot {
  background: linear-gradient(180deg, #2c2c2f, #151518);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------- Responsive variants (pure CSS) ---------- */
/* Square family */
.ad--square .ad__slot {
  aspect-ratio: 1/1;
  max-width: clamp(200px, 48vw, 336px);
  margin-inline: auto;
  min-height: clamp(180px, 40vw, 336px);
}

.ad--square-small .ad__slot {
  aspect-ratio: 1/1;
  max-width: clamp(160px, 40vw, 250px);
  margin-inline: auto;
  min-height: clamp(140px, 34vw, 250px);
}

.ad--square-large .ad__slot {
  aspect-ratio: 1/1;
  max-width: clamp(250px, 56vw, 420px);
  margin-inline: auto;
  min-height: clamp(220px, 50vw, 420px);
}

/* Horizontal (leaderboard-like) — fluid inside parent, but capped */
.ad--horizontal .ad__slot {
  width: 100%;
  max-width: 970px; /* typical cap for large leaderboards */
  margin-inline: auto;
  min-height: clamp(50px, 10vw, 90px);
}

/* Vertical (skyscraper-like) */
.ad--vertical .ad__slot {
  max-width: clamp(120px, 44vw, 300px);
  margin-inline: auto;
  min-height: clamp(300px, 60vh, 600px);
}

/* Fluid / In-article / Autorelaxed — let height breathe, width = parent */
.ad--fluid .ad__slot {
  width: 100%;
  max-width: 100%;
  min-height: 200px;
}

.ad--in_article .ad__slot {
  width: 100%;
  max-width: 100%;
  min-height: 180px;
}

.ad--autorelaxed .ad__slot {
  width: 100%;
  max-width: 100%;
  min-height: 240px;
}

/* Slightly tweak at breakpoints */
@media (min-width: 768px) {
  .ad--horizontal .ad__slot {
    min-height: clamp(60px, 7vw, 90px);
  }
  .ad--vertical .ad__slot {
    min-height: clamp(400px, 60vh, 700px);
  }
}
@media (min-width: 992px) {
  .ad--square .ad__slot {
    max-width: 336px;
  }
  .ad--square-small .ad__slot {
    max-width: 250px;
  }
  .ad--square-large .ad__slot {
    max-width: 420px;
  }
}
/* Hide on smaller screens so they don’t overlay content */
.ad-rails {
  display: none;
}

@media (min-width: 1300px) {
  .ad-rails {
    display: block;
  }
  /* Full-height rails, centered content, non-interfering with page clicks */
  .ad-rail {
    position: fixed;
    height: 100%;
    top: 0;
    bottom: 0;
    width: 160px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  /* Offset from the viewport edges (not from the island) */
  .ad-rail--left {
    left: 1.25rem;
  }
  .ad-rail--right {
    right: 1.25rem;
  }
  /* The ad wrapper inside the rail: fixed 160×600 area, clickable */
  .ad-rail .ad {
    pointer-events: auto;
    width: 160px;
    max-width: 160px;
    height: 600px;
    max-height: 100%;
    margin: 0;
    display: grid;
    place-items: center;
  }
  /* The actual AdSense slot: lock to 160×600 */
  .ad-rail .ad__slot {
    width: 160px;
    max-width: 160px;
    height: 100%;
    aspect-ratio: auto;
    overflow: hidden;
  }
  /* Keep the “Advertisement” ribbon from overlapping the unit */
  .ad-rail .ad::before {
    transform: translate(-50%, -70%);
  }
}
/* Optional: nudge rails a bit further inward on ultra-wide screens */
@media (min-width: 1800px) {
  .ad-rail--left {
    left: calc(1.25rem + 0.75rem);
  }
  .ad-rail--right {
    right: calc(1.25rem + 0.75rem);
  }
}
/* Grid wrapper for any post list */
.content-grid, .list--related, .section .list--posts {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 540px) {
  .content-grid, .list--related, .section .list--posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .content-grid, .list--related, .section .list--posts {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .content-grid.is-compact, .list--related, .section .is-compact.list--posts, .section .list--posts.list--related {
    grid-template-columns: repeat(3, 1fr);
  }
}
.content-grid.is-compact .content-card__excerpt, .list--related .content-card__excerpt, .section .is-compact.list--posts .content-card__excerpt {
  -webkit-line-clamp: 2;
}

/* Card */
.content-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid;
  border-radius: 24px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), border-color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .content-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .content-card {
  background: rgba(18, 18, 20, 0.74);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.content-card:hover {
  transform: translateY(-4px);
}
html[data-color-scheme=light] .content-card:hover {
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.16), 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .content-card:hover {
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.42), 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.content-card:focus-within {
  outline: 2px solid transparent;
}
html[data-color-scheme=light] .content-card:focus-within {
  border-color: #000000;
}
html[data-color-scheme=dark] .content-card:focus-within {
  border-color: #ffffff;
}

/* Media */
.content-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
@supports not (aspect-ratio: 1) {
  .content-card__media {
    height: 0;
    padding-top: 56.25%;
  }
}
.content-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 260ms cubic-bezier(0.25, 1, 0.5, 1), filter 260ms cubic-bezier(0.25, 1, 0.5, 1);
}
.content-card__media .content-card__cat {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1;
}
html[data-color-scheme=light] .content-card__media .content-card__cat {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  color: #757575;
}
html[data-color-scheme=dark] .content-card__media .content-card__cat {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #9a9a9a;
}
.content-card__media .content-card__cat a {
  text-decoration: none;
}
html[data-color-scheme=light] .content-card__media .content-card__cat a {
  color: inherit;
}
html[data-color-scheme=dark] .content-card__media .content-card__cat a {
  color: inherit;
}

/* Subtle Ken Burns on hover */
.content-card:hover .content-card__media img {
  transform: scale(1.06);
}

/* Body */
.content-card__body {
  display: grid;
  gap: 0.375rem;
  padding: 0.625rem;
}

/* Title */
.content-card__title {
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.content-card__title a {
  text-decoration: none;
}
html[data-color-scheme=light] .content-card__title a {
  color: #000000;
}
html[data-color-scheme=dark] .content-card__title a {
  color: #ffffff;
}
.content-card__title a:hover {
  text-decoration: underline;
}

/* Meta */
.content-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .content-card__meta {
  color: #757575;
}
html[data-color-scheme=dark] .content-card__meta {
  color: #9a9a9a;
}
.content-card__meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.55;
}
html[data-color-scheme=light] .content-card__meta .dot {
  background: #757575;
}
html[data-color-scheme=dark] .content-card__meta .dot {
  background: #9a9a9a;
}
.content-card__meta .post-meta {
  margin: 0;
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
}
.content-card__meta .post-meta a {
  text-decoration: none;
}
html[data-color-scheme=light] .content-card__meta .post-meta a {
  color: inherit;
}
html[data-color-scheme=dark] .content-card__meta .post-meta a {
  color: inherit;
}

/* Excerpt */
.content-card__excerpt {
  margin: 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .content-card__excerpt {
  color: #757575;
}
html[data-color-scheme=dark] .content-card__excerpt {
  color: #9a9a9a;
}
.content-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer CTA */
.content-card__footer {
  margin-top: auto;
  padding: 0 0.625rem 0.625rem;
}
.content-card__footer .readmore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  text-decoration: none;
}
html[data-color-scheme=light] .content-card__footer .readmore {
  color: #000000;
}
html[data-color-scheme=dark] .content-card__footer .readmore {
  color: #ffffff;
}
.content-card__footer .readmore i {
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.content-card__footer .readmore:hover i {
  transform: translateX(3px);
}

/* List -> Card bridge (so your existing markup classes don’t fight it) */
.list--posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
.list--posts > .item--post {
  margin: 0;
  padding: 0;
}

/* Make the UL inside section become the grid */
/* Related posts compact layout */
/* Pagination tweaks (optional polish) */
.nav--paginator {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
html[data-color-scheme=light] .nav--paginator .pagination {
  color: #757575;
}
html[data-color-scheme=dark] .nav--paginator .pagination {
  color: #9a9a9a;
}
.nav--paginator .pagination--previous, .nav--paginator .pagination--next {
  text-decoration: none;
}
html[data-color-scheme=light] .nav--paginator .pagination--previous, html[data-color-scheme=light] .nav--paginator .pagination--next {
  color: #000000;
}
html[data-color-scheme=dark] .nav--paginator .pagination--previous, html[data-color-scheme=dark] .nav--paginator .pagination--next {
  color: #ffffff;
}
.nav--paginator .pagination--previous:hover, .nav--paginator .pagination--next:hover {
  text-decoration: underline;
}

/* Category label (from your partial) */
.label--category {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.875rem;
  line-height: 1;
}
html[data-color-scheme=light] .label--category {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  color: #757575;
}
html[data-color-scheme=dark] .label--category {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #9a9a9a;
}
.label--category a {
  text-decoration: none;
}
html[data-color-scheme=light] .label--category a {
  color: inherit;
}
html[data-color-scheme=dark] .label--category a {
  color: inherit;
}

/* =========================================
   HERO
========================================= */
.home-hero {
  padding-block: clamp(1.5rem, 4.5vw, 2.25rem);
  overflow-x: clip;
}

.home-hero__grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 992px) {
  .home-hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* Make art first on mobile and perfectly centered */
@media (max-width: 992px) {
  .home-hero__art-wrap {
    order: -1;
  }
}
.home-hero__copy {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.home-hero__hello {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 500;
}
.home-hero__hello i {
  transform-origin: 60% 60%;
  animation: wave 1.6s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% {
    transform: rotate(0);
  }
  20% {
    rotate: 16deg;
  }
  40% {
    rotate: -10deg;
  }
  60% {
    rotate: 12deg;
  }
  80% {
    rotate: -6deg;
  }
}
.home-hero__name {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
}

.home-hero__sub {
  margin: 0;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  opacity: 0.94;
}

.home-hero__bio {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
}
html[data-color-scheme=light] .home-hero__bio {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .home-hero__bio {
  color: #c9c9c9;
}

.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
html[data-color-scheme=light] .home-hero__cta .button {
  color: #ffffff;
}
html[data-color-scheme=dark] .home-hero__cta .button {
  color: #000000;
}
html[data-color-scheme=light] .home-hero__cta .button:hover {
  color: #ffffff;
}
html[data-color-scheme=dark] .home-hero__cta .button:hover {
  color: #000000;
}

.home-hero__meta {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.home-hero__meta-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .home-hero__meta-row {
  color: #757575;
}
html[data-color-scheme=dark] .home-hero__meta-row {
  color: #9a9a9a;
}

/* Pill stats */
.home-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid;
}
html[data-color-scheme=light] .pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .pill {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.pill .pill__val {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
}
.pill .pill__label {
  font-size: 0.8125rem;
  opacity: 0.9;
}

/* Art: SQUARE, centered, no overflow */
.home-hero__art-wrap {
  position: relative;
}

.home-hero__art {
  margin: 0;
  width: min(96%, 520px);
  aspect-ratio: 1/1; /* square */
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid;
  justify-self: center; /* centers within grid cell */
}
html[data-color-scheme=light] .home-hero__art {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .home-hero__art {
  background: #2c2c2f;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.home-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (min-width: 992px) {
  .home-hero__art {
    transform: perspective(1200px) rotateY(-3.25deg);
    transform-origin: center left;
  }
  .home-hero__art:hover {
    transform: perspective(1200px) rotateY(-2.5deg) translateY(-2px);
  }
}
@media (max-width: 992px) {
  .home-hero__art {
    transform: none;
  }
}
/* Social rail half in/out */
.home-hero__social {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 0.625rem;
  /* mobile: bottom center, half outside */
  left: 50%;
  bottom: -0.75rem;
  transform: translateX(-50%);
}
.home-hero__social li {
  margin: 0;
}
.home-hero__social a {
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid;
}
html[data-color-scheme=light] .home-hero__social a {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  color: #000000;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .home-hero__social a {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.home-hero__social a {
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.home-hero__social a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

@media (min-width: 992px) {
  .home-hero__social {
    top: 50%;
    bottom: auto;
    left: auto;
    right: -0.75rem;
    transform: translateY(-50%); /* half outside on the right */
    flex-direction: column;
  }
}
/* =========================================
   BENTO
========================================= */
.home-bento {
  margin-block: clamp(2rem, 6vw, 2.5rem);
  overflow-x: clip;
}

.home-bento__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two-up on mobile */
}
@media (min-width: 992px) {
  .home-bento__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.home-bento__item {
  min-width: 0;
}

.home-bento__tile {
  position: relative;
  display: grid;
  gap: 0.625rem;
  min-height: clamp(110px, 20vw, 140px);
  padding: clamp(1.25rem, 2.2vw, 1.5rem);
  border-radius: 18px;
  border: 1px solid;
  text-decoration: none;
}
html[data-color-scheme=light] .home-bento__tile {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  color: #000000;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .home-bento__tile {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.home-bento__tile {
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.home-bento__tile:hover {
  transform: perspective(900px) rotateX(1.25deg) rotateY(2deg) translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* Corner icon perched on the border */
.home-bento__icon {
  position: absolute;
  top: -0.6rem;
  left: -0.6rem;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid;
}
html[data-color-scheme=light] .home-bento__icon {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .home-bento__icon {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

/* GitHub-like */
.home-bento__tile--github .gh-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 600;
}
.home-bento__tile--github .gh-repo {
  font-size: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-bento__tile--github .gh-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  opacity: 0.9;
  flex-wrap: wrap;
}
.home-bento__tile--github .dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.home-bento__tile--github .spacer {
  inline-size: 1px;
  block-size: 1rem;
  background: currentColor;
  opacity: 0.2;
}

/* YouTube-like */
.home-bento__tile--video .yt-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid;
}
html[data-color-scheme=light] .home-bento__tile--video .yt-frame {
  border-color: rgba(0, 0, 0, 0.2);
  background: #f3f3f3;
}
html[data-color-scheme=dark] .home-bento__tile--video .yt-frame {
  border-color: rgba(255, 255, 255, 0.12);
  background: #2c2c2f;
}
.home-bento__tile--video .yt-thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18));
}
.home-bento__tile--video .yt-title {
  font-weight: 500;
}

/* Blog */
.home-bento__tile--blog .blog-title {
  font-weight: 600;
}
.home-bento__tile--blog .blog-excerpt {
  margin: 0;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .home-bento__tile--blog .blog-excerpt {
  color: #757575;
}
html[data-color-scheme=dark] .home-bento__tile--blog .blog-excerpt {
  color: #9a9a9a;
}

/* Resume */
.home-bento__tile--resume .cv-line {
  font-weight: 600;
}

/* =========================================
   MY CONTENT
========================================= */
.home-content {
  margin-block: clamp(2rem, 6vw, 2.5rem);
}

.home-content__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.home-content__head h2 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
}

.home-content__featured {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid;
  border-radius: 24px;
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
html[data-color-scheme=light] .home-content__featured {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .home-content__featured {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.home-content__featured .feat-copy {
  max-width: 60ch;
}

.home-content__all {
  white-space: nowrap;
}

.home-content__groups {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

.group-title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
}

.group-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 992px) {
  .group-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.group-card {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  border: 1px solid;
  border-radius: 18px;
  text-decoration: none;
}
html[data-color-scheme=light] .group-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  color: #000000;
}
html[data-color-scheme=dark] .group-card {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.group-card .g-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}
.group-card .g-excerpt {
  margin: 0;
  font-size: 0.875rem;
  opacity: 0.9;
}
.group-card .g-meta {
  opacity: 0.7;
}

/* =========================================
   PORTFOLIO
========================================= */
.home-portfolio {
  margin-block: clamp(2rem, 6vw, 2.5rem);
}

.home-portfolio__title {
  margin: 0 0 1.25rem 0;
  font-size: 1.75rem;
  line-height: 1.2;
}

.home-portfolio__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 992px) {
  .home-portfolio__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-portfolio__tile {
  display: grid;
  gap: 1rem;
  border: 1px solid;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
}
html[data-color-scheme=light] .home-portfolio__tile {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  color: #000000;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .home-portfolio__tile {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.home-portfolio__tile {
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
.home-portfolio__tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

.hp-cover {
  aspect-ratio: 16/9;
  background: var(--cover, #ddd);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}

.hp-copy {
  padding: 1.25rem;
}

.hp-title {
  margin: 0 0 0.15rem 0;
  font-weight: 600;
}

.hp-meta {
  margin: 0 0 0.35rem 0;
  opacity: 0.75;
  font-size: 0.875rem;
}

.hp-desc {
  margin: 0;
  font-size: 1rem;
}

/* Safety: never overflow horizontally */
.home-hero, .home-bento, .home-content, .home-portfolio {
  overflow-x: clip;
}

/* Container helper (local class if you use it in markup) */
.container {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
}

/* ---------------- Hero ---------------- */
.post-hero {
  padding-block: clamp(2rem, 6vw, 3rem);
}

.post-header {
  display: grid;
  gap: 1rem;
}

.post-kicker {
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0;
}

.post-title {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  line-height: 1.2;
  font-weight: 700;
}

.post-meta {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  align-items: center;
  width: max-content;
}

.post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.post-byline {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 0.875rem;
}

.post-author {
  font-weight: 600;
}

.post-dot {
  opacity: 0.6;
}

.post-cover {
  margin: 1.25rem 0 0 0;
  border-radius: 24px;
  overflow: hidden;
}

.post-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.post-cover figcaption {
  font-size: 0.875rem;
  margin-top: 0.625rem;
  opacity: 0.8;
}

/* ---------------- Layout grid ---------------- */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
  padding-block: clamp(2rem, 6vw, 3rem);
}
@media (min-width: 992px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.post-layout--single {
  grid-template-columns: 1fr;
}

/* ---------------- Article content ---------------- */
.article {
  min-width: 0;
}

.content {
  font-size: 1rem;
  line-height: 1.6;
}
.content > * {
  min-width: 0;
}

.content :where(img, video, svg, canvas) {
  max-width: 100%;
  height: auto;
  display: block;
}

.content pre {
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", Consolas, monospace;
  font-size: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 14px;
}
html[data-color-scheme=light] .content pre {
  background: #f3f3f3;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #4d4d4d;
}
html[data-color-scheme=dark] .content pre {
  background: #1a1a1c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9c9c9;
}

.content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

/* ---------------- Type-specific blocks ---------------- */
.post-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
@media (min-width: 768px) {
  .post-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.fact {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 14px;
}
html[data-color-scheme=light] .fact {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .fact {
  background: #2c2c2f;
}

.fact-label {
  font-size: 0.875rem;
  opacity: 0.8;
}

.fact-value {
  font-weight: 600;
}

.post-media {
  margin: 1.25rem 0;
  border-radius: 24px;
  overflow: hidden;
}

.post-media iframe, .post-media video, .post-media audio {
  width: 100%;
  display: block;
}

.post-rating {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  margin: 1.25rem 0;
}

.rating-label {
  font-weight: 600;
}

.rating-stars {
  --score: 0;
  --size: 22px;
  position: relative;
  height: var(--size);
  background: linear-gradient(90deg, currentColor calc(var(--score) * 20%), transparent 0);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='22' viewBox='0 0 110 22'><g fill='black'><path d='M11 0l2.7 6.7 7.3.6-5.5 4.7 1.7 7-6.2-3.8-6.2 3.8 1.7-7L1 7.3l7.3-.6z'/><use x='22' href='#s'/><use x='44' href='#s'/><use x='66' href='#s'/><use x='88' href='#s'/></g></svg>") left/contain repeat-x;
  mask: inherit;
}

/* Trip meta row */
.post-tripmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1rem 0;
  font-size: 1rem;
}

.trip-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------------- Tags ---------------- */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  margin: 2rem 0 0 0;
  list-style: none;
}

.post-tags a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .post-tags a {
  background: #f3f3f3;
  color: #4d4d4d;
}
html[data-color-scheme=dark] .post-tags a {
  background: #2c2c2f;
  color: #c9c9c9;
}

/* ---------------- Share ---------------- */
.post-share {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-color-scheme=light] .btn-ghost {
  background: transparent;
  color: #4d4d4d;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .btn-ghost {
  background: transparent;
  color: #c9c9c9;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-color-scheme=light] .btn-ghost:hover {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .btn-ghost:hover {
  background: #2c2c2f;
}

.post-share-copy.copied {
  outline: 3px solid rgba(106, 166, 255, 0.35);
}

/* ---------------- Author box ---------------- */
.post-author {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  margin-top: 2rem;
  align-items: center;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  margin: 0;
  font-weight: 600;
}

.author-bio {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
}

/* ---------------- Prev/Next ---------------- */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}

.post-prev, .post-next {
  display: grid;
  gap: 0.25rem;
  text-decoration: none;
  color: inherit;
  align-items: center;
}

.post-prev .label, .post-next .label {
  font-size: 0.875rem;
  opacity: 0.7;
}

.post-prev .name, .post-next .name {
  font-size: 1rem;
  font-weight: 500;
}

/* ---------------- Sidebar + TOC + Tag cloud ---------------- */
.sidebar {
  position: sticky;
  top: calc(3.625rem + 1.25rem);
  display: grid;
  gap: 2rem;
  align-self: start;
}

html[data-color-scheme=light] .sidebar > * {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: none;
}
html[data-color-scheme=dark] .sidebar > * {
  background: #151518;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.toc {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 24px;
}
html[data-color-scheme=light] .toc {
  background: #f3f3f3;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .toc {
  background: #2c2c2f;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.toc-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.125rem;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.toc-item a {
  text-decoration: none;
}

.toc-h2 a {
  font-size: 1rem;
}

.toc-h3 a {
  font-size: 0.875rem;
  opacity: 0.9;
  padding-left: 0.75rem;
  display: inline-block;
}

/* Tag cloud (sidebar) */
.tag-cloud {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 24px;
}

.tagcloud-title {
  margin: 0;
  font-weight: 600;
  font-size: 1.125rem;
}

.tagcloud-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tagcloud-list a {
  --w: 6;
  font-size: calc(0.5rem + var(--w) * 0.05rem);
  text-decoration: none;
}
html[data-color-scheme=light] .tagcloud-list a {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .tagcloud-list a {
  color: #c9c9c9;
}

/* ---------------- Responsive behavior ---------------- */
@media (max-width: 992px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
  .toc--desktop {
    display: none;
  }
  .toc--mobile {
    display: grid;
    margin-top: 1.25rem;
  }
}
@media (min-width: 992px) {
  .toc--mobile {
    display: none;
  }
}
/* ---------------- Safety: media in article ---------------- */
.content code, .content kbd, .content samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Liberation Mono", Consolas, monospace;
}

/* Make this layout slightly narrower than the site-wide container */
.container--page-narrow {
  width: calc(68.75rem - 3rem);
  max-width: calc(100% - 2 * (1rem + 0.5rem));
  margin-inline: auto;
}

/* Page padding */
.page {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* Grid: main + optional rail */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 992px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
}

/* MAIN — flat, no island */
.page-main {
  min-width: 0;
}

.page-article {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.page-article .page-title {
  margin: 0 0 1.25rem 0;
  font-size: clamp(2rem, 5.6vw, 2.75rem);
  line-height: 1.2;
  font-weight: 700;
}
.page-article .page-breadcrumb {
  display: inline-flex;
  gap: 0.625rem;
  align-items: center;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .page-article .page-breadcrumb {
  color: #757575;
}
html[data-color-scheme=dark] .page-article .page-breadcrumb {
  color: #9a9a9a;
}
.page-article .page-breadcrumb a {
  text-decoration: none;
}
html[data-color-scheme=light] .page-article .page-breadcrumb a {
  color: #000000;
}
html[data-color-scheme=dark] .page-article .page-breadcrumb a {
  color: #ffffff;
}
html[data-color-scheme=light] .page-article .page-breadcrumb a:hover {
  color: #000000;
}
html[data-color-scheme=dark] .page-article .page-breadcrumb a:hover {
  color: #ffffff;
}
.page-article .page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: -0.5rem 0 1.5rem;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .page-article .page-meta {
  color: #757575;
}
html[data-color-scheme=dark] .page-article .page-meta {
  color: #9a9a9a;
}
.page-article .page-meta .dot {
  opacity: 0.6;
}
.page-article .page-meta i {
  font-size: 1.05em;
}
.page-article {
  /* media safety */
}
.page-article :where(img, video, svg, canvas) {
  max-width: 100%;
  height: auto;
  display: block;
}
.page-article table {
  display: block;
  overflow-x: auto;
}

/* RAIL — unique look (outline, chips, dashed separators); sticky at desktop */
.page-rail {
  display: none;
}
@media (min-width: 992px) {
  .page-rail {
    display: grid;
    gap: 1.25rem;
    position: sticky;
    top: calc(3.625rem + 1.25rem);
    align-self: start;
  }
}

/* Cards in the rail are *not* islands; they are trimmed, flat containers */
.rail-card {
  padding: 1.25rem;
  border-radius: 14px;
  border: 1px dashed;
}
html[data-color-scheme=light] .rail-card {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .rail-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
}
.rail-card + .rail-card {
  margin-top: 0.5rem;
}

.rail-card--cta {
  border-style: solid;
}
html[data-color-scheme=light] .rail-card--cta {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .rail-card--cta {
  background: #1a1a1c;
}

.rail-title {
  margin: 0 0 0.625rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
.rail-title i {
  margin-right: 0.625rem;
}

.rail-text {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .rail-text {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .rail-text {
  color: #c9c9c9;
}

/* TOC */
.rail-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.rail-toc__item.is-sub {
  padding-left: 0.75rem;
}

.rail-toc__link {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .rail-toc__link {
  color: #000000;
}
html[data-color-scheme=dark] .rail-toc__link {
  color: #ffffff;
}
html[data-color-scheme=light] .rail-toc__link:hover {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .rail-toc__link:hover {
  background: #2c2c2f;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Social chips */
.rail-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1;
}
html[data-color-scheme=light] .chip {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .chip {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
.chip i {
  font-size: 1.05em;
}
html[data-color-scheme=light] .chip:hover {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .chip:hover {
  background: #2c2c2f;
}

/* CTA button reusing your tokens */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1), background-color 180ms cubic-bezier(0.25, 1, 0.5, 1), color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-color-scheme=light] .button {
  background: #000000;
  color: #ffffff;
}
html[data-color-scheme=dark] .button {
  background: #ffffff;
  color: #000000;
}
.button {
  border-color: transparent;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
html[data-color-scheme=light] .button:hover {
  color: #ffffff;
}
html[data-color-scheme=dark] .button:hover {
  color: #000000;
}

/* Footer note band */
.page-footnote {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 1.25rem;
  border-radius: 14px;
  border: 1px dashed;
}
html[data-color-scheme=light] .page-footnote {
  color: #757575;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .page-footnote {
  color: #9a9a9a;
  border-color: rgba(255, 255, 255, 0.12);
}
.page-footnote a {
  text-decoration: underline;
}
html[data-color-scheme=light] .page-footnote a {
  color: #000000;
}
html[data-color-scheme=dark] .page-footnote a {
  color: #ffffff;
}

/* Shell */
.category {
  display: block;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* Header */
.category-header {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.category-title {
  margin: 0 0 0.5rem 0;
  font-size: clamp(2rem, 5.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.category-subtitle {
  margin: 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .category-subtitle {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .category-subtitle {
  color: #c9c9c9;
}

/* Layout: main + optional aside */
.category-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 992px) {
  .category-layout {
    grid-template-columns: minmax(0, 1fr) 320px; /* main | aside */
    align-items: start;
  }
}

/* Section header */
.category-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.category-section__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
}

/* Badge */
.category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2ch;
  padding: 0 0.625rem;
  height: 1.6rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}
html[data-color-scheme=light] .category-badge {
  background: #f3f3f3;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .category-badge {
  background: #1a1a1c;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* List of posts for a category */
.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .category-list {
    grid-template-columns: 1fr 1fr; /* two-up on tablets+ */
    gap: 1.5rem;
  }
}

.category-item {
  min-width: 0;
}

/* Post card */
.category-card {
  display: grid;
  gap: 0.625rem;
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .category-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .category-card {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.category-card:hover {
  transform: translateY(-2px);
}

.category-card__title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
}
.category-card__title a {
  text-decoration: none;
}
html[data-color-scheme=light] .category-card__title a {
  color: #000000;
}
html[data-color-scheme=dark] .category-card__title a {
  color: #ffffff;
}

.category-card__meta {
  margin: 0;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
html[data-color-scheme=light] .category-card__meta {
  color: #757575;
}
html[data-color-scheme=dark] .category-card__meta {
  color: #9a9a9a;
}

.category-dot {
  opacity: 0.55;
}

.category-card__thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid;
}
html[data-color-scheme=light] .category-card__thumb {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .category-card__thumb {
  border-color: rgba(255, 255, 255, 0.12);
}
.category-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.category-card__excerpt {
  margin: 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .category-card__excerpt {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .category-card__excerpt {
  color: #c9c9c9;
}

/* Divider */
.category-hr {
  border: 0;
  height: 0;
  margin: 2rem 0;
  border-top: 1px solid;
}
html[data-color-scheme=light] .category-hr {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .category-hr {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Empty state */
.category-empty {
  padding: 2rem;
  border-radius: 14px;
  text-align: center;
  border: 1px dashed;
}
html[data-color-scheme=light] .category-empty {
  color: #757575;
  border-color: rgba(0, 0, 0, 0.2);
  background: #f3f3f3;
}
html[data-color-scheme=dark] .category-empty {
  color: #9a9a9a;
  border-color: rgba(255, 255, 255, 0.12);
  background: #1a1a1c;
}

/* Sidebar */
.category-aside {
  position: sticky;
  top: calc(3.625rem + 1.25rem);
  align-self: start;
  display: none; /* hidden by default on small screens */
}
@media (min-width: 992px) {
  .category-aside {
    display: block;
  }
}

.category-aside__box {
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid;
}
html[data-color-scheme=light] .category-aside__box {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .category-aside__box {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.category-aside__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Sidebar nav */
.category-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.625rem;
}

.category-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
}
html[data-color-scheme=light] .category-nav__link {
  color: #000000;
}
html[data-color-scheme=dark] .category-nav__link {
  color: #ffffff;
}
html[data-color-scheme=light] .category-nav__link:hover {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .category-nav__link:hover {
  background: #2c2c2f;
  border-color: rgba(255, 255, 255, 0.12);
}

.category-nav__name {
  font-size: 1rem;
}

.archive {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

/* Header */
.archive-header {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.archive-title {
  margin: 0 0 0.5rem 0;
  font-size: clamp(2rem, 5.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
}

.archive-subtitle {
  margin: 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .archive-subtitle {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .archive-subtitle {
  color: #c9c9c9;
}

/* Layout */
.archive-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 992px) {
  .archive-layout {
    grid-template-columns: minmax(0, 1fr) 320px; /* main | aside */
    align-items: start;
  }
}

/* Main list */
.archive-main {
  min-width: 0;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .archive-list {
    grid-template-columns: 1fr 1fr; /* two-up on tablets+ */
    gap: 2rem;
  }
}

.archive-item {
  min-width: 0;
}

@media (min-width: 768px) {
  .archive-item--ad {
    grid-column: 1/-1;
  }
}
.archive-item--ad { /* full row */ }

/* Card */
.archive-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid;
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
html[data-color-scheme=light] .archive-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .archive-card {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.archive-card:hover {
  transform: translateY(-2px);
}

.archive-card__thumb {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid;
}
html[data-color-scheme=light] .archive-card__thumb {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .archive-card__thumb {
  border-color: rgba(255, 255, 255, 0.12);
}
.archive-card__thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.archive-card__title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.2;
}
.archive-card__title a {
  text-decoration: none;
}
html[data-color-scheme=light] .archive-card__title a {
  color: #000000;
}
html[data-color-scheme=dark] .archive-card__title a {
  color: #ffffff;
}

.archive-card__meta {
  margin: 0;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
html[data-color-scheme=light] .archive-card__meta {
  color: #757575;
}
html[data-color-scheme=dark] .archive-card__meta {
  color: #9a9a9a;
}

.archive-dot {
  opacity: 0.55;
}

/* Category pills inside meta */
.archive-label {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  border: 1px solid;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .archive-label {
  border-color: rgba(0, 0, 0, 0.2);
  background: #f3f3f3;
  color: #000000;
}
html[data-color-scheme=dark] .archive-label {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1a1a1c;
  color: #ffffff;
}
.archive-label a {
  text-decoration: none;
  color: inherit;
}

.archive-card__excerpt {
  margin: 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .archive-card__excerpt {
  color: #4d4d4d;
}
html[data-color-scheme=dark] .archive-card__excerpt {
  color: #c9c9c9;
}

/* Ads inside list/end */
.archive-ad {
  margin-block: clamp(1.25rem, 3vw, 2rem);
}

.archive-ad--end {
  margin-top: 2rem;
}

/* Pager */
.archive-pager {
  margin-top: clamp(2rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.archive-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid;
}
html[data-color-scheme=light] .archive-page {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
  background: transparent;
}
html[data-color-scheme=dark] .archive-page {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
}
html[data-color-scheme=light] .archive-page--prev, html[data-color-scheme=light] .archive-page--next {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .archive-page--prev, html[data-color-scheme=dark] .archive-page--next {
  background: #1a1a1c;
}
.archive-page.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Aside */
.archive-aside {
  display: none;
}
@media (min-width: 992px) {
  .archive-aside {
    display: grid;
    gap: 1.25rem;
    position: sticky;
    top: calc(3.625rem + 1.25rem);
    align-self: start;
  }
}

/* Reusable small cards */
.archive-card--about,
.archive-card--cats,
.archive-card--adbox {
  padding: 1.25rem;
  border-radius: 18px;
  border: 1px solid;
}
html[data-color-scheme=light] .archive-card--about,
html[data-color-scheme=light] .archive-card--cats,
html[data-color-scheme=light] .archive-card--adbox {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .archive-card--about,
html[data-color-scheme=dark] .archive-card--cats,
html[data-color-scheme=dark] .archive-card--adbox {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.archive-card__title {
  margin: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.archive-card__text {
  margin: 0;
  font-size: 1rem;
}

/* Category index */
.archive-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.archive-cats__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
}
html[data-color-scheme=light] .archive-cats__link {
  color: #000000;
}
html[data-color-scheme=dark] .archive-cats__link {
  color: #ffffff;
}
html[data-color-scheme=light] .archive-cats__link:hover {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .archive-cats__link:hover {
  background: #2c2c2f;
  border-color: rgba(255, 255, 255, 0.12);
}

.archive-cats__name {
  font-size: 1rem;
}

.archive-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2ch;
  height: 1.5rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}
html[data-color-scheme=light] .archive-badge {
  background: #f3f3f3;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .archive-badge {
  background: #1a1a1c;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Media safety */
.archive :where(img, video, svg, canvas) {
  max-width: 100%;
  height: auto;
  display: block;
}

.search-page {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding-inline: 1rem;
}
.search-page__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 992px) {
  .search-page__grid {
    grid-template-columns: 1.8fr 0.9fr;
  }
}
.search-page__head {
  margin-bottom: 1.25rem;
}
.search-page__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.5rem;
}
html[data-color-scheme=light] .search-page__hint {
  color: #757575;
}
html[data-color-scheme=dark] .search-page__hint {
  color: #9a9a9a;
}
.search-page .island {
  border: 1px solid;
  border-radius: 24px;
  padding: 2rem;
}
html[data-color-scheme=light] .search-page .island {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .search-page .island {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.search-page__field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid;
  border-radius: 24px;
  margin-bottom: 1.25rem;
}
html[data-color-scheme=light] .search-page__field {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .search-page__field {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
}
.search-page__field .input {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  line-height: 1.6;
}
html[data-color-scheme=light] .search-page__field .input {
  color: #000000;
}
html[data-color-scheme=dark] .search-page__field .input {
  color: #ffffff;
}
.search-page__field .input:focus {
  outline: none;
}
.search-page__list {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-page__result {
  border: 1px solid;
  border-radius: 24px;
  overflow: hidden;
}
html[data-color-scheme=light] .search-page__result {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .search-page__result {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.search-page__result .article {
  padding: 1.25rem;
  display: grid;
  gap: 0.625rem;
}
.search-page__result-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 600;
}
.search-page__result-excerpt {
  margin: 0;
  font-size: 1rem;
}
.search-page__empty {
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed;
  border-radius: 24px;
}
html[data-color-scheme=light] .search-page__empty {
  border-color: rgba(0, 0, 0, 0.2);
  color: #757575;
}
html[data-color-scheme=dark] .search-page__empty {
  border-color: rgba(255, 255, 255, 0.12);
  color: #9a9a9a;
}
.search-page__side {
  display: grid;
  gap: 2rem;
}
.search-page__card {
  padding: 0;
}
.search-page__ad {
  border-radius: 24px;
  overflow: hidden;
  border: 1px dashed;
  padding: 0.75rem;
}
html[data-color-scheme=light] .search-page__ad {
  border-color: rgba(0, 0, 0, 0.2);
  background: #f3f3f3;
}
html[data-color-scheme=dark] .search-page__ad {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1a1a1c;
}
.search-page__ad--banner {
  margin-bottom: 1.25rem;
}
.search-page__ad--infeed {
  margin-top: 1.25rem;
}
.search-page .icon {
  font-size: 1.125rem;
  line-height: 1;
}
.search-page .icon-sm {
  font-size: 1rem;
  line-height: 1;
}

.stack, .resume__row {
  display: grid;
  gap: 2rem;
}

.stack--tight {
  gap: 1.25rem;
}

.cluster, .resume__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.island {
  border: 1px solid;
  border-radius: 24px;
  overflow: hidden;
}
html[data-color-scheme=light] .island {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .island {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.island--soft {
  border: 1px solid;
  border-radius: 24px;
}
html[data-color-scheme=light] .island--soft {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .island--soft {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.resume {
  width: 68.75rem;
  max-width: calc(100% - 2 * 1rem);
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}
.resume__head.island {
  padding: 2rem;
}
.resume__id {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.resume__avatar {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  border: 1px solid;
  overflow: hidden;
}
html[data-color-scheme=light] .resume__avatar {
  border-color: rgba(0, 0, 0, 0.2);
  background: #f3f3f3;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .resume__avatar {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1a1a1c;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}
.resume__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.resume__who h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}
.resume__who p {
  margin: 0.375rem 0 0;
  font-size: 1rem;
}
html[data-color-scheme=light] .resume__who p {
  color: #757575;
}
html[data-color-scheme=dark] .resume__who p {
  color: #9a9a9a;
}
.resume__meta {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .resume__meta {
  color: #757575;
}
html[data-color-scheme=dark] .resume__meta {
  color: #9a9a9a;
}
.resume__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .resume__grid {
    grid-template-columns: 1.6fr 0.9fr;
  }
}
.section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid;
}
html[data-color-scheme=light] .section-head {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .section-head {
  border-color: rgba(255, 255, 255, 0.12);
}
.section-head h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
}
.section-head .hint {
  margin-left: auto;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .section-head .hint {
  color: #757575;
}
html[data-color-scheme=dark] .section-head .hint {
  color: #9a9a9a;
}

.section-body {
  padding: 2rem;
}

.timeline {
  position: relative;
}

.timeline__rail {
  position: absolute;
  inset: 0 0 0 1.15rem;
  border-left: 2px solid;
}
html[data-color-scheme=light] .timeline__rail {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .timeline__rail {
  border-color: rgba(255, 255, 255, 0.12);
}

.t-item {
  position: relative;
  display: grid;
  gap: 0.625rem;
  padding-left: 2.6rem;
}

.t-item + .t-item {
  margin-top: 2rem;
}

.t-dot {
  position: absolute;
  left: 0.65rem;
  top: 0.45rem;
  inline-size: 1rem;
  block-size: 1rem;
  border-radius: 50%;
  border: 2px solid;
}
html[data-color-scheme=light] .t-dot {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .t-dot {
  background: #111113;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.t-icon {
  position: absolute;
  left: -0.05rem;
  top: -0.05rem;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid;
}
html[data-color-scheme=light] .t-icon {
  background: #f3f3f3;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .t-icon {
  background: #1a1a1c;
  border-color: rgba(255, 255, 255, 0.12);
}
.t-icon i {
  font-size: 1.125rem;
}

.t-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.t-role {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 600;
}

.t-org {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .t-org {
  color: #757575;
}
html[data-color-scheme=dark] .t-org {
  color: #9a9a9a;
}

.t-meta {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .t-meta {
  color: #757575;
}
html[data-color-scheme=dark] .t-meta {
  color: #9a9a9a;
}

.t-body {
  font-size: 1rem;
  line-height: 1.6;
}

.t-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tag {
  display: inline-block;
  border-radius: 999px;
  font-size: 0.875rem;
  padding: 0 0.75rem;
  line-height: 1.9;
}
html[data-color-scheme=light] .tag {
  background: #f1f1f1;
  color: #4d4d4d;
}
html[data-color-scheme=dark] .tag {
  background: #1c1c1f;
  color: #c9c9c9;
}

.company {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid;
}
html[data-color-scheme=light] .company {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .company {
  border-color: rgba(255, 255, 255, 0.12);
}
.company img {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 4px;
  object-fit: cover;
}
.company .c-name {
  font-size: 0.875rem;
}

.stepper {
  padding: 0;
}

.steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 2rem;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
}

.badge-num {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid;
}
html[data-color-scheme=light] .badge-num {
  color: #000000;
  background: #ededed;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .badge-num {
  color: #ffffff;
  background: #2c2c2f;
  border-color: rgba(255, 255, 255, 0.12);
}

.step h4 {
  margin: 0.1rem 0 0;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 600;
}

.step p {
  margin: 0.25rem 0 0;
  font-size: 1rem;
}

.skills {
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
}

.skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 540px) {
  .skill-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.skill {
  display: grid;
  gap: 0.4rem;
}

.skill__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
html[data-color-scheme=light] .skill__label {
  color: #757575;
}
html[data-color-scheme=dark] .skill__label {
  color: #9a9a9a;
}

.bar {
  inline-size: 100%;
  block-size: 0.45rem;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  border: 1px solid;
}
html[data-color-scheme=light] .bar {
  background: #ededed;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .bar {
  background: #2c2c2f;
  border-color: rgba(255, 255, 255, 0.12);
}

.bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  block-size: 100%;
  inline-size: var(--val, 60%);
}
html[data-color-scheme=light] .bar > i {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .bar > i {
  background: #1a1a1c;
}

.links {
  display: grid;
  gap: 0.5rem;
  font-size: 1rem;
  padding: 2rem;
}

.links a {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  text-decoration: none;
  border: 1px solid;
  border-radius: 24px;
  padding: 0.35rem 0.7rem;
}
html[data-color-scheme=light] .links a {
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .links a {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-color-scheme=light] .links a:hover {
  background: #f1f1f1;
}
html[data-color-scheme=dark] .links a:hover {
  background: #1c1c1f;
}

.stats {
  padding: 2rem;
  display: grid;
  gap: 1.25rem;
}

.stat {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.kv {
  display: grid;
  gap: 0.1rem;
}

.kv .k {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .kv .k {
  color: #757575;
}
html[data-color-scheme=dark] .kv .k {
  color: #9a9a9a;
}

.kv .v {
  font-size: 1.125rem;
  font-weight: 600;
}

.awards {
  padding: 2rem;
  display: grid;
  gap: 0.75rem;
}

.award {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.award__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.award__meta {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .award__meta {
  color: #757575;
}
html[data-color-scheme=dark] .award__meta {
  color: #9a9a9a;
}

.projects {
  padding: 2rem;
}

.projects__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 540px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .projects__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid;
  border-radius: 24px;
  overflow: hidden;
}
html[data-color-scheme=light] .project {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2), 0 4px 10px -6px rgba(0, 0, 0, 0.16);
}
html[data-color-scheme=dark] .project {
  background: #151518;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4), 0 4px 20px -8px rgba(0, 0, 0, 0.4);
}

.project__media {
  aspect-ratio: 16/9;
}
html[data-color-scheme=light] .project__media {
  background: #f3f3f3;
}
html[data-color-scheme=dark] .project__media {
  background: #1a1a1c;
}

.project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.001);
}

.project__body {
  padding: 1.25rem;
  display: grid;
  gap: 0.625rem;
}

.project__title {
  font-size: 1.125rem;
  line-height: 1.2;
  margin: 0;
  font-weight: 600;
}

.project__meta {
  font-size: 0.875rem;
}
html[data-color-scheme=light] .project__meta {
  color: #757575;
}
html[data-color-scheme=dark] .project__meta {
  color: #9a9a9a;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.project__foot {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid;
}
html[data-color-scheme=light] .project__foot {
  border-color: rgba(0, 0, 0, 0.2);
}
html[data-color-scheme=dark] .project__foot {
  border-color: rgba(255, 255, 255, 0.12);
}

.icon {
  font-size: 1.125rem;
  line-height: 1;
}

.icon-sm {
  font-size: 1rem;
}

/*# sourceMappingURL=styles.css.map */