/* Base: design tokens, font, reset, shared utilities, keyboard focus ring.

   Breakpoints, written out in each file since media queries cannot read custom properties:
   480px (small phones), 768px (phones), 991px (tablets). A few components add their own:
   303px and 341px (narrowest phones: footer, viewer), 900px (project board), 1328px and
   1365px (drawings and carousels on mid-size screens). Touch devices are targeted with
   (hover: none), (pointer: coarse), the query the scripts use as well. */


/* Tokens */

:root {
    /* Colours */
    --bg: #1a1a1a;
    --bg-rgb: 26 26 26;
    --bg-deep: #111;
    --viewer-bg: #121212;
    --black: #000;
    --white: #fff;
    --muted: rgb(255 255 255 / 45%);
    --red: #ff364a;
    --red-rgb: 255 54 74;
    --red-light: #ff4a5c;
    --green: #4ade80;

    /* Paper and ink: ruled notebook, project intro sheet, polaroid card, photo border, tape. */
    --notebook-bg: #f2f0eb;
    --notebook-line: rgb(140 135 125 / 35%);
    --notebook-text: var(--bg);
    --intro-bg: #f5f0e8;
    --polaroid: #e8e8e8;
    --photo-paper: #fdfdfd;
    --tape: #2a2a2a;
    --placeholder: #222;
    --ink: #111;
    --ink-soft: #333;

    /* Fonts */
    --font-display: 'Bebas Neue', 'Impact', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-sketch: 'Skribblugh', 'Permanent Marker', cursive;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-sheet: cubic-bezier(0.25, 1, 0.36, 1);
    --ease-gallery: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 0.22s;
    --dur-base: 0.3s;
    --dur-med: 0.55s;
    --sketch-timing: 0.3s steps(1) infinite;

    /* Layout */
    --content-max: 1200px;
    --a4: 1.414;
    --carousel-chrome: 143px;

    /* Torn edge of the project panels: the pencil line, and the mask that cuts the background
       along it. */
    --tear-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 20' preserveAspectRatio='none'%3E%3Cpath d='M 0 12 L 15 11 L 30 12 L 50 13 L 65 14 L 85 14 L 100 12 L 115 9 L 130 6 L 145 3 L 125 7 L 160 8 L 180 8 L 195 10 L 210 12 L 230 13 L 255 14 L 275 14 L 285 12 L 295 10 L 310 10 L 330 11 L 350 11 L 375 11 L 390 10 L 405 10 L 415 13 L 425 16 L 410 15 L 435 15 L 460 14 L 480 13 L 500 12' stroke='white' stroke-width='2.5' fill='none' stroke-linejoin='miter' stroke-linecap='round'/%3E%3C/svg%3E");
    --tear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 20' preserveAspectRatio='none'%3E%3Cpath d='M 0 12 L 15 11 L 30 12 L 50 13 L 65 14 L 85 14 L 100 12 L 115 9 L 130 6 L 145 3 L 125 7 L 160 8 L 180 8 L 195 10 L 210 12 L 230 13 L 255 14 L 275 14 L 285 12 L 295 10 L 310 10 L 330 11 L 350 11 L 375 11 L 390 10 L 405 10 L 415 13 L 425 16 L 410 15 L 435 15 L 460 14 L 480 13 L 500 12 L 500 20 L 0 20 Z' fill='black'/%3E%3C/svg%3E");
}


/* Font */

/* woff2 first: 11 KB lighter, and it is the logo font. Browsers without it fall back to woff. */
@font-face {
    font-family: Skribblugh;
    src: url('../fonts/SkribblughRegular-XGW02.woff2') format('woff2'),
        url('../fonts/SkribblughRegular-XGW02.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Reset */

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

/* The document itself never scrolls: each .page is its own scroll container. */
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--white);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a,
button {
    color: inherit;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* Images fill their frame, which sets the size and the ratio. */
img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-select: none;
    user-select: none;
}

@media (hover: none), (pointer: coarse) {
    /* No Android tap highlight on controls, including the sheets that open the viewer. */
    a,
    button,
    .section-stack-item,
    .drawing-sheet-wrap {
        -webkit-tap-highlight-color: transparent;
    }
}


/* Utilities */

.font-sketch { font-family: var(--font-sketch); }

/* Read by screen readers, not shown: the word a drawn sign stands for. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Holder of the SVG filters and clip paths: takes no room. */
.svg-filters {
    position: absolute;
    overflow: hidden;
}

/* Shown only without JavaScript, above everything else. */
.noscript-notice {
    position: relative;
    z-index: 10000;
    max-width: 34rem;
    margin: 18vh auto 0;
    padding: 0 24px;
    color: var(--white);
    font-family: sans-serif;
    line-height: 1.6;
}

.noscript-notice-title {
    font-size: 2rem;
    font-weight: 700;
}

.noscript-notice a { color: var(--white); }


/* Skip link */

/* Hidden above the viewport until it takes focus on the first Tab. */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 200;
    padding: 14px 26px;
    background: var(--red);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus { transform: translate(-50%, 0); }


/* Focus ring */

/* :focus-visible only, so the outline never shows on a mouse click. Declared here, before the
   components, so that a component can adjust its own ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
    border-radius: 2px;
}

/* A page takes focus after a navigation only so that the keyboard scrolls it; it is not a
   control, so it shows no focus ring. The two rules stay apart: a browser that does not know
   :focus-visible drops any rule whose selector list contains it, and must still get the first
   one. */
.page:focus { outline: none; }

.page:focus-visible {
    outline: none;
    border-radius: 0;
}


/* Language switch */

/* The page in the other language fades in over the old one, a third of a second, soft at both
   ends: what does not change stays still, only the words seem to turn into the others (Even,
   22/10/2026: almost invisible, very fluid, after the torn page he no longer wanted). The
   class only exists during the switch (i18n.js). */
@media (prefers-reduced-motion: no-preference) {
    .is-switching-language::view-transition-old(root),
    .is-switching-language::view-transition-new(root) {
        animation-duration: 0.32s;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
}


/* Sketch animation */

/* Boiling line: three displacement filters in turn make a stroke look redrawn by hand. */
@keyframes sketch-wobble {
    0%, 33% { filter: url("#sketch-1"); }
    34%, 66% { filter: url("#sketch-2"); }
    67%, 100% { filter: url("#sketch-3"); }
}