:root {
    --bg: #e8e6e1;
    --bg-deep: #d9d6cf;
    --ink: #1c1c1e;
    --ink-soft: #5d5b57;
    --ink-faint: #8d8a84;
    --accent: #ff7a2f;
    --rule: rgba(28, 28, 30, 0.12);

    --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #141415;
        --bg-deep: #0b0b0c;
        --ink: #f2f0ec;
        --ink-soft: #aaa7a1;
        --ink-faint: #75736e;
        --rule: rgba(242, 240, 236, 0.12);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

/* ---------- Single-screen home page ---------- */

.home {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto;
    /* A solid color under the vignette, matching its edge, so Safari can tint its toolbar to the page. */
    background:
        var(--bg-deep)
        radial-gradient(ellipse 60% 55% at 66% 52%, var(--bg) 0%, var(--bg) 40%, var(--bg-deep) 100%);
}

/* Oscilloscope traces behind everything, drawn by the WebGL script in index.html. */
.scope {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.home > .stage,
.home > .site-footer {
    position: relative;
}

.stage {
    display: grid;
    grid-template-columns: minmax(300px, 0.75fr) 1.25fr;
    align-items: center;
    gap: 2rem;
    padding: 2rem clamp(1.5rem, 5vw, 5rem) 0;
    padding-left: max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left));
    padding-right: max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-right));
    min-height: 0;
}

.intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 30rem;
}

picture {
    display: contents;
}

.app-icon {
    width: 72px;
    height: 72px;
    border-radius: 22.5%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
    margin-bottom: 1.75rem;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.app-name {
    font-family: var(--font-display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
}

.description {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 2rem;
    text-wrap: pretty;
}

.app-store-badge {
    display: inline-block;
    line-height: 0;
    transition: transform 0.2s ease;
}

.app-store-badge:hover {
    transform: translateY(-1px);
}

.app-store-badge img {
    height: 54px;
    width: auto;
}

.compat {
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
}

/* ---------- The rendered iPhone Duo ---------- */

.scene {
    /* --w is the device width; every other device measurement derives from it. */
    --w: min(44vw, 56vh, 760px);
    --t: calc(var(--w) * 0.028); /* thickness of each half */
    --b: calc(var(--w) * 0.018); /* bezel */
    /* The screen's corners match AltoPaint's iPhone Duo, 8.17% of the screen's width;
       the outer corners stay concentric with them, one bezel out. */
    --sr: calc((var(--w) - var(--b) * 2) * 0.0817); /* screen corner radius */
    --r: calc(var(--sr) + var(--b)); /* outer corner radius */
    --open: -74deg; /* lid angle; -90deg is upright, -180deg is closed */
    --crease: calc(var(--w) * 0.06); /* length of screen that bends through the fold */
    /* Height over width of the screen recording (1112 x 1580). Each half is sized so the
       unfolded screen (lid + crease + base, inside the bezel) has exactly this shape. */
    --media-aspect: 1.42086;
    --h: calc(((var(--w) - var(--b) * 2) * var(--media-aspect) - var(--crease)) / 2 + var(--b));

    position: relative;
    height: 100%;
    min-height: 0;
}

.view {
    height: 100%;
    display: grid;
    place-items: center;
    perspective: calc(var(--w) * 4.2);
    perspective-origin: 50% 20%;
}

.duo {
    position: relative;
    width: var(--w);
    height: var(--h);
    transform-style: preserve-3d;
    /* The script turns this toward the pointer. */
    transform: translateY(calc(var(--h) * 0.36)) rotateX(56deg) rotateZ(-20deg);
}

.half,
.bend {
    position: absolute;
    left: 0;
    width: 100%;
    transform-style: preserve-3d;
}

.half {
    height: var(--h);
}

.base {
    top: 0;
}

/* The screen bends through the crease in short strips, each turned a little, so it
   curves from the base into the lid. The lid hangs off the last strip. */
.bend {
    bottom: 100%;
    height: calc(var(--crease) / 8);
    transform-origin: 50% 100%;
    transform: rotateX(calc(var(--open) / 8));
}

.base > .bend,
.lid {
    transform-origin: 50% 100%;
    transform: rotateX(calc(var(--open) / 16));
}

.lid {
    bottom: 100%;
}

/* Animating --open (registered below) swings the lid and the crease together. */
@property --open {
    syntax: "<angle>";
    inherits: true;
    initial-value: -74deg;
}

.duo {
    animation: open-lid 1.6s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s both;
}

@keyframes open-lid {
    from { --open: -179deg; }
}

.face {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.front {
    inset: 0;
    background: #08080a;
}

.lid > .front { border-radius: var(--r) var(--r) 0 0; }
.base > .front { border-radius: 0 0 var(--r) var(--r); }

.back {
    inset: 0;
    transform: translateZ(calc(var(--t) * -1)) rotateY(180deg);
    background: linear-gradient(160deg, #5a5856, #3c3b3a 60%, #2e2d2c);
}

.lid > .back { border-radius: var(--r) var(--r) 0 0; }
.base > .back { border-radius: 0 0 var(--r) var(--r); }

/* The frame: rounded slices stacked through the thickness, so the edge follows the corners.
   Each slice is lit from the upper left, so edges facing that way read lighter. */
.layer {
    inset: 0;
    /* Solid from both sides: from outside the crease, the slices are the device's spine. */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    background: linear-gradient(200deg, #b4b1ad 0%, #85827e 35%, #4b4946 75%, #3a3836 100%);
}

.lid > .layer { border-radius: var(--r) var(--r) 0 0; }
.base > .layer { border-radius: 0 0 var(--r) var(--r); }

/* Crease strips are too short for the diagonal light, so shade them side to side only. */
.bend > .layer {
    background: linear-gradient(to right, #9c9995, #6f6c68 45%, #42403d);
}

/* The screen. Each part's canvas is its own face in the 3D scene, a sibling of the bezel
   rather than nested in it: Safari only hides the back of faces that take part in the scene
   directly, so a nested canvas showed through the lid's back as it folded. */
.screen-canvas {
    left: var(--b);
    width: calc(100% - var(--b) * 2);
    transform: translateZ(0.5px);
    background: #000;
}

.lid > .screen-canvas {
    top: var(--b);
    height: calc(100% - var(--b));
    border-radius: var(--sr) var(--sr) 0 0;
}

.base > .screen-canvas {
    top: 0;
    height: calc(100% - var(--b));
    border-radius: 0 0 var(--sr) var(--sr);
}

/* Strips overlap their neighbors by a pixel so no hairline seams show between them. */
.bend > .front {
    inset: -1px 0;
}

.bend > .screen-canvas {
    top: -1px;
    height: calc(100% + 2px);
}

/* Reflections, floating just above the glass. The crease strips carry none, so each
   reflection fades out before the fold rather than stopping hard at its edge. */
.glare {
    transform: translateZ(1px);
    pointer-events: none;
}

.lid > .glare {
    inset: var(--b) var(--b) 0 var(--b);
    border-radius: var(--sr) var(--sr) 0 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 38%, transparent 38.2%);
    -webkit-mask-image: linear-gradient(to top, transparent, #000 35%);
    mask-image: linear-gradient(to top, transparent, #000 35%);
}

.base > .glare {
    inset: 0 var(--b) var(--b) var(--b);
    border-radius: 0 0 var(--sr) var(--sr);
    background: linear-gradient(200deg, rgba(255, 255, 255, 0.06), transparent 45%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%);
    mask-image: linear-gradient(to bottom, transparent, #000 35%);
}

.table-shadow {
    position: absolute;
    inset: -12% -10% -14% -10%;
    transform: translateZ(calc(var(--t) * -1 - 1px));
    background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.18) 45%, transparent 70%);
    filter: blur(calc(var(--w) * 0.02));
    pointer-events: none;
}

/* ---------- Footer ---------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding: 1rem clamp(1.5rem, 5vw, 5rem) 1.25rem;
    padding-left: max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-left));
    padding-right: max(clamp(1.5rem, 5vw, 5rem), env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
    font-size: 0.8125rem;
    color: var(--ink-faint);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.site-footer a {
    text-decoration: none;
    color: var(--ink-soft);
}

.site-footer a:hover {
    color: var(--ink);
}

/* ---------- Narrow and portrait screens ---------- */

@media (max-width: 820px), (max-aspect-ratio: 1/1) {
    /* The page is one screen tall, and only grows (and scrolls) when the copy leaves too
       little room under it for the device. svh rather than dvh, so the page doesn't resize
       as Safari's toolbar shrinks and grows. */
    .home {
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow: visible;
    }

    .stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(16rem, 1fr);
        align-items: start;
        gap: 0;
        padding-top: clamp(1.25rem, 4vh, 3rem);
        text-align: center;
    }

    .intro {
        align-items: center;
        margin: 0 auto;
    }

    .app-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1rem;
    }

    .eyebrow {
        margin-bottom: 0.5rem;
    }

    .app-name {
        font-size: clamp(2rem, 9vw, 3.25rem);
        margin-bottom: 0.75rem;
    }

    .description {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .app-store-badge img {
        height: 46px;
    }

    .compat,
    .eyebrow .footnote-mark {
        display: none;
    }

    /* The device fills whatever room is left under the copy. Seen in perspective it stands
       about 1.35 times as tall as --w and 1.3 times as wide, so these keep all of it inside
       the scene instead of rising over the badge. */
    .scene {
        container-type: size;
        padding-top: 1rem;
        --w: min(66cqw, 70cqh, 520px);
    }

    .site-footer {
        justify-content: center;
        text-align: center;
    }
}

@media (max-height: 560px) and (min-width: 821px) {
    .app-icon { display: none; }
}

@media (prefers-color-scheme: dark) {
    /* A dark table shadow disappears on a dark page, so let the screen light the table instead. */
    .table-shadow {
        background:
            radial-gradient(ellipse at 50% 40%, rgba(110, 170, 255, 0.16), rgba(190, 120, 255, 0.06) 45%, transparent 70%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .duo { animation: none; }
}

/* ---------- Text pages (privacy, support) ---------- */

.page {
    max-width: 40rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    line-height: 1.6;
}

.page .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-decoration: none;
    margin-bottom: 2.5rem;
}

.page .back-link img {
    width: 28px;
    height: 28px;
    border-radius: 22.5%;
}

.page h1 {
    font-family: var(--font-display);
    font-stretch: 125%;
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.page h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 2rem 0 0.5rem;
}

.page p,
.page li {
    color: var(--ink-soft);
    margin-bottom: 0.75rem;
}

.page ul {
    padding-left: 1.25rem;
}

.page .updated {
    margin-top: 2.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
}