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

   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: 40px;
   --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, .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, 325px);

   /* 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: .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: .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: .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: .2;
   --opacity-rgba: rgba(255, 255, 255, .5);
   --opacity-caption: .8;
   --opacity-label: .7;
   --opacity-meta: .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: .2;
   --opacity-rgba: rgba(255, 255, 255, .5);
   --opacity-caption: .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: .2;
   --opacity-rgba: rgba(17, 19, 29, .5);
   --opacity-caption: .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: .2;
      --opacity-rgba: rgba(17, 19, 29, .5);
      --opacity-caption: .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 .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 .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: .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 .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: .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 .2s ease;
   background-color: var(--ghost-accent-color);
   inset: 0;
}

.g-btn:not(.no-opacity):hover::before {
   opacity: .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 .3s ease;
   will-change: transform;
}

.g-btn-alt::after {
   margin-left: .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: .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: .3em;
}

/* /////// data /////// */
[data-toc-clone] .g-chevron::before {
   transition: margin-right .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: '#';
}

/* Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-meta {
   line-height: 1.5;
   margin-top: .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: .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: .2em .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 .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: .3vw;
   padding-top: max(8px, .5vw);
   border-top: var(--border);
}

/* Terms
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-terms {
   display: flex;
   align-items: center;
   margin: max(8px, .5vw) 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 .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: .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: .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 .4em 0;
   break-inside: avoid-column;
   gap: .3em;
}

.g-benefits li::before {
   font-family: var(--font-family-system);
   font-size: 90%;
   line-height: 1;
   flex-shrink: 0;
   margin-top: .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 .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: .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);
}

.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 .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .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: .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 .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: 160px;
   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 .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, .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, .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;
   }

}

@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)) * .93vw), calc((var(--font-size-max-headline) * calc(var(--font-size-headline) / 100)) * .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: .5em .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: 700px;
}

[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 .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 .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 .2s ease, stroke .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 .3s;
   opacity: 0;
}

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

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

.pinned-label + svg {
   width: 18px;
   transition: fill .5s ease, opacity .5s ease;
   pointer-events: auto;
   opacity: .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: -.06em;
   display: inline-flex;
   align-items: center;
   margin: 0 .1em;
   padding: .3em .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 .24s ease-in-out infinite;
   will-change: transform;
}

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

[data-pinned-manage='true'] .pinned-item:nth-child(3n) img {
   animation-delay: -.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(-.6deg); }
   50% { transform: rotate(.6deg); }
   100% { transform: rotate(-.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: .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: .4em;
      padding-bottom: .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);
}