/* The Creative Independent — Ten Years
   Adapted from /welcome/css/style.css
   Palette sampled from the TCI10 flyer: soft graphite on paper,
   nothing darker than the pencil ever got. */

:root {
    --paper:  #FFFFFF;  /* white */
    --ink:    #000000;  /* black */
    --muted:  #000000;  /* black */
    --faint:  #000000;  /* black */
    --wash:   #E3DFD8;  /* the warmer paper the type sits on */
}

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

html {
    overflow-x: hidden;
}
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 26px;
    color: var(--ink);
    background-color: var(--paper);
    padding: 15px;
    margin: 0;
    overflow-x: hidden;
}
button {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Header */
header {
    position: relative;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    position: relative;
    margin-bottom: 30px;
}
#top-spiral {
    position: relative;               /* holds the coloured pixels */
    display: block;
    width: 111px;
    height: 101px;
    background: url("../images/logo-spiral.svg") no-repeat;
    background-size: 100% 100%;
}
/* one pixel of the spiral turning a palette colour, then fading back */
#top-spiral .logo-pixel {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease;
}
#top-spiral .logo-pixel.on {
    opacity: 1;
    transition: opacity 0.8s ease;
}
nav#modes {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
nav#modes a {
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    margin-right: 20px;
}
nav#modes a:last-child {
    margin-right: 0;
}
nav#modes a:hover {
    text-decoration: underline;
}
nav#modes a#subscribe-button {
    display: block;
    width: 27px;
    height: 17px;
    background: url("../images/email-icon.svg") no-repeat;
    background-size: 100% 100%;
}
nav#modes a#subscribe-button:hover {
    height: 28px;
    background-image: url("../images/email-open-icon.svg");
    border: 0;
    margin-top: -11px;
}

/* Article */
article {
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
}
/* Courier is left exactly as thecreativeindependent.com sets it:
   16px/1.5, no smoothing override, no letter-spacing. */
header, .report, .method, #contents,
.quote-card, .book, button.more {
    -webkit-text-size-adjust: none;
}
/* The Georgia keeps its smoothing */
article > p, p#credits, #masthead h1, .report h2, .report h3 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
}
p {
    max-width: 800px;
    line-height: 1.5em;
    margin: 0 auto 1.5em auto;
}
/* links in running text: black, with the drawn dotted underline defined
   at the end of this file (shared with the word index) */
p a {
    color: var(--ink);
}
p.signoff {
    margin-top: 2em;
}
/* the drawn spiral-and-trail under the name, as in TCI's emails;
   shown at half its pixel size so it stays crisp on dense screens */
p.signoff .signoff-snail {
    display: block;
    width: 250px;
    max-width: 100%;
    height: auto;
    margin-top: 0.6em;
}

/* ---------------------------------------------------------------
   Masthead — the txt file's own header, set in type
   --------------------------------------------------------------- */

#masthead {
    position: relative;
    max-width: 933px;
    margin: 0 auto 90px auto;
    font-family: Courier, "Courier New", monospace;
    text-align: center;
}

/* Drawn, not set: outlined serif with a turbulence wobble on the
   stroke, after the flyer's hand-lettered display type. */
#masthead h1 {
    margin-top: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 82px;
    font-weight: normal;
    line-height: 0.98em;
    letter-spacing: 0.01em;
    margin: 0.25em 0 0.3em 0;
    color: transparent;
    -webkit-text-stroke: 0.95px var(--ink);
    text-stroke: 0.95px var(--ink);
    filter: url(#pencil);
    opacity: 0.48;
}
#masthead .ten {
    display: block;
    font-size: 150px;
    line-height: 0.9em;
    letter-spacing: 0.03em;
}
/* letters fill with colour quickly, then fade slowly back to outline */
#masthead h1 .letter {
    transition: color 4s ease;
}
#masthead h1 .letter.lit {
    color: var(--fill);
    transition: color 1.5s ease;
}
#masthead .dek {
    font-size: 16px;
    line-height: 1.6em;
    max-width: 560px;
    margin: 0 auto;
    color: var(--muted);
}

/* No text-stroke support: fall back to solid graphite, no filter. */
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
    #masthead h1 {
    margin-top: 0;
        color: var(--ink);
        filter: none;
    }
}

/* ---------------------------------------------------------------
   ASCII rules — the ==== and ---- of the source document
   --------------------------------------------------------------- */

.rule {
    color: var(--faint);
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}
.rule::before {
    content: "==================================================================================================================================================================";
}

/* ---------------------------------------------------------------
   Report — everything lifted from the analysis
   --------------------------------------------------------------- */

.report {
    max-width: 933px;
    margin: 0 auto 90px auto;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
}
.report a {
    color: var(--ink);
}
.report h2, .report h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    max-width: 800px;
    line-height: 1.5em;
    margin-left: 0;
    padding-top: 20px;
    margin-bottom: 40px;
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
    color: var(--ink);
}
.report h4 {
    font-size: 16px;
    font-weight: normal;
    font-style: italic;
    margin: 0 0 0.8em 0;
}

/* A single finding */
.entry {
    margin-bottom: 60px;
}
.entry .body {
    padding-left: 0;
}
.entry p,
.method p {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    max-width: 76ch;
    margin: 0 0 1em 0;
}

/* Dot leaders */
ul.leaders {
    list-style: none;
    margin: 0 0 1.6em 0;
    padding: 0;
    font-size: 16px;
}
ul.leaders li {
    display: flex;
    align-items: baseline;
    line-height: 1.8em;
}
ul.leaders .label {
    flex: 0 1 auto;
}
ul.leaders .dots {
    flex: 1 1 1ch;
    min-width: 1ch;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    color: var(--muted);
}
ul.leaders .dots::before {
    content: " ...........................................................................................................................";
}
ul.leaders .num {
    flex: 0 0 auto;
    padding-left: 0.6ch;
    font-variant-numeric: tabular-nums;
}
ul.leaders .qual {
    color: var(--muted);
    padding-left: 1ch;
}
ul.leaders .rank {
    flex: 0 0 3.5ch;
    color: var(--muted);
    text-align: right;
    padding-right: 1.2ch;
}
ul.leaders li:hover .dots {
    color: var(--ink);
}

/* Headline block gets a little more air */
#headline ul.leaders {
    font-size: 16px;
}
#headline ul.leaders li {
    line-height: 2.1em;
}

/* Quote cards, after /welcome */
.quotes {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 1.4em;
}
.quote-card {
    flex: 1 1 380px;
    max-width: 380px;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
}
.quote-card p {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    margin: 0 0 1em 0;
    max-width: none;
    /* the highlighter, in the interview's own colour */
    background-color: var(--hl, var(--wash));
    color: var(--hlc, var(--ink));
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 3px 4px;
    display: inline;
}
.quote-card .attrib {
    display: block;
    margin-top: 0.75em;
    color: var(--ink);
}
.quote-card .link-to-article {
    display: inline;
    color: var(--ink);
    /* the link style from the interview pages */
    text-decoration: underline dotted;
    text-decoration-thickness: 0.05rem;
    text-decoration-skip-ink: none;
    text-underline-offset: 4px;
}
.quote-card a.link-to-article:hover {
    text-decoration-style: solid;
}

/* Name lists */
ul.names {
    list-style: none;
    margin: 0 0 1em 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5em;
    columns: 2;
    column-gap: 40px;
}
ul.names.single {
    columns: 1;
}
ul.names li {
    padding-left: 2ch;
    text-indent: -2ch;
    break-inside: avoid;
    margin-bottom: 0.2em;
}
ul.names li::before {
    content: "- ";
    color: var(--muted);
}
ul.names a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
}
ul.names a:hover {
    border-bottom-style: solid;
}
ul.names .tag {
    color: var(--muted);
}

/* Collapsed long lists */
ul.names.collapsed li:nth-child(n+9) {
    display: none;
}
button.more {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    color: var(--ink);
    cursor: pointer;
    border: 1px dotted var(--muted);
    border-radius: 40px;
    padding: 6px 16px;
    margin-bottom: 1em;
}
button.more:hover {
    border-style: solid;
}

/* Restaurant run-on */
.places {
    font-size: 16px;
    line-height: 1.5em;
    max-width: 76ch;
    margin-bottom: 1em;
}

/* Method note */
.method {
    max-width: 800px;
    margin: 0 auto 90px auto;
    border: 1px dotted var(--muted);
    border-radius: 20px;
    padding: 30px 34px 20px 34px;
}
.method h2 {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    margin: 0 0 1em 0;
}

/* Section nav */
#contents {
    max-width: 800px;
    margin: 0 auto 90px auto;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
}
#contents ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
#contents li {
    line-height: 1.5em;
}
#contents a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
}
#contents a:hover {
    border-bottom-style: solid;
}

/* Credits */
/* the nod back to the five-year site, sitting just above the credits rule */
p#five-years {
    font-style: italic;
    margin-top: 50px;
    margin-bottom: 0;
}

p#credits {
    font-size: 14px;
    margin-top: 50px;
    border-top: 1px dotted var(--faint);
    padding-top: 10px;
}
/* the five-year line already carries the gap above it */
p#five-years + p#credits {
    margin-top: 50px;
}

/* ---------------------------------------------------------------
   Mobile
   --------------------------------------------------------------- */

@media(max-width: 780px) {
    ul.names {
        columns: 1;
    }
    /* tablets and small laptops: scale with the screen so the 10 stays
       bigger than the words above it */
    #masthead h1 {
        font-size: min(82px, 11vw);
    }
    #masthead .ten {
        font-size: min(150px, 22vw);
    }
}

@media(max-width: 535px) {
    body {
        font-size: 20px;
    }
    article {
        margin-top: 50px;
    }
    /* phones: "TCI Turns" nearly fills the width, the 10 set large below */
    #masthead h1 {
        margin-top: 0;
        font-size: 15vw;
    }
    #masthead .ten {
        font-size: 36vw;
    }
    .entry .body {
        padding-left: 0;
    }
    /* Dot leaders need a width to lead across. Below that, stack the
       label over its figure and let a dotted rule do the same job. */
    ul.leaders li {
        flex-wrap: wrap;
        line-height: 1.5em;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        border-bottom: 1px dotted var(--faint);
    }
    ul.leaders li:last-child {
        border-bottom: 0;
    }
    /* The dots become the line break: rank and label above,
       figure and qualifier together below. */
    ul.leaders .dots {
        flex: 0 0 100%;
        height: 0;
    }
    ul.leaders .dots::before {
        content: none;
    }
    ul.leaders .rank {
        flex: 0 0 auto;
        text-align: left;
        padding-right: 0.8ch;
    }
    ul.leaders .num {
        padding-left: 0;
        flex: 0 1 auto;
        min-width: 0;
    }
    ul.leaders .qual {
        padding-left: 0.8ch;
    }
    #headline ul.leaders {
        font-size: 16px;
    }
    #headline ul.leaders li {
        line-height: 1.5em;
    }
    #headline .num,
    #headline .num.phrase {
        font-size: 16px;
    }
    .method {
        padding: 20px 18px 10px 18px;
    }
}

/* ---------------------------------------------------------------
   Library — the drawn covers. The source art is white line work on
   transparency, so it is inverted to graphite to sit on the paper.
   --------------------------------------------------------------- */

/* Rows of shelves. The books sit in a band capped at 1725px, like the word
   section; no gap between columns, so each book's stretch of dotted plank
   joins its neighbour's, and the planks at either end of a row run on out
   to the edges of the browser (snails.js marks those ends). */
.books {
    --cover-h: 300px;
    --shelf-gutter: 40px;             /* room between the shelf ends and the page edge */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    column-gap: 0;
    row-gap: 56px;
    width: min(100vw - 2 * var(--shelf-gutter), 1725px);
    margin-left: calc(50% - min(50vw - var(--shelf-gutter), 862.5px));
    margin-top: 2.4em;
    padding: 0;
    position: relative;               /* holds the crawling snails */
}
.book {
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
}
.book .book-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
/* the books stand on the shelf: covers sit on the plank's top edge */
.book .book-cover {
    position: relative;
    height: var(--cover-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 18px;
    margin-bottom: 44px;
}
/* the plank: a dotted top edge and a dotted lower edge. It's solid paper and
   sits in front, so the covers standing in it are hidden along their foot. */
.book .book-cover::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px;
    background: var(--paper);
    border-top: 1px dotted color-mix(in srgb, var(--ink) 70%, transparent);
    border-bottom: 1px dotted color-mix(in srgb, var(--ink) 70%, transparent);
}
.book img {
    width: 100%;
    margin-bottom: -6px;              /* stands a few px down into the plank */
    max-height: calc(var(--cover-h) - 6px);
    object-fit: contain;
    object-position: bottom;
    filter: invert(1);
}
/* hovering a book lifts it a little out of the plank */
.book .book-cover > img,
.book .cover-frame {
    transition: transform 0.25s ease;
}
.book:hover .book-cover > img,
.book:hover .cover-frame,
.book:focus-within .book-cover > img,
.book:focus-within .cover-frame {
    transform: translateY(-10px);
}
@media (prefers-reduced-motion: reduce) {
    .book .book-cover > img,
    .book .cover-frame { transition: none; }
}
/* Interviews wear their interviewee's portrait as a round badge on the
   cover's top corner. The frame hugs the drawing, so the badge sits on the
   page's own corner rather than the corner of the shelf cell. */
.book .cover-frame {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    margin-bottom: -6px;              /* stands down into the plank, like the rest */
}
.book .cover-frame > img {
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
}
/* the badge is a drawing of the interviewee; hovering the book brings up
   their photo in colour */
.book .book-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px dotted var(--ink);    /* the same dotted line as the covers and plank */
    background: var(--paper);
}
.book .book-badge img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
    filter: none;                     /* already drawn black on white */
}
.book .book-badge .badge-photo {
    opacity: 0;                       /* swaps in at once, no fade */
}
.book:hover .book-badge .badge-photo,
.book:focus-within .book-badge .badge-photo {
    opacity: 1;
}
@media(max-width: 535px) {
    .book .book-badge {
        top: -12px;
        right: -12px;
        width: 52px;
        height: 52px;
    }
}
.book .book-title,
.book .book-author,
.book .book-pdf,
.book .book-size {
    margin-left: 13px;
    margin-right: 13px;
}
/* the title's lines sit close enough that the highlight runs unbroken from
   one line to the next */
.book .book-title {
    align-self: flex-start;
    line-height: 1.2em;
    margin-bottom: 0.15em;
}
.book .book-title .hl {
    background-color: var(--wash);
    padding: 1px 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* author, link and size sit on 1.5em line spacing, lined up with the title */
.book .book-author {
    color: var(--muted);
    padding: 0 2px;
}
.book .book-pdf {
    align-self: flex-start;
    padding: 0 2px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.book .book-pdf:hover {
    text-decoration-style: dotted;
}
.book .book-size {
    padding: 0 2px;
    color: var(--muted);
}

/* A single cover set inside an entry */
.entry-figure {
    float: right;
    width: 190px;
    margin: 0 0 16px 26px;
    filter: invert(1);
}

@media(max-width: 535px) {
    .books {
        --cover-h: 210px;
        --shelf-gutter: 16px;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        row-gap: 44px;
    }
    .book .book-cover { padding: 0 12px; }
    .entry-figure {
        float: none;
        display: block;
        width: 150px;
        margin: 0 0 18px 0;
    }
}

/* ---------------------------------------------------------------
   The archive as the spiral logo — one block per interview.
   Full-bleed black, so the palettes carry the whole section.
   --------------------------------------------------------------- */

#archive {
    position: relative;
    /* break out of the body's 15px padding to the full viewport */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #000;
    color: #fff;
    padding: 70px 20px 70px 20px;
    margin-top: 90px;
    margin-bottom: 90px;
}
#archive h2 {
    position: relative;
    z-index: 3;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 26px;
    font-style: italic;
    font-weight: normal;
    color: #fff;
    max-width: 933px;
    margin: 0 auto 30px auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#spiral-archive {
    position: relative;
    z-index: 3;
    /* the spiral, its year marks and the buttons all sit in one box
       39.2 wide by 36.2 tall, so cap the width to keep that box inside the
       viewport's height, with a little room to breathe */
    max-width: min(1320px, calc((100vh - 40px) * 39.2 / 36.2));
    max-width: min(1320px, calc((100svh - 40px) * 39.2 / 36.2));
    margin: 30px auto 60px auto;
}
#spiral-archive svg {
    display: block;
    width: 100%;
    height: auto;
    shape-rendering: crispEdges;
    overflow: hidden;
}
/* no focus ring or outline anywhere in the graphic */
#spiral-archive svg,
#spiral-archive svg a,
#spiral-archive svg a:focus,
#spiral-archive svg a:focus-visible,
#spiral-archive svg rect,
#spiral-archive svg rect:focus {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
#spiral-archive svg .hover-outline {
    fill: none;
    stroke: #fff;
    stroke-width: 0.05;
}
.spiral-mark path {
    stroke: #fff;
    /* same fixed hairline as the year marks, for the same Safari reason */
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}
.spiral-mark text {
    fill: #fff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 0.5px;
}
#spiral-archive-caption {
    position: relative;
    z-index: 3;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    color: #fff;
    max-width: 66ch;
    margin: 30px auto 0 auto;
}
#spiral-archive-caption p {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    color: #fff;
    max-width: none;
    margin: 0 0 1.2em 0;
}
#spiral-archive-caption blockquote {
    margin: 0 0 1.2em 0;
    padding-left: 2ch;
    border-left: 1px dotted #fff;
}
#spiral-archive-caption .source {
    margin-bottom: 1.6em;
}
#spiral-archive-caption .continue {
    margin-bottom: 0;
}
/* white on the black section: the drawn dotted underline (end of file) in
   white, and its descender halo cut in black rather than paper */
#spiral-archive-caption a {
    color: #fff;
    text-shadow:
        1px 0 #000, -1px 0 #000,
        2px 0 #000, -2px 0 #000,
        3px 0 #000, -3px 0 #000;
}

/* the card that follows the cursor */
.spiral-card {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 250px;
    margin: 0;
    padding: 10px;
    background: var(--card-bg, #fff);
    color: var(--card-fg, #000);
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.35em;
    pointer-events: none;
    opacity: 0;
}
.spiral-card.on { opacity: 1; }
.spiral-card .c-photo {
    width: 78px;
    aspect-ratio: 1 / 1;
    margin-bottom: 9px;
    background-color: var(--card-fg, #000);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.spiral-card figcaption span {
    display: block;
}
.spiral-card .c-voc,
.spiral-card .c-date {
    opacity: 0.75;
    margin-top: 5px;
}

@media(max-width: 535px) {
    #archive { padding: 40px 15px 40px 15px; }
    .spiral-card { width: 190px; }
}

/* Snails, drifting in around the spiral */
.snail {
    position: absolute;
    z-index: 1;
    height: auto;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    pointer-events: none;
}
.snail.on {
    opacity: 1;
}

/* Year marks — same hand as the launch mark, off until asked for */
.year-marks,
.spiral-mark {
    opacity: 0;
    transition: opacity 0.45s ease;
}
#spiral-archive.years-on .year-marks,
#spiral-archive.years-on .spiral-mark {
    opacity: 1;
}
.year-marks line {
    stroke: #fff;
    /* A fixed hairline, not a fraction of a spiral cell: scaled that thin,
       iPhone Safari (with the spiral's crisp edges) drew diagonal marks as
       fat blobs. */
    stroke-width: 1.2px;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}
.year-marks text {
    fill: #fff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 0.5px;
}
/* The spiral's labels are sized in its own drawing units, so on a phone they
   shrink to about 5px. Set them larger there. The launch note stays a
   touch smaller than the years so its two close-set lines don't collide. */
@media(max-width: 535px) {
    .year-marks text { font-size: 0.85px; }
    .spiral-mark text { font-size: 0.7px; }
    /* at that size the outermost labels (2026) run past the drawing's edge;
       let them spill into the side margin instead of being clipped */
    #spiral-archive svg { overflow: visible; }
}
.years-toggle {
    position: absolute;
    top: 8%;
    right: 9%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 4px;
}
.years-toggle .box {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border: 1px solid #fff;
    background: transparent;
}
.years-toggle[aria-pressed="false"] .box {
    background: #fff;
}
.years-toggle:hover .box {
    box-shadow: inset 0 0 0 1px #fff;
}

/* Watch the website grow — the button mirrors the years toggle on the
   left, and the date ticks in the bottom corner while it plays */
.spiral-controls {
    position: absolute;
    top: 4%;
    right: 9%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.spiral-controls .years-toggle {
    position: static;
}
.grow-toggle .icon {
    display: block;
    flex: 0 0 auto;
    width: 12px;
    height: 14px;
}
.grow-toggle .icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #fff;
}
/* "Pause / Play quotes" is marked with the watercolour spiral, which needs a
   square; it turns a half-turn each time the quotes are toggled */
.quotes-toggle .icon {
    width: 16px;
    height: 16px;
    margin-left: -2px;
    margin-right: -2px;
}
.quotes-toggle .icon img {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}
.quotes-toggle[aria-pressed="true"] .icon img {
    transform: rotate(180deg);
}
/* quotes are held back while the spiral replays its growth or shows only
   one kind of piece, so the toggle steps aside until it's done */
#spiral-archive.growing .quotes-toggle,
#spiral-archive.filtering .quotes-toggle {
    display: none;
}
.grow-toggle:hover .lbl {
    text-decoration: underline dotted;
    text-underline-offset: 4px;
}
.grow-date {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 4;
    font-family: Courier, "Courier New", monospace;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.grow-date.on {
    opacity: 1;
}
/* the launch note would sit under the date, so it waits until the spiral is
   whole again; each year mark fades in as the spiral reaches its year */
#spiral-archive.growing .spiral-mark {
    opacity: 0;
}
.year-marks line,
.year-marks text {
    transition: opacity 0.8s ease;
}
.year-marks .pending {
    opacity: 0;
    transition: none;
}
/* a quote pinned to a block that hasn't appeared yet would point at nothing */
#archive:has(#spiral-archive.growing) .time-quote,
#archive:has(#spiral-archive.growing) #time-quote-layer {
    visibility: hidden;
}

@media(max-width: 535px) {
    .years-toggle {
        position: static;
        margin: 18px auto 0 auto;
        justify-content: center;
    }
    .spiral-controls {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 16px;
        margin-top: 18px;
    }
    .spiral-controls .years-toggle {
        margin: 0;
    }
    .grow-date {
        font-size: 13px;
    }
    /* the dropdown stops floating over the spiral and takes its own line
       above it (the measured left the script sets only applies when it
       floats); scoped by id so it outranks the base rule further down */
    #spiral-archive .kind-filter {
        position: static;
        display: block;
        margin: 0 0 18px 0;
    }
}

/* A quote about time, pinned to the block it came from */
.time-quote {
    position: absolute;
    z-index: 4;
    width: 370px;
    max-width: 78vw;
    margin: 0;
    padding: 13px 15px;
    background: #fff;
    border: 1px dotted #000;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    pointer-events: none;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
}
.time-quote.on {
    opacity: 1;
}
.time-quote q,
.time-quote .who {
    /* the glyphs take the mouse so the text can be selected; the card's
       padding stays transparent to the spiral underneath */
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}
.time-quote q {
    quotes: none;
    background-color: var(--q-bg);
    color: var(--q-fg);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 3px 4px;
}
.time-quote .who {
    display: block;
    margin-top: 0.75em;
    color: #000;
}
.time-quote .who .avatar {
    width: 18px;
    height: 18px;
    object-fit: cover;
    vertical-align: -4px;
    margin-right: 6px;
    background-color: rgba(0, 0, 0, 0.1);
}
.time-quote .who a {
    /* the card ignores the mouse so it never blocks a block, but the
       attribution still has to be clickable */
    pointer-events: auto;
    color: #000;
    text-decoration: underline dotted;
    text-decoration-thickness: 0.05rem;
    text-decoration-skip-ink: none;
    text-underline-offset: 4px;
}
.time-quote .who a:hover {
    text-decoration-style: solid;
}
#time-quote-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 1)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.9));
}
#time-quote-layer line,
#time-quote-layer circle {
    stroke: #fff;
    fill: none;
    stroke-width: 1.4;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}
#time-quote-layer.on line,
#time-quote-layer.on circle {
    opacity: 1;
}

/* While a quote is up, the rest of the section steps back: the text and
   every block but the quote's own go partly transparent, on the same fade
   as the quote. */
#spiral-archive svg rect[data-i] {
    transition: opacity 1.4s ease-in-out;
}
#archive.quote-focus #spiral-archive svg rect[data-i]:not(.focus),
#archive.quote-focus #spiral-archive.years-on .year-marks,
#archive.quote-focus #spiral-archive.years-on .spiral-mark,
#archive.quote-focus .snail.on {
    opacity: 0.3;
}

/* One kind of piece at a time: the rest step right back, further than for
   a quote (and this outranks the quote's dimming, so they stay back) */
#archive #spiral-archive.filtering svg rect[data-i].filtered-out {
    opacity: 0.08;
}

/* the dropdown that picks the kind, up and to the left of the spiral,
   mirroring the controls on the right */
.kind-filter {
    position: absolute;
    top: 4%;
    left: 9%;
    z-index: 4;
}
.kind-filter select {
    appearance: none;
    -webkit-appearance: none;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
    background-color: #000;
    /* a small drawn caret, in white */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0.5 0.5L5 5L9.5 0.5' fill='none' stroke='%23fff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 10px 6px;
    border: 1px dotted #fff;
    border-radius: 0;
    padding: 5px 30px 5px 9px;
    cursor: pointer;
}
/* the border stays dotted in every state, with no focus ring round it
   (browsers count a click on a select as keyboard-style focus) */
.kind-filter select:focus,
.kind-filter select:focus-visible {
    outline: none;
}
.kind-filter option {
    color: #fff;
    background: #000;
}


/* Snail slime, off to the side of the note */
.snails-para {
    position: relative;
}
.slime {
    position: absolute;
    left: calc(100% + 34px);
    top: 0;
    width: 240px;
    margin: 0;
}
.slime img {
    display: block;
    width: 100%;
    height: auto;
}

@media(max-width: 1180px) {
    .slime {
        position: static;
        width: 100%;
        max-width: 330px;
        margin: 0 0 1.6em 0;
    }
}

/* ---------------------------------------------------------------
   Stats as disclosures: the leader row is the button, the working
   is underneath, and the quotes run off sideways.
   --------------------------------------------------------------- */

.stat-list {
    list-style: none;
    margin: 0 0 1.6em 0;
    padding: 0;
    font-size: 16px;
}
.stat-row {
    display: flex;
    align-items: baseline;
    line-height: 2.1em;
    cursor: pointer;
    list-style: none;
}
.stat-row::-webkit-details-marker,
.stat-row::marker {
    display: none;
    content: "";
}
.stat-row .label { flex: 0 1 auto; }
.stat-row .dots {
    flex: 1 1 1ch;
    min-width: 1ch;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    color: var(--muted);
}
.stat-row .dots::before {
    content: " ...........................................................................................................................";
}
.stat-row .num {
    flex: 0 0 auto;
    padding-left: 0.6ch;
    font-variant-numeric: tabular-nums;
}
.stat-row .qual {
    color: var(--muted);
    padding-left: 1ch;
}
.stat-row:hover .label,
details[open] > .stat-row .label {
    background-color: var(--wash);
}
.stat-row.plain {
    cursor: default;
}

.stat-detail {
    padding: 0.6em 0 2.2em 2ch;
}
.stat-detail p {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    max-width: 76ch;
    margin: 0 0 1em 0;
}

/* quotes run sideways inside an open stat */
.stat-detail .quotes {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 10px;
    margin-bottom: 1.4em;
    scroll-snap-type: x proximity;
}
.stat-detail .quotes .quote-card {
    flex: 0 0 330px;
    max-width: 330px;
    scroll-snap-align: start;
}

@media(max-width: 535px) {
    .stat-row {
        flex-wrap: wrap;
        line-height: 1.5em;
        padding-bottom: 0.5em;
        margin-bottom: 0.5em;
        border-bottom: 1px dotted var(--ink);
    }
    .stat-row .dots {
        flex: 0 0 100%;
        height: 0;
    }
    .stat-row .dots::before { content: none; }
    .stat-row .num {
        padding-left: 0;
        flex: 0 1 auto;
        min-width: 0;
    }
    .stat-detail { padding-left: 0; }
    .stat-detail .quotes .quote-card { flex: 0 0 82vw; max-width: 82vw; }
}

/* Tiny portrait beside each attribution */
.quote-card .avatar {
    width: 18px;
    height: 18px;
    object-fit: cover;
    vertical-align: -4px;
    margin-right: 6px;
    background-color: var(--wash);
}

/* ---------------------------------------------------------------
   The word tally — the word itself set big, the count in Courier
   --------------------------------------------------------------- */

.word-list {
    margin: 1.6em 0 1.8em 0;
}
.word-row {
    position: relative;               /* holds the crawling snail */
    display: flex;
    align-items: baseline;
    line-height: 1.9em;
}
/* the drawn snail that now and then crawls along a row's dots */
.index-snail {
    position: absolute;
    left: 0;
    z-index: 2;
    height: auto;
    max-width: none;
    pointer-events: none;
    opacity: 0;
}
.index-snail.on {
    opacity: 1;
}
.word-row .label {
    flex: 0 1 auto;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 26px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.word-row .dots {
    flex: 1 1 1ch;
    min-width: 1ch;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    color: var(--muted);
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
}
.word-row .dots::before {
    content: " ...........................................................................................................................";
}
.word-row .num {
    flex: 0 0 auto;
    padding-left: 0.6ch;
    font-family: Courier, "Courier New", monospace;
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}
.word-row .qual {
    flex: 0 0 auto;
    padding-left: 1.2ch;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    color: var(--muted);
}

/* on phones the rows keep the desktop layout, word, dots, number on one
   line, just set a little smaller so they fit */
@media(max-width: 535px) {
    .word-row .label { font-size: 22px; }
    .word-row .num { font-size: 20px; }
}

/* ---------------------------------------------------------------
   One word at a time
   --------------------------------------------------------------- */

#word-viewer {
    position: relative;
    /* a little less room before the index than between other sections */
    margin-bottom: 50px;
}
#wordbox {
    margin: 0.5em 0 0.5em 0;
}
.wordbox-head {
    /* full bleed, but capped at 1725px and centred */
    width: min(100vw, 1725px);
    margin-left: calc(50% - min(50vw, 862.5px));
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    /* one shorthand only — a later `padding:` was wiping the side values */
    padding: 34px 34px 20px 34px;
    margin-bottom: 0.4em;
}
/* the word sits on its own line, the arrows tuck in underneath it */
.wordbox-head .wordbox-strip { order: 0; flex: 0 0 100%; }
.wordbox-head .wordbox-term { order: 1; flex: 0 0 100%; }

/* Every word in a sideways-scrolling line above the big one, drawn in the
   same hand. The edges fade so the run reads as carrying on. */
.wordbox-strip {
    display: flex;
    align-items: baseline;
    gap: 0.55em;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 40px 12px 0;
    margin-bottom: 4px;
    /* a dashed rule under the run of words */
    border-bottom: 1px dashed var(--ink);
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000, #000 calc(100% - 40px), transparent);
}
/* the left edge only fades once the run has been scrolled along */
.wordbox-strip.scrolled {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.strip-word {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0 3px;
    cursor: pointer;
    white-space: nowrap;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 56px;
    line-height: 1.1em;
    letter-spacing: 0.01em;
    color: transparent;
    -webkit-text-stroke: 0.9px var(--ink);
    text-stroke: 0.9px var(--ink);
    filter: url(#pencil);
    opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.strip-word:hover,
.strip-word.on {
    opacity: 1;
}
/* on hover, and for the word showing below, the outline fills with the
   word's own colour */
.strip-word:hover,
.strip-word.on {
    color: var(--fill, var(--ink));
}
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
    .strip-word { color: var(--ink); filter: none; }
}
@media(max-width: 535px) {
    .strip-word { font-size: 34px; }
    .wordbox-strip { padding: 6px 24px 10px 0; }
}
.wordbox-head .wordbox-nav[data-step="-1"] { order: 2; }
.wordbox-head .wordbox-nav[data-step="1"] { order: 3; }
.wordbox-term {
    text-align: center;
    margin-bottom: 10px;
}
.wordbox-term .term {
    /* inline-block so it is only as wide as the word, which lets fit()
       in wordbox.js measure it; the vw cap keeps it in before JS runs */
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: min(208px, 16vw);
    line-height: 0.98em;
    letter-spacing: 0.01em;
    /* drawn, like TCI Turns 10 */
    color: transparent;
    -webkit-text-stroke: 1.1px var(--ink);
    text-stroke: 1.1px var(--ink);
    filter: url(#pencil);
    opacity: 0.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wordbox-term .term::before { content: "\201C"; }
.wordbox-term .term::after  { content: "\201D"; }

@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
    .wordbox-term .term {
        color: var(--ink);
        filter: none;
    }
}
.wordbox-term .count {
    display: block;
    margin-top: 1.9em;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    color: var(--muted);
}
.wordbox-nav {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    background: transparent;
    border: 1px dotted var(--ink);
    padding: 0;
    cursor: pointer;
}
.wordbox-nav > svg {
    /* fixed height, width from the aspect ratio, so it sits dead centre */
    width: auto;
    height: 21px;
    display: block;
}
.wordbox-nav:hover {
    border-style: solid;
}
/* A real masonry run: a fine-grained grid where every item claims as many
   rows as its own height needs, and some images take two columns. */
.wordbox-quotes {
    margin-top: 1.6em;
    display: grid;
    /* full bleed, but capped at 1725px and centred */
    width: min(100vw, 1725px);
    margin-left: calc(50% - min(50vw, 862.5px));
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-auto-rows: 8px;
    column-gap: 26px;
    row-gap: 0;
    grid-auto-flow: row dense;
    align-items: start;
    padding: 6px 20px 10px 20px;
    overflow-x: clip;
    overflow-clip-margin: 8px;
}
.wordbox-quotes .quote-card {
    width: 100%;
    max-width: none;
    margin: 0;
    break-inside: avoid;
}
/* One line from an interviewee's "recommends" list that uses the word:
   plain type in a dashed box, set apart from the coloured quotes */
.wordbox-quotes .rec-card {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed var(--ink);
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    break-inside: avoid;
}
.wordbox-quotes .rec-card .rec-label {
    display: block;
    margin-bottom: 0.6em;
    color: var(--muted);
}
.wordbox-quotes .rec-card .rec-label a {
    color: var(--ink);
    text-decoration: underline dotted;
    text-decoration-thickness: 0.05rem;
    text-decoration-skip-ink: none;
    text-underline-offset: 4px;
}
.wordbox-quotes .rec-card .rec-label a:hover {
    text-decoration-style: solid;
}
.wordbox-quotes .rec-card p {
    margin: 0;
    max-width: none;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
}
@media(max-width: 620px) {
    .wordbox-quotes .rec-card p { overflow-wrap: anywhere; }
}
.wordbox-quotes .pulled-photo {
    /* shrink to the image so the caption sits under it at the same width,
       rather than running the full width of the cell */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    break-inside: avoid;
}
.wordbox-quotes .pulled-photo {
    display: block;
}
/* every third image runs two columns wide */
.wordbox-quotes .pulled-photo.wide {
    grid-column: span 2;
}
.wordbox-quotes .pulled-photo a.photo-link {
    display: block;
    text-decoration: none;
    text-align: center;
}
.wordbox-quotes .pulled-photo img {
    /* capped in height but never cropped: a tall image scales down whole,
       so it simply sits narrower than its column */
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 430px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--wash);
}
.wordbox-quotes .pulled-photo a.photo-link:hover img {
    opacity: 1;
}
.wordbox-quotes .pulled-photo figcaption {
    text-align: left;
    margin-top: 6px;
    font-family: Courier, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.3em;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Phones fit one column. A two-wide image would conjure a second column
   past the screen's edge, so here everything runs a single column wide. */
@media(max-width: 620px) {
    .wordbox-quotes {
        grid-template-columns: minmax(0, 1fr);
        padding: 6px 16px 10px 16px;
    }
    .wordbox-quotes .pulled-photo.wide {
        grid-column: auto;
    }
    .wordbox-quotes > * {
        min-width: 0;
    }
    /* a long unbroken run, like a web address, wraps instead of pushing out */
    .wordbox-quotes .quote-card p,
    .wordbox-quotes .attrib {
        overflow-wrap: anywhere;
    }
}
.wordbox-none {
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    color: var(--muted);
}

/* the index words are buttons that drive the viewer */
.word-row .label {
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}
.word-row .label:hover {
    color: var(--ink);
}

@media(max-width: 535px) {
    .wordbox-term .term { font-size: min(72px, 16vw); }
    .wordbox-head { gap: 10px; padding: 22px 16px 8px 16px; }
    .wordbox-nav { width: 36px; height: 36px; }
    .wordbox-nav > svg { height: 17px; }
    .wordbox-more img { width: 18px; }
}

/* Every piece the word appears in, as a wrapping run of squares */
/* scoped to #wordbox so `.entry p` does not win the cascade */
#wordbox .wordbox-pieces-note {
    margin: 0;
}
.wordbox-pieces {
    display: none;              /* the squares live in the grid now */
}
.piece-cluster {
    display: block;
    width: 100%;
    margin: 0;
}
.piece-cluster .cluster-label {
    display: block;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
    color: var(--muted);
    margin-bottom: 0.7em;
}
.piece-cluster .piece-grid {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    gap: 4px;
}
.piece-cluster .piece,
.wordbox-pieces .piece {
    display: block;
    width: 19px;
    height: 19px;
    text-decoration: none;
}

/* ---------------------------------------------------------------
   Fossils at the header, sand and beach around the big type.
   Grayscale and faint, behind everything, never in the way.
   --------------------------------------------------------------- */

.scatter {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
/* Each image arrives on its own clock. The keyframe only sets `from`, so
   every image fades up to whatever opacity it was already given. */
.scatter .im {
    /* backwards, not both: once an image has arrived the animation lets go
       of its opacity, so the fade-out below can transition it */
    animation: im-in var(--fade-dur, 4s) ease-out backwards;
    animation-delay: var(--fade-delay, 0s);
}
@keyframes im-in {
    from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .scatter .im { animation: none; }
}
.scatter .im {
    position: absolute;
    display: block;
    height: auto;
    filter: grayscale(1) contrast(0.85);
    opacity: 0.16;
    mix-blend-mode: multiply;
}

/* top of the page: three or four photos at a time, swapped by script.js */
.header-scatter { overflow: visible; }
/* on its way out */
.scatter .im.out {
    opacity: 0;
    transition: opacity 3s ease, filter 3s ease;
}

/* sand and beach, around TCI Turns 10 */
.scatter .im-sand-a {
    width: 300px;
    top: -34px;
    left: -40px;
}
.scatter .im-beach {
    width: 200px;
    top: 96px;
    right: -30px;
}
.scatter .im-sand-b {
    width: 260px;
    bottom: -70px;
    left: 24%;
    opacity: 0.12;
}

/* scoped with .scatter so these outrank the desktop sizes above — without it
   they silently lost and phones got the full-size images */
@media(max-width: 900px) {
    .scatter .im-sand-b { display: none; }
    .scatter .im-sand-a { width: 190px; left: -30px; }
    .scatter .im-beach { width: 130px; right: -18px; }
}
/* phones: a little smaller again */
@media(max-width: 535px) {
    .scatter .im-sand-a { width: 140px; left: -24px; }
    .scatter .im-beach { width: 100px; right: -14px; }
}

/* Images in the word section run gray and a little lighter, so the only
   colour there is the palette of the squares themselves */
#word-viewer .pulled-photo img {
    filter: grayscale(1) contrast(0.92);
    opacity: 0.78;
}

/* breathing room above the index when the jump nav lands on it */
#words {
    scroll-margin-top: 120px;
}

/* room under the note that introduces the index */
#words .body > p:first-of-type {
    margin-bottom: 3.6em;
}

/* the bio card over the squares gets the same dotted edge as everything else */
#word-viewer .spiral-card,
#archive .spiral-card {
    border: 1px dotted #000;
}
#word-viewer .spiral-card.on-black,
#archive .spiral-card.on-black {
    border-color: #fff;
}

/* reshuffle the set */
/* the spiral sits in the same square as the arrows and redraws the set */
.wordbox-head .wordbox-more { order: 4; }
.wordbox-more img {
    width: 22px;
    height: auto;
    display: block;
}
.wordbox-more:active img {
    transform: rotate(-25deg);
}

/* Attribution for the borrowed imagery */
p#image-credits {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.5em;
}
p#image-credits a {
    color: var(--ink);
}

/* The slime photo, sitting in the run of the snail text */
.slime-band {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.4em 0 1.6em 0;
}

/* Jump links, tucked under the modes nav at the top right */
nav#jump {
    position: absolute;
    top: 133px;
    left: 0;
    /* the nav hangs down past the header; keep it above the article */
    z-index: 10;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 9px;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.4em;
}
nav#jump a {
    color: var(--ink);
    /* the same underline as thecreativeindependent.com's links and tags */
    text-decoration: underline dotted;
    text-decoration-thickness: 0.05rem;
    text-decoration-skip-ink: none;
    text-underline-offset: 4px;
    line-height: 1.1em;
    padding: 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
nav#jump a:hover {
    text-decoration-style: solid;
}

/* phones skip the jump links; the page is a single scroll there */
@media(max-width: 640px) {
    nav#jump {
        display: none;
    }
}


/* each shelf stops short of the page edges and has an end: a dotted upright
   closing the plank at either side. The last shelf still runs its full width
   however few it holds (snails.js says how many places are empty). */
.book.row-start .book-cover::after { border-left: 1px dotted var(--ink); }
.book.row-end .book-cover::after {
    right: calc(-100% * var(--empty, 0));
    border-right: 1px dotted var(--ink);
}

/* snails crawling along the shelves, in front of the books */
.shelf-crawler {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: auto;
    max-width: none;
    pointer-events: none;
    will-change: transform;
}

/* ---------------------------------------------------------------
   The countdown to the next ten years: a line with a mark for each
   year, and a snail standing where today falls along it.
   --------------------------------------------------------------- */
/* the library's intro and countdown run as wide as the year line */
#library .entry p {
    max-width: none;
}
.countdown {
    margin-top: 2em;
    font-family: Courier, "Courier New", monospace;
    font-size: 16px;
    line-height: 1.5em;
}
.countdown-clock {
    font-variant-numeric: tabular-nums;
}
.timeline {
    position: relative;
    height: 120px;
    margin: 0.5em 0 0;
}
/* the line itself, with room above for the snail and below for the years */
.timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    border-top: 1px solid var(--ink);
}
.timeline-years {
    list-style: none;
    margin: 0;
    padding: 0;
}
.timeline-years li {
    position: absolute;
    top: 80px;
    transform: translateX(-50%);
    padding-top: 12px;
    font-family: Courier, "Courier New", monospace;
    font-size: 13px;
    line-height: 1;
}
.timeline-years li::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -5px;
    height: 11px;
    border-left: 1px solid var(--ink);
}
.timeline-years li:first-child { transform: none; }
.timeline-years li:first-child::before { left: 0; }
.timeline-years li:last-child { transform: translateX(-100%); }
.timeline-years li:last-child::before { left: auto; right: 0; }
/* the foot of the snail sits 77% of the way down the drawing */
.timeline-snail {
    --snail-w: 84px;
    --t: 0;                             /* share of the ten years gone by, set by countdown.js */
    position: absolute;
    top: 80px;
    left: calc((100% - var(--snail-w)) * var(--t));
    width: var(--snail-w);
    height: auto;
    max-width: none;
    transform: translateY(-77%);
    pointer-events: none;
}

@media(max-width: 535px) {
    .timeline-years li { font-size: 11px; }
    .timeline-years li:nth-child(even) span { visibility: hidden; }
    .timeline-snail { --snail-w: 60px; }
}

/* ---------------------------------------------------------------
   The dotted underline, for links in running text and the index words.
   Browsers will not break a dotted text-decoration round descenders, so
   the line is drawn as a background instead, and a halo of paper-coloured
   text-shadow cuts it away either side of each letter's tail. Solid, and
   just as thin, on hover. Last in the file so the buttons' own
   `background: transparent` cannot clear it.
   --------------------------------------------------------------- */
p a,
.word-row .label {
    text-decoration: none;
    background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
    background-size: 3px 1px;
    background-repeat: repeat-x;
    background-position: 0 calc(100% - 0.06em);
    text-shadow:
        1px 0 var(--paper), -1px 0 var(--paper),
        2px 0 var(--paper), -2px 0 var(--paper),
        3px 0 var(--paper), -3px 0 var(--paper);
}
p a:hover,
.word-row .label:hover {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
}

/* the index words sit a little higher over their line than the running
   text does, but not so low that the line misses the tails of g and y */
.word-row .label {
    background-position: 0 calc(100% - 1px);
}