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

   Myoan 1.2.3, CSS Part I

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

   II. 3rd party scripts
   |
   ├─ Normalize.css
   ├─ lightense-images.js
   └─ Progress bar

   III. Theme
   |
   ├─ 1.Global
   ├─ 2.Header
   ├─ 3.Hero
   ├─ 4.Subscribe
   ├─ 5.Tiers
   ├─ 6.FAQs
   ├─ 7.Loop
   ├─ 8.Pagination
   ├─ 9.Author & Tag page
   ├─ 10.Footer
   ├─ 11.Error page
   ├─ 12.Signup, Signin & Contact page
   └─ 13.Recommendations, Authors & Tags page
   
   //////////////////////////////////////////////////////////////////////////

   I. Customize

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

:root {

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

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

   /* Gap */
   --grid-gap: 4vw;
   --site-gap: 5vw;

   /* Radius */
   --radius: 10px;

   /* Switch */
   --switch-size: 48px;

   /* Cover opacity */
   --opacity-cover: 40%;

   /* Content */
   --site-width: 1730px;
   --wide-width: 1100px;
   --regular-width: 800px;

   --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));
   --regular: min(var(--regular-width), 100% - var(--site-gap) * 2);
   
   --grid-template-columns: [full-start] var(--full) [site-start] var(--site) [wide-start] var(--wide) [regular-start] var(--regular) [regular-end] var(--wide) [wide-end] var(--site) [site-end] var(--full) [full-end];

   /* Fonts
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   --font-family-general: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --font-weight-general-regular: 400;
   --font-weight-general-bold: 700;

   --font-family-one: var(--gh-font-heading, var(--font-family-general));
   --font-weight-one-regular: var(--font-weight-general-regular);
   --font-weight-one-bold: var(--font-weight-general-bold);

   --font-family-two: var(--gh-font-heading, var(--font-family-general));
   --font-weight-two-regular: var(--font-weight-general-regular);
   --font-weight-two-bold: var(--font-weight-general-bold);

   --font-family-three: var(--gh-font-heading, var(--font-family-general));
   --font-weight-three-regular: var(--font-weight-general-regular);
   --font-weight-three-bold: var(--font-weight-general-bold);

   --font-family-post-content: var(--gh-font-body, var(--font-family-general));
   --font-weight-post-content-regular: var(--font-weight-general-regular);
   --font-weight-post-content-bold: var(--font-weight-general-bold);

   /* Light version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   --color-font-one: #120b14;
   --color-font-two: #f8f6f5;
   --color-font-black: #120b14;
   --color-font-white: #fff;

   --color-one: #120b14;
   --color-two: #f1efef;
   --color-three: #f8f6f5;
   --color-four: #120b14;
   --color-five: #f1efef;

   --color-body: #fff;
   --color-white: #f8f6f5;
   --color-black: #120b14;
   --color-border: #ededed;
   
   --ghost-accent-color: #ff4d82;
}

body {
/* Fonts size
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   --font-size-xxl: clamp(calc(8rem + var(--font-scale, 0rem)), calc(4.9vw + 6.2rem + var(--font-scale, 0rem)), calc(13.6rem + var(--font-scale, 0rem)));
   --font-size-xl: clamp(calc(3rem + var(--font-scale, 0rem)), calc(3.6vw + 1.7rem + var(--font-scale, 0rem)), calc(7.2rem + var(--font-scale, 0rem)));
   --font-size-l: clamp(calc(2.4rem + var(--font-scale, 0rem)), calc(2.1vw + 1.6rem + var(--font-scale, 0rem)), calc(4.8rem + var(--font-scale, 0rem)));
   --font-size-m: clamp(1.8rem, 1.3vw + 1.3rem, 3.2rem);
   --font-size-s: clamp(1.4rem, .8vw + 1rem, 2rem);
   --font-size-xs: clamp(1.5rem, .6vw + 1.2rem, 2.1rem);
   --font-size-xxs: clamp(1.5rem, .3vw + 1.4rem, 1.8rem);
   --font-size-xxxs: clamp(1.5rem, .1vw + 1.4rem, 1.7rem);

   --font-size-button: clamp(2rem, 1.4vw + 1.3rem, 4rem);
   --font-size-logo: clamp(3.2rem var(--font-scale, + 0rem), .4vw + 3rem var(--font-scale, + 0rem), 3.8rem var(--font-scale, + 0rem));
   --font-size-post: clamp(1.8rem, .4vw + 1.6rem, 2.4rem);
}

/* Sepia version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.sepia-mode {
   --color-font-one: #1e1e1e;
   --color-font-two: #f1efe3;
   --color-font-black: #1e1e1e;
   --color-font-white: #f1efe3;
   --color-one: #1e1e1e;
   --color-two: #f0ece2;
   --color-three: #f4f1e6;
   --color-four: #1e1e1e;
   --color-five: #f0ece2;
   --color-body: #fdf8ed;
   --color-white: #fdf8ed;
   --color-black: #1e1e1e;
   --color-border: #eae6dc;
}

/* Dark version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.dark-mode {
   --color-font-one: #fafafa;
   --color-font-two: #11131d;
   --color-font-black: #11131d;
   --color-font-white: #fafafa;
   --color-one: #fafafa;
   --color-two: #f6f6f8;
   --color-three: #171923;
   --color-four: #1c1e27;
   --color-five: #1c1e27;
   --color-body: #110019;
   --color-white: #f6f6f8;
   --color-black: #11131d;
   --color-border: #2b2e36;
}

/* Auto dark version
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme:dark) {
   .auto-dark-mode {
      --color-font-one: #fafafa;
      --color-font-two: #11131d;
      --color-font-black: #11131d;
      --color-font-white: #fafafa;
      --color-one: #fafafa;
      --color-two: #f6f6f8;
      --color-three: #171923;
      --color-four: #1c1e27;
      --color-five: #1c1e27;
      --color-body: #11131d;
      --color-white: #f6f6f8;
      --color-black: #11131d;
      --color-border: #2b2e36;
   }

   .auto-dark-mode.sepia-mode {
      --color-font-one: #f1efe3;
      --color-font-white: #f1efe3;
      --color-one: #f1efe3;
      --color-two: #f0ece2;
   }

}

/* Secondary logo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (prefers-color-scheme:dark) {
   .auto-dark-mode a.is-dark + a {
      display: none;
   }
}

@media (prefers-color-scheme:light) {
   .auto-dark-mode a.is-dark {
      display: none;
   }
}

/* Ghost 'Custom Fonts' adjustment
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
body[class*='gh-font-heading'] {
   --font-weight-one-regular: 400;
   --font-weight-one-bold: 700;
   --font-weight-two-regular: 400;
   --font-weight-two-bold: 700;
   --font-weight-three-regular: 400;
   --font-weight-three-bold: 700;

   --font-scale: * 1; 
   --font-style: normal;
   --font-weight: 700;
   --letter-spacing: normal;
}

body[class*='gh-font-body'] {
   --font-weight-general-regular: 400;
   --font-weight-general-bold: 700;
   --font-weight-post-content-regular: 400;
   --font-weight-post-content-bold: 700;
}

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

   II. 3rd party scripts

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

/* Normalize.css
   –––––––––––––––––––––––––––––––––––––––––––––––––––– 
   Version : 8.0.1
   Website : necolas.github.io/normalize.css
   Repo    : github.com/necolas/normalize.css
   Author  : Nicolas Gallagher
   License : MIT
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:0.67em 0}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:1em}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,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;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px;-webkit-appearance:textfield}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}details{display:block}summary{display:list-item}

/* Custom settings for 'lightense-images.js' */
.lightense-backdrop{z-index:99998!important;background-color:var(--color-body)!important;-webkit-backdrop-filter:initial!important;backdrop-filter:initial!important}.lightense-wrap ~ br,.lightense-wrap ~ small{display:none}.lightense-wrap img{border-radius:0!important}

/* Custom settings for 'Progress bar' */
.post-progress{position:fixed;z-index:90;top:0;right:0;left:0;width:100%;height:8px;transition:opacity .15s ease-out .3s;border:none;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.post-progress:not([value]){display:none}.post-progress,.post-progress[value]::-webkit-progress-bar{background-color:transparent}.post-progress[value]::-webkit-progress-value{background-color:var(--ghost-accent-color)}.post-progress[value]::-moz-progress-bar{background-color:var(--ghost-accent-color)}.post-progress[value='1']{opacity:0}

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

   III. Theme
   
   ////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------------
   1.Global
   -------------------------------------------------------------------------- */
html {
   font-size: 62.5%;
}

html,
body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
}

body {
   font-family: var(--gh-font-body, var(--font-family-general));
   font-size: 2rem;
   font-weight: var(--font-weight-general-regular);
   line-height: 1.5;
   word-wrap: break-word;
   word-break: break-word;
   color: var(--color-font-one);
   background-color: var(--color-body);
}

/* Typography
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,h2,h3,h4,h5,h6,
input,
textarea,
blockquote {
   line-height: 1.2;
}

h1,h2,h3,h4,h5,h6 {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-regular);
   width: 100%;
}

/* 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(--gh-font-body, var(--font-family-general));
   font-weight: var(--font-weight-general-regular);
   border: none;
   border-radius: 0;
   outline: none;
   background-color: transparent;
   box-shadow: none;
}

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

input:focus::placeholder,
textarea:focus::placeholder {
   opacity: .6;
}

/* Figcaption
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
figcaption {
   font-size: 1.4rem;
   margin-top: 8px;
   opacity: .8;
}

figcaption a {
   text-decoration: underline;
}

/* Dynamic color
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
body.is-light-accent .g-btn,
body.is-light-bg :is(.get-contrast, .get-contrast a),
body.is-dark-bg .contrast-btn,
body.is-dark-bg.is-dark-accent .contrast-btn {
   color: var(--color-font-black);
}

body.is-light-bg .contrast-btn::after {
   background-color: var(--color-black);
}

body.is-dark-accent .g-btn,
body.is-dark-bg :is(.get-contrast, .get-contrast a),
body.is-light-bg .contrast-btn {
   color: var(--color-font-white);
}

body.is-dark-bg .contrast-btn::after {
   background-color: var(--color-white);
}

body:not(.is-light-bg):not(.is-dark-bg) .auto-btn {
   color: var(--color-font-two);
}

body:not(.is-light-bg):not(.is-dark-bg) .auto-btn::after {
   background-color: var(--color-one);
}

/* Post content */
body.is-light-accent .kg-card.kg-button-card .kg-btn,
body.is-light-accent .kg-card.kg-product-card .kg-product-card-button {
   color: var(--color-font-black);
}

body.is-light-accent .kg-card.kg-audio-card .kg-audio-thumbnail svg {
   fill: var(--color-font-black);
}

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

.g-logo img {
   width: auto;
   aspect-ratio: attr(width)/attr(height);
}

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

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

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

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

.g-img img {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}

/* Image orientation */
.g-img-orientation {
   margin: 0;
}

.g-img-orientation.is-portrait {
   aspect-ratio: 1/1.3;
}

.g-img-orientation.is-landscape {
   aspect-ratio: 4/3;
}

.g-img-orientation.is-panoramic {
   aspect-ratio: 2/1;
}

.g-img-orientation.is-square {
   aspect-ratio: 1/1;
}

/* Image inline  */
.g-img-inline img {
   width: 1.3em;
   height: 1.3em;
   margin: 0 .2em -.3em 0;
   border-radius: 100%;
   -o-object-fit: cover;
   object-fit: cover;
}

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

/* Title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
[class*='g-font'][class$='l'] {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-regular);
   letter-spacing: var(--letter-spacing, normal);
}

[class*='g-font'][class$='l'] span {
   font-weight: var(--font-weight, bold);
   font-style: var(--font-style, normal);
}

h2[class*='g-font'][class$='m'],
h2[class*='g-font'][class$='s'] {
   font-family: var(--font-family-three);
   font-weight: var(--font-weight-three-regular);
}

.g-font-xxl,
.g-font-xl,
.g-font-l,
.g-font-m,
.g-font-s {
   display: inline-block;
   margin: 0;
}

.g-font-xl strong,
.g-font-xl b {
   font-weight: var(--font-weight-one-bold);
}

.g-font-xl sup {
   font-family: var(--gh-font-body, var(--font-family-general));
   font-size: .35em;
   font-weight: var(--font-weight-general-regular);
   display: inline-block;
   transform: translateY(-.85em);
}

.g-font-xxl {
   font-size: var(--font-size-xxl);
   line-height: 1.1;
}

.g-font-xl {
   font-size: var(--font-size-xl);
   line-height: 1.2;
   max-width: 1700px;
}

.g-font-l {
   font-size: var(--font-size-l);
   line-height: 1.3;
   max-width: 1700px;
}

.g-font-m {
   font-size: var(--font-size-m);
   line-height: 1.3;
   max-width: 1400px;
}

.g-font-s {
   font-size: var(--font-size-s);
   max-width: 1200px;
}

.g-font-xs {
   font-size: var(--font-size-xs);
   max-width: 1000px;
}

.g-font-xxs {
   font-size: var(--font-size-xxs);
   line-height: 1.3;
}

.g-font-xxxs {
   font-size: var(--font-size-xxxs);
   line-height: 1.3;
}

.g-font-xxxxs {
   font-size: 1.4rem;
   line-height: 1.3;
   display: block;
}

/* Link */
a[class*='g-font']:hover,
[class*='g-font'] a:hover,
[class*='g-font'] a.is-active {
   text-decoration: underline;
   text-underline-offset: 3px;
}

a[class*='g-font'][class$='l']:hover,
[class*='g-font'][class$='l'] a:hover,
a[class*='g-font'][class$='m']:hover,
[class*='g-font'][class$='m'] a:hover {
   text-decoration-thickness: 2px;
}

a[class*='g-font'][class$='s'],
[class*='g-font'][class$='s'] a,
a[class*='g-font'][class$='s']:hover,
[class*='g-font'][class$='s'] a:hover,
[class*='g-font'] a.is-active {
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
}

/* Button
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-btn {
   font-family: var(--font-family-two);
   font-size: var(--font-size-button);
   font-weight: var(--font-weight-two-regular);
   line-height: 1.3;
   position: relative;
   z-index: 1;
   display: inline-grid;
   box-sizing: border-box;
   padding: .55em 2em;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   color: var(--color-font-white);
   border: none;
   outline: none;
   background-color: transparent;
}

.g-btn,
.g-btn::after {
   border-radius: 100px;
}

.g-btn::after {
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   content: '';
   transition: opacity .2s ease;
   background-color: var(--ghost-accent-color);
}

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

/* Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-content p {
   display: block;
   margin: .8em 0 0;
}

/* Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-meta {
   margin-bottom: max(.8em, 16px);
}

/* Members label */
.g-meta span {
   font-size: max(1.2rem, 60%);
   line-height: 1.3;
   display: inline-block;
   margin-right: .2em;
   padding: .1em .8em .2em;
   transform: translateY(-12%);
   border: 1px solid;
   border-radius: 100px;
}

/* Suffix
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.suffix-author::before {
   content: '@';
}

.suffix-tag::before {
   content: '#';
}

/* Label
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-label {
   line-height: 1.4;
   display: inline-block;
   align-items: end;
   margin: 0 0 1.6vh 0;
}

.g-label.g-grid {
   display: flex;
}

.g-label small:nth-child(1) {
   flex: 1 0 auto;
   max-width: 100%;
}

.g-label a {
   display: inline-block;
}

/* Alert
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-alert {
   display: none;
}

/* Question
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-question {
   display: block;
   margin-top: 1.6vh;
   opacity: .8;
}

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

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

.g-terms:not(.subscribe-terms) {
   opacity: .8;
}

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

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

.g-terms input[type="checkbox"]::before {
   width: 8px;
   height: 8px;
   content: '';
   transition: 80ms transform 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;
}

/* Benefits
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-benefits {
   max-width: 700px;
   margin: 4.4vh 0 0;
   padding: 0;
   column-gap: 2vw;
   columns: auto 280px;
}

.g-benefits.is-free {
   max-width: 100%;
}

.g-benefits li {
   position: relative;
   padding: 0 0 .4em .9em;
   list-style: none;
   break-inside: avoid-column;
}

.g-benefits li::before {
   font-family: var(--gh-font-body, var(--font-family-general));
   font-size: .8em;
   font-weight: var(--font-weight-general-regular);
   line-height: 1;
   position: absolute;
   top: .45em;
   left: 0;
   content: "✓";
}

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

/* Template */
.g-grid-template {
   display: grid;
   grid-template-columns: var(--grid-template-columns);
}

.g-grid-template.g-child-regular > * {
   grid-column: regular;
}

.g-grid-template.g-child-wide > * {
   grid-column: wide;
}

.g-grid-template.g-child-site > * {
   grid-column: site;
}

.g-grid-template.g-child-full > *,
.g-grid-template.g-parent-full {
   grid-column: full;
}

.g-grid-template,
.g-grid-template.g-child-wide > *,
.g-grid-template.g-child-site > *,
.g-grid-template.g-child-full > *,
.g-grid-template.g-parent-full {
   width: 100%;
}

/* RWD — Global
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1600px) {
   .g-benefits.is-free {
      max-width: 700px;
   }

}

@media (max-width:768px) {
   .g-label small.is-author,
   .g-label small.is-tags {
      display: none;
   }

}

@media (max-width:480px) {
   .g-logo.is-header img {
      height: var(--height-logo-mobile-header);
   }

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

}

/* --------------------------------------------------------------------------
   2.Header
   -------------------------------------------------------------------------- */
.header-wrap {
   position: relative;
   z-index: 1;
   box-sizing: border-box;
   min-height: 55px;
   margin-top: 30px;
   padding: 0 var(--site-gap);
   padding-bottom: 2rem;
}

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

.header-content {
   padding-top: 3rem;
   display: flex;
   flex: 0 1 100%;
}

.header-content li,
.header-content a {
   display: inline-block;
}

.header-content svg {
   fill: var(--color-font-one);
}

.header-bottom-sticky {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	z-index: 1000 !important;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
   backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}



/* Logo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-logo {
   flex: 0 0 auto;
}

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

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

.header-nav > ul {
   margin: 0;
   padding: 0;
   list-style: none;
   word-break: normal;
}

.header-nav li:not(:first-of-type):not(.header-dropdown li) {
   margin-left: 1.8vw;
}

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

/* Login
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-login.is-signup a,
.header-login.is-account a {
   font-size: 120%;
   line-height: 1.3;
   margin-left: 2vw;
   padding: .4em 1.4em;
   text-decoration: none;
}

/* Search
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-nav + .header-search.is-desktop {
   margin-right: 3vw;
}

.header-search {
   cursor: pointer;
}

/* Desktop */
.header-search.is-desktop {
   font-size: 1.8rem;
   line-height: 1;
   position: relative;
   display: inline-flex;
   overflow: hidden;
   align-self: center;
   flex: 0.7 0 100px;
   width: 100px;
   margin-right: 2vw;
   padding: .9em 1.6vw;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.header-search.is-desktop,
.header-search.is-desktop::before,
.header-search.is-desktop::after {
   border-radius: 100px;
}

.header-search.is-desktop::before,
.header-search.is-desktop::after {
   position: absolute;
   content: '';
   transition: opacity .3s ease;
   will-change: transform;
}

.header-search.is-desktop::before {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   opacity: .5;
   background-color: var(--color-body);
}

.header-search.is-desktop::after {
   top: 1px;
   right: 1px;
   bottom: 1px;
   left: 1px;
   z-index: 2;
   opacity: .3;
   border: 1px solid;
}

.header-search.is-desktop:hover::before {
   opacity: 0;
}

.header-search.is-desktop:hover::after {
   opacity: .6;
}

.header-search.is-desktop svg {
   flex: 0 0 auto;
   width: 15px;
   margin-right: 6px;
}

/* Desktop >> Mobile */
.header-search.is-mobile,
.header-search.is-desktop-icon {
   display: none;
}

.header-search.is-desktop-icon svg {
   width: 18px;
   transform: translateY(1px);
}

.header-search.is-mobile svg {
   position: absolute;
   z-index: 1;
   top: 3px;
   right: calc(var(--site-gap) + 46px);
   width: 24px;
}

.header-toggle:checked + label + .header-search.is-mobile svg {
   fill: var(--color-body);
}

/* Toogle
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-toggle,
.header-toggle:checked,
.header-toggle:checked ~ nav,
.header-toggle + label {
   display: none;
}

.header-toggle:checked ~ nav ul,
.header-toggle + label,
.header-toggle + label > span {
   position: relative;
}

.header-toggle:checked ~ nav,
.header-toggle + label .bar {
   position: absolute;
}

.header-toggle:checked ~ label .bar {
   transition: transform .3s cubic-bezier(.645, .045, .355, 1) .3s, top .3s cubic-bezier(.645, .045, .355, 1);
}

.header-toggle:checked ~ label .bar:nth-child(1),
.header-toggle:checked ~ label .bar:nth-child(3) {
   top: 0;
}

.header-toggle:checked ~ label .bar:nth-child(1),
.header-toggle:checked ~ label .bar:nth-child(2) {
   transform: rotate(45deg);
}

.header-toggle:checked ~ label .bar:nth-child(3) {
   transform: rotate(-45deg);
}

.header-toggle:checked ~ nav ul {
   display: block;
   margin: 0;
   padding: 0;
   list-style: none;
}

.header-toggle + label {
   z-index: 99;
   overflow: visible;
   width: 34px;
   height: 24px;
   margin: 0;
   cursor: pointer;
   opacity: 1;
   border: none;
   outline: none;
   background-color: transparent;
   will-change: transform;
}

.header-toggle + label > span {
   top: calc(50% + 2px);
}

.header-toggle + label > span,
.header-toggle + label .bar {
   display: block;
   width: 100%;
}

.header-toggle + label .bar {
   height: 2px;
   content: '';
   transition: transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1) .2s;
   background-color: var(--color-one);
}

.header-toggle:checked + label .bar {
   background-color: var(--color-body);
}

.header-toggle + label .bar:nth-child(1) {
   top: -10px;
}

.header-toggle + label .bar:nth-child(3) {
   top: 10px;
}

/* Dropdown
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-dropdown {
   position: relative;
   -webkit-user-select: none;
   user-select: none;
}

.header-dropdown .header-dropdown,
.header-dropdown ul {
   display: none;
}

.header-dropdown,
.header-dropdown svg {
   cursor: pointer;
}

.header-dropdown ul li,
.header-dropdown.is-active ul {
   display: block;
}

.header-dropdown svg {
   width: 24px;
   margin: 0 0 3px;
}

.header-dropdown ul {
   position: absolute;
   z-index: 999;
   top: 42px;
   right: -20px;
   min-width: 120px;
   margin: 0;
   padding: 20px;
   list-style: none;
   cursor: default;
   animation: slideDropdown .3s ease;
   text-align: right;
   border-radius: var(--radius);
   background-color: var(--color-one);
}

.header-dropdown a {
   font-size: 90%;
   color: var(--color-font-two);
}

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

/* RWD — Header
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1280px) {
   .header-search.is-desktop {
      display: none;
   }

   .header-search.is-desktop-icon {
      display: flex;
   }

}

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

   .header-logo {
      flex-basis: 80%;
   }

   .header-content {
      display: initial;
      flex-basis: 20%;
      text-align: right;
   }

   .header-nav a,
   .header-dropdown a {
      font-size: 2rem;
      line-height: 1.4;
      padding: 0 0 .5vh;
      word-break: break-word;
      color: var(--color-font-two);
   }

   .header-content ul > li,
   .header-search.is-mobile,
   .header-toggle:checked ~ nav {
      display: block;
   }

   .header-nav ul,
   .header-search.is-desktop-icon,
   .header-dropdown span {
      display: none;
   }

   .header-nav li:not(:first-of-type):not(.header-dropdown li) {
      margin-left: 0;
   }

   .header-toggle:checked ~ nav {
      top: calc(0px - 25px);
      right: 0;
      min-width: 8.2em;
      padding: 70px var(--site-gap) 3vh 20px;
   }

   .header-toggle:checked ~ nav::before {
      position: absolute;
      z-index: 0;
      top: 8px;
      right: calc(var(--site-gap) / 3);
      bottom: 0;
      left: 8px;
      content: '';
      border-radius: var(--radius);
      background-color: var(--color-one);
   }

   .header-toggle:checked ~ nav ul {
      width: 100%;
   }

   .header-toggle:checked ~ nav ul ul {
      padding-left: 0;
   }

   .header-toggle + label {
      display: inline-block;
   }

   .header-dropdown ul li:not(:last-child) {
      padding-bottom: 0;
   }

   .header-dropdown ul {
      top: 0;
      right: 0;
      min-width: initial;
      animation: none;
   }

   .header-login.is-signup a,
   .header-login.is-account a {
      margin-top: 15px;
      margin-left: 0;
   }

} */

@media (min-width:1025px) {
   .header-wrap.is-right .header-logo {
      order: 2;
   }

   .header-wrap:not(.is-right) .header-nav {
      margin-left: auto;
   }

   .header-wrap.is-right .header-dropdown:first-child ul {
      left: -20px;
      text-align: left;
   }

}

/* --------------------------------------------------------------------------
   3.Hero
   -------------------------------------------------------------------------- */
.hero-section {
   margin-top: clamp(2vh, 3.5vw + .3vh, 7vh);
   margin-bottom: clamp(5vh, 2.8vw + 3.7vh, 9vh);
}

/* --------------------------------------------------------------------------
   4.Subscribe
   -------------------------------------------------------------------------- */
.subscribe-section {
   position: relative;
   z-index: 0;
   padding-top: 6vh;
   padding-bottom: 6vh;
   background: no-repeat center center/cover;
}

.subscribe-section.is-cover::after {
   opacity: var(--opacity-cover);
}

.subscribe-section::after {
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   content: '';
   background-color: var(--color-five);
}

.subscribe-wrap {
   gap: calc(var(--grid-gap) / 2) var(--grid-gap);
   grid-template-columns: repeat(15, 1fr);
}

.subscribe-content {
   margin-bottom: 2vh;
   grid-column: span 10;
}

.subscribe-btn,
.subscribe-content input {
   width: 100%;
}

/* Input
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-content input {
   margin: 0;
   padding: 0;
}

/* Button & Terms
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-content + div {
   align-self: center;
   grid-column: span 5;
}

.subscribe-content + div small,
.subscribe-content + div .subscribe-terms > div,
.subscribe-terms {
   justify-content: center;
   margin-top: 1.5vh;
   text-align: center;
}

.subscribe-terms {
   justify-content: center;
   margin-bottom: 0;
   text-align: center;
}

.subscribe-content:not(.is-img) + div small,
.subscribe-content:not(.is-img) + div .subscribe-terms > div,
.subscribe-terms:not(.is-img) input[type="checkbox"] {
   opacity: .6;
}

/* Auto
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-section,
.subscribe-section :is(small a, input) {
   word-break: normal;
   color: var(--color-font-one);
}

.subscribe-section input::placeholder {
   color: var(--color-font-one);
}

/* Light
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-section.is-light::after {
   background-color: var(--color-two);
}

.subscribe-section.is-light,
.subscribe-section.is-light :is(small a, .subscribe-terms div a, input) {
   color: var(--color-font-black);
}

.subscribe-section.is-light input[type="checkbox"]::before {
   box-shadow: inset 8px 8px var(--color-font-black);
}

.subscribe-section.is-light input::placeholder {
   color: var(--color-font-black);
}

/* Dark
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-section.is-dark::after {
   background-color: var(--color-four);
}

.subscribe-section.is-dark,
.subscribe-section.is-dark :is(small a, .subscribe-terms div a, input) {
   color: var(--color-font-white);
}

.subscribe-section.is-dark input[type="checkbox"]::before {
   box-shadow: inset 8px 8px var(--color-font-white);
}

.subscribe-section.is-dark input::placeholder {
   color: var(--color-font-white);
}

/* Alert
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-section form.loading + .subscribe-alert .alert-loading,
.subscribe-section form.success + .subscribe-alert .alert-success,
.subscribe-section form.error + .subscribe-alert .alert-error {
   display: inline-block;
   margin-top: 1.4vh;
}

/* RWD — Subscribe
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .subscribe-content,
   .subscribe-content + div {
      grid-column: 1/-1;
   }

}

/* --------------------------------------------------------------------------
   5.Tiers
   -------------------------------------------------------------------------- */
.tiers-wrap,
.tier-item {
   display: flex;
   flex-wrap: wrap;
}

.tiers-wrap {
   padding: 4vh 0 clamp(6vh, 2.1vw + 5vh, 9vh);
   gap: calc(var(--grid-gap) * 2);
}

.tiers-wrap,
.tier-content {
   width: 100%;
}

/* Switch
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
:is(.tiers-section, .tiers-switch)[data-active-public-paid-tiers="false"],
.tiers-switch[data-active-price="yearly"] + div [data-monthly],
.tiers-switch[data-active-price="monthly"] + div [data-yearly],
.tiers-switch[data-active-price-plans] label,
.tiers-switch input {
   display: none;
}

.tiers-switch[data-active-price-plans*="monthly"][data-active-price-plans*="yearly"] label {
   display: flex;
}

.tiers-switch label {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: end;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
}

.tiers-slider {
   position: relative;
   width: var(--switch-size);
   height: calc(var(--switch-size) / 2);
   margin: 0 10px;
   border-radius: 100px;
   background-color: var(--color-one);
}

.tiers-slider::before {
   position: absolute;
   bottom: calc(var(--switch-size) / 12);
   left: calc(var(--switch-size) / 12);
   width: calc(var(--switch-size) / 3);
   height: calc(var(--switch-size) / 3);
   content: '';
   transition: transform .3s ease-in-out;
   border-radius: 100px;
   background-color: var(--color-body);
}

.tiers-switch span {
   transition: opacity .3s ease-in-out;
}

.tiers-switch input {
   opacity: 0;
}

.tiers-switch input:checked + .tiers-slider::before {
   transform: translateX(calc(var(--switch-size) / 2));
}

.tiers-switch span:first-of-type,
.tiers-switch input:not(:checked) + .tiers-slider + span {
   opacity: .3;
}

.tiers-switch input:checked + .tiers-slider + span,
.tiers-switch[data-active-price="monthly"] span:first-of-type {
   opacity: 1;
}

/* Card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.tier-item {
   flex: 1 0 clamp(50% - var(--grid-gap) * 2, 50vw, 450px);
}

.tier-label {
   line-height: 1;
   position: relative;
   display: inline-block;
   margin-bottom: 1.4vh;
   padding: .35em 1em;
}

.tier-label::after {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   content: '';
   opacity: .8;
   border: 1px solid;
   border-radius: 100px;
}

.tier-title {
   margin-top: 0;
   margin-bottom: 2vh;
}

.tier-title small {
   font-family: var(--gh-font-body, var(--font-family-general));
   font-weight: var(--font-weight-general-regular);
}

/* Button */
.tier-btn {
   align-self: flex-end;
   margin-top: 4vh;
}

/* RWD — Tiers
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .tiers-switch small {
      display: none;
   }

   .tiers-switch label {
      justify-content: start;
      grid-column: span 3;
   }

   .tiers-slider {
      width: calc(var(--switch-size) / 1.1);
      height: calc(var(--switch-size) / 2 / 1.1);
   }

   .tiers-slider::before {
      bottom: calc(var(--switch-size) / 12 / 1.1);
      left: calc(var(--switch-size) / 12 / 1.1);
      width: calc(var(--switch-size) / 3 / 1.1);
      height: calc(var(--switch-size) / 3 / 1.1);
   }

   .tiers-switch input:checked + .tiers-slider::before {
      transform: translateX(calc(var(--switch-size) / 2 / 1.1));
   }

}

/* --------------------------------------------------------------------------
   6.FAQs
   -------------------------------------------------------------------------- */
.faq-section {
   margin-top: clamp(5vh, 2.8vw + 3.7vh, 9vh);
   margin-bottom: clamp(10vh, 2.8vw + 8.7vh, 14vh);
}

.faq-content {
   margin-top: clamp(5vh, 1.4vw + 4.3vh, 7vh);
}

/* Card
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.faq-content .kg-toggle-card {
   padding: 0;
   border-top: 0;
   border-bottom: 1px solid var(--color-border);
   border-radius: 0;
   box-shadow: none;
}

.faq-content .kg-toggle-card,
.faq-content .kg-toggle-card + .kg-toggle-card {
   margin-top: 0;
}

/* Heading
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.faq-content .kg-toggle-card.kg-card .kg-toggle-heading {
   position: relative;
   padding: 3.2vh 12vw 3.2vh 0;
}

.faq-content .kg-toggle-card.kg-card .kg-toggle-heading-text {
   font-family: var(--gh-font-body, var(--font-family-general));
   font-size: var(--font-size-m);
   font-weight: var(--font-weight-general-regular);
}

.faq-content .kg-toggle-card.kg-card .kg-toggle-content p {
   font-size: var(--font-size-xs);
   max-width: 1100px;
   margin: 0 0 5vh;
}

/* Arrow
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.faq-content .kg-toggle-card.kg-card .kg-toggle-card-icon {
   position: absolute;
   top: calc(50% - 13px);
   right: 0;
   margin: 0;
   padding: 0;
   cursor: pointer;
}

.faq-content .kg-toggle-card.kg-card .kg-toggle-card-icon,
.faq-content .kg-toggle-card.kg-card .kg-toggle-card-icon svg {
   width: 26px;
   height: 26px;
   color: var(--color-one);
}

.faq-content [data-kg-toggle-state="open"] .kg-toggle-card-icon {
   transform: rotate(0);
}

/* --------------------------------------------------------------------------
   7.Loop
   -------------------------------------------------------------------------- */
.loop-section {
   max-width: 100%;
   margin: 0 auto;
}

.loop-wrap:not(.is-spotlight) {
   animation: slideTop 1s ease;
}

/* Heading
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.loop-heading {
   display: block;
   margin-top: 1em;
}

/* Item
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.item {
   align-items: start;
   box-sizing: border-box;
}

/* Image */
.item-img {
   margin-bottom: max(1.8vh, 16px);
}

/* Feed
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.loop-wrap.is-feed:first-of-type {
   margin-top: clamp(2vh, 1.4vw + 1.3vh, 4vh);
}

.loop-wrap.is-feed {
   margin-bottom: var(--grid-gap);
}

/* Grid
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.loop-wrap.is-grid {
   gap: var(--grid-gap);
   grid-template-columns: repeat(15, 1fr);
   grid-template-rows: auto 1fr;
}

.loop-wrap.is-grid .item:first-of-type {
   overflow: hidden;
   grid-column: span 10;
   grid-row: 1/3;
}

.loop-wrap.is-grid .item {
   grid-column: span 5;
}

/* Featured */
.featured-label small:nth-child(2) a {
   margin-left: .6em;
}

.loop-wrap.is-featured {
   margin-bottom: clamp(5vh, 2.1vw + 4vh, 8vh);
}

.loop-wrap.is-featured .item.no-image:nth-child(1),
.loop-wrap.is-featured .item:nth-child(2) {
   margin-top: 6vh;
}

/* List
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.loop-wrap.is-list:first-child {
   margin-top: calc(var(--grid-gap) / 1.5);
}

.loop-wrap.is-list .item {
   grid-template-columns: repeat(4, 1fr);
}

.loop-wrap.is-list .item.is-large-img {
   grid-template-columns: repeat(15, 1fr);
}

.loop-wrap.is-list .item.is-large-img .item-img {
   grid-column: span 5;
}

.loop-wrap.is-list .item.is-large-img > div {
   grid-column: span 10;
}

.loop-wrap.is-list .item.is-small-img {
   grid-template-columns: repeat(5, 1fr);
}

.loop-wrap.is-list .item {
   padding: calc(var(--grid-gap) / 1.5) 0;
   border-top: 1px solid var(--color-border);
}

.loop-wrap.is-list .item-img {
   order: 2;
   margin-bottom: 0;
}

.loop-wrap.is-list .item > div {
   grid-column: 1/-2;
}

.loop-wrap.is-list .item.no-image > div {
   grid-column: 1/-1;
}

/* Spotlight
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.loop-wrap.is-spotlight {
   padding-top: 5vh;
   padding-bottom: 5vh;
   grid-template-columns: repeat(3, 1fr);
}

.loop-wrap.is-spotlight.is-four {
   grid-template-columns: repeat(4, 1fr);
}

.loop-wrap.is-spotlight.is-five {
   grid-template-columns: repeat(5, 1fr);
}

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

/* RWD — Loop
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1480px) {
   .loop-wrap.is-spotlight.is-five {
      grid-template-columns: repeat(4, 1fr);
   }

   .loop-wrap.is-spotlight.is-five .item:nth-child(5) {
      display: none;
   }

}

@media (max-width:1280px) {
   .loop-wrap.is-featured.is-compact .item:nth-child(7) {
      display: none;
   }

}

@media (max-width:1024px) and (min-width:769px) {
   .loop-wrap.is-spotlight.is-four,
   .loop-wrap.is-spotlight.is-five {
      grid-template-columns: repeat(3, 1fr);
   }

   .loop-wrap.is-spotlight.is-four .item:nth-child(4),
   .loop-wrap.is-spotlight.is-five .item:nth-child(4) {
      display: none;
   }

}

@media (max-width:1024px) {
   .loop-wrap.is-list .item,
   .loop-wrap.is-list .item.is-small-img {
      grid-template-columns: repeat(15, 1fr);
   }

   .loop-wrap.is-list .item .item-img,
   .loop-wrap.is-list .item.is-small-img .item-img {
      grid-column: span 5;
   }

   .loop-wrap.is-list .item > div,
   .loop-wrap.is-list .item.is-small-img > div {
      grid-column: span 10;
   }

}

@media (max-width:768px) {
   .loop-wrap.is-spotlight {
      grid-template-columns: repeat(4, 1fr);
   }

   .loop-wrap.is-spotlight .item {
      grid-column: span 2;
   }

   .loop-wrap:not(.is-feed) .item-meta,
   .loop-wrap.is-spotlight .item:nth-child(3):last-child {
      display: none;
   }

}

@media (max-width:480px) {
   .loop-wrap.is-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .loop-wrap.is-feed.is-grid {
      margin-bottom: calc(var(--grid-gap) * 2.4);
      gap: calc(var(--grid-gap) * 2.4);
   }

   .loop-wrap.is-feed.is-list {
      margin-bottom: 0;
   }

   .loop-wrap.is-featured .item:first-of-type {
      margin-bottom: 1.6vh;
   }

   .loop-wrap.is-featured .item:nth-child(2) {
      margin-top: 0;
   }

   .loop-wrap.is-feed.is-grid .item:first-of-type p,
   .loop-wrap.is-featured .item:first-of-type p,
   .loop-wrap.is-featured .item:nth-child(6) {
      display: none;
   }

   .loop-wrap.is-feed h2 {
      font-family: var(--font-family-one);
      font-size: var(--font-size-l);
      font-weight: var(--font-weight-one-regular);
   }

   .loop-wrap.is-list .item,
   .loop-wrap.is-list .item.is-small-img,
   .loop-wrap.is-list .item.is-large-img {
      grid-template-columns: repeat(1, 1fr);
   }

   .loop-wrap.is-featured .item,
   .loop-wrap.is-list .item > div,
   .loop-wrap.is-list .item .item-img,
   .loop-wrap.is-list .item.is-small-img > div,
   .loop-wrap.is-list .item.is-small-img .item-img,
   .loop-wrap.is-list .item.is-large-img > div,
   .loop-wrap.is-list .item.is-large-img .item-img {
      grid-column: span 1;
   }

   .loop-wrap.is-feed.is-grid .item,
   .loop-wrap.is-feed.is-grid .item:first-of-type,
   .loop-wrap.is-featured .item:first-of-type {
      grid-column: span 2;
   }

   .loop-wrap.is-list .item {
      margin-bottom: calc(var(--grid-gap) * 2.4);
      padding: 0;
      border-top: none;
   }

   .loop-wrap.is-list .item > div {
      order: 2;
   }

}

@media (min-width:481px) and (max-width:1024px) {
   .loop-wrap.is-featured.is-comfort .item:nth-child(4),
   .loop-wrap.is-featured.is-comfort .item:nth-child(5) {
      display: none;
   }

}

@media (min-width:1025px) {
   .loop-wrap.is-featured.is-comfort {
      grid-template-columns: repeat(4, 1fr);
   }

   .loop-wrap.is-featured.is-comfort .item {
      grid-column: span 1;
   }

   .loop-wrap.is-featured.is-comfort .item:first-of-type {
      grid-column: span 2;
   }

   .loop-wrap.is-featured.is-comfort .item:nth-child(3),
   .loop-wrap.is-featured.is-compact .item:nth-child(3) {
      margin-top: 6vh;
   }

}

@media (min-width:1025px) and (max-width:1480px) {
   .loop-wrap.is-featured.is-compact {
      grid-template-columns: repeat(4, 1fr);
   }

   .loop-wrap.is-featured.is-compact .item {
      grid-column: span 1;
   }

   .loop-wrap.is-featured.is-compact .item:first-of-type {
      grid-column: span 2;
   }

   .loop-wrap.is-featured.is-compact .item:nth-child(6),
   .loop-wrap.is-featured.is-compact .item:nth-child(7) {
      display: none;
   }

}

@media (min-width:1481px) {
   .loop-wrap.is-featured.is-compact .item {
      grid-column: span 3;
   }

   .loop-wrap.is-featured.is-compact .item:first-of-type {
      grid-column: span 6;
   }

   .loop-wrap.is-featured.is-compact .item:nth-child(4) {
      margin-top: 6vh;
   }

}

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

.pagination-section button {
   margin-top: clamp(0vh, 1vw + -.5vh, 1.5vh);
   margin-bottom: clamp(6vh, 2.4vw + 4.5vh, 9vh);
}

/* --------------------------------------------------------------------------
   9.Author & Tag page
   -------------------------------------------------------------------------- */
.archive-section h1 img {
   width: 1.5em;
   height: 1.5em;
   margin: 0 .3em -.43em 0;
}

.archive-social {
   display: flex;
   align-items: center;
   padding-top: 4vh;
   gap: 16px;
}

.archive-social a.is-website {
   font-size: var(--font-size-xs);
   line-height: 1;
   padding: .5em 1.3em;
   transition: transform .3s ease;
   text-decoration: none;
   border: 1px solid;
   border-radius: 100px;
}

.archive-social a.is-website:hover {
   transform: translateY(-3px);
}

.archive-social a:not(.is-website) {
   line-height: 0;
}

.archive-social svg {
   width: clamp(32px, .2vw + 31px, 34px);
   fill: var(--color-font-one);
}

/* RWD — Author & Tag page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .archive-section sup {
      display: none;
   }

}

@media (max-width:480px) {
   .archive-section span.is-location {
      display: none;
   }

}

/* --------------------------------------------------------------------------
   10.Footer
   -------------------------------------------------------------------------- */
.footer-section {
   overflow: hidden;
   max-width: 100%;
   margin: 7vh 0 3vh;
}

.footer-wrap {
   margin-bottom: 3vh;
}

.footer-content,
.footer-social,
.footer-columns {
   display: flex;
   flex-wrap: wrap;
}

.footer-social,
.footer-columns,
.footer-item ul {
   list-style: none;
}

.footer-logo,
.footer-description,
.footer-social {
   margin: 0 0 4vh;
   padding: 1vh 0 0;
}

/* Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-content > div {
   flex-grow: 1;
   margin-right: clamp(0vh, 6.9vw + -3.3vh, 10vh);
}

/* Description */
.footer-description {
   max-width: 800px;
}

/* Social */
.footer-social {
   align-self: flex-end;
   flex-grow: 0;
   gap: 20px;
}

.footer-social li {
   line-height: 0;
}

.footer-social svg {
   width: 32px;
   fill: var(--color-font-one);
}

/* Columns
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-columns {
   align-content: space-between;
   flex-direction: column;
   margin: 0;
   padding: 5vh 0 0;
   border-top: 1px solid var(--color-border);
}

.footer-columns.items-1,
.footer-columns.items-2 {
   align-content: flex-start;
}

.footer-columns.items-1 > span:nth-of-type(n+1),
.footer-columns.items-2 > span:nth-of-type(n+2),
.footer-columns.items-3 > span:nth-of-type(n+3),
.footer-columns.items-4 > span:nth-of-type(n+4) {
   display: none;
}

.footer-columns.cols-2 > li {
   width: calc(50% - var(--grid-gap) + var(--grid-gap) / 2)
}

.footer-columns.cols-3 > li,
.footer-columns.cols-4.items-3 > li,
.footer-columns.cols-5.items-3 > li {
   width: calc(33.333% - var(--grid-gap) + var(--grid-gap) / 3)
}

.footer-columns.cols-4 > li,
.footer-columns.cols-5.items-4 > li {
   width: calc(25% - var(--grid-gap) + var(--grid-gap) / 4)
}

.footer-columns.cols-5 > li {
   width: calc(20% - var(--grid-gap) + var(--grid-gap) / 5)
}

.footer-columns.cols-2 > li:nth-child(2n+1),
.footer-columns.cols-3 > li:nth-child(3n+1),
.footer-columns.cols-4 > li:nth-child(4n+1),
.footer-columns.cols-5 > li:nth-child(5n+1),
.footer-columns > span:nth-of-type(1) {
   order: 1
}

.footer-columns.cols-2 > li:nth-child(2n),
.footer-columns.cols-3 > li:nth-child(3n+2),
.footer-columns.cols-4 > li:nth-child(4n+2),
.footer-columns.cols-5 > li:nth-child(5n+2),
.footer-columns > span:nth-of-type(2) {
   order: 2
}

.footer-columns.cols-3 > li:nth-child(3n),
.footer-columns.cols-4 > li:nth-child(4n+3),
.footer-columns.cols-5 > li:nth-child(5n+3),
.footer-columns > span:nth-of-type(3) {
   order: 3
}

.footer-columns.cols-4 > li:nth-child(4n),
.footer-columns.cols-5 > li:nth-child(5n+4),
.footer-columns > span:nth-of-type(4) {
   order: 4
}

.footer-columns.cols-5 > li:nth-child(5n),
.footer-columns > span:nth-of-type(5) {
   order: 5
}

.footer-columns > span {
   flex-basis: 100%;
   width: var(--grid-gap);
}

.footer-item h3 {
   font-family: var(--font-family-two);
   font-weight: var(--font-weight-two-regular);
   margin-bottom: 2.6vh;
}

.footer-item ul {
   margin: 0;
   padding: 0;
}

.footer-item li {
   margin-bottom: 1.2vh;
}

.footer-item li:last-child {
   margin-bottom: 5vh;
}

/* --------------------------------------------------------------------------
   11.Error page
   -------------------------------------------------------------------------- */
.error-section {
   text-align: center;
}

.error-btn {
   margin-top: 5vh;
}

/* --------------------------------------------------------------------------
   12.Signup, Signin & Contact page
   -------------------------------------------------------------------------- */
.signup-page {
   height: 100vh;
}

.signup-wrap {
   min-height: 100%;
}

.signup-wrap,
.signup-wrap > div,
.signup-content {
   display: flex;
}

.signup-wrap > div {
   flex-direction: column;
   flex-grow: 1;
}

.signup-content {
   align-items: center;
   flex: 1 0 auto;
   margin: 0 auto 12vh;
}

.signup-content,
.signup-logo {
   width: calc(100% - (var(--site-gap) * 2));
   max-width: 640px;
}

/* Logo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.signup-logo {
   margin: 8vh auto 0;
}

/* Title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.signup-title {
   margin: 3vh 0;
}

/* Form
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.signup-content form {
   width: 100%;
}

.signup-content input {
   word-break: break-all;
   border-radius: 100px;
}

.signup-content input,
.signup-content textarea {
   font-size: 1.6rem;
   display: block;
   box-sizing: border-box;
   width: 100%;
   margin-bottom: 1.5vh;
   padding: 1em 1.2em;
   transition: background-color .16s ease;
   background-color: var(--color-three);
}

.signup-content input:hover,
.signup-content input:focus,
.signup-content textarea:hover,
.signup-content textarea:focus {
   background-color: var(--color-five);
}

.signup-content textarea {
   min-height: 120px;
   margin: 3vh auto;
   resize: vertical;
   border-radius: var(--radius);
}

.signup-content button {
   margin-top: 4vh;
}

/* Alert */
.signup-content .alert-loading,
.signup-content .alert-error {
   margin-top: 3vh;
}

.signup-content form.loading .alert-loading,
.signup-content form.success + .alert-success,
.signup-content form.error .alert-error {
   display: inline-block;
}

.signup-content form.error .alert-error {
   color: red;
}

.signup-content form.success,
.signup-content form + .alert-success {
   display: none;
}

.signup-content form.success + .alert-success {
   width: 100%;
}

.signup-content .alert-success p {
   margin-top: 2vh;
   margin-bottom: 6vh;
}

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.signup-img {
   position: relative;
   width: 20%;
   margin: 0;
}

.signup-img > div {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

/* Figcaption */
.signup-img figcaption,
.signup-img figcaption a {
   color: var(--color-font-black);
}

.signup-img figcaption {
   position: absolute;
   right: 1vw;
   bottom: 2vh;
   left: 1vw;
}

/* RWD — Signup, Signin & Contact page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .signup-img {
      display: none;
   }

}

@media (max-width:480px) {
   .signup-content button {
      width: 100%;
   }

   .signup-content button + small {
      text-align: center;
   }

}

/* --------------------------------------------------------------------------
   13.Recommendations, Authors & Tags page
   -------------------------------------------------------------------------- */
.archive-section.is-top {
   padding-top: 6vh;
   padding-bottom: 8vh;
}

.archive-section.is-top > div + div {
   position: relative;
   margin-top: clamp(4vh, 2.1vw + 3vh, 7vh);
   padding-top: clamp(4vh, 2.1vw + 3vh, 7vh);
}

.archive-section.is-top > div + div:last-child {
   padding-bottom: 3vh;
}

.archive-section.is-top > div + div::before {
   position: absolute;
   top: 0;
   width: 100%;
   content: '';
   opacity: .1;
   border-top: 1px solid;
}

.archive-section.is-bottom {
   margin-top: clamp(5vh, 2.8vw + 3.7vh, 9vh);
   margin-bottom: clamp(7vh, 2.1vw + 6vh, 10vh);
}

.archive-section.is-bottom > div {
   padding-top: calc(var(--grid-gap) / 1.5);
   border-top: 1px solid var(--color-border);
}

.archive-section.is-bottom:not(.is-recommendations) > div a {
   display: inline-block;
   margin: 1vh 3vw 3vh 0;
}

/* Recommendations */
.archive-section.is-recommendations img {
   width: .8em;
   height: .8em;
   margin-bottom: -.08em;
}

.archive-section.is-recommendations.is-bottom > div {
   grid-template-columns: repeat(2, 1fr);
}

.archive-section.is-recommendations.is-bottom p {
   max-width: 600px;
}

.archive-section.is-recommendations.is-bottom > div p {
   margin-top: 2vh;
}

/* RWD — Recommendations, Authors & Tags page
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .archive-section.is-recommendations.is-bottom > div {
      grid-template-columns: repeat(1, 1fr);
   }

   .archive-section.is-bottom > div > div:not(:last-child) {
      margin-bottom: 3vh;
   }

}

/* --------------------------------------------------------------------------
   Custom
   -------------------------------------------------------------------------- */

.highlight-color {
   color: #00c4a9;
}

.muted-color {
   color: #757080;
}

/*
 * Differnt Changes to Style
*/

.spacing-top-hero {
   margin-top: clamp(14rem, 15vw, 17rem);
}

.spacing-top-tags {
   margin-top: clamp(7rem, 15vw, 7rem);
}

.spacing-top-topic {
   margin-top: clamp(12rem, 15vw, 12rem);
}

.breadcrumb-nav {
	display: block;
	margin-bottom: 2rem;
}

.breadcrumb-link {
	display: inline-block;
	color: var(--ghost-accent-color);
	text-decoration: underline;
	font-size: 1.8rem;
}

.breadcrumb-link:hover {
	text-decoration: underline;
}