/* //////////////////////////////////////////////////////////////////////////

   Ikiru 1.0.0, CSS Part I

   //////////////////////////////////////////////////////////////////////////

   I. Customize
   |
   ├─ Global settings
   ├─ Fonts
   ├─ Light version
   ├─ Sepia version
   ├─ Dark version
   ├─ Auto dark version
   ├─ Appearance
   ├─ Accent elements
   ├─ Automatic logo/icon
   └─ Reduce motion

   II. Theme
   |
   ├─ 1.Reset
   ├─ 2.Global
   ├─ 3.Layout
   ├─ 4.Header
   ├─ 5.Loop
   ├─ 6.Item
   ├─ 7.Pagination
   ├─ 8.Widgets
   ├─ 9.Menu
   ├─ 10.Highlight
   ├─ 11.Archive
   └─ 12.Footer

   //////////////////////////////////////////////////////////////////////////

   I. Customize

   ////////////////////////////////////////////////////////////////////////// */

:root {

   /* Global settings
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */

   /* Logo */
   --height-logo-header: 32px;
   --height-logo-footer: 32px;
   --height-logo-mobile-header: 30px;
   --height-logo-mobile-footer: 30px;

   /* Gap */
   --gap-grid: max(34px, 4vw);
   --gap-site: max(10px, 4vw);
   --gap-row: max(50px, 4vw);
   --gap-mini: max(14px, 1vw);
   --gap-item: var(--gap-grid);

   /* Padding */
   --padding-site-top: 35px;

   /* Radius */
   --radius-full: 999px;
   --radius-large: calc(var(--radius-extra-small) * 2.75);
   --radius-medium: calc(var(--radius-extra-small) * 2);
   --radius-small: calc(var(--radius-extra-small) * 1.6);
   --radius-extra-small: max(10px, .5vw);
   --radius-ui: 3px;

   /* Border */
   --border-thin: 1px solid currentColor;
   --border-medium: 2px solid currentColor;
   --border-box-shadow-top: inset 0 1px 0 0 color-mix(in srgb, currentColor 80%, transparent);
   --border-box-shadow-bottom: inset 0 -1px 0 0 color-mix(in srgb, currentColor 80%, transparent);

   /* Accent */
   --ghost-accent-color: #ff4d82;

   /* Outline */
   --outline: 2px solid #3b82f6;

   /* Content */
   --column-count-footer-navigation: 4;
   --width-site: 1200px;
   --width-wide: 1000px;
   --width-full: var(--width-site);
   --width-regular: 786px;

   --full: minmax(var(--gap-site), 1fr);

   --content-site: min(var(--width-site), max(0px, calc(100% - var(--gap-site) * 2)));
   --content-regular: min(var(--width-regular), max(0px, calc(100% - var(--gap-site) * 2)));
   --content-wide: min(calc(var(--width-wide) - var(--width-regular)), max(0px, calc(100% - var(--content-regular))));
   --content-full: min(max(0px, calc(var(--width-full) - var(--width-wide))), max(0px, calc(100% - var(--content-regular) - var(--content-wide))));
   --content-item: calc(100% / .7 + var(--gap-item));
   --content-wide-half: calc(var(--content-wide) / 2);
   --content-full-half: calc(var(--content-full) / 2);

   --grid-template-content-left: [full-start wide-start regular-start] var(--content-regular) [regular-end] minmax(0, var(--content-wide)) [wide-end] minmax(0, var(--content-full)) [full-end];
   --grid-template-content-center: [full-start] minmax(0, var(--content-full-half)) [wide-start] minmax(0, var(--content-wide-half)) [regular-start] var(--content-regular) [regular-end] minmax(0, var(--content-wide-half)) [wide-end] minmax(0, var(--content-full-half)) [full-end];

   --grid-template-site: [full-start] var(--full) [site-start] var(--content-site) [site-end] var(--full) [full-end];

   /* Fonts
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   --font-family-system: system-ui, sans-serif;
   --font-family-caption: var(--font-family-system);
   --font-family-body: var(--gh-font-body, var(--font-family-system));
   --font-family-subheading: var(--gh-font-body, var(--font-family-body));
   --font-family-heading: var(--gh-font-body, var(--font-family-body));
   --font-family-display: var(--gh-font-heading, var(--font-family-body));

   /* Fonts weight */
   --font-weight-regular: 400;
   --font-weight-medium: 450;
   --font-weight-semibold: 580;
   --font-weight-display: 400;

   /* Fonts size */
   --scale-min: 600;
   --scale-max: 1540;
   --scale-scope: calc(var(--scale-max) - var(--scale-min));

   --unit-rem: 1rem;
   --px-per-rem: 16;

   --font-size-max-hero: 4.5;
   --font-size-max-xxxl: 3.75;
   --font-size-max-xxl: 3;
   --font-size-max-xl: 2.5;
   --font-size-max-l: 2.1;
   --font-size-max-m: 1.625;
   --font-size-max-r: 1.375;
   --font-size-max-s: 1.25;
   --font-size-max-xs: 1.125;
   --font-size-max-xxs: 1;
   --font-size-max-xxxs: .875;

   --font-size-min-hero: 2.5;
   --font-size-min-xxxl: 2.25;
   --font-size-min-xxl: 2;
   --font-size-min-xl: 1.75;
   --font-size-min-l: 1.5;
   --font-size-min-m: 1.375;
   --font-size-min-r: 1.25;
   --font-size-min-s: 1.125;
   --font-size-min-xs: 1.0625;
   --font-size-min-xxs: 1;
   --font-size-min-xxxs: .75;

   --font-size-max-logo: 2.2;
   --font-size-min-logo: 1.5;

   --font-size-body: var(--font-size-r);
   --font-size-input: var(--font-size-xxs);
   --font-size-caption: .75rem;

   /* hero */
   --font-size-hero: clamp(calc(var(--font-size-min-hero) * var(--unit-rem)), calc((((var(--font-size-max-hero) - var(--font-size-min-hero)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-hero) * var(--px-per-rem) - ((var(--font-size-max-hero) - var(--font-size-min-hero)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-hero) * var(--unit-rem)));

   /* xxxl */
   --font-size-xxxl: clamp(calc(var(--font-size-min-xxxl) * var(--unit-rem)), calc((((var(--font-size-max-xxxl) - var(--font-size-min-xxxl)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-xxxl) * var(--px-per-rem) - ((var(--font-size-max-xxxl) - var(--font-size-min-xxxl)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-xxxl) * var(--unit-rem)));

   /* xxl */
   --font-size-xxl: clamp(calc(var(--font-size-min-xxl) * var(--unit-rem)), calc((((var(--font-size-max-xxl) - var(--font-size-min-xxl)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-xxl) * var(--px-per-rem) - ((var(--font-size-max-xxl) - var(--font-size-min-xxl)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-xxl) * var(--unit-rem)));

   /* xl */
   --font-size-xl: clamp(calc(var(--font-size-min-xl) * var(--unit-rem)), calc((((var(--font-size-max-xl) - var(--font-size-min-xl)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-xl) * var(--px-per-rem) - ((var(--font-size-max-xl) - var(--font-size-min-xl)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-xl) * var(--unit-rem)));

   /* l */
   --font-size-l: clamp(calc(var(--font-size-min-l) * var(--unit-rem)), calc((((var(--font-size-max-l) - var(--font-size-min-l)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-l) * var(--px-per-rem) - ((var(--font-size-max-l) - var(--font-size-min-l)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-l) * var(--unit-rem)));

   /* m */
   --font-size-m: clamp(calc(var(--font-size-min-m) * var(--unit-rem)), calc((((var(--font-size-max-m) - var(--font-size-min-m)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-m) * var(--px-per-rem) - ((var(--font-size-max-m) - var(--font-size-min-m)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-m) * var(--unit-rem)));

  /* r */
   --font-size-r: clamp(calc(var(--font-size-min-r) * var(--unit-rem)), calc((((var(--font-size-max-r) - var(--font-size-min-r)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-r) * var(--px-per-rem) - ((var(--font-size-max-r) - var(--font-size-min-r)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-r) * var(--unit-rem)));

   /* s */
   --font-size-s: clamp(calc(var(--font-size-min-s) * var(--unit-rem)), calc((((var(--font-size-max-s) - var(--font-size-min-s)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-s) * var(--px-per-rem) - ((var(--font-size-max-s) - var(--font-size-min-s)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-s) * var(--unit-rem)));

   /* xs */
   --font-size-xs: clamp(calc(var(--font-size-min-xs) * var(--unit-rem)), calc((((var(--font-size-max-xs) - var(--font-size-min-xs)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-xs) * var(--px-per-rem) - ((var(--font-size-max-xs) - var(--font-size-min-xs)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-xs) * var(--unit-rem)));

   /* xxs */
   --font-size-xxs: clamp(calc(var(--font-size-min-xxs) * var(--unit-rem)), calc((((var(--font-size-max-xxs) - var(--font-size-min-xxs)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-xxs) * var(--px-per-rem) - ((var(--font-size-max-xxs) - var(--font-size-min-xxs)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-xxs) * var(--unit-rem)));

   /* xxxs */
   --font-size-xxxs: clamp(calc(var(--font-size-min-xxxs) * var(--unit-rem)), calc((((var(--font-size-max-xxxs) - var(--font-size-min-xxxs)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-xxxs) * var(--px-per-rem) - ((var(--font-size-max-xxxs) - var(--font-size-min-xxxs)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-xxxs) * var(--unit-rem)));

   /* logo */
   --font-size-logo: clamp(calc(var(--font-size-min-logo) * var(--unit-rem)), calc((((var(--font-size-max-logo) - var(--font-size-min-logo)) * var(--px-per-rem) / var(--scale-scope)) * 100 * 1vw) + ((var(--font-size-min-logo) * var(--px-per-rem) - ((var(--font-size-max-logo) - var(--font-size-min-logo)) * var(--px-per-rem) / var(--scale-scope) * var(--scale-min))) / var(--px-per-rem) * var(--unit-rem))), calc(var(--font-size-max-logo) * var(--unit-rem)));

   /* Link */
   --text-decoration-line-link: underline;
   --text-decoration-thickness-link: clamp(1px, .03em, 2px);
   --text-underline-offset-link: .1em;

   /* Light version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   --color-font-one: #101828;
   --color-font-two: #fff;
   --color-font-black: #101828;
   --color-font-white: #fff;
   --color-one: var(--color-font-one);
   --color-two: #f7f7f8;
   --color-three: #e0e2e8;
   --color-four: #efeef0;
   --color-body: var(--color-font-two);
   --color-bg: var(--color-two);

   --color-font-bold: var(--color-font-two);
   --color-font-cta: var(--color-font-one);
   --color-font-pagination: var(--color-font-one);
   --color-font-rail: var(--color-font-one);
   --color-font-rail-control: var(--color-font-two);
   --color-bg-bold: var(--color-one);
   --color-bg-cta: var(--color-four);
   --color-bg-pagination: var(--color-four);
   --color-bg-rail: var(--color-bg);
   --color-bg-rail-control: var(--color-one);
   --opacity-caption: .72;
}

/* Sepia version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-color-scheme="sepia"],
[data-color-light-scheme="sepia"] {
   --color-font-one: #2b2622;
   --color-font-two: #f7f1e7;
   --color-font-black: #2b2622;
   --color-font-white: #f7f1e7;
   --color-two: #eee6da;
   --color-three: #f3ede4;
   --color-four: #dccdb9;
}

/* Dark version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-color-scheme="dark"] {
   --color-font-one: #fafafa;
   --color-font-two: #11131d;
   --color-font-black: #11131d;
   --color-font-white: #fafafa;
   --color-two: #1c202a;
   --color-three: #1b1c27;
   --color-four: #292c38;
   --color-bg-bold: color-mix(in srgb, var(--color-one) 92%, var(--color-body));
   --opacity-caption: .6;
}

/* Auto dark version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme:dark) {
   [data-color-scheme="auto"] {
      --color-font-one: #fafafa;
      --color-font-two: #11131d;
      --color-font-black: #11131d;
      --color-font-white: #fafafa;
      --color-two: #1c202a;
      --color-three: #1b1c27;
      --color-four: #292c38;
      --color-bg-bold: color-mix(in srgb, var(--color-one) 92%, var(--color-body));
      --opacity-caption: .6;
   }
}

/* Appearance
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) {
   --color-font-cta: var(--color-font-bold);
   --color-font-pagination: var(--color-font-bold);
   --color-font-rail: var(--color-font-bold);
   --color-font-rail-control: var(--color-bg-bold);
   --color-bg-cta: var(--color-bg-bold);
   --color-bg-pagination: var(--color-bg-bold);
   --color-bg-rail: var(--color-bg-bold);
   --color-bg-rail-control: var(--color-font-bold);
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) {
      --color-font-cta: var(--color-font-bold);
      --color-font-pagination: var(--color-font-bold);
      --color-font-rail: var(--color-font-bold);
      --color-font-rail-control: var(--color-bg-bold);
      --color-bg-cta: var(--color-bg-bold);
      --color-bg-pagination: var(--color-bg-bold);
      --color-bg-rail: var(--color-bg-bold);
      --color-bg-rail-control: var(--color-font-bold);
   }
}

/* Accent elements
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-accent-elements="CTA and pagination"],
[data-accent-elements="CTA and featured blocks"] {
   --color-font-cta: var(--ghost-accent-contrast);
   --color-bg-cta: var(--ghost-accent-color);
}

[data-accent-elements="CTA and pagination"] {
   --color-font-pagination: var(--ghost-accent-contrast);
   --color-bg-pagination: var(--ghost-accent-color);
}

/* Automatic logo/icon
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme:dark) {
   [data-color-scheme="auto"] [data-auto-scheme="light"],
   [data-color-scheme="auto"] .menu-brand:not(:has(> [data-auto-scheme="dark"])) {
      display: none;
   }
}

@media (prefers-color-scheme:light) {
   [data-color-scheme="auto"] [data-auto-scheme="dark"],
   [data-color-scheme="auto"] .menu-brand:not(:has(> [data-auto-scheme="light"])) {
      display: none;
   }
}

@media (prefers-color-scheme:dark) and (min-width:769px) {
   [data-color-scheme="auto"] .menu-rail:not(:has(.menu-brand > [data-auto-scheme="dark"])) .menu-toggle {
      align-self: start;
   }
}

@media (prefers-color-scheme:light) and (min-width:769px) {
   [data-color-scheme="auto"] .menu-rail:not(:has(.menu-brand > [data-auto-scheme="light"])) .menu-toggle {
      align-self: start;
   }
}

/* Reduce motion
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-reduced-motion:reduce) {
   * {
      transition-duration: 0s !important;
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
   }
}

/* //////////////////////////////////////////////////////////////////////////

   II. Theme

   ////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------------
   1.Reset
   -------------------------------------------------------------------------- */
html:has(:target){scroll-behavior:smooth}html{line-height:1.15;scroll-behavior:auto;-webkit-text-size-adjust:100%}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{margin:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{text-decoration:underline dotted}pre,code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;border-radius:0;background:transparent;box-shadow:none}button,input,optgroup,select,textarea,figure,fieldset,legend,ul,li{margin:0;padding:0;border:0}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}fieldset{padding:0.35em 0.75em 0.625em}textarea{resize:vertical}img,picture{max-width:100%}picture,article,aside,details,footer,header,img,nav,section{display:block}*,*::before,*::after{box-sizing:border-box}b>strong{font-weight:bold}

/* --------------------------------------------------------------------------
   2.Global
   -------------------------------------------------------------------------- */
body {
   font-family: var(--font-family-body);
   font-size: var(--font-size-body);
   font-weight: var(--font-weight-regular);
   line-height: 1.5;
   word-wrap: break-word;
   word-break: break-word;
   color: var(--color-font-one);
   background-color: var(--color-body);
}

/* Typography
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,h2,h3,h4,h5,h6 {
   width: 100%;
}

h1 {
   font-family: var(--font-family-display);
   font-weight: var(--font-weight-display);
}

/* Links
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
   text-decoration: none;
   color: var(--color-font-one);
}

:is(.g-terms) a,
:is(main, nav, footer, .menu-paths, .menu-bookmarks, .custom-img) a:not(.g-btn, .widget-item):hover {
   text-decoration-line: var(--text-decoration-line-link);
   text-decoration-thickness: var(--text-decoration-thickness-link);
   text-underline-offset: var(--text-underline-offset-link);
}

/* Input & textarea
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
input,
textarea {
   font-family: var(--font-family-body);
   line-height: 1.3;
   color: var(--color-font-one);
}

input::placeholder,
textarea::placeholder {
   transition: opacity .3s ease;
   opacity: 1;
   color: var(--color-font-one);
}

input:focus::placeholder,
textarea:focus::placeholder {
   opacity: var(--opacity-caption);
}

/* Figcaption
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
figcaption {
   font-size: var(--font-size-caption);
   margin-top: 8px;
   opacity: var(--opacity-caption);
}

/* Flexbox
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-flex {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
}

/* Grid
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-grid {
   display: grid;
   grid-auto-columns: 1fr;
   gap: var(--gap-grid);
   width: 100%;
}

.g-grid.no-gap {
   gap: 0;
}

/* Path
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-path {
   --v-padding-item-block: 0px;
   position: relative;
   gap: calc(var(--gap-mini) / 3);
   width: 100%;
   margin: 0;
   padding-left: 0;
   list-style: none;
}

.g-path li {
   position: relative;
   padding: var(--v-padding-item-block) 0 calc(var(--v-padding-item-block) + .4375em) 30px;
}

.g-path li::before {
   position: absolute;
   z-index: 1;
   top: calc(var(--v-padding-item-block) + .5lh - 4.5px);
   left: 4px;
   content: '';
   width: 9px;
   height: 9px;
   border: var(--border-thin);
   border-radius: var(--radius-full);
   background-color: currentColor;
}

.g-path li:not(:last-child)::after {
   position: absolute;
   top: calc(var(--v-padding-item-block) + .5lh + 4.5px);
   bottom: calc(0px - var(--v-padding-item-block) - .5lh + 4.5px);
   left: 8px;
   content: '';
   width: 1px;
   background-color: currentColor;
}

/* Logo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-logo {
   line-height: 0;
}

.g-logo a {
   display: inline-block;
   max-width: 100%;
}

.g-logo img {
   width: auto;
   max-width: 100%;
   object-fit: contain;
   object-position: left;
}

header .g-logo img {
   height: var(--height-logo-header);
}

footer .g-logo img {
   height: var(--height-logo-footer);
}

[data-logo-text="true"] {
   font-family: var(--font-family-display);
   font-size: var(--font-size-logo);
   font-weight: var(--font-weight-display);
   line-height: 1;
   max-width: min(360px, 100%);
}

/* RWD — Logo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   header .g-logo img {
      height: var(--height-logo-mobile-header);
   }

   footer .g-logo img {
      height: var(--height-logo-mobile-footer);
   }
}

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-img,
.g-img picture,
.g-img img {
   display: block;
}

.g-img picture,
.g-img img {
   width: 100%;
   height: 100%;
}

.g-img img {
   object-fit: cover;
}

/* Orientation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-orientation {
   margin: 0;
}

.g-orientation.is-portrait { aspect-ratio: 3/4; }
.g-orientation.is-square { aspect-ratio: 1/1; }
.g-orientation.is-classic { aspect-ratio: 4/3; }
.g-orientation.is-landscape { aspect-ratio: 16/9; }
.g-orientation.is-ultrawide { aspect-ratio: 21/9; }

/* Headings
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-font-hero,
.g-font-xxxl {
   font-family: var(--font-family-display);
   font-weight: var(--font-weight-display);
}

.g-font-xxl {
   font-family: var(--font-family-heading);
   font-weight: var(--font-weight-regular);
}

.g-font-xl,
.g-font-l {
   font-family: var(--font-family-subheading);
   font-weight: var(--font-weight-regular);
}

.g-font-m,
.g-font-r,
.g-font-s,
.g-font-xs,
.g-font-xxs {
   font-family: var(--font-family-body);
   font-weight: var(--font-weight-regular);
}

.g-font-caption {
   font-family: var(--font-family-caption);
}

/* Sizes */
.g-font-hero { font-size: var(--font-size-hero); }
.g-font-xxxl { font-size: var(--font-size-xxxl); }
.g-font-xxl { font-size: var(--font-size-xxl); }
.g-font-xl { font-size: var(--font-size-xl); }
.g-font-l { font-size: var(--font-size-l); }
.g-font-m { font-size: var(--font-size-m); }
.g-font-r { font-size: var(--font-size-r); }
.g-font-s { font-size: var(--font-size-s); }
.g-font-xs { font-size: var(--font-size-xs); }
.g-font-xxs { font-size: var(--font-size-xxs); }
.g-font-caption { font-size: var(--font-size-caption); }

/* Display */
.g-font-hero,
.g-font-xxxl,
.g-font-xxl,
.g-font-xl,
.g-font-l,
.g-font-m,
.g-font-r,
.g-font-s,
.g-font-xs,
.g-font-xxs,
.g-font-caption {
   display: block;
   margin: 0;
}

/* Line height */
.g-font-hero,
.g-font-xxxl {
   line-height: 1.1;
}

.g-font-xxl {
   line-height: 1.2;
}

.g-font-xl,
.g-font-l,
.g-font-m,
.g-font-r,
.g-font-s,
.g-font-xs,
.g-font-xxs,
.g-font-caption {
   line-height: 1.3;
}

/* Path title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-path-title {
   --v-size-icon: clamp(33px, 1vw, 60px);
   align-items: center;
   grid-template-columns: auto minmax(0, max-content);
   gap: max(8px, .3em);
   width: fit-content;
   max-width: 100%;
   margin: 0;
}

h1.g-path-title {
   --v-size-icon: clamp(36px, 4vw, 54px);
}

.g-path-title a {
   color: inherit;
}

.g-path-title > span {
   line-height: 1;
   min-width: 0;
}

.g-path-title > svg {
   width: var(--v-size-icon);
   height: var(--v-size-icon);
}

/* Hover
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-hover {
   transition: transform .3s ease;
}

.g-hover:hover {
   transform: translateY(-3px);
}

/* RWD — Hover
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   .g-hover:hover {
      transform: translateY(0);
   }
}

/* Button
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-btn {
   font-family: var(--font-family-body);
   font-weight: var(--font-weight-medium);
   line-height: 1.3;
   position: relative;
   z-index: 1;
   display: inline-block;
   padding: .3em 1em;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   color: var(--color-font-one);
   background-color: transparent;
}

.g-btn,
.g-btn::before {
   border-radius: var(--radius-full);
}

.g-btn::before {
   position: absolute;
   z-index: -1;
   inset: 0;
   content: '';
   transition: opacity .2s ease;
   background-color: var(--color-bg);
}

.g-btn.is-cta {
   color: var(--color-font-cta);
}

.g-btn.is-cta::before {
   background-color: var(--color-bg-cta);
}

.g-btn:hover {
   text-decoration: none;
}

.g-btn:hover::before {
   opacity: .8;
}

/* Alternative */
.g-btn-alt {
   display: inline-block;
}

.g-btn-alt::after,
.g-btn-alt.is-left::before {
   font-family: var(--font-family-system);
   font-size: 90%;
   display: inline-block;
   transition: transform .3s ease;
}

.g-btn-alt::after {
   content: '→';
   margin-left: .3em;
}

.g-btn-alt.is-left::before {
   content: '←';
   margin-right: .3em;
}

.g-btn-alt.is-left::after {
   display: none;
}

.g-btn-alt:hover::after {
   transform: translateX(3px);
}

.g-btn-alt.is-left:hover::before {
   transform: translateX(-3px);
}

/* Background
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-bg {
   background-color: var(--v-color-bg, var(--color-bg));
}

.g-bg-accent {
   color: var(--ghost-accent-contrast) !important;
   background-color: var(--ghost-accent-color);
}

.g-bg-accent a {
   color: inherit;
}

/* Hidden
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-visually-hidden[class] {
   position: absolute;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   white-space: nowrap;
   border: 0;
}

/* Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-meta {
   line-height: 1.5;
   gap: 0;
   box-shadow: var(--border-box-shadow-top);
   margin-top: calc(var(--gap-mini) * 2);
}

.g-meta a {
   display: inline-block;
   color: inherit;
}

/* Row, end and start */
.g-meta-row {
   align-items: center;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: var(--gap-mini);
   box-shadow: var(--border-box-shadow-bottom);
   padding: 10px 0;
}

.g-meta-row--start,
.g-meta-row--end {
   display: block;
}

.g-meta-row--end {
   white-space: nowrap;
   text-align: right;
}

.g-meta-row--break,
.g-meta-row--context {
   display: none;
}

/* Tags */
.g-meta-row:has(> .g-meta-row--tags):not(:has(> .g-meta-row--tags > a)) {
   display: none;
}

.g-meta-row--tags {
   column-width: 140px;
   column-count: 1;
}

.g-meta-row--tags > a {
   display: block;
   width: fit-content;
   break-inside: avoid;
}

.g-meta-row--tags:has(> a:nth-child(4)) {
   max-width: 600px;
   column-count: 2;
}

.g-meta-row--tags:has(> a:nth-child(7)) {
   max-width: 900px;
   column-count: 3;
}

.g-meta-row--tags:has(> a:nth-child(10)) {
   max-width: 100%;
   column-count: 4;
}

.g-meta-row--tags:has(> a:nth-child(13)) {
   max-width: 100%;
   column-count: 5;
}

/* Button */
.g-meta-row button.g-meta-row--end {
   padding: 0;
   cursor: pointer;
   color: inherit;
   border: 0;
   background-color: transparent;
}

/* RWD — Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   .g-meta-row--reading,
   .g-meta-row--prefix,
   .g-meta-row--separator {
      display: none;
   }

   .g-meta-row--break {
      display: block;
   }

   .g-meta-row--context {
      display: inline;
   }

   .g-meta-row--authors,
   .g-meta-row--start:has(> .g-meta-row--primary) {
      column-count: 1;
   }

   .g-meta-row--start > .g-meta-row--primary,
   .g-meta-row--authors > a {
      width: fit-content;
      break-inside: avoid;
   }

   .g-meta-row--start > .g-meta-row--primary {
      display: inline-block;
   }

   .g-meta-row--authors > a {
      display: block;
   }
}

@media (min-width:481px) {
   .g-meta-row--authors > a + a::before {
      display: inline-block;
      content: ',\00a0';
      text-decoration: none;
   }
}

/* Label
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-label {
   font-size: var(--font-size-s);
   line-height: 1.4;
   display: block;
   margin-bottom: .8em;
}

/* Split */
.g-label-split {
   align-items: start;
   grid-template-columns: 1fr auto;
   gap: 0;
}

.g-label-split small:first-child:last-child {
   grid-column: span 2;
}

.g-label-split small + small {
   display: flex;
   align-items: center;
   justify-content: end;
   gap: calc(var(--gap-mini) / 2);
}

.g-label-split small span.counter {
   font-size: var(--font-size-xs);
   opacity: var(--opacity-caption);
}

.g-label-split small span.comments::before {
   content: '(';
}

.g-label-split small span.comments::after {
   content: ')';
}

/* RWD — Label
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .g-label {
      font-size: var(--font-size-xs);
   }
}

/* Terms
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-terms {
   display: flex;
   align-items: center;
   margin: 0 0 0 .3vw;
}

.g-terms input[type="checkbox"] {
   display: grid;
   place-content: center;
   flex: 0 0 15px;
   width: 15px;
   height: 15px;
   margin: 0 4px 0 0;
   padding: 0;
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
   border: 1px solid;
   border-radius: var(--radius-full);
   background-color: transparent;
}

.g-terms input[type="checkbox"]::before {
   content: '';
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
   box-shadow: inset 10px 10px var(--color-font-one);
   width: 7px;
   height: 7px;
   transition: transform .2s ease-in-out;
   transform: scale(0);
}

.g-terms input[type="checkbox"]:focus-visible {
   outline: var(--outline);
}

.g-terms input[type="checkbox"]:checked::before {
   transform: scale(1);
}

/* --------------------------------------------------------------------------
   3.Layout
   -------------------------------------------------------------------------- */
.l-wrap {
   --v-width-rail: 70px;
   grid-template-columns: var(--v-width-rail) minmax(0, 1fr);
}

.l-wrap--content {
   padding-top: var(--padding-site-top);
}

.l-site,
.l-content {
   display: grid;
}

.l-site,
.l-content,
.l-item,
.l-site > *,
.l-content > * {
   width: 100%;
}

.l-stack {
   row-gap: var(--gap-row);
}

.l-site { grid-template-columns: var(--grid-template-site); }
.l-content.is-left { grid-template-columns: var(--grid-template-content-left); }
.l-content.is-center { grid-template-columns: var(--grid-template-content-center); }

.l-area-regular > * { grid-column: regular; }
.l-area-wide > * { grid-column: wide; }
.l-area-site > * { grid-column: site; }
.l-area-full > * { grid-column: full; }

.l-area-regular > :is(.l-site, .l-content),
.l-area-wide > :is(.l-site, .l-content),
.l-area-site > :is(.l-site, .l-content) {
   grid-column: full;
}

.l-content :is(.kg-width-wide, .kg-content-wide > div, blockquote.kg-blockquote-alt) {
   grid-column: wide;
}

.l-content .kg-width-full {
   grid-column: full;
}

.l-content.is-center {
   grid-column: 1/-1;
}

/* RWD — Layout
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .l-wrap {
      --v-height-menu: 50px;
      --v-inset-menu: 10px;
      --v-gap-menu-panel: 70px;
      --v-inset-menu-safe: max(var(--v-inset-menu), env(safe-area-inset-bottom));
      --v-offset-menu: calc(var(--v-height-menu) + var(--v-inset-menu-safe));
      --v-gap-menu-bottom: calc(var(--v-offset-menu) + var(--gap-site));
      grid-template-columns: minmax(0, 1fr);
   }

   .l-wrap--content {
      grid-column: 1;
      min-width: 0;
   }

   .l-content:is(.is-left, .is-center) {
      grid-template-columns: [full-start wide-start regular-start] minmax(0, 1fr) [regular-end wide-end full-end];
   }
}

/* --------------------------------------------------------------------------
   4.Header
   -------------------------------------------------------------------------- */
.m-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--gap-mini);
   min-height: 45px;
}

.m-header .g-logo {
   min-width: 0;
}

.m-header > :not(.g-logo) {
   flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5.Loop
   -------------------------------------------------------------------------- */
.m-loop {
   grid-template-columns: 1fr;
   gap: var(--gap-row);
   animation: slideTop 1s ease;
}

.m-loop.is-featured {
   padding: calc(var(--gap-grid) / 1.6);
   border-radius: var(--radius-large);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .m-loop.is-featured {
   --v-color-bg: var(--color-bg-bold);
   color: var(--color-font-bold);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .m-loop.is-featured a {
   color: inherit;
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .m-loop.is-featured {
      --v-color-bg: var(--color-bg-bold);
      color: var(--color-font-bold);
   }

   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .m-loop.is-featured a {
      color: inherit;
   }
}

.loop-label + .m-loop {
   margin-top: calc(0px - var(--gap-row));
}

/* /////// Animation /////// */
@keyframes slideTop {
   0% { transform: translateY(40px) }
   100% { transform: translateY(0) }
}

/* --------------------------------------------------------------------------
   6.Item
   -------------------------------------------------------------------------- */
.m-item {
   align-content: start;
   grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
   gap: var(--gap-item);
}

.item-header--title {
   max-width: 24ch;
}

.item-header--path {
   line-height: 1.4;
   display: inline-block;
   margin-bottom: 1.4em;
   padding: .1em 1em;
   color: var(--v-color, var(--color-font-one));
   border-radius: var(--radius-full);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .item-header--path {
   --v-color: var(--color-font-bold);
   --v-color-bg: var(--color-bg-bold);
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .item-header--path {
      --v-color: var(--color-font-bold);
      --v-color-bg: var(--color-bg-bold);
   }
}

/* Header and body */
.item-header,
.item-body {
   align-self: start;
   grid-column: 1/-1;
}

.m-item:has(> .item-img) > :is(.item-header, .item-body) {
   grid-column: 1;
}

.m-item:has(> .item-img) > .item-header {
   grid-row: 1;
}

.item-header--excerpt {
   max-width: var(--width-wide);
   margin: max(30px, 2vw) 0 0;
}

/* Image */
.item-img {
   align-self: start;
   grid-column: 2;
   grid-row: 1;
}

.item-img img,
.page-img img {
   border-radius: var(--radius-small);
}

.item-img figcaption,
.page-img figcaption {
   text-align: right;
}

/* Body & Full image */
.m-item:has(> .item-img) > .item-body:has(> .l-content.is-center),
.m-item.is-image-full > :is(.item-header, .item-img, .item-body) {
   grid-column: 1/-1;
}

.m-item:has(> .item-img) > .item-body,
.m-item.is-image-full > .item-img {
   grid-row: 2;
}

.m-item.is-image-full > .item-body {
   grid-row: 3;
}

/* RWD — Item
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .m-item {
      grid-template-columns: 1fr;
   }

   .m-item:not(.is-image-full) > .item-img {
      grid-column: 1/-1;
      grid-row: 2;
   }

   .m-item:not(.is-image-full):has(> .item-img) > .item-body {
      grid-row: 3;
   }

   .m-loop .m-item:has(> .item-img):not(:has(> .item-body)) > .item-header {
      grid-row: 2;
   }

   .m-loop .m-item:has(> .item-img):not(:has(> .item-body)) > .item-img {
      grid-row: 1;
   }
}

@media (min-width:769px) {
   .m-item:not(.is-image-full):has(> .item-img) > .item-body > .l-content.is-left.l-item {
      width: var(--content-item);
   }
}

@media (min-width:1281px) {
   .m-item:not(.is-image-full):has(> .item-body > .l-content.is-left) > .item-img {
      grid-row: 1 / span 2;
   }
}

/* --------------------------------------------------------------------------
   7.Pagination
   -------------------------------------------------------------------------- */
.pagination-btn {
   width: 100%;
   padding: max(10px, 1vw) max(30px, 5vw);
   color: var(--color-font-pagination);
}

.pagination-btn::before {
   background-color: var(--color-bg-pagination);
}

/* /////// data /////// */
[data-pagination="false"] {
   display: none;
}

/* --------------------------------------------------------------------------
   8.Widgets
   -------------------------------------------------------------------------- */
.widget-item {
   display: flex;
   align-items: center;
   border-radius: var(--radius-full);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .widget-item {
   --v-color-bg: var(--color-bg-bold);
   color: var(--color-font-bold);
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .widget-item {
      --v-color-bg: var(--color-bg-bold);
      color: var(--color-font-bold);
   }
}

.widget-item:has(.widget-item--img) {
   border-radius: var(--radius-medium);
}

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.widget-item--img {
   min-height: 100%;
}

.widget-item--img img {
   border-radius: var(--radius-medium) 0 0 var(--radius-medium);
}

/* Title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.widget-item--title {
   font-weight: var(--font-weight-regular);
   line-height: 1;
   margin: 0;
   padding: var(--gap-mini) calc(var(--gap-mini) * 1.2);
}

.widget-item:has(.widget-item--img) .widget-item--title {
   padding-left: calc(var(--gap-mini) / 1.4);
}

/* /////// data: Size /////// */
[data-widget-size] {
   --v-font-size-item-l: var(--font-size-l);
   --v-font-size-item-m: var(--font-size-m);
   --v-font-size-item-s: var(--font-size-r);

   --v-gap-item-l: var(--gap-mini);
   --v-gap-item-m: calc(var(--gap-mini) / 1.2);
   --v-gap-item-s: calc(var(--gap-mini) / 1.6);

   --v-height-item-l: clamp(70px, 6.4vw, 120px);
   --v-height-item-m: clamp(60px, 5.4vw, 100px);
   --v-height-item-s: clamp(50px, 4.4vw, 80px);
}

/* Items */
[data-widget-size="large"] {
   --v-font-size-item: var(--v-font-size-item-l);
   --v-gap-item: var(--v-gap-item-l);
   --v-height-item: var(--v-height-item-l);
}

[data-widget-size="medium"] {
   --v-font-size-item: var(--v-font-size-item-m);
   --v-gap-item: var(--v-gap-item-m);
   --v-height-item: var(--v-height-item-m);
}

[data-widget-size="small"] {
   --v-font-size-item: var(--v-font-size-item-s);
   --v-gap-item: var(--v-gap-item-s);
   --v-height-item: var(--v-height-item-s);
}

/* Result */
[data-widget-size] {
   gap: var(--v-gap-item);
}

[data-widget-size] :is(.widget-item, .widget-item--img) {
   height: var(--v-height-item);
}

[data-widget-size] .widget-item--title {
   font-size: var(--v-font-size-item);
}

/* RWD — Widgets
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   [data-widget-scroll] {
      --v-font-size-item: var(--v-font-size-item-l);
      --v-gap-item: var(--v-gap-item-l);
      --v-height-item: var(--v-height-item-l);
      overflow-x: auto;
      flex-wrap: nowrap;
      width: calc(100% + var(--gap-site) * 2);
      margin-inline: calc(var(--gap-site) * -1);
      padding-inline: var(--gap-site);
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--gap-site);
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
   }

   [data-widget-scroll]::-webkit-scrollbar {
      display: none;
   }

   [data-widget-scroll] > * {
      flex: 0 0 auto;
      scroll-snap-align: start;
   }

   [data-widget-scroll] .widget-item {
      white-space: nowrap;
   }
}

@media (max-width:480px) {
   [data-widget-size="large"]:not([data-widget-scroll]),
   [data-widget-size="medium"]:not([data-widget-scroll]) {
      --v-font-size-item: var(--v-font-size-item-s);
      --v-gap-item: var(--v-gap-item-s);
      --v-height-item: var(--v-height-item-s);
   }
}

/* --------------------------------------------------------------------------
   9.Menu
   -------------------------------------------------------------------------- */
.m-menu::before {
   position: fixed;
   z-index: 997;
   inset: 0;
   content: '';
   pointer-events: none;
   transition: backdrop-filter .4s ease, background-color .4s ease;
}

.m-menu button {
   cursor: pointer;
   color: inherit;
}

/* Rail
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-rail {
   --v-inset: 10px;
   position: fixed;
   z-index: 999;
   inset: var(--v-inset) 0 var(--v-inset) var(--v-inset);
   overflow: hidden;
   justify-items: center;
   grid-template-rows: 1fr auto 1fr;
   gap: var(--gap-mini);
   width: calc(var(--v-width-rail) - var(--v-inset));
   height: calc(100dvh - var(--v-inset) - var(--v-inset));
   color: var(--color-font-rail);
   border-radius: var(--radius-small);
   background-color: var(--color-bg-rail);
}

.menu-rail > * {
   position: relative;
   z-index: 1;
}

.menu-rail--item {
   place-items: center;
   min-height: 70px;
}

.menu-rail button:focus {
   outline: none;
}

/* /////// data: Rail /////// */
[data-menu-focus="keyboard"] .menu-rail button:focus {
   outline: var(--outline);
   outline-offset: 2px;
}

/* Toggle
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-toggle {
   align-self: center;
   width: 100%;
   height: 70px;
}

.menu-toggle:first-child {
   align-self: start;
}

.menu-toggle::before,
.menu-toggle::after {
   position: absolute;
   top: 50%;
   left: 50%;
   content: '';
   transition: transform .35s ease, height .35s ease;
}

.menu-toggle::before {
   width: 22px;
   height: 18px;
   transform: translate(-50%, -50%);
   border: var(--border-medium);
   border-radius: var(--radius-ui);
}

.menu-toggle::after {
   height: 14px;
   border-left: var(--border-medium);
}

/* /////// data: Toggle /////// */
[data-menu="closed"] .menu-toggle::after {
   transform: translate(-5px, -50%);
}

[data-menu="open"] .menu-toggle::after {
   transform: translate(3px, -50%);
}

@media (hover:hover) and (pointer:fine) {
   [data-menu="closed"] .menu-toggle:hover::after {
      transform: translate(-1px, -50%);
   }
}

/* Panel
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-panel {
   position: fixed;
   z-index: 998;
   inset: 0 auto 0 0;
   visibility: hidden;
   overflow: hidden;
   width: min(clamp(500px, calc(500px + 13.1vw), 700px), 100vw);
   pointer-events: none;
   transform: translateX(-100%);
   background-color: var(--color-body);
}

.menu-nav,
.menu-paths,
.menu-bookmarks {
   --v-padding-inline: max(24px, 4vw);
   position: absolute;
   z-index: 1;
   inset: 0;
   overflow-y: auto;
   padding: max(35px, 4vw) var(--v-padding-inline) max(35px, 4vw) calc(var(--v-width-rail) + var(--v-padding-inline));
   pointer-events: none;
   transform: translateX(22px);
   opacity: 0;
   background-color: var(--color-body);
   scrollbar-width: none;
}

.menu-nav::-webkit-scrollbar,
.menu-paths::-webkit-scrollbar,
.menu-bookmarks::-webkit-scrollbar {
   display: none;
}

.menu-paths--list[hidden],
.menu-paths--empty[hidden],
.menu-bookmarks--list[hidden],
.menu-bookmarks--empty[hidden] {
   display: none;
}

/* /////// data: Panel /////// */
[data-menu-ready] .menu-panel {
   transition: transform .4s ease-in-out, visibility 0s linear .4s;
}

[data-menu-ready] :is(.menu-nav, .menu-paths, .menu-bookmarks) {
   transition: opacity .24s ease, transform .32s ease;
}

[data-menu-view="nav"] .menu-nav,
[data-menu-view="paths"] .menu-paths,
[data-menu-view="bookmarks"] .menu-bookmarks {
   z-index: 2;
   pointer-events: auto;
   transform: translateX(0);
   opacity: 1;
}

[data-menu="open"] {
   overflow: hidden;
   padding-right: var(--scrollbar-width);
}

[data-menu="open"] .m-menu::before {
   pointer-events: auto;
   background-color: rgba(0, 0, 0, .05);
   backdrop-filter: blur(10px);
}

[data-menu="open"] .menu-panel {
   visibility: visible;
   pointer-events: auto;
   transition-delay: 0s;
   transform: translateX(0);
}

/* Brand
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-brand {
   align-self: start;
}

.menu-brand a {
   place-items: center;
}

.menu-brand img {
   width: 30px;
}

/* Navigation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-nav {
   align-content: start;
}

.menu-nav--list {
   list-style: none;
}

.menu-nav--label,
.menu-nav--item {
   min-width: 0;
}

.menu-nav--label:not(:first-child) {
   margin-top: calc(var(--gap-grid) / 2);
}

.menu-nav--label span {
   margin-bottom: max(8px, .8vh);
}

.menu-nav--item {
   box-shadow: var(--border-box-shadow-bottom);
}

.menu-nav--item a {
   width: fit-content;
   padding: .12em 0 .18em;
}

/* Paths & Bookmarks
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-paths--empty,
.menu-bookmarks--empty {
   align-content: center;
   min-height: 160px;
   padding: calc(var(--gap-grid) / 1.4);
   border-radius: var(--radius-medium);
}

.menu-paths--empty p,
.menu-bookmarks--empty p {
   text-align: center;
}

.menu-paths--header,
.menu-bookmarks--header {
   align-items: center;
   box-shadow: none;
   padding: 0;
}

.menu-paths--heading,
.menu-bookmarks--heading {
   margin: 0;
}

.menu-bookmarks--header [aria-pressed="false"] {
   transition: opacity .15s ease;
   opacity: var(--opacity-caption);
}

.menu-bookmarks--header [aria-pressed="false"]:hover,
.menu-bookmarks--header [aria-pressed="true"] {
   opacity: 1;
}

/* Paths */
.menu-paths {
   align-content: start;
   gap: calc(var(--gap-grid) / 1.2);
}

.menu-path {
   gap: var(--gap-mini);
}

.menu-paths--count {
   font-variant-ligatures: none;
   opacity: var(--opacity-caption);
}

.menu-paths--list {
   gap: calc(var(--gap-grid) / 1.4);
}

.menu-path--description {
   opacity: var(--opacity-caption);
}

.menu-path--items {
   padding: max(10px, 1vw);
   color: var(--v-color, var(--color-font-one));
   border-radius: var(--radius-large);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .menu-path--items {
   --v-color: var(--color-font-bold);
   --v-color-bg: var(--color-bg-bold);
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .menu-path--items {
      --v-color: var(--color-font-bold);
      --v-color-bg: var(--color-bg-bold);
   }
}

.menu-path--items a {
   color: inherit;
}

.menu-path--sequence {
   --v-padding-item-block: .2em;
}

/* Bookmarks */
.menu-bookmarks {
   align-content: start;
   gap: calc(var(--gap-grid) / 1.2);
}

.menu-bookmarks--list {
   gap: var(--gap-mini);
}

.menu-bookmark:not(:last-of-type) {
   box-shadow: var(--border-box-shadow-bottom);
   padding-bottom: var(--gap-mini);
}

.menu-bookmark--wrap {
   position: relative;
   grid-template-columns: 1fr;
   gap: calc(var(--gap-mini) * 1.4);
}

.menu-bookmark--wrap:has(.menu-bookmark--img) {
   grid-template-columns: 1fr 60px;
}

.menu-bookmark--img {
   overflow: hidden;
   align-self: start;
   width: 60px;
   border-radius: var(--radius-extra-small);
}

.menu-bookmark--img img {
   height: auto;
}

.menu-bookmark--remove {
   position: absolute;
   z-index: 3;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: end;
   padding-right: max(10px, .5vw);
   pointer-events: none;
   color: var(--color-font-one);
   background: linear-gradient(90deg, color-mix(in srgb, var(--color-body) 16%, transparent) 0%, color-mix(in srgb, var(--color-body) 90%, transparent) 100%);
}

.menu-bookmark--remove span {
   padding: .4em 1em;
   pointer-events: auto;
   transition: background-color .15s ease;
   color: var(--color-font-two);
   border-radius: var(--radius-full);
   background-color: var(--color-one);
}

.menu-bookmark--remove span:hover {
   background-color: color-mix(in srgb, var(--color-one) 80%, var(--color-body));
}

.menu-bookmarks.is-managing .menu-bookmark--remove {
   display: flex;
}

.menu-bookmarks.is-managing .menu-bookmark {
   pointer-events: none;
}

/* Actions
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-actions {
   align-self: end;
   grid-row: 3;
}

.menu-actions,
.menu-actions--panels {
   justify-items: center;
}

.menu-actions--panels {
   display: none;
   justify-content: center;
   box-shadow: var(--border-box-shadow-bottom);
   max-width: 20px;
   padding-bottom: var(--gap-mini);
}

.menu-actions--panels:has(button) {
   display: grid;
}

.menu-paths--button[hidden] {
   display: none;
}

.menu-paths--button,
.menu-bookmarks--button {
   place-items: center;
   width: 40px;
   height: 40px;
}

/* Paths */
.menu-paths--button svg {
   display: block;
   width: 24px;
   height: 24px;
}

/* Bookmarks */
.menu-bookmarks--thumb {
   font-family: var(--font-family-system);
   font-size: var(--font-size-xxxs);
   font-weight: var(--font-weight-semibold);
   line-height: 1;
   display: grid;
   place-items: center;
   min-width: 20px;
   height: 24px;
   padding: 0 3px;
   color: var(--color-font-rail-control);
   border-radius: calc(var(--radius-ui) * 2.2);
   background-color: var(--color-bg-rail-control);
}

/* Search */
.menu-search {
   place-items: center;
   max-width: 50%;
   height: 70px;
}

.menu-search svg {
   width: 18px;
   fill: currentColor;
}

/* RWD — Menu
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .m-menu {
      height: 0;
   }

   .menu-rail {
      position: fixed;
      inset: auto auto var(--v-inset-menu-safe) 50%;
      overflow: visible;
      justify-items: stretch;
      grid-template-columns: none;
      grid-template-rows: var(--v-height-menu);
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 0;
      box-shadow: 0 0 14px rgba(0, 0, 0, .24);
      width: min(calc(100% - 20px), 240px);
      height: var(--v-height-menu);
      pointer-events: auto;
      transition: opacity .24s ease, transform .24s ease;
      transform: translateX(-50%);
      opacity: 1;
      border-radius: var(--radius-full);
   }

   [data-menu-rail="hidden"]:not([data-menu="open"]) .menu-rail {
      pointer-events: none;
      transform: translate(-50%, calc(100% + var(--v-inset-menu-safe)));
      opacity: 0;
   }

   /* Fix: Keep Ghost overlays at viewport height on iOS. */
   .gh-root-frame,
   .gh-root-frame > iframe,
   #ghost-portal-root > div:has(iframe[title="portal-popup"]),
   #ghost-portal-root iframe[title="portal-popup"] {
      min-height: 100vh;
      min-height: 100lvh;
   }

   /* Fix: Prevent the rail from covering Ghost overlays. */
   body:has(.gh-root-frame) .menu-rail,
   body:has(#ghost-portal-root iframe[title="portal-popup"]) .menu-rail {
      visibility: hidden;
      pointer-events: none;
      opacity: 0;
   }

   .menu-rail--item {
      min-height: var(--v-height-menu);
   }

   .menu-brand {
      display: none;
   }

   .menu-toggle {
      align-self: stretch;
      grid-column: auto;
      grid-row: 1;
      width: 100%;
      height: var(--v-height-menu);
   }

   .menu-panel {
      width: calc(100vw - var(--v-gap-menu-panel));
   }

   .menu-nav,
   .menu-paths,
   .menu-bookmarks {
      padding: var(--gap-site) var(--gap-site) var(--v-gap-menu-bottom);
      overscroll-behavior: contain;
      scroll-padding-bottom: var(--v-gap-menu-bottom);
   }

   .menu-paths--header,
   .menu-bookmarks--header {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--gap-mini);
   }

   .menu-paths--count,
   .menu-bookmarks--manage {
      text-align: right;
   }

   .menu-actions,
   .menu-actions--panels,
   .menu-actions--panels:has(button) {
      display: contents;
   }

   .menu-paths--button,
   .menu-bookmarks--button,
   .menu-search {
      width: 100%;
      max-width: none;
      height: var(--v-height-menu);
   }
}

/* --------------------------------------------------------------------------
   10.Highlight
   -------------------------------------------------------------------------- */
.m-highlight {
   --v-gap-item: var(--gap-mini);
   gap: calc(var(--gap-mini) / 1.4);
}

.highlight-card > a:before,
.highlight-path--meta > a:before {
   background-color: var(--color-body);
}

/* Wrap
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.highlight-path {
   grid-template-columns: minmax(400px, 1fr) 2fr;
   gap: calc(var(--gap-mini) * 2);
   padding: var(--gap-mini);
   color: var(--v-color, var(--color-font-one));
   border-radius: var(--radius-large);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) :is(.highlight-path, .highlight-card) {
   --v-color: var(--color-font-bold);
   --v-color-bg: var(--color-bg-bold);
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) :is(.highlight-path, .highlight-card) {
      --v-color: var(--color-font-bold);
      --v-color-bg: var(--color-bg-bold);
   }
}

.highlight-path :is(a, p) {
   color: inherit;
}

/* Cards
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.highlight-card {
   align-items: center;
   grid-template-columns: minmax(0, max-content) auto;
   gap: var(--gap-mini);
   inline-size: fit-content;
   max-inline-size: min(100%, 680px);
   padding: var(--gap-mini);
   color: var(--v-color, var(--color-font-one));
   border-radius: var(--radius-medium);
}

.highlight-card .g-path-title {
   min-inline-size: 0;
}

/* Intro
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.highlight-path--intro p {
   line-height: 1.4;
   margin-top: calc(var(--gap-mini) / 1.2);
}

/* Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.highlight-path--meta {
   box-shadow: none;
   min-height: 40px;
   padding: 0;
}

.highlight-path--meta a {
   color: var(--color-font-one);
}

/* List
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.highlight-path--meta + ol {
   margin-top: calc(var(--gap-mini) / 2);
}

/* RWD — Highlight
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .highlight-card {
      max-inline-size: calc(100vw - var(--gap-site) * 2 - 30px);
   }

   .highlight-path {
      grid-template-columns: 1fr;
   }

   .highlight-path--meta {
      align-items: center;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--gap-mini);
   }
}

@media (min-width:769px) and (max-width:1024px) {
   .highlight-path {
      grid-template-columns: minmax(140px, .8fr) minmax(180px, 1fr);
   }

   .highlight-path--content {
      grid-column: 2;
   }
}

/* --------------------------------------------------------------------------
   11.Archive
   -------------------------------------------------------------------------- */
.m-archive {
   align-items: center;
   grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
   margin-bottom: calc(var(--gap-mini) * 2);
}

.archive-img {
   overflow: hidden;
   justify-self: center;
   grid-column: 2;
   grid-row: 1;
   max-width: 200px;
   border-radius: var(--radius-small);
}

.archive-img.is-author {
   border-radius: var(--radius-full);
}

.archive-content {
   grid-column: 1/-1;
   grid-row: 1;
}

.m-archive:has(img) .archive-content {
   grid-column: 1;
}

/* RWD — Archive
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .m-archive {
      grid-template-columns: 1fr;
   }

   .archive-img:not(.is-author) {
      display: none;
   }

   .archive-img.is-author {
      justify-self: start;
      grid-column: 1;
      grid-row: 1;
      width: 140px;
   }

   .m-archive:has(> .archive-img.is-author) .archive-content {
      grid-row: 2;
   }
}

/* --------------------------------------------------------------------------
   12.Footer
   -------------------------------------------------------------------------- */
.m-footer {
   margin: var(--gap-row) 0 var(--gap-mini);
}

.footer-wrap {
   box-shadow: var(--border-box-shadow-top);
   padding-top: calc(var(--gap-grid) / 2);
}

.footer-list {
   list-style: none;
}

.footer-list:not(:has(li)),
.footer-content nav:has(.footer-list:not(:has(li))),
.footer-links:not(:has(li)) {
   display: none;
}

.footer-list a {
   display: inline-block;
}

/* Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-description {
   max-width: 30ch;
}

.footer-list.is-navigation {
   --v-column-count-layout: var(--column-count-footer-navigation);
   --v-column-count-items: 4;
   --v-column-count-viewport: 4;
   --v-column-count: min(var(--v-column-count-layout), var(--v-column-count-items), var(--v-column-count-viewport));
   --v-column-gap: calc(var(--gap-mini) * 2);
   max-width: 1100px;
   column-count: var(--v-column-count);
   column-gap: var(--v-column-gap);
}

.footer-list.is-navigation li {
   padding: max(3px, .3vw) 0;
   break-inside: avoid;
}

.footer-list.is-navigation:not(:has(li:nth-child(4))) {
   --v-column-count-items: 3;
}

.footer-list.is-navigation:not(:has(li:nth-child(3))) {
   --v-column-count-items: 2;
}

.footer-list.is-navigation:not(:has(li:nth-child(2))) {
   --v-column-count-items: 1;
}

/* Links
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-list.is-social {
   --v-gap: .2em;
   display: inline-flex;
   align-items: baseline;
   justify-content: start;
   flex-wrap: wrap;
   gap: 0 var(--v-gap);
   box-shadow: var(--border-box-shadow-top), var(--border-box-shadow-bottom);
   width: 100%;
   padding: var(--gap-mini) 0;
}

.footer-list.is-social li {
   display: inline-block;
   white-space: nowrap;
}

.footer-list.is-social li:not(:first-child)::before {
   content: '∙';
   margin-right: var(--v-gap);
}

/* RWD — Footer
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1280px) {
   .footer-list.is-navigation {
      --v-column-count-viewport: 3;
   }
}

@media (max-width:1024px) {
   .footer-list.is-navigation {
      --v-column-count-viewport: 2;
   }
}

@media (max-width:768px) {
   .footer-list.is-navigation {
      --v-column-count-viewport: 1;
   }

   .footer-list.is-social {
      display: block;
      box-shadow: none;
      padding: 0;
   }

   .footer-list.is-social li {
      font-size: var(--font-size-l);
      display: block;
      padding: max(3px, .3vw) 0;
      white-space: normal;
   }

   .footer-list.is-social li:not(:first-child)::before {
      display: none;
   }
}