/* ==========================================================================
   Giornale by SamaDesign
   An editorial membership theme for Ghost 6.
   Prefix: gi-
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
    --gi-bg: #eceff1;
    --gi-surface: #f8f9fa;
    --gi-raised: #ffffff;
    --gi-band: #e1e6e9;
    --gi-ink: #13171c;
    --gi-muted: #4f5660;
    --gi-line: #d6dbe0;
    --gi-dark: #13171c;
    --gi-on-dark: #f1f3f5;
    --gi-on-dark-muted: #c3cad2;

    /* The accent comes from Design & branding; emerald when none is set */
    --gi-accent: var(--ghost-accent-color, #00875a);
    --gi-on-accent: #ffffff; /* set from the accent luminance by main.js */
    --gi-accent-text: color-mix(in srgb, var(--gi-accent) 84%, var(--gi-ink));
    --gi-accent-soft: color-mix(in srgb, var(--gi-accent) 12%, var(--gi-surface));
    --gi-accent-on-dark: color-mix(in srgb, var(--gi-accent) 60%, #ffffff);

    --gi-font-heading: var(--gh-font-heading, "Playfair Display", Georgia, serif);
    --gi-font-body: var(--gh-font-body, "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif);

    --gi-radius: 10px;
    --gi-radius-s: 4px;
    --gi-radius-b: 6px;

    --gi-wrap: 1240px;
    --gi-narrow: 720px;
    --gi-gutter: clamp(16px, 4vw, 40px);
    --gi-header: 68px;
    --gi-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gi-shadow: 0 30px 40px -30px rgb(19 23 28 / 0.35);

    /* Torn edge of the "Torn" template: right edge (side by side) and bottom edge (stacked) */
    --gi-tear-v: polygon(0 0,91.8% 0%,91.1% 1.25%,95.6% 2.5%,93.4% 3.75%,93.1% 5%,92.9% 6.25%,96.1% 7.5%,95.4% 8.75%,91.6% 10%,92.1% 11.25%,95.8% 12.5%,94.8% 13.75%,95.6% 15%,91.9% 16.25%,94.9% 17.5%,93.3% 18.75%,92.4% 20%,95.0% 21.25%,93.9% 22.5%,95.1% 23.75%,92.8% 25%,95.1% 26.25%,92.2% 27.5%,91.5% 28.75%,94.6% 30%,92.3% 31.25%,94.4% 32.5%,95.7% 33.75%,93.2% 35%,93.6% 36.25%,96.1% 37.5%,92.6% 38.75%,92.4% 40%,93.4% 41.25%,93.6% 42.5%,93.9% 43.75%,96.3% 45%,94.1% 46.25%,95.9% 47.5%,91.7% 48.75%,91.7% 50%,96.1% 51.25%,93.6% 52.5%,95.1% 53.75%,92.2% 55%,94.3% 56.25%,91.0% 57.5%,92.8% 58.75%,91.5% 60%,93.7% 61.25%,95.8% 62.5%,93.9% 63.75%,95.3% 65%,93.3% 66.25%,93.7% 67.5%,93.5% 68.75%,94.0% 70%,94.2% 71.25%,91.7% 72.5%,95.6% 73.75%,93.0% 75%,92.8% 76.25%,95.9% 77.5%,93.3% 78.75%,94.8% 80%,92.5% 81.25%,92.9% 82.5%,95.2% 83.75%,94.2% 85%,94.9% 86.25%,91.9% 87.5%,93.1% 88.75%,91.6% 90%,93.4% 91.25%,92.5% 92.5%,91.7% 93.75%,92.1% 95%,95.6% 96.25%,92.9% 97.5%,91.1% 98.75%,94.6% 100%,0 100%);
    --gi-tear-h: polygon(0 0,100% 0,100% 93.3%,98.75% 94.6%,97.5% 90.2%,96.25% 93.2%,95% 90.9%,93.75% 89.4%,92.5% 94.3%,91.25% 93.6%,90% 90.1%,88.75% 94.1%,87.5% 94.2%,86.25% 89.8%,85% 90.1%,83.75% 90.1%,82.5% 92.1%,81.25% 91.7%,80% 90.8%,78.75% 94.3%,77.5% 90.5%,76.25% 93.9%,75% 94.1%,73.75% 90.0%,72.5% 90.9%,71.25% 94.9%,70% 93.7%,68.75% 91.2%,67.5% 94.2%,66.25% 93.0%,65% 92.3%,63.75% 89.5%,62.5% 91.6%,61.25% 91.8%,60% 90.3%,58.75% 92.8%,57.5% 93.1%,56.25% 94.2%,55% 94.2%,53.75% 93.8%,52.5% 92.5%,51.25% 93.3%,50% 91.4%,48.75% 94.9%,47.5% 93.5%,46.25% 89.2%,45% 92.8%,43.75% 92.5%,42.5% 91.0%,41.25% 89.7%,40% 93.6%,38.75% 94.0%,37.5% 89.1%,36.25% 94.4%,35% 89.9%,33.75% 94.5%,32.5% 92.4%,31.25% 94.2%,30% 91.4%,28.75% 91.0%,27.5% 92.3%,26.25% 89.4%,25% 93.9%,23.75% 93.8%,22.5% 91.8%,21.25% 92.4%,20% 90.1%,18.75% 90.3%,17.5% 90.1%,16.25% 90.7%,15% 94.3%,13.75% 90.5%,12.5% 93.2%,11.25% 89.3%,10% 91.1%,8.75% 89.1%,7.5% 90.8%,6.25% 89.3%,5% 93.8%,3.75% 90.4%,2.5% 94.8%,1.25% 92.8%,0% 91.4%);
}

[data-scheme="dark"] {
    --gi-bg: #0b0e11;
    --gi-surface: #12161b;
    --gi-raised: #1a2027;
    --gi-band: #1a2027;
    --gi-ink: #eef1f4;
    --gi-muted: #a3acb6;
    --gi-line: #2a323a;
    --gi-dark: #0b0e11;
    --gi-accent: color-mix(in srgb, var(--ghost-accent-color, #00875a) 62%, #ffffff);
    --gi-accent-text: var(--gi-accent);
    --gi-accent-soft: color-mix(in srgb, var(--gi-accent) 16%, var(--gi-surface));
    --gi-shadow: 0 30px 40px -30px rgb(0 0 0 / 0.7);
    color-scheme: dark;
}


/* 2. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--gi-header) + 20px);
}

body {
    margin: 0;
    background: var(--gi-surface);
    color: var(--gi-ink);
    font-family: var(--gi-font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--gi-font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

p { margin: 0; }

:focus-visible { outline: 2px solid var(--gi-accent-text); outline-offset: 3px; }

.gi-icon { width: 20px; height: 20px; flex: none; }

.gi-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gi-skip {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--gi-radius-b);
    background: var(--gi-ink);
    color: var(--gi-surface);
}

.gi-skip:focus { top: 12px; }

/* Words between *asterisks* in a heading setting (main.js) */
.gi-em,
.gi-picks-title em,
.gi-join-title em { font-style: italic; color: var(--gi-accent-text); }


/* 3. Layout
   ========================================================================== */

.gi-site { display: flex; flex-direction: column; min-height: 100vh; }
.gi-main { flex: 1; }

.gi-container {
    width: 100%;
    max-width: calc(var(--gi-wrap) + 2 * var(--gi-gutter));
    margin-inline: auto;
    padding-inline: var(--gi-gutter);
}

.gi-narrow {
    width: 100%;
    max-width: calc(var(--gi-narrow) + 2 * var(--gi-gutter));
    margin-inline: auto;
    padding-inline: var(--gi-gutter);
}

.gi-section { padding-block: 80px; }
.gi-section-tight { padding-bottom: 0; }

.gi-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.gi-head-title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.gi-head-note { color: var(--gi-muted); font-size: 0.95rem; }

.gi-kicker {
    display: inline-block;
    color: var(--gi-accent-text);
    font-family: var(--gi-font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

a.gi-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }

.gi-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--gi-accent-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.gi-lock .gi-icon { width: 13px; height: 13px; }

.gi-avatar { border-radius: 50%; object-fit: cover; }

.gi-date {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--gi-radius-s);
    background: var(--gi-ink);
    color: var(--gi-surface);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.gi-pill {
    display: inline-block;
    padding: 5px 13px;
    border: 1px solid var(--gi-line);
    border-radius: 999px;
    font-size: 0.875rem;
    transition: border-color 0.2s, color 0.2s;
}

.gi-pill:hover { border-color: var(--gi-ink); }

.gi-empty { color: var(--gi-muted); }


/* 4. Header, mega menu, mobile menu
   ========================================================================== */

.gi-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--gi-line);
    background: var(--gi-surface);
}

.gi-header-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--gi-header);
}

.gi-brand { position: relative; z-index: 2; display: flex; align-items: center; flex: none; }
.gi-brand-title { font-family: var(--gi-font-heading); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.gi-logo { width: auto; max-width: 200px; max-height: 40px; }
.gi-logo-dark { display: none; }
[data-scheme="dark"] .gi-logo-light { display: none; }
[data-scheme="dark"] .gi-logo-dark { display: block; }

.gi-nav { margin-inline: auto; }

.gi-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gi-menu > li > a,
.gi-sub-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--gi-radius-b);
    background: none;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.gi-menu > li > a:hover,
.gi-sub-toggle:hover,
.gi-sub-toggle[aria-expanded="true"] { background: var(--gi-band); }

.gi-menu > li.is-current > a {
    text-decoration: underline;
    text-decoration-color: var(--gi-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}

.gi-sub-toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -3px 0 0 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s var(--gi-ease), margin 0.25s;
}

.gi-sub-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }

/* The sub-links stay in the list for the mobile menu; on large screens they appear in the mega panel */
.gi-submenu { display: none; margin: 0; padding: 0; list-style: none; }

.gi-nav-members { display: none; }

.gi-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.gi-icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    transition: background-color 0.2s;
}

.gi-icon-btn:hover { background: var(--gi-band); }

.gi-icon-sun { display: none; }
[data-scheme="dark"] .gi-icon-moon { display: none; }
[data-scheme="dark"] .gi-icon-sun { display: block; }

.gi-text-link { font-size: 0.95rem; padding: 8px 6px; }
.gi-text-link:hover { color: var(--gi-accent-text); }

.gi-burger { display: none; position: relative; z-index: 2; }
.gi-burger span {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--gi-ease), top 0.3s var(--gi-ease);
}
.gi-burger span:first-child { top: 16px; }
.gi-burger span:last-child { top: 23px; }
.gi-burger[aria-expanded="true"] span:first-child { top: 19.5px; transform: rotate(45deg); }
.gi-burger[aria-expanded="true"] span:last-child { top: 19.5px; transform: rotate(-45deg); }

/* Mega menu panel */
.gi-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--gi-line);
    background: var(--gi-surface);
    box-shadow: var(--gi-shadow);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.25s var(--gi-ease), transform 0.35s var(--gi-ease), visibility 0s 0.35s;
}

.gi-mega.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity 0.25s var(--gi-ease), transform 0.35s var(--gi-ease);
}

.gi-mega-inner {
    display: grid;
    grid-template-columns: 220px repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding-block: 28px 32px;
}

.gi-mega-links h2 { margin-bottom: 10px; font-size: 1.5rem; }
.gi-mega-links ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gi-mega-links a { color: var(--gi-muted); font-size: 0.95rem; }
.gi-mega-links a:hover { color: var(--gi-ink); }
.gi-mega-all { display: inline-block; margin-top: 14px; color: var(--gi-accent-text) !important; font-weight: 600; }

.gi-mini { display: block; min-width: 0; }
.gi-mini-media { display: block; overflow: hidden; margin-bottom: 10px; border-radius: var(--gi-radius); background: var(--gi-band); aspect-ratio: 3 / 2; }
.gi-mini-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--gi-ease); }
.gi-mini:hover img { transform: scale(1.03); }
.gi-mini-title { font-size: 1.1rem; line-height: 1.25; }
.gi-mini-meta { color: var(--gi-muted); font-size: 0.8rem; }

/* Skeletons while the stories load */
.gi-mini.is-loading .gi-mini-media { animation: gi-pulse 1.2s ease-in-out infinite; }
.gi-mini.is-loading .gi-mini-title { display: block; height: 2.4em; border-radius: var(--gi-radius-s); background: var(--gi-band); }
@keyframes gi-pulse { 50% { opacity: 0.55; } }


/* 5. Buttons & forms
   ========================================================================== */

.gi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--gi-radius-b);
    background: var(--gi-accent);
    color: var(--gi-on-accent);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: filter 0.2s, transform 0.2s var(--gi-ease), background-color 0.2s;
}

.gi-btn:hover { filter: brightness(1.08); }
.gi-btn:active { transform: translateY(1px); }

.gi-btn-ghost { background: transparent; color: var(--gi-ink); box-shadow: inset 0 0 0 1.5px var(--gi-ink); }
.gi-btn-ghost:hover { background: var(--gi-ink); color: var(--gi-surface); filter: none; }

.gi-btn-dark { background: var(--gi-dark); color: #ffffff; }
[data-scheme="dark"] .gi-btn-dark { background: #05070a; }

.gi-btn-light { background: #ffffff; color: #13171c; }

.gi-form { display: grid; gap: 8px; }
.gi-form-label { font-size: 0.8rem; font-weight: 600; }
.gi-form-row { display: grid; gap: 8px; }

.gi-form input {
    width: 100%;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--gi-radius-b);
    background: #ffffff;
    color: #13171c;
}

.gi-form input::placeholder { color: #6b737d; }

.gi-form .gi-btn { width: 100%; }

.gi-form-loading,
.gi-form-success,
.gi-form-error { display: none; }

.gi-form.loading .gi-form-label-text { display: none; }
.gi-form.loading .gi-form-loading {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: gi-spin 0.7s linear infinite;
}

.gi-form.success .gi-form-row,
.gi-form.success .gi-form-label { display: none; }
.gi-form.success .gi-form-success { display: block; font-weight: 600; }
.gi-form.error .gi-form-error { display: block; font-size: 0.9rem; }

@keyframes gi-spin { to { transform: rotate(360deg); } }


/* 6. Cards, grids, pagination
   ========================================================================== */

.gi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 32px;
}

.gi-card { position: relative; display: flex; flex-direction: column; min-width: 0; }

.gi-card-media {
    display: block;
    overflow: hidden;
    margin-bottom: 18px;
    border-radius: var(--gi-radius);
    background: var(--gi-band);
    aspect-ratio: 4 / 3;
}

.gi-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--gi-ease); }
.gi-card:hover .gi-card-media img { transform: scale(1.03); }

.gi-card-tagline { display: flex; align-items: center; gap: 10px; min-height: 1em; margin-bottom: 8px; }
.gi-card-tagline .gi-kicker { position: relative; z-index: 1; }

.gi-card-title { font-size: 1.5rem; line-height: 1.17; text-wrap: pretty; }
.gi-card-title a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 92%; background-repeat: no-repeat; transition: background-size 0.4s var(--gi-ease); }
.gi-card:hover .gi-card-title a { background-size: 100% 1px; }

/* The whole card is clickable through the title link */
.gi-card-title a::after { content: ""; position: absolute; inset: 0; }

.gi-card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 10px;
    color: var(--gi-muted);
    font-size: 0.95rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gi-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 14px;
    color: var(--gi-muted);
    font-size: 0.8rem;
}

.gi-card-author { display: inline-flex; align-items: center; gap: 8px; color: var(--gi-ink); font-weight: 600; white-space: nowrap; }
.gi-card-author .gi-avatar { width: 28px; height: 28px; }
.gi-card-date { white-space: nowrap; }

/* A post without image: a quiet frame with the title larger */
.gi-card-noimg { padding: 22px; border: 1px solid var(--gi-line); border-radius: var(--gi-radius); }
.gi-card-noimg .gi-card-title { font-size: 1.7rem; }

/* Pagination & load more */
.gi-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 56px; }
.gi-page-number { color: var(--gi-muted); font-size: 0.9rem; }
.gi-load-more-wrap { display: flex; justify-content: center; margin-top: 56px; }
.gi-load-more.is-loading { opacity: 0.6; pointer-events: none; }


/* 7. Home
   ========================================================================== */

/* Full-screen cover: slides stacked in one grid cell, cross-fading */
.gi-full {
    position: relative;
    display: grid;
    min-height: calc(100vh - var(--gi-header));
    min-height: calc(100dvh - var(--gi-header));
    overflow: hidden;
    background: var(--gi-dark);
    color: #ffffff;
}

.gi-slide {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease, visibility 0s 0.9s;
}

.gi-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.9s ease; }

.gi-full-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 7s linear;
}

/* Slow zoom out while a slide is shown */
.gi-slide.is-active .gi-full-image { transform: none; }

.gi-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(10 12 15 / 0.75), rgb(10 12 15 / 0.08) 58%, rgb(10 12 15 / 0.25));
}

.gi-full-noimg::after { background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--gi-accent) 45%, transparent), transparent 60%); }

.gi-full-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: end;
    gap: 40px;
    padding-block: 120px 48px;
}

.gi-full[data-gi-slider]:has(.gi-dots) .gi-full-inner { padding-bottom: 76px; }

/* Dots: 24px hit area, the current one stretched */
.gi-dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 3;
    display: flex;
    gap: 4px;
    transform: translateX(-50%);
}

.gi-dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
}

.gi-dot span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.55);
    box-shadow: 0 1px 6px rgb(0 0 0 / 0.3);
    transition: width 0.35s var(--gi-ease), background-color 0.2s;
}

.gi-dot:hover span { background: rgb(255 255 255 / 0.85); }
.gi-dot.is-active { width: 40px; }
.gi-dot.is-active span { width: 28px; background: #ffffff; }

/* Signature: section with a rule, excerpt in italics, author and date on a rule */
.gi-full-info { max-width: 540px; text-shadow: 0 1px 12px rgb(0 0 0 / 0.4); }

.gi-full-section {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.gi-full-section::after { content: ""; width: 56px; height: 1px; background: currentColor; opacity: 0.7; }
.gi-full-excerpt { margin-top: 16px; font-family: var(--gi-font-heading); font-size: 1.4rem; font-style: italic; font-weight: 500; line-height: 1.35; }

.gi-full-sign {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / 0.35);
}

.gi-full-avatar { width: 52px; height: 52px; border: 2px solid rgb(255 255 255 / 0.9); border-radius: 50%; object-fit: cover; }
.gi-full-who { display: grid; line-height: 1.25; }
.gi-full-who small,
.gi-full-when small { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.gi-full-who strong { font-family: var(--gi-font-heading); font-size: 1.15rem; font-weight: 700; }
.gi-full-when { display: grid; gap: 6px; margin-left: auto; padding-left: 16px; line-height: 1; text-align: right; }
.gi-full-when span { font-family: var(--gi-font-heading); font-size: 2.6rem; font-weight: 700; line-height: 1; }

.gi-full-heading { text-align: right; }
.gi-full-title { font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.02; text-wrap: balance; text-shadow: 0 2px 20px rgb(0 0 0 / 0.3); }
.gi-full-cta { display: flex; justify-content: flex-end; margin-top: 24px; }

/* Half-page cover */
.gi-half {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(320px, 50vh, 540px);
    overflow: hidden;
    background: var(--gi-dark);
    color: #ffffff;
    text-align: center;
}

.gi-half-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gi-half::after { content: ""; position: absolute; inset: 0; background: rgb(10 12 15 / 0.46); }
.gi-half-inner { text-shadow: 0 1px 14px rgb(0 0 0 / 0.35); }
.gi-half-noimg { background: var(--gi-accent); color: var(--gi-on-accent); }
.gi-half-noimg::after { display: none; }
.gi-half-inner { position: relative; z-index: 1; }
.gi-half-title { font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 600; text-wrap: balance; }
.gi-half-desc { max-width: 46ch; margin: 14px auto 0; font-size: 1.2rem; opacity: 0.92; }

.gi-tabs { border-bottom: 1px solid var(--gi-line); }
.gi-tabs-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }

.gi-tabs-list { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gi-tabs-list::-webkit-scrollbar { display: none; }
.gi-tabs-list a { padding: 6px 13px; border-radius: 999px; color: var(--gi-muted); font-size: 0.95rem; white-space: nowrap; transition: color 0.2s, background-color 0.2s; }
.gi-tabs-list a:hover { color: var(--gi-ink); background: var(--gi-band); }
.gi-tabs-list a.is-on { background: var(--gi-ink); color: var(--gi-surface); }

.gi-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    margin-left: auto;
    padding: 9px 14px;
    border: 1px solid var(--gi-line);
    border-radius: var(--gi-radius-b);
    background: var(--gi-raised);
    color: var(--gi-muted);
    font-size: 0.95rem;
    text-align: left;
    cursor: text;
}

.gi-search-field:hover { border-color: var(--gi-muted); }

/* Topics */
.gi-topics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }

.gi-topic {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gi-radius);
    background: var(--gi-accent);
    color: #ffffff;
    aspect-ratio: 4 / 5;
}

.gi-topic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--gi-ease); }
.gi-topic:hover img { transform: scale(1.05); }
.gi-topic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 12 15 / 0.65), transparent 55%); }
.gi-topic-noimg { color: var(--gi-on-accent); }
.gi-topic-noimg::after { display: none; }

.gi-topic-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; font-family: var(--gi-font-heading); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.gi-topic-name small { display: block; margin-top: 4px; font-family: var(--gi-font-body); font-size: 0.75rem; font-weight: 500; opacity: 0.85; }

/* Latest: large story on the left, newsletter box and two smaller stories on the right */
.gi-latest-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 28px 40px;
    align-items: start;
}

.gi-latest-grid > .gi-card { grid-column: 2; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 18px; align-items: start; }
.gi-latest-grid > .gi-card .gi-card-media { grid-row: 1 / 4; margin: 0; aspect-ratio: 1; }
.gi-latest-grid > .gi-card .gi-card-title { font-size: 1.2rem; line-height: 1.22; }
.gi-latest-grid > .gi-card .gi-card-excerpt,
.gi-latest-grid > .gi-card .gi-card-author { display: none; }
.gi-latest-grid > .gi-card .gi-card-meta { margin-top: 6px; }
.gi-latest-grid > .gi-card-noimg { display: block; }

.gi-latest-grid > .gi-card:first-of-type { grid-column: 1; grid-row: 1 / span 3; display: flex; }
.gi-latest-grid > .gi-card:first-of-type .gi-card-media { margin-bottom: 22px; aspect-ratio: 16 / 10; }
.gi-latest-grid > .gi-card:first-of-type .gi-card-title { font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.08; text-wrap: balance; }
.gi-latest-grid > .gi-card:first-of-type .gi-card-excerpt { display: -webkit-box; font-size: 1.05rem; }
.gi-latest-grid > .gi-card:first-of-type .gi-card-author { display: inline-flex; }
.gi-latest-grid > .gi-card:first-of-type .gi-card-meta { margin-top: 18px; }
.gi-latest-grid > .gi-card:nth-of-type(n + 4) { display: none; }

.gi-letter {
    grid-column: 2;
    padding: 28px;
    border-radius: var(--gi-radius);
    background: var(--gi-accent);
    color: var(--gi-on-accent);
}

.gi-letter-title { margin-bottom: 8px; font-size: 1.75rem; }
.gi-letter-text { margin-bottom: 18px; font-size: 0.95rem; opacity: 0.92; }

/* Editor's picks */
.gi-picks { background: var(--gi-band); }
.gi-picks-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.gi-picks-title { margin-bottom: 14px; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.gi-picks-intro p { max-width: 36ch; color: var(--gi-muted); }

.gi-picks-list { margin: 0; padding: 0; list-style: none; counter-reset: gi-pick; }

.gi-pick {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 96px;
    gap: 18px;
    align-items: center;
    padding-block: 18px;
    border-top: 1px solid var(--gi-line);
    counter-increment: gi-pick;
}

.gi-pick:last-child { border-bottom: 1px solid var(--gi-line); }
.gi-pick::before { content: counter(gi-pick); color: var(--gi-accent-text); font-family: var(--gi-font-heading); font-size: 2.5rem; font-style: italic; font-weight: 600; line-height: 1; }
.gi-pick:not(:has(img)) { grid-template-columns: 56px minmax(0, 1fr); }
.gi-pick-title { margin-bottom: 4px; font-size: 1.35rem; line-height: 1.2; }
.gi-pick-title a::after { content: ""; position: absolute; inset: 0; }
.gi-pick:hover .gi-pick-title { color: var(--gi-accent-text); }
.gi-pick-meta { color: var(--gi-muted); font-size: 0.875rem; }
.gi-pick img { width: 96px; height: 96px; border-radius: var(--gi-radius); object-fit: cover; }

/* Membership */
.gi-join { border-top: 1px solid var(--gi-line); }
.gi-join-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.gi-join-title { margin-bottom: 16px; font-size: clamp(2.2rem, 4vw, 3.4rem); }
.gi-join-intro p { max-width: 44ch; color: var(--gi-muted); }

.gi-tiers { display: grid; gap: 12px; }

.gi-tier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 20px;
    align-items: center;
    padding: 20px 22px;
    border: 1px solid var(--gi-line);
    border-radius: var(--gi-radius);
    background: var(--gi-raised);
}

.gi-tier:nth-child(2) { border-color: var(--gi-accent); box-shadow: inset 0 0 0 1px var(--gi-accent); }
.gi-tier-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.gi-tier-name { font-size: 1.4rem; }
.gi-price { font-family: var(--gi-font-heading); font-size: 1.55rem; font-weight: 700; line-height: 1; }
.gi-price small { color: var(--gi-muted); font-family: var(--gi-font-body); font-size: 0.85rem; font-weight: 500; }
.gi-tier-desc { grid-column: 1; color: var(--gi-muted); font-size: 0.9rem; }
.gi-tier .gi-btn { grid-column: 2; grid-row: 1 / span 3; }

.gi-checks { grid-column: 1; display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.gi-checks li { display: flex; gap: 10px; align-items: baseline; }
.gi-checks li::before { content: ""; flex: none; width: 13px; height: 7px; border-left: 2px solid var(--gi-accent-text); border-bottom: 2px solid var(--gi-accent-text); transform: translateY(-3px) rotate(-45deg); }


/* 8. Archives (tag & author)
   ========================================================================== */

.gi-cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 440px;
    overflow: hidden;
    background: var(--gi-accent);
    color: var(--gi-on-accent);
}

.gi-cover.has-image { background: var(--gi-dark); color: #ffffff; }
.gi-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gi-cover.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(10 12 15 / 0.78), rgb(10 12 15 / 0.15)); }

.gi-cover-watermark {
    position: absolute;
    right: -0.04em;
    bottom: -0.2em;
    font-family: var(--gi-font-heading);
    font-size: clamp(8rem, 24vw, 22rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    opacity: 0.12;
    white-space: nowrap;
    pointer-events: none;
}

.gi-cover-inner { position: relative; z-index: 1; padding-block: 100px 44px; }
.gi-cover-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.gi-cover-title { margin-top: 8px; font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 600; line-height: 1; }
.gi-cover-desc { max-width: 52ch; margin-top: 14px; font-size: 1.15rem; opacity: 0.92; }
.gi-cover-avatar { width: 96px; height: 96px; margin-bottom: 18px; border: 3px solid currentColor; border-radius: 50%; object-fit: cover; }

.gi-neighbours { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.gi-neighbour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.16);
    font-size: 0.875rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color 0.2s;
}
.gi-neighbour:hover { background: rgb(255 255 255 / 0.3); }
.gi-neighbour.nav-current { background: #ffffff; color: #13171c; }
.gi-cover:not(.has-image) .gi-neighbour { background: color-mix(in srgb, currentColor 14%, transparent); }
.gi-neighbour-icon { padding: 8px; }
.gi-neighbour .gi-icon { width: 16px; height: 16px; }


/* 9. Articles
   ========================================================================== */

.gi-article-title { font-size: clamp(2.5rem, 5.4vw, 4.25rem); line-height: 1.04; text-wrap: balance; }
.gi-lede { color: var(--gi-muted); font-size: 1.3rem; line-height: 1.5; }

.gi-byline { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; }
.gi-byline-avatars { display: flex; }
.gi-byline-avatars:empty { display: none; }
.gi-byline-avatars .gi-avatar { width: 40px; height: 40px; border: 2px solid var(--gi-surface); }
.gi-byline-avatars .gi-avatar + .gi-avatar { margin-left: -12px; }
.gi-byline-text { display: grid; line-height: 1.35; }
.gi-byline-names { font-weight: 600; }
.gi-byline-names a:hover { color: var(--gi-accent-text); }
.gi-byline-meta { color: var(--gi-muted); }

/* Default (simple) */
.gi-simple-head { display: grid; justify-items: start; gap: 18px; padding-top: 72px; }
.gi-simple-cover { max-width: calc(1040px + 2 * var(--gi-gutter)); margin: 48px auto 0; padding-inline: var(--gi-gutter); }
.gi-simple-cover img { width: 100%; border-radius: var(--gi-radius); }
.gi-simple-cover figcaption { margin-top: 10px; color: var(--gi-muted); font-size: 0.85rem; }
.gi-cover-full { max-width: none; padding: 0; }
.gi-cover-full img { border-radius: 0; }
.gi-article-simple .gi-article-body,
.gi-page-body { padding-block: 56px 88px; }

/* Torn: the image stays in place on the left, the story scrolls on the right */
.gi-torn { display: grid; grid-template-columns: 48% minmax(0, 1fr); }

.gi-torn-media {
    position: sticky;
    top: var(--gi-header);
    height: calc(100vh - var(--gi-header));
    height: calc(100dvh - var(--gi-header));
    margin: 0;
    overflow: hidden;
}

.gi-torn-media img { width: 100%; height: 100%; object-fit: cover; -webkit-clip-path: var(--gi-tear-v); clip-path: var(--gi-tear-v); }

.gi-torn-media figcaption {
    position: absolute;
    left: 16px;
    bottom: 14px;
    max-width: 80%;
    padding: 4px 10px;
    border-radius: var(--gi-radius-s);
    background: rgb(10 12 15 / 0.6);
    color: #ffffff;
    font-size: 0.75rem;
}

.gi-torn-text { width: 100%; max-width: 780px; padding: 80px clamp(24px, 5vw, 80px) 96px clamp(12px, 2vw, 32px); }
.gi-torn-head { display: grid; justify-items: start; gap: 20px; margin-bottom: 44px; }

/* Sidebar: a dark column stays in place on the left */
.gi-side { display: grid; grid-template-columns: minmax(320px, 40%) minmax(0, 1fr); }
.gi-side-col { background: var(--gi-dark); color: var(--gi-on-dark); }

.gi-side-stick {
    position: sticky;
    top: var(--gi-header);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-height: calc(100vh - var(--gi-header));
    min-height: calc(100dvh - var(--gi-header));
    padding: 36px clamp(24px, 3vw, 48px);
}

.gi-side-image { width: 100%; max-height: 44vh; border-radius: var(--gi-radius); object-fit: cover; aspect-ratio: 4 / 5; }
.gi-side-col .gi-kicker { color: var(--gi-accent-on-dark); }
.gi-side-col .gi-article-title { font-size: clamp(2.1rem, 3.4vw, 3.25rem); }
.gi-side-col .gi-byline-meta { color: var(--gi-on-dark-muted); }
.gi-side-col .gi-byline-avatars .gi-avatar { border-color: var(--gi-dark); }
.gi-side-btn { align-self: flex-start; }
.gi-side-main { width: 100%; max-width: 800px; padding: 72px clamp(24px, 5vw, 80px) 96px; }
.gi-side-main > .gi-lede { margin-bottom: 32px; }
.gi-side-caption { margin: -16px 0 32px; color: var(--gi-muted); font-size: 0.85rem; }

/* Table of contents */
.gi-toc { margin-bottom: 40px; }
.gi-toc-box { padding: 18px 22px; border: 1px solid var(--gi-line); border-radius: var(--gi-radius); background: var(--gi-raised); }
.gi-toc-title { font-family: var(--gi-font-heading); font-size: 1.15rem; font-weight: 700; cursor: pointer; list-style-position: inside; }
.gi-toc-list { margin: 10px 0 0; padding-left: 22px; font-size: 0.95rem; line-height: 1.5; }
.gi-toc-list li + li { margin-top: 6px; }
.gi-toc-list a { color: var(--gi-muted); transition: color 0.2s; }
.gi-toc-list a:hover { color: var(--gi-ink); }
.gi-toc-list a.is-active { color: var(--gi-accent-text); font-weight: 600; }

/* End of a post */
.gi-post-foot { display: grid; gap: 32px; margin-top: 56px; }
.gi-post-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gi-share { display: flex; align-items: center; gap: 4px; }
.gi-share-label { margin-right: 8px; color: var(--gi-muted); font-size: 0.875rem; }
.gi-share .gi-icon { width: 18px; height: 18px; }
.gi-copy.is-copied { background: var(--gi-accent-soft); color: var(--gi-accent-text); }

.gi-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: center;
    padding: 28px;
    border-radius: var(--gi-radius);
    background: var(--gi-accent-soft);
}

.gi-cta-title { margin-bottom: 6px; font-size: 1.6rem; }
.gi-cta-text { color: var(--gi-muted); font-size: 0.95rem; }

.gi-author-card { display: flex; gap: 18px; padding-top: 28px; border-top: 1px solid var(--gi-line); }
.gi-author-card .gi-avatar { flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--gi-band); }
.gi-author-card .gi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gi-author-card .gi-avatar span { display: grid; place-items: center; height: 100%; font-size: 0; }
.gi-author-card-name { font-family: var(--gi-font-heading); font-size: 1.2rem; font-weight: 700; }
.gi-author-card-bio { margin-top: 4px; color: var(--gi-muted); font-size: 0.95rem; }

.gi-comments { margin-top: 56px; }

.gi-related { background: var(--gi-band); }


/* 10. Content (Koenig editor)
   ========================================================================== */

.gi-content { font-size: 1.15rem; line-height: 1.75; overflow-wrap: break-word; }

/* Default layout: the reading column with room for wide and full-width cards */
.gi-content-grid {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gi-gutter), 1fr)
        [wide-start] minmax(0, 160px)
        [main-start] min(var(--gi-narrow), calc(100% - 2 * var(--gi-gutter)))
        [main-end] minmax(0, 160px)
        [wide-end] minmax(var(--gi-gutter), 1fr)
        [full-end];
}

.gi-content-wide {
    grid-template-columns:
        [full-start] minmax(var(--gi-gutter), 1fr)
        [wide-start main-start] min(var(--gi-wrap), calc(100% - 2 * var(--gi-gutter)))
        [main-end wide-end] minmax(var(--gi-gutter), 1fr)
        [full-end];
}

.gi-content-grid > * { grid-column: main; }
.gi-content-grid > .kg-width-wide { grid-column: wide; }
.gi-content-grid > .kg-width-full { grid-column: full; }

/* Torn and Sidebar: the column is already narrow, wide and full cards use its whole width */
.gi-torn .gi-content > .kg-width-wide,
.gi-torn .gi-content > .kg-width-full,
.gi-side .gi-content > .kg-width-wide,
.gi-side .gi-content > .kg-width-full { width: 100%; }

.gi-content > * + * { margin-top: 1.4em; margin-bottom: 0; }
.gi-content > :first-child { margin-top: 0; }

.gi-content > h2 { margin-top: 1.9em; font-size: 2rem; }
.gi-content > h3 { margin-top: 1.7em; font-size: 1.55rem; }
.gi-content > h4 { margin-top: 1.5em; font-size: 1.25rem; }
.gi-content > h2 + *,
.gi-content > h3 + *,
.gi-content > h4 + * { margin-top: 0.7em; }

.gi-content a { color: var(--gi-accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gi-content a:hover { text-decoration-thickness: 2px; }
.gi-content a.kg-btn,
.gi-content .kg-bookmark-container,
.gi-content .kg-product-card a { text-decoration: none; }

.gi-content strong { font-weight: 700; }
.gi-content ul,
.gi-content ol { padding-left: 1.4em; }
.gi-content li + li { margin-top: 0.4em; }
.gi-content li::marker { color: var(--gi-accent-text); }

.gi-content blockquote:not([class]) {
    margin-inline: 0;
    padding-left: 22px;
    border-left: 3px solid var(--gi-accent);
    font-family: var(--gi-font-heading);
    font-size: 1.65rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.3;
}

.gi-content blockquote.kg-blockquote-alt {
    margin-inline: 0;
    padding: 0.4em 1em;
    color: var(--gi-accent-text);
    font-family: var(--gi-font-heading);
    font-size: 2rem;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
}

.gi-content hr { justify-self: center; width: 80px; height: 0; margin-block: 3em; border: 0; border-top: 2px solid var(--gi-line); }

.gi-content code:not(pre code) { padding: 0.15em 0.4em; border-radius: var(--gi-radius-s); background: var(--gi-band); font-size: 0.88em; }

.gi-content pre { overflow-x: auto; padding: 20px; border-radius: var(--gi-radius); background: #0f1317; color: #e6eaf0; font-size: 0.9rem; line-height: 1.6; }

.gi-content table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 0.95rem; }
.gi-content th,
.gi-content td { padding: 10px 14px; border-bottom: 1px solid var(--gi-line); text-align: left; }

.gi-content figure { margin-inline: 0; }
.gi-content figcaption { margin-top: 10px; color: var(--gi-muted); font-size: 0.85rem; text-align: center; }
.gi-content .kg-image-card img { border-radius: var(--gi-radius); }
.gi-content .kg-width-full img { border-radius: 0; }
.gi-content .kg-gallery-image img { border-radius: var(--gi-radius-s); }

.gi-content .kg-callout-card,
.gi-content .kg-toggle-card,
.gi-content .kg-product-card-container,
.gi-content .kg-bookmark-container { border-radius: var(--gi-radius); }
.gi-content .kg-bookmark-container { color: var(--gi-ink); }
.gi-content .kg-toggle-card-icon { min-width: 24px; min-height: 24px; }

/* Members-only call to action injected by {{content}} */
.gi-content .gh-post-upgrade-cta-content { border-radius: var(--gi-radius); }

.gi-content-grid > .kg-width-full + .kg-width-full:not(.kg-card-hascaption + .kg-width-full) { margin-top: 0; }


/* 11. Footer
   ========================================================================== */

.gi-footer { padding-block: 64px 32px; border-top: 1px solid var(--gi-line); }

.gi-footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.gi-brand-footer .gi-brand-title { font-size: 2.6rem; }
.gi-footer-text { max-width: 34ch; margin-top: 12px; color: var(--gi-muted); font-size: 0.95rem; }
.gi-footer-heading { margin-bottom: 12px; font-family: var(--gi-font-body); font-size: 0.875rem; font-weight: 600; }
.gi-footer-menu { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--gi-muted); font-size: 0.95rem; }
.gi-footer-menu a:hover { color: var(--gi-ink); }

.gi-social { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; margin-left: -10px; }
.gi-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gi-muted); transition: color 0.2s, background-color 0.2s; }
.gi-social a:hover { background: var(--gi-band); color: var(--gi-ink); }
.gi-social .gi-icon { width: 18px; height: 18px; }
.gi-social-sm { margin-top: 8px; }
.gi-social-fallback { font-size: 0.75rem; }

.gi-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 56px;
    padding-top: 20px;
    border-top: 1px solid var(--gi-line);
    color: var(--gi-muted);
    font-size: 0.8rem;
}

.gi-footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }


/* 12. Misc
   ========================================================================== */

.gi-error { padding-block: 120px 40px; text-align: center; }
.gi-error-code { color: var(--gi-accent-text); font-family: var(--gi-font-heading); font-size: clamp(5rem, 14vw, 9rem); font-style: italic; font-weight: 700; line-height: 1; }
.gi-error-title { margin-top: 12px; font-size: clamp(2rem, 4vw, 3rem); }
.gi-error-text { margin: 14px auto 28px; max-width: 48ch; color: var(--gi-muted); }
.gi-error .gi-btn { margin-top: 12px; }

/* Sections rise into place as they enter the viewport (class added by main.js) */
.gi-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--gi-ease), transform 0.9s var(--gi-ease); }
.gi-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
    .gi-reveal { opacity: 1; transform: none; }
    .gi-full-image { transform: none; }
    .gi-slide { transition: none; }
}


/* 13. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .gi-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gi-mega-inner { grid-template-columns: 200px repeat(2, minmax(0, 1fr)); }
    .gi-mega-inner > .gi-mini:nth-child(4) { display: none; }
    .gi-header-inner { gap: 18px; }
}

/* Mobile menu */
@media (max-width: 960px) {
    :root { --gi-header: 60px; }

    .gi-burger { display: grid; }
    .gi-hide-sm { display: none; }
    .gi-mega { display: none; }

    .gi-nav {
        position: fixed;
        inset: var(--gi-header) 0 0;
        z-index: 1;
        overflow-y: auto;
        padding: 24px var(--gi-gutter) 40px;
        background: var(--gi-surface);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s var(--gi-ease), transform 0.35s var(--gi-ease), visibility 0s 0.35s;
    }

    .gi-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--gi-ease), transform 0.35s var(--gi-ease); }
    body.gi-nav-open { overflow: hidden; }

    .gi-menu { flex-direction: column; align-items: stretch; gap: 0; }
    .gi-menu > li { border-bottom: 1px solid var(--gi-line); }
    .gi-menu > li > a,
    .gi-sub-toggle { justify-content: space-between; width: 100%; padding: 16px 0; border-radius: 0; font-family: var(--gi-font-heading); font-size: 1.5rem; font-weight: 600; }
    .gi-menu > li > a:hover,
    .gi-sub-toggle:hover,
    .gi-sub-toggle[aria-expanded="true"] { background: none; }
    .gi-menu > li.is-current > a { text-underline-offset: 6px; }

    .gi-submenu { padding: 0 0 16px; }
    .gi-sub-all a { color: var(--gi-accent-text) !important; font-weight: 600; }
    .gi-submenu.is-open { display: grid; gap: 4px; }
    .gi-submenu a { display: block; padding: 6px 0; color: var(--gi-muted); font-size: 1.05rem; }

    .gi-nav-members { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .gi-nav-members .gi-btn { flex: 1; }

    .gi-full-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 96px; }
    .gi-full-heading { order: -1; text-align: left; }
    .gi-full-cta { justify-content: flex-start; }

    .gi-latest-grid,
    .gi-picks-inner,
    .gi-join-inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .gi-latest-grid { gap: 24px; }
    .gi-latest-grid > .gi-card,
    .gi-latest-grid > .gi-card:first-of-type,
    .gi-letter { grid-column: 1; grid-row: auto; }
    .gi-latest-grid > .gi-card:first-of-type { order: -1; }

    .gi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gi-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gi-footer-about { grid-column: 1 / -1; }

    /* Torn and Sidebar: stacked, nothing stays in place */
    .gi-torn,
    .gi-side { grid-template-columns: minmax(0, 1fr); }
    .gi-torn-media { position: relative; top: 0; height: 64vw; min-height: 280px; }
    .gi-torn-media img { -webkit-clip-path: var(--gi-tear-h); clip-path: var(--gi-tear-h); }
    .gi-torn-text { max-width: none; padding: 32px var(--gi-gutter) 72px; }
    .gi-side-stick { position: relative; top: 0; min-height: 0; padding: 32px var(--gi-gutter) 40px; }
    .gi-side-image { max-height: none; aspect-ratio: 16 / 10; }
    .gi-side-main { max-width: none; padding: 40px var(--gi-gutter) 72px; }

    .gi-search-field { min-width: 0; }
    .gi-search-field span { display: none; }
}

@media (max-width: 620px) {
    body { font-size: 1rem; }

    .gi-section { padding-block: 56px; }
    .gi-section-tight { padding-bottom: 0; }
    .gi-header-inner { gap: 8px; }
    .gi-actions { gap: 2px; margin-left: auto; }
    .gi-brand-title { font-size: 1.4rem; }
    .gi-logo { max-width: 140px; max-height: 32px; }
    .gi-actions .gi-scheme-toggle { display: none; }
    .gi-header-cta { padding: 8px 12px; font-size: 0.875rem; }

    .gi-topics {
        grid-template-columns: none;
        grid-auto-columns: 44%;
        grid-auto-flow: column;
        margin-right: calc(-1 * var(--gi-gutter));
        padding-right: var(--gi-gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .gi-topic { scroll-snap-align: start; }

    .gi-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .gi-latest-grid > .gi-card { grid-template-columns: 96px minmax(0, 1fr); }

    .gi-pick { grid-template-columns: 40px minmax(0, 1fr) 72px; gap: 12px; }
    .gi-pick::before { font-size: 1.9rem; }
    .gi-pick img { width: 72px; height: 72px; }

    .gi-full-excerpt { font-size: 1.15rem; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .gi-full-when span { font-size: 2.1rem; }

    .gi-tier,
    .gi-cta { grid-template-columns: minmax(0, 1fr); }
    .gi-tier .gi-btn,
    .gi-cta .gi-btn { grid-column: 1; grid-row: auto; justify-self: start; }

    .gi-footer-top { grid-template-columns: minmax(0, 1fr); }
    .gi-footer-bottom { flex-direction: column; }

    .gi-lede { font-size: 1.15rem; }
    .gi-simple-head { padding-top: 44px; }
    .gi-cover { min-height: 380px; }
}