:root {
  --paper: #f3eee5;
  --paper-deep: #e6ddcf;
  --card: #fbf8f2;
  --ink: #24211e;
  --muted: #6d655d;
  --line: #cfc5b8;
  --oxblood: #772d2c;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
button, input, textarea { font: inherit; }
button, input, textarea { border-radius: 0; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--oxblood); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.site-header { min-height: 64px; padding: 17px max(5vw, 1.25rem); border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wordmark { font: 700 .84rem/1 var(--mono); letter-spacing:.1em; color:var(--ink); text-decoration:none; white-space:nowrap; }
.wordmark span { color: var(--oxblood); }
.header-note { margin:0; color:var(--muted); font-size:.78rem; text-align:right; }
.app-shell { width:min(1440px, 100%); margin:0 auto; padding:clamp(2.5rem, 6vw, 6rem) max(5vw, 1.25rem) 4rem; }
.intro { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.eyebrow, .poster-label { margin:0 0 .65rem; color:var(--oxblood); font:500 .7rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
h1, h2, h3, p { overflow-wrap:anywhere; }
h1, h2, h3 { font-family:var(--serif); font-weight:700; line-height:1.04; }
h1 { margin:.1rem 0 1.1rem; font-size:clamp(2.7rem, 5.4vw, 5.5rem); letter-spacing:-.055em; }
.intro > p:last-child { max-width:36rem; margin:0; color:var(--muted); font-size:1.05rem; }
.workspace { display:grid; grid-template-columns:minmax(0, .84fr) minmax(0, 1.16fr); align-items:start; gap:clamp(2rem, 6vw, 6.5rem); }
.editor-panel { min-width:0; padding:0 0 1rem; }
.section-heading, .preview-heading { margin-bottom:1.75rem; }
h2 { margin:0; font-size:clamp(1.85rem, 2.8vw, 2.7rem); letter-spacing:-.04em; }
form { max-width:36rem; }
.field-group, .objectives-fieldset { min-width:0; margin:0 0 1.35rem; padding:0; border:0; }
label, legend { display:block; margin-bottom:.47rem; font-size:.87rem; font-weight:700; }
.optional { color:var(--muted); font-weight:400; font-size:.78rem; }
input, textarea { display:block; width:100%; min-width:0; min-height:44px; border:1px solid var(--line); padding:.7rem .8rem; color:var(--ink); background:rgba(255,255,255,.45); box-shadow:none; }
textarea { resize:vertical; min-height:84px; }
input::placeholder, textarea::placeholder { color:#999087; opacity:1; }
input:focus, textarea:focus { border-color:var(--oxblood); outline:none; box-shadow:0 0 0 2px rgba(119,45,44,.15); }
.field-hint { margin:-.1rem 0 .7rem; color:var(--muted); font-size:.8rem; }
.objectives-inputs { display:grid; gap:.55rem; }
.field-error { min-height:1.15rem; margin:.3rem 0 0; color:#9b1e1b; font-size:.8rem; }
.input-invalid { border-color:#9b1e1b; }
.form-status { min-height:0; color:#9b1e1b; font-weight:700; font-size:.9rem; }
.form-status:not(:empty) { margin-bottom:1rem; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding-top:.2rem; }
.button { min-height:44px; border:1px solid transparent; padding:.65rem .9rem; background:transparent; color:var(--ink); font-weight:700; font-size:.84rem; letter-spacing:.01em; }
.button-primary { background:var(--ink); color:var(--paper); padding-inline:1.15rem; }
.button-primary:hover, .button-primary:focus-visible { background:var(--oxblood); }
.button-text { color:var(--muted); text-decoration:underline; text-underline-offset:.2em; }
.button-text:hover { color:var(--ink); }

.preview-panel { min-width:0; }
.preview-heading { display:flex; min-width:0; align-items:end; justify-content:space-between; gap:1rem; }
.button-export { flex:0 0 auto; border-color:var(--ink); background:var(--card); }
.button-export:hover:not(:disabled) { color:var(--card); background:var(--oxblood); border-color:var(--oxblood); }
.button:disabled { cursor:wait; opacity:.65; }
.export-status { min-height:1.25rem; margin:-1.25rem 0 .5rem; color:var(--muted); font-size:.82rem; text-align:right; }
.poster-frame { width:min(100%, 43rem); margin:0 auto; padding:clamp(.45rem, 1.4vw, 1rem); background:var(--paper-deep); }
#poster { width:100%; min-height:clamp(630px, 70vw, 980px); display:flex; flex-direction:column; padding:clamp(1.5rem, 5.1vw, 4rem); color:var(--ink); background:var(--card); box-shadow:0 10px 25px rgba(55,40,27,.13); }
.poster-rule { height:7px; margin-bottom:clamp(1.7rem, 4vw, 3.25rem); background:var(--oxblood); }
.poster-header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); padding-bottom:.75rem; }
.poster-kicker, .poster-year { margin:0; font:500 clamp(.55rem, 1.2vw, .7rem)/1.3 var(--mono); letter-spacing:.09em; }
.poster-year { color:var(--muted); text-align:right; }
.poster-main { flex:1 1 auto; padding-top:clamp(2rem, 5vw, 4rem); }
#poster-title { max-width:10ch; margin:0 0 clamp(2rem, 4vw, 3.4rem); font-size:clamp(2.7rem, 6.2vw, 5.3rem); letter-spacing:-.065em; }
.date-block { padding:.85rem 0 1.1rem; border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.poster-date { margin:0; font-family:var(--serif); font-size:clamp(1.25rem, 2.8vw, 2rem); font-weight:700; letter-spacing:-.035em; }
.poster-countdown { margin:.28rem 0 0; color:var(--oxblood); font:500 .72rem/1.4 var(--mono); letter-spacing:.045em; text-transform:uppercase; }
.poster-optional { margin-top:clamp(1.35rem, 2.8vw, 2.25rem); }
.poster-why p:last-child { max-width:34ch; margin:0; font:italic 600 clamp(1rem, 2vw, 1.35rem)/1.35 var(--serif); }
.poster-objectives ol { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; counter-reset:objective; }
.poster-objectives li { display:flex; gap:.75rem; padding-top:.45rem; border-top:1px solid var(--line); font-size:clamp(.83rem, 1.5vw, 1rem); }
.poster-objectives li::before { content:"0" counter(objective); counter-increment:objective; flex:0 0 auto; color:var(--oxblood); font:500 .68rem/1.6 var(--mono); }
.poster-footer { padding-top:1.2rem; border-top:1px solid var(--ink); }
.poster-identity { margin-top:0; }
.poster-identity p:last-child { margin:0; font:italic 600 clamp(1.1rem, 2.5vw, 1.65rem)/1.28 var(--serif); }
.poster-note { margin:1rem 0 0; padding-left:1rem; border-left:3px solid var(--oxblood); color:var(--muted); font-size:.82rem; }
.poster-note p { margin:0; }
.poster-mark { margin:clamp(1.5rem, 4vw, 3rem) 0 0; color:var(--muted); font:500 .58rem/1.4 var(--mono); letter-spacing:.08em; }
.poster-mark span { color:var(--oxblood); }
.site-footer { padding:1.5rem max(5vw, 1.25rem); border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; text-align:center; }

@media (max-width: 760px) {
  .site-header { min-height:58px; }
  .header-note { display:none; }
  .app-shell { padding-top:2.7rem; }
  .workspace { grid-template-columns:minmax(0, 1fr); gap:3rem; }
  .preview-heading { align-items:flex-start; flex-direction:column; }
  .export-status { margin:-1.25rem 0 .5rem; text-align:left; }
  .button-export { width:100%; }
  #poster { min-height:0; }
}
@media (max-width: 390px) {
  .form-actions { align-items:stretch; }
  .button-primary { width:100%; }
  .button-text { flex:1 1 auto; }
  #poster { padding:1.35rem; }
  .poster-kicker { max-width:60%; }
}
@media print { .site-header, .intro, .editor-panel, .preview-heading, .export-status, .site-footer { display:none !important; } body, .app-shell, .workspace, .preview-panel, .poster-frame { margin:0; padding:0; background:#fff; } .workspace { display:block; } .poster-frame { width:100%; } #poster { box-shadow:none; } }