/* ==========================================================================
   KAIRON CONSULTANTS — ONE MATERIAL, IMPRESSED
   White linen paper. Everything on it is either raised from it (the emblem)
   or pressed into it (type, panels, images). Nothing floats, nothing chases
   the cursor — the page behaves like a physical object.
   ========================================================================== */

/* One virtual lamp casts every shadow on the site. kairon-light.js steers
   these; without JS (or with reduced motion) the light rests at the top. */
:root {
    --lx: 0;
    --ly: -1;
    --par-x: 0px;
    --par-y: 0px;
}

/* Registered so the pieces' shadow lift can transition smoothly
   (progressive enhancement — older browsers simply jump) */
@property --lift {
    syntax: "<number>";
    initial-value: 1;
    inherits: false;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f2f1ef;
}

body {
    animation: page-in 0.9s ease-out backwards;
}

@keyframes page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Locked, responsive canvas */
.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}

/* Static, dead-centered full-bleed layers */
.layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
}

.background {
    z-index: 0;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   LINEN VEIL — CSS-woven thread grain + paper noise + soft vignette,
   multiplied into the photographic base so the surface reads as cloth-paper
   -------------------------------------------------------------------------- */

.texture-veil {
    z-index: 1;
    mix-blend-mode: multiply;
    background-image:
        /* soft vignette grounds the sheet */
        radial-gradient(ellipse 120% 100% at 50% 46%, rgba(0, 0, 0, 0) 55%, rgba(30, 28, 26, 0.055) 100%),
        /* paper-fiber noise */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        /* horizontal weft threads */
        repeating-linear-gradient(0deg, rgba(66, 60, 52, 0.018) 0px, rgba(66, 60, 52, 0.018) 1px, transparent 1px, transparent 3px),
        /* vertical warp threads */
        repeating-linear-gradient(90deg, rgba(66, 60, 52, 0.014) 0px, rgba(66, 60, 52, 0.014) 1px, transparent 1px, transparent 3px);
}

/* --------------------------------------------------------------------------
   THE ROAMING LAMP — a soft pool of light that glides across the sheet,
   positioned each frame by kairon-light.js
   -------------------------------------------------------------------------- */

#light-sheen {
    position: fixed;
    top: -60vmax;
    left: -60vmax;
    width: 120vmax;
    height: 120vmax;
    border-radius: 50%;
    pointer-events: none;
    z-index: 300;
    background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 68%);
    mix-blend-mode: soft-light;
    opacity: 0.6;
    will-change: transform;
    transform: translate3d(50vw, 25vh, 0);
}

/* ==========================================================================
   BRANDING — embossed emblem above a blind-debossed wordmark
   ========================================================================== */

.logo-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate3d(var(--par-x), var(--par-y), 0);
    z-index: 2;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
    box-sizing: border-box;
    height: auto;
}

#brand-trigger {
    cursor: pointer;
    display: block;
    pointer-events: auto;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    animation: brand-settle 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes brand-settle {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

#brand-trigger:hover {
    transform: translateY(-2px);
}

#brand-trigger.fade-out {
    opacity: 0;
    pointer-events: none;
}

.emblem-wrap {
    position: relative;
    display: block;
    width: 320px;
    aspect-ratio: 1 / 1;
    margin: -52px auto -42px auto;
}

/* Raised emblem, split along its gap lines into four independent pieces.
   Each piece is a full copy of the artwork clipped to its own region, so
   at rest the four together are pixel-identical to the original mark.
   Each casts its own true shadow away from the lamp (--shx/--shy/--shb/--sha,
   aimed by kairon-light.js); --lift amplifies the shadow while airborne. */
.piece {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    --lift: 1;
    filter:
        drop-shadow(calc(var(--shx, 0px) * var(--lift)) calc(var(--shy, 5px) * var(--lift)) calc(var(--shb, 6px) * var(--lift)) rgba(40, 38, 36, var(--sha, 0.3)))
        drop-shadow(calc(var(--lx) * 1px) calc(var(--ly) * 1px) 1px rgba(255, 255, 255, 0.85));
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), --lift 1.5s ease;
    will-change: transform;
}

.brand-emblem {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    /* Forces each clipped copy onto its own compositor layer; without this,
       Chromium leaves a faint unclipped ghost behind while pieces move */
    transform: translateZ(0);
}

/* Partition regions, measured from the artwork's alpha channel at full
   resolution and cut through the exact middle of each void — including
   the baked edge shadows, so no piece carries a sliver of a neighbour.
   Slash void midline: (0%, 85.66%) → (40.96%, 42.57%);
   stem/diagonal void centre: x = 40.96%;
   diagonal/leg void midline: x + y = 106.1%. */
.piece-bar-top img {
    clip-path: polygon(0% 0%, 40.96% 0%, 40.96% 42.57%, 0% 85.66%);
}

.piece-bar-bottom img {
    clip-path: polygon(0% 85.66%, 40.96% 42.57%, 40.96% 100%, 0% 100%);
}

.piece-diagonal img {
    clip-path: polygon(40.96% 0%, 100% 0%, 100% 6.1%, 40.96% 65.14%);
}

.piece-leg img {
    clip-path: polygon(40.96% 65.14%, 100% 6.1%, 100% 100%, 40.96% 100%);
}

/* BEAT 1 — CHARGE. Strain builds in the mark: an escalating tremor,
   the whole K compressing, shadows deepening. No hesitation — tension. */
@keyframes k-shudder {
    0%   { transform: translate(0, 0) scale(1); }
    8%   { transform: translate(-0.6px, 0.3px) scale(0.999); }
    16%  { transform: translate(0.7px, -0.4px) scale(0.998); }
    24%  { transform: translate(-0.9px, -0.4px) scale(0.997); }
    32%  { transform: translate(1px, 0.5px) scale(0.996); }
    40%  { transform: translate(-1.2px, 0.5px) scale(0.995); }
    48%  { transform: translate(1.3px, -0.6px) scale(0.994); }
    56%  { transform: translate(-1.5px, -0.6px) scale(0.992); }
    64%  { transform: translate(1.6px, 0.7px) scale(0.991); }
    72%  { transform: translate(-1.8px, 0.7px) scale(0.989); }
    80%  { transform: translate(2px, -0.8px) scale(0.988); }
    88%  { transform: translate(-2.2px, -0.8px) scale(0.986); }
    100% { transform: translate(0, 0) scale(0.984); }
}

.emblem-wrap.charge {
    animation: k-shudder 0.9s linear forwards;
}

.emblem-wrap.charge .piece {
    --lift: 1.8;
    transition: --lift 0.9s ease;
}

/* BEAT 2 — DETONATION. The impulse lands on the first frame: all four
   pieces at maximum velocity instantly, spinning clean off the screen
   together. No stagger — one decision, one movement. */
.emblem-wrap.depart .piece {
    --lift: 4;
    transition: transform 0.6s cubic-bezier(0.2, 0.55, 0.55, 1);
    transition-delay: 0s;
}

.emblem-wrap.depart .piece-bar-top {
    transform: translate(-70vw, -55vh) rotate(-210deg);
}

.emblem-wrap.depart .piece-bar-bottom {
    transform: translate(-75vw, 55vh) rotate(160deg);
}

.emblem-wrap.depart .piece-diagonal {
    transform: translate(72vw, -58vh) rotate(190deg);
}

.emblem-wrap.depart .piece-leg {
    transform: translate(70vw, 58vh) rotate(-170deg);
}

/* BEAT 3 is the void: a full second of empty linen. Absence, held. */

/* BEAT 4 — EMERGENCE. The complete mark surfaces out of the linen itself,
   at its true size, like a form rising from a liquid bath: first a pale
   blurred presence under the paper's skin, then resolving sharp as it
   breaks the surface — while its shadows grow from nothing, the proof
   that it is gaining height above the sheet. No scale, no arrival from
   elsewhere: the paper gives it up. */
@keyframes k-emerge {
    0%   { opacity: 0; filter: blur(12px) brightness(1.2); }
    45%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0) brightness(1); }
}

.emblem-wrap.arrive {
    animation: k-emerge 3.8s cubic-bezier(0.4, 0.1, 0.3, 1) both;
}

/* The shadows surface with it: flush with the paper at first,
   rising to the pressed-in resting depth as the form clears the surface */
@keyframes piece-emerge {
    0%   { --lift: 0; }
    100% { --lift: 0.5; }
}

.emblem-wrap.arrive .piece {
    animation: piece-emerge 3.8s cubic-bezier(0.4, 0.1, 0.3, 1) both;
}

/* Commits position jumps while invisible — no motion is shown */
.emblem-wrap.no-transition,
.emblem-wrap.no-transition .piece {
    transition: none !important;
}

/* BEAT 6 — THE SLOW SEPARATION. The complete K exhales back into the
   tangram mark, so slowly it feels like a mechanism relaxing. */
.emblem-wrap.release .piece {
    transition: transform 3.8s cubic-bezier(0.3, 0.6, 0.2, 1), --lift 3.8s ease;
    transition-delay: 0s;
}

.emblem-wrap.release #kairos-inscription {
    transition: opacity 2.6s ease, transform 2.6s ease;
}

/* REASSEMBLE — all four land in the same instant, pressed tight to the
   sheet, and the measured gaps close exactly: the stem lifts whole
   (66px at source scale), the diagonal roots into the stem (50px),
   and the leg locks perpendicular onto the diagonal's edge.
   For one held breath the mark is a single, complete K. */
.emblem-wrap.assemble .piece {
    transition: transform 0.75s cubic-bezier(0.34, 1.45, 0.4, 1), --lift 0.75s ease;
    transition-delay: 0s;
    --lift: 0.5;
}

.emblem-wrap.assemble .piece-bar-top {
    transform: none;
}

.emblem-wrap.assemble .piece-bar-bottom {
    transform: translate(0%, -3.9%);
}

.emblem-wrap.assemble .piece-diagonal {
    transform: translate(-2.96%, 0%);
}

.emblem-wrap.assemble .piece-leg {
    transform: translate(-5.38%, -2.42%);
}

/* The precision point: unmarked, aligned to the small circle on the K.
   No visual affordance — an easter egg for whoever looks closely enough. */
#precision-point {
    position: absolute;
    left: 43.5%;
    top: 50.5%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

#precision-point:focus {
    outline: none;
}

/* ACT III — THE SEAL. Four words, one line, stamped across the completed
   K a beat after it lands — a certification mark, not a caption. It
   arrives from above (scale down + ink hitting paper) and, on release,
   lifts off slowly as the mark separates. */
#kairos-inscription {
    position: absolute;
    inset: 0;
    z-index: 5;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    padding-left: 0.32em;
    line-height: 1;
    color: rgba(29, 29, 31, 0.94);
    text-shadow:
        calc(var(--lx) * 1px) calc(var(--ly) * 1px) 1px rgba(20, 19, 18, 0.28),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
}

/* The words surface exactly as the mark does — the same slow resolve
   out of the paper, the same poise, a beat behind it */
@keyframes seal-emerge {
    0%   { opacity: 0; filter: blur(8px) brightness(1.2); }
    50%  { opacity: 1; }
    100% { opacity: 1; filter: blur(0) brightness(1); }
}

#kairos-inscription.reveal {
    opacity: 1;
    animation: seal-emerge 2.4s cubic-bezier(0.4, 0.1, 0.3, 1) both;
}

/* Blind letterpress: type pressed into the sheet, no ink —
   shadow catches the upper lip, light catches the lower */
.logo-main, .logo-sub {
    margin: 0;
    text-transform: uppercase;
}

.logo-main {
    font-size: 76px;
    font-weight: 700;
    letter-spacing: 0.28em;
    padding-left: 0.28em;
    line-height: 1.1;
    color: rgba(126, 126, 131, 0.72);
    -webkit-text-stroke: 0.5px rgba(110, 110, 115, 0.35);
    text-shadow:
        calc(var(--lx) * 1.2px) calc(var(--ly) * 1.2px) 1px rgba(50, 48, 46, 0.22),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.95),
        calc(var(--lx) * -2px) calc(var(--ly) * -2px) 3px rgba(255, 255, 255, 0.4);
}

.logo-sub {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.45em;
    padding-left: 0.45em;
    margin-top: 10px;
    color: rgba(134, 134, 139, 0.85);
    text-shadow:
        calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(50, 48, 46, 0.14),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   PASSCODE GATEWAY
   ========================================================================== */

#gatehouse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#gatehouse.visible {
    opacity: 1;
    pointer-events: auto;
}

#passcode-entry {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(44, 44, 46, 0.2) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-align: center;
    padding: 12px 0;
    color: #1d1d1f;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    border-radius: 0;
    transition: border-bottom 0.4s ease;
}

#passcode-entry:focus {
    border-bottom: 1px solid rgba(44, 44, 46, 0.8) !important;
}

#passcode-entry::placeholder {
    color: #86868b;
    font-size: 10px;
    letter-spacing: 0.3em;
}

#error-message {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: #a33333;
    margin-top: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#error-message.show {
    opacity: 0.85;
}

/* ==========================================================================
   CONCEALED FOOTER
   ========================================================================== */

.centered-text {
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: -120px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0.12em;
    opacity: 0;
    width: 90%;
    max-width: 650px;
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    /* slow decay sweep on exit */
    transition: bottom 4s cubic-bezier(0.16, 1, 0.3, 1), opacity 4s ease-in-out;
}

.centered-text.show {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    opacity: 1;
    /* quick, composed entrance */
    transition: bottom 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease-in-out;
}

.company-name {
    font-weight: 600;
    font-size: 11px;
    color: #1d1d1f;
    margin: 0 0 6px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: color 0.35s ease, letter-spacing 0.35s ease, text-shadow 0.35s ease;
}

.address-line {
    font-weight: 400;
    font-size: 10px;
    color: #86868b;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: color 0.35s ease;
}

/* Pointer hover: the footer is the contact handle — it should feel pressable */
.centered-text:hover .company-name {
    color: rgba(44, 44, 46, 0.72);
    letter-spacing: 0.16em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 1),
        0 -1px 0 rgba(40, 38, 36, 0.06);
}

.centered-text:hover .address-line {
    color: #6e6e73;
}

.centered-text:active .company-name {
    color: rgba(44, 44, 46, 0.55);
}

.hidden {
    display: none !important;
}

/* ==========================================================================
   PROJECT DECK
   ========================================================================== */

.project-deck-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate3d(calc(var(--par-x) * 0.6), calc(var(--par-y) * 0.6), 0);
    z-index: 5;
    width: 100%;
    max-width: 680px;
    height: 72vh;
    height: 72dvh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
}

.deck-header {
    margin-top: -30px;
    margin-bottom: 25px;
    flex-shrink: 0;
}

.deck-header h2 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5em;
    color: rgba(112, 112, 117, 0.9);
    margin: 0 0 14px 0;
    padding-left: 0.5em;
    text-shadow:
        calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(50, 48, 46, 0.14),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.95);
}

.deck-header .divider {
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: rgba(44, 44, 46, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    margin: 0 auto;
}

.project-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 30px 20px 40px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.project-scroll-area::-webkit-scrollbar {
    display: none;
}

/* Debossed panel: pressed into the sheet, not floating over it.
   Inset shadow on the upper lip, white light on the lower. */
.project-card {
    margin: 16px 0;
    padding: 30px 28px;
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(252, 252, 251, 0.62) 0%, rgba(244, 243, 241, 0.5) 100%);
    box-shadow:
        inset calc(var(--lx) * -1px) calc(var(--ly) * -1px) 3px rgba(40, 38, 36, 0.06),
        inset 0 0 0 1px rgba(40, 38, 36, 0.025),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.9);
    opacity: 0.92;
    transition: opacity 0.5s ease;
}

.project-card:hover {
    opacity: 1;
    box-shadow:
        inset calc(var(--lx) * -2px) calc(var(--ly) * -2px) 4px rgba(40, 38, 36, 0.08),
        inset 0 0 0 1px rgba(40, 38, 36, 0.035),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 1);
}

.project-card .project-market {
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: #86868b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 7px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.project-card h3 {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: rgba(64, 64, 68, 0.9);
    margin: 0;
    line-height: 1.4;
    text-shadow:
        calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(50, 48, 46, 0.08),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.95);
}

/* Cards admit you to the viewing room */
.project-card {
    cursor: pointer;
}

/* While the viewing room is open, the deck dissolves into the paper */
.project-deck-wrapper.deck-hidden {
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
}

.project-deck-wrapper {
    transition: opacity 0.7s ease, filter 0.7s ease;
}

/* ==========================================================================
   THE VIEWING ROOM — one photograph at a time, laid on the linen as a
   physical print, lit and shadowed by the same lamp as everything else
   ========================================================================== */

#viewing-room {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 28px;
    box-sizing: border-box;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* surfaces out of the paper, the house entrance */
    opacity: 0;
    filter: blur(9px);
    pointer-events: none;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

#viewing-room.open {
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
}

.room-header .project-market {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.24em;
    color: #86868b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.room-header h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: rgba(64, 64, 68, 0.9);
    margin: 0;
    text-shadow:
        calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(50, 48, 46, 0.08),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.95);
}

#room-stage {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
}

/* The print: a physical object laid on the sheet — white mat,
   cast shadow thrown away from the roaming lamp. The script gives it an
   explicit size per photograph, so between photographs the mat MORPHS
   smoothly from one aspect ratio to the next instead of jumping. */
#room-print {
    margin: 0;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(253, 253, 252, 0.97) 0%, rgba(247, 246, 245, 0.97) 100%);
    box-shadow:
        calc(var(--lx) * -9px) calc(var(--ly) * -9px) 24px rgba(35, 32, 30, 0.16),
        calc(var(--lx) * -2px) calc(var(--ly) * -2px) 6px rgba(35, 32, 30, 0.1),
        inset 0 0 0 1px rgba(40, 38, 36, 0.04);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Size jumps (opening, window resize) are committed without motion */
#room-print.no-morph {
    transition: none;
}

#room-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1px;
    /* the faintest restraint, so the print belongs to the sheet */
    filter: grayscale(10%) brightness(1.01);
    opacity: 1;
    transition: opacity 0.26s ease;
}

/* The pager: letterpress arrows flanking the counter beneath the print —
   type pressed into the linen, never chrome floating on the photograph */
.room-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.room-nav {
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1;
    color: rgba(44, 44, 46, 0.32);
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-tap-highlight-color: transparent;
}

.room-nav:hover {
    color: rgba(44, 44, 46, 0.85);
}

#room-prev:hover { transform: translateX(-3px); }
#room-next:hover { transform: translateX(3px); }

.room-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#room-counter {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: #86868b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.deck-footer {
    text-align: center;
    position: absolute;
    bottom: -65px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: transparent;
    flex-shrink: 0;
}

.back-link {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: rgba(44, 44, 46, 0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 0.3s ease;
    pointer-events: auto;
    padding: 10px 20px;
}

.back-link .arrow {
    transition: transform 0.3s ease;
    font-size: 9px;
}

.back-link:hover {
    color: rgba(44, 44, 46, 0.85);
}

.back-link:hover .arrow {
    transform: translateX(-3px);
}

/* ==========================================================================
   DESKTOP GHOST CANVAS — the hovered project prints faintly into the paper
   ========================================================================== */

#embossed-image-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    /* counter-drifts against the deck for a whisper of depth */
    transform: translate(-50%, -50%) translate3d(calc(var(--par-x) * -0.4), calc(var(--par-y) * -0.4), 0);
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(100%) contrast(112%) brightness(114%);
    mix-blend-mode: multiply;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#embossed-image-canvas.active {
    opacity: 0.17;
}

/* ==========================================================================
   CONTACT OVERLAY
   ========================================================================== */

.hidden-deck {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -45%) scale(0.98) !important;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.contact-content-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

/* Positioning statement: letterpress body, quiet and deliberate */
.contact-positioning {
    max-width: 420px;
    margin: 0 0 18px 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: rgba(64, 64, 68, 0.88);
    text-align: center;
    text-shadow:
        calc(var(--lx) * 0.8px) calc(var(--ly) * 0.8px) 0 rgba(50, 48, 46, 0.08),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.95);
}

.contact-seal {
    margin: 0 0 36px 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(112, 112, 117, 0.9);
    text-align: center;
    text-shadow:
        calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(50, 48, 46, 0.12),
        calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, 0.95);
}

.contact-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #86868b;
    text-transform: uppercase;
    margin: 0 0 12px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.contact-email {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #1d1d1f;
    text-decoration: none;
    border-bottom: 1px solid rgba(29, 29, 31, 0.15);
    padding-bottom: 4px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.contact-email:hover {
    color: rgba(44, 44, 46, 0.6);
    border-bottom: 1px solid rgba(29, 29, 31, 0.6);
}

/* ==========================================================================
   MOBILE ADAPTATION
   ========================================================================== */

@media (max-width: 768px) {
    /* Logo anchored in the upper-middle third */
    .logo-layer {
        transform: translate(-50%, -60%) translate3d(var(--par-x), var(--par-y), 0);
    }

    .emblem-wrap {
        width: 216px;
        margin: -34px auto -26px auto;
    }

    #kairos-inscription {
        font-size: 7.5px;
        letter-spacing: 0.28em;
        padding-left: 0.28em;
    }

    .logo-main {
        font-size: 36px;
        letter-spacing: 0.2em;
        padding-left: 0.2em;
    }

    .logo-sub {
        font-size: 9.5px;
        letter-spacing: 0.3em;
        padding-left: 0.3em;
        margin-top: 8px;
    }

    #gatehouse {
        width: 80%;
    }

    /* 16px stops iOS from auto-zooming the passcode field */
    #passcode-entry {
        font-size: 16px;
        letter-spacing: 0.25em;
        padding: 10px 0;
    }

    .centered-text {
        width: 88%;
    }

    .centered-text.show {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .company-name {
        font-size: 9px;
        margin-bottom: 4px;
    }

    .address-line {
        font-size: 8px;
        line-height: 1.3;
    }

    .contact-positioning {
        max-width: 92%;
        font-size: 12px;
        line-height: 1.65;
        margin-bottom: 14px;
    }

    .contact-seal {
        margin-bottom: 28px;
        font-size: 8px;
        letter-spacing: 0.22em;
    }

    .project-deck-wrapper {
        padding: 0 22px;
        height: 74vh;
        height: 74dvh;
        top: 47%;
    }

    .deck-header {
        margin-top: 0;
        margin-bottom: 12px;
    }

    .deck-header h2 {
        font-size: 11px;
        letter-spacing: 0.4em;
    }

    .project-scroll-area {
        padding: 16px 4px 30px 4px;
        -webkit-overflow-scrolling: touch;
        /* each project settles gently into view */
        scroll-snap-type: y proximity;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    .project-card {
        margin: 14px 0;
        padding: 18px 18px 22px 18px;
        scroll-snap-align: center;
        opacity: 0.55;
        transform: translateY(6px);
        transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .project-card.in-view {
        opacity: 1;
        transform: translateY(0);
    }

    .project-card {
        padding: 24px 18px;
    }

    .project-card h3 {
        font-size: 13.5px;
        line-height: 1.3;
    }

    /* The paper's memory reads a touch stronger on small screens,
       where it surfaces behind the settled card */
    #embossed-image-canvas.active {
        opacity: 0.22;
    }

    /* Viewing room on a handset: the print is sized to always fit
       centred; paging lives in the letterpress line beneath it */
    #viewing-room {
        gap: 18px;
        padding: 18px;
    }

    #room-print {
        padding: 8px;
    }

    .room-header h3 {
        font-size: 13.5px;
    }

    .deck-footer {
        bottom: -34px;
    }

    .back-link {
        padding: 8px 16px;
        font-size: 8.5px;
    }

    .contact-email {
        font-size: 14px;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body,
    #brand-trigger {
        animation: none;
    }

    .emblem-wrap,
    .emblem-wrap::after,
    .piece,
    #kairos-inscription.reveal {
        animation-duration: 0.01s !important;
    }

    .centered-text,
    .centered-text.show,
    .project-card,
    .piece,
    .emblem-wrap,
    #kairos-inscription,
    #embossed-image-canvas {
        transition-duration: 0.01s;
    }
}