/* Crème v1.4 — editorial form atelier, heirloom empty states, restrained motion. */
:root {
  --lux-cherry: #8f3f4b;
  --lux-walnut: #664538;
  --lux-parchment: #fffcf5;
  --lux-fiber: rgba(110, 81, 61, .075);
}

/* Empty spaces should feel like pages waiting to be written, never like cartoons. */
.empty-editorial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 315px;
  gap: 9px;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px) 24px;
  border: 1px solid rgba(129, 93, 66, .18);
  border-radius: 25px;
  color: var(--ink);
  background: radial-gradient(circle at 50% 24%, rgba(255,255,255,.88), transparent 36%),
    linear-gradient(130deg, #fff9f0 4%, #f0e4d2 100%);
  box-shadow: 0 20px 42px rgba(87, 58, 39, .055), inset 0 1px 0 #fff8;
}
.empty-editorial::before { content:''; position:absolute; inset:16px; z-index:-1; border:1px solid rgba(154,121,92,.15); border-radius:18px; pointer-events:none; }
.empty-editorial::after { content:''; position:absolute; left:50%; top:17px; bottom:17px; width:1px; z-index:-2; background:linear-gradient(transparent,rgba(164,126,99,.08),transparent); pointer-events:none; }
.empty-illustration { position:relative; width:110px; height:96px; margin-bottom:4px; display:grid; place-items:center; color:var(--cocoa); }
.empty-orbit { position:absolute; width:87px; height:87px; border:1px solid rgba(148,112,88,.26); border-radius:50%; transform:rotate(-26deg) scaleX(.82); }
.empty-signet { width:65px; height:65px; border-radius:50%; background:linear-gradient(140deg,#f5e5d2,#e5cbae); border:1px solid rgba(160,122,91,.25); display:grid; place-items:center; box-shadow:0 8px 16px rgba(74,50,33,.12),inset 0 2px 6px #fff9; transform:rotate(-6deg); }
.empty-signet .icon { width:31px; height:31px; stroke-width:1.25; }
.empty-decoration { position:absolute; right:7px; top:7px; font:27px var(--font-book); color:#b89674; }
.empty-eyebrow { margin:8px 0 0!important; font:800 10px/1.2 var(--font-ui); letter-spacing:.21em; text-transform:uppercase; color:#916d56; }
.empty-editorial h2 { margin:2px 0 4px; font:italic 600 clamp(28px,4vw,40px)/1.08 'Cormorant Garamond',Georgia,serif; color:#48372e; }
.empty-editorial .empty-description { max-width:48ch; margin:0 0 14px; font:15px/1.6 var(--font-ui); color:var(--muted); }
.empty-editorial .row { justify-content:center; }
.empty-editorial .btn { min-width:175px; }
.empty-search .empty-signet { background:linear-gradient(145deg,#e6e3d6,#cbd3cc); }
.empty-saved .empty-signet { background:linear-gradient(145deg,#f4dbd9,#e6b6b6); }
.empty-shopping .empty-signet { background:linear-gradient(145deg,#f4e5cb,#ddc597); }

.first-kitchen { display:grid; grid-template-columns: minmax(0,1fr) minmax(240px,.85fr); gap:28px; border-radius:26px; padding:clamp(25px,4vw,46px); background:linear-gradient(135deg,#784b46,#4f3831); color:#fff4e6; margin-top:10px; box-shadow:0 22px 42px rgba(64,37,29,.18); }
.first-kitchen .eyebrow { color:#e9c2ae; }
.first-kitchen h2 { font:italic 600 clamp(33px,4vw,54px)/1 'Cormorant Garamond',Georgia,serif; margin:0 0 16px; max-width:13ch; }
.first-kitchen-intro>p:not(.eyebrow) { max-width:51ch; color:#f4e4d9; margin:0 0 22px; }
.first-kitchen .btn { background:#f4e4ce; color:#4e372d; border:1px solid #fff6; }
.first-kitchen .btn:hover { background:#fff5e4; }
.first-kitchen-steps { display:grid; gap:8px; align-content:center; }
.first-kitchen-steps>div { display:grid; grid-template-columns:42px 1fr; gap:3px 13px; padding:12px 14px; border-top:1px solid #fff4; }
.first-kitchen-steps span { grid-row:span 2; font:italic 500 32px/1 'Cormorant Garamond',Georgia,serif; color:#edc2b1; }
.first-kitchen-steps b { font-size:14px; }
.first-kitchen-steps small { color:#f0d9cc; font-size:12px; }

/* The editor masthead is a small, sophisticated printed title page. */
.editor-masthead { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(190px,.68fr); align-items:center; gap:22px; padding:clamp(27px,4vw,46px); border-radius:28px; margin:0 0 26px; border:1px solid rgba(146,109,82,.16); background:linear-gradient(135deg,#fcf8f0 1%,#f3e6d6 98%); box-shadow:0 16px 40px rgba(81,52,35,.07); }
.editor-masthead::before { position:absolute; content:''; inset:13px; pointer-events:none; border-radius:19px; border:1px solid rgba(146,108,81,.14); }
.editor-masthead-copy { position:relative; z-index:1; }
.editor-masthead .eyebrow { color:#986a56; }
.editor-masthead .page-title { margin:0 0 12px; max-width:15ch; font:italic 600 clamp(44px,5.3vw,72px)/.96 'Cormorant Garamond',Georgia,serif; letter-spacing:-.035em; color:#423128; }
.editor-masthead .lead { color:#746051; max-width:53ch; font:16px/1.65 var(--font-ui); margin:0 0 18px; }
.editor-masthead-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.editor-autosave-hint { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#766153; }
.editor-autosave-hint .icon { width:15px; height:15px; color:#6c795d; }
.editor-masthead-ornament { position:relative; z-index:1; justify-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:3/4; width:min(100%,235px); padding:19px; border:1px solid #8d6d5052; outline:1px solid #a57d5d55; outline-offset:-9px; border-radius:110px 110px 8px 8px; background:linear-gradient(155deg,#f7ead7,#e9d7bc); box-shadow:inset 0 2px 9px #fff8,0 12px 20px #73503c14; color:#735744; }
.editor-ornament-top,.editor-ornament-bottom { font:700 9px/1.35 var(--font-ui); letter-spacing:.18em; text-align:center; }
.editor-ornament-drawing { display:block; width:70%; height:52%; color:#87906f; }
.editor-ornament-drawing .doodle-svg { height:100%; width:100%; }
.editor-ornament-script { font:italic 500 27px/1 'Cormorant Garamond',Georgia,serif; white-space:nowrap; }

/* Form as a composed editorial layout rather than stacks of raw fields. */
.editor { grid-template-columns:minmax(0,1fr) 335px; gap:clamp(18px,2.8vw,36px); align-items:start; }
.editor-main { gap:22px; }
.editor-side { gap:15px; position:static; }
.editor-main>fieldset.card,.editor-side>fieldset.card { margin:0; border:1px solid rgba(143,108,80,.15); border-radius:23px; background:linear-gradient(180deg,#fffdfa,#fdf7ef); padding:24px clamp(18px,2vw,30px) 24px; box-shadow:0 11px 27px rgba(73,49,33,.055); }
.editor-main>fieldset.card>legend,.editor-side>fieldset.card>legend { float:none; margin:0 0 22px; width:auto; padding:0; display:flex; align-items:center; gap:13px; color:#43332b; }
.editor-main>fieldset.card>legend+*,.editor-side>fieldset.card>legend+* { clear:none; }
.editor-section-number { display:grid; place-items:center; flex:none; width:39px; height:39px; border:1px solid #c7ab8a; border-radius:50%; font:600 20px/1 'Cormorant Garamond',Georgia,serif; color:#775644; background:#f5eadd; }
.editor-section-copy { display:grid; gap:3px; }
.editor-section-copy strong { font:600 23px/1.05 'Cormorant Garamond',Georgia,serif; }
.editor-section-copy small { font:12px/1.3 var(--font-ui); color:var(--muted); }
.editor .field>span { font-size:13px; color:#584338; font-weight:700; }
.editor .field input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),.editor .field select,.editor .field textarea,.editor .step-row textarea { border:1px solid #d5c3ac; background:#fffefb; border-radius:12px; min-height:47px; box-shadow:inset 0 1px 2px #6a41290a; padding:12px 13px; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.editor .field input:focus,.editor .field select:focus,.editor .field textarea:focus,.editor .step-row textarea:focus { border-color:#9c6e58; box-shadow:0 0 0 4px #9c6e5816; outline:none; background:#fff; }
.editor .field textarea,.editor .step-row textarea { line-height:1.6; }
.editor .field [name="title"] { font:500 19px/1.3 var(--font-book); }
.editor .field textarea[name="ingredients"] { font-size:15px; line-height:1.8; background:repeating-linear-gradient(transparent 0 29px,#e8e0d3 30px 31px) top 10px left 0/100% auto,#fffdfa; }
.editor .step-row { grid-template-columns:35px minmax(0,1fr) auto; gap:11px; align-items:start; padding:11px 0; border-top:1px solid #e8dbcb; }
.editor .step-row:first-child { border-top:0; padding-top:0; }
.editor .step-num { display:grid; place-items:center; height:35px; width:35px; margin-top:5px; background:#eaddc8; border:1px solid #b89674; color:#6d4b3d; border-radius:50%; font:italic 600 22px/1 'Cormorant Garamond',Georgia,serif; }
.editor .step-row textarea { min-height:85px; }
.editor .step-tools { gap:3px; }
.editor .step-tools .icon-btn { width:34px; height:34px; }
.editor .hint { color:#847160; }
.editor .drop-zone { overflow:hidden; border-radius:16px; border:1px dashed #baa187; padding:10px; background:linear-gradient(140deg,#f7edde,#fffaf1); min-height:150px; margin-bottom:12px; }
.editor .drop-zone .editor-photo { margin:0; width:100%; min-height:130px; border-radius:11px; }
.editor .drop-zone .photo-empty { gap:7px; align-content:center; justify-items:center; color:#846955; }
.editor .drop-zone .photo-empty .icon { width:34px; height:34px; }
.editor .drop-zone.over { box-shadow:inset 0 0 0 3px #b38c73; }
.editor .style-choice { gap:8px; }
.editor .style-choices { grid-template-columns:repeat(auto-fit,minmax(75px,1fr)); }
.editor .style-thumb { transition:transform .2s,box-shadow .2s; }
.editor .style-choice:hover .style-thumb { transform:translateY(-3px); box-shadow:0 8px 15px #684c3333; }
.editor .style-choice input:checked+.style-thumb { outline:2px solid #8e624d; outline-offset:3px; }
.editor .style-choice input:focus-visible+.style-thumb { outline:3px solid var(--focus); outline-offset:3px; }
.editor .style-choice small { font-size:11px; }

.editor-progress-card { border:1px solid #cdb69c; border-radius:20px; padding:18px; background:linear-gradient(120deg,#efe1cf,#f9eee0); box-shadow:0 8px 18px #4e33200c; }
.editor-progress-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.editor-progress-top .eyebrow { margin:0; }
.editor-progress-count { font:600 19px/1 'Cormorant Garamond',Georgia,serif; color:#563b30; }
.editor-progress-track { margin:14px 0 12px; height:6px; background:#d6c3aa; overflow:hidden; border-radius:100px; }
.editor-progress-fill { height:100%; width:0; border-radius:100px; background:linear-gradient(90deg,#987359,#718166); transition:width .25s ease; }
.editor-progress-items { display:flex; flex-wrap:wrap; gap:6px; }
.editor-progress-items span { border:1px solid #cfb79b; background:#faf2e7; border-radius:100px; padding:6px 9px; font-size:11px; color:#826a58; }
.editor-progress-items span.is-done { border-color:#849078; background:#e4ecdc; color:#4f664b; }
.editor-progress-items span.is-done::before { content:'✓ '; font-weight:900; }

.editor-preview-card { border-radius:22px; padding:18px; border:1px solid #d6c5b3; background:linear-gradient(150deg,#f6e9d8,#eaddcc); box-shadow:0 9px 22px #69493014; }
.editor-preview-card .eyebrow { text-align:center; margin-bottom:15px; }
.editor-preview-card .hint { margin-bottom:0; }
.editor-preview-paper { position:relative; overflow:hidden; display:grid; justify-items:center; align-content:center; text-align:center; gap:11px; min-height:285px; padding:38px 27px; border-radius:4px; background:#fffaf0; border:1px solid #dac7ab; box-shadow:inset 5px 0 7px #8e69411a,5px 7px 0 -3px #c6b395,8px 13px 18px #543a2a21; transition:background-color .2s,color .2s; }
.editor-preview-paper::before { content:''; position:absolute; inset:14px; border:1px solid #cdb49b; pointer-events:none; }
.editor-preview-paper::after { content:''; position:absolute; inset:0; opacity:.14; pointer-events:none; background:var(--grain); }
.editor-preview-watermark { position:absolute; top:13px; left:16px; font:italic 600 17px 'Cormorant Garamond',Georgia,serif; color:#a78c74; }
.editor-preview-category { font:700 10px/1.4 var(--font-ui); letter-spacing:.17em; text-transform:uppercase; color:#8c6051; }
.editor-preview-paper h2 { color:#3f302a; font:italic 600 clamp(30px,3vw,43px)/1 'Cormorant Garamond',Georgia,serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
.editor-preview-rule { color:#a88765; font-size:14px; }
.editor-preview-summary { max-width:28ch; color:#715c4e; font:italic 15px/1.45 var(--font-book); overflow-wrap:anywhere; }
.editor-preview-footer { font:700 10px/1.4 var(--font-ui); letter-spacing:.05em; color:#997f6b; }
.editor-preview-paper[data-style="magazine"] { background:linear-gradient(145deg,#4a3530,#27272a); color:#fdf1e0; border-color:#392b29; }
.editor-preview-paper[data-style="magazine"]::before { border-color:#ffffff66; }
.editor-preview-paper[data-style="magazine"] :is(h2,.editor-preview-summary,.editor-preview-category,.editor-preview-watermark,.editor-preview-rule,.editor-preview-footer) { color:#fff1e4; }
.editor-preview-paper[data-style="vintage"] { background:repeating-linear-gradient(transparent 0 26px,#c9d2da66 26px 27px),#fffced; }
.editor-preview-paper[data-style="patisserie"] { background:linear-gradient(150deg,#fff4ed,#f3e1db); }
.editor-preview-paper[data-style="patisserie"]::before { border-radius:110px 110px 6px 6px; border-color:#b88c8a; }
.editor-preview-paper[data-style="minimal"] { background:#f5f4ef; }
.editor-preview-paper[data-style="minimal"]::before { border:0; border-top:1px solid #b7b7a5; inset:26px; }
.editor-save { gap:10px; padding:17px; border-radius:20px; background:linear-gradient(150deg,#fffdfa,#f4e8d8); border:1px solid #d8c6af; }
.editor-save .btn { min-height:47px; }
.editor-save .btn-primary { box-shadow:0 7px 16px #67433331; }

/* Microinteractions: tactility rather than bouncing/zooming. */
@media (hover:hover) and (pointer:fine) {
  .shelf-book .cd-cover { transition:transform .32s cubic-bezier(.2,.75,.2,1),filter .32s ease; }
  .shelf-book:hover .cd-cover { transform:translateY(-8px) rotate(-.6deg); filter:brightness(1.045); }
  .recipe-card .photo img { transition:transform .45s cubic-bezier(.18,.8,.25,1); }
  .recipe-card:hover .photo img { transform:scale(1.045); }
  .recipe-card { transition:transform .26s cubic-bezier(.2,.75,.2,1),box-shadow .26s ease; }
  .btn-primary { transition:transform .18s,background .18s,box-shadow .18s; }
  .btn-primary:active { transform:translateY(1px) scale(.99); box-shadow:0 3px 9px #67433318; }
  .atelier-choice .cd-cover { transition:transform .25s; }
}
@keyframes cremePaperIn { from { opacity:.01; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:no-preference) {
  .view-enter :is(.editor-masthead,.library-banner,.discover-hero,.first-kitchen,.editor-progress-card) { animation:cremePaperIn .42s ease both; }
  .view-enter :is(.editor-main>fieldset.card,.recipe-card) { animation:cremePaperIn .38s ease both; }
  .view-enter :is(.editor-main>fieldset.card,.recipe-card):nth-child(2) { animation-delay:35ms; }
  .view-enter :is(.editor-main>fieldset.card,.recipe-card):nth-child(3) { animation-delay:65ms; }
  .view-enter :is(.editor-main>fieldset.card,.recipe-card):nth-child(4) { animation-delay:90ms; }
}
@media(max-width:1050px) {
  .editor { grid-template-columns:minmax(0,1fr) minmax(260px,300px); gap:18px; }
  .editor-masthead { grid-template-columns:minmax(0,1fr) 170px; }
}
@media(max-width:900px) {
  .editor { grid-template-columns:1fr; }
  .editor-side { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .editor-progress-card,.editor-preview-card { grid-column:1/-1; }
  .editor-save { grid-column:1/-1; position:sticky; bottom:73px; z-index:11; grid-template-columns:1fr 1fr; }
  .editor-save .btn-ghost,.editor-save p { display:none; }
  .editor-masthead { grid-template-columns:minmax(0,1fr) 160px; }
  .editor-preview-card { max-width:100%; }
  .first-kitchen { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .editor-masthead { grid-template-columns:1fr; padding:25px 21px; gap:12px; }
  .editor-masthead .page-title { font-size:52px; }
  .editor-masthead-ornament { display:none; }
  .editor-masthead-actions { align-items:flex-start; flex-direction:column; }
  .editor-side { grid-template-columns:1fr; gap:14px; }
  .editor-progress-card,.editor-preview-card,.editor-side>fieldset.card,.editor-save { grid-column:1; }
  .editor-main>fieldset.card,.editor-side>fieldset.card { padding:20px 16px; }
  .editor .step-row { grid-template-columns:31px minmax(0,1fr); }
  .editor .step-tools { grid-column:2; justify-content:flex-end; }
  .editor .step-num { width:31px; height:31px; }
  .editor-section-copy strong { font-size:21px; }
  .editor-save { padding:9px; }
  .editor-save .btn { font-size:12px; padding:9px 7px; }
  .empty-editorial { min-height:290px; padding:32px 17px; }
  .first-kitchen { padding:27px 20px; }
}
@media(prefers-reduced-motion:reduce) { .editor-progress-fill { transition:none; } .editor .field input,.editor .field textarea,.editor .field select,.editor .step-row textarea { transition:none; } }
@media print { .editor-masthead,.editor-progress-card,.editor-preview-card,.first-kitchen { box-shadow:none; } }

/* At phone widths, progress stays above the form rather than after the entire editor. */
.editor-progress-mobile { display:none; }
@media(max-width:900px) {
  .editor-progress-mobile { display:block; grid-column:1/-1; grid-row:1; }
  .editor-main { grid-row:2; }
  .editor-side { grid-row:3; }
  .editor-side>.editor-progress-card { display:none; }
}