/*
 * Surfaced - product site.
 *
 * Deliberately its own identity rather than an inheritance of studio.css:
 * Surfaced is a consumer app and the studio's terminal-manifest chrome reads
 * wrong on it. The one thing carried across is the monospace, used for every
 * label and number, so the two sites are visibly the same house.
 *
 * The page argues visually rather than in copy: sixteen clashing loyalty cards
 * collapse into one phone. The cards are ugly on purpose. Prettifying them
 * would throw away the argument, so the palette below is not a harmonised
 * scheme and is not meant to be.
 */

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Schibsted Grotesk';
    src: url('../assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Schibsted Grotesk';
    src: url('../assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
    --bg:      #f4f0e6;
    --slab:    #e9e3d4;
    --counter: #ded7c6;
    --fg:      #1a1813;
    --dim:     #6b6558;
    --rule:    #d7d0c0;
    --mark:    #8a5a0b;

    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    --sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
    --bg:      #14140f;
    --slab:    #1c1c15;
    --counter: #0c0c08;
    --fg:      #e6e1d4;
    --dim:     #8c8676;
    --rule:    #2e2e24;
    --mark:    #d8a02a;
}

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

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s, color 0.3s;
}

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 32px; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dim);
}

/* ── Masthead ─────────────────────────────────────────── */
.site-head { border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 18px; }
.bar .name { font-weight: 700; letter-spacing: -0.01em; font-size: 17px; }
.bar .right { display: flex; align-items: center; gap: 18px; }
.bar a:hover { color: var(--mark); }

.theme-toggle {
    background: none;
    border: 1px solid var(--rule);
    border-radius: 0;
    cursor: pointer;
    padding: 4px 12px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--dim);
    transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--mark); border-color: var(--mark); }

/* ── The pile ─────────────────────────────────────────── */
.pile-head { padding: 58px 0 30px; display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: end; }
.pile-head h1 {
    font-size: clamp(2rem, 4.8vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.02;
    max-width: 15ch;
}
.pile-head h1 em { font-style: normal; color: var(--mark); }
.pile-head p { color: var(--dim); font-size: 1.06rem; }

.pile { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding-bottom: 54px; }

.plastic {
    aspect-ratio: 1.586;            /* ISO/IEC 7810 ID-1: a real card's ratio */
    border-radius: 7px;
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 3px 10px rgba(0,0,0,0.28);
    transform: rotate(var(--r, 0deg));
}
.ptop { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pname { line-height: 1.15; }

/* Lucide v1.25.0 (ISC). Store-type glyph, held back so the shop name still
   leads and the grid still reads as a wall of clutter. */
.picon { width: 21px; height: 21px; flex: none; opacity: 0.62; }

.strip {
    height: 9px;
    background-image: repeating-linear-gradient(90deg,
        currentColor 0 1.5px, transparent 1.5px 3px, currentColor 3px 4px, transparent 4px 6px);
    opacity: 0.5;
}

/* ── The collapse ────────────────────────────────────────────────────────
   The stage is meaningful with no JavaScript at all: the phone and the copy
   render statically. surfaced.js clones the pile's cards into .flyers and
   flies them into the phone as an enhancement, so a failed script costs the
   flourish and nothing else. */
.collapse { padding: 0 0 64px; }

.tally {
    font-family: var(--mono);
    font-size: clamp(2.6rem, 10vw, 6.4rem);
    line-height: 0.9;
    letter-spacing: -0.05em;
    margin-bottom: 40px;
}
.tally .arrow { color: var(--mark); }

.stage { position: relative; display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }

.flyers { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.flyer {
    position: absolute;
    width: 92px;
    border-radius: 6px;
    padding: 6px 7px;
    font-size: 9.5px;
    font-weight: 700;
    aspect-ratio: 1.586;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.34);
    opacity: 0;
    transition: transform 0.95s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.95s ease;
}
.flyers.ready .flyer { opacity: 1; }
.flyers.go .flyer { transform: translate(var(--tx), var(--ty)) scale(0.34) !important; opacity: 0; }
.flyer .strip { height: 6px; }

.phone {
    width: 240px;
    aspect-ratio: 0.49;
    border: 2px solid var(--rule);
    border-radius: 26px;
    background: var(--slab);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.6s;
}
.stage.settled .phone { border-color: var(--mark); transform: scale(1.03); }

.phone .one {
    aspect-ratio: 1.586;
    border-radius: 8px;
    background: #b8402f;
    color: #fff;
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
}
.phone .one .strip {
    height: 22px;
    opacity: 0.95;
    background-image: repeating-linear-gradient(90deg,
        #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px);
}
.phone .cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--dim); text-align: center; }

.stage h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; max-width: 18ch; }
.stage p { color: var(--dim); margin-top: 14px; max-width: 50ch; }

/* ── Sections ─────────────────────────────────────────── */
section.band { padding: 54px 0; border-top: 1px solid var(--rule); }
.shead { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.shead::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.shead b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--mark); }

.inv { border: 1px solid var(--rule); }
.inv .row {
    display: grid;
    grid-template-columns: 170px 1fr 90px;
    gap: 18px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rule);
    align-items: baseline;
    font-size: 15px;
}
.inv .row:last-child { border-bottom: none; }
.inv .row.h { background: var(--slab); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.inv .row b { font-weight: 700; font-size: 15.5px; }
.inv .row span.d { color: var(--dim); }
.inv .row span.t { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--mark); }
.inv .row span.t.free { color: var(--dim); }

/* ── Pricing, printed as a till receipt ──────────────────────────────────
   A receipt IS an itemised price list, so the form is load-bearing here
   rather than decorative. It sits on a counter band so it reads as a real
   object in both themes. */
.till { background: var(--counter); padding: 46px 20px; display: flex; justify-content: center; transition: background-color 0.3s; }

.receipt {
    --paper: #fbfaf5;
    --toner: #2b2823;
    --faint: #7d766a;
    --stamp: #b3401b;
    --z: 9px;
    width: 100%;
    max-width: 430px;
    background: var(--paper);
    color: var(--toner);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    padding: 34px 28px 30px;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.4));
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px var(--z) repeat-x,
        conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / 18px var(--z) repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--z)) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 18px var(--z) repeat-x,
        conic-gradient(from 135deg at top,    #0000, #000 1deg 89deg, #0000 90deg) top    / 18px var(--z) repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--z)) no-repeat;
}

.receipt .c { text-align: center; }
.receipt .shopname { font-size: 22px; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em; }
.receipt .strap { font-size: 11px; letter-spacing: 0.15em; color: var(--faint); margin-top: 4px; }
.receipt hr { border: none; border-top: 1px dashed #c4bdae; margin: 15px 0; }
.receipt .kv { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); letter-spacing: 0.05em; }
.receipt .colhead { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 0.13em; color: var(--faint); margin-bottom: 5px; }

.receipt .li { display: flex; align-items: baseline; gap: 7px; padding: 2px 0; font-size: 13.5px; }
.receipt .li .qty { width: 23px; flex: none; color: var(--faint); font-size: 12px; }
.receipt .li .nm { white-space: nowrap; }
.receipt .li .lead { flex: 1; border-bottom: 1px dotted #cfc8b8; transform: translateY(-3px); min-width: 10px; }
.receipt .li .amt { flex: none; font-variant-numeric: tabular-nums; }
.receipt .li.free .amt { color: var(--faint); }
.receipt .li.paid .amt { color: var(--stamp); font-weight: 500; }

.receipt .total { display: flex; justify-content: space-between; font-weight: 700; font-size: 16.5px; }
.receipt .total .amt { font-variant-numeric: tabular-nums; }

.receipt .saved { margin: 13px 0 2px; padding: 10px 12px; border: 1px dashed var(--stamp); color: var(--stamp); font-size: 12px; }
.receipt .saved .h { text-align: center; font-weight: 700; letter-spacing: 0.13em; margin-bottom: 6px; }
.receipt .saved .li { font-size: 12px; }
.receipt .saved .li .lead { border-bottom-color: rgba(179, 64, 27, 0.4); }

.receipt .stamp-badge {
    display: inline-block;
    border: 2px solid var(--stamp);
    color: var(--stamp);
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    transform: rotate(-6deg);
    opacity: 0.88;
}
.receipt .note { font-size: 12px; color: var(--faint); }
.receipt .qr { width: 132px; height: 132px; display: block; margin: 2px auto 8px; }

.badges { display: flex; justify-content: center; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.badges img { display: block; }
.badge-a { height: 44px; }
.badge-g { height: 64px; margin-left: -10px; }

.site-foot { border-top: 1px solid var(--rule); padding: 24px 0 50px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.site-foot a:hover { color: var(--mark); }

/* ── Share modal ──────────────────────────────────────── */
.share-trigger {
    background: none;
    border: 1px solid var(--rule);
    color: var(--dim);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    padding: 4px 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.share-trigger:hover { color: var(--mark); border-color: var(--mark); }

.share-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.share-modal[hidden] { display: none; }
.share-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.share-modal-panel {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--rule);
    padding: 28px 26px 24px;
    max-width: 340px;
    width: 100%;
    text-align: center;
}
.share-modal-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--dim); font-size: 22px; cursor: pointer; line-height: 1; }
.share-modal-close:hover { color: var(--mark); }
.share-modal-title { font-weight: 700; font-size: 1.1rem; }
.share-modal-subtitle { color: var(--dim); font-size: 0.88rem; margin-top: 4px; }
.share-modal-qr { display: block; margin: 18px auto; max-width: 100%; height: auto; background: #fff; padding: 8px; }
.share-modal-link-row { display: flex; align-items: stretch; gap: 8px; }
.share-modal-link { flex: 1; font-family: var(--mono); font-size: 10.5px; color: var(--dim); border: 1px solid var(--rule); padding: 8px; overflow-wrap: anywhere; text-align: left; }
.share-modal-copy, .share-modal-native {
    background: var(--mark);
    color: var(--bg);
    border: none;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
}
.share-modal-native { width: 100%; margin-top: 10px; padding: 10px; }
.share-modal-copy:disabled { opacity: 0.6; cursor: default; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 860px) {
    .wrap { padding: 0 20px; }
    .pile { grid-template-columns: repeat(3, 1fr); }
    .pile-head, .stage { grid-template-columns: 1fr; gap: 28px; }
    .inv .row { grid-template-columns: 1fr 84px; }
    .inv .row span.d { grid-column: 1 / 3; }
    .flyers { display: none; }   /* no room to fly across; phone still lands */
    .bar .label { display: none; }
}

@media (max-width: 460px) {
    .receipt { padding: 28px 18px 24px; }
    .till { padding: 32px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .flyers { display: none; }
    .phone, .flyer { transition: none; }
    * { transition-duration: 0.01ms !important; }
}