/* ================================================
   CASE STUDY SUBPAGES - König-Kluge Portfolio
   ================================================

   ONE stylesheet for ALL case study subpages. This is the whole point
   of the file: the pages under /stories/ carry an identical skeleton
   and differ only in their words and pictures, so refining the look
   here changes every case study at once. Resist the urge to write
   per-page overrides - if a page needs something the others do not,
   say so with a modifier class defined HERE, not with a style block
   in that page's HTML.

   Loaded AFTER main.css, which supplies the design tokens, the page
   frame, the header and the footer. Nothing in this file redefines a
   token; it only spends them.

   TYPOGRAPHY, on the Admiral's order:
   - Fira Extra Condensed carries the big voice - the masthead headline
     and the steps headline. It is the family the index uses for section
     headlines, so a case study opens in the same register the reader
     arrived in.
   - Fira Condensed carries the labels - the dateline and the fact
     labels, both set as the index's hero rocker is. See the Rockers
     block below.
   - Linux Libertine carries the long-form voice - the deep dive
     headlines and the pull quote. The serif marks the shift from
     summary to argument: everything above the first deep dive can be
     skimmed, everything below it is meant to be read.
   - Fira Sans carries all body copy, as everywhere else on the site.

   MEASURE is what makes this read as a magazine rather than as a
   landing page. The content column is the site's usual 66%, but
   running prose stops at --case-measure (65ch) inside it. A 1200px
   line of 16px text is ~110 characters, nearly twice the length the
   eye tracks comfortably; the difference between this page and the
   index is mostly that discipline.
   ------------------------------------------------ */

:root {
    /* Longest comfortable line for running prose. Not a global token
       in main.css because nothing outside the case studies sets a
       measure - the index is all short blocks. */
    --case-measure: 65ch;
}

/* ------------------------------------------------
   Shell
   ------------------------------------------------ */

/* The content column, matching `section .section-content` in main.css
   exactly. Declared here rather than reused so a case study can be
   re-proportioned without disturbing the index. */
.case-content {
    max-width: var(--content-max-width);
    width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
    position: relative;
    z-index: 1;
}

/* Running prose, held to the measure inside the content column and
   left-aligned to it rather than centred - a centred measure inside a
   wider column reads as a mistake at first glance, an indented one
   reads as a decision. */
.case-prose {
    max-width: var(--case-measure);
}

/* ------------------------------------------------
   Masthead - dateline, headline, subline
   ------------------------------------------------ */

/* Top padding matches .hero-section's: the header is position:fixed,
   and --space-xxl is what clears it on the index. Keep the two the
   same or a case study opens tighter than the page that links to it. */
.case-masthead {
    padding: var(--space-xxl) 0 var(--space-lg);
}

/* ------------------------------------------------
   Rockers - the dateline and the fact labels
   ------------------------------------------------

   Both are set exactly as .hero-rocker is on the index, on the
   Admiral's order: condensed semibold caps in SECONDARY ink, under a
   40x3px orange rule. The colour matters as much as the bar - the
   words are a label, so they step back, and the accent does the
   pointing. Orange type would have made four quiet labels shout.

   The treatment is declared once for both rather than copied: the
   dateline above the headline and the labels in the fact grid are the
   same device at two scales, and they must stay that way.

   If .hero-rocker in main.css is ever retuned, retune this with it.
   ------------------------------------------------ */
.case-dateline,
.case-fact-label {
    font-family: var(--font-condensed);
    font-weight: var(--weight-semibold);
    font-size: var(--text-small);
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* The accent rule, identical to .hero-rocker::before. A block ::before
   rather than a border-top on the element itself, so it can be 40px
   wide instead of running the full column. */
.case-dateline::before,
.case-fact-label::before,
.case-step-label::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: var(--space-sm);
    background: var(--color-accent-orange);
}

/* Brand, period and role on one line. It answers "what am I looking
   at" before the headline has to, and gives the eye somewhere to land
   under the fixed header. */
.case-dateline {
    margin: 0 0 var(--space-sm) 0;
}

/* The pipes between the dateline's parts, set like the hero rocker's:
   inherited colour, no opacity, held open by real spaces. */
.case-dateline-sep {
    white-space: pre;
}

/* The headline, verbatim from the teaser card that links here - the
   card is a promise and the masthead is the same promise kept. Do not
   reword one without the other.

   clamp() rather than a breakpoint: these headlines run long (the
   Kundenportal's is nine words) and a fixed --text-hero would break
   to four lines on a laptop. */
.case-headline {
    font-family: var(--font-extra-condensed);
    font-weight: var(--weight-bold);
    font-size: clamp(2.5rem, 1.6rem + 3.2vw, var(--text-hero));
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
    max-width: 20ch;
}

/* The teaser card's body text, again verbatim. Sized up to --text-large
   and held to a shorter measure than the prose below: it is a standfirst,
   not a paragraph, and it should be readable at a glance from across a
   desk. */
.case-subline {
    font-family: var(--font-primary);
    font-weight: var(--weight-regular);
    font-size: var(--text-large);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 55ch;
}

/* ------------------------------------------------
   Image placeholders
   ------------------------------------------------

   Solid rectangles in --case-ground, per the Admiral's order,
   standing in until real artwork lands. They are NOT <img>
   elements with a placeholder file: an empty div costs no request and
   cannot be mistaken for finished work.

   --case-ground is documented in main.css. It is the same ground the
   real artwork sits on, so a section reads the same whether its
   picture has arrived or not.
   ------------------------------------------------ */
.case-figure {
    margin: 0;
}

.case-placeholder {
    background: var(--case-ground);
    border-radius: var(--radius-case);
    width: 100%;
}

/* Ratios, as modifiers rather than inline styles so a change of mind
   is one edit here. aspect-ratio rather than a padding hack: the
   project's standing rule is that aspect ratios are preserved, and
   this states the ratio instead of computing it.

   Named for the ratio and not for the placeholder, because they dress
   BOTH .case-placeholder and .case-frame - an empty box and a filled
   one differ in what they contain, not in the shape they hold. */
.case-ratio--wide   { aspect-ratio: 16 / 9; }
.case-ratio--photo  { aspect-ratio: 4 / 3; }
.case-ratio--square { aspect-ratio: 1 / 1; }
.case-ratio--tall   { aspect-ratio: 3 / 4; }

/* Captions sit under the picture in condensed sans, a size below the
   body. Secondary ink, because a caption that competes with the prose
   beside it steals the reader twice. */
.case-caption {
    font-family: var(--font-condensed);
    font-size: var(--text-small);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: var(--space-xs) 0 0 0;
}

/* The lead picture, directly under the masthead. Full content width -
   the one image on the page that is not held to the measure, because
   it is doing the masthead's job rather than the prose's. */
.case-lead {
    padding: 0 0 var(--space-xl);
}

/* ------------------------------------------------
   Real pictures
   ------------------------------------------------

   A frame that takes an <img> where .case-placeholder takes nothing.
   Same tint, same corners, same ratios - so a section reads the same
   whether its artwork has arrived or not, and swapping a placeholder
   for a picture is a change of one element, not of the layout.

   CONTAIN, not cover, exactly as .case-teaser-image on the index: the
   artwork is device shots on a transparent ground in whatever ratio
   they were made, and cover would crop the tablet's top edge and the
   foot of the phone. The tint shows through the transparency and in
   the margins either side, so the devices sit on the page's own
   ground rather than in a box of their own.
   ------------------------------------------------ */
.case-frame {
    background: var(--case-ground);
    border-radius: var(--radius-case);
    width: 100%;
    overflow: hidden;
}

.case-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Article pictures open the PNG itself, at its own size, for anyone
   who wants to look closer. The whole frame is the link and lifts on
   hover exactly as a teaser card does; the magnifier in the corner is
   the only sign at rest, in the crest purple of the left page
   stripe on a white disc, and goes accent orange with the lift. The closing shot is
   left out: it has no frame to lift. */
.case-frame--zoom {
    display: block;
    position: relative;
    color: var(--color-frame-top);
    transition: box-shadow var(--transition-fast);
}

.case-zoom-icon {
    position: absolute;
    /* Held off the bottom-right corner, but placed from the top-left
       and rounded down to a whole pixel. The split's grid columns and
       the 16:9 ratio leave the frame fractional, and right/bottom
       carried that fraction onto the disc: the 2px strokes straddled
       pixel rows and went thin and lopsided, at some widths and not
       others. 40px is the disc: the 24px glyph plus 8px either side.
       right/bottom stay as the fallback where round() is unknown;
       where it is known, top/left override them. */
    right: var(--space-sm);
    bottom: var(--space-sm);
    top: round(down, calc(100% - var(--space-sm) - 40px), 1px);
    left: round(down, calc(100% - var(--space-sm) - 40px), 1px);
    width: 24px;
    height: 24px;
    /* The 24px glyph on a white disc, so it holds on any artwork. */
    box-sizing: content-box;
    padding: 8px;
    background: var(--color-white);
    border-radius: 50%;
    transition: color var(--transition-fast);
}

@media (hover: hover) {
    .case-frame--zoom:hover {
        box-shadow: 0 8px 20px var(--color-shadow-strong);
    }

    .case-frame--zoom:hover .case-zoom-icon {
        color: var(--color-accent-orange);
    }
}

.case-frame--zoom:active {
    box-shadow: 0 2px 8px var(--color-shadow);
}

.case-frame--zoom:focus-visible {
    outline: 3px solid var(--color-accent-orange);
    outline-offset: 2px;
}

/* ------------------------------------------------
   Fact grid - Ausgangslage / Rolle / Methodik / Ergebnis
   ------------------------------------------------ */

/* 2x2 at desktop. Four facts is the number a reader will actually take
   in before deciding whether to read on; a fifth belongs in the deep
   dive.

   NO rule above the grid, and no card around each fact. The block was
   drawn with a 2px divider first and it was one line too many: each
   fact already carries its own orange rocker bar, and a full-width
   rule above four short rules made the top of the block read as
   scaffolding. White space separates the block now - the same job,
   without the ink. */
.case-facts {
    /* Full-bleed off-white band, the light twin of .case-steps. */
    background: var(--card-fill);
    padding: var(--space-xl) 0;
    margin: 0 0 var(--space-xl);
}

.case-facts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

/* Typography and the accent rule come from the shared rocker block
   above; only the spacing below the label is its own. */
.case-fact-label {
    margin: 0 0 var(--space-xs) 0;
}

/* Justified, by the Admiral's order (2026-10-12), as in the portfolio
   PDF: four short blocks side by side read as a set with clean right
   edges. Hyphenation keeps the word gaps even - justified German
   without it opens rivers, worst in the one-column phone layout. The
   page's lang attribute (switched by i18n-core.js) picks the
   dictionary. */
.case-fact-body {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    text-align: justify;
    hyphens: auto;
    margin: 0;
}

/* ------------------------------------------------
   Deep dive sections
   ------------------------------------------------ */

/* The serif voice begins here. Generous top space rather than a rule
   or a box: on a page this long the reader needs to feel a chapter
   turn, and white space says it more quietly than a divider.
   --space-xxl between blocks at desktop, where text and picture sit
   side by side; back to --space-xl on phones, where each block is
   already a long column of its own. */
.case-section {
    padding: 0 0 var(--space-xxl);
}

/* Libertine Bold, per the Admiral's order. Sized between the masthead
   and the body so it reads as a chapter head rather than a second
   headline competing with the one above it.

   -webkit-text-stroke at 1px, matching .case-teaser-headline on the
   Admiral's order, so a story opens in the same weight its teaser
   promised. 1px is the width laddered on the teasers - see there for
   why it is the ceiling. The stroke is absolute, so at this slightly
   larger size it reads a touch lighter in proportion, never heavier;
   the counters stay open. currentColor for the same reason as the
   teaser. */
.case-section-headline {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: normal;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    -webkit-text-stroke: 1px currentColor;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
    max-width: 24ch;
}

/* Body copy. --line-height-relaxed rather than normal: this is the
   only place on the site with paragraphs long enough to need the extra
   leading, and it is most of what makes the page feel like a magazine
   rather than a product page. */
.case-section-body p {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.case-section-body p:last-child {
    margin-bottom: 0;
}

/* Text and picture side by side, the magazine's basic unit. Even
   columns, on the Admiral's order of 2026-10-04, so the sections sit
   on the same grid as the fact grid above them. A 1.15fr text column
   was the earlier shape, to give the measure more room; the shared
   grid won out.

   --case-split-flip reverses the order so consecutive sections can
   alternate, which is what stops a long page reading as a list. The
   flip is done with `order`, not by reordering the markup, so the
   reading order stays correct for screen readers and for a narrow
   screen, where the stack always puts text first. */
.case-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.case-split--flip .case-split-text { order: 2; }
.case-split--flip .case-split-media { order: 1; }

/* ------------------------------------------------
   Pull quote
   ------------------------------------------------ */

/* Libertine Regular Italic in the stripe navy - the same cut and the
   same colour as the job titles, which is the site's established
   "this is a person speaking" voice.

   Indented from the prose and set larger, with the orange rule at its
   left doing the work quotation marks would do more clumsily. No
   quotation marks: the rule, the serif and the slant already say it
   three times. */
.case-quote {
    margin: 0 0 var(--space-xl) 0;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    /* 5px: the hero rocker's 3px rule is a short dash; running the
       full height of a two-line quote, 3px read as a hairline. */
    border-left: 5px solid var(--color-accent-orange);
    max-width: 48ch;
}

.case-quote p {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.7rem);
    line-height: var(--line-height-normal);
    color: var(--color-stripe);
    margin: 0;
}

.case-quote footer {
    /* Overrides main.css's page <footer> rules, which would otherwise
       give this a background and full-width padding. */
    background: none;
    width: auto;
    padding: var(--space-xs) 0 0 0;
    font-family: var(--font-condensed);
    font-size: var(--text-small);
    color: var(--color-text-secondary);
}

/* ------------------------------------------------
   Steps - the one dark band on the page
   ------------------------------------------------ */

/* Approach and technical specifics as a numbered list on the deep
   purple. It sits straight after the opening chapters, where the
   reader has the story and wants the method, and the colour change
   marks the turn from narrative to inventory.

   Full-bleed inside #baseContainer rather than held to the content
   column: a dark band that stops short of the page frame reads as a
   card that failed to load. */
.case-steps {
    background: var(--color-stripe);
    color: var(--color-white);
    padding: var(--space-xl) 0;
    margin: 0 0 var(--space-xl);
}

/* Fira Extra Condensed, exactly as the index's section headlines -
   the dark Downloads band's h2 in particular, which this band echoes.
   If .download-section h2 in main.css is retuned, retune this too. */
.case-steps-headline {
    font-family: var(--font-extra-condensed);
    font-weight: var(--weight-bold);
    font-size: var(--text-section);
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin: 0 0 var(--space-lg) 0;
}

/* ------------------------------------------------
   Closing chapter
   ------------------------------------------------ */

/* The closing chapter's headline, in the same Extra Condensed voice as
   the steps band above it and the index's section h2s - on the light
   ground, so primary ink instead of white. It opens a chapter, so the
   Libertine deep-dive headline beneath it steps down to an h3. */
.case-chapter-headline {
    font-family: var(--font-extra-condensed);
    font-weight: var(--weight-bold);
    font-size: var(--text-section);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-lg) 0;
}

/* Text left, pull quote right. The split's own even columns and
   its tablet collapse are kept; in one column the quote simply follows
   the text. The quote drops its stand-alone bottom margin here - the
   split's gap and the section's own spacing take over. Pushed down
   by --space-xl so it starts beside the body text rather than level
   with the h3 above it. */
.case-split--quote {
    margin-bottom: 0;
}

.case-split--quote .case-quote {
    margin: var(--space-xl) 0 0 0;
}

/* Sits between the chapter headline and the text + quote, uncaptioned. */
.case-closing-figure {
    margin: 0 0 var(--space-xl) 0;
}

/* The closing shot stands on the page ground itself, no tint behind it.
   --bare is the same treatment for a big in-body shot at full content
   width: no tint, no zoom, no caption, set under its section's text. */
.case-closing-figure .case-frame,
.case-figure--bare .case-frame {
    background: none;
}

.case-figure--bare {
    margin: var(--space-lg) 0 0 0;
}

/* A picture set between two runs of a section's prose, at full content
   width, keeping its tint, zoom and caption. For a section whose text
   is too long to sit beside its picture in a split. */
.case-figure--inline {
    margin: var(--space-lg) 0;
}

/* Two columns at desktop, read across then down. Unordered: these are
   the ingredients of the work, not a sequence to be followed. */
.case-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-lg);
}

/* No hairline and no card per item, for the fact grid's reason: each
   label already carries its orange rocker bar, and a rule above it
   would be one line too many. White space separates the items. */
.case-step {
    padding: var(--space-md) 0;
}

/* The rocker treatment in reverse: condensed semibold caps, white.
   The orange bar above comes from the shared rocker rule. */
.case-step-label {
    font-family: var(--font-condensed);
    font-weight: var(--weight-semibold);
    font-size: var(--text-small);
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 var(--space-xs) 0;
}

.case-step-body {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    line-height: var(--line-height-normal);
    color: var(--color-white);
    opacity: 0.8;
    margin: 0;
}

/* ------------------------------------------------
   More case studies
   ------------------------------------------------ */

/* The floating back button is a shortcut, not a route. A reader who
   has reached the bottom should find the way on without hunting for a
   56px disc - so the page ends on the other stories, not on links. */
.case-more {
    padding: var(--space-lg) 0 var(--space-xxl);
}

.case-more .case-section-headline {
    margin-bottom: var(--space-md);
}

.case-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

/* The index's .case-teaser, cut down: picture and headline only, and
   everything a size smaller so three sit in one row.

   The stroke comes down with the type, 1px -> 0.6px. It is an absolute
   width - see .case-teaser-headline in main.css - so shrinking the
   type alone would have made the headline proportionally fatter and
   closed the counters. */
.case-teaser--compact .case-teaser-body {
    padding: var(--space-sm) var(--space-sm) var(--space-md);
}

.case-teaser--compact .case-teaser-headline {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    -webkit-text-stroke-width: 0.6px;
}

/* ------------------------------------------------
   Responsive - the project's three breakpoints
   ------------------------------------------------ */

/* Tablet. The content column widens (matching main.css's treatment of
   .section-content) and the split collapses: at this width a half-width
   text column is already below a comfortable measure. */
@media (max-width: 1199px) {
    .case-content {
        width: 100%;
        max-width: 75%;
        padding: 0 var(--space-sm);
    }

    .case-split {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* The flip is meaningless in one column, and leaving it in place
       would put a picture above the text that explains it. */
    .case-split--flip .case-split-text,
    .case-split--flip .case-split-media {
        order: initial;
    }

    .case-split--quote .case-quote {
        margin-top: 0;
    }
}

/* Mobile. The fact grid, the steps and the teaser row all go
   single-column: two facts across a phone leaves ~16 characters a
   line, and three teasers across it leave a headline per word. */
@media (max-width: 767px) {
    .case-content {
        max-width: 100%;
        padding: 0 var(--space-md);
    }

    .case-masthead {
        padding-top: var(--space-xl);
    }

    .case-section {
        padding-bottom: var(--space-xl);
    }

    .case-facts-grid,
    .case-steps-list,
    .case-more-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .case-headline,
    .case-section-headline {
        max-width: none;
    }
}

@media (max-width: 480px) {
    /* No narrower gutter here: --space-md from the mobile rule above
       holds. The 1rem that used to sit here was paired with the 10px
       page frame; with the frame gone it left the text 16px from the
       glass. */

    /* The quote's indent costs more than it earns on a narrow screen -
       the rule stays, the padding shrinks to keep the measure. */
    .case-quote {
        padding-left: var(--space-sm);
    }
}

/* ------------------------------------------------
   Print
   ------------------------------------------------ */

/* main.css already hides the frame, the lang toggle and the back-to-top
   disc. The back-to-index disc and the onward teasers go the same way:
   neither means anything on paper. */
@media print {
    .back-to-index,
    .case-more {
        display: none !important;
    }

    .case-steps {
        background: none;
        color: #000;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;
    }

    .case-steps-headline,
    .case-step-label,
    .case-step-body {
        color: #000;
        opacity: 1;
    }


    .case-placeholder {
        border: 1px solid #999;
        background: none;
    }
}