/* =====================================================================
   Secured Faith theme. Dark only. Tokens match the design spec, section 8.
   ===================================================================== */

/* 1. Tokens ---------------------------------------------------------- */
:root{
  color-scheme:dark;
  --bg:#0E1117; --bg-2:#151A22; --surface:#141922; --field-bg:#1A2029;
  --text:#EDEFF2; --text-lead:#C2C9D2; --text-feat:#B4BCC7; --stone:#7E8A98;
  --line:rgba(237,239,242,.15); --line-soft:rgba(237,239,242,.07); --field-line:rgba(237,239,242,.20);
  --accent:#6E9CF2; --accent-hover:#8CB1F6;
  --accent-fill:#2F63D8; --accent-fill-hover:#3468DB; --on-accent:#F4F7FF;
  --accent-wash:rgba(110,156,242,.10);
  --close-bg:#15284D; --close-text:#EDEFF2; --close-dim:#A9B4C2;
  --red:#E0897E;
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px; --narrow:720px; --gutter:32px; --radius:2px;
  /* Session pages (DC, 2026-09-28). The Cobalt (--accent-fill) is the emphasis colour: section
     headings, title accents, heading edges and hovers. It is only ever large text or a line, never
     body-size text: it measures 3.5:1 on the page, enough for large text and lines, not for small text. */
  --emphasis:var(--accent-fill);
  --frame:1px solid var(--accent);                  /* the thin line around each part: video, audio, parts list, study guide */
  --edge:5px;                                       /* cobalt edge before a heading, as on the video's lower thirds */
  --section-title:clamp(36px,4.6vw,52px);           /* Summary, Synthesis, Transcript: a step up from a content h2 */
  --part-title:clamp(24px,2.6vw,29px);              /* the sections inside the synthesis */
  --statement:clamp(22px,2.4vw,27px);               /* one-line statements set large in the serif */
  --quote:clamp(19px,2vw,21px);                     /* quotes set as panels */
}

/* 2. Fonts ----------------------------------------------------------- */
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

/* 3. Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video,iframe{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent-fill);color:var(--on-accent)}
h1,h2,h3,h4{margin:0;font-weight:500;text-wrap:balance}
p{margin:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-60px;z-index:100;background:var(--accent-fill);color:var(--on-accent);padding:10px 16px;border-radius:var(--radius);text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}

/* 4. Layout ---------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:calc(var(--narrow) + 2 * var(--gutter))}
.site-main{display:block;min-height:60vh}
.page-head{max-width:var(--wrap);margin-inline:auto;padding:88px var(--gutter) 40px}
.page-title{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.01em}
.page-lede{margin-top:18px;max-width:58ch;font-size:17px;color:var(--text-lead)}
.sessions-empty{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gutter) 96px}
.sessions-empty__text{max-width:52ch;color:var(--text-lead)}
.sessions-empty .btn{margin-top:24px}
.sec-title{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4.5vw,48px);line-height:1.05;letter-spacing:-.01em;margin-bottom:28px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
/* Editor widths. gscan requires both classes; Task 5 places them on the content grid. */
.kg-width-wide{}
.kg-width-full{}

/* 5. Components ------------------------------------------------------ */
/* Ported from docs/secured-faith-system.html: .btn, .btn-primary, .btn-ghost, .btn-sm, .textlink, .eyebrow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius);padding:14px 22px;line-height:1;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.btn-primary{background:var(--accent-fill);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-sm{padding:11px 16px;font-size:11px}
.textlink{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.textlink:hover{border-bottom-color:currentColor}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";flex:none;width:26px;height:1px;background:var(--accent);opacity:.6}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--accent-hover)}
.badge{display:inline-block;padding:3px 8px;border:1px solid var(--line);border-radius:var(--radius);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-feat)}

/* 6. Header and footer ----------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(14,17,23,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.wordmark::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent-fill)}
.site-menu{display:flex;align-items:center;gap:28px}
.nav{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.nav a{font-size:13.5px;font-weight:500;letter-spacing:.02em;text-decoration:none;color:var(--text-feat);transition:color .2s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.site-actions{display:flex;align-items:center;gap:14px}
.nav-signin{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--text-feat)}
.nav-signin:hover{color:var(--text)}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--text-feat);cursor:pointer;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--text);color:var(--text)}
.icon-btn svg{width:18px;height:18px}
.menu-toggle{display:none}
.nav-signin--menu{display:none}
.site-header__in>.site-menu{margin-left:auto}
.footer-signup{display:grid;gap:10px;margin-bottom:22px}
.footer-signup__label{font-size:13px;font-weight:600;color:var(--text-lead)}
.footer-signup__row{display:flex;flex-wrap:wrap;gap:8px}
.footer-signup__input{flex:1 1 180px;min-width:0;padding:10px 12px;background:var(--field-bg);color:var(--text);border:1px solid var(--field-line);border-radius:var(--radius);font:inherit}
.footer-signup__input::placeholder{color:var(--stone)}
.footer-signup__done,.footer-signup__error{display:none;font-size:13px}
.footer-signup.success .footer-signup__done{display:block;color:var(--text-lead)}
.footer-signup.error .footer-signup__error{display:block;color:var(--red)}
.site-footer{border-top:1px solid var(--line);padding:48px 0 56px;color:var(--stone);font-size:14px}
.site-footer__in{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:32px;align-items:start}
.site-footer__verse{margin-top:14px;max-width:34ch;color:var(--text-lead)}
.site-footer__verse cite{display:block;margin-top:6px;font-style:normal;font-size:12px;letter-spacing:.06em;color:var(--stone)}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none}
.site-footer nav a{text-decoration:none;color:var(--text-feat);font-size:13.5px}
.site-footer nav a:hover{color:var(--text)}
.site-footer__legal{grid-column:1 / -1;padding-top:24px;border-top:1px solid var(--line-soft);font-size:13px}

@media (max-width:900px){
  .menu-toggle{display:inline-flex}
  .site-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:20px;padding:20px var(--gutter) 28px;background:var(--bg);border-bottom:1px solid var(--line)}
  .site-menu[data-open]{display:flex}
  .site-menu .nav{flex-direction:column;gap:14px}
  .site-menu .nav a{font-size:17px}
  .site-header__in>.site-menu{margin-left:0}
  .nav-signin--menu{display:block;font-size:17px}
  .site-footer__in{grid-template-columns:1fr}
}
@media (max-width:620px){
  .nav-signin--bar{display:none}
  .site-actions .btn-sm{padding:10px 12px}
}
@media (max-width:620px){
  :root{--gutter:20px}
  .page-head{padding-top:56px}
}
/* Narrow phones: wordmark, Join free and the menu button share about 280px. */
@media (max-width:380px){
  .site-header__in{gap:12px}
  .site-header .wordmark{font-size:18px;gap:8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 7. Sessions -------------------------------------------------------- */
.entry-head{max-width:calc(var(--narrow) + 2 * var(--gutter));margin-inline:auto;padding:80px var(--gutter) 36px}
.entry-title{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,6.5vw,76px);line-height:.98;letter-spacing:-.015em}
.entry-title em,.page-title em,.sec-title em{font-style:italic;color:var(--accent)}
/* Words or a phrase a session names in its title accent (see partials/title-accent.hbs), in the Cobalt itself. */
.entry-title__accent{color:var(--emphasis)}
.entry-lede{margin-top:20px;font-size:18px;line-height:1.55;color:var(--text-lead)}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:24px;font-size:14px;color:var(--stone)}
.entry-meta a{color:var(--text-feat);text-decoration:none}
.entry-meta__mentor{color:var(--text-feat)}
.entry-meta a:hover{color:var(--text)}

.gh-content{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start] minmax(0,140px)
    [main-start] min(var(--narrow),calc(100% - 2 * var(--gutter)))
    [main-end] minmax(0,140px)
    [wide-end] minmax(var(--gutter),1fr) [full-end];
  row-gap:0;
  font-size:17px;line-height:1.7;color:var(--text-feat);
}
.gh-content>*{grid-column:main;margin:0 0 1.35em}
.gh-content>.kg-width-wide{grid-column:wide}
.gh-content>.kg-width-full{grid-column:full}
.gh-content>h2,.gh-content>h3{margin-top:1.6em;color:var(--text);font-family:var(--font-display);font-weight:600;line-height:1.15}
.gh-content>h2{font-size:clamp(28px,3.4vw,36px)}
.gh-content>h3{font-size:clamp(23px,2.6vw,28px)}
.gh-content>h4{margin-top:1.4em;margin-bottom:.6em;color:var(--text);font-size:16px;font-weight:600;letter-spacing:.01em}
/* A heading straight under another opens a subsection, not a new section: keep them together. */
.gh-content>h2:has(+h3),.gh-content>h3:has(+h4){margin-bottom:.45em}
.gh-content>h2+h3,.gh-content>h3+h4{margin-top:0}
/* :not(.btn) so a button inside the content, such as the members gate's checkout links, keeps its
   own label colour. A plain .btn-primary rule loses to .gh-content a on specificity. */
.gh-content a:not(.btn){color:var(--accent);text-underline-offset:3px}
.gh-content a:not(.btn):hover{color:var(--accent-hover)}
.gh-content strong{color:var(--text)}


.related{padding:72px 0 88px;border-top:1px solid var(--line-soft)}
.related .sec-title{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.post-card__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px}
.post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.post-card__title{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.3vw,26px);line-height:1.15}
.post-card__title a{text-decoration:none}
.post-card__title a:hover{color:var(--accent-hover)}
.post-card__excerpt{font-size:14.5px;color:var(--text-feat)}

.content-cta{grid-column:main;margin:8px 0 40px;padding:32px;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent-fill);border-radius:var(--radius)}
.content-cta__title{font-family:var(--font-display);font-weight:600;font-size:28px;line-height:1.15;color:var(--text)}
.content-cta__text{margin-top:10px;color:var(--text-lead)}
.content-cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}
.content-cta__more{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}

.join-block{background:var(--close-bg);color:var(--close-text);padding:96px 0}
.join-block__title{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,5.5vw,64px);line-height:1;letter-spacing:-.01em}
.join-block__title em{font-style:italic;color:var(--accent)}
.join-block__lede{margin-top:18px;max-width:48ch;font-size:16px;color:var(--close-dim)}
.join-block__btn{margin-top:32px;background:var(--accent);color:var(--close-bg)}
.join-block__btn:hover{background:var(--accent-hover)}

@media (max-width:620px){
  .entry-head{padding-top:48px}
  .content-cta{padding:22px}
  .join-block{padding:64px 0}
}
.artifact-list{margin-top:28px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.artifact-list__title{margin-bottom:12px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.artifact-list__items{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.artifact-list__items a,.artifact-list__items span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:13.5px;text-decoration:none;color:var(--text)}
.artifact-list__items a:hover{border-color:var(--accent);color:var(--accent-hover)}
.artifact-list__items span{border-style:dashed;color:var(--text-feat)}
.artifact-list__cta{display:inline-block;margin-top:14px}
.gh-content>h2[id]{scroll-margin-top:96px}
.gh-content>.sf-media--video{grid-column:wide;margin-inline:0}
.gh-content .sf-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:var(--radius)}
.gh-content .sf-media--audio{margin-inline:0}
.gh-content .sf-media audio{display:block;width:100%;color-scheme:dark}
/* The session's synthesis: long running text, so every section is set apart and each kind of
   content has its own treatment. The cobalt edge echoes the scripture lower thirds in the video. */
.gh-content .sf-synthesis{color:var(--text-feat)}
.sf-syn{padding:30px 0 6px;border-top:1px solid var(--line)}
.sf-syn:first-child{padding-top:6px;border-top:0}
.sf-syn--group{margin-top:26px;padding-top:36px;border-top:2px solid var(--emphasis)}
.sf-syn h3{display:flex;align-items:center;gap:14px;margin:0 0 16px;font-family:var(--font-display);font-weight:600;font-size:var(--part-title);line-height:1.15;color:var(--text)}
.sf-syn h3::before{content:"";flex:none;width:var(--edge);height:.85em;background:var(--emphasis)}
.sf-syn p{margin:0 0 1em}
.sf-syn strong{font-weight:600;color:var(--accent)}
.sf-syn em{color:var(--text)}
.sf-syn ul,.sf-syn ol{margin:0 0 1em;padding:0;list-style:none}
.sf-syn li{position:relative;margin:0 0 .6em;padding-left:24px}
.sf-syn ul>li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;background:var(--accent)}
.sf-syn ol{counter-reset:syn}
.sf-syn ol>li{counter-increment:syn;padding-left:34px}
.sf-syn ol>li::before{content:counter(syn);position:absolute;left:0;top:.05em;min-width:22px;font-weight:700;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
.sf-syn--statement p:first-of-type{font-family:var(--font-display);font-weight:500;font-size:var(--statement);line-height:1.38;color:var(--text)}
.sf-syn--quotes ul{display:grid;gap:10px}
.sf-syn--quotes li{margin:0;padding:14px 20px 15px 22px;background:var(--surface);border-left:3px solid var(--emphasis);font-family:var(--font-display);font-style:italic;font-size:var(--quote);line-height:1.42;color:var(--text)}
.sf-syn--quotes ul>li::before{content:none}
.sf-syn--references ul{columns:2 260px;column-gap:36px}
.sf-syn--references li{break-inside:avoid}
.gh-content .sf-notice{margin-top:2.4em;font-size:13px;line-height:1.55;color:var(--stone)}
/* Session treatments (DC, 2026-09-28), for every session page, desk or reading column.
   - Section headings (Summary, Synthesis, Transcript, …) in the emphasis colour, a size up from a
     content h2. They stay h2: the page keeps one h1, and the parts list links to Ghost's h2 ids.
   - A thin frame around each part: the video, the audio, the parts list and the study guide.
   - Parts-list links hover in the emphasis colour.
   - A file card (the study guide) shows its hover look at rest, and inverts to solid cobalt on hover. */
.entry--session .entry-content>h2{margin-bottom:.55em;color:var(--emphasis);font-size:var(--section-title);line-height:1.05;font-weight:500;letter-spacing:-.01em}
.entry--session .entry-content>h2:has(+.sf-synthesis){margin-bottom:.45em}
.entry--session .artifact-list{border:var(--frame)}
.entry--session .artifact-list__items a:hover{color:var(--emphasis)}
.entry--session .sf-media video{border:var(--frame)}
.entry--session .sf-media--audio{padding:8px;background:var(--surface);border:var(--frame);border-radius:var(--radius)}
.entry--session .gh-content .kg-file-card .kg-file-card-container{border:var(--frame)}
.entry--session .gh-content .kg-file-card .kg-file-card-title{color:var(--accent)}
.entry--session .gh-content .kg-file-card .kg-file-card-container:is(:hover,:focus-visible){border-color:var(--emphasis);background:var(--emphasis)}
.entry--session .gh-content .kg-file-card .kg-file-card-container:is(:hover,:focus-visible) :is(.kg-file-card-title,.kg-file-card-caption,.kg-file-card-metadata,.kg-file-card-filename,.kg-file-card-filesize,.kg-file-card-icon,.kg-file-card-icon svg){color:var(--on-accent)}
.entry--session .gh-content .kg-file-card .kg-file-card-container:is(:hover,:focus-visible) .kg-file-card-icon{background:rgba(244,247,255,.14)}
/* Study desk: a session with video. Stage and body on the left, a sticky rail on the right. The
   template's script fills the stage and rail from the content; empty, they take no space. */
.entry-head--desk{max-width:var(--wrap)}
.entry-head--desk>*{max-width:860px}
/* The stage row fits the video exactly; the body row takes whatever height the rail adds. Without it the
   rail's extra height opened a gap above the locked panel, where the stage is empty. */
.desk{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto 1fr;grid-template-areas:"stage rail" "body rail";column-gap:44px;align-items:start;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.desk .gh-content{grid-template-columns:[full-start wide-start main-start] minmax(0,1fr) [main-end wide-end full-end]}
.desk__stage{grid-area:stage}
.desk__stage:empty,.desk__rail-parts:empty{display:none}
.desk__stage>h2{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.desk__stage>*{grid-column:main}
.desk__stage>.sf-media--video{margin-bottom:0}
.desk__body{grid-area:body}
/* Room between the session and what follows; the comments footer used to give it (removed 2026-09-28). */
.entry--session{padding-bottom:64px}
.desk__stage:not(:empty)+.desk__rail+.desk__body>h2:first-child{margin-top:1.3em}
.desk__rail{grid-area:rail;position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}
.desk__rail .artifact-list{margin-top:0}
.desk__rail .artifact-list__items{flex-direction:column;gap:0}
.desk__rail .artifact-list__items li+li{border-top:1px solid var(--line-soft)}
.desk__rail .artifact-list__items a,.desk__rail .artifact-list__items span{display:block;padding:9px 0;border:0;font-size:14px;color:var(--text-feat)}
.desk__rail .artifact-list__items span{color:var(--stone)}
.desk__rail-parts{font-size:15px;line-height:1.6}
.desk__rail-parts>*{margin-bottom:12px}
.desk__rail-parts>h2{margin:10px 0 10px;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.desk__rail-parts>h2:first-child{margin-top:4px}
.desk__rail-parts>h2[id]{scroll-margin-top:96px}
.desk__rail-parts ol,.desk__rail-parts ul{padding-left:1.2em}
@media (max-width:900px){
  .desk{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"stage" "rail" "body"}
  .desk__rail{position:static;margin-top:24px}
  .desk__body>.content-cta:first-child{margin-top:24px}
}
/* Beside the rail, the locked panel's top lines up with the parts list's. */
@media (min-width:901px){.desk__body>.content-cta:first-child{margin-top:0}}

/* 8. Home and listings ----------------------------------------------- */
.hero{padding:104px 0 72px}
.hero__title{font-family:var(--font-display);font-weight:500;font-size:clamp(54px,9vw,118px);line-height:.95;letter-spacing:-.015em;max-width:12ch}
.hero__title em{font-style:italic;color:var(--accent)}
.hero__lede{margin-top:28px;max-width:50ch;font-size:18px;line-height:1.55;color:var(--text-lead)}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero__verse{max-width:62ch;margin:64px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.hero__verse p{font-family:var(--font-display);font-style:italic;font-size:clamp(21px,2.4vw,26px);line-height:1.35;color:var(--text-lead)}
.hero__verse cite{display:block;margin-top:14px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

.featured{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-block:24px 72px}
.featured__media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.featured__title{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.01em}
.featured__title a{text-decoration:none}
.featured__title a:hover{color:var(--accent-hover)}
.featured__excerpt{margin:16px 0 18px;font-size:16.5px;color:var(--text-lead)}
.featured:not(:has(.featured__media)){grid-template-columns:1fr}

.home-section{padding:72px 0}
.home-section--band{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.home-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}

.home-mentorship{background:var(--close-bg);border-block:1px solid var(--line-soft)}
.home-mentorship__in{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.home-mentorship__text{max-width:52ch;color:var(--close-dim)}
.home-mentorship__price{margin-bottom:12px;font-size:14px;font-weight:600;color:var(--close-text)}

.site-main>.card-grid{padding-bottom:88px}
.pagination{display:flex;align-items:center;justify-content:center;gap:18px;padding:0 var(--gutter) 88px;font-size:13.5px;color:var(--stone)}
.page-head .btn{margin-top:24px}

@media (max-width:900px){.featured{grid-template-columns:1fr;gap:24px}}
@media (max-width:620px){.hero{padding:64px 0 48px}.hero__verse{margin-top:44px}.home-section{padding:56px 0}}
.page-verse{max-width:calc(var(--narrow) + 2 * var(--gutter));margin:0 auto 40px;padding:28px var(--gutter);border-block:1px solid var(--line)}
.page-verse p{font-family:var(--font-display);font-style:italic;font-size:clamp(22px,2.6vw,28px);line-height:1.35;color:var(--text)}
.page-verse cite{display:block;margin-top:14px;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.tier{max-width:calc(var(--narrow) + 2 * var(--gutter));margin:0 auto 48px;padding:32px;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent-fill);border-radius:var(--radius)}
.tier__name{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,4.4vw,48px);line-height:1}
.tier__description{margin-top:12px;color:var(--text-lead)}
.tier__benefits{display:grid;gap:10px;margin:24px 0 28px;padding:0;list-style:none}
.tier__benefits:last-child{margin-bottom:0}
.tier__benefits li{position:relative;padding-left:24px;color:var(--text-feat)}
.tier__benefits li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--accent)}
.tier__prices{display:flex;flex-wrap:wrap;gap:12px}
.tier__subscribed{color:var(--text-lead)}
@media (max-width:620px){.tier{padding:22px;margin-inline:var(--gutter)}}

/* 9. Editor cards ---------------------------------------------------- */
.gh-content figure{margin-inline:0}
.gh-content figcaption{margin-top:10px;font-size:13.5px;color:var(--stone);text-align:center}
.gh-content .kg-image{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:var(--radius)}
.gh-content .kg-width-full .kg-image{width:100%;border-radius:0}
.gh-content .kg-gallery-image img{display:block;width:100%;height:100%;object-fit:cover}
.gh-content .kg-embed-card iframe{width:100%;height:auto;aspect-ratio:16/9;border:0}

.gh-content blockquote:not([class]){padding-left:24px;border-left:2px solid var(--accent-fill);font-family:var(--font-display);font-style:italic;font-size:clamp(22px,2.4vw,27px);line-height:1.35;color:var(--text)}
.gh-content .kg-blockquote-alt{padding:0 8%;text-align:center;font-family:var(--font-display);font-style:italic;font-size:clamp(26px,3.2vw,36px);line-height:1.25;color:var(--text)}
.gh-content hr{height:1px;margin-block:2.4em;border:0;background:var(--line)}
.gh-content pre{padding:18px 20px;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;line-height:1.55;color:var(--text)}
.gh-content :not(pre)>code{padding:1px 6px;background:var(--bg-2);border-radius:var(--radius);font-size:.9em}

.gh-content .kg-callout-card{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent-fill);border-radius:var(--radius)}
.gh-content .kg-callout-text{color:var(--text-feat)}

.gh-content .kg-toggle-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
.gh-content .kg-toggle-heading-text{font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--text)}
.gh-content .kg-toggle-card-icon{color:var(--text-feat)}
.gh-content .kg-toggle-card-icon svg path{fill:none;stroke:currentColor;stroke-width:1.5}
.gh-content .kg-toggle-content{color:var(--text-feat)}

.gh-content .kg-bookmark-card .kg-bookmark-container{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;color:var(--text)}
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover{background:var(--surface);color:var(--text);border-color:var(--accent)}
.gh-content .kg-bookmark-description,.gh-content .kg-bookmark-metadata{color:var(--text-feat)}

.gh-content .kg-file-card .kg-file-card-container{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text)}
.gh-content .kg-file-card .kg-file-card-container:hover{border-color:var(--accent)}
/* Ghost dims the caption, the file name and the file size with opacity. The theme sets their
   colour now, so the dimming only costs contrast: stone on the card surface already meets 4.5:1. */
.gh-content .kg-file-card-caption,.gh-content .kg-file-card-metadata,
.gh-content .kg-file-card-filename,.gh-content .kg-file-card-filesize{color:var(--stone);opacity:1}

.gh-content .kg-audio-card{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
/* Ghost ships no CSS for its own video card, so the container collapses to nothing and the player
   never draws a transport. The theme has to size it. Authors are told to use the media markup from
   the spec instead, but a card they can insert from the editor must still work. */
.gh-content .kg-video-card .kg-video-container{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radius);overflow:hidden}
.gh-content .kg-video-card video{display:block;width:100%;height:100%;object-fit:contain;border-radius:var(--radius)}
.gh-content .kg-audio-title,.gh-content .kg-audio-current-time,.gh-content .kg-audio-duration{color:var(--text)}
/* Ghost's audio and video cards render their mute buttons at 20x16, under the 24px minimum target
   size of WCAG 2.2. The buttons are Ghost's markup; their size is the theme's to set. */
.gh-content .kg-audio-card .kg-audio-unmute-icon,
.gh-content .kg-audio-card .kg-audio-mute-icon,
.gh-content .kg-video-card .kg-video-unmute-icon,
.gh-content .kg-video-card .kg-video-mute-icon{min-width:24px;min-height:24px;place-content:center}
/* Ghost zeroes the outline on its player sliders and its sign-up field, so a keyboard user cannot
   see which control they are on. cards.min.css loads after this file and its selectors carry the
   same weight as the theme's :focus-visible rule, so it wins on order alone. These selectors add
   the attribute or the class that outweighs it rather than reaching for !important. */
.gh-content .kg-video-card input[type=range]:focus-visible,
.gh-content .kg-audio-card input[type=range]:focus-visible,
.gh-content .kg-signup-card .kg-signup-card-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* The player's own transport sits under the same minimum: the play and pause buttons are 20x20,
   the playback-rate button is 20x16, and the large play overlay is 16x16 inside its circle. */
.gh-content .kg-video-card .kg-video-play-icon,
.gh-content .kg-video-card .kg-video-pause-icon,
.gh-content .kg-video-card .kg-video-playback-rate,
.gh-content .kg-video-card .kg-video-large-play-icon{min-width:24px;min-height:24px;place-content:center}

.gh-content .kg-button-card .kg-btn{border-radius:var(--radius);font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.gh-content .kg-button-card .kg-btn-accent{background:var(--accent-fill);color:var(--on-accent)}
.gh-content .kg-header-card.kg-style-dark{background:var(--bg-2);border-block:1px solid var(--line-soft)}
.gh-content .kg-header-card-header{font-family:var(--font-display);font-weight:500;color:var(--text)}
.gh-content .kg-header-card-subheader{color:var(--text-lead)}

/* Ghost's sign-up card ships a white field and a grey button, which on this theme left white text
   on a white field. It takes the theme's surface, field and button colours unless the author picks
   their own in the editor, which Ghost writes as an inline style and so still wins. */
.gh-content .kg-signup-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.gh-content .kg-signup-card-heading{color:var(--text)}
.gh-content .kg-signup-card-subheading{color:var(--text-lead)}
.gh-content .kg-signup-card-input{background:var(--field-bg);border:1px solid var(--field-line);color:var(--text)}
.gh-content .kg-signup-card-input::placeholder{color:var(--stone)}
.gh-content .kg-signup-card-button{background:var(--accent-fill);color:var(--on-accent);border-radius:var(--radius)}
.gh-content .kg-signup-card-button:hover{background:var(--accent-fill-hover)}