@font-face{font-family:Caveat;src:url(assets/caveat.ttf) format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/instrument-serif.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url(assets/plus-jakarta-sans.ttf) format('truetype');font-weight:200 800;font-display:swap}
:root{color-scheme:light;--burgundy:#540c18;--cream:#f0e7d6;--ink:#382920;--red:#850e21;--muted:#69564a;--line:#d8ccba;--serif:'Instrument Serif',Georgia,serif;--sans:'Plus Jakarta Sans',system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:radial-gradient(ellipse at 48% 4%,#751c2a 0%,var(--burgundy) 47%,#350911 100%);color:#f7ead6;font:1rem/1.55 var(--sans);min-height:100vh}
.page{width:min(100% - 32px,710px);margin-inline:auto;padding-block:16px 0}
.masthead{display:grid;justify-items:center;gap:18px;text-align:center}
.campaign-art{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:clamp(132px,33vw,212px);overflow:hidden;border:1px solid #b8915dbf;border-radius:10px;background:linear-gradient(90deg,#11282177,#33372311 45%,#171b1070),url(assets/campaign-landscape.webp) center 58%/cover;box-shadow:0 12px 28px #29061070}
.campaign-art::after{content:"";position:absolute;inset:5px;border:1px solid #f4d99a44;border-radius:6px;pointer-events:none}
.campaign-art img{position:absolute;height:auto;pointer-events:none}
.campaign-lace{width:43%;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);opacity:.74;filter:drop-shadow(0 3px 8px #1b190b80)}
.campaign-title{width:62%;max-width:350px;filter:drop-shadow(0 6px 9px #1d140bbf)}
.campaign-stamp,.campaign-seal,.campaign-stars{filter:drop-shadow(0 4px 5px #21160b88)}
.campaign-stamp{width:14%;max-width:83px;right:6%;bottom:12%;transform:rotate(13deg)}
.campaign-seal{width:13%;max-width:77px;left:8%;bottom:10%;transform:rotate(-15deg)}
.campaign-stars{width:17%;max-width:105px;left:4%;top:-3%;transform:rotate(-13deg)}
.brand{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;margin:0 0 6px;color:#f1d5b1;font-size:.72rem;font-weight:700;letter-spacing:.085em;text-transform:uppercase}
h1{font:400 clamp(2.5rem,7vw,4rem)/1.02 var(--serif);text-wrap:balance;margin:0;color:#fff1d9}
h1:focus-visible{outline:2px solid #e6b878;outline-offset:5px;border-radius:2px}
.intro{color:#f1daca;margin:.65rem 0 0;max-width:46ch;font-size:.9375rem}
.start-link{display:inline-flex;align-items:center;gap:.7em;min-height:44px;margin-top:6px;color:#ffe2a8;font-size:.875rem;font-weight:750;text-underline-offset:4px}
.start-link span{font-size:1.125em}
.showing-result .start-link{display:none}
.postcard{margin:22px 0 21px}
canvas{display:block;width:100%;height:auto;aspect-ratio:1748/1240;border-radius:7px;background:#e9dfcb;box-shadow:0 12px 30px #2200085c}
.postcard-mat{padding:clamp(6px,1.5vw,11px);border-radius:9px;border:1px solid #b78d53;background:linear-gradient(#53362032,#553c263b),url(assets/campaign-paper.webp) center/400px auto;box-shadow:0 14px 32px #24010b66}
#card{border:1px solid #d3b788}
figcaption{font-size:.8125rem;color:#edcbbf;margin:.65rem 0 0}
.preview-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px}
.preview-caption span{flex:1 1 175px}
.preview-button{min-height:44px;padding:0 2px;color:#fff0d8;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font:700 .8125rem/1.4 var(--sans);cursor:pointer}
.panel{padding:clamp(18px,4vw,30px);background:linear-gradient(135deg,#fff5e2f0,#f4ead9f5 68%),url(assets/campaign-paper.webp) center top/400px auto; color:var(--ink);border:1px solid #d8c9af;border-top:3px solid #b58954;border-radius:10px;box-shadow:0 12px 32px #2c010a55}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid #cfbda8}
.panel-heading img{width:48px;height:48px;transform:rotate(8deg)}
.panel-title{font:400 clamp(1.875rem,5vw,2.5rem)/1.1 var(--serif);color:#631829;margin:0;scroll-margin-top:18px}
.field{margin-bottom:19px}
.field>label:first-child{display:block;font-size:1rem;font-weight:750;line-height:1.35;color:#761325}
.field p{font-size:.875rem;color:var(--muted);margin:.2rem 0 .45rem}
textarea,input[type=text]{display:block;width:100%;border:1px solid #9d8171;border-radius:6px;background:#fbf7ef;color:#2f2821;font:inherit;padding:10px 13px}
textarea{min-height:113px;resize:vertical}
textarea::placeholder,input::placeholder{color:#6d6054;opacity:1}
.counter{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.8125rem;margin-top:.3rem;font-variant-numeric:tabular-nums}
#word-count{font-weight:700}
.field .field-error{color:#791326;font-weight:650;margin:.45rem 0 0}
.field-error:empty{display:none}
[aria-invalid=true]{border-color:#92162c!important}
.file-input[aria-invalid=true]+.upload{border-color:#92162c}
.file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.upload{display:flex;align-items:center;gap:12px;padding:10px;min-height:89px;border:1px dashed #aa8d77;border-radius:6px;background:#fbf7ef;cursor:pointer;overflow-wrap:anywhere}
.upload:hover,.upload.dragover{border-color:var(--red);background:#fff3e5}
.upload strong,.upload small{display:block}
.upload strong{font-size:.9375rem;font-weight:700}
.upload small{color:var(--muted);font-size:.8125rem;margin-top:3px}
.photo-thumb{flex:none;width:53px;aspect-ratio:3/4;border:2px solid var(--red);border-radius:5px;background:#f0e4cb url(assets/campaign-seal.webp) center/82% auto no-repeat;overflow:hidden}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
details{margin-top:8px;font-size:.83rem}
summary{cursor:pointer;color:#671a29;width:fit-content;padding:11px 0;font-weight:650}
.sliders{display:grid;gap:5px;margin-top:6px}
.crop-controls{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;gap:12px;padding:9px;background:#f7eddc;border:1px solid #d9c6af;border-radius:7px}
#crop-preview{aspect-ratio:593/943;box-shadow:none;border:2px solid var(--red);border-radius:5px;background:#282628}
.sliders label{display:grid;grid-template-columns:minmax(75px,1fr) minmax(52px,1fr);align-items:center;gap:8px}
.sliders input{min-width:0;width:100%;min-height:32px;accent-color:var(--red)}
#reset-crop{justify-self:start;padding-inline:0;font-size:.82rem}
.primary{display:block;width:100%;min-height:47px;border-radius:999px;padding:12px 15px;text-align:center;font:750 1rem/1.35 var(--sans);text-decoration:none;cursor:pointer}
.primary{color:#fff7eb;background:var(--red);border:1px solid #780d20;box-shadow:0 5px 12px #57142231}
.primary:hover{background:#710a1a}
.primary.secondary{background:#fff6e8;color:#71162b;border-color:#a7706f;box-shadow:none}
.primary.secondary:hover{background:#f3dfd1}
button:disabled{cursor:default;opacity:.66}
.feedback,.review-note{font-size:.8rem;margin:.55rem 0 0;color:#694335}
.feedback:empty{display:none}
.review-note{text-align:center;color:var(--muted)}
.review-note::after{content:"";display:block;height:20px;margin:12px -7px -5px;background:url(assets/campaign-ribbon.webp) center/auto 32px no-repeat;opacity:.82}
.result{display:grid;gap:14px}
.download-row{display:grid;gap:12px}
.result h2,.dialog-header h2{font:400 clamp(1.625rem,4.5vw,2rem)/1.1 var(--serif);margin:0}
.result p{color:var(--muted);font-size:.875rem;margin:3px 0 0}
.video-status{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:6px 12px;padding-top:16px;border-top:1px solid #cfbda8}
.video-art{aspect-ratio:1;display:grid;place-items:center;background:#e9d9be;border:1px solid #dac4a7;border-radius:5px}
.video-art img{width:75%;height:auto;transform:rotate(-9deg)}
.video-status .primary,.video-status .video-feedback{grid-column:1/-1}
.video-status .text-button{grid-column:2;justify-self:start;padding-left:0}
.result .video-feedback{min-height:1.55em;margin:0}
.text-button{justify-self:center;background:none;border:0;color:#671a29;text-decoration:underline;text-underline-offset:3px;font:650 .875rem/1.4 var(--sans);cursor:pointer;padding:8px;min-height:44px}
.editor-preview{display:block;margin-inline:auto}
.showing-result .campaign-art{display:none}
dialog{width:min(100% - 24px,860px);max-height:calc(100% - 24px);padding:16px;border:1px solid #d8c9af;border-radius:10px;background:var(--cream);color:var(--ink)}
dialog::backdrop{background:#2c070ee8}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.preview-scroll{overflow:auto;overscroll-behavior:contain;border-radius:6px;background:#e9dfcb}
#large-card{width:100%;border-radius:0;box-shadow:none}
.preview-scroll.is-zoomed #large-card{min-width:660px}
.preview-tools{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.preview-tools .text-button{padding-left:0}
.zoom-hint{font-size:.8rem;margin:10px 0;color:var(--muted)}
.transcript{border-top:1px solid #cfbda8;margin-top:12px;overflow-wrap:anywhere;white-space:pre-wrap;font-size:1rem;line-height:1.6}
.transcript p{margin:8px 0}
.transcript p:empty{display:none}
#motion-dialog{width:min(100% - 24px,410px)}
.motion-stage{width:min(100%,37svh);margin-inline:auto;aspect-ratio:9/16;border-radius:7px;background:#2b2420;box-shadow:none}
.motion-controls{display:flex;justify-content:space-between;align-items:center;gap:8px}
.motion-note{font-size:.8125rem;color:var(--muted);margin:10px 0}
textarea:focus,input[type=text]:focus{outline:2px solid #92162c;outline-offset:1px}
:focus-visible,.file-input:focus-visible+.upload{outline:2px solid #b47c40;outline-offset:3px}
footer{text-align:center;font-size:.75rem;padding:23px 0;color:#e8c8b7}
.no-script{max-width:660px;margin:auto;padding:16px;color:white}
@media(min-width:700px){
  .page{padding-top:28px}
  .masthead{grid-template-columns:1fr 1fr;gap:24px;align-items:center;text-align:left}
  .masthead-copy{justify-self:stretch}
  .brand{justify-content:flex-start}
  .campaign-art{height:190px}
  .masthead h1{font-size:clamp(2.875rem,4.5vw,3.65rem)}
  .showing-result .masthead{grid-template-columns:1fr;justify-items:center;text-align:center}
  .showing-result .masthead-copy{justify-self:center}
  .showing-result .brand{justify-content:center}
  .showing-result .intro{margin-inline:auto}
  .postcard{margin-top:24px}
  .download-row{grid-template-columns:1fr minmax(200px,auto);align-items:center}
  .video-status{grid-template-columns:52px minmax(0,1fr) minmax(200px,auto)}
  .video-status .primary{grid-column:3;grid-row:1}
  .video-status .video-feedback{grid-column:2/-1}
}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .result:not([hidden]),dialog[open]{animation:reveal .2s ease-out both}
  .primary,.upload{transition:background-color .16s ease,border-color .16s ease}
  .campaign-title{animation:art-reveal .55s ease-out both}
  .campaign-seal,.campaign-stamp,.campaign-stars{animation:paper-entry .48s ease-out .16s both}
  .campaign-stamp{animation-delay:.25s}
  .campaign-stars{animation-delay:.1s}
  @keyframes reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
  @keyframes art-reveal{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes paper-entry{from{opacity:0;translate:0 10px;scale:.88}to{opacity:1;translate:0 0;scale:1}}
}