/*
Theme Name: Discord Timestamp Tool
Theme URI: https://discordtimezoneconverter.com
Description: A fast, accessible Discord timestamp generator and time zone converter. Semantic HTML, visual-first tool layout, zero layout shift.
Version: 3.2.1
Author: Discord Time Zone Converter
Author URI: https://discordtimezoneconverter.com
Text Domain: discord-timestamp-tool
*/

/* ==========================================================================
   0. FONTS — self-hosted, latin subset, variable weight axis.
   One file per family. No third-party connection, no extra round trip before
   the first paint, and the files are covered by the same cache as the theme.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/inter-latin-var.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/jetbrains-mono-latin-var.woff2') format('woff2');
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    --blurple: #5865f2;
    --blurple-hi: #7c85ff;
    --blurple-lo: #3f49d4;
    --green: #3ddc84;
    --amber: #f0b132;
    --red: #f2555a;

    --bg: #0d0e12;
    --bg-2: #14161c;
    --bg-3: #1b1e26;
    --bg-4: #232733;
    --line: #2c3140;
    --line-soft: #23272f;

    --ink: #f2f4f8;
    --ink-2: #c3c8d4;
    --ink-3: #949aab;
    --ink-4: #8b91a4;

    --link: #7aa2ff;

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --wrap: 1040px;
    --wrap-narrow: 720px;
    --r-lg: 20px;
    --r-md: 12px;
    --r-sm: 8px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 72px;

    --focus: 0 0 0 3px rgba(88, 101, 242, .55);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink-2);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    color: var(--ink);
    margin: 0;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.3em; }
li { margin-bottom: var(--sp-2); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: var(--r-sm);
}

kbd {
    font-family: var(--mono);
    font-size: .82em;
    background: var(--bg-4);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--ink);
    white-space: nowrap;
}

code, kbd, samp {
    font-family: var(--mono);
    font-size: .9em;
    background: var(--bg-4);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--ink);
    white-space: nowrap;
}

hr {
    border: 0;
    border-top: 1px solid var(--line-soft);
    margin: var(--sp-7) 0;
}

::selection { background: var(--blurple); color: #fff; }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--blurple);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 var(--r-sm) 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    box-shadow: none;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.site-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(13, 14, 18, .82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
}

.site-head__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 64px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand__mark {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: var(--blurple);
    display: grid;
    place-items: center;
}
.brand__mark svg { width: 16px; height: 16px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.site-nav a {
    color: var(--ink-3);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    text-decoration: none;
}
.site-nav a:hover {
    color: var(--ink);
    background: var(--bg-3);
    text-decoration: none;
}

.site-nav__cta {
    background: var(--blurple) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.site-nav__cta:hover { background: var(--blurple-hi) !important; }

@media (max-width: 760px) {
    .site-nav a:not(.site-nav__cta) { display: none; }
    .brand { font-size: 14px; }
}

/* ==========================================================================
   5. HERO + TOOL
   ========================================================================== */

.hero {
    position: relative;
    padding: var(--sp-7) 0 var(--sp-6);
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(88, 101, 242, .20), transparent 62%),
        radial-gradient(700px 380px at 92% 0%, rgba(61, 220, 132, .10), transparent 60%);
    border-bottom: 1px solid var(--line-soft);
}

/* One column: the H1 and standfirst open the page, then the tool takes the full
   width of the primary column. The centerpiece block is first in DOM order and
   first in rendered order, with nothing decorative between them. */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

.hero__copy {
    max-width: 760px;
    padding-top: var(--sp-2);
}

.hero__note {
    font-size: 14px;
    color: var(--ink-3);
    max-width: 78ch;
    margin: 0;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-soft);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blurple-hi);
    margin-bottom: var(--sp-3);
}
.eyebrow::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--blurple);
}

h1.hero__title {
    font-size: clamp(30px, 5vw, 46px);
    font-weight: 800;
    margin-bottom: var(--sp-3);
}
h1.hero__title span { color: var(--blurple-hi); }

.hero__lede {
    font-size: 17px;
    color: var(--ink-2);
    max-width: 46ch;
    margin-bottom: var(--sp-5);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-5);
}
.chips li {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chips li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

/* --- Tool card ------------------------------------------------------------ */

.tool {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.tool__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 12px 18px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-3);
}
.tool__bar-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}
.tool__bar-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--green);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tool__bar-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(61, 220, 132, .16);
}

.tool__body { padding: 18px; }

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.field--wide { grid-column: 1 / -1; }

@media (max-width: 520px) {
    .field-grid { grid-template-columns: 1fr; }
}

.field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.field input,
.field select {
    width: 100%;
    min-height: 44px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    color: var(--ink);
    font-size: 15px;
    transition: border-color .15s ease, background .15s ease;
}
.field input:hover,
.field select:hover { border-color: var(--bg-4); }
.field input:focus,
.field select:focus {
    border-color: var(--blurple);
    background: var(--bg-4);
    box-shadow: var(--focus);
}

.field input[type="date"],
.field input[type="time"] { font-variant-numeric: tabular-nums; }

.quick-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sp-3);
}
.quick {
    appearance: none;
    background: var(--bg-3);
    border: 1px solid var(--line);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 12px;
    min-height: 34px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s ease;
}
.quick:hover {
    border-color: var(--blurple);
    color: var(--ink);
}
.quick[aria-pressed="true"] {
    background: var(--blurple);
    border-color: var(--blurple);
    color: #fff;
}

/* --- Discord preview mock ------------------------------------------------- */

.preview {
    margin-top: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-3);
    overflow: hidden;
}

.preview__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 10px 14px 0;
}

.preview__msg {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px 14px;
}

.preview__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blurple), #8b5cf6);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
}

.preview__meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}
.preview__name {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.preview__tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    background: var(--blurple);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
}
.preview__time { font-size: 11px; color: var(--ink-4); }

.preview__text {
    font-size: 15px;
    color: #e3e5e8;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}
.preview__text mark {
    background: rgba(88, 101, 242, .22);
    color: #c9cdff;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

/* --- Results table -------------------------------------------------------- */

.results { margin-top: var(--sp-4); }

.results__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-2);
}
.results__head h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.results__head span {
    font-size: 12px;
    color: var(--ink-4);
}

.fmt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 13.5px;
}

/* Fixed columns keep the code readable instead of pushing the card wide. */
.fmt-table th:nth-child(1),
.fmt-table td:nth-child(1) { width: 48px; }
.fmt-table th:nth-child(2) { width: 26%; }
.fmt-table th:nth-child(3) { width: 22%; }
.fmt-table th:nth-child(5) { width: 92px; text-align: right; }
.fmt-table td:last-child { text-align: right; }

.fmt-table td { overflow: hidden; }

.fmt-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fmt-table thead th {
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--line-soft);
}

.fmt-table tbody tr {
    border-bottom: 1px solid var(--line-soft);
}
.fmt-table tbody tr:last-child { border-bottom: 0; }

.fmt-table td {
    padding: 9px 8px;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
}
.fmt-table tbody tr:last-child td { border-bottom: 0; }

.fmt-key {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--blurple-hi);
    background: rgba(88, 101, 242, .12);
    border: 1px solid rgba(88, 101, 242, .3);
    border-radius: 5px;
    padding: 1px 6px;
    display: inline-block;
    min-width: 30px;
    text-align: center;
}

.fmt-name {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.fmt-preview {
    color: var(--ink-3);
    font-size: 12.5px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fmt-code {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--ink-2);
    background: var(--bg-4);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 4px 8px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .15s ease;
}
.fmt-code:hover { border-color: var(--blurple); }

.copy {
    appearance: none;
    width: auto;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    background: var(--bg-4);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    cursor: pointer;
    transition: all .15s ease;
}
.copy:hover {
    color: #fff;
    background: var(--blurple);
    border-color: var(--blurple);
}
.copy:focus-visible {
    outline: 2px solid var(--blurple-hi);
    outline-offset: 2px;
}
.copy svg { width: 14px; height: 14px; flex: 0 0 14px; }
.copy__label { white-space: nowrap; }
.copy.is-done {
    color: #05220f;
    background: var(--green);
    border-color: var(--green);
}
.copy .i-check { display: none; }
.copy.is-done .i-copy { display: none; }
.copy.is-done .i-check { display: block; }

.unix-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding: 10px 12px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
}
.unix-row dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4);
    margin: 0;
}
.unix-row dd {
    margin: 2px 0 0;
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.unix-row > div { display: flex; align-items: center; gap: var(--sp-3); }

/* Space reserved so results never cause layout shift */
[data-live] { min-height: 1.2em; }

/* Tablet / large phone: the human-readable preview column is the first to go,
   because the code and the style name are what people act on. */
@media (max-width: 620px) {
    .fmt-table th:nth-child(3),
    .fmt-table td:nth-child(3) { display: none; }
    .fmt-table th:nth-child(2) { width: 34%; }
    .fmt-name { white-space: normal; }
}

/* Small phone: the code needs the room, so the style name steps aside.
   The full style legend sits directly below this table. */
@media (max-width: 460px) {
    .fmt-table th:nth-child(2),
    .fmt-table td:nth-child(2) { display: none; }
    .fmt-table th:nth-child(1),
    .fmt-table td:nth-child(1) { width: 44px; }
    .fmt-table td { padding: 10px 6px; }

    /* Safety net: if a code still overflows, wrap it rather than clip it. */
    .fmt-code {
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
        font-size: 11px;
        line-height: 1.4;
    }
}

/* ==========================================================================
   6. CONTENT SECTIONS
   ========================================================================== */

.section {
    padding: var(--sp-8) 0;
    border-bottom: 1px solid var(--line-soft);
}
.section--tight { padding: var(--sp-7) 0; }
.section--alt { background: var(--bg-2); }

.section__head {
    max-width: 62ch;
    margin-bottom: var(--sp-6);
}

h2.section__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 750;
    margin-bottom: var(--sp-2);
}

.section__sub {
    color: var(--ink-3);
    font-size: 15.5px;
    margin: 0;
}

h3 {
    font-size: 18px;
    font-weight: 700;
    margin: var(--sp-5) 0 var(--sp-2);
}

h4 {
    font-size: 15px;
    font-weight: 700;
    margin: var(--sp-4) 0 var(--sp-2);
    color: var(--ink);
}

.prose {
    max-width: 68ch;
}
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose code { font-size: .87em; }

/* Cards / grids */

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
}

.card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}
.section--alt .card { background: var(--bg-3); }

.card h3, .card h4 {
    margin-top: 0;
}

.card p:last-child { margin-bottom: 0; }

.step {
    position: relative;
    padding-left: 52px;
}
.step__num {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(88, 101, 242, .14);
    border: 1px solid rgba(88, 101, 242, .35);
    color: var(--blurple-hi);
    font-weight: 800;
    font-size: 14px;
}

/* Definition list */

.defs { margin: 0; }
.defs > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line-soft);
}
.defs > div:last-child { border-bottom: 0; }
.defs dt {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--blurple-hi);
}
.defs dd { margin: 0; font-size: 14.5px; color: var(--ink-2); }

@media (max-width: 560px) {
    .defs > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Note / callout */

.note {
    border-left: 3px solid var(--blurple);
    background: rgba(88, 101, 242, .08);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-4) 0;
    font-size: 14.5px;
    color: var(--ink-2);
}
.note strong { color: var(--ink); }

.note--warn {
    border-left-color: var(--amber);
    background: rgba(240, 177, 50, .08);
}

/* Steps list */

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}
.steps > li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
    margin-bottom: var(--sp-4);
}
.steps > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(88, 101, 242, .14);
    border: 1px solid rgba(88, 101, 242, .35);
    color: var(--blurple-hi);
    font-weight: 800;
    font-size: 13px;
    display: grid;
    place-items: center;
}
.steps strong { color: var(--ink); }

/* Format table (content) */

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: var(--sp-4) 0;
}
table.data caption {
    text-align: left;
    font-size: 13px;
    color: var(--ink-4);
    padding-bottom: var(--sp-2);
}
table.data th,
table.data td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
}
table.data thead th {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-4);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.data tbody th {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
table.data td { color: var(--ink-2); }

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FAQ */

.faq {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg-2);
    overflow: hidden;
}
.section--alt .faq { background: var(--bg-3); }

.faq details {
    border-bottom: 1px solid var(--line-soft);
}
.faq details:last-child { border-bottom: 0; }

.faq summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 48px 16px 18px;
    position: relative;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    transition: background .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: rgba(255, 255, 255, .03); }
.faq summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}
.faq details[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}
.faq details[open] summary { background: rgba(88, 101, 242, .07); }

.faq__answer {
    padding: 0 18px 18px;
    font-size: 14.5px;
    color: var(--ink-2);
}
.faq__answer p:last-child { margin-bottom: 0; }

/* Related links */

.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-2);
}
.link-list li { margin: 0; }
.link-list a {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--bg-2);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    transition: all .15s ease;
}
.link-list a:hover {
    border-color: var(--blurple);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

.site-foot {
    padding: var(--sp-6) 0;
    background: var(--bg-2);
    border-top: 1px solid var(--line-soft);
    font-size: 13.5px;
    color: var(--ink-4);
}

.site-foot__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    align-items: center;
    justify-content: space-between;
}
.site-foot p { margin: 0; }
.site-foot a { color: var(--ink-3); }
.site-foot a:hover { color: var(--ink); }

.site-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

/* ==========================================================================
   8. TOAST
   ========================================================================== */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 140%);
    background: var(--green);
    color: #05220f;
    font-size: 13.5px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
    z-index: 200;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.is-on { transform: translate(-50%, 0); }

/* ==========================================================================
   9. BLOG / PAGES
   ========================================================================== */

.entry-head {
    padding: var(--sp-7) 0 var(--sp-5);
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-2);
}

.entry-head h1 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    margin-bottom: var(--sp-3);
    max-width: 24ch;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    font-size: 13px;
    color: var(--ink-4);
}
.entry-meta span { display: inline-flex; align-items: center; gap: 6px; }

.entry-body {
    padding: var(--sp-6) 0 var(--sp-7);
}
.entry-body .prose { max-width: 70ch; }

/* Links inside running text are underlined, not colour-only, so they are
   distinguishable without relying on hue perception. */
.prose a,
.entry-body a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.prose a:hover,
.entry-body a:hover { text-decoration-thickness: 2px; }

.entry-body h2 {
    font-size: 24px;
    margin: var(--sp-6) 0 var(--sp-3);
}
.entry-body h3 {
    font-size: 19px;
    margin: var(--sp-5) 0 var(--sp-2);
}
.entry-body h2:first-child,
.entry-body h3:first-child { margin-top: 0; }

.entry-body ul,
.entry-body ol { margin-bottom: var(--sp-4); }
.entry-body li { margin-bottom: var(--sp-2); }

.entry-body blockquote {
    margin: var(--sp-4) 0;
    padding-left: var(--sp-4);
    border-left: 3px solid var(--line);
    color: var(--ink-3);
}

.entry-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: var(--sp-4) 0;
}
.entry-body th,
.entry-body td {
    border: 1px solid var(--line-soft);
    padding: 8px 12px;
    text-align: left;
}
.entry-body th { background: var(--bg-3); color: var(--ink); }

.post-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    justify-content: space-between;
    border-top: 1px solid var(--line-soft);
    padding-top: var(--sp-4);
    margin-top: var(--sp-6);
    font-size: 14px;
}

.author-box {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-top: var(--sp-6);
}
.author-box__avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blurple), #8b5cf6);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
}
.author-box p { font-size: 13.5px; color: var(--ink-3); margin: 2px 0 0; }
.author-box strong { color: var(--ink); font-size: 14.5px; }

/* ==========================================================================
   10. UTILITIES
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-0 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}