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

   Eihei 1.1.4, CSS Part I

   //////////////////////////////////////////////////////////////////////////
    
   I. Customize
   |
   ├─ Global settings
   ├─ Fonts
   ├─ Colors
   ├─ Light 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.Featured & Collection
   ├─ 5.About
   ├─ 6.Subscribe
   ├─ 7.Loop
   ├─ 8.Spotlight
   ├─ 9.Pagination
   ├─ 10.Related
   ├─ 11.Author & Tag page
   ├─ 12.Footer
   ├─ 13.Error page
   └─ 14.Signup, Signin & Contact page
   
   
   //////////////////////////////////////////////////////////////////////////

   I. Customize

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

:root {

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

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

   /* Gap */
   --grid-gap: 3.8vw;
   --site-gap: clamp(20px, 1.4vw + 13px, 40px);
   --item-gap: clamp(12px, .3vw + 10.7px, 16px);

   /* Radius */
   --radius: .5vw;

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

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

   /* Content */
   --site-width: 1840px;
   --ultra-width: 1700px;
   --wide-width: 1180px;
   --regular-width: 760px;

   --full: minmax(var(--site-gap), 1fr);
   --site: minmax(0, calc((var(--site-width) - var(--wide-width)) / 2));
   --ultra: minmax(0, calc((var(--ultra-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];
   --grid-template-featured: [full-start] var(--full) [ultra-start] var(--ultra) [wide-start] var(--wide) [regular-start] var(--regular) [regular-end] var(--wide) [wide-end] var(--ultra) [ultra-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-body, var(--font-family-general));
   --font-weight-two-regular: var(--font-weight-general-regular);
   --font-weight-two-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: #f2f1f3;
   --color-three: #e6e6ea;
   --color-body: #fff;
   --color-border: #ededed;
   --ghost-accent-color: #ff4d82;
}

body {
/* Fonts size
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   --font-size-xxxxl: clamp(9rem var(--font-scale, + 0rem), 3.5vw + 7.3rem var(--font-scale, + 0rem), 14rem var(--font-scale, + 0rem));
   --font-size-xxxl: clamp(7rem var(--font-scale, + 0rem), 2.1vw + 6rem var(--font-scale, + 0rem), 10rem var(--font-scale, + 0rem));
   --font-size-xxl: clamp(3.2rem var(--font-scale, + 0rem), 2.5vw + 2rem var(--font-scale, + 0rem), 6.8rem var(--font-scale, + 0rem));
   --font-size-xl: clamp(2.7rem var(--font-scale, + 0rem), 1.6vw + 1.9rem var(--font-scale, + 0rem), 5rem var(--font-scale, + 0rem));
   --font-size-l: clamp(2rem, 1.1vw + 1.5rem, 3.6rem);
   --font-size-m: clamp(2rem, .6vw + 1.7rem, 2.8rem);
   --font-size-s: clamp(1.8rem, .3vw + 1.6rem, 2.3rem);
   --font-size-xs: clamp(1.6rem, .3vw + 1.5rem, 2rem);
   --font-size-xxs: clamp(1.6rem, .1vw + 1.6rem, 1.7rem);
   --font-size-xxxs: clamp(1.2rem, .1vw + 1.1rem, 1.4rem);

   --font-size-button: clamp(1.8rem, .6vw + 1.5rem, 2.6rem);
   --font-size-logo: clamp(3.2rem var(--font-scale, + 0rem), .4vw + 3rem var(--font-scale, + 0rem), 3.8rem var(--font-scale, + 0rem));
   --font-size-input: clamp(1.6rem, .5vw + 1.4rem, 2.3rem);
   --font-size-post: clamp(1.8rem, .1vw + 1.7rem, 2rem);
}

/* 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: #1c2028;
   --color-three: #1c1e27;
   --color-body: #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: #1c2028;
      --color-three: #1c1e27;
      --color-body: #11131d;
      --color-border: #2b2e36;
   }

}

/* 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-scale: * 1;
   --letter-spacing: normal;
}

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

/* RWD — Global settings
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   :root {
      --radius: 1vw;
   }

}

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

   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.3;
}

h1,h2,h3,h4,h5,h6 {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-bold);
   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: var(--font-size-xxxs);
   margin-top: 8px;
   opacity: .8;
}

figcaption a {
   text-decoration: underline;
}

/* Dynamic color
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
body .g-bg[class*=" tag-hash-color"][class*="-white-text "], 
body .g-bg[class*=" tag-hash-color"][class*="-white-text "] a,
body.is-dark-accent :is(.get-contrast, .get-contrast a, .g-btn) {
   color: var(--color-font-white);
}

body .g-bg[class*=" tag-hash-color"]:not([class*="-white-text "]), 
body .g-bg[class*=" tag-hash-color"]:not([class*="-white-text "]) a,
body.is-light-accent :is(.get-contrast, .get-contrast a, .g-btn) {
   color: var(--color-font-black);
}

/* Post content */
body.is-light-accent :is(.kg-card.kg-button-card .kg-btn, .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;
}

/* Primary tag
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-primary-tag {
   position: absolute;
   z-index: 3;
   top: var(--item-gap);
   left: var(--item-gap);
}

.g-primary-tag > div {
   display: flex;
   align-items: start;
}

.g-primary-tag a {
   pointer-events: auto;
}

.g-primary-tag a,
.g-primary-tag span {
   padding: 4px 11px;
}

.g-primary-tag,
.g-primary-tag span {
   pointer-events: none;
}

.g-primary-tag a,
.g-primary-tag svg,
.g-primary-tag span {
   display: inline-block;
   border-radius: 100px;
   background-color: var(--color-body);
}

.g-primary-tag svg {
   line-height: 0;
   height: 14px;
   margin-right: 5px;
   padding: 6px;
   fill: currentColor;
}

/* No image*/
.g-primary-tag.no-image {
   position: relative;
   z-index: 3;
   top: 0;
   left: 0;
   margin-bottom: 1vh;
}

.g-primary-tag.no-image a,
.g-primary-tag.no-image svg,
.g-primary-tag.no-image span {
   background-color: var(--color-two);
}

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

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

.g-bg-img {
   background: no-repeat center center/cover;
}

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

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

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

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

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

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

.g-orientation.is-special:not(.is-feed) {
   aspect-ratio: 1/1.65;
}

/* Title
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.g-font-xxxxl,
.g-font-xxxl,
.g-font-xxl,
.g-font-xl {
   font-family: var(--font-family-one);
   font-weight: var(--font-weight-one-bold);
   letter-spacing: var(--letter-spacing, normal);
}

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

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

.g-font-xxxxl,
.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-s {
   line-height: 1.3;
}

.g-font-xs,
.g-font-xxs,
.g-font-xxxs {
   line-height: 1.3;
}

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

.g-font-xxxxl {
   font-size: var(--font-size-xxxxl);
}

.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-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);
   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 min(50px, 5vw);
   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: 5px;
}

.g-meta a,
.g-meta span {
   display: inline-block;
   padding-bottom: 3px;
}

/* 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 {
   margin-top: 1.4vh;
}

.g-alert,
form:is([data-members-form="signin"], [data-members-form="signup"]) + div,
form.success:is([data-members-form="signin"], [data-members-form="signup"]) {
   display: none;
}

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

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

form.loading + div .g-alert.is-loading,
form.error + div .g-alert.is-error,
form.success + div .g-alert.is-success,
form.success:is([data-members-form="signin"], [data-members-form="signup"]) + div {
   display: inline-block;
}

form.loading .g-alert.is-loading,
form.error .g-alert.is-error {
   display: inline-block;
   margin-left: .3vw;
}

form.success:is([data-members-form="signin"], [data-members-form="signup"]) + div p {
   margin-top: 2vh;
   margin-bottom: 3vh;
}

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

form[data-members-form] .g-question {
   margin-left: .3vw;
}

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

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

.g-terms input[type="checkbox"] {
   display: grid;
   flex: 0 0 15px;
   width: 15px;
   height: 15px;
   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: 7px;
   height: 7px;
   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: 1vh 0 0;
   padding: 0;
   column-gap: 2vw;
   columns: auto 280px;
}

.g-benefits li {
   padding: 0 0 .4em 0;
   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;
   margin-right: .4em;
   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-ultra {
   grid-template-columns: var(--grid-template-featured);
}

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

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

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

.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-ultra > *,
.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:768px) {
   .g-label small.is-author,
   .g-label small.is-tags {
      display: none;
   }

   .g-img-inline img {
      display: block;
      width: 100px;
      height: 100px;
      margin: 0 auto 1vh;
   }

}

@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);
   }

   .g-primary-tag {
      top: calc(var(--item-gap) / 2);
      left: calc(var(--item-gap) / 2);
   }

}

/* --------------------------------------------------------------------------
   2.Header
   -------------------------------------------------------------------------- */
.header-section {
   box-sizing: border-box;
   padding: 0 var(--site-gap);
}

.header-wrap {
   position: relative;
   z-index: 999;
   min-height: 55px;
   margin-top: 20px;
}

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

.header-content {
   display: flex;
   flex: 0 1 100%;
}

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

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

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

/* Navigation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-nav {
   font-family: var(--font-family-two);
   font-weight: var(--font-weight-two-regular);
   display: flex;
   flex: 0 999 auto;
   margin-left: 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.6vw;
}

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

/* Search & Login
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.header-search {
   cursor: pointer;
}

.header-search.is-desktop {
   transition: background-color .16s ease;
   border-radius: 100px;
   background-color: var(--color-two);
}

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

.header-search.is-desktop,
.header-login:is(.is-signup, .is-account) a {
   font-size: var(--font-size-xs);
   line-height: 1.3;
   margin-left: .5vw;
   padding: .4em 1.4em;
   text-decoration: none;
}

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

/* Search 'Desktop' >> 'Mobile' */
.header-search.is-mobile {
   display: none;
}

.header-search.is-mobile svg {
   position: absolute;
   z-index: 1;
   top: 3px;
   right: 42px;
   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: calc(var(--radius) * 2);
   background-color: var(--color-one);
}

.header-dropdown a {
   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: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: 115%;
      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-dropdown span,
   .header-search.is-desktop {
      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: -6px;
      min-width: 8.2em;
      padding: 70px 10px 2vh 20px;
   }

   .header-toggle:checked ~ nav::before {
      position: absolute;
      z-index: 0;
      top: 15px;
      right: -1vw;
      bottom: 0;
      left: 8px;
      content: '';
      border-radius: calc(var(--radius) * 2);
      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(.is-signup, .is-account) a {
      margin-top: 1vw;
      margin-left: 0;
   }

}

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

.hero-section > div {
   margin: 0 auto;
   text-align: center;
}

.hero-section > div.is-home {
   max-width: clamp(1024px, 30.8vw + 708.6px, 1300px);
}

.hero-section > div.is-home h1 {
   font-weight: var(--font-weight-one-regular);
}

/* RWD — Hero
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width:1025px) {
   .hero-section > div.is-home {
      margin-top: 2vh;
   }

}

/* --------------------------------------------------------------------------
   4.Featured & Collection
   -------------------------------------------------------------------------- */
.special-section {
   z-index: 1;
   animation: slideTop 1s ease;
}

.special-wrap {
   margin-bottom: clamp(50px, 2.1vw + 40px, 80px);
   gap: calc(var(--grid-gap) / 2);
   grid-template-columns: repeat(5, 1fr);
}

/* Item
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.special-item {
   position: relative;
   overflow: hidden;
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   transition: transform .2s ease;
   border-radius: calc(var(--radius) * 3.2);
   will-change: transform;
}

.special-item:hover {
   transform: translateY(-4px);
}

.special-item.no-image {
   cursor: default;
   background-color: var(--color-two);
}

.special-content {
   position: absolute;
   z-index: 1;
   bottom: var(--item-gap);
   left: 0;
   box-sizing: border-box;
   max-width: 346px;
   padding: 0 var(--item-gap);
   pointer-events: none;
}

.special-content a {
   pointer-events: auto;
}

.special-content > div {
   padding: var(--item-gap);
   border-radius: calc(var(--radius) * 2);
   background-color: var(--color-body);
}

/* Image
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.special-img {
   position: absolute;
   z-index: 0;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

/* Featured
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Feed
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.special-item.is-featured.is-feed {
   min-height: clamp(300px, 6.9vw + 267px, 400px);
}

/* Collection
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.special-wrap.is-collection {
   margin-bottom: clamp(10vh, 6.9vw + 6.7vh, 20vh);
   grid-template-columns: repeat(3, 1fr);
}

.special-wrap.is-collection small {
   pointer-events: none;
}

/* Recommendations
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.special-wrap.is-recommendations {
   margin-bottom: 10vh;
   grid-template-columns: repeat(2, 1fr);
}

.special-wrap.is-recommendations .special-item {
   box-sizing: border-box;
   padding: var(--item-gap);
   border-radius: calc(var(--radius) * 3.2);
   background-color: var(--color-two);
}

.special-wrap.is-recommendations img {
   width: 1.2em;
   height: 1.2em;
   margin-right: .3em;
   margin-bottom: -.26em;
}

.special-wrap.is-recommendations h2 {
   display: inline;
}

.special-wrap.is-recommendations h2:hover {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 3px;
}

.special-wrap.is-recommendations p {
   max-width: 600px;
   margin-top: 2vh;
}

/* RWD — Featured & Collection
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1480px) {
   .special-item.is-featured:not(.is-feed):nth-child(n+11) {
      display: none;
   }

}

@media (max-width:1280px) {
   .special-wrap.is-featured {
      margin-bottom: 0;
      grid-template-columns: repeat(4, 1fr);
   }

   .special-wrap.items-5 .special-item.is-featured:not(.is-feed):nth-child(5),
   .special-wrap:not(.items-9) .special-item.is-featured:not(.is-feed):nth-child(n+9) {
      display: none;
   }

}

@media (max-width:1024px) {
   .special-wrap.is-featured {
      grid-column: wide;
      grid-template-columns: repeat(3, 1fr);
   }

   .special-wrap.is-featured:is(.items-1, .items-2) {
      grid-template-columns: repeat(2, 1fr);
   }

   .special-wrap:is(.items-4, .items-5) .special-item.is-featured:not(.is-feed):nth-child(4),
   .special-item.is-featured:not(.is-feed):nth-child(n+7) {
      display: none;
   }

}

@media (max-width:768px) {
   .special-wrap.is-featured.items-3 .special-item.is-featured:not(.is-feed):nth-child(3),
   .special-item.is-featured:not(.is-feed) .special-label {
      display: none;
   }

   .special-wrap.is-featured,
   .special-wrap.is-collection {
      grid-template-columns: repeat(2, 1fr);
   }

   .special-wrap.is-recommendations {
      grid-template-columns: repeat(1, 1fr);
   }

   .special-wrap.is-recommendations img {
      display: inline;
   }

   .special-item.is-featured,
   .special-item.is-featured:hover {
      transform: none;
   }

   .special-wrap:is(.items-4, .items-5) .special-item.is-featured:not(.is-feed):nth-child(4),
   .special-item.is-featured:not(.is-feed) {
      display: flex;
   }

   .special-item.is-featured:not(.is-feed) {
      align-content: start;
      min-height: 160px;
      aspect-ratio: initial;
      grid-template-columns: repeat(5, 1fr);
   }

   .special-item.is-featured:not(.is-feed) .special-content {
      position: initial;
      display: grid;
      flex: 1 0 60%;
      padding: 0;
   }

   .special-item.is-featured:not(.is-feed) .special-img {
      position: relative;
      z-index: 3;
      flex: 1 0 40%;
      order: 2;
      box-sizing: border-box;
      padding: var(--item-gap);
   }

   .special-item.is-featured:not(.is-feed) .special-img img {
      border-radius: calc(var(--radius) * 1.2);
   }

   .special-item.is-featured:not(.is-feed) h2 a::after,
   .special-item.is-featured:not(.is-feed) .special-content > div::after {
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
   }

   .special-wrap.is-featured:not(.is-about-text) .special-item.is-featured:not(.is-feed) .special-content > div {
      background-color: var(--color-two);
   }

   .special-item.is-featured:not(.is-feed) .special-content > div::after {
      background-color: inherit;
   }

}

@media (max-width:480px) {
   .special-item.is-featured.is-feed,
   .special-item.is-featured:not(.is-feed),
   .special-wrap:is(.items-4, .items-5) .special-item.is-featured:not(.is-feed):nth-child(4) {
      display: block;
   }

   .special-item.is-featured:not(.is-feed):nth-child(n+5) {
      display: none;
   }

   .special-wrap.is-collection {
      grid-template-columns: repeat(1, 1fr);
   }

   .special-wrap.is-collection .special-item > div:first-of-type {
      top: var(--item-gap);
      left: var(--item-gap);
   }

   .special-item.is-featured.is-feed {
      min-height: initial;
   }

   .special-item.is-featured.is-feed .special-content {
      position: initial;
   }

   .special-item.is-featured:not(.is-feed) {
      padding: var(--item-gap);
   }

   .special-item.is-featured.is-feed .special-img img {
      border-radius: calc(var(--radius) * 3.2);
   }

   .special-item.is-featured.is-feed .special-content,
   .special-item.is-featured.is-feed .special-img,
   .special-item.is-featured.is-feed .special-content > div,
   .special-item.is-featured:not(.is-feed) .special-img,
   .special-item.is-featured:not(.is-feed) .special-content > div {
      padding: 0;
   }

   .special-item.is-featured:not(.is-feed) .special-content > div {
      padding-top: var(--item-gap);
   }

   .special-item.is-featured.is-feed.no-image,
   .special-item.is-featured.is-feed .special-content > div {
      background-color: var(--color-body) !important;
   }

   .special-item.is-featured.is-feed div,
   .special-item.is-featured.is-feed div a {
      color: var(--color-font-one);
   }

   .special-item.is-featured.is-feed .special-img {
      position: relative;
      z-index: 1;
      margin-bottom: max(1.8vh, 12px);
   }

   .special-wrap.is-portrait .special-img {
      aspect-ratio: 3/4;
   }

   .special-wrap.is-landscape .special-img {
      aspect-ratio: 4/3;
   }

   .special-wrap.is-panoramic .special-img {
      aspect-ratio: 2/1;
   }

   .special-wrap.is-square .special-img {
      aspect-ratio: 1/1;
   }

}

@media (min-width:769px) {
   .special-wrap.is-featured:is(.items-1, .items-2) .special-item {
      aspect-ratio: 1.6/1;
   }

   .special-wrap.is-featured:is(.items-3, .items-6, .items-9) .special-item {
      aspect-ratio: 1/1.2;
   }

   .special-wrap.is-collection .special-item:nth-child(3n+2):hover {
      transform: translateY(calc(clamp(1.3vh, 2.1vw + .6vh, 3.1vh) - 4px));
   }

   .special-wrap.is-collection .special-item:nth-child(3n+2) {
      transform: translateY(clamp(1.3vh, 2.1vw + .6vh, 3.1vh));
   }

}

@media (min-width:1025px) {
   .special-wrap:is(.items-1, .items-2) {
      grid-template-columns: repeat(2, 1fr)
   }

   .special-wrap:is(.items-3, .items-6, .items-9) {
      grid-template-columns: repeat(3, 1fr);
   }

   .special-wrap:is(.items-4, .items-8) {
      grid-template-columns: repeat(4, 1fr)
   }

   .special-wrap:is(.items-1, .items-2, .items-3, .items-4, .items-6, .items-8, .items-9) {
      grid-column: wide;
   }
}

@media (min-width:1281px) {
   .special-wrap.is-featured:not(.items-2, .items-4, .items-6, .items-8, .items-9) .special-item:nth-child(5n+2):hover,
   .special-wrap.is-featured:not(.items-2, .items-4, .items-6, .items-8, .items-9) .special-item:nth-child(5n+4):hover {
      transform: translateY(calc(clamp(2vh, 2.8vw + .7vh, 6vh) - 4px));
   }

   .special-wrap.is-featured:not(.items-2, .items-4, .items-6, .items-8, .items-9) .special-item:nth-child(5n+2),
   .special-wrap.is-featured:not(.items-2, .items-4, .items-6, .items-8, .items-9) .special-item:nth-child(5n+4) {
      transform: translateY(clamp(2vh, 2.8vw + .7vh, 6vh));
   }

   .special-wrap.is-featured:is(.items-6, .items-9) .special-item:nth-child(3n+2):hover,
   .special-wrap.is-featured:is(.items-4, .items-8) .special-item:nth-child(even):hover {
      transform: translateY(calc(clamp(1.3vh, 1.9vw + .4vh, 4vh) - 4px));
   }

   .special-wrap.is-featured:is(.items-6, .items-9) .special-item:nth-child(3n+2),
   .special-wrap.is-featured:is(.items-4, .items-8) .special-item:nth-child(even) {
      transform: translateY(clamp(1.3vh, 1.9vw + .4vh, 4vh));
   }

}

@media (min-width:1481px) {
   .special-wrap.is-featured:not(.items-1, .items-2, .items-3, .items-4, .items-6, .items-8, .items-9) {
      box-sizing: border-box;
      padding-right: var(--site-gap);
      padding-left: var(--site-gap);
   }

}

/* --------------------------------------------------------------------------
   5.About
   -------------------------------------------------------------------------- */
.special-section + .about-wrap .about-overlay {
   top: min(18vh, 170px);
}

.about-section {
   position: relative;
   max-width: calc(var(--site-width) + var(--site-gap) + var(--site-gap));
   margin: 0 auto;
}

.about-wrap {
   margin: clamp(40px, 4.2vw + 20px, 100px) 0;
}

.special-section + .about-wrap {
   margin-top: clamp(40px, 1.4vw + 33.3px, 60px);
}

/* Cover */
.about-overlay {
   position: absolute;
   z-index: -1;
   top: 0;
   right: var(--site-gap);
   bottom: -0;
   left: var(--site-gap);
   overflow: hidden;
   max-width: calc(100% - var(--site-gap) - var(--site-gap));
   content: '';
   border-radius: calc(var(--radius) * 5);
   will-change: transform;
   background: var(--about-bg-color);
}

.about-overlay img {
   opacity: var(--about-opacity-cover, 0%);
}

/* RWD — About
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1480px) {
   .about-overlay {
      right: clamp(5px, .7vw + 1.7px, 15px);
      left: clamp(5px, .7vw + 1.7px, 15px);
      max-width: 100%;
   }

}

@media (max-width:768px) {
   .special-section + .about-wrap .about-overlay {
      top: calc(clamp(5px, .7vw + 1.7px, 15px) - var(--site-gap));
   }

}

@media (min-width:769px) {
   .special-section:is(.items-1, .items-2) + .about-wrap .about-overlay {
      top: min(18vh, 100px);
   }

}

@media (min-width:1281px) {
   .special-section:is(.items-1, .items-2) + .about-wrap {
      margin-top: 0;
   }

   .special-section:is(.items-3, .items-6, .items-9) + .about-wrap {
      margin-top: 40px;
   }

   .special-section:is(.items-4, .items-8) + .about-wrap {
      margin-top: 30px;
   }

}

/* --------------------------------------------------------------------------
   6.Subscribe
   -------------------------------------------------------------------------- */
.subscribe-wrap {
   padding: 8vh 3vw;
   gap: calc(var(--grid-gap) / 2);
   grid-template-columns: repeat(3, 1fr);
}

.subscribe-wrap,
.subscribe-container {
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
   border-radius: calc(var(--radius) * 4.8);
}

.subscribe-wrap:first-of-type {
   padding: var(--item-gap) max(var(--item-gap), 1.5vw) var(--item-gap) var(--item-gap);
}

.subscribe-wrap:first-of-type:not(.is-cover) {
   background-color: var(--color-two);
}

.subscribe-wrap:first-of-type .subscribe-title {
   grid-column: span 3;
}

.subscribe-wrap:first-of-type .subscribe-title.no-benefits {
   grid-column: span 2;
}

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

.subscribe-title {
   box-sizing: border-box;
   max-width: 900px;
   padding: .3em var(--item-gap);
   border-radius: calc(var(--radius) * 3.2);
   background-color: var(--color-body);
}

.subscribe-container {
   padding: 14vh var(--item-gap) var(--item-gap);
}

.subscribe-container + .subscribe-wrap {
   padding: 3vh 0 3vh var(--item-gap);
   background-color: var(--color-body);
}

.subscribe-img {
   position: absolute;
   z-index: -1;
   top:0;
   right:0;
   bottom: 0;
   left:0;
}

/* Button & Terms
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-btn {
   align-self: center;
   margin-top: 1vh;
   justify-self: right;
}

.subscribe-btn.is-benefits {
   align-self: start;
}

.subscribe-btn small {
   justify-content: center;
   margin: 1.2vh 0 0 0;
   text-align: center;
}

/* Form
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.subscribe-form {
   max-width: clamp(400px, 13.9vw + 333px, 600px);
   margin: clamp(30px, 1.4vw + 23px, 50px) auto 0;
   word-break: normal;
}

.subscribe-form > div:first-of-type {
   align-items: center;
   box-sizing: border-box;
   padding: 10px 10px 10px 30px;
   border-radius: 100px;
   background-color: var(--color-two);
   gap: var(--item-gap);
   grid-template-columns: repeat(3, 1fr);
}

.subscribe-form input {
   font-size: var(--font-size-input);
   grid-column: span 2;
}

.subscribe-terms {
   justify-content: center;
   margin: 2vh 0 0 0;
   text-align: left;
}

/* RWD — Subscribe
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .subscribe-container + .subscribe-wrap {
      padding-left: 0;
   }

   .subscribe-wrap:first-of-type .subscribe-title.no-benefits,
   .subscribe-content,
   .subscribe-btn {
      grid-column: 1/-1;
   }

   .subscribe-btn,
   .subscribe-btn a {
      width: 100%;
      margin-top: 0;
   }

}

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

.special-section + .loop-section{
   margin-top: 3vh;
}

.loop-wrap {
   margin-bottom: calc(var(--grid-gap) / 1.2);
   animation: slideTop 1s ease;
   gap: calc(var(--grid-gap) / 1.2);
   grid-template-columns: repeat(6, 1fr);
}

.loop-wrap article {
   grid-column: span 2;
}

.loop-wrap.is-feed > article:nth-child(1),
.loop-wrap.is-feed > article:nth-child(1) + article {
   grid-column: span 3;
}

/* Heading
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.loop-heading {
   margin-top: calc(var(--grid-gap) * 1.2);
   margin-bottom: calc(var(--grid-gap) / 2);
   gap: calc(var(--grid-gap) / 1.2);
   grid-template-columns: repeat(2, 1fr);
}

/* Search */
.loop-search {
   line-height: 1;
   position: relative;
   display: inline-flex;
   overflow: hidden;
   align-self: center;
   flex: 1 0 100px;
   box-sizing: border-box;
   max-width: 100%;
   margin: 0;
   padding: .9em 1.5vw;
   cursor: pointer;
   transition: background-color .16s ease;
   white-space: nowrap;
   text-overflow: ellipsis;
   border-radius: 100px;
   background-color: var(--color-two);
   justify-self: right;
}

.loop-search:hover {
   background-color: var(--color-three);
}

.loop-search svg {
   flex: 0 0 auto;
   width: 16px;
   margin-right: 6px;
   fill: var(--color-font-one);
}

/* Item
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.item-img-wrap {
   position: relative;
   transition: transform .2s ease;
   will-change: transform;
}

.item-img-wrap:hover {
   transform: translateY(-4px);
}

/* Image */
.item-img {
   overflow: hidden;
   margin-bottom: max(1.8vh, 12px);
   border-radius: calc(var(--radius) * 3.2);
}

.item h2 {
   font-weight: var(--font-weight-two-bold);
   margin: 0;
}

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

/* RWD — Loop
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .loop-wrap article {
      grid-column: span 3;
   }

}

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

   .loop-search,
   .loop-wrap p {
      display: none;
   }

   .item-img-wrap:hover {
      transform: none;
   }

}

@media (max-width:480px) {
   .loop-wrap {
      margin-bottom: calc(var(--grid-gap) * 1.6);
      gap: calc(var(--grid-gap) * 1.6) calc(var(--grid-gap) / 1.2);
   }

   .loop-wrap .item-tags {
      display: none;
   }

   .loop-wrap.is-portrait .special-img {
      aspect-ratio: 3/4;
   }

   .loop-wrap.is-landscape .special-img {
      aspect-ratio: 4/3;
   }

   .loop-wrap.is-panoramic .special-img {
      aspect-ratio: 2/1;
   }

   .loop-wrap.is-square .special-img {
      aspect-ratio: 1/1;
   }

}

/* --------------------------------------------------------------------------
   8.Spotlight
   -------------------------------------------------------------------------- */
.spotlight-section {
   order: 3;
   grid-column: span 2;
}

.spotlight-wrap {
   display: grid;
   padding: clamp(1.4vh, .7vw + 1.1vh, 2.4vh) var(--item-gap) var(--item-gap);
   border-radius: calc(var(--radius) * 3.2);
   background-color: var(--ghost-accent-color);
   gap: 8px;
   grid-template-columns: repeat(1, 1fr);
}

.spotlight-label {
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
   grid-column: 1/-1;
}

.spotlight-label span {
   font-weight: var(--font-weight-two-bold);
   margin-right: 8px;
   margin-bottom: .8vh;
}

.spotlight-label a {
   font-size: max(75%, 1.4rem);
   margin-bottom: 1vh;
   padding: .12em .7em;
   transform: translateY(1px);
   border-radius: 100px;
}

.spotlight-label a,
.spotlight-item {
   background-color: var(--color-body);
}

.spotlight-item {
   box-sizing: border-box;
   padding: var(--item-gap);
   transition: transform .2s ease;
   border-radius: calc(var(--radius) * 2);
   gap: calc(var(--grid-gap) / 4);
   grid-template-columns: repeat(4, 1fr);
   will-change: transform;
}

.spotlight-item:hover {
   transform: translateX(3px);
}

.spotlight-title {
   font-weight: var(--font-weight-two-bold);
   margin: 0;
   grid-column: 1/-1;
}

.spotlight-img + .spotlight-title {
   grid-column: 1/-2;
}

.spotlight-img {
   overflow: hidden;
   order: 1;
   margin-bottom: 0;
   border-radius: var(--radius);
}

/* RWD — Spotlight
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1280px) {
   .spotlight-item:nth-child(4) {
      display: none;
   }

}

@media (max-width:1024px) {
   .spotlight-section {
      grid-column: 1/-1;
   }

   .spotlight-wrap {
      grid-template-columns: repeat(2, 1fr);
   }

   .spotlight-item:nth-child(4) {
      display: grid;
   }

   .spotlight-item:hover {
      transform: translateY(-2px);
   }

}

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

   .spotlight-item {
      grid-template-columns: repeat(6, 1fr);
      gap: var(--grid-gap);
   }

   .spotlight-item:nth-child(5) {
      display: none;
   }

}

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

.pagination-section button {
   margin-bottom: clamp(10vh, 1.4vw + 9.3vh, 12vh);
}

/* --------------------------------------------------------------------------
   10.Related
   -------------------------------------------------------------------------- */
.related-section {
   margin: 4vh 0;
}

/* RWD — Related
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .related-section article:nth-child(3) {
      display: none;
   }

}

/* --------------------------------------------------------------------------
   11.Author & Tag page
   -------------------------------------------------------------------------- */
.archive-social {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
   padding-top: 4vh;
   gap: 16px;
}

.archive-social a.is-website {
   line-height: 1;
   padding: .5em 1em;
   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: 32px;
   fill: var(--color-font-one);
}

/* --------------------------------------------------------------------------
   12.Footer
   -------------------------------------------------------------------------- */
.footer-section {
   max-width: 100%;
   margin: 10vh 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-social {
   margin: 0 0 4vh;
   padding: 1vh 0 0;
}

/* Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-content > div {
   flex-grow: 1;
   margin-right: 20vw;
}

/* Social */
.footer-social {
   align-self: flex-end;
   flex-grow: 0;
   gap: clamp(14px, .4vw + 12px, 20px);
}

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

.footer-social svg {
   width: clamp(26px, .3vw + 25px, 30px);
   fill: var(--color-font-one);
}

/* Columns
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer-columns {
   align-content: space-between;
   flex-direction: column;
   margin: 0;
   padding: clamp(3vh, 1.4vw + 2.3vh, 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-title {
   font-weight: var(--font-weight-two-bold);
   margin-bottom: 2vh;
}

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

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

.footer-item li:last-child {
   margin-bottom: clamp(3vh, 1.4vw + 2.3vh, 5vh);
}

/* --------------------------------------------------------------------------
   13.Error page
   -------------------------------------------------------------------------- */
.error-section p {
   margin-top: .4em;
}

.error-btn {
   margin-top: 1.4em;
}

.error-section + .related-section {
   margin-top: 4vh;
}

/* --------------------------------------------------------------------------
   14.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: 500px;
}

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

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

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

.signup-content button {
   margin-top: clamp(3vh, .7vw + 2.7vh, 4vh);
}

/* 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-wrap {
      text-align: center;
   }

   .signup-terms {
      justify-content: center;
      text-align: left;
   }

   .signup-content button {
      width: 100%;
   }

}