/* #region Organizations */
.alibi-organizations {
    /* How far the middle card is set down from the other two. A margin and not a transform, which is
       the whole point of it: a transform moves the picture and leaves the layout behind, so the grid ends
       above a card that visibly hangs past it and the section's foot is measured from the wrong line — the
       lowest picture then sits closer to the closing rule than the eyebrow sits to the one
       above. Worse, .reveal-elem animates entrances with transform too, and the two rules have the
       same specificity: the stagger won, so this one card never made the entrance the other two make.

       As a margin the row simply grows by this much, the foot stays symmetrical with no compensation
       to keep in step, and transform is left to the animation alone. The card meets the others at the
       bottom edge rather than hanging below them — the composition is offset at the head now, which
       is what makes the space under the row a single, readable distance. */
    --organizations-stagger: clamp(2rem, 5vw, 5rem);
    position: relative;
    overflow: hidden;
    padding: 15vh 0;
    border-bottom: 1px solid var(--line);
    background: #050505;
}

    .alibi-organizations > .container {
        width: min(90vw, var(--hero-content-max));
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }

.alibi-organizations-intro {
    margin-bottom: clamp(5rem, 9vw, 9rem);
}

    .alibi-organizations-intro > div {
        max-width: 58rem;
    }

    .alibi-organizations-intro h2 {
        margin: 0;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(3.2rem, 6vw, 7rem);
        font-weight: 300;
        line-height: .92;
        letter-spacing: -.05em;
    }

        .alibi-organizations-intro h2 i {
            color: var(--gold);
            font-weight: 300;
        }

        .alibi-organizations-intro h2 + p {
            max-width: 46rem;
            margin: 2rem 0 0;
            color: var(--text-muted);
            font-size: clamp(1rem, 1.05vw, 1.06rem);
            font-weight: 200;
            line-height: 1.9;
        }

.alibi-organizations-cases {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.2rem, 2vw, 2rem);
}

.alibi-organizations-case {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-column: span 4;
    min-height: 42rem;
    border: 1px solid var(--line);
    background: var(--black);
}

    .alibi-organizations-case:nth-child(2) {
        margin-top: var(--organizations-stagger);
    }

    .alibi-organizations-case figure {
        overflow: hidden;
        margin: 0;
        aspect-ratio: 5 / 4;
    }

    .alibi-organizations-case img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: var(--photo-grade);
        transition: transform 1.8s var(--ease-house);
    }

    .alibi-organizations-case:hover img {
        transform: scale(1.025);
    }

.alibi-organizations-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(2rem, 3.5vw, 3.5rem);
}

    .alibi-organizations-copy > span {
        margin-bottom: auto;
        padding-bottom: 3rem;
        color: rgba(245, 245, 245, .5);
        font-family: var(--font-mono);
        font-size: .56rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        transition: color var(--motion) var(--ease-house);
    }

    .alibi-organizations-case:hover .alibi-organizations-copy > span {
        color: var(--gold);
    }

    .alibi-organizations-copy h3 {
        margin: 0 0 1.2rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 2.6vw, 3rem);
        font-weight: 300;
        line-height: 1;
    }

    .alibi-organizations-copy p {
        margin: 0;
        color: var(--text-muted);
        font-size: .88rem;
        font-weight: 200;
        line-height: 1.8;
    }

@media (max-width: 950px) {
    /* Two across: the stagger has nothing to stagger against, so it goes — and with it the space the
       foot holds for it. Zeroing the offset does both at once. */
    .alibi-organizations {
        --organizations-stagger: 0px;
    }

    .alibi-organizations-intro {
        grid-template-columns: 1fr;
    }

    .alibi-organizations-case {
        grid-column: span 6;
    }

        .alibi-organizations-case:last-child {
            grid-column: 4 / span 6;
        }
}

@media (max-width: 620px) {
    .alibi-organizations {
        padding: 7rem 0;
    }

    .alibi-organizations-cases {
        grid-template-columns: 1fr;
    }

    .alibi-organizations-case,
    .alibi-organizations-case:last-child {
        grid-column: auto;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* The stagger stays. It is a margin now — a composition, not a movement — and somebody who asks
       for less motion asked for less motion, not for a different layout. Only the picture's zoom,
       which genuinely moves, is switched off. */
    .alibi-organizations-case img {
        transition: none;
    }
}

/* #endregion */

/* #region Product */
.alibi-object {
    position: relative;
    overflow: hidden;
    padding: 15vh 0;
    background: var(--black);
    border-bottom: 1px solid var(--line);
}

    .alibi-object::before {
        position: absolute;
        top: 12%;
        right: -12vw;
        width: min(38vw, 580px);
        aspect-ratio: 1;
        border: 1px solid var(--hairline);
        border-radius: 50%;
        content: "";
        pointer-events: none;
    }

.alibi-object-grid {
    display: grid;
    grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 9rem);
    width: min(90vw, var(--hero-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.alibi-object-copy {
    position: relative;
    z-index: 2;
}

    .alibi-object-copy h2 {
        margin: 1.7rem 0 2rem;
        color: var(--white);
        font-family: var(--font-display);
        font-size: clamp(3rem, 5vw, 6.2rem);
        font-weight: 300;
        line-height: .94;
        letter-spacing: -.045em;
    }

        .alibi-object-copy h2 i {
            color: var(--gold);
            font-weight: 300;
        }

    .alibi-object-copy > p {
        max-width: 31rem;
        color: var(--text-muted);
        font-size: clamp(1rem, 1.05vw, 1.05rem);
        font-weight: 200;
        line-height: 1.9;
    }

.alibi-object-facts {
    margin: clamp(3rem, 5vw, 5rem) 0 0;
    border-top: 1px solid var(--hairline-mid);
}

    .alibi-object-facts div {
        display: grid;
        grid-template-columns: 3rem 1fr;
        gap: 1.2rem;
        align-items: center;
        padding: 1.25rem 0;
        border-bottom: 1px solid var(--line);
    }

    .alibi-object-facts dt {
        color: rgba(245, 245, 245, .5);
        font-family: var(--font-mono);
        font-size: .58rem;
        letter-spacing: .18em;
    }

    .alibi-object-facts dd {
        margin: 0;
        color: rgba(245, 245, 245, .78);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.5vw, 1.55rem);
        font-weight: 300;
    }

.alibi-object-gallery {
    position: relative;
    min-height: clamp(35rem, 52vw, 48rem);
}

.alibi-object-photo {
    position: absolute;
    overflow: hidden;
    margin: 0;
    background: #050505;
    box-shadow: 0 2.5rem 6rem rgba(5, 5, 5, .55);
}

    .alibi-object-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.8s var(--ease-house);
    }

    .alibi-object-photo:hover img {
        transform: scale(1.025);
    }

    /* No frame written here. This photograph carries the house's closed passe-partout, and that lives
       once — in product-sections.css, where .alibi-object-photo::after joins the selector list every
       other framed picture is on. A copy here is how the same hairline ended up at five different
       opacities across six stylesheets. */

.alibi-object-photo--hero {
    inset: 4% 0 4% 6%;
    z-index: 1;
}

@media (max-width: 1000px) {
    .alibi-object-grid {
        grid-template-columns: 1fr;
    }

    .alibi-object-copy {
        max-width: 42rem;
    }

    /* The height cap is for a phone held sideways, where the gallery was two screens tall. */
    .alibi-object-gallery {
        min-height: min(112vw, 52rem, 90svh);
    }
}

@media (max-width: 620px) {
    .alibi-object {
        padding: 7rem 0;
    }

    .alibi-object-gallery {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: .65rem;
        min-height: 0;
    }

    .alibi-object-photo {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .alibi-object-photo--hero {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 11;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alibi-object .reveal-elem {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .alibi-object-photo img {
        transition: none;
    }
}

/* #endregion */

/* #region Rhythm */
/* The deck belongs to this list too: without its closing rule the ritual runs straight into „Materia i
   rzemiosło" with nothing between them, and that section then appears to be missing the line every other
   section on the page opens with. */
.alibi-object,
.alibi-deck,
.steps-section,
.testimonials,
.alibi-organizations,
.pricing-section,
.core-interface,
.filmable-callout,
.ecosystem-pairing,
.product-journal {
    border-top: 0;
    border-bottom: 1px solid var(--hairline);
}

.alibi-object,
.steps-section,
.testimonials,
.alibi-organizations,
.pricing-section,
.core-interface,
.ecosystem-pairing,
.product-journal {
    padding-top: clamp(6rem, 10vw, 9rem);
    padding-bottom: clamp(6rem, 10vw, 9rem);
}

    .alibi-object-copy h2,
    .steps-title,
    .testi-header h2,
    .alibi-organizations-intro h2,
    .pricing-section .explore-header h2,
    .home-concierge-heading h2,
    .ecosystem-pairing .ep-copy h2,
    .pj-header h2 {
        font-size: clamp(2.8rem, 4.6vw, 5.4rem);
        line-height: .98;
        letter-spacing: -.04em;
    }

.alibi-organizations-intro,
.pj-header {
    margin-bottom: clamp(4rem, 7vw, 6.5rem);
}

    /* Only .steps-tag is left here — it is an eyebrow that is not an .h-tag, so it has to be told the
       measure. The four .h-tag selectors that stood beside it were removed: they restated, at a fifth
       value, the distance .h-tag already gives every eyebrow on the site. */
    .steps-sticky .steps-tag {
        margin-bottom: var(--section-tag-gap);
    }

footer {
    border-top: 1px solid var(--hairline-mid);
}

.product-journal {
    border-top: 1px solid var(--hairline);
    border-bottom: 0;
}

/* The journal above gives up its bottom border, so the seam before the summary and the FAQ is drawn
   by the block below it — and that one carries the shared --line, a shade fainter than the hairline
   this page draws everywhere else. Between two dark grounds that difference is the difference
   between a line and no line, so it is stated here, like the footer's just above. */
.seo-knowledge {
    border-top: 1px solid var(--hairline);
}

.core-interface.home-concierge {
    margin-top: 0;
    padding-bottom: clamp(8rem, 13vw, 12rem);
    border-top: 0;
    border-bottom: 0;
}

.filmable-callout {
    border-top-color: var(--hairline);
    border-bottom: 0;
}

.ecosystem-pairing .ep-grid {
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 620px) {
    .alibi-object,
    .steps-section,
    .testimonials,
    .alibi-organizations,
    .pricing-section,
    .core-interface,
    .ecosystem-pairing,
    .product-journal {
        padding-top: 5.5rem;
        padding-bottom: 5.5rem;
    }

        .alibi-object-copy h2,
        .steps-title,
        .testi-header h2,
        .alibi-organizations-intro h2,
        .pricing-section .explore-header h2,
        .home-concierge-heading h2,
        .ecosystem-pairing .ep-copy h2,
        .pj-header h2 {
            font-size: clamp(2.55rem, 12vw, 3.65rem);
        }

        .core-interface.home-concierge {
            margin-top: 0;
            padding-bottom: 7.5rem;
        }
}

/* #endregion */

/* #region Deck of the day */
/* The house rhythm, from the token every other section reads — never a vh measure of its own, which
   drifts from its neighbours on every viewport but the one it is tuned at and lets the section below
   start too soon. */
.alibi-deck {
    padding: var(--section-space) 0;
}

    /* The bare .container has no inline padding — without the 90vw opt-in the deck touched
       both screen edges on phones. */
    .alibi-deck > .container {
        width: min(90vw, var(--section-content-max));
        max-width: none;
        margin-inline: auto;
    }

/* The heading stands on the section's own left edge, like every other heading on the page. It used
   to be a 640px container of its own, centred by the rule above — text set flush left inside a box
   floating in the middle of the section, which read as a column that had lost its grid. The measure
   is capped on the lines themselves instead. */
/* The cards stand well clear of the sentence that introduces them: they are objects laid on a table,
   not an illustration of the paragraph above, and the room between the two is what says so. */
.alibi-deck-heading {
    margin-bottom: clamp(4rem, 8vh, 7rem);
}

    .alibi-deck-heading h2,
    .alibi-deck-heading > p {
        max-width: 640px;
    }

    .alibi-deck-heading h2 {
        font-family: var(--font-display);
        font-size: var(--section-title-size);
        font-weight: 300;
        line-height: 1.12;
    }

        .alibi-deck-heading h2 i {
            color: var(--gold);
        }

    .alibi-deck-heading > p {
        margin-top: var(--section-lead-gap);
        color: var(--white-soft);
        font-weight: 300;
        line-height: 1.75;
    }

/* The pile on the left, the table on the right — two cards side by side and nothing else. A fan of
   loose cards in the left column is one card rotated by nothing while the folder holds a single
   illustration, and it explains nothing about a deck a visitor can draw from; a table of everything
   drawn beside the pile only makes sense while a visitor can keep drawing. */
.alibi-deck-stage {
    display: grid;
    /* Stretched, never justify-items: start. A start-aligned grid item is sized shrink-to-fit, and
       every part of a card here is absolutely positioned — the pile, the backs, the fronts, the
       control — so the pair contributes no width of its own. The column therefore took its width from
       the one line of copy underneath it, and the pair's own percentage resolved against the length of
       that sentence: the cards came out exactly as wide as the hint was long, and no measurement
       written on the card could win against it. Stretched, the percentage means the section, and the
       pair caps itself at two cards. It still stands on the left — because it is narrower than the
       column, not because the column shrank onto it. */
    justify-items: stretch;
}

/* One scene for both cards, and that is the point of putting the perspective here rather than on each
   pile: two cards lying on the same table share a vanishing point, so they lean outwards from the
   middle instead of each standing straight in a box of its own. The objects themselves are built the
   way the Lens welcome card is — a real thickness, faces that hide their backs, and every highlight a
   function of the one angle the card is standing at. Nothing is photographed and nothing is loaded. */
.alibi-deck-pair {
    /* The deck is printed at poker size — 63.5 × 88.9 mm — and 63.5 mm is the floor here, never the
       whole answer: a CSS millimetre is a millimetre only on a display of exactly 96 dpi, and on a
       dense or system-scaled screen the same declaration draws a token rather than a card. So the
       card is at least its printed width and grows with the viewport, the way an object seen from
       further back has to, up to a card that fills its half of the section. Below the floor the pair
       still shrinks: two cards at real size do not fit across a phone in the first place.

       Everything else in the deck is a share of this one measurement rather than a pixel count of its
       own — the stock, the rounding of the corners, the offsets of the pile, how far a drawn card is
       lifted and how deep the scene is. That is what makes the size a single number to change, and
       what stops a card twice as wide from wearing a stack, a lift and a corner tuned for a card
       half its size. */
    --deck-card-width: clamp(63.5mm, 22vw, 22rem);
    /* 1/60th of the card: the small change the pile and the lift are built from. */
    --deck-unit: calc(var(--deck-card-width) / 60);
    /* A poker card's corner is cut at about 3.2 mm — a twentieth of its width. */
    --deck-radius: calc(var(--deck-card-width) * .05);
    /* 0.8 mm of card stock, held against the card's own 63.5. It is only ever seen edge-on, for the
       half second the card turns through its own profile. */
    --deck-thickness: calc(var(--deck-card-width) * .0126);
    /* Two cards laid on a table with room between them, not a pair standing shoulder to shoulder: the
       question and the answer are two objects a guest picks up one at a time. */
    --deck-gap: clamp(2rem, 5vw, 4.5rem);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--deck-gap);
    width: min(100%, calc(var(--deck-card-width) * 2 + var(--deck-gap)));
    /* The depth of the scene is a distance from the card, so it is measured in cards: a fixed 1500 px
       is a viewer standing close to a small card and far from a large one, and the foreshortening
       changed with the window. */
    perspective: calc(var(--deck-card-width) * 6.25);
    perspective-origin: 50% 42%;
}

/* The illustrations are black line art from the workshop's own files; on this ground they wear
   the house's champagne gold. !important is deliberate: the paths carry inline fills. */
.alibi-deck-face svg path {
    fill: var(--gold) !important;
    stroke: none !important;
}

/* The box the drawing is fitted into is stated once, further down beside .alibi-deck-face — a second
   description of the same element stood here with `height: auto`, and being earlier in the file it
   lost, so it only looked as though the card sized itself to the artwork. */
.alibi-deck-face svg {
    display: block;
}

.alibi-deck-draw {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.6rem, 3vh, 2.2rem);
}

/* #region The pile */
/* The pile is a stage of its own so the card can lift, lean and be pulled aside without moving
   anything around it — everything below is positioned against this box, never against the flow.
   It keeps the 3D space open rather than opening one of its own: the perspective belongs to the pair,
   and a pile that flattened here would put its card back into a picture. */
.alibi-deck-pile {
    position: relative;
    width: 100%;
    /* The printed proportion itself, not a rounding of it. The width is the one thing that changes with
       the screen, so whatever size the card is drawn at it is that card seen nearer or further away,
       never a different card. */
    aspect-ratio: 63.5 / 88.9;
    transform-style: preserve-3d;
    /* Both piles take the same tilt from the same pointer, so the two cards lean together the way
       two objects on one table do. The script writes the two numbers and nothing else. */
    transform: rotateX(calc(var(--deck-tilt-x, 0) * 1deg)) rotateY(calc(var(--deck-tilt-y, 0) * 1deg));
    transition: transform 1s var(--ease-house);
}

/* One card on the table and nothing behind it. Backs leaning out from under it — with the offsets and
   the hover that fan them — draw the eye to the pile the card came off rather than to the card, and an
   edge nobody can take hold of is decoration wearing the clothes of an object. */

/* The card is the object; the button over it is the control. */
.alibi-deck-card {
    /* Where the card is, in one number: how far it has been lifted towards the visitor. Pushing it
       aside and spinning it as it goes takes three numbers and makes a deal-away — the one movement
       here that imitates a hand rather than a card. */
    --deck-lift: 0px;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    transform: translate3d(0, 0, var(--deck-lift));
    transform-style: preserve-3d;
    transition: transform .55s var(--ease-house);
}

/* The one thing a pointer does to the card besides leaning it: a hand held over a card on a table
   lifts it slightly towards whoever is reaching. Only the card that carries a control answers — one
   of the pair is the control and the other is what the control turns over. */
.alibi-deck-pile:not(.alibi-deck-pile--art):hover .alibi-deck-card {
    --deck-lift: calc(var(--deck-unit) * 4);
}

/* The control is the size of the card and invisible: a real button, so the pair is reachable by
   keyboard and announced as something that can be pressed, with the focus ring around the object it
   turns. Every button style the browser brings is undone here. */
.alibi-deck-control {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.alibi-deck-control:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 8px;
}

/* Changing the question is the movement a card actually makes: it is turned back face down, and turned
   up again with the next question on it. Nothing slides, nothing spins and nothing has to be hidden
   while it happens — swept aside, reset out of sight and turned up again is three movements and a
   hidden one to say one thing. */

/* The angle the card is turned to, as a plain number beside the transform that turns it. Registering
   it is what lets it be interpolated at all: the gilding reads this one number, so the light crosses
   the card while it turns instead of jumping when it lands. A browser that does not know @property
   still gets the turn — the transform is written out beside it — and simply steps the highlight. */
@property --deck-turn {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

.alibi-deck-card-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .85s var(--ease-house), --deck-turn .85s var(--ease-house);
}

.alibi-deck-card.is-flipped .alibi-deck-card-inner {
    --deck-turn: 180;
    transform: rotateY(180deg);
}

/* The illustration answers the question rather than arriving with it: half a beat later, which is the
   order the section's own sentence puts them in. It is a delay and not a second timer — the pair still
   turns once, and one card simply waits for the other. */
.alibi-deck-card--art,
.alibi-deck-card--art .alibi-deck-card-inner {
    transition-delay: .18s;
}

.alibi-deck-card-back,
.alibi-deck-card-front {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hairline-mid);
    border-radius: var(--deck-radius);
    background:
        radial-gradient(circle at 50% 42%, var(--tint), transparent 62%),
        var(--surface-card);
    backface-visibility: hidden;
    box-shadow: 0 26px 64px rgba(5, 5, 5, .5);
}

/* Gold has no light of its own: gilding turns the light in the room back at whoever is standing
   there, and only at the angle that sends it their way. So there is no timer on any reflection here —
   one number carries them all, and it is the same number the turn is made of, plus the pointer's tilt
   counted heavier, because a hand moving over a card is a small movement that ought to show. The two
   faces look opposite ways, so they read that number with opposite signs: each is brightest with the
   card facing the visitor and gives its light up as the card turns away onto its edge.

   Each face works the angle out for itself from the one it inherits, rather than being handed a
   number computed beside it — the turn is set one element up, and reading it from there is what makes
   the light cross the gilding while the card is still turning. */
.alibi-deck-card-back {
    --deck-glint: calc(1.02 + .34 * cos(calc(var(--deck-turn, 0) + var(--deck-tilt-y, 0) * 3) * 1deg));
}

.alibi-deck-card-front {
    --deck-glint: calc(1.02 - .34 * cos(calc(var(--deck-turn, 0) + var(--deck-tilt-y, 0) * 3) * 1deg));
}

/* Card stock dyed through: the grain is the paper. Nothing else lies over a face — black paper has
   no shine to catch, and each gilded thing on it carries its own reflection instead. */
.alibi-deck-card-back::before,
.alibi-deck-card-front::before {
    content: '';
    position: absolute;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)"/%3E%3C/svg%3E');
    border-radius: var(--deck-radius);
    inset: 0;
    opacity: .06;
    pointer-events: none;
}

/* The printed frame every card of the deck carries — gilded, so it takes the light with everything
   else that is. Set as a share of the card rather than in pixels: it is a printed margin, and a
   margin that stays 10 px wide swallows a card seen on a phone. */
.alibi-deck-card-back::after,
.alibi-deck-card-front::after {
    content: '';
    position: absolute;
    inset: 4.5%;
    border: 1px solid rgba(var(--gold-rgb), .16);
    filter: brightness(var(--deck-glint, 1));
    pointer-events: none;
}

/* The back carries the house's signet, small and in the middle — the way a printed deck marks its
   own backs. A wordmark running down the card is the masthead's job, not a card's. */
.alibi-deck-card-signet {
    /* An eighth of the card, on the card's own clamp — a mark printed on a back keeps its share of the
       back at every size the card is drawn at. */
    width: clamp(1.9rem, 2.8vw, 2.8rem);
    height: auto;
    filter: brightness(var(--deck-glint, 1));
    opacity: .9;
}

/* 0.8 mm of card, seen from the side. Four strips, each stood up on one edge of the face — the only
   way the card reads as an object rather than a picture when it turns through its own profile. Each
   is rotated about the edge it stands on, so nothing here has to know how wide the card is; the
   thickness is the whole measurement. Each stops short of the corner radius, because a strip run to
   the full height sticks out past the rounding and four of them draw a sharp rectangle around a card
   whose corners are round. */
.alibi-deck-edge {
    position: absolute;
    background: linear-gradient(rgba(var(--gold-rgb), .34), #050505 45%, rgba(var(--gold-rgb), .2));
}

.alibi-deck-edge-left,
.alibi-deck-edge-right {
    top: var(--deck-radius);
    width: var(--deck-thickness);
    height: calc(100% - var(--deck-radius) * 2);
}

.alibi-deck-edge-left {
    left: 0;
    transform: translateZ(calc(var(--deck-thickness) / -2)) rotateY(-90deg);
    transform-origin: left center;
}

.alibi-deck-edge-right {
    right: 0;
    transform: translateZ(calc(var(--deck-thickness) / -2)) rotateY(90deg);
    transform-origin: right center;
}

.alibi-deck-edge-top,
.alibi-deck-edge-bottom {
    left: var(--deck-radius);
    width: calc(100% - var(--deck-radius) * 2);
    height: var(--deck-thickness);
}

.alibi-deck-edge-top {
    top: 0;
    transform: translateZ(calc(var(--deck-thickness) / -2)) rotateX(90deg);
    transform-origin: center top;
}

.alibi-deck-edge-bottom {
    bottom: 0;
    transform: translateZ(calc(var(--deck-thickness) / -2)) rotateX(-90deg);
    transform-origin: center bottom;
}

/* Each face sits half a thickness out from the middle, which is where the four strips end — the card
   is a closed box rather than two sheets in the same place. */
.alibi-deck-card-back {
    transform: translateZ(calc(var(--deck-thickness) / 2));
}

/* The printed side of a card, laid out the way a card is printed: the mark at the head, the question
   in the middle, the category at the foot. Three things in a column, so the middle one takes whatever
   room the other two leave and stays centred in it however long the question runs. */
.alibi-deck-card-front {
    flex-direction: column;
    justify-content: space-between;
    padding: 13% 11%;
    transform: rotateY(180deg) translateZ(calc(var(--deck-thickness) / 2));
}

/* The drawing is the whole card: edge to edge, with only the printed frame over it. Inset behind a
   printed question it becomes a watermark, and one card then carries both halves of a box that holds
   two decks — which is not the object we sell. */
.alibi-deck-card--art .alibi-deck-card-front {
    padding: 0;
}

.alibi-deck-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    /* The script shows one drawing at a time by setting `hidden` on the rest, and an author
       `display` beats the attribute's own `display: none` from the browser's stylesheet — so
       without this line every card in the folder is dealt onto the table at once. A folder holding one
       drawing hides it; the second drawing is where it shows. */
    .alibi-deck-face[hidden] {
        display: none;
    }

    /* The drawing fills the card and is never cropped: the artwork is drawn at the printed card's
       own proportion, so it fits, and `preserveAspectRatio` — the default on an inline SVG — keeps
       what little difference there is as air rather than as a slice off the edge. `object-fit` used
       to close this rule and did nothing at all: it governs replaced elements, and an inline <svg>
       is not one. A card drawn at another proportion would letterbox here, which is the right
       failure for a picture we licence. */
    .alibi-deck-face svg {
        width: 100%;
        height: 100%;
    }

/* It takes no lift of its own — only one of the pair rises under the pointer — but it does take the
   cursor: touching either card deals the next pair, so the illustration has to look as touchable as
   the question it belongs to. */
.alibi-deck-card--art {
    cursor: pointer;
}

/* The question, printed on the card. Set under the card as a line of page copy while the card itself
   turns over to a picture, the thing the visitor drew says nothing. Playfair, because a card is a
   printed thing. */
.alibi-deck-card-question {
    position: relative;
    z-index: 1;
    /* It takes the room the mark and the category leave and stands in the middle of it, so a short
       question and a long one are printed on the same line of the card. */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* Gilded like everything else printed on this card. In white it is the one thing on the object that
       is not gold leaf — ink on a black card rather than part of the printing. */
    color: var(--gold);
    font-family: var(--font-display);
    /* Five per cent of the card, on the same clamp the card is written with, so the three arms change
       over at the same two widths and the question keeps its share of the card at every size. Set
       against the card and not the window: a card that has stopped growing must not carry type that
       keeps going. */
    font-size: clamp(.86rem, 1.28vw, 1.28rem);
    font-weight: 300;
    /* Set wider than body copy would be: this is a question printed on a card and read at arm's
       length, and three tight lines in the middle of an empty card read as a label on it. */
    line-height: 1.62;
    text-align: center;
    text-wrap: balance;
}

/* The house's mark at the head of the printed side — the same signet the back carries, smaller,
   because on the front it is a maker's mark and not the whole design. The file is drawn in the
   house's gold, so nothing here recolours it; it only takes the same light as the rest of the
   gilding. */
.alibi-deck-card-mark {
    position: relative;
    z-index: 1;
    flex: none;
    width: clamp(1.2rem, 1.76vw, 1.76rem);
    height: auto;
    filter: brightness(var(--deck-glint, 1));
    opacity: .85;
}

/* The category at the foot, set the way a card files itself: small capitals, widely tracked, quieter
   than the question above it. No full stop — it is a label, not a sentence. */
.alibi-deck-card-category {
    position: relative;
    z-index: 1;
    flex: none;
    color: var(--gold);
    font-size: clamp(.63rem, .79vw, .79rem);
    /* Heavier than the question above it, which is the opposite of the usual order and right here: the
       question is set in a light display face and the category is a stamp. At this size, tracked out
       and in capitals, anything lighter reads as a caption rather than as printing. */
    font-weight: 600;
    letter-spacing: .24em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    opacity: .72;
}

/* How long this pair stays on the table, drawn along the foot of the card rather than said in a line of
   copy under the deck: a card visibly running out of time asks to be touched better than a sentence
   asking for a touch. It sits inside the printed frame, on the measure the question is set to. */
.alibi-deck-card-progress {
    position: absolute;
    right: 11%;
    bottom: 6.5%;
    left: 11%;
    z-index: 1;
    overflow: hidden;
    height: calc(var(--deck-unit) * .25);
    background: var(--hairline-mid);
}

    /* The fill carries no transition of its own, which is what makes the reset instant: the clock is
       put back to nothing by taking the class off, and only the running state describes how it
       travels. The duration is the interval the script keeps, handed down as a property rather than
       written twice. */
    .alibi-deck-card-progress i {
        display: block;
        height: 100%;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left center;
    }

    .alibi-deck-card-progress.is-running i {
        transform: scaleX(1);
        transition: transform var(--deck-hold, 7s) linear;
    }
/* #endregion */

@media (max-width: 760px) {
    /* The pair stays a pair: two cards side by side is the whole point, and they simply grow
       narrower together. The gap is narrowed through the variable rather than the property, because
       the pair's own width is two cards plus that gap — set one and leave the other and the cards
       come out a few pixels wider than the deck is printed. */
    .alibi-deck-pair {
        --deck-gap: 1.5rem;
    }
}

/* Two cards abreast on the narrowest phones are some 130px each, and the longest question at the
   card's own floor size pushed the category onto the progress rule. The margin and the type give. */
@media (max-width: 380px) {
    .alibi-deck-card-front {
        padding: 10% 9%;
    }

    .alibi-deck-card-question {
        font-size: .8rem;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alibi-deck-card,
    .alibi-deck-card-inner,
    .alibi-deck-pile {
        transition: none;
    }

    /* The deck does not turn by itself for a visitor who asked for less movement, so there is no
       clock to draw. A bar that never moved would be a promise of a change that is not coming. */
    .alibi-deck-card-progress {
        display: none;
    }

    /* The cards keep their thickness and their gilding — those are what the objects are, not
       movement. What goes is everything that travels: the lift, the lean under a pointer that is not
       followed anyway, and the turn's own animation. The pair still changes, it simply changes at
       once. */
    .alibi-deck-pile:not(.alibi-deck-pile--art):hover .alibi-deck-card {
        --deck-lift: 0px;
    }

    .alibi-deck-pile {
        transform: none;
    }
}
/* #endregion */