:root{
      /* aged-paper palette — warmer & dustier than petalpost */
      --paper:#ede2c8;          /* topbar / sand */
      --paper-2:#e7dbbe;        /* slight shift for cards */
      --note:#f3ead0;           /* form fields */
      --paper-3:#f6efdb;        /* hover surfaces */
      --ink:#2a241c;            /* dark sepia, NOT black */
      --ink2:#4a4234;
      --sub:#7a6e54;
      --taupe:#a9967a;
      /* airmail blue — the PRIMARY chrome accent (CTAs, selected, links, "post").
         Named --stamp for historical reasons; the whole UI reads off it. */
      --stamp:#2d4a63;
      --stamp-deep:#21384b;
      --stamp-tint:#d3deea;
      /* postal red — SECONDARY now: only the airmail stripe + postmark cancel marks */
      --air-red:#b34234;
      --air-red-deep:#8a2f24;
      /* dusty navy — postmark circle + the blue half of the airmail stripe */
      --postmark:#34546e;
      --postmark-tint:#d4dee6;
      --line:rgba(42,36,28,.16);
      --line-2:rgba(42,36,28,.28);
      --shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 24px 56px -28px rgba(42,36,28,.55);
      --warn:#9a6a26; --warn-tint:#f3deb2; --warn-deep:#6f4c14;
      /* sticky-header height: postmark 64 + padding 18·2 + 1 border ≈ 101px */
      --topbar-h:101px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:var(--paper); color:var(--ink);
      font-family:'Crimson Pro',Georgia,serif; font-weight:400;
      -webkit-font-smoothing:antialiased; min-height:100vh;
      /* faint warm paper grain — keeps surfaces from feeling digital-flat */
      background-image:
        radial-gradient(circle at 18% 22%, rgba(122,110,84,.05), transparent 55%),
        radial-gradient(circle at 82% 78%, rgba(122,110,84,.04), transparent 55%);
    }
    .mono{font-family:'Special Elite','Courier New',monospace;letter-spacing:.06em;}
    .stamp-text{font-family:'Special Elite','Courier New',monospace;text-transform:uppercase;letter-spacing:.16em;}
    .it{font-style:italic;}
    .display{font-family:'DM Serif Display',Georgia,serif;font-weight:400;}

    /* ===== app shell ===== */
    .shell{max-width:1180px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}
    .topbar{
      display:flex;align-items:center;justify-content:space-between;gap:24px;
      padding:18px 40px;border-bottom:1px solid var(--line);
      position:relative;
    }
    /* right cluster of the topbar: step rail + admin Google sign-in */
    .topright{display:flex;align-items:center;gap:20px;}
    .topright .admin-controls{white-space:nowrap;}
    /* postal-red hairline under topbar — like a stamp border */
    .topbar::after{
      content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;
      background:
        repeating-linear-gradient(90deg, var(--air-red) 0 14px, transparent 14px 28px,
          var(--postmark) 28px 42px, transparent 42px 56px);
      opacity:.45;
    }
    .brand{display:inline-flex;align-items:baseline;background:none;border:none;padding:0;cursor:pointer;text-decoration:none;gap:10px;}
    .brand .wm{font-family:'DM Serif Display',serif;font-size:26px;color:var(--ink);letter-spacing:-.01em;}
    .brand .wm em{font-style:italic;color:var(--stamp);}
    .brand .dot{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);}
    .brandwrap{display:flex;align-items:center;gap:18px;}
    /* postmark stamp — a real graphic detail, sets the tone */
    .postmark{
      width:64px;height:64px;border:1.5px solid var(--postmark);border-radius:50%;
      display:grid;place-items:center;color:var(--postmark);
      font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;
      text-align:center;line-height:1.1;
      transform:rotate(-6deg);opacity:.78;
      position:relative;flex:none;
    }
    .postmark::before, .postmark::after{
      content:'';position:absolute;left:-12px;right:-12px;height:1px;background:var(--postmark);opacity:.7;
    }
    .postmark::before{top:42%;} .postmark::after{top:58%;}
    .postmark span{position:relative;background:var(--paper);padding:1px 3px;z-index:1;}

    /* step rail — typewriter, not italic */
    .steps{display:flex;gap:10px;align-items:center;font-size:10px;color:var(--taupe);}
    .step{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:3px;background:none;border:none;color:inherit;font:inherit;letter-spacing:.18em;text-transform:uppercase;font-family:'Special Elite',monospace;font-size:10px;}
    .step .num{width:18px;height:18px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:9px;}
    .step.on{color:var(--stamp);background:var(--stamp-tint);}
    .step.on .num{border-color:var(--stamp);background:var(--stamp);color:#fff;}
    .step.done{color:var(--ink2);cursor:pointer;}
    .step.done .num{border-color:var(--ink2);background:var(--ink2);color:#fff;}
    .step.todo{opacity:.45}

    /* "Celebrations" header nav link — restrained, mono-caps like the step rail, but
       set apart by the air-blue ink so it reads as a destination, not a step. */
    .navlink{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp-deep);text-decoration:none;border:1px solid var(--line-2);border-radius:3px;padding:7px 12px;transition:.15s;white-space:nowrap;}
    .navlink:hover{background:var(--stamp-tint);border-color:var(--stamp);}
    @media (max-width:880px){ .navlink{display:none} }  /* mobile carries it via the hero band below */

    /* hero callout — a slim band under the intro inviting the host-a-shower flow.
       On-brand (airmail tint + a gift glyph), quiet enough not to compete with the
       card flow. Only shown on the landing (no photo yet, design step, non-campaign). */
    .herocta{max-width:520px;margin:0 auto 22px;display:flex;align-items:center;gap:13px;
      padding:13px 18px;border:1px solid var(--line);border-radius:11px;
      background:linear-gradient(180deg, var(--note), var(--paper-3));box-shadow:0 1px 0 rgba(255,255,255,.5) inset;}
    .herocta .gico{font-size:21px;line-height:1;flex:none;}
    .herocta .htxt{flex:1;font-family:'Crimson Pro',serif;font-size:14.5px;line-height:1.45;color:var(--ink2);}
    .herocta .htxt strong{color:var(--ink);font-weight:600;}
    .herocta a{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp-deep);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--stamp-tint);padding-bottom:1px;flex:none;}
    .herocta a:hover{color:var(--stamp);border-color:var(--stamp);}
    @media (max-width:520px){ .herocta{flex-wrap:wrap;} .herocta a{width:100%;} }

    /* ===== workspace ===== */
    .work{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:0;}
    /* pre-photo landing: no controls rail — the hero card is the whole show. Collapse
       to one centred column so the intro + card + Celebrations band sit on the axis,
       with calm space either side (reserved for future use; deliberately left empty). */
    .work.prephoto{grid-template-columns:minmax(0,1fr);}
    .work.prephoto .stage{padding:56px 40px 72px;}
    .work.prephoto .intro{margin-bottom:26px;}
    /* the landing hero card sits a touch larger + centred in the reclaimed width */
    .work.prephoto .frame.portrait{width:min(440px,82vw);}
    .stage{
      position:relative;padding:44px 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
      background:
        radial-gradient(720px 540px at 30% 12%, rgba(179,66,52,.06), transparent 60%),
        radial-gradient(720px 540px at 100% 100%, rgba(52,84,110,.05), transparent 60%);
    }
    /* once there's a photo (or we're past the landing), pin the preview to the top and reclaim the whitespace */
    .stage.filled{justify-content:flex-start;padding-top:28px;}
    /* desktop: header sticks + the preview pins while the controls scroll past, so
       the photo never scrolls out of view (mobile gets its own sticky stage below).
       Pin the inner .cardpin (not the whole stage) so the stage keeps its full-height
       gradient bg and the pre-photo intro still scrolls naturally. */
    @media (min-width:881px){
      .topbar{position:sticky;top:0;z-index:20;background:var(--paper);}
      .stage.filled{justify-content:flex-start;}
      .cardpin{position:sticky;top:var(--topbar-h);width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:8px;}
    }
    .eyebrow{margin:0;font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);}
    .eyebrow .sep{color:var(--taupe);margin:0 8px;}
    .spec{margin:0;font-size:12px;color:var(--taupe);text-align:center;font-family:'Special Elite',monospace;letter-spacing:.06em;}

    /* the live postcard frame — this is the front of the card */
    .frame-wrap{position:relative;}
    .frame{
      position:relative;overflow:hidden;border-radius:6px;background:#1a150f;
      box-shadow:var(--shadow);user-select:none;
      transition:width .25s cubic-bezier(.2,.7,.2,1), aspect-ratio .25s cubic-bezier(.2,.7,.2,1);
    }

    /* — border treatments —
       Two real-print options. The postcard's outer rectangle stays intact (we
       don't cut the card stock); these are colored borders drawn ON the photo,
       inside the postcard.
       • polaroid: thick band of color, taller margin at the bottom
       • airmail: medium band of color with the classic red/blue striped ring
         where the photo meets the border */
    .frame.b-polaroid, .frame.b-airmail{
      background:var(--border-bg, #f1eada);
      border:16px solid var(--border-bg, #f1eada);
      border-radius:3px;
      box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 24px 56px -28px rgba(42,36,28,.55);
    }
    /* base band widths — overridden inline with widths scaled to the live frame
       (16/60px only match the print's 3.8%/14.3% at the desktop 420px frame; on a
       smaller phone frame the fixed band lied about how much caption room prints) */
    .frame.b-polaroid{ border-bottom-width:60px; }
    /* airmail: the red/blue striped band runs through the cream border with EVEN
       cream padding on both sides (like a real par-avion edge), not jammed against
       the photo. The ring lives in .frame-wrap (sibling of .frame) so the frame's
       overflow:hidden doesn't clip it; inset 4px + 8px band inside a 16px border =
       4px cream outside the stripe, 4px between stripe and photo. */
    .air-ring{
      position:absolute;inset:4px;border-radius:3px;pointer-events:none;z-index:4;
      padding:8px;
      background:repeating-linear-gradient(45deg,
        #b34234 0 7px, var(--border-bg, #f1eada) 7px 14px,
        #34546e 14px 21px, var(--border-bg, #f1eada) 21px 28px);
      -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000) content-box;
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000) content-box;
      mask-composite: exclude;
    }
    .frame.portrait{ width:min(420px, 78vw); aspect-ratio: 2 / 3; }
    .frame.landscape{ width:min(620px, 90vw); aspect-ratio: 3 / 2; }
    .frame .photo{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
      transform-origin:center center;will-change:transform;pointer-events:none;
    }
    /* touch-action:none — a finger on the photo PANS THE CROP, never scrolls the
       page (the drag used to do both, so you could never tell where you'd land) */
    .frame.has-photo{cursor:grab;touch-action:none;}
    .frame.dragging{cursor:grabbing;}
    .frame .empty{
      position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
      color:rgba(237,226,200,.78);font-size:15px;padding:30px;text-align:center;
      background:
        linear-gradient(180deg, #2a221a, #1a150f);
    }
    /* airmail-stripe border on the empty state — strong nostalgia cue */
    .frame .empty::before{
      content:'';position:absolute;inset:10px;border-radius:3px;pointer-events:none;
      background:
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(179,66,52,.5) 12px 18px, transparent 18px 24px, rgba(52,84,110,.5) 24px 30px, transparent 30px 36px);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      padding:8px;
    }
    .frame .empty .stamp-mark{
      width:60px;height:74px;border:1px solid rgba(237,226,200,.45);border-radius:2px;
      display:grid;place-items:center;color:rgba(237,226,200,.55);
      font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;
      text-align:center;line-height:1.2;padding:6px;position:relative;
    }
    .frame .empty .stamp-mark::after{
      content:'';position:absolute;inset:-4px;border:1px dashed rgba(237,226,200,.18);border-radius:3px;
    }
    .frame .empty .upload-cta{
      font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
      color:#ede2c8;background:transparent;border:1px solid rgba(237,226,200,.45);border-radius:2px;padding:10px 20px;cursor:pointer;transition:.18s cubic-bezier(.2,.7,.2,1);
    }
    .frame .empty .upload-cta:hover{border-color:var(--stamp);color:#fff;background:rgba(45,74,99,.34);}
    .frame .empty .or{font-size:11px;color:rgba(237,226,200,.55);font-family:'Special Elite',monospace;letter-spacing:.14em;text-transform:uppercase;}
    .frame.drag-over .empty{background:linear-gradient(180deg, rgba(45,74,99,.42), rgba(45,74,99,.16));}
    .frame.drag-over .empty .upload-cta{border-color:var(--stamp);background:rgba(45,74,99,.34);}

    /* vignette — darkens the photo edges; sits over the photo, under the caption */
    .vig{position:absolute;inset:0;pointer-events:none;z-index:1;}

    /* polaroid caption — sits ON the thick bottom band, not over the photo. Lives
       in .frame-wrap (sibling of .frame) so the frame's overflow:hidden doesn't
       clip it out of the border zone. The band is the frame's 60px bottom border. */
    .pcap{
      position:absolute;left:0;right:0;bottom:0;height:60px;  /* height overridden inline to the scaled band */
      display:grid;place-items:center;padding:0 7%;overflow:hidden;
      pointer-events:none;line-height:1.16;white-space:pre-line;text-align:center;
    }

    /* caption overlay — draggable text on the photo */
    .cap{
      position:absolute;max-width:88%;
      transform:translate(-50%,-50%);cursor:move;touch-action:none;
      padding:6px 10px;line-height:1.18;
      white-space:pre-line;            /* honor the caption's own line breaks (matches the print bake) */
      transition:outline-color .15s;outline:1px solid transparent;outline-offset:3px;
    }
    .cap:hover, .cap.dragging-cap{outline-color:rgba(255,255,255,.5);}
    .cap.has-scrim{
      text-shadow:0 1px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
    }
    .cap.dark.has-scrim{ text-shadow:0 1px 14px rgba(255,255,255,.7), 0 1px 2px rgba(255,255,255,.5); }
    .cap-handle{
      position:absolute;top:-22px;left:50%;transform:translateX(-50%);
      font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
      color:rgba(255,255,255,.6);background:rgba(0,0,0,.4);padding:3px 8px;border-radius:999px;
      opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap;
    }
    .cap:hover .cap-handle, .cap.dragging-cap .cap-handle{opacity:1;}

    /* alignment guides — show while dragging caption */
    .guides{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .12s;}
    .guides.show{opacity:1;}
    .guides .v, .guides .h{position:absolute;background:var(--stamp);}
    .guides .v{width:1px;top:0;bottom:0;left:50%;}
    .guides .h{height:1px;left:0;right:0;top:50%;}
    .guides .h2{top:33.333%;}
    .guides .h3{top:66.666%;}

    /* card spec line under preview */
    .pspec{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--taupe);font-style:italic;}
    .pspec .dot{width:4px;height:4px;border-radius:50%;background:var(--taupe);}

    /* ===== controls panel ===== */
    .panel{border-left:1px solid var(--line);background:var(--paper-2);padding:24px 28px 130px;overflow:auto;}
    .panel h2{margin:0 0 4px;font-family:'DM Serif Display',serif;font-size:26px;font-weight:400;font-style:normal;letter-spacing:-.01em;}
    .panel .hint{margin:0 0 22px;font-family:'Crimson Pro',serif;font-size:14px;color:var(--sub);line-height:1.5;}
    .group{margin:0 0 22px;padding-top:18px;border-top:1px solid var(--line);}
    .group:first-of-type{padding-top:0;border-top:none;}
    .group > .lab{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 11px;font-size:10px;color:var(--sub);font-family:'Special Elite',monospace;letter-spacing:.18em;text-transform:uppercase;}
    .group .lab .aside{font-family:'Crimson Pro',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:12px;color:var(--taupe);}

    /* upload tile when no photo */
    .uploadtile{
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
      padding:24px 16px;border:1px dashed var(--line);border-radius:10px;background:var(--note);
      text-align:center;cursor:pointer;transition:.18s cubic-bezier(.2,.7,.2,1);
    }
    .uploadtile:hover{border-color:var(--stamp);background:#fdf8ec;}
    .uploadtile .ico{width:30px;height:30px;border:1px solid var(--taupe);border-radius:50%;display:grid;place-items:center;color:var(--taupe);font-size:14px;}
    .uploadtile .lab{font-size:14px;color:var(--ink);}
    .uploadtile .sub{font-size:11px;color:var(--sub);font-style:italic;}

    /* photo info row once loaded */
    .photoinfo{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--note);border:1px solid var(--line);border-radius:8px;}
    .photoinfo .thumb{width:38px;height:38px;border-radius:5px;object-fit:cover;background:#1a150f;flex:none;}
    .photoinfo .meta{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);}
    .photoinfo .meta .nm{color:var(--ink);font-style:italic;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .photoinfo .meta .dim{font-family:'Special Elite',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);}
    .photoinfo .replace{font-family:'Special Elite',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);background:none;border:none;cursor:pointer;padding:0;}
    .photoinfo .replace:hover{color:var(--stamp-deep);}

    /* orientation segmented control */
    .seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--note);border:1px solid var(--line);border-radius:10px;}
    .seg button{
      display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 8px;
      border:none;background:transparent;border-radius:3px;cursor:pointer;color:var(--ink2);
      font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.06em;transition:.18s cubic-bezier(.2,.7,.2,1);
    }
    .seg button:hover:not(.sel){background:rgba(45,74,99,.07);}
    .seg button.sel{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(60,40,20,.08);}
    .seg .o-icon{width:18px;border:1px solid currentColor;border-radius:1.5px;opacity:.7;}
    .seg .o-icon.p{height:24px;}
    .seg .o-icon.l{height:12px;width:24px;}

    /* border picker — visual tiles, each a mini-mock of the border treatment */
    .borders{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
    .borderpick{
      padding:8px 6px 6px;border:1px solid var(--line);border-radius:4px;background:var(--note);
      cursor:pointer;color:var(--ink);transition:.18s cubic-bezier(.2,.7,.2,1);
      display:flex;flex-direction:column;align-items:center;gap:6px;
    }
    .borderpick:hover{border-color:var(--stamp);}
    .borderpick.sel{border-color:var(--stamp);background:var(--stamp-tint);}
    .borderpick .swatch{
      width:40px;height:54px;position:relative;border-radius:2px;
      background-image:linear-gradient(135deg, #6b8a9a 0%, #6b8a9a 45%, #c9a86a 45%, #c9a86a 100%);
    }
    /* polaroid swatch — thick white border, thicker on bottom */
    .borderpick .swatch.bw-polaroid{
      width:38px;height:54px;
      border:5px solid var(--swatch-bg, #ffffff);border-bottom-width:14px;
    }
    /* airmail swatch — medium border + tiny red/blue stripe ring */
    .borderpick .swatch.bw-airmail{
      width:42px;height:56px;
      border:5px solid var(--swatch-bg, #f1eada);
      position:relative;
    }
    .borderpick .swatch.bw-airmail::before{
      content:'';position:absolute;inset:-4px;pointer-events:none;padding:1.5px;
      background:repeating-linear-gradient(45deg,
        #b34234 0 2.5px, var(--swatch-bg, #f1eada) 2.5px 5px,
        #34546e 5px 7.5px, var(--swatch-bg, #f1eada) 7.5px 10px);
      -webkit-mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000) content-box;
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000,#000) padding-box, linear-gradient(#000,#000) content-box;
      mask-composite: exclude;
    }
    .borderpick .nm{font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);text-align:center;line-height:1.2;}
    .borderpick.sel .nm{color:var(--stamp-deep);}

    /* slider */
    .slider-row{display:flex;align-items:center;gap:12px;}
    .slider-row .lbl{font-family:'Special Elite',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);min-width:32px;text-align:right;}
    input[type=range]{
      flex:1;height:18px;background:transparent;-webkit-appearance:none;appearance:none;
    }
    input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px;}
    input[type=range]::-moz-range-track{height:2px;background:var(--line);border-radius:2px;}
    input[type=range]::-webkit-slider-thumb{
      -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
      background:var(--stamp);margin-top:-6px;cursor:pointer;border:2px solid var(--paper-2);
      box-shadow:0 0 0 1px var(--stamp);
    }
    input[type=range]::-moz-range-thumb{
      width:14px;height:14px;border-radius:50%;background:var(--stamp);cursor:pointer;border:2px solid var(--paper-2);
      box-shadow:0 0 0 1px var(--stamp);
    }
    .resetlink{font-family:'Special Elite',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);background:none;border:none;cursor:pointer;padding:0;}
    .resetlink:hover{color:var(--stamp-deep);}
    .resetlink:disabled{opacity:.3;cursor:not-allowed;}

    /* tone filters as a row of round chips */
    .tones{display:flex;gap:7px;flex-wrap:wrap;}
    .tone{
      display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:0;
    }
    .tone .sw{
      width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
      background-size:cover;background-position:center;transition:.18s cubic-bezier(.2,.7,.2,1);
    }
    .tone:hover .sw{transform:scale(1.08);}
    .tone.sel .sw{box-shadow:0 0 0 2px var(--paper-2),0 0 0 3.5px var(--stamp);border-color:transparent;}
    .tone .nm{font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);}
    .tone.sel .nm{color:var(--stamp-deep);}

    /* caption textarea (kept calm, not Caveat) */
    textarea.captx{
      width:100%;border:1px solid var(--line);border-radius:8px;background:var(--note);
      padding:11px 13px;font-family:'Crimson Pro',serif;font-style:italic;font-weight:300;
      font-size:15px;line-height:1.5;color:var(--ink);resize:vertical;min-height:64px;
    }
    textarea.captx:focus{outline:none;border-color:var(--stamp);}
    textarea.captx::placeholder{color:var(--taupe);font-style:italic;}
    .ctr{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px;}
    .ctr .left{font-size:11px;color:var(--taupe);font-style:italic;}
    .ctr .ct{font-family:'Special Elite',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);}
    .ctr .ct.full{color:var(--warn-deep);}
    /* ink meter — how much of the printed message box is used, measured in the
       chosen face (different hands fit different amounts; a char count can't say) */
    .inkbar{height:3px;margin-top:8px;background:var(--line);border-radius:2px;overflow:hidden;}
    .inkbar i{display:block;height:100%;background:var(--stamp);border-radius:2px;transition:width .15s ease;}
    .inkbar.full i{background:var(--warn);}

    /* font picker — vertical list of named samples, each in its own face */
    .fonts{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
    .fontpick{
      padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--note);
      cursor:pointer;text-align:left;color:var(--ink);transition:.18s cubic-bezier(.2,.7,.2,1);
      display:flex;flex-direction:column;gap:3px;
    }
    .fontpick:hover{border-color:var(--stamp);}
    .fontpick.sel{border-color:var(--stamp);background:var(--stamp-tint);}
    .fontpick .sample{font-size:20px;line-height:1;}
    .fontpick .nm{font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub);}
    .fontpick.sel .nm{color:var(--stamp-deep);}

    /* color swatches */
    .colors{display:flex;gap:8px;flex-wrap:wrap;}
    .clrbtn{
      width:28px;height:28px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;transition:.18s cubic-bezier(.2,.7,.2,1);position:relative;
    }
    .clrbtn:hover{transform:scale(1.1);}
    .clrbtn.sel{box-shadow:0 0 0 2px var(--paper-2),0 0 0 3.5px var(--stamp);border-color:transparent;}

    /* align segmented (3-way) */
    .aseg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:3px;background:var(--note);border:1px solid var(--line);border-radius:8px;}
    .aseg button{
      border:none;background:transparent;padding:8px 6px;border-radius:6px;cursor:pointer;color:var(--ink2);
      font-family:'Special Elite',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;transition:.18s;
    }
    .aseg button.sel{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(60,40,20,.08);}
    .aseg button:hover:not(.sel){background:rgba(45,74,99,.07);}

    /* caption nudge pad — touch-first move/resize (shown on mobile, where dragging
       fights the scroll). Move arrows place the caption; –/+ resize it. */
    .nudgepad{display:none;margin-top:14px;}
    .nudgepad .nlab{font-family:'Special Elite',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);margin:0 0 8px;}
    .dpad{display:grid;grid-template-columns:repeat(3,40px);gap:6px;justify-content:center;margin:0 0 8px;}
    .dpad button,.sizestep button{
      font-family:'Special Elite',monospace;border:1px solid var(--line);border-radius:7px;
      background:var(--note);color:var(--ink2);cursor:pointer;transition:.12s;
    }
    .dpad button{height:40px;font-size:16px;}
    .dpad .spacer{visibility:hidden;}
    .dpad .ctr-btn{font-size:13px;color:var(--sub);}
    .dpad button:active,.sizestep button:active{background:var(--stamp-tint);border-color:var(--stamp);color:var(--stamp-deep);}
    .sizestep{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
    .sizestep button{padding:11px 0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;}

    /* checkbox-like toggle */
    .togg{
      display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;
      background:var(--note);border:1px solid var(--line);border-radius:8px;
    }
    .togg .copy{font-size:13.5px;color:var(--ink2);font-style:italic;}
    .togg .copy .sub{font-size:11px;color:var(--sub);display:block;margin-top:2px;}
    .switch{position:relative;width:36px;height:20px;background:var(--line);border-radius:999px;cursor:pointer;flex:none;transition:.18s;border:none;padding:0;}
    .switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.18s cubic-bezier(.2,.7,.2,1);}
    .switch.on{background:var(--stamp);}
    .switch.on::after{left:18px;}

    /* sticky action bar */
    .actionbar{
      position:fixed;bottom:0;right:0;width:420px;border-left:1px solid var(--line);border-top:1px solid var(--line);
      background:var(--paper-2);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:10;
    }
    .actionbar .sum{font-size:13px;color:var(--ink2);font-style:italic;}
    .actionbar .sum .muted{color:var(--taupe);}
    .btn{
      border:1.5px solid var(--stamp);border-radius:3px;background:var(--stamp);color:#fff;font-family:'Special Elite',monospace;
      font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:11px 22px;cursor:pointer;transition:.18s cubic-bezier(.2,.7,.2,1);
      box-shadow:1px 1px 0 var(--stamp-deep);
    }
    .btn:hover{background:var(--stamp-deep);border-color:var(--stamp-deep);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--stamp-deep);}
    .btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--stamp-deep);}
    .btn:disabled{opacity:.35;cursor:not-allowed;background:transparent;color:var(--sub);border-color:var(--line-2);box-shadow:none;transform:none;}
    .btn.ghost{background:transparent;color:var(--stamp-deep);border:1.5px solid var(--stamp);box-shadow:1px 1px 0 var(--stamp);}
    .btn.ghost:hover{background:var(--stamp-tint);}

    /* intro on first visit (no photo) */
    .intro{max-width:520px;text-align:center;margin:0 0 18px;}
    .intro .kicker{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp);margin:0 0 14px;}
    .intro h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:42px;line-height:1.06;color:var(--ink);margin:0 0 14px;letter-spacing:-.015em;}
    .intro p{font-family:'Crimson Pro',serif;font-size:16px;line-height:1.6;color:var(--ink2);margin:0;}
    .intro p .rose{color:var(--stamp-deep);font-style:italic;}
    @media (max-height:780px){ .intro h1{font-size:32px;} }

    /* mobile — pin the photo to the top so you see every edit while the controls
       scroll underneath (the petalpost pattern: preview up top, tools below). */
    @media (max-width:880px){
      .work{grid-template-columns:1fr}
      /* the preview stays put while the panel scrolls under it */
      .stage{
        position:sticky;top:0;z-index:6;
        background:var(--paper);border-bottom:1px solid var(--line);
        padding:12px 20px 14px;gap:8px;
      }
      .intro{display:none}              /* the panel hint carries the pitch on mobile */
      .stage .eyebrow,.stage .pspec,.stage .resetlink{display:none}  /* reclaim height for the photo */
      .frame.portrait{ width:auto;height:42vh; }
      .frame.landscape{ width:auto;height:30vh; }
      .panel{border-left:none;border-top:1px solid var(--line);padding:20px 20px 130px;}
      .actionbar{width:100%}
      .steps{display:none}
      .topbar{padding:14px 20px}
      .tagline{display:none}
      .nudgepad{display:block}          /* touch-friendly caption move/resize */

      /* On a single-column phone the sticky stage can't hold BOTH postcard faces —
         stacking the full front (42vh) + the back blew past the viewport and buried
         the editor/form below it. So on message/address/review we show ONE face at a
         time and flip between them with the toggle; the inactive face is hidden. */
      .cardfaces .faceflip{display:inline-flex;}
      .cardfaces .plabel{display:none;}   /* the toggle already labels the face */
      .cardfaces.face-front .face-back{display:none;}
      .cardfaces.face-back  .face-front{display:none;}
      .cardfaces.face-back .backcard{width:min(380px,86vw);}
    }

    /* footer chrome (matches index.html) */
    body{padding-bottom:96px;}
    .pp-footer{border-top:1px solid var(--line);background:var(--paper-2);}
    .pp-footer .inner{max-width:1180px;margin:0 auto;padding:40px 40px 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;}
    .pp-footer .col h4{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin:0 0 12px;}
    .pp-footer .col a{display:block;color:var(--ink2);text-decoration:none;font-size:14px;margin:0 0 9px;}
    .pp-footer .col a:hover{color:var(--stamp);}
    .pp-footer .brandcol img{height:28px;width:auto;display:block;margin:0 0 12px;}
    .pp-footer .brandcol p{font-size:13px;line-height:1.6;color:var(--sub);margin:0;max-width:30ch;font-style:italic;}
    .pp-footer .bar{border-top:1px solid var(--line);}
    .pp-footer .bar .inner2{max-width:1180px;margin:0 auto;padding:14px 40px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
    .pp-footer .bar span{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);}
    @media (max-width:880px){
      .pp-footer .inner{grid-template-columns:1fr 1fr;gap:24px;padding:36px 20px 24px;}
      .pp-footer .brandcol{grid-column:1 / -1;}
      .pp-footer .bar .inner2{padding:14px 20px;}
    }

    /* ── checkout panels (address / review / sent) — shared-flow markup, picpost skin ── */
    .field{margin:0 0 11px;}
    .field label{display:block;font-family:'Special Elite',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);margin:0 0 5px;}
    .field input{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--note);padding:11px 13px;font-family:'Crimson Pro',serif;font-size:16px;color:var(--ink);}
    .field input:focus{outline:none;border-color:var(--stamp);}
    .field input.bad{border-color:var(--warn);background:#fbf2e1;}
    .field input::placeholder{color:var(--taupe);}
    /* address autocomplete dropdown (shared Checkout.StreetField) — picpost palette */
    .acwrap{position:relative;}
    .aclist{position:absolute;z-index:40;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;
      list-style:none;background:var(--paper-3);border:1px solid var(--line);border-radius:8px;
      box-shadow:0 14px 34px rgba(42,36,28,.24);max-height:248px;overflow:auto;}
    .aclist li{padding:8px 10px;border-radius:5px;cursor:pointer;display:flex;flex-direction:column;gap:2px;}
    .aclist li.on{background:var(--stamp-tint);}
    .aclist .ac-st{font-family:'Crimson Pro',serif;font-size:15px;color:var(--ink);line-height:1.2;}
    .aclist .ac-ci{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
      text-transform:uppercase;color:var(--sub);}
    .row{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:8px;}
    .notice{background:var(--warn-tint);border:1px solid var(--warn);color:var(--warn-deep);border-radius:8px;padding:10px 13px;font-size:13.5px;margin:0 0 16px;font-style:italic;}
    .subhead{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin:20px 0 10px;}
    .subhead .sub{display:block;font-family:'Crimson Pro',serif;font-style:italic;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--sub);margin-top:3px;}
    .savehint{font-size:12px;color:var(--sub);font-style:italic;margin:0 0 8px;}
    .optret{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink2);cursor:pointer;}
    .optret input{width:16px;height:16px;accent-color:var(--stamp);}
    /* multi-recipient */
    .addrcpt{margin:14px 0 2px;}
    .addrcpt .muted{font-size:12px;margin-left:8px;}
    .linkbtn{border:none;background:none;cursor:pointer;font-family:'Crimson Pro',serif;font-style:italic;font-size:14px;color:var(--stamp-deep);padding:0;}
    .linkbtn:hover{color:var(--stamp);}
    .linkbtn.quiet{color:var(--sub);font-size:12px;}
    .linkbtn.quiet:hover{color:var(--ink);}
    .retform{margin-top:6px;}
    .rev{margin:0 0 18px;}
    .addr{font-size:14.5px;color:var(--ink2);line-height:1.55;}
    .addr .who{display:block;font-style:italic;color:var(--ink);font-size:15.5px;}
    .line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--ink2);}
    .line.total{font-family:'Crimson Pro',serif;}
    .muted{font-size:12.5px;color:var(--sub);font-style:italic;margin:8px 0 0;}
    .promo{display:flex;gap:8px;margin:0 0 4px;}
    .promo input{flex:1;border:1px solid var(--line);border-radius:8px;background:var(--note);padding:10px 12px;font-family:'Special Elite',monospace;font-size:13px;letter-spacing:.06em;color:var(--ink);}
    .photosum{font-size:14px;color:var(--ink2);font-style:italic;line-height:1.5;}
    .done{text-align:center;max-width:540px;margin:40px auto;padding:0 24px;}
    .done .badge{display:inline-block;font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--stamp);padding:5px 12px;border-radius:3px;margin:0 0 16px;}
    .done h2{font-family:'DM Serif Display',serif;font-weight:400;font-size:34px;color:var(--ink);margin:0 0 12px;}
    .done p{font-family:'Crimson Pro',serif;font-size:16px;line-height:1.6;color:var(--ink2);margin:0 0 10px;}
    .done .next-steps{text-align:left;max-width:400px;margin:18px auto;color:var(--ink2);font-size:14px;line-height:1.5;}

    /* ── message / address / review: the two postcard faces ──
       Desktop stacks both faces (the flip toggle is hidden); a phone shows one at a
       time and flips via the toggle (see the mobile block). */
    .cardfaces{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
    .face{display:flex;flex-direction:column;align-items:center;gap:12px;}
    .plabel{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sub);margin:0;}
    /* front/back flip toggle — only rendered on mobile (hidden on desktop) */
    .faceflip{display:none;gap:4px;padding:3px;background:var(--note);border:1px solid var(--line);border-radius:999px;}
    .faceflip button{font-family:'Special Elite',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sub);background:none;border:none;border-radius:999px;padding:7px 18px;cursor:pointer;transition:.16s;}
    .faceflip button.on{background:var(--stamp);color:#fff;}
    /* the postcard back — landscape, traditional split: message left, ad+QR + address right */
    .backcard{position:relative;width:min(560px,92vw);aspect-ratio:3/2;background:var(--note);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;color:var(--ink);container-type:inline-size;}
    .backcard .bdivide{position:absolute;left:43%;top:7%;bottom:7%;width:1px;background:var(--line);}
    /* the message box mirrors the PRINT layout exactly (server .msg: left 5%,
       width 37%, top 6% → bottom 8%) and the text is sized in cqw so the preview
       face is the printed face at every card width — what fills here fills there.
       width 37% → right edge at 42%, just shy of Lob's auto-printed address block. */
    .backcard .bmsg{position:absolute;left:5%;top:6%;width:37%;bottom:8%;overflow:hidden;line-height:1.45;white-space:pre-wrap;color:var(--ink2);}
    .backcard .bmsg.placeholder{color:var(--taupe);font-style:italic;font-size:2.7cqw;}
    /* the right column lives in 45%→97% (a gap clears the 43% centre divider, which
       marks Lob's address-block edge); the mark, QR, and address label centre on it. */
    .backcard .bad{position:absolute;left:45%;right:3%;top:7%;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;}
    .backcard .bad .bwm{font-family:'DM Serif Display',serif;font-size:17px;color:var(--ink);}
    .backcard .bad .bwm em{font-style:italic;color:var(--stamp);}
    .backcard .bad .bcap{font-family:'Special Elite',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);}
    /* the QR, centred in the right column */
    .backcard .bqr{position:absolute;left:45%;right:3%;top:29%;display:flex;justify-content:center;}
    /* address label — the white sticker the post office prints: return address,
       postage indicia, recipient, USPS barcode (mirrors Lob's auto-filled zone). */
    .backcard .baddr{position:absolute;left:45%;right:3%;bottom:5%;background:#fff;border-radius:3px;padding:8px 10px 9px;box-shadow:0 1px 3px rgba(42,36,28,.16);}
    .backcard .baddr .bret{font-family:'Special Elite',monospace;font-size:6.5px;line-height:1.45;color:#666;letter-spacing:.02em;}
    .backcard .baddr .bpostage{position:absolute;right:10px;top:8px;width:48px;height:30px;border:1px solid #aaa;display:grid;place-items:center;text-align:center;font-family:'Special Elite',monospace;font-size:6px;letter-spacing:.08em;color:#999;line-height:1.25;}
    .backcard .baddr .bto{font-family:'Special Elite',monospace;font-size:10px;line-height:1.5;color:#1a1a1a;margin-top:18px;}
    .backcard .baddr .bto .bph{color:#b0b0b0;}
    .backcard .baddr .bbar{height:13px;margin-top:8px;background:repeating-linear-gradient(90deg,#111 0 1px,transparent 1px 3px,#111 3px 4px,transparent 4px 7px,#111 7px 9px,transparent 9px 11px);}
    @media (max-width:880px){ .backcard{width:min(440px,94vw);} }

    /* ── Celebration (group-card shower) — contributor mode ── */
    /* full-page gentle message (closed / not found) */
    .celwrap{max-width:560px;margin:64px auto;padding:0 24px;text-align:center;}
    .celwrap .kicker{font-family:'Special Elite',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp);margin:0 0 14px;}
    .celwrap h1{font-family:'DM Serif Display',serif;font-weight:400;font-size:34px;line-height:1.1;color:var(--ink);margin:0 0 14px;}
    .celwrap p{font-family:'Crimson Pro',serif;font-size:16px;line-height:1.6;color:var(--ink2);margin:0 0 10px;}
    .celwrap .btn{margin-top:22px;display:inline-block;text-decoration:none;}
    /* instructions banner — sits across the top of the flow */
    .celbanner{background:var(--paper-3);border-bottom:1px solid var(--line);padding:16px 40px;}
    .celbanner .inner{max-width:1180px;margin:0 auto;display:flex;align-items:flex-start;gap:16px;}
    .celbanner .gift{font-size:22px;line-height:1;flex:none;margin-top:1px;}
    .celbanner .ctxt{flex:1;min-width:0;}
    .celbanner .occ{font-family:'DM Serif Display',serif;font-size:18px;color:var(--ink);margin:0 0 3px;}
    .celbanner .occ em{font-style:italic;color:var(--stamp);}
    .celbanner .blurb{font-family:'Crimson Pro',serif;font-style:italic;font-size:14.5px;color:var(--ink2);line-height:1.5;margin:0;white-space:pre-wrap;}
    .celbanner .when{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin-top:5px;}
    @media (max-width:880px){ .celbanner{padding:14px 20px;} }
    /* locked recipient chip (address step) */
    .lockchip{display:flex;align-items:center;gap:12px;background:var(--note);border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin:0 0 6px;}
    .lockchip .lk{font-size:15px;color:var(--stamp);flex:none;}
    .lockchip .who{font-family:'Crimson Pro',serif;font-style:italic;font-size:16px;color:var(--ink);}
    .lockchip .place{font-family:'Special Elite',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin-top:2px;}
    .locknote{font-size:12.5px;color:var(--sub);font-style:italic;margin:0 0 16px;}
    /* sign-in gate */
    .signgate{background:var(--note);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 16px;}
    .signgate p{margin:0 0 10px;font-size:14px;color:var(--ink2);font-style:italic;}
    .signgate .gbtn{display:flex;}
    /* dev-only synthetic sign-in (shown only when server reports devAuth) */
    .devsign{margin-top:12px;border:1px dashed var(--sub);border-radius:8px;padding:10px;background:rgba(0,0,0,.02);}
    .devsign p{margin:0 0 8px;font-size:12px;color:var(--sub);font-style:normal;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;}
    .devsign .devrow{display:flex;gap:8px;flex-wrap:wrap;}
    .devsign input{flex:1;min-width:160px;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);}
    .devsign button{font-size:14px;padding:8px 12px;border:1px solid var(--sub);border-radius:6px;background:var(--note);color:var(--ink);cursor:pointer;}
    .signedline{font-size:13px;color:var(--ink2);font-style:italic;margin:0 0 16px;}
    .signedline .em{color:var(--ink);}
    .signedline .linkbtn{font-size:13px;}
    .trackline{font-family:'Newsreader',serif;font-style:italic;font-size:15px;color:var(--ink2);margin:14px 0 0;}
    .trackline .em{color:var(--ink);font-style:normal;}

/* The postal desk: stationery around the card, a compact tool drawer below it. */
:root{--paper:#eee3c8;--paper-2:#f3ecd9;--note:#fffdf5;--paper-3:#faf6e9;--sub:#6c604a;--stamp-tint:#dce6ea;--topbar-h:92px}
body{padding-bottom:0}
.shell{max-width:1280px}
.topbar{padding:14px 32px;gap:18px}
.topright{gap:12px}.step{min-height:44px;padding:6px 9px;letter-spacing:.1em}.step.todo{opacity:1;color:#776d58}
.navlink{min-height:44px;display:flex;align-items:center;letter-spacing:.08em}.brand .wm{font-size:29px}
.work{grid-template-columns:minmax(0,1fr) 380px;min-height:calc(100svh - 150px)}
.stage{background:#f3ecd9;padding:32px 36px 112px}.stage.filled{padding-top:24px}
.panel{background:#faf6e9;padding:26px 26px 138px;border-left:1px solid var(--line)}
.panel h2{font-size:29px;margin:0 0 8px}.panel .hint{font-size:16px;line-height:1.45;color:var(--ink2)}
.editor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;gap:10px}
.desk-kicker{font-family:'Special Elite',monospace;font-size:10px;color:var(--sub);margin:0 0 8px;letter-spacing:.08em}
.optional{font-size:13px;font-style:italic;white-space:nowrap;color:var(--sub)}
.desk-toolbar{padding:10px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px;background:var(--paper);color:var(--sub);font-size:15px;font-style:italic}
.desk-toolbar>div{display:flex;gap:8px;flex-shrink:0}.desk-toolbar button,.preview-heading button{border:1px solid var(--line);background:transparent;border-radius:7px;color:var(--stamp);font:14px 'Crimson Pro',serif;min-height:44px;padding:8px 13px;cursor:pointer}
button:disabled{cursor:not-allowed}.desk-toolbar button:disabled{opacity:.45}
.tool-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper-2);margin-bottom:20px}
.tool-tabs button{min-height:61px;background:transparent;border:0;border-right:1px solid var(--line);color:var(--sub);font-size:20px;cursor:pointer}
.tool-tabs button:last-child{border:0}.tool-tabs button span{display:block;font:11px 'Special Elite',monospace;letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.tool-tabs button[aria-selected=true]{background:var(--stamp-tint);color:var(--stamp)}
.tool-hint{font-size:16px;color:var(--sub);margin:0 0 18px}.group{margin-bottom:20px}.lab{font-size:11px;letter-spacing:.1em;margin-bottom:10px}.lab .aside{display:none}
.photoinfo{margin:0 0 16px;background:transparent}.photoinfo .nm{font-size:15px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photoinfo .dim{font-size:12px}.replace{min-height:44px!important;font-size:12px!important}
.crop-launch{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;border:1px solid var(--stamp);border-radius:8px;background:transparent;color:var(--stamp);font:17px 'Crimson Pro',serif;padding:10px 14px;margin-bottom:24px;cursor:pointer}
.crop-controls{background:var(--stamp-tint);padding:14px;border-radius:10px;color:var(--stamp)}.crop-controls p{margin:0 0 12px;font-size:16px;line-height:1.4}.crop-actions{display:flex;gap:10px;margin-top:12px}.crop-actions .btn{flex:1}
.tones{gap:7px}.tone{min-height:68px}.tone .nm{font-size:10px;letter-spacing:.03em}.tone .sw{height:38px}.borders{gap:10px}.borderpick{min-height:94px}.borderpick .nm{font-size:11px}
.clrbtn{width:44px;height:44px;min-width:44px;border-width:2px}.clrbtn.sel{outline:2px solid var(--stamp);outline-offset:3px}.colors{gap:12px;flex-wrap:wrap}
.fonts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fontpick{min-height:72px;padding:10px 5px}.fontpick .nm{font-size:10px;letter-spacing:.02em}.fontpick .sample{font-size:22px}
.caption-label{display:flex;justify-content:space-between;gap:8px;font-size:17px;margin-bottom:9px}.caption-label span{font-style:italic;color:var(--sub);font-size:14px}.captx{font-size:19px;line-height:1.45;background:var(--note);padding:13px;border-radius:8px}.ctr{font-size:12px;gap:12px;line-height:1.4;margin:8px 0 20px}.ctr .left{font-size:12px}
.fine-tune{border-top:1px solid var(--line);margin-top:16px;padding-top:6px}.fine-tune summary{min-height:44px;padding:12px 0;cursor:pointer;color:var(--stamp);font-size:15px}.fine-tune .slider-row{margin:14px 0}.slider-row{font-size:14px;gap:12px}.slider-row input{min-height:44px;min-width:0;accent-color:var(--stamp)}
.seg button,.aseg button,.placement-controls button{min-height:44px;font-size:13px}.placement-controls{display:flex;gap:7px;margin:8px 0}.placement-controls button{flex:1;background:var(--note);border:1px solid var(--line);border-radius:6px;color:var(--stamp)}.shadow-control{display:flex;gap:10px;align-items:center;min-height:44px;margin-top:12px;font-size:15px}.shadow-control input{width:20px;height:20px;accent-color:var(--stamp)}
.btn{min-height:48px;border-radius:7px;letter-spacing:.08em;font-size:12px;box-shadow:none;padding:12px 18px}.btn:hover{transform:none;box-shadow:none}
.actionbar{width:380px;right:max(0px,calc((100vw - 1280px)/2));padding:16px 24px max(16px,env(safe-area-inset-bottom));background:#faf6e9;flex-wrap:wrap;gap:10px}.actionbar>.btn{width:100%}.actionbar .sum{display:flex;align-items:center;font-size:14px}.actionbar .sum .btn{min-height:36px;padding:6px 10px;font-size:11px}
.photo-status{padding:12px 24px;background:var(--note);color:var(--stamp);font-size:16px}.photo-status[role=alert]{color:var(--air-red-deep)}
.frame .cap{touch-action:pan-y;cursor:default}.notice{font-size:15px;line-height:1.45}
.postcard-preview{width:min(840px,calc(100vw - 24px));max-height:calc(100svh - 32px);padding:20px 24px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;color:var(--ink);overflow:auto;box-shadow:0 24px 100px #1b252966}
.postcard-preview::backdrop{background:#18252cd9;backdrop-filter:blur(5px)}
.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font:24px 'DM Serif Display',serif}.preview-heading button{font-size:28px;width:44px;padding:0}
.preview-switch{display:flex;justify-content:center;margin:12px auto 22px;gap:4px}.preview-switch button{min-height:44px;padding:10px 24px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--stamp);font:16px 'Crimson Pro',serif}.preview-switch button.sel{background:var(--stamp-tint);border-color:var(--stamp)}
.clean-card{display:flex;justify-content:center;align-items:center;min-height:220px;padding:10px 8px 22px}.clean-card .frame.portrait{height:min(58svh,550px);width:auto}.clean-card .frame.landscape{width:min(650px,72vw);height:auto}.clean-card .backcard{width:min(650px,72vw)}.preview-note{text-align:center;color:var(--sub);font-size:14px;margin:8px 0}
:focus-visible{outline:2px solid var(--stamp);outline-offset:4px}
.work.prephoto .stage{padding:44px 30px 60px}.work.prephoto .intro{display:block}.work.prephoto .frame.portrait{width:260px;height:auto}.intro h1{font-size:46px}.intro p{font-size:18px}.empty{background:#2d4a63}.herocta{order:3;margin-top:22px}.herocta a{min-height:44px;display:flex;align-items:center}.herocta .htxt{font-size:16px}
@media(min-width:881px){.topbar{position:relative}.cardpin{top:24px}.stage-design .frame.portrait{width:min(330px,30vw)}.stage-design .frame.landscape{width:min(580px,45vw)}.cardfaces .frame.portrait{width:230px}.cardfaces .frame.landscape{width:380px}.cardfaces .backcard{width:380px}.cardfaces{gap:26px}.cardfaces .faceflip{display:none}.plabel{margin:0 0 12px}}
@media(max-width:880px){
 .topbar{padding:12px 20px;min-height:79px}.brand .wm{font-size:28px}.brand .dot{font-size:9px}.postmark{height:50px;width:50px;font-size:7px}.topright{gap:0}.topright .navlink{display:none}.steps{display:none}
 .desk-toolbar{padding:6px 18px;min-height:54px;font-size:13px}.desk-toolbar>span{max-width:135px}.desk-toolbar button{padding:6px 10px}
 .work{display:block;min-height:0}.stage,.stage.filled{padding:16px 18px 18px;position:relative;top:auto;z-index:auto;background:#f3ecd9;border-bottom:0;gap:8px}.cardpin{position:static}
 .stage-design .frame.portrait{height:min(37svh,320px);width:auto}.stage-design .frame.landscape{width:min(82vw,420px);height:auto}
 .frame.portrait{height:min(31svh,265px);width:auto}.frame.landscape{height:auto;width:min(78vw,350px)}
 .panel{border:1px solid var(--line);border-left:0;border-right:0;border-radius:18px 18px 0 0;padding:20px 20px 156px;min-height:330px}.editor-heading{margin-bottom:14px}.editor-heading h2{font-size:27px}.desk-kicker{font-size:9px}.tool-tabs{margin-bottom:18px}.tool-tabs button{min-height:56px}
 .actionbar{width:100%;right:0;padding:10px 20px max(12px,env(safe-area-inset-bottom));background:#faf6e9}.actionbar .sum{font-size:13px;min-height:20px}.actionbar>.btn{min-height:48px}.actionbar .sum .btn{min-height:44px}
 .panel:has(textarea:focus) .fine-tune{margin-bottom:30px}.field input,.captx{font-size:18px}
 .cardfaces{gap:12px}.cardfaces .faceflip{display:flex}.faceflip button{min-height:44px;padding:8px 24px;font-size:12px}.cardfaces.face-back .backcard{width:min(360px,86vw)}
 .preview-heading{font-size:21px}.postcard-preview{padding:16px}.clean-card .frame.portrait{height:min(58svh,490px);width:auto}.clean-card .frame.landscape{width:76vw;height:auto}.clean-card .backcard{width:76vw}
 .work.prephoto .stage{padding:30px 22px 42px}.work.prephoto .intro{display:block;margin:0 0 22px}.intro h1{font-size:36px}.intro p{font-size:17px;line-height:1.45}.work.prephoto .frame.portrait{width:220px;height:auto}.herocta{margin:24px 0 0;order:3}.herocta a{width:100%;font-size:11px}.herocta .htxt{font-size:15px}.celbanner{padding:14px 20px}.celbanner .occ{font-size:20px}.celbanner .when{font-size:11px;line-height:1.5}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
/* Match the printer's clear top band and fixed lower-right mailing zone. */
.backcard .bad{left:64%;right:4%;top:5%;align-items:flex-end;gap:2cqw}
.backcard .bad .bwm{font-size:4.2cqw;white-space:nowrap}.backcard .bad .bcap{font-size:1.65cqw;letter-spacing:0;text-align:right}
.backcard .bqr{left:47%;right:auto;top:5.5%;width:12%}.backcard .bqr svg,.backcard .bqr img{width:100%;height:auto}
.backcard .baddr{left:43%;right:2%;top:39%;bottom:14%;padding:1.5cqw;box-shadow:none}.backcard .baddr .bret{font-size:1.1cqw}.backcard .baddr .bpostage{right:1.5cqw;top:1.5cqw;width:8cqw;height:5cqw;font-size:1cqw}.backcard .baddr .bto{font-size:1.75cqw;margin-top:2cqw}.backcard .baddr .bbar{height:2cqw;margin-top:1cqw}
@media(max-width:880px){.stage.filled{position:sticky;top:0;z-index:6;border-bottom:1px solid var(--line)}.stage-design .frame.portrait{height:min(28svh,245px)}.stage-design .frame.landscape{width:min(72vw,350px)}.stage-address,.stage-review{position:relative!important}.work.prephoto .stage{position:relative}}