/* ============================================================
   dúndns journal — brand carried over from dundns.eu
   ("The Hillfort Ledger"): warm parchment paper for the content,
   carved navy stone for the bands, gold gilt for the edges.

   Every asset is FIRST-PARTY. Fonts are self-hosted woff2
   (/fonts/*), textures are inline data-URIs. Loading any page
   makes zero third-party requests, fitting for a privacy product.
   ============================================================ */

/* ── Self-hosted webfonts (woff2, latin subset) ─────────────── */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/eb-garamond-400.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/eb-garamond-500.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/eb-garamond-600.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/eb-garamond-400-italic.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-500.woff2') format('woff2');}

/* ── Tokens (mirrors dundns.eu) ─────────────────────────────── */
:root{
    color-scheme: light;

    --navy:#0A1538; --navy-2:#121F47; --navy-3:#233066;
    --gold:#FFCC00; --gold-2:#FFD633;

    --parchment:#F2EEE1; --parchment-2:#E9E3D2;
    --paper:#FCFAF2; --paper-2:#F5F1E3;

    --ink:#22231C; --ink-2:#565546; --ink-3:#6F6C5A;
    --line:#E0D9C4; --line-2:#D0C8AA; --line-soft:#ECE6D4;

    --amber:#8A6700; --amber-2:#C99700;

    --mist:#E7ECF7; --mist-dim:#9AA6C6;

    --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
    --sans:'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --r-s:8px; --r-m:11px; --r-l:14px;
    --shadow-1:0 1px 2px rgba(57,47,15,.05), 0 6px 20px rgba(57,47,15,.05);
    --shadow-2:0 2px 6px rgba(57,47,15,.06), 0 18px 50px rgba(57,47,15,.10);
    --ring:0 0 0 3px rgba(138,103,0,.28);

    --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
    font-family:var(--sans);
    color:var(--ink);
    background-color:var(--parchment);
    background-image:var(--noise);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
}

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

a{ color:var(--amber); text-underline-offset:3px; }

code, kbd, samp, pre{ font-family:var(--mono); }

:focus-visible{ outline:2px solid var(--amber-2); outline-offset:2px; }
nav :focus-visible,
.site-footer :focus-visible,
.home-hero :focus-visible{ outline-color:var(--gold); }

.skip-link{
    position:absolute; left:-200vw; top:0; z-index:999;
    background:var(--gold); color:var(--navy);
    padding:.65rem 1.1rem; font-weight:600; font-size:.9rem;
    border-radius:0 0 var(--r-s) 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
        animation-duration:.01ms !important;
        animation-delay:0s !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

/* ── The wordmark ──────────────────────────────────────────── */
.mark{ display:inline-flex; align-items:baseline; line-height:1; white-space:nowrap; }
.mark .dun{ font-family:var(--serif); font-weight:500; letter-spacing:-.005em; }
.mark .dns{ font-family:var(--sans); font-weight:500; letter-spacing:-.01em; margin-left:.06em; }
.mark .u{ position:relative; display:inline-block; }
.mark .fada{
    position:absolute; left:50%; top:.04em;
    width:.30em; height:.085em; border-radius:1px;
    background:var(--gold);
    transform:translateX(-48%) rotate(-20deg);
}
.mark--rev .dun{ color:#fff; }
.mark--rev .dns{ color:var(--gold); }
.mark--rev .fada{ background:var(--gold); }

/* ── Nav ────────────────────────────────────────────────────── */
nav{
    background:linear-gradient(180deg, var(--navy-2), var(--navy));
    padding:0 1.5rem;
    border-bottom:1px solid var(--navy-3);
}
.nav-inner{
    max-width:960px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:center;
    height:60px;
}
.brand{
    display:inline-flex; align-items:center; gap:.7rem;
    text-decoration:none; padding:.2rem 0;
}
.brand-ogham{ width:32px; height:32px; display:block; flex-shrink:0; }
.brand-divider{ width:1px; height:26px; background:var(--navy-3); flex-shrink:0; }
.brand .mark{ font-size:1.5rem; }
.brand-tag{
    font-family:var(--mono); font-size:.62rem; font-weight:500;
    letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold); opacity:.85;
    margin-left:.15rem;
    padding:.28rem .5rem;
    border:1px solid rgba(255,204,0,.3);
    border-radius:20px;
}
@media (max-width:560px){
    .brand-ogham, .brand-divider, .brand-tag{ display:none; }
    .brand{ gap:0; }
}
.nav-links{ display:flex; gap:1.35rem; align-items:center; }
.nav-links > a{
    color:var(--mist-dim);
    text-decoration:none;
    font-size:.9rem;
    transition:color .15s;
}
.nav-links > a:hover{ color:#fff; }
.nav-links > a[aria-current="page"]{ color:var(--gold); }
.nav-links > a.nav-cta{
    color:var(--gold);
    border:1px solid rgba(255,204,0,.45);
    border-radius:999px;
    padding:.36rem .95rem;
    transition:background-color .15s, color .15s, border-color .15s;
}
.nav-links > a.nav-cta:hover{
    background:rgba(255,204,0,.12);
    border-color:rgba(255,204,0,.7);
    color:var(--gold-2);
}

/* ── Main ───────────────────────────────────────────────────── */
main{
    flex:1;
    max-width:800px; width:100%;
    margin:0 auto;
    padding:2rem 1.5rem;
}

/* ── Eyebrow & ogham divider ────────────────────────────────── */
.home-hero-eyebrow, .form-eyebrow{
    display:inline-flex; align-items:center; gap:.7em;
    font-family:var(--mono);
    font-size:.7rem; font-weight:500;
    letter-spacing:.28em; text-transform:uppercase;
    color:var(--amber);
}
.home-hero-eyebrow::before,
.home-hero-eyebrow::after{
    content:""; width:22px; height:2px;
    background:currentColor; opacity:.55; flex-shrink:0;
}
.home-hero .home-hero-eyebrow{ color:var(--gold); }

.ogham-divider{
    position:relative;
    height:16px; max-width:460px;
    margin:2.5rem auto;
}
.ogham-divider::before{
    content:""; position:absolute; left:0; right:0; top:50%;
    height:1px; margin-top:-.5px;
    background:linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
}
.ogham-divider::after{
    content:""; position:absolute; left:50%; top:0;
    width:59px; height:100%;
    transform:translateX(-50%);
    background:repeating-linear-gradient(90deg, var(--amber-2) 0 3px, transparent 3px 14px);
}
/* Keeps the "auto" side margins of the base rule: the strokes are drawn at the
   element's midpoint, so anything but centred leaves them adrift in the column. */
.ogham-divider--post{ margin:1.6rem auto 0; }

/* ── Home: hero ─────────────────────────────────────────────── */
.home-hero{
    position:relative;
    margin:-2rem calc(50% - 50vw) 0;
    padding:2.5rem 1.5rem 2.25rem;
    background:linear-gradient(165deg, #0C1A45 0%, var(--navy) 55%, #091230 100%);
    color:var(--mist);
    border-bottom:1px solid rgba(255,204,0,.28);
    overflow:hidden;
}
.home-hero::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:
        radial-gradient(720px 420px at 12% -8%, rgba(255,204,0,.12), transparent 65%),
        radial-gradient(560px 380px at 88% 112%, rgba(35,48,102,.55), transparent 70%);
}
.home-hero::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background-image:var(--noise);
}
.home-hero-inner{
    position:relative; z-index:1;
    max-width:760px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; gap:1.1rem;
    text-align:center;
}
/* ── Post ledger (list of entries) ─────────────────────────── */
.post-ledger{
    border-top:1px solid var(--line);
}
.post-entry{
    display:block;
    padding:1.4rem .5rem;
    border-bottom:1px solid var(--line);
    text-decoration:none;
    color:inherit;
    transition:background-color .18s;
}
.post-entry:hover{ background:var(--paper); }
.post-entry-body{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.post-entry-title{
    font-family:var(--serif);
    font-size:1.2rem; font-weight:600;
    letter-spacing:-.01em;
    color:var(--navy);
}
.post-entry:hover .post-entry-title{ color:var(--amber-2); }
.post-entry-desc{
    font-size:.88rem;
    color:var(--ink-2);
    line-height:1.6;
}
.post-empty{
    color:var(--ink-2);
    font-style:italic;
    text-align:center;
    padding:3rem 0;
}

/* ── List page header (section / tags) ─────────────────────── */
.list-header{
    margin-bottom:.5rem;
    display:flex; flex-direction:column; align-items:flex-start; gap:.5rem;
}
.list-title{
    font-family:var(--serif);
    font-size:clamp(1.9rem, 4vw, 2.5rem);
    font-weight:600;
    letter-spacing:-.02em;
    color:var(--navy);
}
.list-lead{
    font-size:1.02rem;
    color:var(--ink-2);
    line-height:1.6;
}

/* ── Single post ────────────────────────────────────────────── */
.post-header{ margin-bottom:1rem; }
.post-title{
    font-family:var(--serif);
    font-size:clamp(1.9rem, 4.4vw, 2.6rem);
    font-weight:600;
    letter-spacing:-.02em;
    line-height:1.15;
    color:var(--navy);
    margin:.5rem 0 0;
}
.post-lead{
    font-size:1.08rem;
    color:var(--ink-2);
    line-height:1.65;
    margin-top:.7rem;
}

.post-body{
    font-size:1.02rem;
    line-height:1.75;
    color:var(--ink);
}
.post-body > * + *{ margin-top:1.15em; }
.post-body h2{
    font-family:var(--serif);
    font-size:1.5rem; font-weight:600;
    letter-spacing:-.01em;
    color:var(--navy);
    margin-top:1.8em;
}
.post-body h3{
    font-family:var(--serif);
    font-size:1.2rem; font-weight:600;
    letter-spacing:-.01em;
    color:var(--navy);
    margin-top:1.6em;
}
.post-body a{ color:var(--amber); font-weight:500; }
.post-body a:hover{ text-decoration:underline; }
.post-body ul, .post-body ol{ padding-left:1.4em; display:flex; flex-direction:column; gap:.5em; }
.post-body blockquote{
    border-left:3px solid var(--amber-2);
    padding:.2em 0 .2em 1.1em;
    color:var(--ink-2);
    font-style:italic;
}
.post-body code{
    font-size:.85em;
    background:var(--paper-2);
    border:1px solid var(--line);
    padding:.12em .4em;
    border-radius:5px;
    color:var(--ink);
}
.post-body pre{
    background:var(--navy);
    border-radius:var(--r-m);
    padding:1.1rem 1.25rem;
    overflow-x:auto;
    box-shadow:var(--shadow-1);
}
.post-body pre code{
    background:none; border:none; padding:0;
    color:var(--mist);
    font-size:.85em;
}
/* Chroma token colours, kept inside the brand palette rather than a
   generic highlight theme (no chroma.css is generated or shipped). */
.post-body .chroma .k, .post-body .chroma .kc, .post-body .chroma .kd,
.post-body .chroma .kn, .post-body .chroma .kr, .post-body .chroma .nb,
.post-body .chroma .nf{ color:var(--gold); }
.post-body .chroma .s, .post-body .chroma .s1, .post-body .chroma .s2,
.post-body .chroma .sb, .post-body .chroma .sc{ color:var(--gold-2); }
.post-body .chroma .c, .post-body .chroma .c1, .post-body .chroma .cm,
.post-body .chroma .cp{ color:var(--mist-dim); font-style:italic; }
.post-body .chroma .mi, .post-body .chroma .mf, .post-body .chroma .mo{ color:var(--amber-2); }
.post-body .chroma .o, .post-body .chroma .p{ color:var(--mist); }
.post-body img{
    max-width:100%; border-radius:var(--r-m);
    border:1px solid var(--line);
}
/* Markdown tables. The wrapper comes from the render-table hook, so a wide
   table scrolls on its own instead of widening the page on a phone. */
.post-table-wrap{ overflow-x:auto; }
.post-body table{
    width:100%; min-width:28rem;
    border-collapse:collapse;
    font-size:.92rem;
    line-height:1.55;
}
.post-body thead th{
    text-align:left; font-weight:600;
    font-family:var(--sans);
    font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-3);
    padding:0 1.2rem .55rem 0;
    border-bottom:1px solid var(--line-2);
    white-space:nowrap;
}
.post-body tbody td{
    padding:.7rem 1.2rem .7rem 0;
    border-bottom:1px solid var(--line-soft);
    vertical-align:top;
    color:var(--ink-2);
}
.post-body tbody td:first-child{ color:var(--ink); font-weight:500; }
.post-body tbody tr:last-child td{ border-bottom:none; }
.post-body th:last-child, .post-body td:last-child{ padding-right:0; }
.post-body hr{
    border:none; border-top:1px solid var(--line);
    margin:2em 0;
}

.post-tags{
    display:flex; gap:.5rem; flex-wrap:wrap;
    margin-top:2rem;
    padding-top:1.5rem;
    border-top:1px solid var(--line);
}
.post-tag{
    font-family:var(--mono);
    font-size:.7rem; letter-spacing:.04em;
    color:var(--amber);
    background:var(--paper-2);
    border:1px solid var(--line-2);
    border-radius:20px;
    padding:.28rem .75rem;
}

.post-footer{ margin-top:2.5rem; }
.post-back{
    font-size:.9rem; font-weight:600;
    color:var(--amber); text-decoration:none;
}
.post-back:hover{ text-decoration:underline; }

/* ── Footer — gilt-edged stone ──────────────────────────────── */
.site-footer{
    position:relative;
    background-color:var(--navy);
    background-image:linear-gradient(180deg, var(--navy), #081027);
    color:var(--mist-dim);
    padding:3rem 1.5rem 0;
    font-size:.85rem;
    margin-top:auto;
}
.site-footer::before{
    content:""; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,204,0,.55) 18%, rgba(255,204,0,.55) 82%, transparent);
}
.site-footer-inner{
    max-width:800px; margin:0 auto;
    display:grid;
    grid-template-columns:1fr auto;
    gap:2.5rem;
    padding-bottom:2.4rem;
}
.footer-col{
    display:flex; flex-direction:column;
    gap:.55rem; align-items:flex-start;
    min-width:0;
}
.footer-col-title{
    font-family:var(--mono);
    font-size:.64rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase;
    color:rgba(154,166,198,.7);
    margin-bottom:.3rem;
}
.footer-brand{ text-decoration:none; display:inline-flex; }
.footer-brand .mark{ font-size:1.45rem; }
.footer-tagline{
    font-family:var(--serif);
    font-style:italic;
    font-size:1.02rem;
    line-height:1.55;
    color:var(--mist-dim);
    margin:.9rem 0 0;
}
.footer-col a{
    color:var(--mist-dim);
    text-decoration:none;
    font-size:.875rem;
    transition:color .15s;
}
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{
    max-width:800px; margin:0 auto;
    padding:1.15rem 0 1.5rem;
    border-top:1px solid var(--navy-3);
    font-family:var(--mono);
    font-size:.7rem; letter-spacing:.07em;
    color:rgba(154,166,198,.6);
    display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
@media (max-width:720px){
    .site-footer-inner{ grid-template-columns:1fr; gap:1.9rem; }
}

/* ── 404 ────────────────────────────────────────────────────── */
.notfound{
    max-width:36rem; margin:2.5rem auto 4rem;
    display:flex; flex-direction:column; align-items:flex-start; gap:.6rem;
}
.notfound .ogham-divider{ margin:.5rem 0 1.8rem; align-self:flex-start; }
.notfound-actions{ display:flex; gap:.85rem; flex-wrap:wrap; }
.notfound-link{
    font-size:.9rem; font-weight:600;
    text-decoration:none;
    padding:.6rem 1.3rem;
    border-radius:999px;
    color:var(--ink-2);
    transition:background-color .15s, color .15s, border-color .15s;
}
.notfound-link--primary{
    color:var(--amber);
    border:1px solid var(--line-2);
    background:var(--paper);
}
.notfound-link--primary:hover{ background:#fff; border-color:var(--amber-2); }
.notfound-link:not(.notfound-link--primary):hover{ color:var(--navy); }

/* Responsive */