/* =========================================================================
   Template base
   Shared by every portfolio theme: reset, palette, and the geometry of the
   placeholder artwork. Themes re-skin all of it in their own stylesheet.
   ========================================================================= */

:root {
    --ink:     #141210;
    --paper:   #FFF8EC;
    --paper-2: #FFEFD6;
    --yellow:  #FFE04B;
    --cyan:    #6BE5E0;
    --pink:    #FF6FB5;
    --lime:    #C6FF5C;
    --orange:  #FF8A3D;
    --purple:  #B39BFF;

    --border-w: 3px;
    --border: var(--border-w) solid var(--ink);

    --sh-sm: 3px 3px 0 var(--ink);
    --sh:    6px 6px 0 var(--ink);
    --sh-lg: 10px 10px 0 var(--ink);

    --font-display: "Arial Black", "Archivo Black", "Helvetica Neue", Impact, system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    overflow-x: clip; /* never `overflow-x: hidden` on body — it breaks sticky */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
@supports not (overflow: clip) { html { overflow-x: hidden; } }

body {
    font-family: var(--font-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

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

.skip-link {
    position: absolute;
    top: -100px; left: 1rem;
    z-index: 999;
    padding: 0.7rem 1.15rem;
    background: var(--yellow);
    color: var(--ink);
    border: var(--border);
    box-shadow: var(--sh);
    font-weight: 800;
}
.skip-link:focus { top: 1rem; }

/* -------------------------------------------------------------------------
   Placeholder artwork
   Six variants, one shared markup. Themes override colours and effects.
   ------------------------------------------------------------------------- */
.art {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--paper-2);
    overflow: hidden;
}
.art > span { position: absolute; border: 2px solid var(--ink); }

/* Accent map. A theme that wants a different palette overrides `.art` — it
   loads after this file, so equal specificity means the theme wins. */
.art-cyan   { --art-accent: var(--cyan); }
.art-orange { --art-accent: var(--orange); }
.art-lime   { --art-accent: var(--lime); }
.art-purple { --art-accent: var(--purple); }
.art-pink   { --art-accent: var(--pink); }
.art-yellow { --art-accent: var(--yellow); }

/* grid — four aligned blocks */
.art--grid .art__a { top: 8%;  left: 6%;  width: 40%; height: 38%; background: var(--art-accent); }
.art--grid .art__b { top: 8%;  right: 6%; width: 40%; height: 38%; background: var(--paper); }
.art--grid .art__c { bottom: 8%; left: 6%; width: 40%; height: 38%; background: var(--paper); }
.art--grid .art__d { bottom: 8%; right: 6%; width: 40%; height: 38%; background: var(--ink); }

/* orbit — circles around a centre */
.art--orbit .art__a {
    top: 50%; left: 50%; width: 44%; height: 58%;
    background: var(--art-accent); border-radius: 50%;
    transform: translate(-50%, -50%);
}
.art--orbit .art__b { top: 12%; left: 12%; width: 22%; height: 29%; border-radius: 50%; background: var(--paper); }
.art--orbit .art__c { bottom: 12%; right: 14%; width: 17%; height: 22%; border-radius: 50%; background: var(--ink); }
.art--orbit .art__d { top: 16%; right: 10%; width: 26%; height: 12%; background: var(--paper); }

/* wave — stacked bars */
.art--wave .art__a { left: 0; right: 0; top: 16%;    height: 13%; background: var(--art-accent); border-inline: none; }
.art--wave .art__b { left: 12%; right: 0; top: 38%;  height: 13%; background: var(--paper); border-right: none; }
.art--wave .art__c { left: 0; right: 22%; top: 60%;  height: 13%; background: var(--ink); border-left: none; }
.art--wave .art__d { left: 30%; right: 8%; top: 80%; height: 9%;  background: var(--art-accent); }

/* stack — offset cards */
.art--stack .art__a { top: 12%; left: 10%; width: 58%; height: 56%; background: var(--paper); }
.art--stack .art__b { top: 22%; left: 21%; width: 58%; height: 56%; background: var(--art-accent); }
.art--stack .art__c { top: 32%; left: 32%; width: 58%; height: 56%; background: var(--ink); }
.art--stack .art__d { display: none; }

/* split — one hard vertical division */
.art--split .art__a { inset: 0 52% 0 0; background: var(--art-accent); border: none; }
.art--split .art__b { inset: 0 0 0 52%; background: var(--ink); border: none; }
.art--split .art__c { top: 22%; left: 12%; width: 28%; height: 28%; border-radius: 50%; background: var(--paper); }
.art--split .art__d { bottom: 18%; right: 12%; width: 30%; height: 16%; background: var(--paper); }

/* type — big letterform block */
.art--type .art__a { inset: 8%; background: var(--art-accent); }
.art--type .art__b { top: 24%; left: 22%; width: 16%; height: 52%; background: var(--ink); }
.art--type .art__c { top: 24%; left: 44%; width: 34%; height: 16%; background: var(--ink); }
.art--type .art__d { bottom: 24%; left: 44%; width: 34%; height: 16%; background: var(--ink); }

/* -------------------------------------------------------------------------
   Motion preferences — every theme inherits this
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}