/* PICK & POST PRO shared theme v3 (LOCKED VISUAL BASELINE 2026-10-10; Cinzel display approved by Dylan 10:04 AM).
   Display (headings, buttons, names): Cinzel 600-900. Body: EB Garamond. All fonts self-hosted woff2 (OFL). See DESIGN-SYSTEM.md. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/cinzel-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/cinzel-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/cinzel-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-italic.woff2) format('woff2')}  /* swipe hint (Dylan 11:01 AM) */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/eb-garamond-latin-600-normal.woff2) format('woff2')}
:root{
  --cream:#FAF5EA; --ivory:#FFFDF8;
  --crimson:#8F1127; --crimson-light:#A3192F; --crimson-dark:#740B1D; --crimson-brown:#7A2A1E;
  --gold:#B8913A; --gold-light:#E3C36E; --gold-dark:#8C6A22; --gold-soft:#D9C38E;
  --ink:#1F1B16; --text:#302B25; --muted:#5E554B; --white:#FFFFFF;
  --display:'Cinzel',Georgia,'Times New Roman',serif;
  --body:'EB Garamond',Georgia,'Times New Roman',serif;
  --radius-card:14px; --radius-btn:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:520px;padding:12px 12px 16px;background:var(--cream);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.3;overflow-x:hidden}
img{display:block;max-width:100%}
p{margin:0}
/* display type (Cinzel is capitals-only: mixed case gives large + small capitals) */
.disp{font-family:var(--display);font-weight:700;letter-spacing:.02em}
.wordmark{font-family:var(--display);font-weight:900;color:var(--ink);letter-spacing:-.025em;line-height:1;white-space:nowrap}
.name{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:.01em;line-height:1.05;white-space:nowrap}
.crimson{color:var(--crimson)} .gold{color:var(--gold)}
/* ornaments */
.fleur{display:inline-block;width:18px;height:18px;vertical-align:middle;flex:0 0 auto}
.rule{display:flex;align-items:center;gap:6px;margin:4px auto;max-width:250px}
.rule::before,.rule::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold) 75%,transparent)}
.flourish{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.flourish .fa{width:34px;height:10px;stroke:var(--gold);fill:var(--gold);stroke-width:1.2;flex:0 0 auto}
/* buttons: crimson #8F1127 with a subtle bevel, pure white Cinzel bold, gold border */
.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 14px;border:1.5px solid var(--gold);border-radius:var(--radius-btn);
  background-color:var(--crimson);background-image:linear-gradient(180deg,var(--crimson-light) 0%,var(--crimson) 45%,var(--crimson) 60%,var(--crimson-dark) 100%);
  color:var(--white);font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.02em;line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 2px var(--cream),0 0 0 3px rgba(184,145,58,.6),0 3px 7px rgba(48,43,37,.25);-webkit-tap-highlight-color:transparent}
.btn:active{background-image:none;background-color:var(--crimson-dark)}
.btn.small{font-size:18px;padding:11px 14px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.2),0 2px 4px rgba(48,43,37,.2)}
.btn.off{background-image:none;background-color:#9c8f86;border-color:#c8bba8;pointer-events:none}
.btn .arrow{width:22px;height:16px;stroke:var(--white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
/* round gold-outlined arrows */
.round{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gold);background:var(--ivory);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:0 0 auto}
.round svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:2.2}
.round:disabled{opacity:.45}
/* cards */
.card{position:relative;background:var(--ivory);border:1.5px solid var(--gold);border-radius:var(--radius-card);padding:16px 14px 12px;box-shadow:inset 0 0 0 3px var(--ivory),inset 0 0 0 4px rgba(217,195,142,.55)}
.card .topfleur{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--cream);padding:0 6px;line-height:0}
.card .topfleur .fleur{width:22px;height:22px}
/* photo frame: thin gold border, rounded; NEVER put text or overlays on the photo */
.photo-frame{border:1.5px solid var(--gold);border-radius:var(--radius-card);padding:3px;background:var(--ivory);box-shadow:0 2px 8px rgba(48,43,37,.18)}
/* forms */
input.link{width:100%;font-family:var(--body);font-size:16px;color:var(--text);padding:10px 12px;border:1px solid #D2C6AF;border-radius:9px;background:#fff}
input.link::placeholder{color:#6f665b;font-size:14px}  /* field text stays 16px (no iOS zoom); placeholder smaller so the full example URL shows */
input.link:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(184,145,58,.25)}
input.link.bad{border:2px solid var(--crimson)}
.msg{font-size:15px;color:var(--muted);margin:5px 0 0}
.msg:empty{display:none}
.msg.err{color:var(--crimson)}
.note{display:flex;align-items:center;justify-content:center;gap:7px;font-size:14px;color:var(--text);margin:9px 0 0;text-align:center}
.note svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--text);fill:none;stroke-width:2}
.saved{font-size:16px;word-break:break-all;text-align:center}
.saved b{display:block;font-family:var(--display);font-weight:700;color:var(--crimson);margin:0 0 2px}
.linkbtn{background:none;border:0;padding:4px 8px;font-family:var(--body);font-size:15px;color:var(--muted);text-decoration:underline;cursor:pointer}
.hide{display:none!important}