/* Advent App — receiver stylesheet (2026 redesign)

   Design system shared with advent-app.com and the App Store screenshots:
     wine  #6B0A36  — hero canvas, headlines
     cream #F2ECE6  — body ground
     rose  #F29C8A · tan #C2A78C
   Headlines: Playfair Display (self-hosted, OFL) — the web stand-in for the
   app's Scotch Display. Body: system sans stack.

   NOTE: the Docker build does NOT run webpack — it copies provider/priv and
   runs `mix phx.digest`. priv/static/css/app.css is what actually ships, so
   this file and that one are kept byte-identical. Plain CSS only; no SCSS
   features, or the two would drift. */

@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-600-052693e54984c903eaeb9defb9cc92f5.woff2?vsn=d") format("woff2");
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("/fonts/PlayfairDisplay-700-669cabfb0522679d6615a85e6c4ca343.woff2?vsn=d") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* The same K22 Didoni the apps use for door numbers, so the seal's "24"
   matches the numeral on a real door rather than approximating it in
   Playfair. Converted from the iOS/Android TTF. */
@font-face {
    font-family: "K22 Didoni";
    src: url("/fonts/K22Didoni-553b78f3b73dbfbe315d6f4326821f8c.woff2?vsn=d") format("woff2");
    font-display: swap;
}

:root {
    --wine: #6B0A36;
    --numerals: "K22 Didoni", "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
    --wine-deep: #57052A;
    --cream: #F2ECE6;
    --rose: #F29C8A;
    --tan: #C2A78C;
    --kraft: #D8C2A2;
    --ink: #3E3A37;
    --muted: #7A736D;
    --radius: 18px;
    --radius-lg: 28px;
    --serif: "Playfair Display", Didot, "Bodoni MT", Georgia, serif;
    --sans: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--wine); }

/* ---- The gift panel ---------------------------------------------------- */

.gift {
    background: var(--wine);
    background-image:
        radial-gradient(circle at 18% 12%, rgba(242, 156, 138, 0.16), transparent 42%),
        radial-gradient(circle at 84% 78%, rgba(194, 167, 140, 0.14), transparent 46%);
    color: var(--cream);
    padding: clamp(40px, 9vw, 84px) 24px clamp(48px, 9vw, 90px);
    text-align: center;
}

.gift-inner {
    max-width: 560px;
    margin: 0 auto;
}

.eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(242, 236, 230, 0.72);
}

h1.from {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--cream);
    font-size: clamp(30px, 7vw, 46px);
    line-height: 1.15;
    margin: 0 0 clamp(26px, 5vw, 38px);
    text-wrap: balance;
}

h1.from .sender {
    display: block;
    font-style: italic;
    color: #fff;
}

/* The cover, presented as something handed over rather than a bare image. */
.cover-frame {
    position: relative;
    width: min(300px, 74vw);
    margin: 0 auto clamp(26px, 5vw, 38px);
}

.cover-frame .cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: rgba(242, 236, 230, 0.08);
    box-shadow: 0 26px 60px rgba(30, 4, 16, 0.45);
}

.cover-placeholder {
    display: grid;
    place-items: center;
    border: 1px solid rgba(242, 236, 230, 0.22);
}
.cover-placeholder svg { width: 58%; height: auto; }

/* Wax-seal style badge, echoing the app's door-24 mark. */
.seal {
    position: absolute;
    right: -12px;
    bottom: -12px;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rose);
    color: var(--wine-deep);
    /* Didoni, matching the numerals on the app's own doors. Its digits sit on
       a smaller optical size than Playfair's, hence the bump and the slight
       baseline nudge to keep them centred in the disc. */
    font-family: var(--numerals);
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    padding-bottom: 2px;
    box-shadow: 0 10px 24px rgba(30, 4, 16, 0.4);
}

.lede {
    margin: 0 auto clamp(22px, 4vw, 30px);
    max-width: 42ch;
    color: rgba(242, 236, 230, 0.88);
    text-wrap: pretty;
}

.gift.plain { padding-bottom: clamp(56px, 10vw, 96px); }


/* ---- Store badges ------------------------------------------------------ */

.stores {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.stores a { display: block; transition: transform 180ms, opacity 180ms; }
.stores a:hover { transform: translateY(-2px); opacity: 0.9; }
.stores img { height: 52px; width: auto; }

/* The badges are 3:1, so at 52px tall the pair needs 326px — one pixel more
   than a 375px viewport leaves after the 24px gutters, which wrapped them
   into a stack. Shrink slightly so they stay side by side on a phone. */
@media (max-width: 430px) {
    .stores { gap: 10px; }
    .stores img { height: 45px; }
}

/* ---- Steps ------------------------------------------------------------- */

.steps {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(44px, 8vw, 76px) 24px clamp(28px, 5vw, 44px);
}

.steps h2 {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--wine);
    font-size: clamp(23px, 4.6vw, 30px);
    margin: 0 0 clamp(22px, 4vw, 32px);
    text-align: center;
}

.steps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 22px;
}

.steps li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
}

.step-n {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(107, 10, 54, 0.08);
    color: var(--wine);
    font-family: var(--serif);
    font-weight: 700;
    font-size: 19px;
}

.steps h3 {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--wine);
    margin: 9px 0 3px;
}

.steps p { margin: 0; color: var(--muted); }

.reassurance {
    margin: clamp(30px, 5vw, 44px) 0 0;
    padding-top: 22px;
    border-top: 1px solid rgba(62, 58, 55, 0.10);
    text-align: center;
    font-size: 15px;
    color: var(--muted);
    text-wrap: pretty;
}

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

.site-footer {
    padding: 22px 24px 40px;
    text-align: center;
    font-size: 14px;
    color: var(--muted);
}
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--muted); text-decoration: underline; }
.site-footer a:hover { color: var(--wine); }
.site-footer .made-by span { color: var(--rose); }
.legal-links a { margin: 0 8px; }

@media (prefers-reduced-motion: reduce) {
    .stores a { transition: none; }
    .stores a:hover { transform: none; }
}

/* ---- The letter: the cover page since 2026-09 ------------------------ */
/* A recipient's landing page, written as a letter. The kraft postmark in
   its corner counts down to the first door (ProviderWeb.Postmark). */

.letter-wrap { padding: 58px 16px 6px; max-width: 480px; margin: 0 auto; }

.letter {
    position: relative;
    background: #FBF8F4;
    border-radius: 22px;
    box-shadow: 0 1px 0 rgba(62, 58, 55, 0.06), 0 18px 40px rgba(107, 10, 54, 0.10);
    padding: 28px 18px 24px;
    text-align: center;
}

.letter-to { margin: 0; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 18px; }

.letter-from {
    font-family: var(--serif);
    font-weight: 600;
    color: var(--wine);
    font-size: 30px;
    line-height: 1.15;
    margin: 14px 0 20px;
    text-wrap: balance;
}

.letter-from.long { font-size: 25px; }

.letter-photo {
    position: relative;
    width: 64%;
    max-width: 260px;
    margin: 0 auto 20px;
    background: #fff;
    padding: 9px 9px 28px;
    transform: rotate(-2.2deg);
    box-shadow: 0 12px 28px rgba(62, 58, 55, 0.18);
}
.letter-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.letter-photo::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 64px;
    height: 20px;
    margin-left: -32px;
    background: rgba(242, 156, 138, 0.55);
    transform: rotate(3deg);
}
.letter-photo-empty { aspect-ratio: 1; background: var(--wine); display: grid; place-items: center; }
.letter-photo-empty svg { width: 58%; }

.letter-lede { margin: 0 auto 18px; max-width: 30ch; color: var(--ink); text-wrap: pretty; }

.letter .stores { flex-wrap: nowrap; gap: 10px; }
.letter .stores img { height: 42px; width: auto; }

.letter-steps {
    margin: 20px 2px 0;
    padding: 16px 0 0;
    border-top: 1px dashed rgba(107, 10, 54, 0.22);
    list-style: none;
    text-align: left;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
}
.letter-steps li { display: flex; gap: 12px; margin: 0 0 9px; }
.letter-steps .n {
    flex: none;
    width: 24px;
    height: 24px;
    margin-top: -1px;
    border-radius: 50%;
    background: rgba(107, 10, 54, 0.08);
    color: var(--wine);
    font-family: var(--numerals);
    font-size: 14px;
    display: grid;
    place-items: center;
}
.letter-steps b { color: var(--wine); }

.letter-safe { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

.letter-ps {
    margin: 24px 26px 34px;
    font-family: var(--serif);
    font-style: italic;
    color: var(--wine);
    font-size: 19px;
    line-height: 1.4;
    text-align: center;
}
.letter-ps a { color: var(--wine); font-style: normal; font-family: var(--sans); font-weight: 600; font-size: 15px; display: inline-block; margin-top: 8px; }

/* The postmark: a kraft disc with an ink ring. The disc stays level; only the
   lettering is turned, as a hand-pressed stamp would be. The bottom caption's
   size is set inline from its length (ProviderWeb.Postmark.arc_font_size). */
.postmark {
    position: absolute;
    z-index: 2;
    top: -42px;
    right: 14px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--kraft);
    color: var(--wine-deep);
    box-shadow: 0 0 0 2px rgba(107, 10, 54, 0.75), 0 0 0 6px #FBF8F4, 0 0 0 7px rgba(107, 10, 54, 0.45), 0 8px 18px rgba(107, 10, 54, 0.16);
}
.postmark-in {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-10deg);
}
.postmark-in svg { position: absolute; inset: 0; width: 92px; height: 92px; overflow: visible; }
.postmark-in text { font-family: var(--sans); font-size: 8.6px; font-weight: 700; letter-spacing: 0.18em; fill: var(--wine-deep); text-transform: uppercase; }
.postmark-in b { font-family: var(--numerals); font-weight: 400; font-size: 34px; line-height: 0.95; margin-top: 2px; }
.postmark-in b.long { font-size: 27px; }