/* =========================================================================
   ChadKar.com overrides for Naoto 1.2.0
   Loaded after screen.css from default.hbs.
   Everything here exists because Ghost admin cannot reach it.
   To roll back: delete this file and remove the matching <link> in default.hbs.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Metadata contrast
   Naoto ships --tertiary-text-color: rgba(5,5,5,.5) = 3.84:1 on white.
   WCAG AA needs 4.5:1 for body-size text. 0.58 gives 5.10:1 and keeps
   metadata visibly quieter than body copy.
   Dark mode ships rgba(255,255,255,.45) = 4.48:1, a hair under. 0.55 = 6.06:1.
   ------------------------------------------------------------------------- */
:root {
  --tertiary-text-color: rgba(5, 5, 5, 0.58);
}

/* -------------------------------------------------------------------------
   2. Accent per theme
   Ghost's accent colour is a single hex. #1F4B99 is 8.3:1 on white but only
   2.1:1 on the dark ground (#17191E), so links, active TOC items and card
   accents become unreadable in dark mode. #8FB4E8 is 8.3:1 on dark.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --tertiary-text-color: rgba(255, 255, 255, 0.55);
  --brand-color: #8FB4E8;
}

/* Primary buttons take their label from --primary-text-color-invert, which
   stays near-white in both themes. With a light accent behind it, that label
   has to flip to ink or the button is unreadable. */
:root[data-theme="dark"] .button.button-primary {
  color: #17191E;
}

/* -------------------------------------------------------------------------
   3. Professional boundary statement
   Rendered by partials/footer.hbs. Naoto's footer has no content slot, so
   the markup is added in the template and styled here.
   ------------------------------------------------------------------------- */
.ck-boundary {
  max-width: 60rem;
  margin: 2.4rem auto 0;
  padding: 0 2rem;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--tertiary-text-color);
  text-align: center;
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   4. Reading comfort in long-form posts
   Naoto sets body copy at 18px/1.5. At a 600px measure that is tight for
   1500-word essays. 1.65 costs nothing and measurably improves readability.
   Scoped to article body only so cards, nav and metadata are untouched.
   ------------------------------------------------------------------------- */
.single-content .gh-content p,
.single-content .gh-content li {
  line-height: 1.65;
}

/* -------------------------------------------------------------------------
   5. Section headings on a text-only feed
   With feature images off, the feed relies entirely on type. Give the
   uppercase section labels slightly more air so they read as labels
   rather than as shouting.
   ------------------------------------------------------------------------- */
.section-title {
  letter-spacing: 1.6px;
}

/* -------------------------------------------------------------------------
   6. Skip link
   Naoto ships no skip-to-content link. Added in default.hbs; styled here.
   Visible only on keyboard focus.
   ------------------------------------------------------------------------- */
.ck-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 1.2rem 1.8rem;
  background: var(--background-color);
  color: var(--primary-text-color);
  border: 2px solid var(--brand-color);
  border-radius: var(--radius-small);
  font-size: 1.5rem;
  text-decoration: none;
}

.ck-skip-link:focus {
  left: 1.6rem;
  top: 1.6rem;
}

/* =========================================================================
   CK-05 — Editorial refinement pass (September 2026)
   Added after the live audit. Typography, section rhythm and card
   differentiation only. No layout, colour or structural changes.
   To roll back: delete everything below this banner.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. The hero is the thesis of the page
   Naoto renders it at 2.8rem/600 in the body sans, which is the same weight
   as a post title further down. With Ghost's heading font now set to a serif,
   the opening statement should be the largest and quietest thing on the page.
   ------------------------------------------------------------------------- */
.hero-intro {
  padding-top: 3.2rem;
  padding-bottom: 1.6rem;
}

.hero-intro .gh-content h1,
.hero-intro h1 {
  font-size: clamp(2.9rem, 4.4vw, 4.4rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  font-weight: 500;
  max-width: 20ch;
  margin-bottom: 2.4rem;
  text-wrap: balance;
}

.hero-intro .gh-content p {
  max-width: 60ch;
  color: var(--secondary-text-color);
}

/* The hero's own social links need air beneath the statement */
.hero-intro .staff-social-link,
.hero-intro .social-links {
  margin-top: 2.8rem;
}

/* -------------------------------------------------------------------------
   2. Section transitions
   Every homepage section currently starts at the same distance with no
   visual division, so the page reads as one continuous scroll. A hairline
   above each section label makes the divisions deliberate. Cheaper and
   quieter than alternating background bands.
   ------------------------------------------------------------------------- */
.site-main > .section-container,
.content-area .site-main > .section-container {
  padding-top: 4.8rem;
  border-top: 1px solid var(--divider-color);
}

/* The first section after the hero does not need a rule above it */
.site-main > .hero-intro + .section-container {
  border-top: 0;
  padding-top: 0;
}

/* Section labels: give them room to read as labels rather than headings */
.section-title {
  color: var(--secondary-text-color);
  margin-bottom: 0.8rem;
}

/* -------------------------------------------------------------------------
   3. Frameworks — read as an index, not as three identical cards
   ------------------------------------------------------------------------- */
.section-blocks .card-project,
.section-blocks .kg-grid > * {
  border-radius: 0;
  box-shadow: none;
}

.section-blocks .card-project {
  padding-top: 1.6rem;
  border-top: 1px solid var(--divider-color);
}

/* -------------------------------------------------------------------------
   4. Selected work — fewer, larger items need more separation than a grid gap
   ------------------------------------------------------------------------- */
.section-showcase .single-column .card-project + .card-project {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid var(--divider-color);
}

/* -------------------------------------------------------------------------
   5. Experience — a ruled list reads as a career, a stack of cards does not
   ------------------------------------------------------------------------- */
.tag-hash-section-experiences .kg-product-card + .kg-product-card
  .kg-product-card-container {
  border-top: 1px solid var(--divider-color);
  padding-top: 2rem;
}

.tag-hash-section-experiences .kg-product-card h4.kg-product-card-title {
  line-height: 1.4;
  text-wrap: pretty;
}

.tag-hash-section-experiences .kg-product-card .kg-product-card-description p {
  max-width: 62ch;
}

/* -------------------------------------------------------------------------
   6. Long titles
   Case-study and framework titles run long by design. Stop them setting
   badly in card headings and in the text-only feed.
   ------------------------------------------------------------------------- */
.card-project h2,
.card-project h3,
.card-title,
.loop-title,
.post-card-title {
  text-wrap: pretty;
  letter-spacing: -0.005em;
}

/* -------------------------------------------------------------------------
   7. Mobile: the header carries a lot at 390px
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-intro { padding-top: 2rem; }
  .hero-intro .gh-content h1 { max-width: none; margin-bottom: 1.8rem; }
  .site-main > .section-container,
  .content-area .site-main > .section-container { padding-top: 3.6rem; }
  .section-showcase .single-column .card-project + .card-project {
    margin-top: 2.8rem; padding-top: 2.8rem;
  }
  .tagline { display: none; }
}

/* ================================================================
   CK-06  Footer
   ----------------------------------------------------------------
   Stock Naoto's plain footer is a centred stack: a secondary nav
   column, the site title fitted to the container width by JS and
   printed at 8% opacity, the boundary statement, then a copyright
   line that repeats the site title a second time. Everything sits
   at a similar weight, so nothing reads as primary.

   This gives it a hierarchy instead: the name, the statement it is
   accountable to, where to go next, and a quiet meta row under a
   hairline. Two template changes go with it, both in
   partials/footer.hbs and both labelled CK-06 there:
     - the id on .site-title-footer is removed, so assets/js/main.js
       no longer sets an inline font-size on it
     - the duplicated {{@site.title}} is dropped from the copyright
   ================================================================ */
.site-footer,
.site-footer.footer-plain {
    margin-top: 8rem;
    padding-top: 4.8rem;
    padding-bottom: 3.6rem;
    background: transparent;
    border-top: 1px solid var(--divider-color);
}

/* the stock footer uses .container.medium (600px of content) while the
   page content is 960px; align the two so the footer sits on the grid */
.site-footer > .container,
.site-footer.footer-plain > .container {
    max-width: 111.36rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand links"
        "note  links"
        "meta  meta";
    grid-template-rows: auto 1fr auto;
    column-gap: 8rem;
    align-items: start;
    text-align: left;
}

/* the name, returned to a readable wordmark */
.site-footer .site-title-footer {
    grid-area: brand;
    font-family: Lora, Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--primary-text-color);
    opacity: 1;
    width: auto;
    padding: 0;
    margin: 0 0 1.4rem;
    text-align: left;
    white-space: normal;
}

/* CK-04's boundary statement, sized to actually be read */
.site-footer .ck-boundary {
    grid-area: note;
    margin: 0;
    max-width: 46ch;
    font-size: 1.4rem;
    line-height: 1.65;
    color: var(--secondary-text-color);
    text-align: left;
}

/* secondary navigation, as a column rather than a centred pile */
.site-footer .footer-inner-main { grid-area: links; margin: 0; }
.site-footer .footer-nav { margin: 0; }
.site-footer .footer-nav .nav {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.site-footer .footer-nav .nav li { margin: 0; padding: 0; min-height: 0; }
.site-footer .footer-nav .nav a {
    display: inline-block;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--secondary-text-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer .footer-nav .nav a:hover,
.site-footer .footer-nav .nav a:focus-visible {
    color: var(--primary-text-color);
    border-bottom-color: var(--divider-color);
}

/* meta row: year left, credits right, under a hairline */
.site-footer .footer-copyright {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: 1.2rem;
    row-gap: 0.8rem;
    margin-top: 3.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--divider-color);
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    color: var(--tertiary-text-color);
    text-align: left;
}
.site-footer .footer-copyright .footer-signature {
    margin-left: auto;
    font-size: inherit;
    color: inherit;
}
.site-footer .footer-copyright .badge {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.site-footer .footer-copyright .badge:hover { border-bottom-color: var(--divider-color); }

@media (max-width: 899px) {
    .site-footer,
    .site-footer.footer-plain { margin-top: 5.6rem; padding-top: 3.6rem; }
    .site-footer > .container,
    .site-footer.footer-plain > .container {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "note" "links" "meta";
        grid-template-rows: auto;
    }
    .site-footer .footer-inner-main { margin-top: 3.2rem; }
    .site-footer .footer-nav .nav { text-align: left; gap: 1.2rem; }
    .site-footer .footer-copyright { margin-top: 3.2rem; }
    .site-footer .footer-copyright .footer-signature { margin-left: 0; }
}

/* ================================================================
   CK-08  Section rhythm on the homepage
   ----------------------------------------------------------------
   The theme already puts --spacepsection (80px) of margin above
   every section. CK-05 then added 48px of padding above the new
   hairline, which made the break between sections 128px with the
   rule sitting off centre: 80px above it, 48px below. Bring the
   margin down so the total is 96px and the rule sits in the middle.
   ================================================================ */
.site-main > .section-container { margin-top: 4.8rem; }

@media (max-width: 767px) {
    .site-main > .section-container { margin-top: 3.2rem; }
}

/* ================================================================
   CK-09  Section break, second pass
   ----------------------------------------------------------------
   CK-05 put the rule on .section-container, which is full width, so
   it ran edge to edge across the window while the content sits in a
   960px column. A page wide band reads as a hard division and makes
   the space around it look like a hole. Inset the rule to the
   content measure and tighten the space to 32px either side.
   The doubled selectors match CK-05's specificity.
   ================================================================ */
.site-main > .section-container,
.content-area .site-main > .section-container {
    border-top: 0;
    position: relative;
    margin-top: 3.2rem;
    padding-top: 3.2rem;
}

.site-main > .section-container::before,
.content-area .site-main > .section-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(96rem, calc(100% - 10vw));
    height: 1px;
    background: var(--ck-rule);
}

.site-main > .hero-intro + .section-container,
.content-area .site-main > .hero-intro + .section-container {
    border-top: 0;
    padding-top: 0;
    margin-top: 3.2rem;
}
.site-main > .hero-intro + .section-container::before { display: none; }

.site-main > .section-container:first-child,
.content-area .site-main > .section-container:first-child {
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 767px) {
    .site-main > .section-container,
    .content-area .site-main > .section-container {
        margin-top: 2.4rem;
        padding-top: 2.4rem;
    }
}

/* ================================================================
   CK-10  Two corrections to the footer redesign
   ----------------------------------------------------------------
   1. The theme colours the footer's links off white because the
      stock footer sits on a dark panel. CK-06 made that panel
      transparent, so in light mode the links were white on white:
      a contrast ratio of 1.0.
   2. Those links carried "transition: color", and their colour comes
      from a custom property. When the theme toggle swaps the token,
      Chrome does not restart the transition, so the link kept the
      previous theme's colour. Transition the underline only.
   3. --divider-color is 6% black in light mode, too faint for a rule
      doing structural work. Use a dedicated token instead.
   ================================================================ */
:root { --ck-rule: rgba(5, 5, 5, 0.14); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --ck-rule: rgba(255, 255, 255, 0.16); }
}

:root[data-theme="dark"] { --ck-rule: rgba(255, 255, 255, 0.16); }

.site-footer .footer-nav .nav li a,
.site-footer.footer-plain .footer-nav .nav li a {
    color: var(--secondary-text-color);
    transition: border-color 0.15s ease;
}
.site-footer .footer-nav .nav li a:hover,
.site-footer .footer-nav .nav li a:focus-visible,
.site-footer.footer-plain .footer-nav .nav li a:hover,
.site-footer.footer-plain .footer-nav .nav li a:focus-visible {
    color: var(--primary-text-color);
    border-bottom-color: var(--ck-rule);
}

.site-footer,
.site-footer.footer-plain { border-top-color: var(--ck-rule); }
.site-footer .footer-copyright { border-top-color: var(--ck-rule); }
.section-blocks .card-project { border-top-color: var(--ck-rule); }
.section-showcase .single-column .card-project + .card-project { border-top-color: var(--ck-rule); }