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

   Tozan 1.0.1, CSS Part I

   //////////////////////////////////////////////////////////////////////////
    
   I. Customize
   |
   ├─ Global settings
   ├─ Fonts
   ├─ Colors
   ├─ Light version
   ├─ Sepia version
   ├─ Dark version
   ├─ Secondary logo
   ├─ Without sidebar
   └─ Reduce motion

   II. Theme
   |
   ├─ 1.Reset
   ├─ 2.Global
   ├─ 3.Header
   ├─ 4.Hero
   ├─ 5.Sidebar
   ├─ 6.Item
   ├─ 7.Featured
   ├─ 8.Related
   ├─ 9.Pagination
   ├─ 10.Topics
   ├─ 11.Widgets
   ├─ 12.Pinned
   ├─ 13.Join
   └─ 14.Footer
   
   //////////////////////////////////////////////////////////////////////////

   I. Customize

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

:root {
  /* Global settings
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */

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

  /* Gap */
  --grid-gap: max(34px, 4vw);
  --site-gap: max(12px, 3.4vw);
  --row-gap: max(40px, 5.6vw);
  --mini-gap: max(14px, 1vw);

  /* Radius */
  --radius: max(6px, 0.5vw);
  --radius-full: 999px;
  --radius-big: calc(var(--radius) * 3.6);
  --radius-large: calc(var(--radius) * 2.75);
  --radius-medium: calc(var(--radius) * 2);
  --radius-small: calc(var(--radius) * 1.6);

  /* Switch */
  --switch-size: clamp(38px, 8vw, 54px);

  /* Template */
  --sidebar: clamp(300px, 20vw, 350px);

  /* Content */
  --site-width: 1920px;
  --wide-width: 1180px;
  --regular-width: 840px;

  --full: minmax(var(--site-gap), 1fr);
  --site: minmax(0, calc((var(--site-width) - var(--wide-width)) / 2));
  --wide: minmax(0, calc((var(--wide-width) - var(--regular-width)) / 2));

  --site-left: minmax(0, calc(var(--site-width) - var(--wide-width)));
  --wide-left: minmax(0, calc(var(--wide-width) - var(--regular-width)));

  --regular-content: min(var(--regular-width), 100% - var(--site-gap) * 2);
  --site-content: min(var(--site-width), 100% - var(--site-gap) * 2);

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

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

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

  /* Fonts
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
    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-bold: 700;
  --font-weight-display: 450;

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

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

  --font-size-max-hero: 5.625;
  --font-size-max-xxxl: 4;
  --font-size-max-xxl: 3.125;
  --font-size-max-xl: 2.5;
  --font-size-max-l: 2;
  --font-size-max-m: 1.65;
  --font-size-max-r: 1.4;
  --font-size-max-s: 1.25;
  --font-size-max-xs: 1.125;
  --font-size-max-xxs: 1;
  --font-size-max-xxxs: 0.875;

  --font-size-min-hero: calc(var(--font-size-max-hero) / 2.2);
  --font-size-min-xxxl: calc(var(--font-size-max-xxxl) / 2);
  --font-size-min-xxl: calc(var(--font-size-max-xxl) / 1.8);
  --font-size-min-xl: calc(var(--font-size-max-xl) / 1.6);
  --font-size-min-l: calc(var(--font-size-max-l) / 1.4);
  --font-size-min-m: calc(var(--font-size-max-m) / 1.25);
  --font-size-min-r: calc(var(--font-size-max-r) / 1.15);
  --font-size-min-s: calc(var(--font-size-max-s) / 1.15);
  --font-size-min-xs: 1.125;
  --font-size-min-xxs: 1;
  --font-size-min-xxxs: 0.75;

  --font-size-max-logo: 2.2;
  --font-size-min-logo: calc(var(--font-size-max-logo) / 1.4);

  --font-size-body: var(--font-size-r);
  --font-size-button: var(--font-size-xs);
  --font-size-input: var(--font-size-xxs);
  --font-size-caption: 0.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))
  );

  /* Light version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
  --color-font-one: #120b14;
  --color-font-two: #fff;
  --color-font-black: #120b14;
  --color-font-white: #fff;
  --color-one: #120b14;
  --color-two: #f6f6f6;
  --color-three: #ededed;
  --color-four: #fff;
  --color-body: #fff;
  --opacity-blur: 0.2;
  --opacity-rgba: rgba(255, 255, 255, 0.5);
  --opacity-caption: 0.8;
  --opacity-label: 0.7;
  --opacity-meta: 0.7;

  --alert-red: lightcoral;
  --alert-green: lightgreen;

  --border: 1px solid var(--color-three);
  --ghost-accent-color: #ff4d82;
  --outline: 2px solid #3b82f6;
}

/* Sepia version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-color-scheme="sepia"],
[data-color-light-scheme="sepia"] {
  --color-font-one: #1e1e1e;
  --color-font-two: #f6f6f0;
  --color-font-black: #1e1e1e;
  --color-font-white: #f6f6f0;
  --color-one: #1e1e1e;
  --color-two: #eae8dd;
  --color-three: #d9d7cb;
  --color-four: #fafaf8;
  --color-body: #f6f6f0;
  --opacity-blur: 0.2;
  --opacity-rgba: rgba(255, 255, 255, 0.5);
  --opacity-caption: 0.8;
  --border: 1px solid #e1dfd5;
}

/* Dark version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-color-scheme="dark"] {
  --color-font-one: #fafafa;
  --color-font-two: #11131d;
  --color-font-black: #11131d;
  --color-font-white: #fafafa;
  --color-one: #fafafa;
  --color-two: #1c202a;
  --color-three: #272c39;
  --color-four: #171922;
  --color-body: #11131d;
  --opacity-blur: 0.2;
  --opacity-rgba: rgba(17, 19, 29, 0.5);
  --opacity-caption: 0.6;
  --border: 1px solid var(--color-three);
}

/* 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-one: #fafafa;
    --color-two: #1c202a;
    --color-three: #272c39;
    --color-four: #171922;
    --color-body: #11131d;
    --opacity-blur: 0.2;
    --opacity-rgba: rgba(17, 19, 29, 0.5);
    --opacity-caption: 0.6;
    --border: 1px solid var(--color-three);
  }
}

/* Secondary logo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme: dark) {
  [data-color-scheme="auto"] body a.is-dark + a {
    display: none;
  }
}

@media (prefers-color-scheme: light) {
  [data-color-scheme="auto"] body a.is-dark {
    display: none;
  }
}

/* Without sidebar
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-sidebar="false"]:root {
  --row-gap: max(40px, 4.6vw);
  --site-width: 1500px;
  --wide-width: 1000px;
  --regular-width: 740px;
  --sidebar: clamp(290px, 20vw, 315px);
}

/* 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: 400;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  color: var(--color-font-one);
  background-color: var(--color-body);
}

body::after {
  position: fixed;
  z-index: 998;
  content: "";
  transition: opacity 0.2s ease;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(2px);
  inset: 0;
}

/* 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);
}

/* Input & textarea
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
input,
input:focus,
textarea {
  color: var(--color-font-one);
}

input,
textarea {
  font-family: var(--font-family-body);
  line-height: 1.3;
}

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

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

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

figcaption a {
  text-decoration: underline;
}

/* About
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-about a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Style
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-font="italic"] :is(.g-hero, .g-about) :is(strong, b) {
  font-weight: var(--font-weight-display);
  font-style: italic;
}

[data-font="normal"] :is(.g-hero, .g-about) :is(strong, b) {
  font-weight: var(--font-weight-display);
  font-style: normal;
}

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

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

/* Template */
.g-grid-full {
  display: grid;
}

.g-grid-full,
.g-grid-full > * {
  width: 100%;
}

.g-grid-full.is-row-gap {
  row-gap: var(--row-gap);
}

.g-template-site {
  grid-template-columns: var(--grid-template-site);
}
.g-template-center {
  grid-template-columns: var(--grid-template-center);
}

.g-grid-full.g-child-regular > * {
  grid-column: regular;
}
.g-grid-full.g-child-wide > * {
  grid-column: wide;
}
.g-grid-full.g-child-site > * {
  grid-column: site;
}
.g-grid-full.g-child-full > * {
  grid-column: full;
}

.g-grid-full:is(.g-child-regular, .g-child-wide, .g-child-site) > .g-grid-full {
  grid-column: full;
}

/* Loop
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-loop {
  gap: calc(var(--grid-gap) / 3.4);
  grid-template-columns: repeat(6, 1fr);
}

.g-loop + .g-loop {
  margin-top: calc(var(--grid-gap) / 3.4);
  animation: slideTop 1s ease;
}

/* /////// data /////// */
.g-loop[data-loop="showcase"] {
  grid-template-rows: auto 1fr;
}

.g-loop[data-loop="pinned"],
.g-loop[data-loop="related"] {
  grid-template-columns: repeat(6, 1fr);
}

.g-loop[data-loop="featured"].is-5,
.g-loop[data-loop="showcase"] {
  grid-template-columns: repeat(5, 1fr);
}

.g-loop[data-loop="grid"],
.g-loop[data-loop="featured"].is-4 {
  grid-template-columns: repeat(4, 1fr);
}

.g-loop[data-loop="balance"],
.g-loop[data-loop="topics"],
.g-loop[data-loop="featured"]:is(.is-1, .is-2, .is-3) {
  grid-template-columns: repeat(3, 1fr);
}

.g-loop[data-loop="solo"] {
  grid-template-columns: repeat(1, 1fr);
}

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

/* RWD — Loop
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1280px) {
  [data-sidebar="false"]
    [data-context="membership"]
    .g-loop[data-loop="related"] {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1480px) {
  .g-loop,
  .g-loop[data-loop="related"] {
    grid-template-columns: repeat(5, 1fr);
  }

  .g-loop[data-loop="featured"]:is(.is-4, .is-5) {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1280px) {
  .g-loop {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .g-loop[data-loop="topics"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .g-loop[data-loop="grid"] {
    grid-template-columns: repeat(3, 1fr);
  }

  .g-loop[data-loop="showcase"],
  .g-loop[data-loop="related"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .g-loop,
  .g-loop[data-loop="showcase"],
  .g-loop[data-loop="related"],
  .g-loop[data-loop="featured"]:is(.is-4, .is-5) {
    grid-template-columns: repeat(3, 1fr);
  }

  .g-loop[data-loop="pinned"] {
    grid-template-columns: repeat(4, 1fr);
  }

  .g-loop[data-loop="balance"],
  .g-loop[data-loop="grid"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .g-loop[data-loop="topics"] {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 480px) {
  .g-loop[data-loop="balance"],
  .g-loop[data-loop="grid"],
  .g-loop[data-loop="showcase"] {
    gap: calc(var(--grid-gap) / 1.2);
    grid-template-columns: repeat(1, 1fr);
  }

  .g-loop + .g-loop {
    margin-top: calc(var(--grid-gap) / 1.2);
  }

  .g-loop[data-loop="related"],
  .g-loop[data-loop="featured"]:is(.is-1, .is-2, .is-3, .is-4, .is-5) {
    grid-template-columns: repeat(2, 1fr);
  }

  .g-loop[data-loop="pinned"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Section
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-section {
  gap: var(--row-gap) calc(var(--grid-gap) / 1.2);
  grid-template-columns: 1fr var(--sidebar);
}

.g-section > .g-column {
  align-content: start;
  gap: var(--row-gap) var(--grid-gap);
}

.g-section > .g-column,
.g-section > .g-column:first-child ~ div,
.g-section > .g-column ~ [data-width="full"] {
  grid-column: 1/-1;
}

.g-sidebar + .g-column {
  grid-column: 1;
}

/* RWD — Section
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1280px) {
  body:not([data-template="focus"]) .g-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  [data-template="focus"] .g-section {
    grid-template-columns: 1fr;
  }
}

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

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

/* Appearance
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-appearance="blurred"]
  [data-img="true"]:not([data-context="membership"])
  .g-appearance::after,
[data-appearance="blurred"]
  [data-context="directory"]:not([data-img="true"])
  .g-appearance::after,
[data-appearance="blurred"] .featured-section .g-appearance::after,
[data-appearance="blurred"] .g-appearance-nav::after {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  content: "";
  opacity: var(--opacity-blur);
  filter: blur(40px);
  inset: 0;
}

[data-appearance="colorful"]
  [data-context="membership"][data-img="true"]:not([data-template="focus"])
  .g-appearance,
[data-appearance="blurred"]
  [data-context="membership"][data-template="focus"][data-img="true"]
  .g-appearance,
[data-appearance="blurred"]
  [data-img="true"]:not([data-template="focus"])
  .g-appearance::after,
[data-appearance="blurred"]
  [data-context="directory"]:not([data-img="true"])
  .g-appearance::after,
[data-appearance="blurred"] .featured-section .g-appearance::after {
  background: var(--bg-img) no-repeat center center / cover;
}

/* Navigation */
[data-appearance="blurred"] .g-appearance-nav::after {
  background: var(--bg-img-nav) no-repeat center center / cover;
}

/* Membership */
[data-appearance="colorful"]
  [data-context="membership"][data-template="focus"][data-img="true"]
  .g-appearance {
  background: var(--bg-img) no-repeat top center / cover;
}

[data-appearance="blurred"]
  [data-context="membership"][data-img="true"]
  .g-appearance::after {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  content: "";
  inset: 0;
  will-change: transform;
}

[data-appearance="blurred"]
  [data-context="membership"][data-img="true"]:not([data-template="focus"])
  .g-appearance::after {
  opacity: 0.5;
  filter: blur(40px);
}

[data-appearance="blurred"]
  [data-context="membership"][data-template="focus"][data-img="true"]
  .g-appearance::after {
  z-index: 1;
  border-radius: var(--radius-big);
  background-color: var(--opacity-rgba);
  box-shadow: 0 0 0 1px var(--color-body);
  backdrop-filter: blur(40px);
}

/* Author */
[data-appearance="colorful"]
  [data-subcontext="author"]
  [data-headline-img="true"]
  .headline-img
  + .headline-content
  a {
  background-color: var(--color-three);
}

[data-appearance="blurred"]
  [data-subcontext="author"]
  [data-headline-img="true"]
  .headline-img
  + .headline-content
  a {
  background-color: var(--opacity-rgba);
  backdrop-filter: blur(8px);
}

/* Featured */
[data-appearance="colorful"] .featured-content {
  color: var(--g-accent-color-contrast, var(--color-font-one));
}

[data-appearance="colorful"] .featured-content.is-site-accent {
  color: var(--ghost-accent-color-contrast);
}

[data-appearance="blurred"] .featured-content {
  color: var(--color-font-one);
}

/* Dynamic color
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
body
  :is(.g-bg-accent:not([data-loop="featured"]), .g-btn:not(.pagination-btn)) {
  color: var(--ghost-accent-color-contrast);
}

body .pagination-btn {
  color: var(--g-accent-color-contrast, var(--ghost-accent-color-contrast));
}

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

.g-logo img {
  width: auto;
}

.g-logo a.is-title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-logo);
  font-weight: var(--font-weight-display);
  line-height: 1;
  display: inline-block;
  max-width: 360px;
}

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

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

/* 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 img {
  display: block;
}

.g-img img {
  width: 100%;
  height: 100%;
  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,
.g-font-xl {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
}

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

.g-font-s,
.g-font-xs,
.g-font-xxs,
.g-font-xxxs {
  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-xxxs {
  font-size: var(--font-size-xxxs);
}
.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-xxxs,
.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-xxxs,
.g-font-caption {
  line-height: 1.3;
}

/* Links */
[class*="g-font-"] a:not(.g-btn):hover,
a[class*="g-font-"]:not(.g-btn):hover,
.g-label a:hover,
a.is-active {
  text-decoration-line: underline;
}

:is(
    .g-font-xxxl:hover,
    .g-font-xxxl a:hover,
    .g-font-xxl:hover,
    .g-font-xxl a:hover,
    .g-font-xl:hover,
    .g-font-xl a:hover
  ) {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

:is(
    .g-font-l:hover,
    .g-font-l a:hover,
    .g-font-m:hover,
    .g-font-m a:hover,
    .g-font-r:hover,
    .g-font-r a:hover
  ) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:is(
    .g-font-s:hover,
    .g-font-s a:hover,
    .g-font-xs:hover,
    .g-font-xs a:hover,
    .g-font-xxs:hover,
    .g-font-xxs a:hover,
    .g-font-xxxs:hover,
    .g-font-xxxs a:hover
  ),
.g-label a,
a.is-active {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

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

/* Social
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-social.is-author {
  --max: 12;
  align-content: start;
}

.g-social.is-author svg {
  --min: 18;
  --max: 26;
}

.g-social.is-footer {
  --max: 20;
  align-content: center;
}

.g-social.is-footer svg {
  --min: 26;
  --max: 30;
}

.g-social.is-share svg {
  --min: 22;
  --max: 26;
}

.g-social {
  --min: 10;
  width: auto;
  gap: clamp(
    calc(var(--min) * 1px),
    calc(
      (((var(--max) - var(--min)) / var(--scale-scope)) * 100 * 1vw) +
        (
          (
              var(--min) -
                (
                  (var(--max) - var(--min)) / var(--scale-scope) *
                    var(--scale-min)
                )
            ) * 1px
        )
    ),
    calc(var(--max) * 1px)
  );
}

.g-social svg {
  width: clamp(
    calc(var(--min) * 1px),
    calc(
      (((var(--max) - var(--min)) / var(--scale-scope)) * 100 * 1vw) +
        (
          (
              var(--min) -
                (
                  (var(--max) - var(--min)) / var(--scale-scope) *
                    var(--scale-min)
                )
            ) * 1px
        )
    ),
    calc(var(--max) * 1px)
  );
  fill: var(--color-one);
}

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

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

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

.g-btn::before {
  position: absolute;
  z-index: -1;
  content: "";
  transition: opacity 0.2s ease;
  background-color: var(--ghost-accent-color);
  inset: 0;
}

.g-btn:not(.no-opacity):hover::before {
  opacity: 0.8;
}

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

.g-btn-alt.g-btn:hover {
  text-decoration-line: underline;
}

.g-btn-alt::after,
.g-btn-alt.is-left::before,
.g-chevron::before {
  font-family: var(--font-family-system);
  display: inline-block;
  transition: transform 0.3s ease;
  will-change: transform;
}

.g-btn-alt::after {
  margin-left: 0.3em;
}

.g-btn-alt::after,
.g-btn-alt.is-left.is-inverse::before {
  content: "→";
}

.g-btn-alt::after,
.g-btn-alt.is-left::before,
.g-btn-alt.is-left.is-inverse::before {
  font-size: 90%;
}

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

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

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

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

.g-chevron::before {
  font-size: 120%;
  content: "›";
}

.g-chevron::before {
  margin-right: 0.3em;
}

/* /////// data /////// */
[data-toc-clone] .g-chevron::before {
  transition: margin-right 0.2s ease;
}

[data-toc-clone] .g-chevron:hover::before {
  margin-right: 2px;
  transform: none;
}

/* Prefix
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-prefix-author::before {
  content: "@";
}

.g-prefix-tag::before {
  content: "– " !important;
  font-weight: 900 !important;
}

/* Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-meta {
  line-height: 1.5;
  margin-top: 0.4em;
}

.g-meta > div {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.g-meta,
.g-meta > div > div {
  opacity: var(--opacity-meta);
}

.g-meta :is(a, span, time) {
  display: inline-block;
}

/* Sticky
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-sticky {
  position: sticky;
  top: 3vh;
}

/* RWD — Sticky
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1024px) {
  .g-sticky {
    position: relative;
    top: 0;
  }
}

/* Label
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-label {
  font-size: var(--font-size-s);
  line-height: 1.4;
  display: block;
  margin-bottom: 0.8em;
  padding-top: calc(var(--mini-gap) / 2);
  border-top: var(--border);
}

/* Nav */
.g-label-nav {
  align-self: start;
  margin-top: 2vw;
  margin-bottom: calc(var(--mini-gap) / 2);
  padding-bottom: calc(var(--mini-gap) / 2);
  opacity: var(--opacity-caption);
  border-bottom: var(--border);
}

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

.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(--mini-gap) / 2);
}

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

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

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

/* /////// data /////// */
[data-context="archive"] .g-label span.website,
[data-context="archive"] .g-label > span[class^="g-prefix"],
[data-context="post"] .g-label > span[class^="g-prefix"] {
  opacity: var(--opacity-label);
}

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

/* Link
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-link {
  cursor: pointer;
}

/* Visibility
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-visibility {
  line-height: 0;
  pointer-events: none;
  grid-column: 1/-1;
}

.g-visibility > span {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: var(--radius-full);
}

/* /////// data /////// */
[data-item="row"] .g-visibility.is-img {
  grid-column: 1;
}

article:not([data-item="row"]) .g-visibility.is-img {
  position: absolute;
  z-index: 1;
  top: calc(var(--mini-gap) / 2.5);
  right: calc(var(--mini-gap) / 2.5);
  left: calc(var(--mini-gap) / 2.5);
}

article:not([data-item="row"]) .g-visibility.is-img > span {
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--radius-full);
  background-color: var(--opacity-rgba);
  backdrop-filter: blur(8px);
}

[data-item="featured"] > .g-visibility.is-img {
  transition: transform 0.3s ease;
  will-change: transform;
}

[data-item="featured"]:hover > .g-visibility.is-img {
  transform: translateY(3px);
}

/* Note
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-note {
  display: block;
  margin-top: 10px;
  text-align: center;
  opacity: var(--opacity-caption);
}

.g-note a {
  text-decoration: underline;
}

/* Question
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-question {
  display: block;
  margin: max(20px, 2vw) 0 0 0;
}

.g-question span {
  opacity: var(--opacity-caption);
}

/* /////// data /////// */
[data-context="custom"] [data-members-form] .g-question {
  margin-left: 0.3vw;
  padding-top: max(8px, 0.5vw);
  border-top: var(--border);
}

/* Terms
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-terms {
  display: flex;
  align-items: center;
  margin: max(8px, 0.5vw) 0 0 0.3vw;
  opacity: var(--opacity-caption);
}

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

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

.g-terms input[type="checkbox"],
.g-terms input[type="checkbox"]:hover {
  background-color: transparent;
}

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

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

/* Label */
.g-terms div:first-of-type {
  margin-top: 0 !important;
}

.g-terms div p {
  margin: 0;
}

.g-terms div a {
  text-decoration: underline;
}

/* Alert
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-alert {
  display: none;
  margin-top: 1.4vh;
  padding: 0.3em 1em;
  border-radius: var(--radius-full);
}

.g-alert.is-error {
  color: red;
}

.g-alert.is-success {
  color: green;
}

/* /////// data /////// */
[data-context="custom"] [data-members-form] + div,
[data-context="custom"] [data-members-form].success {
  display: none;
}

[data-context="custom"] [data-members-form].loading + div .g-alert.is-loading,
[data-context="custom"] [data-members-form].error + div .g-alert.is-error,
[data-context="custom"] [data-members-form].success + div .g-alert.is-success,
[data-context="custom"] [data-members-form].success + div {
  display: block;
}

[data-context="custom"] [data-members-form].loading .g-alert.is-loading,
[data-context="custom"] [data-members-form].error .g-alert.is-error {
  display: inline-block;
  margin-left: 0.3vw;
}

[data-context="custom"] [data-members-form].success + div p {
  margin: 0;
}

/* Benefits
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-benefits-wrap {
  max-width: 1150px;
}

.g-benefits {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  column-gap: max(20px, 2vw);
  columns: 240px 3;
}

.g-benefits li {
  display: flex;
  align-items: start;
  padding: 0 0 0.4em 0;
  break-inside: avoid-column;
  gap: 0.3em;
}

.g-benefits li::before {
  font-family: var(--font-family-system);
  font-size: 90%;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.2em;
  content: "✓";
}

/* /////// data /////// */
[data-join] .g-benefits-wrap {
  padding-bottom: calc(var(--grid-gap) / 1.6);
  max-width: 1150px;
}

[data-tiers] .g-benefits {
  columns: initial;
}

/* Sort tiers
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-sort="affordable"] > div:not(:first-child):not([data-join-featured]) {
  display: none;
}

/* --------------------------------------------------------------------------
   3.Header
   -------------------------------------------------------------------------- */
.header-wrap {
  position: relative;
  z-index: 999;
  justify-content: space-between;
  min-height: 45px;
  margin-top: calc(var(--mini-gap) * 1.5);
}

.header-wrap,
.header-nav > ul {
  display: flex;
  align-items: center;
}

.header-content {
  display: flex;
}

.header-content svg {
  fill: currentColor;
}

.header-content li svg {
  transform: translateY(1px);
}

/* Search & Login
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-search button.is-desktop {
  font-weight: var(--font-weight-medium);
  transition: background-color 0.16s ease;
  border-radius: var(--radius-full);
}

.header-search button.is-desktop:hover {
  background-color: var(--color-three);
}

.header-search button.is-desktop,
.header-login:is(.is-signup, .is-account) a {
  line-height: 1.3;
  padding: 0.5em 1.8em;
}

.header-search button.is-desktop svg {
  width: 16px;
}

.header-search button.is-mobile {
  display: none;
}

.header-search button.is-mobile svg {
  position: absolute;
  z-index: 1;
  top: -2px;
  right: 40px;
  width: 25px;
}

/* /////// data /////// */
[data-ghost-search] {
  cursor: pointer;
  color: var(--color-font-one);
}

/* Navigation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-nav {
  display: flex;
  flex: 0 999 auto;
  margin-left: auto;
}

.header-nav a {
  line-height: 1.5;
  margin: 0;
}

.header-nav > ul {
  word-break: normal;
}

.header-nav > ul + ul {
  margin-left: calc(var(--mini-gap) / 2);
  display: none; /* nascosto su desktop, mostrato solo in RWD */
}

.header-nav > ul:first-of-type {
  flex-basis: auto;
  flex-grow: 1;
}

/* /////// data /////// */
[data-toggle],
[data-dropdown-btn] {
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background-color: transparent;
}

/* Toogle */
[data-toggle] {
  position: relative;
  z-index: 999;
  top: -3px;
  display: none;
  overflow: visible;
  width: 32px;
  height: 20px;
  margin: 0;
  will-change: transform;
}

[data-toggle] span {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: var(--color-one);
}

[data-toggle] span:nth-child(1) {
  top: 0;
}

[data-toggle] span:nth-child(2),
[data-toggle][aria-expanded="true"] span:nth-child(1),
[data-toggle][aria-expanded="true"] span:nth-child(3) {
  top: 50%;
}

[data-toggle] span:nth-child(3) {
  top: 100%;
}

[data-toggle][aria-expanded="true"] span:nth-child(1),
[data-toggle][aria-expanded="true"] span:nth-child(2) {
  transform: rotate(45deg);
}

[data-toggle][aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg);
}

[data-toggle][aria-expanded="true"] span {
  transition-delay: 0.3s, 0s;
}

/* Nav */
[data-nav] :is(li:not([data-dropdown-hero]), a) {
  display: block;
  word-break: break-word;
}

[data-dropdown] {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

[data-dropdown] [data-dropdown],
[data-dropdown] ul + span,
[data-dropdown-btn][aria-expanded="false"] + ul {
  display: none;
}

[data-dropdown-btn] {
  line-height: 1.5;
  text-align: right;
  color: currentColor;
}

[data-dropdown] ul {
  display: block;
  cursor: default;
  text-align: right;
  will-change: transform;
}

[data-dropdown] svg {
  width: 14px;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

[data-dropdown-btn]:hover svg {
  transform: translateY(4px);
}

/* Dropdown 'hero' */
[data-dropdown="hero"] ul {
  left: calc(50% - 80px - 9vw - 1.5vw - 1.5vw);
  display: grid;
  padding: 0 0 0 3vw;
  text-align: left;
  gap: 6px 3vw;
  grid-template-columns: repeat(2, 1fr);
}

[data-dropdown="hero"] ul li {
  width: 230px;
  grid-column: 1;
}

[data-dropdown="hero"] li:not([data-dropdown-hero]):last-of-type {
  margin-bottom: 3vw;
}

[data-dropdown="hero"] [data-dropdown-hero] {
  position: relative;
  overflow: hidden;
  align-content: center;
  width: 18vw;
  min-height: 200px;
  padding: 2vw 3vw;
  transform: none;
  text-align: left;
  border-top-right-radius: var(--radius-medium);
  border-bottom-right-radius: var(--radius-medium);
  gap: calc(var(--grid-gap) / 6);
  grid-column: 2;
}

[data-dropdown="hero"] [data-dropdown-hero] a {
  font-weight: var(--font-weight-semibold);
  word-break: break-word;
  color: var(--g-accent-color-contrast, var(--color-font-one));
}

[data-dropdown="hero"] [data-dropdown-hero="author"] {
  width: 16vw;
  text-align: center;
}

[data-dropdown="hero"] [data-dropdown-hero="author"] a {
  max-width: 130px;
  margin: 0 auto;
}

[data-dropdown="hero"] [data-dropdown-hero="author"] img {
  border-radius: var(--radius-full);
}

/* Global trigger */
[data-dropdown-open]::after {
  pointer-events: auto;
  opacity: 1;
}

/* Desktop */
[data-toggle][aria-expanded] ~ nav [data-dropdown] ul,
[data-toggle][aria-expanded="true"] ~ nav {
  animation: slideDropdown 0.3s ease;
}

[data-toggle][aria-expanded="false"]
  ~ nav
  li:not(:first-of-type):not(nav [data-dropdown] li):not([data-ghost-search]) {
  margin-left: 1vw;
}

[data-toggle][aria-expanded="false"] ~ nav [data-dropdown] ul {
  position: absolute;
  top: 50px;
  min-width: 130px;
  border-radius: var(--radius-medium);
  background-color: var(--color-four);
  box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.6);
}

[data-toggle][aria-expanded="false"] ~ nav [data-dropdown="standard"] ul {
  right: -20px;
  padding: 20px;
}

/* Mobile */
[data-toggle][aria-expanded="true"] ~ nav li.label,
[data-toggle][aria-expanded="true"] ~ nav li.label + li,
[data-toggle][aria-expanded="true"] ~ nav .header-search {
  display: none;
}

[data-toggle][aria-expanded="true"] ~ nav {
  position: absolute;
  top: 30px;
  right: 0;
  display: block;
  min-width: 230px;
  height: auto;
  padding: max(30px, 4vw) 20px clamp(20px, -1.838vw + 38.82px, 30px);
}

[data-toggle][aria-expanded="true"] ~ nav::before {
  position: absolute;
  z-index: 0;
  content: "";
  border-radius: var(--radius-large);
  background-color: var(--color-four);
  box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.6);
  inset: 15px 0 0 0;
}

[data-toggle][aria-expanded="true"] ~ nav > ul {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

[data-toggle][aria-expanded="true"] ~ nav [data-dropdown] ul {
  width: 100%;
  margin: 10px 0;
  padding: 14px;
  text-align: right;
  border-radius: var(--radius-large);
  background-color: var(--color-two);
  gap: 0;
}

[data-toggle][aria-expanded="true"] ~ nav [data-dropdown] ul li {
  width: 100%;
  grid-column: 1/-1;
}

[data-toggle][aria-expanded="true"]
  ~ nav
  [data-dropdown]
  li:not([data-dropdown-hero]):last-of-type {
  margin-bottom: 0;
}

[data-toggle][aria-expanded="true"] ~ nav ul > li:not(.header-login),
[data-toggle][aria-expanded="true"] ~ nav > li:not(.header-login) a {
  padding-bottom: calc(var(--mini-gap) / 2);
}

[data-toggle][aria-expanded="true"] ~ nav li:not(.header-login) a {
  word-break: break-word;
}

[data-toggle][aria-expanded="true"]
  ~ nav
  .header-login:is(.is-signup, .is-account)
  a {
  margin-top: 10px;
}

[data-toggle][aria-expanded="true"] ~ nav li:not(.header-login):last-of-type a {
  padding-bottom: 0;
}

[data-toggle][aria-expanded="true"] ~ nav [data-dropdown] svg {
  width: 16px;
  transition: none;
  transform: translateY(1px);
}

/* Animation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes slideDropdown {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* RWD — Header
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1024px) {
  .header-wrap {
    align-items: flex-start;
  }

  .header-content {
    text-align: right;
  }

  .header-content,
  .header-search button.is-mobile {
    display: block;
  }

  [data-toggle] {
    display: inline-flex;
  }

  [data-toggle][aria-expanded="false"] ~ nav > ul {
    display: none;
  }

  .header-nav > ul + ul {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 480px) {
  [data-toggle][aria-expanded="true"] ~ nav {
    right: 0;
    min-width: 260px;
    max-width: 300px;
  }

  [data-toggle][aria-expanded="true"] ~ nav :is(li, a) {
    font-size: var(--font-size-l);
  }

  [data-toggle][aria-expanded="true"] ~ nav li ul :is(li, a) {
    font-size: var(--font-size-m);
  }
}

/* --------------------------------------------------------------------------
   4.Hero
   -------------------------------------------------------------------------- */
.headline-section {
  margin-top: calc(var(--row-gap) / 1.6);
  border-radius: var(--radius-large);
  row-gap: calc(var(--row-gap) / 1.6);
}

/* Title */
.headline-hero {
  --font-size-min-headline: var(--font-size-max-xxl);
  --font-size-max-headline: var(--font-size-max-hero);
  font-weight: var(--font-weight-display);
  line-height: 1.1;
  margin: 0;
}

/* Archive
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.headline-img {
  overflow: hidden;
  align-self: start;
  order: 2;
  width: 100%;
  border-radius: var(--radius-medium);
}

/* Title */
.headline-title {
  width: auto;
  color: var(--g-accent-color-contrast, var(--color-font-one));
}

/* /////// data /////// */
[data-context="archive"] [data-headline-img="true"] {
  position: relative;
  overflow: hidden;
  padding: calc(var(--grid-gap) / 2) calc(var(--grid-gap) / 1.6);
  align-items: center;
}

[data-context="archive"] [data-headline-img="true"] {
  column-gap: calc(var(--grid-gap) / 1.2);
}

[data-context="archive"][data-subcontext="author"] .headline-content {
  gap: calc(var(--grid-gap) / 4);
}

[data-context="archive"][data-subcontext="author"] .headline-content a {
  line-height: 0;
  padding: calc(var(--mini-gap) / 1.369);
  border-radius: var(--radius-full);
}

[data-context="archive"][data-subcontext="author"] .headline-img {
  align-self: center;
  width: clamp(100px, 20vw, 150px);
  margin: 1vh 2vw;
  border-radius: var(--radius-full);
  justify-self: center;
}

[data-context="archive"][data-subcontext="tag"] .headline-img {
  justify-self: end;
}

[data-context="archive"][data-subcontext] [data-headline-img="true"] {
  padding: calc(var(--mini-gap) / 1.66) calc(var(--mini-gap) / 1.66)
    calc(var(--mini-gap) / 1.66) calc(var(--grid-gap) / 1.6);
}

[data-context="archive"][data-subcontext="author"] [data-headline-img="true"] {
  grid-template-columns: 1fr clamp(140px, 20vw, var(--sidebar));
}

[data-context="archive"][data-subcontext="tag"] [data-headline-img="true"] {
  grid-template-columns: 1fr clamp(
      140px,
      25vw,
      calc(
        var(--sidebar) - calc(var(--mini-gap) / 1.66) +
          calc(var(--grid-gap) / 1.2)
      )
    );
}

[data-context="page"] .headline-section {
  margin-top: calc(var(--row-gap) / 1.4);
}

[data-context="archive"] .headline-section {
  margin-top: calc(var(--row-gap) / 2);
}

[data-headline-hero="large"] .headline-hero {
  --font-size-min-headline: var(--font-size-max-xxxl);
}

[data-headline-hero="small"] .headline-hero {
  --font-size-min-headline: var(--font-size-max-xl);
}

[data-headline-hero="x-small"] .headline-hero {
  --font-size-min-headline: var(--font-size-max-l);
}

[data-sidebar="true"] .headline-hero {
  --font-size-headline: var(--headline, 100);
  font-size: clamp(
    calc(var(--font-size-min-headline) * var(--unit-rem)),
    calc(
      (var(--font-size-max-headline) * calc(var(--font-size-headline) / 100)) *
        1vw
    ),
    calc(
      (var(--font-size-max-headline) * calc(var(--font-size-headline) / 100)) *
        1.2rem
    )
  );
}

[data-sidebar="false"] .headline-hero {
  --font-size-headline: calc(var(--headline, 100) * 1.069);
  font-size: clamp(
    calc(var(--font-size-min-headline) * var(--unit-rem)),
    calc(
      (var(--font-size-max-headline) * calc(var(--font-size-headline) / 100)) *
        0.93vw
    ),
    calc(
      (var(--font-size-max-headline) * calc(var(--font-size-headline) / 100)) *
        0.9375rem
    )
  );
}

/* RWD — Hero
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1025px) and (max-width: 1920px) {
  [data-sidebar="true"] .headline-hero {
    width: calc(100vw - var(--site-gap) - var(--site-gap));
  }
}

@media (min-width: 1025px) and (max-width: 1610px) {
  [data-sidebar="false"] .headline-hero {
    width: calc(100vw - var(--site-gap) - var(--site-gap));
  }
}

@media (min-width: 769px) {
  [data-context="archive"]:not([data-img]) .headline-section {
    margin-top: calc(var(--row-gap) / 1.2);
  }

  [data-headline-hero] .headline-section {
    margin-top: calc(var(--row-gap) * 100 / max(var(--headline, 100), 100));
  }
}

@media (max-width: 1024px) {
  [data-context="index"] .headline-section,
  [data-context="directory"] .headline-section {
    border-radius: 0;
    grid-column: full;
  }

  [data-context="index"] h1,
  [data-context="directory"] h1 {
    padding-right: var(--site-gap);
    padding-left: var(--site-gap);
  }
}

@media (max-width: 480px) {
  [data-context="archive"][data-subcontext="tag"] .headline-img {
    aspect-ratio: 1/1;
  }

  [data-context="archive"][data-subcontext="tag"] [data-headline-img="true"] {
    grid-template-columns: 1fr 80px;
  }

  [data-context="archive"][data-subcontext="author"] .headline-img {
    order: 0;
    grid-column: 1/-1;
  }

  [data-context="archive"][data-subcontext="author"]
    [data-headline-img="true"] {
    gap: calc(var(--grid-gap) / 4);
    grid-template-columns: 1fr;
  }

  [data-context="archive"][data-subcontext="author"]
    [data-headline-img="true"]
    .headline-content {
    gap: calc(var(--grid-gap) / 2);
  }

  [data-context="archive"][data-subcontext="author"]
    [data-headline-img="true"]
    .headline-content,
  [data-context="archive"][data-subcontext="author"]
    [data-headline-img="true"]
    .headline-content
    > div {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   5.Sidebar
   -------------------------------------------------------------------------- */
.sidebar-section {
  grid-column: 2;
  grid-row-start: 1;
}

.sidebar-item,
.sidebar-content {
  position: relative;
}

/* Label */
.sidebar-label {
  line-height: 1;
  margin-top: calc(var(--mini-gap) / 5);
  padding: 0.5em 0.8em;
  border-radius: var(--radius-full);
  background-color: var(--color-three);
  justify-self: center;
}

/* Item */
.sidebar-item {
  z-index: 1;
  position: relative;
  overflow: hidden;
  padding: var(--mini-gap);
  border-radius: var(--radius-large);
  gap: calc(var(--grid-gap) / 2);
}

.sidebar-content {
  line-height: 1.2;
  align-content: start;
  align-self: start;
  gap: calc(var(--grid-gap) / 4);
}

/* Button */
.sidebar-btn {
  align-self: end;
  will-change: transform;
}

/* Image */
.sidebar-img {
  position: absolute;
  z-index: -1;
  inset: 0;
}

/* /////// data /////// */
[data-sidebar="daily"][data-sidebar-size="full"] .sidebar-item {
  min-height: calc(100vh - 6vh);
}

[data-context="post"]
  [data-sidebar="daily"][data-sidebar-size="full"]
  .sidebar-item {
  height: var(--post-sidebar-height, initial);
  min-height: 500px;
  max-height: calc(100vh - 6vh);
}

[data-sidebar="daily"][data-sidebar-size="partial"] .sidebar-item {
  min-height: 600px;
}

[data-sidebar="daily"] .sidebar-item,
[data-sidebar="free"] .sidebar-item {
  padding-top: 1.2vw;
  text-align: left;
  gap: calc(var(--grid-gap) / 6);
  grid-template-rows: auto 1fr auto;
}

[data-sidebar="daily"] article {
  align-self: end;
  padding: 1.2vw;
  border-radius: var(--radius-medium);
  background-color: var(--opacity-rgba);
  backdrop-filter: blur(12px);
  will-change: transform;
}

[data-sidebar="daily"] article > div > div {
  will-change: transform;
}

[data-sidebar="daily"] .sidebar-label {
  background-color: var(--opacity-rgba);
  backdrop-filter: blur(8px);
}

[data-sidebar="daily"] .sidebar-label,
[data-sidebar="free"] .sidebar-label {
  margin: 0;
  justify-self: start;
}

[data-sidebar="free"] .sidebar-label {
  background-color: var(--color-body);
}

[data-sidebar="free"] .sidebar-item,
[data-sidebar="free"] .sidebar-content {
  gap: calc(var(--grid-gap) / 3.4);
}

[data-sidebar="checkout"] .sidebar-item,
[data-sidebar="access"] .sidebar-item {
  text-align: center;
}

[data-sidebar="checkout"] .sidebar-label,
[data-sidebar="access"] .sidebar-label {
  margin-top: 1vw;
}

[data-context="membership"][data-answers] .sidebar-section {
  grid-row-end: 3;
}

[data-context="membership"][data-answers][data-members-area] .sidebar-section {
  grid-row-end: 4;
}

/* RWD — Sidebar
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1921px) {
  [data-sidebar="daily"][data-sidebar-size="full"] .sidebar-item {
    max-height: calc(100vh - 6vh);
    min-height: 800px;
  }
}

@media (max-width: 1280px) {
  [data-sidebar="daily"],
  [data-sidebar="free"],
  [data-sidebar="access"] {
    display: none;
  }
}

@media (max-width: 1024px) {
  [data-sidebar="checkout"] {
    grid-column: 1/-1;
    grid-row: 2/3;
  }

  [data-sidebar="checkout"] :is(small, .sidebar-label) {
    display: none;
  }

  [data-sidebar="checkout"] .sidebar-item {
    padding: 0;
    background-color: var(--color-body);
  }

  [data-sidebar="checkout"] .sidebar-content {
    gap: calc(var(--grid-gap) / 2);
  }

  [data-sidebar="checkout"] .sidebar-title {
    font-size: var(--font-size-xxl);
  }

  [data-sidebar="checkout"] .sidebar-btn {
    font-size: var(--font-size-xl);
    min-width: 240px;
    justify-self: center;
  }
}

/* --------------------------------------------------------------------------
   6.Item
   -------------------------------------------------------------------------- */
.item {
  position: relative;
  align-content: start;
  gap: calc(var(--grid-gap) / 6);
}

/* Image */
.item-img {
  align-self: start;
}

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

/* Content */
.item-content {
  grid-column: 1/-1;
}

.item-img + .item-content {
  padding-left: calc(var(--mini-gap) / 5);
}

.item-title {
  font-weight: var(--font-weight-semibold);
}

.item-excerpt {
  display: none;
  max-width: 520px;
  margin: 2vh 0 0;
}

/* /////// data /////// */
[data-item] .item-img {
  pointer-events: none;
}

/* Row */
[data-item="row"] {
  padding: calc(var(--mini-gap) / 1.4);
  border-radius: var(--radius-medium);
  background-color: var(--color-body);
  gap: calc(var(--grid-gap) / 8) calc(var(--grid-gap) / 3);
  grid-template-columns: 1fr max(60px, 3.4vw);
}

[data-item="row"] .item-img {
  order: 2;
  aspect-ratio: 1/1;
}

[data-item="row"] .item-img img {
  border-radius: var(--radius);
}

[data-item="row"] span + .item-img {
  grid-row: span 2;
}

[data-item="row"] :is(span + .item-img, .item-content) {
  order: 1;
}

[data-item="row"] .item-content {
  padding-left: 0;
}

[data-item="row"] a + .item-content {
  grid-column: 1;
}

/* Featured */
[data-item="featured"] {
  border: calc(var(--mini-gap) / 1.25) solid var(--color-body);
  border-radius: var(--radius-large);
  background-color: var(--color-body);
}

[data-item="featured"] .item-img img {
  border-radius: var(--radius-small);
}

/* RWD — Loop
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1025px) {
  [data-loop="showcase"] .item:first-of-type {
    grid-column: span 2;
    grid-row: span 2;
  }

  [data-loop="showcase"] .item:first-of-type .item-title {
    font-size: var(--font-size-l);
  }

  [data-loop="showcase"] .item:first-of-type .item-excerpt {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   7.Featured
   -------------------------------------------------------------------------- */
.featured-section > div:last-child {
  position: relative;
  overflow: hidden;
  align-items: start;
  padding: calc(var(--grid-gap) / 1.6);
  border-radius: var(--radius-big);
  gap: calc(var(--grid-gap) / 2.2) calc(var(--grid-gap) / 3.4);
}

.featured-content {
  align-items: end;
  gap: calc(var(--grid-gap) / 2);
  grid-column: 1/-1;
}

.featured-title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-display);
  line-height: 1;
  flex: 1;
}

/* Button */
.featured-btn {
  flex-shrink: 0;
  color: currentColor;
}

.featured-btn span {
  font-weight: var(--font-weight-semibold);
}

/* /////// data /////// */
[data-context="featured"] [data-loop][data-feed-content] {
  align-items: stretch;
  background-color: var(--ghost-accent-color);
  gap: calc(var(--grid-gap) / 3.4);
}

/* RWD — Featured
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1480px) {
  [data-loop="featured"] .item:nth-of-type(n + 5) {
    display: none;
  }
}

@media (max-width: 768px) {
  [data-loop="featured"] .item:nth-of-type(n + 4) {
    display: none;
  }
}

@media (max-width: 480px) {
  [data-loop="featured"] .item:nth-of-type(n + 3) {
    display: none;
  }

  .featured-content > a {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   8.Related
   -------------------------------------------------------------------------- */

/* RWD — Featured
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1480px) {
  [data-loop="related"] .item:nth-of-type(n + 6) {
    display: none;
  }
}

@media (max-width: 1024px) {
  [data-loop="related"] .item:nth-of-type(n + 5) {
    display: none;
  }
}

@media (max-width: 768px) {
  [data-loop="related"] .item:nth-of-type(n + 4) {
    display: none;
  }
}

@media (max-width: 480px) {
  [data-loop="related"] .item:nth-of-type(n + 3) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9.Pagination
   -------------------------------------------------------------------------- */
.pagination-section {
  text-align: center;
}

/* Button */
.pagination-btn {
  padding: max(20px, 2vw) max(30px, 5vw);
  border-radius: var(--radius-full);
}

.pagination-btn::before {
  background-color: var(--g-btn-colorful, var(--ghost-accent-color));
}

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

[data-subcontext="author"] .pagination-section {
  margin-top: var(--row-gap);
}

/* --------------------------------------------------------------------------
   10.Topics
   -------------------------------------------------------------------------- */
.topic-wrap {
  padding: var(--mini-gap) var(--mini-gap) calc(var(--mini-gap) * 1.5);
  border-radius: var(--radius-large);
  grid-template-rows: 1fr;
}

.topic-wrap,
.topic-wrap > div {
  gap: max(10px, calc(var(--grid-gap) / 8));
}

/* Title */
.topic-btn {
  align-self: end;
  margin-top: max(10px, calc(var(--grid-gap) / 6));
  color: var(--g-accent-color-contrast, var(--color-font-one));
  grid-column: 1/-1;
  justify-self: center;
}

.topic-btn span {
  font-weight: var(--font-weight-semibold);
}

/* /////// data /////// */
.topic-wrap:is([data-topic-items="1"], [data-topic-items="2"]) {
  grid-template-rows: auto;
}

.topic-wrap:is([data-topic-items="1"], [data-topic-items="2"]) > div {
  align-self: start;
}

/* RWD — Topics
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1025px) {
  .topics-wrap:is([data-topics="1"], [data-topics="2"], [data-topics="3"])
    > :is([data-topic-number="1"], [data-topic-number="1"] ~ div),
  .topics-wrap:is([data-topics="4"], [data-topics="5"], [data-topics="6"])
    > :is([data-topic-number="4"], [data-topic-number="4"] ~ div),
  .topics-wrap:is([data-topics="7"], [data-topics="8"], [data-topics="9"])
    > :is([data-topic-number="7"], [data-topic-number="7"] ~ div),
  .topics-wrap:is([data-topics="10"], [data-topics="11"], [data-topics="12"])
    > :is([data-topic-number="10"], [data-topic-number="10"] ~ div) {
    align-self: start;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .topic-wrap:nth-child(3) {
    display: none;
  }

  .topics-wrap:is([data-topics="1"], [data-topics="2"])
    > :is([data-topic-number="1"], [data-topic-number="1"] ~ div),
  .topics-wrap:is([data-topics="3"], [data-topics="4"])
    > :is([data-topic-number="3"], [data-topic-number="3"] ~ div),
  .topics-wrap:is([data-topics="5"], [data-topics="6"])
    > :is([data-topic-number="5"], [data-topic-number="5"] ~ div),
  .topics-wrap:is([data-topics="7"], [data-topics="8"])
    > :is([data-topic-number="7"], [data-topic-number="7"] ~ div),
  .topics-wrap:is([data-topics="9"], [data-topics="10"])
    > :is([data-topic-number="9"], [data-topic-number="9"] ~ div),
  .topics-wrap:is([data-topics="11"], [data-topics="12"])
    > :is([data-topic-number="11"], [data-topic-number="11"] ~ div) {
    align-self: start;
  }
}

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

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

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

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

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

/* Size
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-widget-size="large"] {
  gap: var(--mini-gap);
}

[data-widget-size="large"] :is(.widget-item, .widget-img) {
  height: max(70px, 6.4vw);
}

[data-widget-size="large"] .widget-title {
  font-size: var(--font-size-l);
}

/* Medium */
[data-widget-size="medium"] :is(.widget-item, .widget-img) {
  height: max(60px, 5.4vw);
}

[data-widget-size="medium"] {
  gap: calc(var(--mini-gap) / 1.2);
}

[data-widget-size="medium"] .widget-title {
  font-size: var(--font-size-m);
}

/* Small */
[data-widget-size="small"] {
  gap: calc(var(--mini-gap) / 1.6);
}

[data-widget-size="small"] :is(.widget-item, .widget-img) {
  height: max(50px, 4.4vw);
}

[data-widget-size="small"] .widget-title {
  font-size: var(--font-size-r);
}

/* Type
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-widget="compact"] {
  gap: calc(var(--mini-gap) / 2);
}

[data-widget="compact"] .widget-title {
  font-size: var(--font-size-s);
  padding: calc(var(--mini-gap) / 1.6) calc(var(--mini-gap) / 1.2);
}

/* Square */
[data-widget="square"] .widget-img + .widget-title {
  padding-left: calc(var(--mini-gap) / 1.4);
}

[data-widget="square"] .widget-img img {
  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
}

/* Round & Mixed */
[data-widget="round"] :is(.widget-item.is-img, .widget-img img),
[data-widget="mixed"] .widget-img img {
  border-radius: var(--radius-full);
}

[data-widget="round"] .widget-img img,
[data-widget="mixed"] .widget-img img {
  padding: calc(var(--mini-gap) / 2);
}

[data-widget="round"] .widget-img + .widget-title,
[data-widget="mixed"] .widget-img + .widget-title {
  padding-left: 0;
}

/* RWD — Widgets
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 1025px) and (max-width: 1920px) {
  [data-sidebar="true"] .widget-section {
    margin-right: 15px;
  }
}

@media (min-width: 1025px) and (max-width: 1610px) {
  [data-sidebar="false"] .widget-section {
    margin-right: 15px;
  }
}

@media (min-width: 1025px) and (max-width: 1480px) {
  [data-widget-size="large"] .widget-title {
    font-size: var(--font-size-m);
  }

  [data-widget-size="medium"] .widget-title {
    font-size: var(--font-size-r);
  }

  [data-widget-size="small"] .widget-title {
    font-size: var(--font-size-s);
  }
}

@media (max-width: 1480px) {
  [data-widget="compact"] .widget-title {
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 1024px) {
  [data-widget-size] {
    gap: calc(var(--mini-gap) / 1.2);
  }

  [data-context="index"] [data-widget-size]:not([data-widget-scroll]),
  [data-context="directory"] [data-widget-size]:not([data-widget-scroll]) {
    gap: calc(var(--mini-gap) / 1.6);
  }

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

  [data-context="index"]
    [data-widget-size]:not([data-widget-scroll])
    .widget-title,
  [data-context="directory"]
    [data-widget-size]:not([data-widget-scroll])
    .widget-title {
    font-size: var(--font-size-s);
  }

  [data-context="index"] .widget-section,
  [data-context="directory"] .widget-section {
    overflow: hidden;
  }

  [data-widget-scroll] {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-right: var(--site-gap);
    padding-left: var(--site-gap);
    cursor: grab;
    scrollbar-width: none;
  }

  [data-widget-scroll][data-widget-size] :is(.widget-item, .widget-img) {
    height: max(80px, 5.4vw);
  }

  [data-widget-scroll].is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

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

  [data-widget-scroll] .widget-item {
    flex: 0 0 auto;
    transform: none;
    white-space: nowrap;
  }
}

@media (max-width: 1024px) and (any-pointer: coarse) {
  [data-widget-scroll] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--site-gap);
    scroll-padding-right: var(--site-gap);
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
  }

  [data-widget-scroll] .widget-item {
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {
  [data-widget="compact"] {
    gap: calc(var(--mini-gap) / 3);
  }

  [data-widget="compact"] .widget-title {
    font-size: var(--font-size-xxs);
  }
}

/* --------------------------------------------------------------------------
   12.Pinned
   -------------------------------------------------------------------------- */
.pinned-section small > button {
  padding: 2px 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  opacity: var(--opacity-label);
  color: var(--color-font-one);
  border: var(--border);
  border-radius: var(--radius-full);
  background-color: var(--color-body);
}

.pinned-section small > button:hover,
.pinned-section small > button[aria-pressed="true"] {
  opacity: 1;
}

/* Item */
.pinned-item button {
  position: absolute;
  top: calc(var(--mini-gap) / 2);
  right: calc(var(--mini-gap) / 2);
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: var(--radius-full);
  background-color: var(--opacity-rgba);
  backdrop-filter: blur(2px);
  place-items: center;
}

.pinned-item button:hover {
  background-color: var(--color-one);
  backdrop-filter: none;
}

.pinned-item button svg {
  width: 10px;
  height: 10px;
  transition: fill 0.2s ease, stroke 0.2s ease;
  fill: var(--color-one);
  stroke: var(--color-one);
}

.pinned-item button:hover svg {
  fill: var(--color-two);
  stroke: var(--color-two);
}

.pinned-item a + div {
  background-color: transparent;
}

.pinned-item a + div button {
  backdrop-filter: blur(8px);
}

.pinned-item div:first-child {
  padding: var(--mini-gap);
  border-radius: var(--radius-medium);
}

/* Icon & Label */
.pinned-section small > button .pinned-label {
  margin-right: calc(var(--mini-gap) / 2);
  transition: opacity 0.3s;
  opacity: 0;
}

.pinned-section small > button:hover .pinned-label {
  opacity: 1;
}

.pinned-label {
  padding: 0.2em 0.8em;
  border-radius: var(--radius-full);
}

.pinned-label + svg {
  width: 18px;
  transition: fill 0.5s ease, opacity 0.5s ease;
  pointer-events: auto;
  opacity: 0.3;
  fill: var(--color-one);
}

/* Placeholder */
.pinned-placeholder > div {
  align-content: center;
  padding: calc(var(--grid-gap) / 1.2) var(--grid-gap);
  text-align: center;
  border-radius: var(--radius-large);
}

.pinned-placeholder > div span.pin {
  font-size: 82%;
  position: relative;
  top: -0.06em;
  display: inline-flex;
  align-items: center;
  margin: 0 0.1em;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-full);
  background-color: var(--color-three);
  gap: calc(var(--mini-gap) / 2.4);
}

.pinned-placeholder > div span.pin svg {
  --min: 9;
  --max: 14;
  width: clamp(
    calc(var(--min) * 1px),
    calc(
      (((var(--max) - var(--min)) / var(--scale-scope)) * 100 * 1vw) +
        (
          (
              var(--min) -
                (
                  (var(--max) - var(--min)) / var(--scale-scope) *
                    var(--scale-min)
                )
            ) * 1px
        )
    ),
    calc(var(--max) * 1px)
  );
  fill: var(--color-one);
}

/* /////// data /////// */
[data-pinned="false"] > div:nth-child(-n + 2),
[data-pinned="true"] [data-pinned-placeholder],
[data-pinned-manage="false"] [data-pinned="remove"],
[data-context="error"] [data-pinned="false"] {
  display: none;
}

[data-pinned-manage="true"] [data-pinned="remove"] {
  pointer-events: auto;
}

[data-pinned-manage="true"],
[data-pinned-manage="true"] .pinned-item {
  pointer-events: none;
}

[data-pinned-manage="true"] .pinned-item img {
  transform-origin: 50% 8%;
  animation: pinned-wiggle 0.24s ease-in-out infinite;
  will-change: transform;
}

[data-pinned-manage="true"] .pinned-item:nth-child(odd) img {
  animation-delay: 0.06s;
}

[data-pinned-manage="true"] .pinned-item:nth-child(3n) img {
  animation-delay: -0.04s;
}

/* Label & Icon */
[data-pinned-icon="both"][aria-pressed] {
  display: inline-flex;
  align-items: center;
  padding: 0;
  pointer-events: none;
  border: none;
}

[data-pinned-label="pinned"] + svg {
  opacity: 1;
}

[data-pinned-label="pinned"],
[data-pinned-label="limit"] {
  color: var(--color-font-black);
}

[data-pinned-label="pinned"] {
  background-color: var(--alert-green);
}

[data-pinned-label="limit"] {
  background-color: var(--alert-red);
}

/* Animation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes pinned-wiggle {
  0% {
    transform: rotate(-0.6deg);
  }
  50% {
    transform: rotate(0.6deg);
  }
  100% {
    transform: rotate(-0.6deg);
  }
}

/* RWD — Pinned
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 768px) {
  [data-pinned-label] {
    display: none;
  }

  [data-pinned-label] + svg {
    margin-left: 14px;
  }
}

/* --------------------------------------------------------------------------
   13.Join
   -------------------------------------------------------------------------- */
.join-section {
  margin-top: calc(var(--row-gap) / 1.5);
  align-self: start;
}

div.is-join,
div.is-join .join-section {
  margin-top: 0;
  gap: calc(var(--grid-gap) / 1.2);
}

/* Title */
.join-title {
  max-width: 1700px;
  padding-bottom: calc(var(--grid-gap) / 1.6);
}

/* Label */
.join-label {
  line-height: 1.2;
  position: absolute;
  top: var(--mini-gap);
  left: var(--mini-gap);
  align-self: start;
  width: auto;
  padding: 6px clamp(8px, 1vw, 24px);
  border-radius: var(--radius-full);
  background-color: var(--opacity-rgba);
  justify-self: start;
}

/* CTA */
.join-cta {
  position: relative;
  overflow: hidden;
  padding: var(--mini-gap);
  border-radius: var(--radius-large);
  gap: var(--mini-gap);
}

.join-btns,
.join-cta {
  align-items: end;
}

/* Image */
.join-img {
  position: absolute;
  z-index: -1;
  inset: 0;
}

/* Buttons */
.join-btns {
  grid-template-columns: 1fr auto;
  justify-items: end;
}

.join-btns,
.join-btns > div {
  gap: calc(var(--mini-gap) / 1.2);
}

.join-btns > div {
  flex-wrap: nowrap;
  justify-content: end;
}

.join-btn {
  padding: 0.7em 1.6vw;
}

.join-btn.is-free {
  width: calc(var(--sidebar) - var(--mini-gap) + calc(var(--grid-gap) / 1.2));
}

.join-btn.is-regular::before {
  border-radius: var(--radius-small);
  background-color: var(--opacity-rgba);
}

/* /////// data /////// */
[data-sidebar="access"] ~ .join-section,
[data-sidebar="free"] ~ .join-section {
  display: none;
}

[data-join-featured="false"] .join-btns {
  grid-template-columns: 1fr;
}

[data-join-img="true"] .join-cta {
  height: clamp(160px, 16vw, 340px);
}

[data-join-img] .join-btn.is-regular {
  color: var(--color-font-one);
}

[data-join-img="true"] .join-label,
[data-join-img="true"] .join-btn.is-regular::before {
  backdrop-filter: blur(12px);
}

[data-join-img="false"] .join-label,
[data-join-img="false"] .join-btn.is-regular::before {
  background-color: var(--color-three);
}

/* RWD — Join
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1280px) {
  [data-sidebar="free"] ~ .join-section {
    display: block;
  }
}

@media (max-width: 1024px) {
  .join-btns,
  .join-btns > div {
    gap: calc(var(--mini-gap) / 2);
  }

  [data-join-img="true"] .join-label {
    max-width: 210px;
    border-radius: var(--radius-small);
  }

  [data-join-img="true"] .join-label,
  [data-join-featured="true"] .join-label {
    position: relative;
    top: 0;
    left: 0;
  }
}

@media (max-width: 768px) {
  .join-label {
    font-size: var(--font-size-s);
  }

  .join-btns {
    grid-template-columns: 1fr;
  }

  .join-btn.is-free {
    width: 100%;
  }

  .join-btn.is-regular {
    flex: 1 0 40%;
  }

  [data-join-img="false"] .join-label {
    display: none;
  }

  [data-join-img="true"] .join-cta {
    height: 100%;
    min-height: 160px;
  }

  [data-join-img="true"] .join-btns {
    margin-top: 80px;
  }
}

@media (max-width: 480px) {
  .join-btns {
    grid-template-columns: 1fr;
  }

  .join-btns > div {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .join-btn.is-regular {
    font-size: var(--font-size-r);
    padding-top: 0.4em;
    padding-bottom: 0.4em;
  }
}

/* --------------------------------------------------------------------------
   14.Footer
   -------------------------------------------------------------------------- */
.footer-section {
  margin: var(--row-gap) 0 calc(var(--grid-gap) / 4);
}

.footer-wrap {
  padding-top: calc(var(--mini-gap) * 1.5);
  border-top: var(--border);
  gap: var(--grid-gap);
}

/* Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-content {
  justify-content: space-between;
  gap: calc(var(--grid-gap) / 2);
}

/* Social
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-social li {
  line-height: 0;
  list-style: none;
}

.footer-social li > a {
  display: block;
}

/* Columns
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-columns {
  align-content: space-between;
  flex-direction: column;
}

.footer-title {
  font-weight: var(--font-weight-bold);
}

.footer-item {
  gap: calc(var(--grid-gap) / 3);
}

.footer-item ul {
  gap: calc(var(--grid-gap) / 6);
}

.footer-item ul li:last-child {
  margin-bottom: calc(var(--mini-gap) * 3);
}

.footer-copyright {
  opacity: var(--opacity-caption);
}

/* /////// data /////// */
[data-columns] > span {
  flex-basis: 100%;
  width: var(--grid-gap);
}

[data-columns][data-columns-items="1"],
[data-columns][data-columns-items="2"] {
  align-content: flex-start;
}

[data-columns][data-columns-items="1"] > span:nth-of-type(n + 1),
[data-columns][data-columns-items="2"] > span:nth-of-type(n + 2),
[data-columns][data-columns-items="3"] > span:nth-of-type(n + 3),
[data-columns][data-columns-items="4"] > span:nth-of-type(n + 4),
[data-columns][data-columns-items="5"] > span:nth-of-type(n + 5),
[data-columns][data-columns-items="6"] > span:nth-of-type(n + 6) {
  display: none;
}

[data-columns="2"] > section {
  width: calc(50% - var(--grid-gap) + var(--grid-gap) / 2);
}

[data-columns="3"] > section,
[data-columns="4"][data-columns-items="3"] > section,
[data-columns="5"][data-columns-items="3"] > section,
[data-columns="6"][data-columns-items="3"] > section {
  width: calc(33.333% - var(--grid-gap) + var(--grid-gap) / 3);
}

[data-columns="4"] > section,
[data-columns="5"][data-columns-items="4"] > section,
[data-columns="6"][data-columns-items="4"] > section {
  width: calc(25% - var(--grid-gap) + var(--grid-gap) / 4);
}

[data-columns="5"] > section,
[data-columns="6"][data-columns-items="5"] > section {
  width: calc(20% - var(--grid-gap) + var(--grid-gap) / 5);
}

[data-columns="6"] > section {
  width: calc(16.666% - var(--grid-gap) + var(--grid-gap) / 6);
}

/* Banner desktop: visibile solo su desktop */
.banner {
  margin-top: 20px;
  text-align: center;
}

.banner-desktop {
  margin-top: 20px;
  display: block;
  text-align: center;
}

.banner-mobile {
  display: none;
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .banner-desktop {
    display: none;
  }

  .banner-mobile {
    display: block;
  }
}

/* Penultimo li della prima ul del nav (Cerca Offerta) */
.header-nav > ul:first-child > li:nth-last-child(2) {
  /* Esempi di formattazione */

  /* eventuale spinta a destra */
  padding-left: 1rem;

  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.header-nav > ul:first-child > li:nth-last-child(2) a {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-font-one);
  background-color: var(--color-two);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--color-font-one);
}

.header-nav > ul:first-child > li:nth-last-child(2) a:hover {
  text-decoration: none !important;
}

.kg-card.kg-callout-card.kg-callout-card-red.offerte-note {
  margin-top: 30px;
}