/* ===========================================================================
   The Grid — brand layer for the Ghost blog at gridapp.io/articles
   ---------------------------------------------------------------------------
   Loaded AFTER the theme's screen.css so it wins on equal specificity.
   Every value here is lifted from the marketing site's design system
   (tailwind.config.ts + app/globals.css in grid-banding-pages), so the blog and
   gridapp.io read as one property:

     navy #26345E ink and surfaces · ONE magenta #D42D60 action per viewport
     teal #00A69D for secondary emphasis · hairline rules, never heavy borders
     navy-tinted neutrals only — no pure #fff / #000
     Bricolage Grotesque (display) / Schibsted Grotesk (body) / Spline Sans Mono

   The single-magenta law is why links, tags and buttons here are navy or teal:
   magenta is reserved for the one primary action in view (the subscribe CTA).
   =========================================================================== */

:root {
  /* --- brand palette ---------------------------------------------------- */
  --grid-navy: #26345e;
  --grid-navy-deep: #1b2543;
  --grid-navy-darkest: #151d34;
  --grid-navy-100: #dfe4ef;
  --grid-navy-300: #9aa6c6;
  --grid-magenta: #d42d60;
  --grid-magenta-600: #b8244f;
  --grid-teal: #00a69d;
  --grid-teal-100: #dff4f2;
  --grid-teal-600: #007a73; /* AA-contrast teal for text */
  --grid-paper: #fbfbfd;
  --grid-mist: #f3f5f9;
  --grid-ink: #18191f;
  --grid-muted: #515d7e;
  --grid-line: #e9ebef;

  /* --- radius scale (6 / 10 / 16) --------------------------------------- */
  --grid-r-sm: 6px;
  --grid-r-md: 10px;
  --grid-r-lg: 16px;

  /* --- remap the theme's own tokens -------------------------------------- */
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-serif-alt: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ghost's admin-configurable font slots — pin them so a settings change
     cannot silently drop the brand faces. */
  --gh-font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --gh-font-body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  --color-primary-text: var(--grid-ink);
  --color-secondary-text: var(--grid-muted);
  --color-border: var(--grid-line);
  --color-dark-border: rgba(38, 52, 94, 0.35);
  --color-darker-gray: var(--grid-ink);
  --color-dark-gray: var(--grid-muted);
  --color-light-gray: var(--grid-line);
  --color-lighter-gray: var(--grid-mist);
  --color-white: var(--grid-paper);

  --background-color: var(--grid-paper);
  --ghost-accent-color: var(--grid-navy);

  --container-width: 1200px;
}

/* --- ground ------------------------------------------------------------- */
html,
body {
  background-color: var(--grid-paper);
  color: var(--grid-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--grid-navy);
  color: var(--grid-paper);
}

/* Focus ring is navy — magenta stays reserved for primary actions. */
:focus-visible {
  outline: 2px solid var(--grid-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- typography --------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.gh-article-title,
.gh-card-title {
  font-family: var(--gh-font-heading);
  color: var(--grid-navy);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.gh-article-title,
.gh-article-title.is-title {
  color: var(--grid-navy);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.gh-article-image img {
  border-radius: var(--grid-r-lg);
}

.gh-article-author-name {
  color: var(--grid-navy);
  font-weight: 500;
}

.gh-article-excerpt,
.gh-card-excerpt {
  color: var(--grid-muted);
  font-family: var(--font-sans);
}

.gh-content {
  font-family: var(--font-sans);
  color: var(--grid-ink);
}

.gh-content > p,
.gh-content > ul,
.gh-content > ol {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.gh-content a:not(.kg-btn):not(.kg-nft-card-container) {
  color: var(--grid-navy);
  text-decoration-color: var(--grid-teal);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.gh-content a:hover {
  color: var(--grid-teal-600);
}

.gh-content blockquote {
  border-left: 3px solid var(--grid-teal);
  color: var(--grid-navy);
  font-family: var(--gh-font-heading);
  font-style: normal;
}

.gh-content code,
.gh-content pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.gh-content code {
  background: var(--grid-mist);
  border: 1px solid var(--grid-line);
  border-radius: var(--grid-r-sm);
  color: var(--grid-navy-deep);
}

.gh-content pre {
  background: var(--grid-navy-darkest);
  border-radius: var(--grid-r-md);
}

.gh-content figcaption {
  color: var(--grid-muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.gh-content img,
.gh-content .kg-image {
  border-radius: var(--grid-r-md);
}

/* --- header (Source uses .gh-navigation-*, not .gh-head-*) -------------- */
.gh-navigation {
  background-color: var(--grid-paper);
  border-bottom: 1px solid var(--grid-line);
  font-family: var(--font-sans);
  /* The theme sets nav links to `color: inherit` at higher specificity
     (.gh-navigation :is(...)), so colouring them individually is ignored.
     Setting the colour here is what actually reaches them. */
  color: var(--grid-navy);
}

.gh-navigation-brand,
.gh-navigation-logo,
.gh-navigation-logo a {
  color: var(--grid-navy);
  font-family: var(--gh-font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.gh-navigation-menu a,
.gh-navigation-menu .nav a {
  color: var(--grid-navy);
  font-weight: 500;
}

.gh-navigation-menu a:hover,
.gh-navigation-actions a:hover {
  color: var(--grid-teal-600);
}

.gh-navigation-actions .gh-icon-button,
.gh-navigation .gh-search {
  color: var(--grid-navy);
}

/* The single magenta action in view — members subscribe. Nothing competes. */
.gh-navigation-members a[href*="signup"],
.gh-navigation-members a[href*="portal"],
.gh-navigation-members .gh-button {
  background-color: var(--grid-magenta);
  border-color: var(--grid-magenta);
  border-radius: var(--grid-r-sm);
  color: #ffffff;
  font-weight: 500;
}

.gh-navigation-members a[href*="signup"]:hover,
.gh-navigation-members a[href*="portal"]:hover,
.gh-navigation-members .gh-button:hover {
  background-color: var(--grid-magenta-600);
  border-color: var(--grid-magenta-600);
  color: #ffffff;
}

/* --- eyebrow / meta / tags --------------------------------------------- */
.gh-article-meta,
.gh-article-meta-content,
.gh-article-meta-date,
.gh-article-meta-length,
.gh-card-meta,
.gh-card-date,
.gh-article-meta a,
.gh-card-meta a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grid-teal-600);
}

.gh-article-meta a:hover,
.gh-card-meta a:hover,
.gh-card-link:hover .gh-card-title {
  color: var(--grid-navy);
}

/* --- cards: hairline rules, not heavy boxes ---------------------------- */
.gh-card,
.gh-card-wrapper {
  border-radius: var(--grid-r-md);
}

.gh-card-image,
.gh-card img {
  border-radius: var(--grid-r-md);
}

.gh-card-excerpt {
  color: var(--grid-muted);
}

.gh-card-author,
.gh-card-date {
  color: var(--grid-muted);
}

.gh-card-title {
  letter-spacing: -0.02em;
}

.gh-card:hover .gh-card-title,
.gh-card-link:hover .gh-card-title {
  color: var(--grid-teal-600);
}

/* --- buttons ------------------------------------------------------------ */
.gh-button,
.kg-btn,
button.gh-form-input-btn {
  background-color: var(--grid-navy);
  border-radius: var(--grid-r-sm);
  color: var(--grid-paper);
  font-family: var(--font-sans);
  font-weight: 500;
}

.gh-button:hover,
.kg-btn:hover {
  background-color: var(--grid-navy-deep);
  color: var(--grid-paper);
}

/* --- CTA / subscribe band ---------------------------------------------- */
.gh-cta,
.gh-subscribe {
  background-color: var(--grid-navy);
  border-radius: var(--grid-r-lg);
  color: var(--grid-paper);
}

.gh-cta h2,
.gh-subscribe h2,
.gh-cta p,
.gh-subscribe p {
  color: var(--grid-paper);
}

/* --- footer ------------------------------------------------------------- */
.gh-foot {
  background-color: var(--grid-navy-darkest);
  border-top: 0;
  color: var(--grid-navy-300);
  font-family: var(--font-sans);
}

.gh-foot a,
.gh-foot .gh-foot-menu a {
  color: var(--grid-navy-100);
}

.gh-foot a:hover {
  color: var(--grid-paper);
}

/* On the dark footer a navy focus ring would vanish — flip to paper. */
.gh-foot :focus-visible {
  outline-color: var(--grid-paper);
}

/* --- pagination / load more -------------------------------------------- */
.gh-more,
.gh-pagination a {
  border: 1px solid var(--grid-line);
  border-radius: var(--grid-r-sm);
  color: var(--grid-navy);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gh-more:hover,
.gh-pagination a:hover {
  background: var(--grid-mist);
  border-color: var(--grid-navy);
}

/* --- tag / archive header ---------------------------------------------- */
.gh-header,
.gh-archive-header {
  border-bottom: 1px solid var(--grid-line);
}

.gh-header-title,
.gh-archive-title {
  color: var(--grid-navy);
  font-family: var(--gh-font-heading);
}

.gh-header-description {
  color: var(--grid-muted);
}

/* --- motion: honour the OS preference ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- collection headers (academy / support) ----------------------------- */
/* Source's index feed ships no page header, so these pages had no H1 at all.
   The templates add one; this gives it the marketing site's hierarchy. */
.gh-collection-header {
  border-bottom: 1px solid var(--grid-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  padding-top: 24px;
}

.gh-collection-eyebrow {
  color: var(--grid-teal-600);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.gh-collection-title {
  color: var(--grid-navy);
  font-family: var(--gh-font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.gh-collection-description {
  color: var(--grid-muted);
  margin: 0;
  max-width: 60ch;
}

/* ===========================================================================
   Home: masthead + section register
   ---------------------------------------------------------------------------
   Source opened on an empty grey cover band carrying Ghost's placeholder
   tagline. This replaces it with a statement and a register of the four
   sections — the posture of the product's own Discovery table rather than a
   magazine hero.
   =========================================================================== */

/* Own container. Deliberately NOT .gh-canvas: that element defines its own
   named-column grid (`.gh-canvas > * { grid-column: main }`), so putting a
   second display:grid on the same element collapses the layout. */
.grid-band {
  padding-inline: max(4vmin, 20px);
}

/* The masthead shares the post list's 720px reading column so the page has one
   left edge all the way down. The register deliberately breaks that column --
   it is navigation, not reading -- and signals the break by running its rules
   the full width rather than stopping short of it. */
.grid-band-inner {
  margin-inline: auto;
  max-width: var(--content-width, 720px);
  width: 100%;
}

.grid-band--wide .grid-band-inner {
  max-width: var(--container-width);
}

/* Aligned to the same 1200px frame as the logo and the register (.gh-inner),
   NOT to the post feed. The feed carries its own narrower reading measure, so
   chasing it would have produced a third left edge. Two edges — outer frame
   and reading column — is the hierarchy; three is an accident. */
.grid-masthead {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px);
}

.grid-eyebrow {
  color: var(--grid-teal-600);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.grid-masthead-title {
  color: var(--grid-navy);
  max-width: 15ch;
  font-family: var(--gh-font-heading);
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  margin: 0;
  text-wrap: balance;
}

.grid-masthead-lede {
  color: var(--grid-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0;
  max-width: 58ch;
}

/* --- the register ------------------------------------------------------- */
.grid-band--register {
  border-block: 1px solid var(--grid-line);
  margin-bottom: clamp(48px, 6vw, 80px);
  padding-inline: 0;
}

.grid-register {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--container-width);
}

.grid-register-item {
  border-left: 1px solid var(--grid-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 22px 28px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.grid-register-item:first-child {
  border-left: 0;
}

.grid-register-item:hover {
  background-color: var(--grid-mist);
}

/* The count is the readout — mono, tabular, the product's own voice. */
.grid-register-count {
  color: var(--grid-navy);
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}

.grid-register-name {
  color: var(--grid-navy);
  font-family: var(--gh-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.grid-register-item:hover .grid-register-name {
  color: var(--grid-teal-600);
}

.grid-register-desc {
  color: var(--grid-muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

@media (max-width: 880px) {
  .grid-register {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-register-item:nth-child(3) {
    border-left: 0;
  }
  .grid-register-item:nth-child(n + 3) {
    border-top: 1px solid var(--grid-line);
  }
}

@media (max-width: 520px) {
  .grid-register {
    grid-template-columns: 1fr;
  }
  .grid-register-item {
    border-left: 0;
  }
  .grid-register-item + .grid-register-item {
    border-top: 1px solid var(--grid-line);
  }
}

/* ---------------------------------------------------------------------------
   Header actions — exactly one magenta action in view.
   Source rendered Sign in and Subscribe as two buttons, so the header carried
   two competing primaries. Sign in is demoted to a quiet link.
   --------------------------------------------------------------------------- */
.grid-nav-signin,
.grid-nav-back {
  background: none !important;
  border: 0 !important;
  color: var(--grid-muted) !important;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0 !important;
  white-space: nowrap;
}

.grid-nav-signin:hover,
.grid-nav-back:hover {
  color: var(--grid-navy) !important;
}

.grid-nav-back {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.grid-nav-subscribe {
  background-color: var(--grid-magenta) !important;
  border-color: var(--grid-magenta) !important;
  border-radius: var(--grid-r-sm);
  color: #ffffff !important;
  font-weight: 500;
}

.grid-nav-subscribe:hover {
  background-color: var(--grid-magenta-600) !important;
  border-color: var(--grid-magenta-600) !important;
}

@media (max-width: 720px) {
  .grid-nav-back {
    display: none;
  }
}

/* --- post rows: a register, not a magazine feed ------------------------- */
.gh-postlist-title,
.post-list-title {
  color: var(--grid-navy);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- reading size ------------------------------------------------------- */
/* Source's base is 1.6rem against a 62.5% root (=16px). Against the display
   sizes above that reads undersized, so the article body steps up to the
   marketing site's 17px body token with matching leading. */
.gh-content,
.gh-content p,
.gh-content li {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.gh-content h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  margin-top: 2em;
}

.gh-content h3 {
  font-size: clamp(1.2rem, 2vw, 1.375rem);
  margin-top: 1.6em;
}

.gh-article-meta-content,
.gh-article-meta-date,
.gh-article-meta-length {
  color: var(--grid-muted);
}