/* ==========================================================================
   Local overrides and structural layout for the Technique site.
   Loaded after themes/goyo/static/css/main.css; unlayered, so it wins on
   cascade order against the layered theme rules.

   Sections in order:
     - body fonts (Inter, Source Code Pro) and global scrollbar palette
     - navbar / sidebar / TOC / footer chrome
     - Technique syntax-highlighting palette (per token, per theme)
     - landing-page semantic layout (hero / features / content / cta)
     - 404, search modal, gallery / roadmap cards, download buttons
   ========================================================================== */

/* Body font: Inter (rsms). Self-hosted static Regular + Bold (~111 KB / 115 KB).
   Inter ships with vertical metrics that put the baseline low in the line-box,
   so the lowercase x-height sits visibly below the icon centre in flex rows.
   ascent 80% + descent 30% (gap 0) gives ascent − descent = 0.5em, which
   shifts the baseline to where x-height middle lands on the line-box centre
   — i.e. on the icon centre when both are vertically centred. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2");
    ascent-override: 80%;
    descent-override: 30%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Inter-Bold.woff2") format("woff2");
    ascent-override: 80%;
    descent-override: 30%;
    line-gap-override: 0%;
}
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* Suppress the browser's overscroll bounce at page top/bottom. */
html, body {
    overscroll-behavior-y: none;
}

/* `scroll-behavior: auto` so PageUp/PageDown land as instant jumps instead
   of animating over ~470ms. Reserve the scrollbar gutter so navigating
   between short and tall pages doesn't shift centred content sideways. */
html {
    scroll-behavior: auto;
    scrollbar-gutter: stable;
}

/* Scrollbar palette — translucent currentColor thumb on transparent track,
   inherited by every overflow:auto element on the page (including code
   blocks with horizontal overflow). */
:root {
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
}

/* Navbar — fixed strip across the top. Translucent background instead of
   backdrop-blur because Chromium on Linux is slow with large blur values. */
.site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: 4rem;
    border-bottom: 1px solid rgba(107, 114, 128, 0.15);
    padding-left: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: color-mix(in srgb, var(--color-base-100) 80%, transparent);
}
.navbar-brand {
    flex: 1;
    display: flex;
    align-items: center;
}
.navbar-logo {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
    text-decoration: none;
}
.navbar-logo:hover {
    text-decoration: none;
}
.navbar-logo img {
    height: 4.5rem;
    width: auto;
}
.btn-ghost.navbar-title:hover,
.btn-ghost.navbar-tagline:hover {
    text-decoration: none;
}
.navbar-menu-desktop {
    flex: none;
    display: none;
}
.navbar-hamburger {
    flex: none;
}
@media (min-width: 1024px) {
    .navbar-menu-desktop {
        display: flex;
    }
    .navbar-hamburger {
        display: none;
    }
}

/* Left sidebar page links and right TOC entries read cramped at the
   default sizes against Inter's x-height. Nudge both up a step. */
.menu.sidebar a {
    font-size: 0.95rem;
}
.toc-menu a {
    font-size: 0.875rem;
}

/* Monospace font for all code blocks */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/SourceCodePro-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/SourceCodePro-Bold.woff2") format("woff2");
}
pre, code {
    font-family: "Source Code Pro", monospace;
    line-height: 1.3;
}
code {
    font-size: 1em;
}
/* Inline code. Inter x-height 0.55, Source Code Pro 0.49 → 1.08 scale
   to keep x-height aligned with surrounding prose. Soft wash background
   marks the span without the heavy chip outline; padding-block: 0
   keeps the wash within the line-box so it can't collide with adjacent
   lines. Per-theme `color` and `background` in the rules below. */
:not(pre) > code {
    font-size: 1.08em;
    line-height: 1.0;
    padding-block: 0 0.05em;
    padding-inline: 0.1em;
    border-radius: 0.2rem;
    white-space: nowrap;
}
[data-theme="goyo-light"] :not(pre) > code {
    background: rgba(100, 116, 139, 0.05);
    border: none;
}
[data-theme="goyo-dark"] :not(pre) > code {
    background: rgba(100, 116, 139, 0.10);
    border: none;
}

/* Constrain <main> so a long line in a <pre> can't blow out the grid column.
   The content grid uses `1fr 250px`; grid items default to `min-width: auto`
   (their intrinsic content width), so a 1200px URL inside <pre> pushes the
   1fr track wider than the viewport and the page scrolls horizontally
   instead of the <pre> scrolling internally. `min-width: 0` is the standard
   grid/flex fix. */
main.prose {
    min-width: 0;
}

/* Mobile: trim the chunky padding. (Earlier this rule also shrank font-size
   to 0.85em on `pre, code`, but applying that selector to both `<pre>` and
   its child `<code>` compounded — pre code rendered at 0.7225em of root, far
   smaller than intended. Removed; pre/code now inherit at 1em on mobile,
   keeping the 8% inline/block gap consistent with desktop.) */
@media (max-width: 767px) {
    pre {
        padding: 0.75rem;
    }
    /* Navbar scrolls off the top on mobile (not fixed). Reclaims ~64px of
       viewport while reading. Menu returns when user scrolls back to top.
       Matching .site-content { padding-top: 0 } lives next to that rule below. */
    .site-navbar {
        position: static;
    }
    /* Honor literal newlines inside section headings on mobile so a triad
       like "Write it.\nRead it.\nRun it." breaks one beat per line here,
       while collapsing back to spaces (one line) on wider viewports.
       Scoped to .hero-title (the inner span) so surrounding template
       whitespace/indentation inside the <h2> doesn't render as extra lines. */
    main.prose h2 .hero-title {
        white-space: pre-line;
    }
}

/* Code block container: light background before JS runs (FOUC mitigation) */
pre:has(> code.language-technique),
pre:has(> code[data-lang="technique"]) {
    background-color: #eeeeec;
    border-radius: 4px;
}

[data-theme="goyo-dark"] pre:has(> code.language-technique),
[data-theme="goyo-dark"] pre:has(> code[data-lang="technique"]) {
    background-color: #1a1f2e;
}

/* --- light theme (default) --- */
.technique-constructor {
    color: #3465a4;
    font-weight: bold;
} /* procedure names    – blue      */
.technique-type {
    color: #8f5902;
    font-weight: bold;
} /* forma / types      – sienna    */
.technique-variable {
    color: #729fcf;
    font-weight: bold;
} /* parameters         – sky blue  */
.technique-function {
    color: #3b5d7d;
    font-weight: bold;
} /* invocations        – dark blue */
.technique-keyword {
    color: #75507b;
    font-weight: bold;
} /* repeat/foreach/in  – purple    */
.technique-number {
    color: #ad7fa8;
    font-weight: bold;
} /* numeric literals   – lavender  */
.technique-string {
    color: #4e9a06;
    font-weight: bold;
} /* string content     – green     */
.technique-label {
    color: #60989a;
    font-weight: bold;
} /* tablet labels      – teal      */
.technique-embedded {
    color: #c4a000;
    font-weight: bold;
} /* embedded lang tag  – amber     */
.technique-variant {
    color: #f57900;
    font-weight: bold;
} /* response values    – orange    */
.technique-attribute {
    color: #000000;
    font-weight: bold;
} /* @role ^place       – black     */
.technique-title {
    color: #000000;
    font-weight: bold;
} /* title text, steps  – black     */
.technique-preproc {
    color: #75507b;
} /* metadata, # marker – purple    */
.technique-punctuation {
    color: #999999;
    font-weight: bold;
} /* structural chars   – gray      */

/* --- dark theme --- */
[data-theme="goyo-dark"] .technique-constructor {
    color: #6fa3e0;
}
[data-theme="goyo-dark"] .technique-type {
    color: #c48a1e;
}
[data-theme="goyo-dark"] .technique-variable {
    color: #93c5fd;
}
[data-theme="goyo-dark"] .technique-function {
    color: #7aafd4;
}
[data-theme="goyo-dark"] .technique-keyword {
    color: #c084d4;
}
[data-theme="goyo-dark"] .technique-number {
    color: #d4b8d0;
}
[data-theme="goyo-dark"] .technique-string {
    color: #7ac520;
}
[data-theme="goyo-dark"] .technique-label {
    color: #7ecaca;
}
[data-theme="goyo-dark"] .technique-embedded {
    color: #e8c84a;
}
[data-theme="goyo-dark"] .technique-variant {
    color: #ff9b30;
}
[data-theme="goyo-dark"] .technique-attribute {
    color: #e2e8f0;
}
[data-theme="goyo-dark"] .technique-title {
    color: #e2e8f0;
}
[data-theme="goyo-dark"] .technique-preproc {
    color: #c084d4;
}
[data-theme="goyo-dark"] .technique-punctuation {
    color: #94a3b8;
}

/* ==========================================================================
   End Technique syntax highlighting
   ========================================================================== */

/* Landing-page section headings are positioned by the section header's
   margin-bottom, so the theme's 4rem h2 margin-top (designed for prose
   article flow) just inflates the gap between sections. */
.landing-section-header h2 {
    margin-top: 0;
}

/* Landing section vertical rhythm — features/content/CTA wrappers stacked
   alternately. The trimmed values keep stacked sections from doubling the
   visual gap (each contributes top + bottom padding). */
.landing-section {
    position: relative;        /* containing block for the overlay + cta backgrounds */
    padding-top: 4rem;
    padding-bottom: 1rem;
}
@media (min-width: 768px) {
    .landing-section {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }
}

/* CTA section wants a touch more breathing room above its heading —
   the boxed gradient background reads as a distinct container, so the
   trimmed 1rem feels cramped here. */
.landing-section--cta {
    padding-top: 2rem;
}
@media (min-width: 768px) {
    .landing-section--cta {
        padding-top: 4rem;
    }
}

/* Optical-centre the arrow in the CTA buttons. Flex align-items: center puts
   the svg on the line-box geometric centre, but the button labels have no
   descenders so their optical centre sits a hair above that. Nudge up 1px. */
.btn-final-cta-section svg {
    transform: translateY(-1px);
}

/* Remove rounded corners on blockquotes */
blockquote {
    border-radius: 0;
}

/* Inherit text colour for emphasis (otherwise gets the primary/blue) */
em {
    color: inherit;
}

/* Indent lists so bullets aren't flush with the left margin */
main ul {
    padding-left: 1.5em;
}

/* Remove paragraph margins inside list items (24px is too much). */
main ul li p,
main ol li p {
    margin-top: 0;
    margin-bottom: 0;
}

.navbar-tagline {
    display: none;
    font-size: 1rem;
}
@media (min-width: 1024px) {
    .navbar-tagline {
        display: inline-flex;
    }
}
/* Landing page overrides the mobile-hide so the tagline shows there too. */
.navbar-tagline.navbar-tagline--always {
    display: inline-flex;
}

/* Mobile-only site-name next to the logo — matches .navbar-tagline size so
   it reads as wayfinding, not a headline. Hidden on desktop where the
   tagline takes its place. */
.navbar-title {
    display: inline-flex;
    font-size: 1rem;
}
@media (min-width: 1024px) {
    .navbar-title {
        display: none;
    }
}

/* Right TOC rail — desktop-only sticky column with a left divider rule.
   Heading "ON THIS PAGE" is always hidden; rail is hidden below lg. */
.toc-rail {
    display: none;
}
@media (min-width: 1024px) {
    .toc-rail {
        display: block;
    }
}
.toc-rail-inner {
    position: sticky;
    top: 5rem;
    padding: 0.5rem 1rem;
    border-left: 1px solid rgba(107, 114, 128, 0.15);
}
.toc-rail-inner > h4 {
    display: none;
}

/* Page footer: right-aligned, low-contrast legal line. No divider rule, no
   surrounding whitespace — sits quietly below the content. Colour is tuned
   per theme to sit close to the page background so the line recedes. */
.site-footer {
    text-align: right;
    padding: 0 1rem 0.7rem;
}
.site-footer p {
    margin: 0 0 0 auto;
    max-width: 14.5rem;
    font-size: 0.60rem;
}
@media (min-width: 640px) {
    .site-footer p {
        max-width: none;
        font-size: 0.70rem;
    }
}

/* "On to <section>" button title — section icon + section name on one line. */
.nav-button-title--with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-button-title--with-icon .icon {
    font-size: 1rem;
}

/* Sidebar current-location indicator: a 3px stripe down the left edge of
   the active item's anchor (not the <li>, which would extend through any
   expanded children). Inset box-shadow draws the stripe without affecting
   layout. */
li.sidebar-active > a {
    box-shadow: inset 3px 0 0 0 #4e9a06;
    border-radius: 0;
    font-weight: bold;
}
[data-theme="goyo-dark"] li.sidebar-active > a {
    box-shadow: inset 3px 0 0 0 #7ac520;
}

[data-theme="goyo-dark"] .site-footer p {
    color: #324359;
}
[data-theme="goyo-light"] .site-footer p {
    color: #c0cad8;
}

/* Landing page has no outer wrapper padding (interior pages use .page-shell).
   Add breathing room below landing content so the footer isn't flush
   against the last hero/CTA block. */
.landing-main {
    padding-bottom: 2rem;
}

/* Responsive prose font size — 16px / 18px / 20px at mobile / md / lg
   breakpoints (768 / 1024). */
main.prose,
main.prose p {
    font-size: 1rem;        /* 16px — mobile */
}
@media (min-width: 768px) { /* md */
    main.prose,
    main.prose p {
        font-size: 1.125rem; /* 18px */
    }
}
@media (min-width: 1024px) { /* lg */
    main.prose,
    main.prose p {
        font-size: 1.25rem;  /* 20px */
    }
}
main.prose em {
    font-size: inherit;
}

/* Technique source file caption — filename label below a .tq code block.
   Selectors are scoped to `main.prose p` to override the 20px prose rule above. */
main.prose p.tq-filename {
    text-align: right;
    font-family: "Source Code Pro", monospace;
    color: #94a3b8; /* slate-400 */
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 3px 0 0 0;
    padding-right: 6px;
}
main.prose pre:has(+ p.tq-filename) {
    margin-bottom: 0;
}
main.prose p.tq-filename a {
    color: inherit;
    text-decoration: none;
}

/* Theme toggle: icon reflects the user's choice (auto/light/dark).
   Cycle auto → light → dark → auto; tooltip says "System" / "Light" / "Dark". */
.theme-controller .theme-icon-auto,
.theme-controller .theme-icon-light,
.theme-controller .theme-icon-dark {
    display: none;
}
.theme-controller[data-choice="auto"]  .theme-icon-auto,
.theme-controller[data-choice="light"] .theme-icon-light,
.theme-controller[data-choice="dark"]  .theme-icon-dark {
    display: inline-flex;
}

/* Top-bar menu (desktopMenu macro) — full width, items pushed to the right
   on desktop. .menu + .lg:menu-horizontal supply the column-vs-row layout. */
.site-menu {
    width: 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    justify-content: flex-end;
}

/* Buttons inside the menu fill the row; right-justified content keeps icon
   + label glued to the right edge (matters in the mobile drawer where the
   menu stacks vertically). */
.site-menu-item {
    width: 100%;
    justify-content: flex-end;
    text-decoration: none;
}
.site-menu-item:hover {
    text-decoration: none;
}

/* Labels next to icons — visible in the mobile drawer, hidden on desktop
   where the icon alone is enough wayfinding (Search, Theme, external links). */
.site-menu-drawer-label {
    display: inline;
}
@media (min-width: 1024px) {
    .site-menu-drawer-label {
        display: none;
    }
}

/* Size nav bar icons and text to match larger prose */
.lg\:menu-horizontal .icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
.lg\:menu-horizontal .btn {
    font-size: 1rem;
}

/* Nudge GitHub Octocat down so its body aligns with the theme circle next to it. */
a[href*="github.com"] > i.fa-github {
    transform: translateY(1px);
}

/* Hamburger drawer opens from the right on mobile (drawer-end on the
   .drawer element). On lg, lg:drawer-open keeps the sidebar permanently
   visible — flip drawer-end's grid placement back so the desktop sidebar
   stays on the left. */
@media (min-width: 1024px) {
    .drawer-end {
        grid-auto-columns: max-content auto;
    }
    .drawer-end > .drawer-toggle ~ .drawer-content {
        grid-column-start: 2;
    }
    .drawer-end > .drawer-toggle ~ .drawer-side {
        grid-column-start: 1;
        justify-items: start;
    }
}

/* Mobile drawer menu: left-align items. The top-bar menu uses
   right-justified content to push items to the right edge of the navbar; in
   the vertical drawer that reads as awkward right-alignment. Flip to
   left-align below the lg breakpoint. Also strip the wrapper's `px-5` —
   btn's own horizontal padding is enough indent. */
@media (max-width: 1023px) {
    .drawer-side .site-menu,
    .drawer-side .site-menu-item {
        justify-content: flex-start;
    }
}

/* Darken the background image behind the hero text */
.hero-section > .hero-content {
    background: rgba(0, 0, 0, 0.5);
}

/* Solid text instead of gradient fade on hero headings.
   Scoped to .hero-section so the features section keeps theme defaults. */
.hero-section .hero-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #f3f4f6 !important;
}

[data-theme="goyo-light"] .hero-section .hero-description {
    color: #d1d5db !important;
}

/* The default gray-400 is too dim against the dark backdrop overlay.
   Bump to gray-300 to match the light-mode override above. */
[data-theme="goyo-dark"] .hero-section .hero-description {
    color: #d1d5db !important;
}

[data-theme="goyo-light"] .hero-section .hero-badge {
    color: #e5e7eb !important;
}

/* Let the star field show through in both themes */
.hero-background {
    background: transparent;
}

/* Feature-card icon colour on light theme — match .technique-constructor
   (procedure declarations) rather than a saturated blue. */
[data-theme="goyo-light"] .feature-icon {
    color: #3465a4;
}

/* Page-heading icon tile next to a prose h1/h2: shrink the landing-page
   default (4rem square + 1.5rem mb) to a 3rem tile flush against the
   heading. The flex container's align-items: center puts the tile's
   geometric centre on the text line-box centre, but capitals (e.g.
   "Examples") sit visibly higher than that, so the tile reads as too low.
   Nudge it up by a few pixels so the tile centre lands on the
   capital-letter centre instead. */
main.prose h1 .feature-icon-bg,
main.prose h2 .feature-icon-bg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0;
    transform: translateY(-5px);
}
main.prose h1 .feature-icon-bg .icon,
main.prose h2 .feature-icon-bg .icon {
    font-size: 1.5rem;
}

/* Page-frame layout (index.html). The drawer-content / drawer-side class
   names hook the drawer toggle/CSS in main.css. */

/* Direct child of drawer-content. Stacks header + main + footer; clears the
   fixed navbar at the top. On mobile the navbar becomes static and reclaims
   that header space (rule below). */
.site-content {
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
}
@media (max-width: 767px) {
    .site-content {
        padding-top: 0;
    }
}

/* Landing page wrapper — full width, no outer padding so hero/CTA sections
   reach the viewport edges. */
.landing-shell {
    width: 100%;
}
.landing-main {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Interior page wrapper — generous outer gutters, content centred, optional
   right-rail TOC on desktop. Mobile drops the gutter to 1rem; matching
   override lives next to the base rule to avoid source-order surprises. */
.page-shell {
    width: 100%;
    padding: 2rem;
    display: flex;
    justify-content: center;
}
@media (max-width: 767px) {
    .page-shell {
        padding: 1rem;
    }
}
.page-grid {
    width: 100%;
    max-width: 80rem;
}
@media (min-width: 1024px) {
    .page-grid {
        display: grid;
        grid-template-columns: 1fr 250px;
        gap: 2rem;
    }
}

/* Bottom prev/next page nav, separated from article body by a divider rule. */
.page-nav {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(107, 114, 128, 0.15);
}
.page-nav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .page-nav-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Sidebar drawer-side container. Border + clear navbar at top. */
.site-sidebar {
    padding-top: 4rem;
    border-inline-end: 1px solid rgba(107, 114, 128, 0.15);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .site-sidebar--hidden-on-desktop {
        display: none;
    }
}

/* Section gallery / chapter roadmap — same 1/2/3-column responsive grid
   used by .gallery_grid (image tile cards on /examples) and the chapter
   roadmap (numbered cards listing pages or chapters). */
.gallery-wrap {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.roadmap-wrap {
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Roadmap card — chapter or page tile with index, title, description.
   Uses .feature-card for the per-theme background/border via the
   landing-page rules. Compound selectors below pick up specificity over
   the .feature-card / .feature-title base rules defined later in this
   file. */
.roadmap-card-link {
    display: block;
    text-decoration: none;
}
.feature-card.roadmap-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;
}
.roadmap-card-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.roadmap-card-index {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    color: #6b7280;
}
.feature-title.roadmap-card-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 0;
}
.feature-description.roadmap-card-desc {
    margin: 0;
}

/* Gallery card — image tile + title + description. */
.gallery-card-link {
    display: block;
    text-decoration: none;
}
.feature-card.gallery-card {
    border-radius: 0.75rem;
    padding: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.gallery-card-thumb {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem;
}
.gallery-card-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0;
}
.gallery-card-fallback {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 0.875rem;
    color: #9ca3af;
}
.gallery-card-body {
    padding: 1.25rem;
}
.feature-title.gallery-card-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0 0 0.5rem 0;
}
.feature-description.gallery-card-desc {
    margin: 0;
}

/* 404 page — centred title + description, side-by-side from sm and stacked
   on phones. */
.not-found-shell {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}
.not-found-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 640px) {
    .not-found-main {
        flex-direction: row;
    }
}
.not-found-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}
.not-found-desc {
    margin-top: 0.5rem;
    color: color-mix(in srgb, var(--color-base-content) 70%, transparent);
}
@media (min-width: 640px) {
    .not-found-title {
        font-size: 1.875rem;
        margin-right: 1.5rem;
        padding-right: 1.5rem;
        border-right: 1px solid color-mix(in srgb, var(--color-base-content) 10%, transparent);
    }
    .not-found-desc {
        margin-top: 0;
    }
}

/* Inner scrollable pane of the sidebar — fills the viewport below the navbar
   and stacks the section tree on top, mobile-only menu (when enabled) below.
   Thin webkit scrollbar; inherits scrollbar-color from :root. */
.site-sidebar-content {
    padding-top: 1rem;
    width: 17rem;
    height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: var(--color-base-100);
    color: var(--color-base-content);
    scrollbar-width: thin;
}
.site-sidebar-content::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
.site-sidebar-content::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--color-base-content) 30%, transparent);
    border-radius: 3px;
}

/* Section tree fills the remaining vertical space so the mobile-only menu
   (if shown) sticks to the bottom. */
.site-sidebar-tree {
    width: 100%;
    flex-grow: 1;
}

/* Top "Tutorial" / "Reference" / etc. link sits a hair clear of the chapter
   list below it. */
.sidebar-top-link {
    margin-bottom: 0.5rem;
}

/* Search modal (search.html) — central popup with search input, scrollable
   result list, and a footer help row. */
.search-modal-box {
    position: relative;
    max-width: 42rem;
    padding: 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: var(--color-base-100);
}
.search-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;
}
.search-input-container {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-base-300) 30%, transparent);
}
.search-input-wrap {
    position: relative;
}
.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
}
.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    font-size: 1rem;
    background: transparent;
    border: 0;
    color: var(--color-base-content);
}
.search-input:focus {
    outline: none;
    box-shadow: none;
}
.search-input::placeholder {
    color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
}
.search-results-container {
    padding: 0.5rem;
    height: 24rem;
    overflow-y: auto;
}
.search-results__header {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
}
.search-results__header strong {
    color: var(--color-base-content);
}
.search-results__items > li + li {
    margin-top: 0.25rem;
}
.search-footer {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--color-base-300) 30%, transparent);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}
.search-shortcut {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Mobile-only menu strip at the bottom of the drawer (when
   sidebar.enable_desktop_menu is set). Hidden on desktop. The buttons
   inside have their own horizontal padding, so no extra side gutter here. */
.site-sidebar-mobile-menu {
    display: flex;
    width: 100%;
}
@media (min-width: 1024px) {
    .site-sidebar-mobile-menu {
        display: none;
    }
}

/* Page (and section) header — h1 with optional icon tile and badge,
   followed by a muted description paragraph and a divider rule. Used by
   page.html and section.html. */
.page-header {
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(107, 114, 128, 0.15);
}
.page-header h1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}
.page-title-icon {
    flex-shrink: 0;
}
.page-badge {
    font-size: 0.875rem;
    font-weight: 400;
    padding: 0.125rem 0.5rem;
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 0.25rem;
}
.page-header > p {
    color: #6b7280;
}

/* Tint the tile behind the icon to match the icon colour above so it
   doesn't clash with a cooler blue. 10% fill / 20% border alpha. */
[data-theme="goyo-light"] .feature-icon-bg {
    background: linear-gradient(135deg, #3465a41a, #3465a41a);
    border: 1px solid #3465a433;
}

/* Repo-name link: clickable but styled as surrounding text (bold, no underline,
   no link colour). Used for "technique-lang/technique" references. */
a.repo-name {
    color: inherit;
    text-decoration: none;
    font-weight: bold;
}

/* Tile anchors are lit by their own hover card styling — suppress the
   prose-anchor underline so it doesn't appear along the card's bottom edge. */
main .not-prose a,
main .not-prose a:hover {
    border-bottom: none;
}

/* Letterbox backdrop for gallery image tiles. Sits behind a contained
   image that may not fill the 4:3 aspect box. One tonal step away from
   the card background in each theme so the frame reads as distinct. */
.tile-letterbox {
    background: #e2e8f0;  /* slate-200 */
}
[data-theme="goyo-dark"] .tile-letterbox {
    background: #1e293b;  /* slate-800 */
}

/* Download buttons on the Installation page — rectangular OS-icon buttons
   that point at the latest release binary. JS in that page's HTML rewrites
   the href and version label from the GitHub API on load; fallback href
   points at the /releases/latest page. */
.download-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem 0;
}
@media (max-width: 767px) {
    .download-buttons {
        grid-template-columns: 1fr;
    }
}
.download-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.download-button:hover {
    border-color: rgba(148, 163, 184, 0.6);
    background-color: rgba(148, 163, 184, 0.06);
    text-decoration: none;
}
/* Selected/lit state — teal accent (matches .technique-label) so the chosen
   OS reads as distinct from the sienna icon and from the two unselected
   buttons. JS toggles this class. */
.download-button--selected,
.download-button--selected:hover {
    border-color: #60989a;
    background-color: rgba(96, 152, 154, 0.10);
}
[data-theme="goyo-dark"] .download-button--selected,
[data-theme="goyo-dark"] .download-button--selected:hover {
    border-color: #7ecaca;
    background-color: rgba(126, 202, 202, 0.14);
}
.download-button .fa-brands {
    font-size: 2.5rem;
    color: #8f5902;  /* technique-type sienna, light */
    margin-bottom: 0.5rem;
}
[data-theme="goyo-dark"] .download-button .fa-brands {
    color: #c48a1e;  /* technique-type sienna, dark */
}
.download-os {
    font-size: 1.5rem;
    font-weight: 600;
}
.download-arch {
    font-size: 0.875rem;
    color: #94a3b8;
    font-family: "Source Code Pro", monospace;
}

/* ==========================================================================
   Landing-page semantic layout
   Per-theme colour rules for .hero-*, .feature-*, .btn-final-cta-section
   live in themes/goyo/static/css/main.css. The rules below supply
   structural layout for landing.html.
   ========================================================================== */

@keyframes pulse {
    50% { opacity: 0.5; }
}

/* Hero --------------------------------------------------------------------- */
.hero-section {
    position: relative;
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.hero-background {
    position: absolute;
    inset: 0;
}
.hero-pulse-layer {
    position: absolute;
    inset: 0;
}
.hero-pulse {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hero-pulse--top-left {
    top: 25%;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: linear-gradient(to right in oklab,
        color-mix(in srgb, var(--color-gray-500) 10%, transparent),
        color-mix(in srgb, var(--color-slate-500) 10%, transparent));
}
.hero-pulse--bottom-right {
    top: 75%;
    right: 25%;
    width: 20rem;
    height: 20rem;
    background: linear-gradient(to right in oklab,
        color-mix(in srgb, var(--color-slate-500) 10%, transparent),
        color-mix(in srgb, var(--color-gray-400) 10%, transparent));
    animation-delay: 2s;
}
.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}
.hero-content {
    position: relative;
    z-index: 10;
    padding: 2rem;
    max-width: 72rem;
    margin: 0 auto;
}
.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}
.hero-section .hero-h1 {
    /* Outer h1 sizing — colour/gradient lives on inner .hero-title span */
    font-size: 3.75rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .hero-section .hero-h1 {
        font-size: 6rem;
    }
}
.hero-description {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.4;
}
/* Hero tagline + CTA description use relaxed leading for readability of
   long-form copy. Features/content section descriptions keep the tighter
   default above. */
.hero-section .hero-description,
.landing-cta-description {
    line-height: 1.625;
}
.hero-cta-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.hero-cta {
    position: relative;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    transition: all 0.3s;
    text-decoration: none;
}
.hero-cta:hover {
    text-decoration: none;
}

/* Landing sections (features / content / cta) ------------------------------ */
.landing-section-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom in oklab,
        transparent,
        color-mix(in srgb, var(--color-slate-500) 5%, transparent),
        transparent);
    pointer-events: none;
}
.landing-section-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 96rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (max-width: 767px) {
    .landing-section-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}
.landing-section-header {
    text-align: center;
    margin-bottom: 5rem;
}
.landing-section--content .landing-section-header,
.landing-section--cta    .landing-section-header {
    margin-bottom: 0;
}
.landing-section-header h2 {
    /* margin-top: 0 already set above */
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 1.5rem;
}
.landing-section-header > p {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

/* Features grid ------------------------------------------------------------ */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 640px) {
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.feature-card {
    position: relative;
    border-radius: 0.75rem;
    padding: 2rem;
    height: 100%;
}
/* Mobile: rem-based card padding doesn't shrink for narrow viewports, so the
   padding-to-content ratio gets heavy. Trim each tile type by a notch. Lives
   here (after the base .feature-card / .feature-card.roadmap-card rules) to
   win the source-order tiebreak at equal specificity. */
@media (max-width: 767px) {
    .feature-card {
        padding: 1.25rem;
    }
    .feature-card.roadmap-card {
        padding: 1rem;
    }
}
/* Subtle blurred glow behind each card. ::before keeps the markup at one
   element per card. */
.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to right in oklab,
        color-mix(in srgb, var(--color-slate-500) 5%, transparent),
        color-mix(in srgb, var(--color-gray-500) 5%, transparent));
    filter: blur(16px);
    z-index: -1;
    pointer-events: none;
}
.feature-card-icons {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.feature-icon-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
}
.feature-card-icons .feature-icon-bg {
    margin-bottom: 0;          /* margin lives on the row wrapper */
}
.feature-icon {
    font-size: 1.875rem;
}
.feature-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.feature-description {
    line-height: 1.625;
}

/* Content (code-block) section -------------------------------------------- */
.landing-content-frame {
    max-width: 56rem;
    margin: 0 auto;
}

/* Final CTA --------------------------------------------------------------- */
.landing-section--cta {
    margin-top: 2.5rem;
    overflow: hidden;
}
@media (max-width: 767px) {
    .landing-section--cta {
        margin-top: 3rem;
    }
}
.landing-cta-bg {
    position: absolute;
    inset: 0;
}
.landing-cta-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right in oklab,
        color-mix(in srgb, var(--color-slate-800) 20%, transparent),
        color-mix(in srgb, var(--color-gray-800) 20%, transparent),
        color-mix(in srgb, var(--color-slate-700) 20%, transparent));
}
.landing-cta-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24rem;
    height: 24rem;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right in oklab,
        color-mix(in srgb, var(--color-slate-500) 20%, transparent),
        color-mix(in srgb, var(--color-gray-500) 20%, transparent));
    border-radius: 9999px;
    filter: blur(64px);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.landing-cta-content {
    text-align: center;
}
.landing-cta-title {
    margin-top: 0;              /* drop the 4rem h2 article spacing here */
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .landing-cta-title {
        font-size: 3.75rem;
    }
}
.landing-cta-description {
    max-width: 48rem;
    margin: 0 auto 3rem;
    line-height: 1.625;
}
.landing-cta-image-wrap {
    margin-bottom: 3rem;
}
.landing-cta-image {
    margin: 0 auto;
    max-width: 56rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.landing-cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .landing-cta-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
.btn-final-cta-section {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 20rem;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.3s;
    overflow: hidden;
}
@media (min-width: 640px) {
    .btn-final-cta-section {
        width: auto;
        max-width: none;
    }
}
.btn-final-cta-section svg {
    /* width/height + margin-left for the arrow; vertical nudge already set above */
    margin-left: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
}
/* Hover gradient overlay. No motion — only a colour shift, per the
   no-hover-transforms rule. */
.btn-final-cta-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to right in oklab,
        var(--color-slate-500),
        var(--color-gray-600));
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.btn-final-cta-section:hover::after {
    opacity: 1;
}
.btn-final-cta-section > * {
    position: relative;
    z-index: 1;
}