@import url("fonts.css");

:root {
    color-scheme: dark;

    /* Surfaces */
    --page: #111111;
    --bar: #1d1f21;
    --card: #1f1f24;
    --tab: #27292d;
    --inset: #050505;
    --line: #333333;

    /* Divider lines that fade out at both ends */
    --fade-x: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
    --fade-y: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);

    /* Text */
    --text: #f6f6f6;
    /* images/GreySleepingDragon.svg (the 404 dragon) has this colour as its fill; change both together */
    --text-body: #9c9da1;
    --text-meta: #8b8c8f;

    /* Accents */
    /* images/RedLogoDragon.svg (the top bar logo) and RedLogoDragonOutline.svg (the Access sign-in logo) have this colour as their fill; change them together */
    --red: #d5382f;
    --led-red: #f42d37;
    --led-green: #06c552;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Maison Mono Medium", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 18px;
    --gutter: 16px;
    --max: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

/* At least as tall as the window, so the footer sits at the bottom of short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--page);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

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

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

.mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- Top bar ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 0;
    padding-top: max(12px, env(safe-area-inset-top));
    background: linear-gradient(var(--page) 70%, transparent);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Status lights either side of the bar */
.led {
    flex: none;
    width: 5px;
    height: 28px;
    border-radius: 3px;
}

.led-red {
    background: var(--led-red);
    box-shadow: 0 0 10px rgba(244, 45, 55, 0.6);
}

.led-green {
    background: var(--led-green);
    box-shadow: 0 0 10px rgba(6, 197, 82, 0.6);
}

.bar {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 6px 0 18px;
    background: var(--bar);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.site-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
}

/* The red dragon head logo to the left of the name */
.site-logo {
    display: block;
    width: auto;
    height: 1.6em;
}

/* Dropdown menu, opened by the hamburger button */
.nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--bar);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.nav-links.open {
    display: flex;
}

.nav-links a {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: background 0.15s;
}

.nav-links a:hover {
    background: var(--tab);
}

.nav-links a[aria-current] {
    background: var(--inset);
}

/* "Panel" sits below a divider; the extra class beats the plain link styles.
   The divider is drawn as a separate line in the gap above the link, so the
   link's own highlight on the panel page can't hide it. */
.nav-links .nav-panel {
    position: relative;
    margin-top: 13px;
    color: var(--text-body);
}

.nav-links .nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 1px;
    background: var(--fade-x);
}

.nav-links .nav-panel:hover {
    background: none;
    color: var(--text);
}

/* On the panel page itself, highlight it like the other current links */
.nav-links .nav-panel[aria-current],
.nav-links .nav-panel[aria-current]:hover {
    background: var(--inset);
    color: var(--text);
}

.menu-button {
    display: inline-flex;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--inset);
    color: var(--text);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.menu-button svg {
    width: 22px;
    height: 22px;
}

.menu-button .icon-close {
    display: none;
}

.menu-button[aria-expanded="true"] .icon-open {
    display: none;
}

.menu-button[aria-expanded="true"] .icon-close {
    display: block;
}

/* ---------- Dragon pages ---------- */

/* 404 and Access denied: the grey sleeping dragon over a large message,
   centred in the space between the bars */
main.wrap.dragon-page {
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    text-align: center;
}

.dragon-image {
    display: block;
    width: min(20rem, 70vw);
    height: auto;
}

.dragon-message {
    margin: 0;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: clamp(4rem, 22vw, 7.5rem);
    line-height: 1;
    letter-spacing: 0.06em;
}

/* Words rather than a number, so smaller to fit a phone */
.dragon-message-words {
    font-size: clamp(2rem, 9vw, 4.5rem);
    line-height: 1.1;
}

/* ---------- Panels ---------- */

/* main.wrap, not main, so this beats .wrap's padding */
main.wrap {
    flex: 1;
    align-content: start;
    display: grid;
    gap: 20px;
    padding-top: 8px;
    padding-bottom: 24px;
}

.panel {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 20px 22px;
}

/* Heading tab that hangs from the top edge of the panel */
.panel-tab {
    display: table;
    margin: -1px auto 20px;
    padding: 10px 28px 11px;
    background: var(--tab);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

/* ---------- Buttons ---------- */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--tab);
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.button:hover {
    border-color: #555;
}

.button-primary {
    background: var(--red);
    border-color: var(--red);
}

.button-primary:hover {
    background: #e0463d;
    border-color: #e0463d;
}

/* ---------- Carousel ---------- */

/* Slides with chevrons and dots, run by carousel.js; on Home and Projects */
.hero {
    position: relative;
    min-width: 0;               /* don't let the hidden slides widen the page */
    padding: 32px 0 12px;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 6px var(--card);
}

/* Slides sit side by side; scroll snapping gives swipe support for free */
.slides {
    display: flex;
    margin: 0 7px;              /* stay inside the inset ring */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.slides::-webkit-scrollbar {
    display: none;
}

.slide {
    flex: 0 0 100%;
    display: grid;
    gap: 18px;
    align-content: start;
    padding: 0 15px;
    scroll-snap-align: start;
}

.slide-title {
    font-size: clamp(2.1rem, 8vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.slide-title span {
    color: var(--red);
}

/* On phones the chevrons sit either side of the dots */
.hero-arrow {
    position: absolute;
    bottom: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    background: var(--tab);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.hero-arrow:hover {
    border-color: #555;
}

.hero-arrow svg {
    width: 22px;
    height: 22px;
}

.hero-prev {
    left: 14px;
}

.hero-next {
    right: 14px;
}

.hero p {
    margin: 0;
    max-width: 36rem;
    font-size: 1.05rem;
}

.hero-rule {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-rule::before,
.hero-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fade-x);
}

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-top: 18px;
}

/* Bigger tap target than the visible dot */
.dots button {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.dots button::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    transition: width 0.2s, background 0.2s;
}

.dots button[aria-current="true"]::before {
    width: 16px;
    background: var(--text);
}

@media (min-width: 720px) {
    .hero {
        padding: 56px 0 16px;
    }

    .slide {
        padding: 0 90px;
    }

    /* Chevrons move out to the sides */
    .hero-arrow {
        top: 50%;
        bottom: auto;
        width: 44px;
        height: 44px;
        transform: translateY(-50%);
    }

    .hero-prev {
        left: 22px;
    }

    .hero-next {
        right: 22px;
    }
}

/* Sizes in rem on desktop, so they follow the window-height scaling below */
@media (min-width: 960px) {
    /* Keep the slide content centred as the carousel grows taller */
    .hero {
        display: flex;
        flex-direction: column;
    }

    .slides {
        flex: 1;
    }

    .slide {
        align-content: center;
    }

    .hero {
        padding: 3.5rem 0 1rem;
    }

    .slide {
        gap: 1.125rem;
    }

    .hero-arrow {
        width: 2.75rem;
        height: 2.75rem;
    }

    .dots {
        height: 2.5rem;
        margin-top: 1.125rem;
    }

    .dots button {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slides {
        scroll-behavior: auto;
    }
}

/* ---------- Projects ---------- */

/* Square link around an icon from images/icons.svg, such as the GitHub mark
   or the git branch. Hovering inverts it: a light square with a dark icon. */
.icon-link {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    color: var(--text);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.icon-link svg {
    width: 1.375rem;
    height: 1.375rem;
}

.icon-link:hover {
    background: var(--text);
    border-color: var(--text);
    color: var(--inset);
}

/* Tools a project was made with, as small mono tags */
.tool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tool-list li {
    padding: 0.125rem 0.5rem;
    background: var(--inset);
    border: 1px solid var(--line);
    border-radius: 0.5rem;
}

/* ---------- Utilities ---------- */

/* Hidden visually but still read by screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Footer ---------- */

footer {
    padding: 8px 0 max(28px, env(safe-area-inset-bottom));
    text-align: center;
}

/* ---------- Desktop ---------- */

@media (min-width: 720px) {
    :root {
        --gutter: 24px;
    }

    /* A compact dropdown under the button rather than full width */
    .nav-links {
        left: auto;
        width: 260px;
    }

    .panel {
        padding: 0 28px 28px;
    }
}

/* Wider screens: use most of the width, with margins that grow with the
   window, up to a cap so lines don't get too long on very wide monitors */
@media (min-width: 960px) {
    :root {
        --gutter: clamp(24px, 4vw, 64px);
        --max: 1680px;
    }
}

/* Scale to the window height on desktop, the same on every page.
   Vertical sizes here (and in each page's own stylesheet) are in rem, and the
   root font size shrinks in proportion when the window is shorter than the
   home page's natural height (--fit-height), so everything scales together and
   keeps its proportions. It never goes above 16px (full size) or below 60%,
   where pages scroll instead. */
@media (min-width: 960px) {
    html {
        --fit-height: 880;
        font-size: clamp(9.6px, calc(100vh * 16 / var(--fit-height)), 16px);
        font-size: clamp(9.6px, calc(100dvh * 16 / var(--fit-height)), 16px);
    }

    /* Top bar */
    .topbar {
        padding: 0.75rem 0;
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .led {
        height: 1.75rem;
    }

    .bar {
        height: 3.5rem;
        border-radius: 1.25rem;
    }

    .menu-button {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.875rem;
    }

    .menu-button svg {
        width: 1.375rem;
        height: 1.375rem;
    }

    /* Page layout and panels */
    main.wrap {
        gap: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
    }

    .panel {
        padding: 0 1.75rem 1.75rem;
    }

    .panel-tab {
        margin-bottom: 1.25rem;
        padding: 0.625rem 1.75rem 0.6875rem;
    }

    /* Buttons */
    .buttons {
        gap: 0.625rem;
    }

    .button {
        min-height: 2.75rem;
        padding: 0 1.25rem;
        border-radius: 0.875rem;
    }

    footer {
        padding: 0.5rem 0 max(1.75rem, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}