/* ============================================================================
 * Location:    /assets/css/nidaba.css
 * File:        nidaba.css
 * Function:    Custom theme: dark academic, clay-tablet aesthetic.
 *              Linktree-first layout (homepage = list of big buttons).
 *              All colors verified against WCAG 2.2 AA (>= 5:1).
 * Version:     1.1.0
 * History:
 *   1.1.0 (2026-04-27) - Rebuilt as linktree-first:
 *                        new .container-narrow, .intro, .linktree,
 *                        .subpage-header. Removed block-card, hero,
 *                        shelves, contact-card.
 *   1.0.0 (2026-04-27) - Initial release.
 * ============================================================================ */

/* ---- Design tokens ------------------------------------------------------- */
:root {
    /* Palette  (contrast vs --bg verified) */
    --bg:           #14110f;   /* base, near-black warm */
    --bg-2:         #1c1815;   /* surface */
    --bg-3:         #2a221c;   /* raised surface */
    --bg-hover:     #322820;   /* link hover surface */
    --line:         #3a2f25;   /* hairlines / borders */

    --fg:           #f0e6d2;   /* parchment           14.8:1 vs --bg */
    --fg-soft:      #d8cdb6;   /* secondary text       9.8:1 vs --bg */
    --fg-mute:      #a89a7e;   /* muted, ok for >=18px 5.4:1 vs --bg */

    --clay:         #c98a4b;   /* terracotta accent    6.6:1 vs --bg */
    --clay-2:       #d4a04a;   /* honey gold           8.1:1 vs --bg */
    --gold:         #e8c97a;   /* highlight            9.9:1 vs --bg */

    --on-clay:      #14110f;   /* fg on clay button   6.6:1 vs --clay */

    /* Typography */
    --font-display:   'Cormorant Garamond', 'Georgia', serif;
    --font-body:      'Cormorant Garamond', 'Georgia', serif;
    --font-mono:      'JetBrains Mono', ui-monospace, monospace;
    --font-cuneiform: 'Noto Sans Cuneiform', 'Segoe UI Historic', serif;

    /* Spacing */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2.5rem;
    --s-6: 4rem;
    --s-7: 6rem;

    /* Misc */
    --radius:    14px;
    --radius-sm: 8px;
    --shadow:    0 30px 60px -20px rgba(0,0,0,.6),
                 0 8px 20px -10px rgba(0,0,0,.5);

    /* Bootstrap overrides */
    --bs-body-bg:     var(--bg);
    --bs-body-color:  var(--fg);
    --bs-link-color:  var(--clay-2);
    --bs-link-hover-color: var(--gold);
    --bs-border-color: var(--line);
}

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

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

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(212,160,74,.10), transparent 55%),
        radial-gradient(ellipse at 50% 100%, rgba(201,138,75,.05), transparent 55%);
    background-attachment: fixed;
}

/* Hairline grain overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .35;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
}

main, .site-footer, .subpage-header { position: relative; z-index: 1; }

a { color: var(--clay-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--gold); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- Skip link ----------------------------------------------------------- */
.skip-link {
    position: absolute;
    top: -100px; left: var(--s-3);
    background: var(--gold); color: var(--on-clay);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 1000;
    transition: top .2s;
}
.skip-link:focus { top: var(--s-3); color: var(--on-clay); }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--fg);
}
em { font-style: italic; color: var(--gold); }
strong { color: var(--fg); font-weight: 600; }

.cuneiform, [lang="sux"] {
    font-family: var(--font-cuneiform);
    font-feature-settings: "liga" off;
}

/* ---- Containers ---------------------------------------------------------- */
.container-narrow {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--s-4);
}

/* ============================================================================
 * LINKTREE -- homepage
 * ========================================================================= */

.linktree-page {
    padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
    min-height: calc(100vh - 80px);
    display: flex; align-items: flex-start; justify-content: center;
}

/* ---- Intro (top of homepage) -------------------------------------------- */
.intro {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.intro__glyph {
    display: inline-grid;
    place-items: center;
    width: 96px; height: 96px;
    margin: 0 auto var(--s-4);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #5a4530 0%, #3d2e20 60%, #2a1f15 100%);
    box-shadow:
        inset 0 2px 1px rgba(255,220,160,.15),
        inset 0 -10px 30px rgba(0,0,0,.5),
        0 20px 40px -10px rgba(0,0,0,.6);
    position: relative;
}
.intro__glyph::before {
    /* halo */
    content: "";
    position: absolute; inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(212,160,74,.35);
    animation: spin 60s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .intro__glyph::before { animation: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }

.intro__glyph .cuneiform {
    font-size: 2.4rem;
    color: var(--gold);
    text-shadow: 1px 1px 0 rgba(0,0,0,.6);
    letter-spacing: .1em;
}

.intro__name {
    font-size: clamp(2.5rem, 8vw, 3.75rem);
    margin: 0 0 var(--s-2);
    background: linear-gradient(180deg, var(--gold) 0%, var(--clay) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports not (-webkit-background-clip: text) {
    .intro__name { color: var(--gold); }
}

.intro__tag {
    margin: 0 0 var(--s-5);
    color: var(--fg-mute);
    font-family: var(--font-mono);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .25em;
}
.intro__tag-line {
    display: inline-block;
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--line);
}

.intro__why {
    max-width: 52ch;
    margin: 0 auto;
    text-align: left;
}
.intro__why p {
    margin: 0 0 var(--s-3);
    color: var(--fg-soft);
    font-size: 1.05rem;
    line-height: 1.65;
}
.intro__why p:last-child { margin-bottom: 0; }

/* ---- Linktree list ------------------------------------------------------ */
.linktree__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.linktree__item { margin: 0; }

.linktree__link {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: 1.1rem 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--fg);
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    position: relative;
    overflow: hidden;
}
.linktree__link::before {
    /* clay edge highlight */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--clay) 0%, var(--clay-2) 100%);
    opacity: 0;
    transition: opacity .15s;
}
.linktree__link:hover,
.linktree__link:focus-visible {
    background: var(--bg-hover);
    border-color: var(--clay-2);
    color: var(--fg);
    transform: translateY(-1px);
}
.linktree__link:hover::before,
.linktree__link:focus-visible::before {
    opacity: 1;
}

.linktree__glyph {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-cuneiform);
    font-size: 1.6rem;
    color: var(--gold);
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    transition: background .15s, border-color .15s;
}
.linktree__link:hover .linktree__glyph,
.linktree__link:focus-visible .linktree__glyph {
    background: #3a2d22;
    border-color: var(--clay-2);
}

.linktree__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.linktree__label {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--fg);
}
.linktree__sub {
    font-size: .95rem;
    color: var(--fg-soft);
    line-height: 1.3;
}

.linktree__arrow {
    flex: 0 0 auto;
    font-size: 1.15rem;
    color: var(--fg-mute);
    transition: color .15s, transform .15s;
}
.linktree__link:hover .linktree__arrow,
.linktree__link:focus-visible .linktree__arrow {
    color: var(--gold);
    transform: translateX(4px);
}

/* Mobile: tighten spacing */
@media (max-width: 480px) {
    .linktree__link { padding: 1rem; gap: var(--s-3); }
    .linktree__glyph { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.35rem; }
    .linktree__label { font-size: 1.2rem; }
    .linktree__sub { font-size: .9rem; }
}

/* ============================================================================
 * SUBPAGE HEADER (back link)
 * ========================================================================= */
.subpage-header {
    border-bottom: 1px solid var(--line);
    background: rgba(20, 17, 15, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 50;
}
.subpage-header .container-narrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}
.subpage-header__brand {
    display: inline-flex; align-items: center; gap: var(--s-2);
    text-decoration: none; color: var(--fg);
}
.subpage-header__brand:hover,
.subpage-header__brand:focus-visible { color: var(--gold); }
.subpage-header__glyph {
    font-family: var(--font-cuneiform);
    font-size: 1.5rem;
    color: var(--clay-2);
    line-height: 1;
}
.subpage-header__name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.subpage-header__back {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--fg-soft);
    text-decoration: none;
    font-size: .95rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.subpage-header__back:hover,
.subpage-header__back:focus-visible {
    color: var(--gold);
    background: var(--bg-2);
}

/* ============================================================================
 * SUBPAGES
 * ========================================================================= */

.page { padding: var(--s-6) 0 var(--s-7); }

.page-header {
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
}
.page-header__crumbs {
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--fg-mute); text-transform: uppercase;
    letter-spacing: .15em; margin: 0 0 var(--s-3);
}
.page-header__crumbs a { color: var(--clay-2); text-decoration: none; }
.page-header__crumbs a:hover { color: var(--gold); }
.page-header__title {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 var(--s-3);
}
.page-header__lead {
    font-size: 1.2rem; color: var(--fg-soft);
    max-width: 60ch; margin: 0; font-style: italic;
}

.page-body { font-size: 1.1rem; }
.page-body h2 { margin: var(--s-5) 0 var(--s-3); font-size: 1.75rem; }
.page-body h3 { margin: var(--s-4) 0 var(--s-2); font-size: 1.25rem; }
.page-body p  { color: var(--fg-soft); margin: 0 0 var(--s-3); }
.page-body ul, .page-body ol { color: var(--fg-soft); margin: 0 0 var(--s-4); padding-left: var(--s-4); }
.page-body li { margin-bottom: var(--s-2); }
.page-body blockquote {
    border-left: 3px solid var(--clay-2);
    padding: var(--s-3) var(--s-4);
    margin: var(--s-4) 0;
    background: var(--bg-2);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--fg);
    font-style: italic;
}
.page-body a { color: var(--clay-2); }
.page-body a:hover { color: var(--gold); }

.page-toc {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-4);
    margin-bottom: var(--s-5);
}
.page-toc h2 {
    font-family: var(--font-mono);
    font-size: .85rem !important;
    color: var(--clay-2);
    text-transform: uppercase; letter-spacing: .2em;
    margin: 0 0 var(--s-3) !important;
}
.page-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.page-toc li { counter-increment: toc; padding: var(--s-1) 0; }
.page-toc li::before {
    content: counter(toc, upper-roman) ". ";
    color: var(--clay-2);
    font-family: var(--font-mono);
    margin-right: var(--s-1);
}
.page-toc a { color: var(--fg); text-decoration: none; }
.page-toc a:hover, .page-toc a:focus-visible { color: var(--gold); }

/* ---- Buttons ------------------------------------------------------------ */
.btn-clay {
    background: var(--clay-2); color: var(--on-clay);
    border: 1px solid var(--clay-2);
    font-weight: 600; padding: .7rem 1.4rem;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; gap: var(--s-2);
    transition: background .15s, color .15s, transform .15s;
}
.btn-clay:hover, .btn-clay:focus-visible {
    background: var(--gold); color: var(--on-clay);
    transform: translateY(-1px);
}

/* ---- Catalog (tablets subpage) ----------------------------------------- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-3);
}
.catalog-item {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-4);
    transition: transform .2s, border-color .2s;
}
.catalog-item:hover { transform: translateY(-2px); border-color: var(--clay-2); }
.catalog-item__id {
    font-family: var(--font-mono); font-size: .75rem;
    color: var(--fg-mute); text-transform: uppercase;
    letter-spacing: .15em; margin: 0;
}
.catalog-item__cuneiform {
    font-family: var(--font-cuneiform);
    color: var(--gold);
    font-size: 1.8rem;
    margin: var(--s-2) 0;
    letter-spacing: .2em;
}
.catalog-item__title { font-size: 1.05rem; margin: 0 0 var(--s-2); }
.catalog-item__meta { color: var(--fg-mute); font-size: .85rem; margin: 0; }

/* ---- Form (contact page) ------------------------------------------------ */
.form-clay { max-width: 100%; }
.form-clay label {
    display: block;
    font-family: var(--font-mono); font-size: .8rem;
    color: var(--clay-2); text-transform: uppercase;
    letter-spacing: .15em;
    margin-bottom: var(--s-2);
}
.form-clay .form-control {
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--fg);
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 1rem;
}
.form-clay .form-control::placeholder { color: var(--fg-mute); }
.form-clay .form-control:focus {
    background: var(--bg-2);
    color: var(--fg);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(232,201,122,.2);
}
.form-clay .form-text { color: var(--fg-mute); font-size: .85rem; }
.form-clay .form-group { margin-bottom: var(--s-4); }
.required-mark { color: var(--clay-2); margin-left: 4px; }

/* ============================================================================
 * FOOTER
 * ========================================================================= */
.site-footer {
    border-top: 1px solid var(--line);
    padding: var(--s-4) 0;
    margin-top: var(--s-6);
}
.site-footer__line {
    display: flex; justify-content: center; align-items: center;
    gap: var(--s-3); flex-wrap: wrap;
    margin: 0;
    color: var(--fg-mute);
    font-size: .85rem;
    text-align: center;
}
.site-footer__line .cuneiform {
    color: var(--clay-2);
    font-size: 1rem;
}
.site-footer__line a { color: var(--fg-soft); }
.site-footer__line a:hover { color: var(--gold); }

/* ---- Forced-colors / high contrast -------------------------------------- */
@media (forced-colors: active) {
    .linktree__link, .btn-clay { border: 1px solid CanvasText; }
    .linktree__link:focus-visible { outline: 2px solid Highlight; }
}