/* =====================================================================================================================
   Case studies (case-study.js builds the page from each project's case/<project>/project.js), laid out on the home
   page's grid: the text margin on the left (4rem), then the three project columns (each as wide as a project image,
   2rem apart, ending where CONTACT ends in the header). Each section's label sits in the margin on the left; its
   content uses the three columns. The one wide thing, the idea's statement, runs from the margin to just before WORK,
   like the home page's philosophy. Dotted construction lines where the home page's run, edge to edge. Only type sizes
   the rest of the site already uses.
   ===================================================================================================================== */

.case {
    --cw: calc(var(--work-img-h) * 2 / 3);                       /* one column: a project image's width */
    --g: 2rem;                                                   /* between the columns */
    --right: var(--contact-gap, 69px);                           /* from the right edge to CONTACT's last letter */
    position: relative;
    padding: calc(var(--nav-h, 59px) + 4rem) 0 0;
    overflow-x: clip;
    font-family: var(--font-mono);
    color: var(--text);
}

/* the home page's verticals: at the text margin, before the first column, and after the last column */
.cs-lines span {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px);
}

.cs-lines span:nth-child(1) { left: calc(4rem - 16px); }
.cs-lines span:nth-child(2) { right: calc(var(--contact-gap, 69px) + 3 * var(--work-img-h) * 2 / 3 + 2 * 2rem + 16px); }
.cs-lines span:nth-child(3),
.cs-lines span:nth-child(4) { display: none; }      /* (the two in the gaps: left out for now) */
.cs-lines span:nth-child(5) { right: calc(var(--contact-gap, 69px) - 16px); }

/* the title: the project's number in the left column, its name from the first project column on, the same size */
.case .cs-title {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr repeat(3, var(--cw));
    column-gap: var(--g);
    align-items: baseline;
    padding: 0 var(--right) 0 4rem;
    font-family: var(--font-mono);
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 0 0 4rem;
}

.cs-number {
    grid-column: 1;
    margin-left: -0.053em;      /* (the large figures' own side space, so their ink starts where the labels' does) */
}
.cs-name { grid-column: 2 / 5; }

/* sections: label in the margin, content on the three columns; a dotted line across the whole width before each */
.case .cs-section {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr repeat(3, var(--cw));
    column-gap: var(--g);
    align-items: start;
    margin: 0;
    padding: 2.5rem var(--right) 9rem 4rem;
    min-height: 0;
    opacity: 1;
    animation: none;
    text-align: left;
}

.case .cs-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px);
}

.cs-label {
    grid-column: 1;
    font-size: 0.8125rem;              /* headings: a tad bigger than the captions (0.75rem) */
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    padding-right: 1rem;
}

.cs-label span {
    font-weight: 500;
}

/* the content: the three columns (lines 1 to 4) */
.cs-body {
    grid-column: 2 / 5;
    display: grid;
    grid-template-columns: repeat(3, var(--cw));
    column-gap: var(--g);
    align-items: start;
}

.cs-body > * {
    grid-column: 1 / 4;
}

.case figure {
    margin: 0;
}

.case img,
.case video {
    display: block;
    width: 100%;
    height: auto;
}

.case figcaption,
.cs-swatch-name,
.cs-swatch-hex {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.9rem;
}

/* ---------- 01 Opening: the facts as a short list over the picture's right side, then the picture across the three
   columns ---------- */
.case .cs-meta {
    grid-column: 1 / 3;                /* from the first project column, where the title and the statement start */
    display: grid;
    gap: 0.9rem;
    margin: 0 0 3rem;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cs-meta div {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 1rem;
}

.cs-meta dt {
    font-weight: 500;
}

.cs-meta dd {
    margin: 0;
}

/* ---------- 02 The idea: wide, like the home page's philosophy (from the margin to just before WORK) ---------- */
.case .cs-idea .cs-body {
    grid-column: 1 / 5;
    grid-row: 1;
    grid-template-columns: 1fr repeat(3, var(--cw));
}

.cs-idea .cs-label {
    grid-row: 1;
    position: relative;
    z-index: 1;
}

.case .cs-statement {
    grid-column: 2 / 5;
    /* starts on the section label's line: the tops of its capitals level with the label's (Azeret Mono: ascent 0.937,
       descent 0.23, cap height 0.698 of the size; label 0.8125rem at line height 1.6, statement at 1.02) */
    margin: calc(0.4555 * 0.8125rem - 0.1655 * clamp(1.764rem, 4.586vw, 4.939rem)) 0 4rem;
    max-width: calc(var(--work-left, 75vw) - 16px - (100vw - var(--right) - 3 * var(--cw) - 2 * var(--g)));
    font-size: clamp(1.764rem, 4.586vw, 4.939rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.case .cs-text {
    grid-column: 3 / 5;                /* from the middle column on, under the sentence (as in the first version) */
    max-width: 34rem;
}

.cs-text p {
    font-size: 1.035rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

.cs-text p + p {
    margin-top: 1em;
}

/* ---------- 03 The identity: each module's heading and note in the first column ---------- */
.cs-module {
    display: grid;
    grid-template-columns: repeat(3, var(--cw));
    column-gap: var(--g);
    align-items: start;
}

.cs-module + .cs-module {
    margin-top: 8rem;
}

.cs-module-text {
    grid-column: 1;
}

.cs-sub {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
}

.cs-note {
    font-size: 0.8625rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* wordmark: in the second and third columns, like the label's photo on the home page */
.cs-wordmark-art {
    grid-column: 2 / 4;
    grid-row: 2;                /* below the heading and note, not beside them */
    margin-top: 2rem;
}

/* raised: true in project.js: the wordmark starts level with its heading (the tops of its capitals); the empty space it
   leaves below keeps the module as tall as ever, so what follows stays where it was. On phones, under the text as usual */
@media (min-width: 769px) {
    .cs-wordmark-raised .cs-wordmark-art {
        grid-row: 1 / span 2;
        margin-top: calc(0.4555 * 0.8125rem - 0.005 * (2 * var(--cw) + var(--g)));   /* (less the file's own margin) */
    }

    .cs-wordmark-raised::after {
        content: '';
        grid-column: 2 / 4;
        grid-row: 2;
        margin-top: 2rem;
        aspect-ratio: var(--ratio);
    }
}

/* primary: true in project.js: the wordmark starts level with its heading and is larger, growing leftwards from the right
   edge into the first column (never as far as the heading's note); the module takes the height it needs, so what follows
   moves up. On phones, under the text as usual */
@media (min-width: 769px) {
    .cs-wordmark-primary .cs-wordmark-art {
        grid-row: 1 / span 2;
        justify-self: end;
        width: min(calc((2 * var(--cw) + var(--g)) * 1.21), calc(3 * var(--cw) + 2 * var(--g) - 12rem));
        margin-top: calc(0.4555 * 0.8125rem);
    }
}

/* illustration & colour: four fields in one line across the three columns */
.cs-palette {
    grid-column: 1 / 4;
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;                          /* closer than the columns, so the four read as one set */
    align-items: start;
}


.cs-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background: var(--swatch);
    padding: 12%;
}

.case .cs-swatch img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* the drawing fills its field inside the 12% margin (9% of the height, as the field is 3:4), however tall it is, so all
   four fields stay the same size (a tall drawing would otherwise stretch its field) */
/* (its height from the padding, not aspect-ratio, which Safari on iPhone let the drawing stretch) */
.cs-swatch {
    position: relative;
    aspect-ratio: auto;
    height: 0;
    padding: 0 0 133.333%;
}
.cs-palette-circles .cs-swatch { padding-bottom: 100%; }
.case .cs-swatch img {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 9%;
    bottom: 9%;
    width: 76%;
    height: 82%;
    max-width: none;
    max-height: none;
}
.case .cs-palette-circles .cs-swatch img { top: 12%; bottom: 12%; height: 76%; }

.cs-swatch-name {
    display: block;
    font-weight: 500;
}

.cs-swatch-hex {
    display: block;
    margin-top: 0;
}

/* lettering & type: one typeface per column, a sample of it and its name underneath (names on one line across) */
.cs-faces {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: repeat(3, var(--cw));
    column-gap: var(--g);
    align-items: start;                /* samples on one line, whatever the length of the text under them */
    margin-top: 2.5rem;
}

.cs-face-sample {
    height: calc(var(--cw) * 0.42);
    display: flex;
    align-items: center;               /* all three on the same middle line */
}

.case .cs-face-sample img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

/* every sample centred in its column, at a similar size (its width set per typeface), nudged if asked */
.cs-face-sample {
    justify-content: center;
}

.case .cs-face-sample img {
    width: var(--w, 62%);
    max-width: none;
    max-height: none;
    height: auto;
    translate: var(--nudge, 0 0);
}

.cs-face-name,
.cs-face-use {
    display: block;
}

.cs-face-name {
    font-weight: 500;
}

/* an image module's rows: under its heading and note, across the three columns (like the palette) */
.cs-module > .cs-row {
    grid-column: 1 / 4;
}

.cs-module-text + .cs-row {
    margin-top: 2.5rem;
}

/* ---------- image rows: placed on the three columns (col '1 / 4' = all three, '3 / 4' = the third), some lower ----- */
.cs-row {
    display: grid;
    grid-template-columns: repeat(3, var(--cw));
    column-gap: var(--g);
    align-items: start;
}

.cs-row + .cs-row {
    margin-top: 6rem;
}

.case .cs-media {
    grid-column: var(--col, 1 / 4);
    margin-top: var(--drop, 0px);
}

/* an image set to a height of its own (height in project.js, e.g. as tall as the wordmark), its width following */
.case .cs-media-h img {
    width: auto;
    max-width: 100%;
    height: var(--h);
}

/* (the same for a picture drawn into the page, tilt in project.js; a leaning icon may reach past the picture's edge) */
.case .cs-media-h .cs-tilt-icons {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--h);
    overflow: visible;
}

.case .cs-media-h {
    justify-self: start;               /* as wide as its picture, so anything placed over it lands on the picture */
}

@media (max-width: 768px) {
    .case .cs-media-h img,
    .case .cs-media-h .cs-tilt-icons {
        height: var(--h-phone);
    }

    /* (its width given outright from its proportions: Safari otherwise sizes the frame around it by the picture's
       own width, wider than it's shown, and whatever is placed over it, like the plant's dot, lands off to the right) */
    .case .cs-media-h[style*="--ar"] {
        width: calc(var(--h-phone) * var(--ar));
        max-width: 100%;
    }

    .case .cs-media-h[style*="--ar"] img {
        width: 100%;
        max-width: none;
        object-fit: contain;
    }
}

/* ---------- 06 Closing: the project's own colours across the whole width ---------- */
.case .cs-closing {
    background: var(--bg);
    color: var(--ink);
    padding-bottom: 7rem;
}

.case .cs-closing::before {
    display: none;
}

.cs-closing .cs-label {
    color: var(--ink);
}

.cs-closing-art {
    display: grid;
    justify-items: center;
    gap: 3rem;
    padding-top: 3rem;
}

.cs-closing-art img {
    width: 70%;
}

.cs-closing-line {
    font-size: calc(clamp(1.764rem, 4.586vw, 4.939rem) * 1.6);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
}

/* ---------- after the details: a short paragraph, no heading, in the first column (the explanations' size) ---- */
.cs-outro {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr repeat(3, var(--cw));
    column-gap: var(--g);
    padding: 2.5rem var(--right) 2rem 4rem;
}

/* a dotted line across the whole width above it, like the sections' */
.cs-outro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: repeating-linear-gradient(to right, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px);
}

.cs-outro p {
    grid-column: 2 / 3;
    font-size: 0.8625rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
}

/* ---------- back to Spilled Soda: one in each column ---------- */
.cs-onward {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr repeat(3, var(--cw));
    column-gap: var(--g);
    padding: 5rem var(--right) 6rem 4rem;
}

.cs-onward a {
    color: inherit;
    text-decoration: none;
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.cs-onward a:nth-child(1) { grid-column: 2; }
.cs-onward a:nth-child(2) { grid-column: 3; }
.cs-onward a:nth-child(3) { grid-column: 4; }

.cs-onward .cs-label {
    margin: 0;
    padding: 0;
}

.cs-next-title {
    font-size: 1.6rem;                  /* (sizes the home page already uses; 1.25rem on phones) */
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- phones: one column, the same order; label above its content, pictures full width ---------- */
@media (max-width: 768px) {
    .case {
        padding-top: calc(var(--nav-h, 53px) + 2.5rem);
    }

    .cs-lines span:nth-child(2),
    .cs-lines span:nth-child(3),
    .cs-lines span:nth-child(4) { display: none; }
    .cs-lines span:nth-child(1) { left: calc(var(--side, 1.75rem) - 12px); }
    .cs-lines span:nth-child(5) { right: calc(var(--side, 1.75rem) - 12px); }

    .case .cs-title {
        padding: 0 var(--side, 1.75rem);
        margin-bottom: 2.5rem;
        grid-template-columns: auto 1fr;
        column-gap: 0.6em;
    }

    .cs-name {
        grid-column: 2;
    }

    .case .cs-section,
    .cs-onward {
        display: block;
        padding-left: var(--side, 1.75rem);
        padding-right: var(--side, 1.75rem);
    }

    .case .cs-section {
        padding-bottom: 5.5rem;
    }

    .cs-label {
        margin-bottom: 2rem;
        padding: 0;
    }

    .cs-body,
    .case .cs-idea .cs-body,
    .cs-module,
    .cs-row {
        display: block;
    }

    .case .cs-meta {
        display: grid;
    }

    .cs-meta div {
        grid-template-columns: 7.5rem 1fr;
    }

    .case .cs-statement {
        margin: 0 0 2.5rem;
        max-width: none;
    }

    .cs-module + .cs-module {
        margin-top: 5rem;
    }

    .cs-module-text {
        margin-bottom: 2rem;
    }

    .cs-palette {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        row-gap: 2rem;
        margin-top: 0;
    }

    .cs-palette li {
        margin-top: 0;
    }

    .cs-faces {
        display: block;
        margin-top: 0;
    }

    .cs-face + .cs-face {
        margin-top: 2.5rem;
    }

    .cs-face-sample {
        height: auto;
        padding: 1rem 0;
    }

    .case .cs-media {
        margin-top: 0;
    }

    .cs-row + .cs-row,
    .case .cs-media + .cs-media {
        margin-top: 3rem;
    }

    .cs-closing-art img {
        width: 90%;
    }

    .cs-outro {
        display: block;
        padding: 2.5rem var(--side, 1.75rem) 1rem;
    }

    .cs-onward a + a {
        margin-top: 2.5rem;
    }

    .cs-next-title {
        font-size: 1.25rem;
    }
}

/* an opening without its picture: just the facts, then on to the idea */
.case .cs-opening:not(:has(.cs-hero)) {
    padding-bottom: 5rem;
}

.case .cs-opening:not(:has(.cs-hero)) .cs-meta {
    margin-bottom: 0;
}

/* labels stay small (decorative metadata); explanations are for reading: the next size up, in sentence case.
   The details' captions are explanations, the world's captions ("Napkins") are labels. */
.case .cs-details figcaption {
    font-size: 0.8625rem;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.6;
}

/* still to come: text in [brackets] highlighted, a missing picture as a dashed box of its own proportions */
.cs-todo {
    background: #fff3a8;
    color: inherit;
}

.cs-todo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.5rem;
    box-sizing: border-box;
    background: repeating-linear-gradient(to right, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px) top / 100% 1px no-repeat,
                repeating-linear-gradient(to right, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px) bottom / 100% 1px no-repeat,
                repeating-linear-gradient(to bottom, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px) left / 1px 100% no-repeat,
                repeating-linear-gradient(to bottom, var(--construction, rgba(0, 0, 0, 0.5)) 0 2px, transparent 2px 7px) right / 1px 100% no-repeat,
                #fff3a8;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.cs-swatch .cs-todo-box {
    background: none;
}

.cs-face-todo {
    background: #fff3a8;
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

/* a colour close to the page's own (edge: true in project.js): a fine dotted outline, so the field still shows */
.cs-swatch-edge {
    outline: 1px dotted var(--construction, rgba(0, 0, 0, 0.5));
    outline-offset: -1px;
}

/* colours as circles (shape: 'circles' in project.js) */
.cs-palette-circles .cs-swatch {
    aspect-ratio: 1;
    border-radius: 50%;
}

/* colours as fields with a dot in each (shape: 'dots'; each swatch's dot: another of the colours) */
.cs-palette-dots .cs-swatch::after {
    content: '';
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--dot);
}

/* ---------- a process sheet (type: 'study'): photo with construction lines, the symbol, guides and small notes ------
   one composition across the three columns; everything placed in the same proportions as the photo's own pixels */
.case .cs-study {
    grid-column: 1 / 4;
    position: relative;
    margin: 0;
}

.cs-study-photo,
.cs-study-mark,
.cs-study-guides,
.cs-study-note {
    position: absolute;
}

.cs-study-guides {
    inset: 0;
    width: 100%;
    height: 100%;
}

.cs-study-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;                 /* the extension lines run on past the photo's edges */
}

.cs-study svg line,
.cs-study svg path,
.cs-study svg circle {
    fill: none;
    stroke: #252525;
    stroke-width: calc(3.4px * var(--k, 1));
    stroke-linecap: round;
}

/* a fine paper-coloured edge under each line, so it still reads where it crosses the dark roof and window frame */
.cs-study .halo line,
.cs-study .halo path,
.cs-study .halo circle {
    stroke: var(--bg, #fafaf8);
    stroke-width: calc(9px * var(--k, 1));
    stroke-opacity: 0.55;
}

.cs-study-lines .draw { stroke-opacity: 0.8; }
.cs-study .dash { stroke-dasharray: calc(10px * var(--k, 1)) calc(14px * var(--k, 1)); stroke-opacity: 0.45; }
.cs-study .guide { stroke-opacity: 0.4; }
.cs-study .fade:not(.dash):not(.guide) { stroke-opacity: 0.6; }

.cs-study-notes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-study-note {
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cs-study-note.is-above { transform: translateY(-100%); }

.cs-study-note span {
    font-weight: 500;
}


/* phones: the same composition as on larger screens, the photo and the symbol side by side with their guide lines,
   just smaller; the notes, which wouldn't fit between them, listed underneath */
@media (max-width: 768px) {
    .cs-study-notes {
        position: absolute;
        top: 100%;
        left: 5.73%;   /* (back at the text's left edge) */
        margin-top: 1.5rem;
        display: grid;
        gap: 0.4rem;
    }

    .cs-study-note {
        position: static;
        transform: none !important;
    }

    /* (the whole drawing a little larger, so the photo starts at the text's left edge and the symbol ends at the right
       one; the guide lines may run on into the margins) */
    .case .cs-study {
        width: 117.8%;
        margin-left: -6.75%;
        margin-bottom: calc(1.5rem + 3 * 0.75rem * 1.6 + 0.8rem + 3.5rem);   /* (the notes, then the usual gap before the next part) */
    }
}

/* a dot of its own over a picture (dot in project.js), and its falling copy */
.case .cs-media:has(.cs-dot) {
    position: relative;
}

.cs-dot,
.cs-dot-drop {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #000;
    pointer-events: none;
}

.cs-dot {
    translate: -50% -50%;
}

.cs-dot-drop {
    z-index: 5;
    transform-origin: 50% 50%;
}

/* the lines over the photo: stronger, so they stand out against the roof, the sky and the wall */
.cs-study-lines line,
.cs-study-lines path,
.cs-study-lines circle {
    stroke-width: calc(5.5px * var(--k, 1));
}

.cs-study-lines .draw { stroke-opacity: 1; }
.cs-study-lines .dash { stroke-opacity: 0.85; }
.cs-study-lines .fade:not(.dash) { stroke-opacity: 0.9; }

.cs-study-lines .halo line,
.cs-study-lines .halo path,
.cs-study-lines .halo circle {
    stroke-width: calc(14px * var(--k, 1));
    stroke-opacity: 0.8;
}

/* a picture moved along to the right (shift in project.js), e.g. to sit under something above it */
.case .cs-media[style*="--shift"] {
    margin-left: var(--shift);
}

@media (max-width: 768px) {
    .case .cs-media[style*="--shift"] {
        margin-left: var(--shift-phone);
    }
}

/* a picture above the colours (image in a palette module), e.g. where they come from; kept crisp if it's pixels */
.cs-palette-image {
    grid-column: 1 / 4;
    margin: 2.5rem 0 0;
}

.case .cs-palette-image img {
    image-rendering: pixelated;
}

/* ---------- colours from a picture (a palette with image.grid): the picture in pixels on the left, a straight dotted
   line from each colour's pixel across to the same colour, larger, on the right, its name and code beside it ---------- */
.case .cs-pixels {
    grid-column: 1 / 4;
    position: relative;
    margin: 2.5rem 0 0;
    container-type: inline-size;       /* (the boxes are sized by its width) */
}

.cs-pixels-image,
.cs-pixels-swatches li {
    position: absolute;
    left: 0;
    top: 0;
}

.case .cs-pixels-image img {
    image-rendering: pixelated;
}

.cs-pixels-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cs-pixels-lines line {
    stroke: #252525;
    stroke-width: 2.3;
    stroke-dasharray: 7 9.5;
    stroke-opacity: 0.6;
    stroke-linecap: round;
}

.cs-pixels-lines .halo line {
    stroke: var(--bg, #fafaf8);
    stroke-width: 6;
    stroke-opacity: 0.6;
}

.cs-pixels-swatches {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-pixels-swatches li {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.cs-pixels-swatch {
    display: block;
    width: var(--size);
    aspect-ratio: 1;
    flex: none;
    border-radius: 50%;                /* (circles, like the dot they come from) */
}

.cs-pixels-swatches .cs-swatch-name,
.cs-pixels-swatches .cs-swatch-hex {
    display: block;
    white-space: nowrap;
    margin-top: 0;
}

.cs-pixels-swatches .cs-swatch-name { font-weight: 500; }

/* phones: as on larger screens, the picture on the left and the colours on the right, each with its line, just smaller
   (the whole of it as wide as the process sheet above, so the circles stay right under the symbol's dot); the names,
   which wouldn't fit beside the circles, listed underneath */
@media (max-width: 768px) {
    .case .cs-pixels {
        width: 117.8%;
        margin-left: -6.75%;
        margin-top: 0;
        margin-bottom: calc(1.5rem + 2 * 1.2rem + 3.5rem);   /* (the names in one row, then the usual gap) */
    }

    .cs-pixels-names {
        position: absolute;
        top: 100%;
        left: 5.73%;
        margin: 1.5rem 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        width: 84.9%;   /* (as wide as the text) */
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        column-gap: 0.75rem;
    }

    .cs-pixels-names .cs-swatch-name,
    .cs-pixels-names .cs-swatch-hex {
        display: block;
        margin-top: 0;
    }

    .cs-pixels-names .cs-swatch-name { font-weight: 500; }

    .cs-pixels-text {
        display: none;
    }
}

@media (min-width: 769px) {
    .cs-pixels-names { display: none; }
}

/* an image module whose pictures sit beside its heading and note instead of under them (beside: true in project.js):
   the pictures start level with the note's first line (the tops of its capitals): under the heading (0.8125rem at line
   height 1.6) and its 0.9rem gap */
.cs-module-beside > .cs-module-text,
.case .cs-module-beside > .cs-row {
    grid-row: 1;
    margin-top: 0;
}

.case .cs-module-beside > .cs-row {
    margin-top: calc(1.6 * 0.8125rem + 0.9rem + 0.4555 * 0.8625rem + 2px);   /* (+2px: the picture's own margin) */
}

@media (max-width: 768px) {
    .cs-module-beside > .cs-module-text,
    .case .cs-module-beside > .cs-row {
        grid-row: auto;
    }
}

/* a picture cut to a height of its own (height + cover in project.js), filling its columns, e.g. to end level with the
   picture beside it; on phones its own proportions */
.case .cs-media-cover img {
    width: 100%;
    height: var(--h);
    object-fit: cover;
}

@media (max-width: 768px) {
    .case .cs-media-cover img {
        height: auto;
    }
}

/* (beside: 'heading': the pictures start level with the heading itself, the tops of its capitals) */
.case .cs-module-beside-heading > .cs-row {
    margin-top: calc(0.4555 * 0.8125rem + 2px);
}

@media (max-width: 768px) {
    .case .cs-module-beside-heading > .cs-row {
        margin-top: 0;
    }
}

/* ---------- a two-colour split (type: 'split'): one wide rectangle, light | dark, the figure in the middle inverting with
   what's behind it, and a fine line through the split that can be dragged ---------- */
.case .cs-split {
    grid-column: 1 / 4;
    position: relative;
    margin: 2.5rem 0 0;
    aspect-ratio: 16 / 5;              /* as tall as the figure: it starts and ends where the figure does */
    touch-action: pan-y;
}

/* two full layers on top of each other, each cut to its side of the line */
.cs-split-side {
    position: absolute;
    inset: 0;
}

.cs-split-light {
    background: var(--light);
    color: var(--dark);
    clip-path: inset(0 calc(100% - var(--at)) 0 0);
}

.cs-split-dark {
    background: var(--dark);
    color: var(--light);
    clip-path: inset(0 0 0 var(--at));
}

/* the figure, in the colour of its side: drawn as a mask of the figure's own shape */
.cs-split-figure {
    position: absolute;
    --split-h: calc(100% * 5 / 16);    /* (the split's height as a share of its width: 16:5, on phones 4:3) */
    top: 0;
    height: 100%;
    width: calc(var(--split-h) * var(--fw) / var(--fh));
    left: calc(50% - var(--split-h) * var(--fw) / var(--fh) / 2);
    background: currentColor;
    -webkit-mask: var(--figure) center / contain no-repeat;
    mask: var(--figure) center / contain no-repeat;
}

/* the hidden message: in the light part only, either side of the figure, on one line through the middle */
.cs-split-text {
    position: absolute;
    top: 50%;
    height: 12%;
    width: auto;
    translate: 0 -50%;
}

.case .cs-split-text {
    width: auto;
    height: 12%;
}

.cs-split-text.is-left {
    right: calc(50% + 7%);
}

.cs-split-text.is-right {
    left: calc(50% + 7%);
}

/* under the split: each colour's name, code and a line about it, under its own half */
.cs-split-swatches {
    grid-column: 1 / 4;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
}

.cs-split-swatches li {
    padding-right: var(--g);
}

.cs-split-swatches .cs-swatch-hex {
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .cs-split-swatches li { padding-right: 1rem; }
    /* phones: the split taller, so the figure reads larger; the message about as big as before, either side of the
       now wider figure (its half is 11% of the width), so it still fits on one line */
    .case .cs-split { aspect-ratio: 4 / 3; }
    .cs-split-figure { --split-h: 75%; }
    .case .cs-split-text { height: 7.8%; }
    .cs-split-text.is-left { right: calc(50% + 13%); }
    .cs-split-text.is-right { left: calc(50% + 13%); }
}

/* ---------- contact (contact in project.js): the home page's form across the middle and right columns, under the sentence ---------- */
.case .cs-contact-form {
    grid-column: 3 / 5;
}

.cs-contact .cs-contact-lead {
    max-width: 34rem;
    margin-bottom: 3rem;
}

.cs-contact .contact-form {
    margin-top: 0;
}

.cs-contact form[hidden] {
    display: none;
}

.cs-contact .form-group {
    position: relative;
}

.cs-contact .form-group label {
    font-size: 0.8125rem;
    font-weight: 300;
}

.cs-contact .form-group input,
.cs-contact .form-group textarea {
    font-size: 1.0625rem;
    caret-color: var(--wine, #6b0d1f);
}

.cs-contact .form-group input:focus,
.cs-contact .form-group textarea:focus {
    outline: none;
    border-color: transparent;
    border-bottom-color: var(--text);
    box-shadow: inset 0 -1px 0 var(--text);   /* (the line a little bolder while you type in it) */
}

.cs-contact .form-spill {
    font-size: 0.8125rem;
}

.cs-contact .contact-email {
    margin-top: 2rem;
}

.cs-contact .contact-thanks {
    font-size: 1.035rem;
    white-space: normal;
}

@media (max-width: 768px) {
    .case .cs-contact-form {
        grid-column: 1 / -1;
        max-width: none;
    }
}

/* phones: the primary wordmark's note under it, centred, like the names under the marks (and at the same distance) */
.cs-wordmark-caption { display: none; }

@media (max-width: 768px) {
    .cs-wordmark-primary .cs-note { display: none; }

    .cs-wordmark-primary .cs-wordmark-caption {
        display: block;
        grid-column: 1 / -1;
        margin: 3.15rem 0 0;
        text-align: center;
    }
}

/* ---------- a family of marks (type: 'marks'): one a column, each in its own square ---------- */
.cs-marks {
    align-items: start;
}

.cs-module + .cs-marks {
    margin-top: 6.74rem;   /* (the gap you see above the marks, tighter than between other modules) */
}

.case .cs-mark {
    margin: 0;
}

.cs-mark-art {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-mark-size {
    display: block;
    width: var(--size);
    translate: var(--nx, 0) var(--ny, 0);   /* (nudge in project.js: optically centred in its square) */
}

.cs-mark figcaption {
    margin-top: -0.6rem;   /* (up into the square's empty bottom, closer to the marks) */
    text-align: center;
}

@media (max-width: 768px) {
    .cs-module + .cs-marks {
        margin-top: 4.55rem;   /* (as far under the wordmark's name as each mark is under the name before) */
    }

    /* each mark's box only as tall as the mark (optically centred across, not up and down), so every name sits the
       same distance under its mark, the monogram's, and each mark the same distance under the name before */
    .cs-mark-art {
        aspect-ratio: auto;
    }

    .cs-mark-size {
        translate: var(--nx, 0) 0;
    }

    .cs-mark figcaption {
        margin-top: 3.15rem;
    }

    /* one under the other, centred; the secondary mark a little larger */
    .cs-marks {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 4.55rem;
    }

    .case .cs-mark {
        width: 75%;
    }

    .cs-mark:first-child .cs-mark-size {
        width: calc(var(--size) * 1.12);
    }
}

/* a typeface shown in live words rather than a picture (words in project.js) */
.cs-face-words {
    margin: 0;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 1.52rem;
    font-weight: 300;
    line-height: 1.25;
}

/* (the live words have the room of two columns) */
@media (min-width: 769px) {
    .cs-face:has(.cs-face-words) {
        grid-column: span 2;
    }
}

/* ---------- colours as four marks that turn into one (spin in project.js); --unit: one unit of the art, on the screen ---------- */
.cs-spin {
    --unit: 1.25px;
    grid-column: 1 / 4;
    position: relative;
    height: calc(245.77 * var(--unit));
    margin-top: 2.5rem;
}

.case .cs-spin img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(180 * var(--unit));
    height: auto;
    max-width: none;
}

/* each named on its outer side, level with its S */
.cs-spin-name {
    position: absolute;
    margin: 0;
    transform: translateY(-50%);
}

.cs-spin-name.is-top { top: 25%; }
.cs-spin-name.is-bottom { top: 75%; }
.cs-spin-name.is-left { right: calc(50% + 125.27 * var(--unit) + 2rem); text-align: right; }
.cs-spin-name.is-right { left: calc(50% + 125.27 * var(--unit) + 2rem); text-align: left; }

@media (max-width: 768px) {
    .cs-spin {
        --unit: calc((100vw - 2 * var(--side, 1.75rem)) / 340);
        height: calc(245.77 * var(--unit) + 8rem);
    }

    /* (phones: no room at the sides: above and below) */
    .cs-spin-name { transform: none; }
    .cs-spin-name.is-top { top: 0; }
    .cs-spin-name.is-bottom { top: auto; bottom: 0; }
    .cs-spin-name.is-left { left: 0; right: auto; text-align: left; }
    .cs-spin-name.is-right { right: 0; left: auto; text-align: right; }
}


/* tablets held upright (iPad portrait) only: the chapters closer together, as on phones; and a narrower margin on the
   left (2.5rem instead of 4rem), so the labels' column is tighter and the three columns get the room (their width
   comes from the larger project images set for portrait in styles.css) */
@media (min-width: 769px) and (orientation: portrait) and (hover: none) {
    .case .cs-section {
        padding-bottom: 5.5rem;
        padding-left: 2.5rem;
    }

    .case .cs-title,
    .cs-outro,
    .cs-onward {
        padding-left: 2.5rem;
    }

    .cs-lines span:nth-child(1) { left: calc(2.5rem - 16px); }
}

/* iPad portrait only: origin and colours have little room across. Both drawings run 10% further left, into the label
   column (the right edge stays where it is), which gives the notes between the photo and the A the space they need;
   the colours' names go underneath in one row (as on phones), as there's no height for them beside the circles */
@media (min-width: 769px) and (orientation: portrait) and (hover: none) {
    .case .cs-study,
    .case .cs-pixels {
        width: 114%;
        margin-left: -10%;
    }

    .cs-study-note {
        letter-spacing: 0.05em;
    }

    .case .cs-pixels {
        margin-bottom: calc(1.5rem + 2 * 1.2rem);
    }

    .cs-pixels-names {
        display: grid;
        position: absolute;
        top: 100%;
        left: 8.77%;                   /* (back at the text's left edge) */
        right: 5.4%;                   /* (and ending at the right one) */
        margin: 1.5rem 0 0;
        padding: 0;
        list-style: none;
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        column-gap: 0.75rem;
    }

    .cs-pixels-names .cs-swatch-name,
    .cs-pixels-names .cs-swatch-hex {
        display: block;
        margin-top: 0;
    }

    .cs-pixels-names .cs-swatch-name { font-weight: 500; }

    .cs-pixels-text {
        display: none;
    }
}

/* iPad held upright: the customised wordmark (with its tagline) smaller, well clear of its note */
@media (min-width: 769px) and (orientation: portrait) and (hover: none) {
    .cs-wordmark-primary .cs-wordmark-art { width: calc((2 * var(--cw) + var(--g)) * 0.82); }
}

/* iPad held upright: the body text starts on the same line as the facts' values above (DESIGN STUDIO, BRAND IDENTITY…) */
@media (min-width: 769px) and (orientation: portrait) and (hover: none) {
    .case .cs-text { margin-left: calc(10.8rem - var(--cw) - var(--g)); max-width: none; }
}