/* ============================================================
   THE TEA — NEWSROOM THEME  (built from prototypes)
   Dark neon-on-black, flat: no gradients, no shadows, no glows.
   Schibsted Grotesk (display) + Hanken Grotesk (body).
   Reuses Ghost "Source" class hooks (.gh-card / .gh-container /
   .gh-feed / .gh-canvas / .gh-article) so templates stay clean.
   ============================================================ */

:root{
  --green:#52DB26; --purple:#9C55F9; --blue:#007AFE; --pink:#FA1B73; --lime:#E0FC00;
  --bg:#0A090D; --surface:#141118; --surface-2:#1C1822; --surface-3:#262030;
  --line:rgba(255,255,255,.10);
  --text:#F6F4F9; --muted:rgba(246,244,249,.58); --faint:rgba(246,244,249,.36);
  --container:1200px; --measure:720px;
  --gap:clamp(18px,1.2rem + 1.4vw,40px);
  --font-display:"Schibsted Grotesk",system-ui,-apple-system,sans-serif;
  --font-body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{font-size:62.5%}
body{font-family:var(--font-body);font-size:1.7rem;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.is-title{font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.025em}
.is-body{font-family:var(--font-body)}

.gh-viewport{display:flex;flex-direction:column;min-height:100vh}
.gh-outer{width:100%;padding-inline:var(--gap)}
.gh-inner{max-width:var(--container);margin-inline:auto}
.gh-canvas{max-width:var(--measure);margin-inline:auto}
.gh-main{flex:1 0 auto}

/* shared bits ------------------------------------------------ */
.gh-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:1.5rem;padding:1.05rem 1.9rem;border-radius:999px;border:0;cursor:pointer;background:var(--pink);color:#fff;transition:transform .15s,background .15s,color .15s;text-align:center}
.gh-button:hover{transform:translateY(-2px)}
.gh-button svg{width:1.05em;height:1.05em}
.gh-button.is-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.gh-button.is-ghost:hover{background:var(--surface-2)}

.kicker{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--pink)}
.kicker .sep,.kicker .date{color:var(--faint);font-weight:600}
.cat-blue .kicker,.cat-blue .gh-card-tag{color:#5fa8ff}
.cat-purple .kicker,.cat-purple .gh-card-tag{color:#bf93ff}
.cat-lime .kicker,.cat-lime .gh-card-tag{color:var(--lime)}
.cat-green .kicker,.cat-green .gh-card-tag{color:#83e85f}
.cat-pink .kicker,.cat-pink .gh-card-tag{color:var(--pink)}

.readmore{display:inline-flex;align-items:center;gap:.45em;font-family:var(--font-display);font-weight:700;font-size:1.45rem;color:var(--text)}
.readmore svg{width:1.05em;height:1.05em;transition:transform .2s}
a:hover .readmore svg,.readmore:hover svg{transform:translateX(4px)}

/* ============================================================
   NAVIGATION
   ============================================================ */
.gh-navigation{position:sticky;top:0;z-index:100;background:rgba(10,9,13,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.gh-navigation-inner{display:flex;align-items:center;gap:2.4rem;padding-block:1.3rem}
.gh-navigation-brand{display:flex;align-items:center;gap:1rem}
.gh-navigation-logo{font-family:var(--font-display);font-weight:900;font-size:2.1rem;letter-spacing:-.04em;color:var(--text);display:inline-flex;align-items:center;gap:.7rem}
.gh-navigation-logo img{max-height:34px;width:auto}
.gh-navigation-menu{flex:1}
.gh-navigation-menu .nav{list-style:none;display:flex;align-items:center;gap:2.2rem;padding:0;margin:0;font-weight:600;font-size:1.5rem}
.gh-navigation-menu .nav a{color:var(--muted);transition:color .15s}
.gh-navigation-menu .nav a:hover,.gh-navigation-menu .nav li.nav-current a{color:var(--text)}
.gh-navigation-actions{margin-left:auto;display:flex;align-items:center;gap:1rem}
.gh-navigation-members{display:flex;align-items:center;gap:1rem}
.gh-navigation-members a:not(.gh-button){color:var(--muted);font-weight:600;font-size:1.5rem}
.gh-navigation-members a:not(.gh-button):hover{color:var(--text)}
.gh-icon-button{width:42px;height:42px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;border:0;color:var(--text);cursor:pointer;transition:background .15s}
.gh-icon-button:hover{background:var(--surface-3)}
.gh-icon-button svg{width:19px;height:19px}
.gh-burger{display:none}
.gh-burger .gh-icon-close{display:none}
@media(max-width:920px){
  .gh-navigation-menu{position:fixed;inset:62px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);padding:1.4rem var(--gap) 2.4rem;flex:none;display:none}
  body.is-head-open .gh-navigation-menu{display:block}
  .gh-navigation-menu .nav{flex-direction:column;align-items:flex-start;gap:1.2rem;font-size:1.9rem}
  .gh-burger{display:grid}
  body.is-head-open .gh-burger .gh-icon-burger{display:none}
  body.is-head-open .gh-burger .gh-icon-close{display:block}
}

/* ============================================================
   CONTAINER / FEED  (home, index, tag, author listings)
   ============================================================ */
.gh-container{padding-block:clamp(3rem,4vw,5rem)}
.gh-container-inner{max-width:var(--container);margin-inline:auto}
.gh-container-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:clamp(2.4rem,3vw,3.4rem);margin-bottom:2.8rem}
.gh-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,2vw,2.6rem)}
@media(max-width:920px){.gh-feed{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gh-feed{grid-template-columns:1fr}}
.gh-more{margin-top:clamp(3rem,4vw,4.5rem);text-align:center}
.gh-more a{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--pink)}
.gh-more svg{width:1em;height:1em}

/* ============================================================
   POST CARD
   ============================================================ */
.gh-card{display:flex;flex-direction:column}
.gh-card-link{display:flex;flex-direction:column;height:100%}
.gh-card-image,.gh-card-fallback{aspect-ratio:16/10;border-radius:18px;overflow:hidden;margin-bottom:1.6rem;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.gh-card-image{display:block}
.gh-card-image img{width:100%;height:100%;object-fit:cover}
.gh-card-fallback{display:grid;place-items:center;background:var(--pink)}
.gh-card-fallback svg{width:58px;height:58px;color:rgba(0,0,0,.2)}
.cat-blue .gh-card-fallback{background:var(--blue)} .cat-blue .gh-card-fallback svg{color:rgba(255,255,255,.3)}
.cat-purple .gh-card-fallback{background:var(--purple)} .cat-purple .gh-card-fallback svg{color:rgba(255,255,255,.28)}
.cat-lime .gh-card-fallback{background:var(--lime)}
.cat-green .gh-card-fallback{background:var(--green)}
.cat-pink .gh-card-fallback{background:var(--pink)}
.gh-card-link:hover .gh-card-image,.gh-card-link:hover .gh-card-fallback{transform:translateY(-5px)}
.gh-card-wrapper{display:flex;flex-direction:column;gap:.8rem;flex:1}
.gh-card-tag{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--pink)}
.gh-card-title{font-family:var(--font-display);font-weight:700;font-size:2.05rem;line-height:1.12;letter-spacing:-.015em;transition:color .15s}
.gh-card-link:hover .gh-card-title{color:#fff}
.gh-card-excerpt{color:var(--muted);font-size:1.55rem;line-height:1.5;flex:1}
.gh-card-meta{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;color:var(--faint);font-size:1.35rem;font-weight:600}
.gh-card-meta svg{width:15px;height:15px}
.gh-card-date{margin-left:auto}

/* ============================================================
   HOME — hero + topic filters
   ============================================================ */
.gh-home-hero{padding-top:clamp(3rem,4vw,5rem)}
.gh-hero-feature{position:relative;border-radius:26px;overflow:hidden;background:var(--surface);border:1px solid var(--line);display:grid;grid-template-columns:1.02fr .98fr;min-height:440px}
@media(max-width:860px){.gh-hero-feature{grid-template-columns:1fr}}
.gh-hero-media{position:relative;min-height:300px;background:var(--pink);overflow:hidden}
.gh-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gh-hero-media .glyph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(0,0,0,.16)}
.gh-hero-media .glyph svg{width:46%;height:46%}
.gh-hero-stamp{position:absolute;left:2rem;top:2rem;z-index:1;font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);padding:.5em 1em;border-radius:999px}
.gh-hero-body{padding:clamp(2.4rem,3vw,3.6rem);display:flex;flex-direction:column;justify-content:center}
.gh-hero-body h1{font-size:clamp(3rem,4.2vw,4.8rem);margin:1.6rem 0}
.gh-hero-body .dek{color:var(--muted);font-size:clamp(1.6rem,1.2rem + .5vw,1.9rem);max-width:48ch}
.gh-hero-body .readmore{margin-top:2.6rem}

.gh-filters{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:2.4rem;border-bottom:1px solid var(--line)}
.gh-filters .lead{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-right:.6rem}
.gh-filter{font-family:var(--font-display);font-weight:700;font-size:1.45rem;color:var(--muted);padding:.7rem 1.4rem;border-radius:999px;background:var(--surface-2);transition:background .15s,color .15s}
.gh-filter:hover{color:var(--text);background:var(--surface-3)}
.gh-filter.is-active{background:var(--pink);color:#fff}

/* ============================================================
   ARCHIVE  (tag + author headers)
   ============================================================ */
.gh-archive{padding-top:clamp(3rem,4vw,5rem);padding-bottom:clamp(2.4rem,3vw,3.4rem);border-bottom:1px solid var(--line)}
.gh-archive-inner{max-width:var(--container);margin-inline:auto;display:flex;gap:clamp(2rem,3vw,3.2rem);align-items:center;flex-wrap:wrap}
.gh-archive-wrapper{flex:1;min-width:260px}
.gh-archive-wrapper .gh-eyebrow{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:1rem}
.gh-archive .gh-article-title{font-size:clamp(3.4rem,5.4vw,6rem);display:flex;align-items:center;gap:1.4rem}
.gh-archive .gh-article-title .dot{width:16px;height:16px;border-radius:50%;background:var(--blue);flex:none}
.gh-archive .gh-article-excerpt{margin-top:1.6rem;color:var(--muted);font-size:clamp(1.7rem,1.3rem + .5vw,2rem);max-width:60ch}
.gh-archive .gh-article-image{flex:none;width:clamp(110px,14vw,150px);height:clamp(110px,14vw,150px);border-radius:50%;overflow:hidden}
.gh-archive .gh-article-image img{width:100%;height:100%;object-fit:cover}
.gh-author-meta{margin-top:1.8rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.gh-author-social{display:flex;gap:.8rem}
.gh-author-social-link{width:40px;height:40px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;transition:transform .15s,background .15s}
.gh-author-social-link:hover{transform:translateY(-3px);background:var(--pink)}
.gh-author-social-link svg{width:18px;height:18px;color:var(--text)}
.gh-author-location{color:var(--faint);font-weight:600;font-size:1.4rem}

/* ============================================================
   PAGINATION
   ============================================================ */
.gh-pagination{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:clamp(3.5rem,4.5vw,5rem)}
.gh-pagination a,.gh-pagination span{height:46px;min-width:46px;padding:0 1.6rem;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font-display);font-weight:700;font-size:1.5rem;background:var(--surface-2);color:var(--muted);transition:background .15s,color .15s}
.gh-pagination a:hover{background:var(--surface-3);color:var(--text)}
.gh-pagination .page-indicator{background:var(--pink);color:#fff}
.gh-pagination .is-disabled{opacity:.35;pointer-events:none}
.gh-pagination svg{width:16px;height:16px}

/* ============================================================
   ARTICLE  (post.hbs)
   ============================================================ */
.gh-article{padding-top:clamp(2.6rem,4vw,4.5rem)}
.gh-article-header{text-align:center}
.gh-article-tag{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);margin-bottom:1.4rem}
.gh-article-title{font-size:clamp(3.4rem,5.4vw,6rem);margin:0 auto;max-width:18ch}
.gh-article-excerpt{margin:2.2rem auto 0;color:var(--muted);font-size:clamp(1.8rem,1.3rem + .6vw,2.2rem);line-height:1.5;max-width:54ch}
.gh-meta-share{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:3rem;flex-wrap:wrap}
.gh-article-meta{display:flex;align-items:center;gap:1.2rem;text-align:left}
.gh-article-author-image img,.gh-article-author-image svg{width:46px;height:46px;border-radius:50%;object-fit:cover}
.gh-article-author-name{font-family:var(--font-display);font-weight:700;font-size:1.6rem}
.gh-article-meta-content{color:var(--faint);font-size:1.4rem}
.gh-article-meta-date{color:var(--faint)}
.gh-button-share{background:var(--surface-2);color:var(--text);font-size:1.4rem;padding:.85rem 1.6rem}
.gh-article-image{margin:clamp(3rem,4vw,4.5rem) auto 0;max-width:var(--container);aspect-ratio:16/8;border-radius:22px;overflow:hidden;background:var(--surface-2)}
.gh-article-image img{width:100%;height:100%;object-fit:cover}
.gh-article-image figcaption{text-align:center;color:var(--faint);font-size:1.4rem;margin-top:1rem}

/* prose */
.gh-content{padding-block:clamp(3rem,4vw,4.5rem)}
.gh-content > *{max-width:var(--measure);margin-inline:auto}
.gh-content > .kg-width-wide{max-width:1100px}
.gh-content > .kg-width-full{max-width:100%}
.gh-content p,.gh-content ul,.gh-content ol,.gh-content dl{margin-top:1.8rem;font-size:1.85rem;line-height:1.65}
.gh-content h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:clamp(2.6rem,3.2vw,3.4rem);margin-top:4rem;line-height:1.1}
.gh-content h3{font-family:var(--font-display);font-weight:700;font-size:2.2rem;margin-top:3rem}
.gh-content a{color:#ff5fa0;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.gh-content img,.gh-content video{border-radius:14px}
.gh-content figcaption{text-align:center;color:var(--faint);font-size:1.4rem;margin-top:1rem}
.gh-content ul,.gh-content ol{padding-left:2.6rem}
.gh-content li{margin-top:.8rem}
.gh-content ul li::marker{color:var(--lime)}
.gh-content ol li::marker{color:var(--pink);font-family:var(--font-display);font-weight:800}
.gh-content blockquote{margin:3.6rem auto;padding-left:2.4rem;border-left:4px solid var(--pink)}
.gh-content blockquote p{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,2.6vw,2.8rem);line-height:1.2;letter-spacing:-.015em;color:var(--text)}
.gh-content.drop-cap > p:first-of-type::first-letter{font-family:var(--font-display);font-weight:800;font-size:5.6rem;line-height:.8;float:left;margin:.6rem .8rem 0 0;color:var(--pink)}

/* article footer: tags + author card + related */
.gh-article-footer{max-width:var(--measure);margin:clamp(3rem,4vw,4.5rem) auto 0;padding-top:3rem;border-top:1px solid var(--line)}
.gh-tags{display:flex;gap:.8rem;flex-wrap:wrap}
.gh-tags a{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--muted);padding:.6rem 1.3rem;border-radius:999px;background:var(--surface-2);transition:color .15s,background .15s}
.gh-tags a:hover{color:var(--text);background:var(--surface-3)}
.gh-authorcard{max-width:var(--measure);margin:3rem auto 0;display:flex;gap:1.8rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:2.4rem}
.gh-authorcard img,.gh-authorcard .avatar{width:60px;height:60px;border-radius:50%;flex:none;object-fit:cover;background:var(--pink);display:grid;place-items:center;color:#fff}
.gh-authorcard .nm{font-family:var(--font-display);font-weight:800;font-size:1.9rem}
.gh-authorcard p{margin-top:1rem;color:var(--muted);font-size:1.55rem}
.gh-container.is-grid .gh-container-title{text-align:left}

/* ============================================================
   NEWSLETTER CTA  +  FOOTER
   ============================================================ */
.gh-cta{padding-block:clamp(2rem,3vw,3rem)}
.gh-cta-inner{max-width:var(--container);margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:clamp(2.6rem,4vw,4.4rem);display:grid;grid-template-columns:1.05fr .95fr;gap:2.8rem;align-items:center}
@media(max-width:760px){.gh-cta-inner{grid-template-columns:1fr}}
.gh-cta-title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,3.4vw,3.6rem);line-height:1.02;letter-spacing:-.02em}
.gh-cta-description{margin-top:1.1rem;color:var(--muted);font-size:1.6rem;max-width:38ch}

.gh-form{display:flex;gap:.7rem;background:var(--surface-2);padding:.6rem;border-radius:999px;border:1px solid var(--line);position:relative}
.gh-form-input{flex:1;background:transparent;border:0;outline:0;color:var(--text);font-size:1.55rem;font-weight:500;padding-inline:1.4rem;min-width:0}
.gh-form-input::placeholder{color:var(--faint)}
.gh-form .gh-button{white-space:nowrap}
.gh-form [data-members-error]{position:absolute;top:100%;left:1.4rem;margin-top:.6rem;color:#ff7a9c;font-size:1.3rem}

.gh-footer{flex-shrink:0;border-top:1px solid var(--line);padding-block:clamp(3.5rem,4vw,5rem) 3rem;margin-top:clamp(3rem,4vw,5rem)}
.gh-footer-inner{max-width:var(--container);margin-inline:auto}
.gh-footer-signup{padding-bottom:3rem;border-bottom:1px solid var(--line);text-align:center;max-width:var(--measure);margin:0 auto 3rem}
.gh-footer-signup-header{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,3.4vw,3.6rem);letter-spacing:-.02em}
.gh-footer-signup-subhead{margin-top:1rem;color:var(--muted);font-size:1.6rem}
.gh-footer-signup .gh-form{max-width:460px;margin:2rem auto 0}
.gh-footer-bar{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.gh-footer-logo{font-family:var(--font-display);font-weight:900;font-size:2rem;letter-spacing:-.04em;color:var(--text)}
.gh-footer-logo img{max-height:30px;width:auto}
.gh-footer-menu .nav{list-style:none;display:flex;gap:2rem;padding:0;margin:0;font-weight:600;font-size:1.5rem}
.gh-footer-menu .nav a{color:var(--muted);transition:color .15s}
.gh-footer-menu .nav a:hover{color:var(--text)}
.gh-footer-copyright{color:var(--faint);font-size:1.35rem}
.gh-footer-copyright a{color:var(--muted)}

/* misc Ghost states */
.gh-error{max-width:var(--container);margin:0 auto;padding-block:8rem;text-align:center}
.kg-card-begin,.kg-card-end{display:none}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

.gh-pagination .gh-pag-prev svg{transform:rotate(180deg)}

/* ---- newsletter button states (Subscribe / loading / Email sent) ---- */
.gh-form .gh-button > span:nth-child(1){display:inline-flex;align-items:center;gap:.4em}
.gh-form .gh-button .nc-icon-wrapper,
.gh-form .gh-button svg.loader,
.gh-form .gh-button > svg{display:none}        /* hide loader by default */
.gh-form .gh-button > span:nth-child(3){display:none}   /* hide "Email sent" by default */

/* loading: show only the loader */
.gh-form.loading .gh-button > span:nth-child(1){display:none}
.gh-form.loading .gh-button > svg{display:inline-flex}

/* success: show only "Email sent" */
.gh-form.success .gh-button > span:nth-child(1){display:none}
.gh-form.success .gh-button > svg{display:none}
.gh-form.success .gh-button > span:nth-child(3){display:inline-flex}

.gh-form [data-members-error]:empty{display:none}
