:root {
  --paper: #f5efe6;
  --panel: #fbf8f2;
  --ink: #241f1c;
  --muted: #7a716a;
  --line: rgba(36,31,28,.14);
  --accent: #6e2636;
  --accent-soft: #d8b4ac;
  --preview-bg: #f4eadf;
  --preview-card: #fffaf2;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.builder-header { height: 72px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 26px; border-bottom: 1px solid var(--line); background: rgba(245,239,230,.94); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; justify-self: start; }
.brand-mark { width: 27px; height: 27px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.save-state { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.save-state i { width: 6px; height: 6px; border-radius: 50%; background: #688167; }
.save-state.saving i { background: #bb885f; animation: pulse 1s infinite; }
.header-actions { display: flex; justify-self: end; align-items: center; gap: 16px; }
.plain-button { border: 0; background: none; font-size: 11px; color: var(--muted); }
.preview-button { border: 0; padding: 11px 16px; background: var(--ink); color: white; font-size: 11px; font-weight: 600; }
.preview-button span { margin-left: 13px; }

.builder-layout { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 220px minmax(420px, 610px) minmax(410px, 1fr); }
.builder-sidebar { border-right: 1px solid var(--line); padding: 35px 22px; position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; background: var(--paper); }
.progress-head { display: flex; justify-content: space-between; align-items: end; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 8px; color: var(--accent); font-weight: 600; margin: 0 0 9px; }
.progress-head h1 { font-family: "Gloock", serif; font-size: 23px; line-height: 1.08; font-weight: 400; letter-spacing: -.03em; margin: 0; }
.progress-head > span { color: var(--accent); font-size: 10px; }
.progress-track { height: 2px; background: #ddd2c6; margin: 19px 0 25px; }
.progress-track span { display: block; width: 20%; height: 100%; background: var(--accent); transition: width .35s; }
.step-nav { display: grid; }
.step-tab { border: 0; border-bottom: 1px solid var(--line); background: none; display: grid; grid-template-columns: 31px 1fr auto; padding: 15px 2px; align-items: center; text-align: left; color: #958b83; }
.step-tab > span { font-size: 8px; }
.step-tab b { font-size: 11px; font-weight: 500; }
.step-tab i { width: 15px; height: 15px; display: none; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-style: normal; font-size: 8px; }
.step-tab.complete i { display: grid; }
.step-tab.active { color: var(--ink); }
.step-tab.active b { font-weight: 600; }
.step-tab.active > span { color: var(--accent); }
.builder-tip { margin-top: auto; display: flex; gap: 12px; padding: 15px; background: #ece1d5; }
.builder-tip > span { color: var(--accent); font-family: serif; font-size: 20px; }
.builder-tip p { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 0; }
.builder-tip b { color: var(--ink); display: block; margin-bottom: 3px; }

.editor-panel { background: var(--panel); border-right: 1px solid var(--line); min-height: calc(100vh - 72px); }
#page-builder { min-height: 100%; display: flex; flex-direction: column; }
.editor-step { display: none; padding: 55px clamp(35px,4vw,65px) 30px; animation: stepIn .35s ease; }
.editor-step.active { display: block; }
.step-heading { margin-bottom: 37px; }
.step-heading h2 { font-family: "Gloock", serif; font-size: clamp(32px,3vw,43px); font-weight: 400; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 13px; }
.step-heading > p:last-child { color: var(--muted); font-size: 11px; line-height: 1.55; max-width: 440px; }
.field { display: block; margin: 0 0 24px; }
.field > span { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .12em; font-size: 8px; font-weight: 600; margin-bottom: 9px; }
.field > span small, .field > span em { color: #9f958d; font-size: 8px; letter-spacing: 0; text-transform: none; font-style: normal; font-weight: 400; }
.field input, .field textarea, .field select { display: block; width: 100%; border: 1px solid var(--line); border-radius: 0; background: #fffdf9; padding: 13px 14px; outline: none; font-size: 12px; transition: border .2s, box-shadow .2s; resize: vertical; }
.field textarea { line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: #aaa19a; }
.field-grid { display: grid; gap: 15px; }
.two-columns { grid-template-columns: 1fr 1fr; }
.icon-input { position: relative; }
.icon-input > span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--accent); }
.icon-input input { padding-left: 39px; }
.editor-actions { margin-top: auto; position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(35px,4vw,65px); border-top: 1px solid var(--line); background: rgba(251,248,242,.95); backdrop-filter: blur(8px); z-index: 5; }
.back-button { border: 0; background: none; font-size: 11px; color: var(--muted); visibility: hidden; }
.next-button { border: 0; background: var(--accent); color: #fff; padding: 13px 18px; font-size: 11px; font-weight: 600; transition: transform .2s; }
.next-button:hover { transform: translateY(-1px); }
.next-button span { margin-left: 16px; }

.upload-zone { min-height: 185px; border: 1px dashed #b7aaa0; background: #f7f1e9; display: grid; place-items: center; align-content: center; text-align: center; cursor: pointer; transition: .2s; }
.upload-zone.dragging, .upload-zone:hover { background: #f0e2d8; border-color: var(--accent); }
.upload-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); border-radius: 50%; margin-bottom: 11px; font-size: 19px; }
.upload-zone strong { font-family: "Gloock", serif; font-weight: 400; font-size: 18px; }
.upload-zone p { color: var(--muted); font-size: 8px; }
.photo-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 17px; }
.photo-item { position: relative; aspect-ratio: 1; background: #eee; overflow: hidden; cursor: grab; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item:first-child::after { content: "COVER"; position: absolute; left: 6px; bottom: 6px; background: var(--accent); color: white; font-size: 6px; letter-spacing: .12em; padding: 4px 6px; }
.photo-remove { position: absolute; top: 5px; right: 5px; width: 23px; height: 23px; border: 0; border-radius: 50%; background: rgba(30,25,23,.78); color: white; line-height: 1; }
.photo-grip { position: absolute; left: 6px; top: 6px; color: white; text-shadow: 0 1px 4px black; font-size: 11px; }
.empty-photos { color: var(--muted); text-align: center; margin: 28px 0; }
.empty-photos div { display: flex; justify-content: center; }
.empty-photos div span { width: 40px; height: 40px; border: 1px solid #d2c6ba; display: grid; place-items: center; background: #eee5da; margin-left: -6px; color: #b4a79d; font-family: "Gloock", serif; }
.empty-photos p { max-width: 300px; margin: 12px auto; font-size: 9px; line-height: 1.5; }

fieldset { border: 0; padding: 0; margin: 0 0 32px; }
legend { text-transform: uppercase; font-size: 8px; font-weight: 600; letter-spacing: .13em; margin-bottom: 12px; }
.theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-picker legend { grid-column: 1 / -1; }
.theme-option { position: relative; border: 1px solid var(--line); background: #fffdf9; padding: 16px; display: grid; grid-template-columns: 50px 1fr; align-items: center; cursor: pointer; }
.theme-option.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-option input { position: absolute; opacity: 0; }
.theme-option b { font-family: "Gloock", serif; font-weight: 400; font-size: 13px; }
.theme-option small { grid-column: 2; color: var(--muted); font-size: 7px; margin-top: -9px; }
.theme-option em { display: none; position: absolute; right: 8px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: white; place-items: center; font-size: 8px; font-style: normal; }
.theme-option.selected em { display: grid; }
.swatches { grid-row: 1 / 3; display: flex; }
.swatches i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid white; margin-left: -8px; }
.swatches i:first-child { margin-left: 0; }
[data-theme="wine"] .swatches i:nth-child(1) { background:#6e2636; } [data-theme="wine"] .swatches i:nth-child(2) { background:#d8b4ac; } [data-theme="wine"] .swatches i:nth-child(3) { background:#f5efe6; }
[data-theme="sage"] .swatches i:nth-child(1) { background:#40594a; } [data-theme="sage"] .swatches i:nth-child(2) { background:#aab7a1; } [data-theme="sage"] .swatches i:nth-child(3) { background:#f1efe4; }
[data-theme="blue"] .swatches i:nth-child(1) { background:#203653; } [data-theme="blue"] .swatches i:nth-child(2) { background:#8fa9c0; } [data-theme="blue"] .swatches i:nth-child(3) { background:#edf0f2; }
[data-theme="peach"] .swatches i:nth-child(1) { background:#b44f3d; } [data-theme="peach"] .swatches i:nth-child(2) { background:#efaa75; } [data-theme="peach"] .swatches i:nth-child(3) { background:#fff0dc; }
.detail-picker { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.detail-picker legend { grid-column: 1 / -1; }
.detail-picker label { border: 1px solid var(--line); padding: 14px 5px; text-align: center; cursor: pointer; background: #fffdf9; }
.detail-picker label:has(input:checked) { border-color: var(--accent); }
.detail-picker input { position: absolute; opacity: 0; }
.detail-picker span { display: block; color: var(--accent); font-family: "Gloock", serif; font-size: 23px; height: 31px; }
.detail-picker b { font-size: 7px; font-weight: 500; }

.question-presets { margin-bottom: 24px; }
.question-presets > p { text-transform: uppercase; letter-spacing: .12em; font-size: 8px; font-weight: 600; }
.question-presets > div { display: flex; flex-wrap: wrap; gap: 7px; }
.question-presets button { border: 1px solid var(--line); background: #fffdf9; padding: 8px 11px; font-size: 9px; }
.question-presets button:hover { color: var(--accent); border-color: var(--accent); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); cursor: pointer; }
.toggle-row > span b { display: block; font-size: 11px; }
.toggle-row > span small { display: block; color: var(--muted); font-size: 8px; margin-top: 3px; }
.toggle-row input { position: absolute; opacity: 0; }
.toggle-row i { position: relative; width: 35px; height: 19px; border-radius: 20px; background: #c9c0b8; transition: .2s; flex: 0 0 auto; }
.toggle-row i::after { content:""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; border-radius: 50%; background: white; transition: .2s; }
.toggle-row input:checked + i { background: var(--accent); }
.toggle-row input:checked + i::after { transform: translateX(16px); }
.privacy-box { display: flex; gap: 17px; align-items: center; padding: 19px; background: #eee4d8; margin-bottom: 28px; }
.privacy-lock { position: relative; flex: 0 0 auto; width: 39px; height: 39px; border-radius: 50%; background: var(--accent); color: white; display: grid; place-items: center; font-size: 9px; }
.privacy-lock i { position: absolute; width: 5px; height: 12px; background: white; top: 20px; }
.privacy-box strong { font-family: "Gloock", serif; font-weight: 400; font-size: 15px; }
.privacy-box p { color: var(--muted); font-size: 8px; margin: 4px 0 0; }
.password-wrap { display: flex; }
.password-wrap input { border-right: 0; }
.password-wrap button { border: 1px solid var(--line); border-left: 0; background: #fffdf9; padding: 0 14px; font-size: 9px; color: var(--accent); }
.password-field > small { display: block; color: var(--muted); font-size: 8px; margin-top: 7px; }

.preview-panel { position: sticky; top: 72px; height: calc(100vh - 72px); background: #e8ded2; overflow: hidden; display: flex; flex-direction: column; }
.preview-toolbar { height: 57px; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.preview-toolbar p { font-size: 9px; text-transform: uppercase; letter-spacing: .13em; display: flex; align-items: center; gap: 8px; }
.preview-toolbar p span { width: 6px; height: 6px; background: #6f876b; border-radius: 50%; }
.device-switcher { border: 1px solid var(--line); display: flex; }
.device-switcher button { border: 0; background: none; width: 30px; height: 26px; font-size: 15px; color: #9e938a; }
.device-switcher button.active { background: #fffaf3; color: var(--ink); }
.preview-canvas { flex: 1; display: grid; place-items: center; padding: 28px; overflow: auto; background: var(--preview-bg); transition: background .35s; }
.page-preview { background: var(--preview-card); box-shadow: 0 22px 55px rgba(57,42,31,.18); transition: width .35s, background .35s; }
.page-preview.mobile { width: 310px; min-height: 540px; }
.page-preview.desktop { width: min(550px, 100%); min-height: 440px; }
.preview-browser { height: 24px; border-bottom: 1px solid rgba(0,0,0,.1); display: flex; align-items: center; gap: 3px; padding: 0 8px; color: #9a918b; font-size: 6px; }
.preview-browser i { width: 3px; height: 3px; background: #aaa; border-radius: 50%; }
.preview-browser span { margin: auto; }
.preview-browser b { color: var(--accent); }
.preview-content { position: relative; padding: 33px 31px; text-align: center; overflow: hidden; }
.preview-decoration { position: absolute; color: var(--accent); font-family: "Gloock", serif; font-size: 24px; }
.top-decoration { top: 15px; right: 20px; transform: rotate(9deg); }
.preview-kicker { color: var(--accent); font-size: 6px; font-weight: 600; letter-spacing: .2em; margin: 0 0 6px; }
.preview-content > h3 { font-family: "Gloock", serif; font-weight: 400; font-size: 29px; margin: 0 0 24px; letter-spacing: -.03em; }
.preview-photos { position: relative; width: 185px; height: 135px; margin: 0 auto 27px; }
.placeholder-photo, .preview-photo { position: absolute; width: 117px; height: 126px; background: #e5d7c8; border: 6px solid #fff; border-bottom-width: 16px; box-shadow: 0 5px 12px rgba(40,25,20,.13); display: grid; place-items: center; color: var(--accent); overflow: hidden; }
.placeholder-photo:first-child, .preview-photo:first-child { left: 5px; transform: rotate(-8deg); }
.placeholder-photo.second, .preview-photo:nth-child(2) { right: 3px; transform: rotate(7deg); background: var(--accent-soft); }
.placeholder-photo span { font-size: 18px; }
.placeholder-photo small { display: block; font-size: 6px; color: var(--muted); margin-top: -32px; }
.preview-photo img { width: 100%; height: 100%; object-fit: cover; }
.preview-content > h4 { font-family: "Gloock", serif; font-weight: 400; font-size: 20px; line-height: 1.15; margin: 0 0 14px; }
.preview-content > p:not(.preview-kicker):not(.preview-signoff) { color: var(--muted); font-family: "Gloock", serif; font-size: 9px; line-height: 1.55; white-space: pre-line; }
.preview-content blockquote { color: var(--accent); border-top: 1px solid color-mix(in srgb,var(--accent) 20%,transparent); border-bottom: 1px solid color-mix(in srgb,var(--accent) 20%,transparent); margin: 21px 0; padding: 12px 5px; font-family: "Gloock", serif; font-style: italic; font-size: 10px; }
.preview-question-block { margin: 28px -31px -33px; padding: 28px 26px 31px; color: white; background: var(--accent); }
.preview-question-block > span { font-size: 5px; letter-spacing: .2em; opacity: .7; }
.preview-question-block h4 { font-family: "Gloock", serif; font-weight: 400; font-size: 21px; margin: 10px 0 17px; }
.preview-question-block div { display: flex; justify-content: center; gap: 7px; }
.preview-question-block button { border: 1px solid rgba(255,255,255,.48); background: transparent; color: white; padding: 7px 10px; font-size: 6px; }
.preview-question-block button:first-child { background: white; color: var(--accent); }
.preview-signoff { color: var(--accent); font-size: 6px; margin: 14px 0 -21px; position: relative; z-index: 2; display: none; }
.page-preview.desktop .preview-content { padding-left: 75px; padding-right: 75px; }
.page-preview.desktop .preview-photos { width: 225px; }
.page-preview.desktop .preview-question-block { margin-left: -75px; margin-right: -75px; }
.preview-note { height: 40px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); font-size: 8px; }
.preview-note span { color: var(--accent); }

.preview-canvas[data-theme="sage"] { --accent:#40594a; --accent-soft:#aab7a1; --preview-bg:#dfe2d6; --preview-card:#f5f3e9; }
.preview-canvas[data-theme="blue"] { --accent:#203653; --accent-soft:#8fa9c0; --preview-bg:#dce3e8; --preview-card:#f5f6f5; }
.preview-canvas[data-theme="peach"] { --accent:#b44f3d; --accent-soft:#efaa75; --preview-bg:#f0d8c3; --preview-card:#fff4e4; }

dialog { width: min(500px,calc(100% - 30px)); border: 0; background: var(--paper); color: var(--ink); padding: 50px; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(28,22,19,.72); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; right: 14px; top: 10px; border: 0; background: none; font-size: 25px; }
.dialog-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); border-radius: 50%; margin: 0 auto 19px; }
dialog h2 { font-family: "Gloock",serif; font-size: 36px; font-weight: 400; margin: 7px 0 13px; letter-spacing: -.03em; }
dialog > p:not(.eyebrow) { color: var(--muted); font-size: 10px; line-height: 1.6; }
.fake-link { display: flex; border: 1px solid var(--line); margin: 24px 0 12px; background: #fffaf3; }
.fake-link[hidden] { display:none; }
.fake-link span { flex: 1; min-width: 0; padding: 13px; font-size: 9px; color: var(--muted); overflow: hidden; }
.fake-link button { border: 0; border-left: 1px solid var(--line); background: none; padding: 0 14px; color: var(--accent); font-size: 9px; }
.publish-confirm { width: 100%; border: 0; background: var(--accent); color: white; padding: 14px; font-size: 10px; font-weight: 600; }
.publish-confirm span { margin-left: 17px; }
dialog small { display: block; color: var(--muted); font-size: 7px; margin-top: 10px; }
.account-button { color:var(--accent); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-dialog { text-align:left; }
.auth-dialog .dialog-icon, .auth-dialog > .eyebrow, .auth-dialog > h2, .auth-dialog > p, .auth-dialog > small { text-align:center; }
.auth-dialog .dialog-icon { margin-left:auto; margin-right:auto; }
.auth-switch { display:grid; grid-template-columns:1fr 1fr; margin:22px 0; border-bottom:1px solid var(--line); }
.auth-switch button { border:0; border-bottom:2px solid transparent; padding:10px; color:var(--muted); background:none; font-size:9px; }
.auth-switch button.active { color:var(--accent); border-color:var(--accent); }
.auth-dialog .field { margin-bottom:14px; }
.auth-error { min-height:17px; margin:0; color:#a12e3f; font-size:9px; }
.projects-dialog { text-align: left; }
.projects-dialog .dialog-icon, .projects-dialog > .eyebrow, .projects-dialog > h2, .projects-dialog > p { text-align: center; }
.projects-dialog .dialog-icon { margin-left: auto; margin-right: auto; }
.projects-list { display: grid; gap: 9px; margin-top: 24px; }
.project-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); background: #fffaf3; }
.project-row b { display: block; font-family: "Gloock", serif; font-size: 13px; font-weight: 400; }
.project-row small { display: block; color: var(--muted); font-size: 8px; margin-top: 4px; }
.project-row button { border: 0; border-bottom: 1px solid #a45b62; background: none; color: #8b3944; font-size: 8px; padding: 4px 0; }
.projects-empty { padding: 18px; border: 1px dashed var(--line); color: var(--muted); font-size: 9px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 25px; transform: translate(-50%,20px); opacity: 0; background: var(--ink); color: white; padding: 12px 18px; font-size: 10px; z-index: 50; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@keyframes stepIn { from { opacity:0; transform:translateY(8px); } }
@keyframes pulse { 50% { opacity:.3; } }
@media (max-width: 1100px) {
  .builder-layout { grid-template-columns: 190px minmax(400px,1fr); }
  .preview-panel { position: fixed; inset: 72px 0 0 auto; width: min(500px,90vw); z-index: 15; transform: translateX(100%); box-shadow: -20px 0 60px rgba(0,0,0,.2); transition: transform .3s; }
  body.preview-open .preview-panel { transform: translateX(0); }
  .preview-button { background: var(--accent); }
}
@media (max-width: 700px) {
  .builder-header { grid-template-columns: 1fr auto; padding: 0 15px; }
  .save-state { display: none; }
  .plain-button { display: none; }
  #projects-button:not([hidden]) { display: inline-block; font-size: 9px; }
  .brand > span:last-child { display: none; }
  .builder-layout { display: block; }
  .builder-sidebar { position: sticky; top: 72px; z-index: 10; width: 100%; height: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .progress-head, .builder-tip { display: none; }
  .progress-track { margin: 0 0 10px; }
  .step-nav { grid-template-columns: repeat(5,1fr); }
  .step-tab { display: flex; justify-content: center; padding: 8px; border: 0; }
  .step-tab b, .step-tab i { display: none !important; }
  .step-tab > span { font-size: 9px; }
  .step-tab.active { background: #eadfd4; }
  .editor-step { padding: 40px 20px 25px; }
  .editor-actions { padding: 14px 20px; }
  .two-columns, .theme-picker { grid-template-columns: 1fr; }
  .theme-picker legend { grid-column: auto; }
  .detail-picker { grid-template-columns: 1fr 1fr; }
  .detail-picker legend { grid-column: 1/-1; }
  .photo-list { grid-template-columns: 1fr 1fr; }
  .preview-panel { top: 72px; width: 100%; }
  dialog { padding: 40px 23px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Modular section builder */
.section-manager { display: grid; gap: 9px; }
.section-control { display: grid; grid-template-columns: 22px 35px 1fr auto; align-items: center; background: #fffdf9; border: 1px solid var(--line); min-height: 60px; transition: opacity .2s, border .2s; }
.section-control:hover { border-color: color-mix(in srgb,var(--accent) 50%,transparent); }
.section-control.is-hidden { opacity: .5; }
.section-grip { color: #b4aaa2; padding-left: 10px; cursor: grab; font-size: 11px; }
.section-icon { width: 28px; height: 28px; display: grid; place-items: center; background: #eee3d8; color: var(--accent); font-family: "Gloock",serif; font-size: 12px; }
.section-info { min-width: 0; padding: 12px 9px; }
.section-info b { display: block; font-family: "Gloock",serif; font-size: 12px; font-weight: 400; }
.section-info small { display: block; color: var(--muted); font-size: 7px; margin-top: 3px; }
.section-actions { display: flex; align-items: center; padding-right: 7px; }
.section-actions button { width: 25px; height: 29px; border: 0; background: none; color: #8f857d; font-size: 10px; }
.section-actions button:hover:not(:disabled) { color: var(--accent); background: #f3eae0; }
.section-actions button:disabled { opacity: .25; cursor: default; }
.visibility-button { color: var(--accent) !important; }
.section-settings { grid-column: 1 / -1; display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px 18px 18px 57px; border-top: 1px solid var(--line); background: #faf5ee; }
.section-control.open .section-settings { display: grid; }
.section-setting-field > span { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 7px; font-weight: 600; margin-bottom: 6px; }
.section-setting-field input, .section-setting-field select, .section-setting-field textarea { width: 100%; border: 1px solid var(--line); background: white; padding: 9px 10px; outline: 0; font-size: 9px; resize: vertical; }
.section-setting-field input:focus, .section-setting-field select:focus, .section-setting-field textarea:focus { border-color: var(--accent); }
.full-setting { grid-column: 1/-1; }
.remove-section { grid-column: 1/-1; justify-self: start; padding: 0; border: 0; border-bottom: 1px solid #a45b62; background: none; color: #8b3944; font-size: 8px; }
.add-section { margin-top: 30px; }
.add-section > p { text-transform: uppercase; letter-spacing: .12em; font-size: 8px; font-weight: 600; }
.add-section > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-section button { min-height: 58px; border: 1px dashed #c6b9af; background: #f8f2ea; display: flex; gap: 10px; align-items: center; padding: 11px; text-align: left; }
.add-section button:hover { border-color: var(--accent); color: var(--accent); }
.add-section button span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: white; color: var(--accent); }
.add-section button b { font-family: "Gloock",serif; font-size: 10px; font-weight: 400; }

.custom-style-controls { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.custom-style-controls legend { grid-column: 1/-1; }
.color-control, .select-control, .range-control { min-width: 0; border: 1px solid var(--line); background: #fffdf9; padding: 11px; }
.color-control > span, .select-control > span, .range-control > span { display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .1em; font-size: 7px; margin-bottom: 8px; }
.color-control input { width: 100%; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; }
.select-control select { width: 100%; border: 0; outline: 0; background: transparent; font-size: 9px; }
.range-control { grid-column: 1/-1; }
.range-control output { color: var(--accent); text-transform: none; letter-spacing: 0; }
.range-control input { width: 100%; accent-color: var(--accent); }

/* The page the recipient actually sees */
.preview-canvas { display: block; padding: 28px; }
.page-preview { margin: 0 auto; --story-page:#f4eadf; --story-accent:#6e2636; --story-text:#241f1c; --story-space:60px; color: var(--story-text); background: var(--story-page); overflow: hidden; }
.page-preview.mobile { width: 330px; }
.page-preview.desktop { width: min(620px,100%); }
.story-page { background: var(--story-page); min-height: 100%; text-align: center; transition: background .25s,color .25s; }
.story-section { position: relative; padding: var(--story-space) 10%; overflow: hidden; }
.story-section h1, .story-section h2, .story-section blockquote { font-family: "Gloock",serif; font-weight: 400; letter-spacing: -.035em; }
.page-preview[data-font="modern"] .story-section h1, .page-preview[data-font="modern"] .story-section h2, .page-preview[data-font="modern"] .story-section blockquote { font-family: "DM Sans",sans-serif; font-weight: 500; letter-spacing: -.05em; }
.page-preview[data-font="soft"] .story-section h1, .page-preview[data-font="soft"] .story-section h2, .page-preview[data-font="soft"] .story-section blockquote { font-family: Georgia,serif; letter-spacing: -.025em; }
.page-preview[data-align="left"] .story-section:not(.story-detail):not(.story-question):not(.story-hero) { text-align: left; }
.story-label { color: var(--story-accent); font-size: 6px; font-weight: 600; letter-spacing: .2em; margin: 0 0 12px; }
.story-body { color: color-mix(in srgb,var(--story-text) 70%,transparent); font-family: "DM Sans",sans-serif; font-size: 8px; line-height: 1.75; white-space: pre-line; }
.story-ornament { color: var(--story-accent); font-family: "Gloock",serif; font-size: 22px; }
.story-hero { min-height: 430px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: color-mix(in srgb,var(--story-page) 88%,white); }
.story-hero::before, .story-hero::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--story-accent) 14%,transparent); border-radius:50%; }
.story-hero::before { width:290px; height:290px; top:-140px; right:-120px; }
.story-hero::after { width:160px; height:160px; bottom:-90px; left:-75px; }
.story-name { font-size: 36px; margin: 3px 0 22px; }
.story-cover { position: relative; width: 190px; height: 175px; margin: 0 auto; }
.story-photo, .story-photo-placeholder { margin: 0; background:#fff; overflow:hidden; box-shadow:0 8px 18px rgba(36,24,19,.15); }
.story-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.story-cover .story-photo, .story-photo-placeholder { position:absolute; width:135px; height:150px; padding:6px 6px 17px; background:#fff; }
.story-cover .story-photo img { height:100%; }
.story-cover .cover-primary, .story-photo-placeholder { left:2px; transform:rotate(-6deg); }
.story-cover .cover-secondary { right:0; top:10px; transform:rotate(7deg); }
.story-photo-placeholder { display:grid; place-items:center; color:var(--story-accent); background:color-mix(in srgb,var(--story-page) 72%,white); border:6px solid white; border-bottom-width:17px; }
.story-photo-placeholder span { font-size:18px; }
.story-photo-placeholder small { font-size:6px; margin-top:-35px; }
.story-scroll { margin: 14px 0 0; color: color-mix(in srgb,var(--story-text) 48%,transparent); font-size:5px; letter-spacing:.17em; }
.story-hero.layout-minimal { min-height: 320px; }
.story-hero.layout-minimal .story-cover { display:none; }

.story-message { min-height: 330px; display:grid; grid-template-columns:28px 1fr; gap:11px; align-items:center; background:var(--story-page); }
.story-message .section-number { align-self:start; color:var(--story-accent); font-size:6px; border-top:1px solid var(--story-accent); padding-top:5px; }
.story-copy h2 { font-size:25px; line-height:1.08; margin:0 0 16px; }
.story-message .message-photo { display:none; }
.page-preview.desktop .story-message.layout-split { grid-template-columns:28px 1fr .75fr; text-align:left; }
.page-preview.desktop .story-message.layout-split .message-photo { display:block; width:100%; height:175px; transform:rotate(2deg); padding:6px 6px 16px; }

.story-gallery { background:color-mix(in srgb,var(--story-accent) 7%,var(--story-page)); }
.story-gallery h2 { font-size:27px; margin:0 0 24px; }
.story-gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; align-items:center; }
.story-gallery-grid .story-photo { aspect-ratio:1; padding:5px 5px 13px; }
.story-gallery.layout-collage .story-photo:nth-child(3n+1), .story-gallery.layout-collage .gallery-placeholder:nth-child(3n+1) { transform:rotate(-4deg); }
.story-gallery.layout-collage .story-photo:nth-child(3n+2), .story-gallery.layout-collage .gallery-placeholder:nth-child(3n+2) { transform:rotate(4deg) translateY(6px); }
.story-gallery.layout-strip .story-gallery-grid { display:flex; overflow:hidden; margin-left:-14%; margin-right:-14%; gap:6px; }
.story-gallery.layout-strip .story-photo { flex:0 0 42%; transform:none; }
.page-preview.desktop .story-gallery-grid { grid-template-columns:repeat(3,1fr); }
.gallery-placeholder { aspect-ratio:1; display:grid; place-items:center; color:var(--story-accent); background:color-mix(in srgb,var(--story-page) 65%,white); border:5px solid white; box-shadow:0 5px 13px rgba(30,20,15,.1); }

.story-detail { display:grid; place-items:center; min-height:250px; color:white; background:var(--story-accent); }
.story-detail .large-quote { font-family:"Gloock",serif; font-size:45px; line-height:.5; opacity:.38; }
.story-detail blockquote { max-width:410px; font-size:24px; line-height:1.2; margin:13px 0 20px; }
.story-detail .detail-rule { font-size:16px; }
.story-detail.layout-card { margin:25px; min-height:190px; }

.story-reasons h2, .story-memory h2, .story-song h2, .story-custom h2 { font-size:27px; margin:0 0 21px; }
.reason-list { list-style:none; padding:0; margin:0; display:grid; gap:7px; text-align:left; }
.reason-list li { display:grid; grid-template-columns:25px 1fr; align-items:center; border-bottom:1px solid color-mix(in srgb,var(--story-accent) 20%,transparent); padding:9px 0; }
.reason-list span { color:var(--story-accent); font-size:6px; }
.reason-list p { font-family:"Gloock",serif; font-size:12px; margin:0; }
.story-reasons.layout-grid .reason-list { grid-template-columns:1fr 1fr; }
.story-reasons.layout-grid .reason-list li { display:block; border:1px solid color-mix(in srgb,var(--story-accent) 20%,transparent); padding:13px; }

.story-memory { display:grid; gap:20px; align-items:center; }
.story-memory .memory-photo { width:82%; aspect-ratio:4/5; margin:auto; padding:6px 6px 17px; transform:rotate(3deg); }
.page-preview.desktop .story-memory.layout-split { grid-template-columns:1fr 1fr; text-align:left; }
.story-memory.layout-overlay { min-height:330px; color:white; }
.story-memory.layout-overlay .memory-photo { position:absolute; inset:0; width:100%; height:100%; padding:0; transform:none; filter:brightness(.46); }
.story-memory.layout-overlay .story-copy { position:relative; z-index:2; }
.story-memory.layout-overlay .story-body, .story-memory.layout-overlay .story-label { color:white; }

.story-song { display:flex; align-items:center; justify-content:center; gap:22px; background:color-mix(in srgb,var(--story-accent) 8%,var(--story-page)); }
.record-art { flex:0 0 auto; width:85px; height:85px; border-radius:50%; display:grid; place-items:center; color:white; background:repeating-radial-gradient(circle,var(--story-accent) 0 6px,color-mix(in srgb,var(--story-accent) 80%,black) 7px 8px); box-shadow:0 8px 18px rgba(30,20,10,.18); }
.song-copy { text-align:left; min-width:0; }
.song-copy .story-body { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.song-play { border:1px solid var(--story-accent); color:var(--story-accent); background:transparent; padding:7px 9px; font-size:6px; }
.story-song.layout-minimal .record-art { display:none; }

.story-custom { min-height:230px; display:flex; flex-direction:column; justify-content:center; }
.story-custom.layout-card { margin:25px; border:1px solid color-mix(in srgb,var(--story-accent) 35%,transparent); }
.story-custom.layout-statement h2 { font-size:37px; }
.story-custom.layout-statement .story-body { font-family:"Gloock",serif; font-size:13px; }

.story-question { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:white; background:var(--story-accent); }
.story-question .story-label { color:white; opacity:.68; }
.story-question h2 { max-width:450px; font-size:31px; line-height:1.08; margin:7px 0 22px; }
.question-spark { font-size:25px; margin-bottom:13px; }
.story-answers { display:flex; gap:7px; }
.story-answers button { padding:9px 12px; border:1px solid rgba(255,255,255,.55); font-size:7px; }
.primary-answer { background:white; color:var(--story-accent); }
.secondary-answer { background:transparent; color:white; }
.story-signoff { margin-top:33px; font-family:"Gloock",serif; font-style:italic; font-size:7px; opacity:.7; }
.story-question.layout-card { margin:25px; min-height:300px; }

.page-preview[data-photos="rounded"] .story-photo, .page-preview[data-photos="rounded"] .story-photo-placeholder, .page-preview[data-photos="rounded"] .gallery-placeholder { padding:0; border:0; border-radius:14px; transform:none!important; }
.page-preview[data-photos="square"] .story-photo, .page-preview[data-photos="square"] .story-photo-placeholder, .page-preview[data-photos="square"] .gallery-placeholder { padding:0; border:0; transform:none!important; box-shadow:none; }

@media (max-width:700px) {
  .step-nav { grid-template-columns:repeat(6,1fr); }
  .custom-style-controls { grid-template-columns:1fr 1fr; }
  .custom-style-controls legend, .range-control { grid-column:1/-1; }
  .section-settings { padding-left:18px; grid-template-columns:1fr; }
  .full-setting { grid-column:auto; }
}

/* Linked-page recipient experience */
.site-view { display:none; min-height:560px; background:var(--story-page); animation:pageEnter .3s ease; }
.site-view.active { display:block; }
.site-home { padding-bottom:28px; }
.home-mast { position:relative; min-height:330px; padding:48px 10% 35px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:color-mix(in srgb,var(--story-page) 88%,white); }
.home-mast::before, .home-mast::after { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--story-accent) 16%,transparent); border-radius:50%; pointer-events:none; }
.home-mast::before { width:240px; height:240px; right:-125px; top:-120px; }
.home-mast::after { width:130px; height:130px; left:-70px; bottom:-65px; }
.home-mark { position:relative; color:var(--story-accent); font-family:"Gloock",serif; font-size:22px; margin-bottom:8px; }
.home-mast h1 { position:relative; z-index:1; font-family:"Gloock",serif; font-size:36px; font-weight:400; letter-spacing:-.04em; margin:0 0 17px; }
.page-preview[data-font="modern"] .home-mast h1 { font-family:"DM Sans",sans-serif; font-weight:500; }
.page-preview[data-font="soft"] .home-mast h1 { font-family:Georgia,serif; }
.home-cover { position:relative; width:128px; height:122px; margin:0 auto 15px; }
.home-cover .story-photo { width:105px; height:116px; padding:5px 5px 14px; transform:rotate(-4deg); margin:auto; }
.home-cover-placeholder { width:105px; height:116px; display:grid; place-items:center; margin:auto; color:var(--story-accent); background:color-mix(in srgb,var(--story-page) 68%,white); border:5px solid white; border-bottom-width:14px; box-shadow:0 7px 18px rgba(40,25,20,.12); transform:rotate(-4deg); }
.home-cover-placeholder small { display:block; margin-top:-28px; color:color-mix(in srgb,var(--story-text) 55%,transparent); font-size:5px; }
.home-intro { position:relative; z-index:1; max-width:250px; color:color-mix(in srgb,var(--story-text) 70%,transparent); font-family:"Gloock",serif; font-size:9px; line-height:1.5; margin:0; }
.subpage-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:20px; }
.subpage-link { position:relative; min-height:105px; display:grid; grid-template-columns:1fr auto; align-content:start; text-align:left; border:1px solid color-mix(in srgb,var(--story-accent) 18%,transparent); background:color-mix(in srgb,var(--story-page) 82%,white); padding:12px; color:var(--story-text); transition:transform .2s,border .2s; }
.subpage-link:hover { transform:translateY(-2px); border-color:var(--story-accent); }
.subpage-link .subpage-index { color:color-mix(in srgb,var(--story-text) 42%,transparent); font-size:5px; letter-spacing:.12em; }
.subpage-link i { color:var(--story-accent); font-family:"Gloock",serif; font-size:15px; font-style:normal; text-align:right; }
.subpage-link b { grid-column:1/-1; align-self:end; font-family:"Gloock",serif; font-weight:400; font-size:13px; margin-top:17px; }
.subpage-link small { grid-column:1/-1; color:color-mix(in srgb,var(--story-text) 55%,transparent); font-size:5px; margin-top:3px; }
.subpage-link em { position:absolute; right:9px; bottom:9px; color:var(--story-accent); font-size:8px; font-style:normal; }
.home-signoff { color:var(--story-accent); font-family:"Gloock",serif; font-size:7px; font-style:italic; text-align:center; margin:5px 0; }
.page-preview.desktop .subpage-grid { grid-template-columns:repeat(3,1fr); padding:28px 40px; }
.page-preview.desktop .subpage-link { min-height:120px; }

.site-subpage { position:relative; padding-top:35px; }
.subpage-bar { position:absolute; z-index:5; left:0; right:0; top:0; height:35px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:color-mix(in srgb,var(--story-text) 55%,transparent); border-bottom:1px solid color-mix(in srgb,var(--story-text) 10%,transparent); background:color-mix(in srgb,var(--story-page) 93%,white); }
.subpage-bar button { border:0; background:none; padding:5px; color:var(--story-accent); font-size:6px; }
.subpage-bar span { font-size:5px; letter-spacing:.14em; }
.site-subpage > .story-section { min-height:450px; display:flex; flex-direction:column; justify-content:center; }
.site-subpage > .story-message { display:grid; }
.site-subpage > .story-gallery { display:block; }
.site-subpage > .story-memory { display:grid; }
.site-subpage > .story-song { display:flex; }
.subpage-footer { height:42px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; border-top:1px solid color-mix(in srgb,var(--story-text) 12%,transparent); background:color-mix(in srgb,var(--story-page) 91%,white); }
.subpage-footer button { height:100%; border:0; border-right:1px solid color-mix(in srgb,var(--story-text) 10%,transparent); background:none; color:var(--story-accent); font-size:6px; }
.subpage-footer button:last-child { border-right:0; }
.subpage-footer button:disabled { opacity:.25; cursor:default; }
.story-question + .subpage-footer { border-color:rgba(255,255,255,.15); }
@keyframes pageEnter { from { opacity:0; transform:translateY(5px); } }