/* A little table for two: warm paper, old cookbook covers, and quiet rose ink. */
:root {
  color-scheme: light;
  --shadow: 0 8px 25px rgba(62, 47, 32, .055);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; font: 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
img, svg { max-width: 100%; }
img { display: block; }
svg { vertical-align: middle; }
button svg, a svg { flex-shrink: 0; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 11px 12px; outline: none; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px #843b4910; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--wine); }
textarea { resize: vertical; min-height: 105px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #bc8f65; outline-offset: 4px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.35; }
h1 { font-size: clamp(30px, 3vw, 43px); letter-spacing: -.055em; }
h2 { font-size: 25px; letter-spacing: -.035em; }
h3 { font-size: 19px; letter-spacing: -.025em; }
h4 { font-size: 16px; }
small { font-size: 12px; }
::selection { color: var(--wine-dark); background: #ebc9c3; }
[hidden] { display: none !important; }
.muted, .subtle, .help-text { color: var(--muted); }
.loading { padding: 70px 25px; text-align: center; color: var(--muted); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 226px minmax(0,1fr); }
.app-sidebar { display: flex; flex-direction: column; background: #f3eee3; border-right: 1px solid var(--line); position: fixed; inset: 0 auto 0 0; z-index: 20; width: 226px; padding: 30px 20px 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 6px; min-height: 55px; }
.brand svg { width: 37px; height: 42px; }
.brand-name, .brand strong { display: block; font: 23px/1.1 var(--serif); letter-spacing: -.055em; font-weight: 400; }
.brand-tagline, .brand small { display: block; font: 9px/1.4 var(--sans); text-transform: uppercase; margin-top: 5px; }
.sidebar-nav { display: grid; gap: 6px; margin-top: 43px; }
.nav-link { border: 0; background: transparent; display: flex; align-items: center; gap: 13px; width: 100%; border-radius: 8px; padding: 12px 15px; text-align: left; font-size: 13px; font-weight: 500; transition: color .15s, background .15s; }
.nav-link svg { width: 18px; height: 18px; stroke-width: 1.6; }
.sidebar-bottom { margin-top: auto; padding-top: 25px; }
.sidebar-note { margin: 0 10px 22px; padding: 20px 12px; border-top: 1px solid #dfd6c6; border-bottom: 1px solid #dfd6c6; text-align: center; }
.sidebar-note svg { color: #ae837b; width: 25px; margin-bottom: 7px; }
.sidebar-note p { font: italic 12px/1.8 var(--serif); }
.sidebar-note small { display: block; font-size: 9px; margin-top: 8px; letter-spacing: .12em; text-transform: uppercase; }
.app-content { min-width: 0; grid-column: 2; }
.topbar { height: 88px; display: flex; align-items: center; gap: 20px; padding: 0 44px; border-bottom: 1px solid var(--line); }
.global-search { flex: 1; max-width: 495px; position: relative; }
.global-search svg { width: 18px; height: 18px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.global-search input { border: 0; background: transparent; padding: 13px 36px 13px 31px; font-size: 12px; box-shadow: none; }
.global-search input:focus { box-shadow: none; }
.global-search kbd { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 1px solid #e7dfd1; border-radius: 4px; padding: 1px 5px; font: 10px var(--sans); }
.topbar .button { white-space: nowrap; }
.user-chip { border: 0; background: transparent; display: flex; align-items: center; gap: 9px; color: var(--ink); padding: 5px 0 5px 7px; font-size: 12px; }
.user-chip .avatar { width: 31px; height: 31px; font-size: 10px; }
.user-chip svg { width: 12px; color: #a29788; }
.page-body { width: 100%; max-width: 1540px; padding: 34px 44px 60px; margin: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 9px; line-height: 1.5; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 14px; }
.eyebrow svg { width: 13px; height: 13px; }
.welcome-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 278px; border: 1px solid #e8dfd0; border-radius: 11px; background: #ede6d9; margin-bottom: 36px; }
.hero-copy { z-index: 2; align-self: center; padding: 34px 0 35px 38px; }
.hero-copy h1 { max-width: 460px; font-size: clamp(32px, 3vw, 42px); line-height: 1.22; letter-spacing: -.05em; }
.hero-copy h1 em { font-weight: 400; }
.hero-copy p { margin-top: 16px; max-width: 400px; font-size: 12px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 17px; margin-top: 21px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 28px 0 18px; }
.section-head h2 { font-size: 23px; }
.section-head h2 svg { width: 18px; height: 18px; margin: 0 7px 2px 0; color: var(--wine); }
.section-head p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 21px; }
.filter-row select { width: auto; padding: 7px 29px 7px 10px; font-size: 11px; background-color: transparent; }

.cookbook-grid { display: grid; }
.cookbook-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: transform .2s, box-shadow .2s; min-width: 0; }
.cookbook-card:hover { transform: translateY(-3px); }
.book-cover { position: relative; width: 100%; height: 214px; min-height: 170px; padding: 27px 23px 22px 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; background: #d1d6bf; color: #49523e; cursor: pointer; }
.book-cover::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, #6e543014 2px, #6e543014 3px), repeating-linear-gradient(90deg, transparent 0, transparent 3px, #ffffff1c 3px, #ffffff1c 4px); }
.book-cover::after { content: ''; position: absolute; inset: 11px 12px 11px 22px; border: 1px solid currentColor; opacity: .21; border-radius: 2px; pointer-events: none; }
.book-cover[data-color=blue], .book-cover.blue { background-color: #cdd9d8; color: #4f6768; }
.book-cover[data-color=wine], .book-cover.wine { background-color: #8b4a52; color: #f4e3ce; }
.book-cover[data-color=cream], .book-cover.cream { background-color: #e7dfcc; color: #756044; }
.book-spine { position: absolute; inset: 0 auto 0 0; width: 13px; background: linear-gradient(90deg,#44351c1f,#44351c05 45%,#ffffff21 65%,#44351c1a); border-right: 1px solid #44351c12; z-index: 2; }
.book-cover-title { position: relative; z-index: 2; font: 23px/1.25 var(--serif); letter-spacing: -.04em; max-width: 190px; }
.book-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.book-meta { padding: 17px 18px 16px; }
.book-meta h3 { font-size: 15px; line-height: 1.5; margin-bottom: 4px; }
.book-meta p { font-size: 10px; color: var(--muted); }
.avatar { width: 35px; height: 35px; border-radius: 50%; font: 11px/1 var(--sans); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 500; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.gold, .avatar:nth-child(3) { background: #e9d5ac; color: #9d7e4e; }
.avatar.blue { background: #cfdedc; color: #6c8580; }
.avatar.large { width: 76px; height: 76px; font-size: 23px; }
.avatar-stack { display: flex; padding-right: 6px; }
.avatar-stack .avatar { width: 23px; height: 23px; font-size: 8px; border: 2px solid var(--paper); margin-right: -6px; }
.rating { color: #9b7950; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 10px; }
.rating svg { width: 11px; height: 11px; fill: #bc9a63; stroke: #bc9a63; }
.rating strong { color: #7b694d; font-weight: 600; }
.follow-button { border: 1px solid #d9c8bb; background: transparent; color: var(--wine); padding: 5px 11px; border-radius: 5px; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 64px; }
.follow-button svg { width: 11px; height: 11px; }
.follow-button:hover { background: var(--rose-soft); }
.follow-button.following, .follow-button[aria-pressed=true] { color: var(--sage); background: #eef0e6; border-color: #dce1ce; }

.recipe-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 19px; }
.recipe-card { min-width: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; }
.recipe-card:hover { transform: translateY(-3px); }
.recipe-photo { position: relative; background: #e5dfcf; aspect-ratio: 1.45; overflow: hidden; }
.recipe-photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.recipe-card:hover .recipe-photo > img { transform: scale(1.04); }
.recipe-photo .tag { position: absolute; top: 11px; left: 11px; background: #fffaf0e8; color: #877052; font-size: 8px; box-shadow: 0 2px 8px #44351c09; }
.recipe-photo .icon-button { position: absolute; right: 9px; top: 9px; width: 27px; height: 27px; background: #fff9eeeb; color: var(--wine); }
.recipe-body { padding: 13px 13px 12px; }
.recipe-body h3 { font-size: 13px; line-height: 1.5; min-height: 20px; }
.recipe-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin-top: 12px; font-size: 9px; }
.recipe-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.recipe-card-meta svg { width: 11px; height: 11px; }
.recipe-card .rating { font-size: 9px; }
.recipe-tags { display: flex; flex-wrap: wrap; }
.tag, .badge { font: 9px/1.5 var(--sans); border-radius: 4px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px; }
.tag svg, .badge svg { width: 10px; height: 10px; }
.badge { border-radius: 30px; }
.badge.demo { background: #eee4cf; color: #97815a; letter-spacing: .04em; font-size: 8px; }
.badge.private { background: #e8eadf; color: #7a8267; }
.badge.public { background: #edf0e6; color: #7a8267; }
.demo-notice, .notice { display: flex; align-items: center; gap: 10px; border: 1px solid #e7dcc7; border-radius: 6px; padding: 10px 14px; font-size: 11px; line-height: 1.6; }
.notice svg, .demo-notice svg { flex-shrink: 0; width: 16px; height: 16px; }
.notice.error { background: #f8e8e2; border-color: #ebc8bf; color: #9d5a4b; }

.breadcrumb { align-items: center; gap: 7px; font-size: 10px; margin-bottom: 22px; }
.breadcrumb button, .breadcrumb a { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; }
.breadcrumb button:hover { color: var(--wine); }
.breadcrumb svg { width: 10px; height: 10px; }
.cookbook-hero { display: grid; align-items: center; margin: 0 0 29px; }
.cookbook-hero .book-cover { height: 282px; border-radius: 4px 8px 8px 4px; box-shadow: 5px 7px 0 #e5ddce, 7px 10px 13px #45361e12; }
.cookbook-hero .book-cover-title { font-size: 27px; }
.cookbook-hero h1 { max-width: 650px; }

.recipe-paper { padding: 42px 48px; position: relative; max-width: 1100px; margin: 0 auto 35px; }
.recipe-paper::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #6b482000, #6b482000 2px, #6b482002 2px, #6b482002 3px); pointer-events: none; }
.paper-header { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 30px; align-items: center; padding-bottom: 30px; border-bottom: 1px solid #e2d7bf; }
.paper-header .recipe-photo { border-radius: 3px; aspect-ratio: 1.2; box-shadow: 3px 5px 10px #4c341018; transform: rotate(2deg); border: 7px solid #fffef9; }
.paper-header .eyebrow { color: #99846a; font-size: 9px; margin-bottom: 11px; }
.recipe-title { font-size: clamp(28px, 3vw, 39px); color: #61503b; line-height: 1.28; }
.recipe-summary { color: #9c8970; margin-top: 15px; font: italic 12px/1.9 var(--serif); max-width: 500px; }
.recipe-columns { display: grid; grid-template-columns: 1fr 1.65fr; gap: 40px; position: relative; }
.recipe-columns h2 { font-size: 21px; color: #7b6547; display: flex; align-items: center; gap: 8px; margin-bottom: 19px; }
.recipe-columns h2 svg { width: 18px; height: 18px; color: #ad9978; }
.ingredients-list { padding: 0; margin: 0; list-style: none; }
.ingredients-list li { border-bottom: 1px dashed #e8dcc3; padding: 11px 0; display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.7; }
.ingredients-list li:first-child { padding-top: 0; }
.ingredients-list input { margin-top: 5px; accent-color: var(--sage); }
.ingredients-list label { display: flex; gap: 9px; width: 100%; cursor: pointer; }
.ingredients-list input:checked + span { text-decoration: line-through; color: #beb39d; }
.ingredient-calories { margin-left: auto; white-space: nowrap; align-self: center; }
.instructions-list { counter-reset: steps; list-style: none; padding: 0; margin: 0; }
.instructions-list li { counter-increment: steps; position: relative; padding-left: 35px; margin-bottom: 23px; font-size: 12px; line-height: 1.9; }
.instructions-list li::before { content: counter(steps, decimal-leading-zero); position: absolute; top: 1px; left: 0; font: italic 17px var(--serif); }
.reviews-section { max-width: 1000px; margin: 38px auto 0; }
.reviews-section h2 { font-size: 24px; }
.review-card { padding: 23px 0; border-top: 1px solid var(--line); }
.review-author { display: flex; align-items: center; gap: 11px; }
.review-author .avatar { width: 32px; height: 32px; font-size: 9px; }
.review-author strong { display: block; color: #746751; font-size: 11px; font-weight: 600; }
.review-author small { display: block; font-size: 9px; margin-top: 3px; }
.review-author .rating, .review-author .stars { margin-left: auto; }
.reply { border-left: 2px solid #e5d9c6; margin: 18px 0 4px 43px; padding-left: 18px; }
.reply .review-author .avatar { width: 25px; height: 25px; font-size: 8px; }
.reply p { margin: 8px 0 0 36px; font-size: 11px; color: #9c8d77; line-height: 1.8; }
.review-form { padding: 22px; background: #f1eadf; border: 1px solid #e4d9c6; border-radius: 7px; margin-top: 20px; }
.review-form h3 { font-size: 17px; margin-bottom: 15px; }
.review-form textarea { background: #fffaf0; font-size: 12px; }
.review-form .dialog-actions { margin: 13px 0 0; padding: 0; border: 0; }
.rating-input { display: flex; align-items: center; gap: 5px; color: #aa997c; font-size: 11px; margin: 0 0 12px; }
.rating-input label { margin-right: 8px; }
.rating-input button { border: 0; background: transparent; color: #d4c7ae; padding: 3px; font-size: 24px; line-height: 1; }
.rating-input button.selected, .rating-input button:hover { color: #b39258; }
.rating-input select { width: 160px; padding: 6px 10px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--wine); border-radius: 6px; background: var(--wine); color: #fff8ee; padding: 10px 16px; font: 500 11px/1.4 var(--sans); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.button svg { width: 14px; height: 14px; }
.button:hover { background: var(--wine-dark); border-color: var(--wine-dark); }
.button:active { transform: translateY(1px); }
.button.small { padding: 6px 11px; font-size: 10px; }
.button.large { padding: 13px 23px; font-size: 12px; }
.button.danger { background: #a04b42; border-color: #a04b42; }
.button.danger:hover { background: #813b34; }
.icon-button { border: 0; padding: 6px; background: transparent; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #a29078; width: 31px; height: 31px; flex-shrink: 0; }
.icon-button svg { width: 17px; height: 17px; }
.icon-button:hover { color: var(--wine); background: #eae1d4; }
.icon-button.danger:hover { background: #f1d8d0; color: #a04b42; }
.app-dialog { color: var(--ink); border: 1px solid #e0d4c0; border-radius: 11px; box-shadow: 0 20px 90px #33220e35; width: min(680px,calc(100vw - 32px)); max-height: calc(100dvh - 60px); padding: 0; }
.app-dialog::backdrop { background: #30251b6e; backdrop-filter: blur(3px); }
.app-dialog.wide { width: min(820px,calc(100vw - 32px)); }
.dialog-header { padding: 23px 27px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dialog-header h2 { font-size: 24px; }
.dialog-header p { font-size: 11px; margin-top: 6px; }
.dialog-content { padding: 24px 27px; }
.dialog-content > .notice { margin-bottom: 20px; }
.dialog-actions { padding: 17px 27px; border-top: 1px solid var(--line); display: flex; gap: 9px; align-items: center; justify-content: flex-end; background: #f3ede2; }
.dialog-actions .button.danger { margin-right: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.form-field.full, .form-field.wide, .full-width { grid-column: 1 / -1; }
.form-field > label, .field-label { color: #8c7a61; font-size: 11px; font-weight: 500; }
.form-field input, .form-field select, .form-field textarea { font-size: 12px; }
.ingredient-row { display: grid; }
.ingredient-row input, .ingredient-row select { font-size: 11px; padding: 9px 8px; }
.step-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.step-row > span { color: #aa9470; font: italic 18px var(--serif); padding-top: 8px; width: 23px; flex-shrink: 0; }
.step-row textarea { min-height: 65px; font-size: 12px; }
.step-row .icon-button { margin-top: 4px; }
.toast { position: fixed; bottom: 28px; left: calc(50% + 113px); transform: translateX(-50%); background: #514d3e; color: #fff9ed; border: 1px solid #77684c; border-radius: 8px; box-shadow: 0 6px 25px #30251b2b; padding: 13px 20px; font-size: 12px; z-index: 100; max-width: calc(100vw - 35px); }

.people-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.person-card { border: 1px solid var(--line); border-radius: 9px; padding: 25px 23px; text-align: center; }
.person-card > .avatar { width: 58px; height: 58px; font-size: 18px; margin-bottom: 13px; }
.person-card h3 { font-size: 17px; }
.person-card .username { font-size: 10px; color: #af9c81; margin: 5px 0 10px; }
.person-card p { font-size: 11px; line-height: 1.8; }
.person-card .button, .person-card .follow-button { margin-top: 18px; }
.profile-hero { gap: 24px; align-items: center; }
.profile-hero h1 { font-size: 33px; }
.profile-hero p { margin-top: 7px; color: #9b8970; font-size: 12px; max-width: 500px; }
.profile-hero .button { margin-left: auto; }
.profile-hero .username { color: #b29d80; font-size: 11px; margin-top: 3px; }
.empty-state { text-align: center; border: 1px dashed #d9cbb5; border-radius: 10px; padding: 50px 25px; color: #a9977b; background: #f6f0e4; grid-column: 1 / -1; }
.empty-state > svg { width: 44px; height: 44px; color: #b49f7d; margin-bottom: 15px; stroke-width: 1.2; }
.empty-state h2, .empty-state h3 { color: #8e7857; font-size: 22px; }
.empty-state p { font-size: 12px; max-width: 390px; margin: 10px auto 18px; line-height: 1.8; }
.shopping-layout { display: grid; gap: 25px; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--canvas); }
.auth-art { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 65px; overflow: hidden; }
.auth-art .brand { position: absolute; left: 45px; top: 35px; }
.auth-art h1 { font-size: 37px; text-align: center; max-width: 400px; line-height: 1.35; }
.auth-art h1 em { color: var(--wine); }
.auth-art p { max-width: 350px; text-align: center; margin-top: 17px; font-size: 12px; line-height: 1.9; }
.auth-card { max-width: 400px; width: calc(100% - 64px); margin: auto; padding: 45px 0; }
.auth-card h2 { font-size: 30px; margin-bottom: 9px; }
.auth-card > p { font-size: 12px; line-height: 1.8; }
.auth-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin: 27px 0 23px; }
.auth-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 11px 0; font-size: 12px; margin-bottom: -1px; }
.auth-tabs button.active { border-bottom-color: var(--wine); }
.auth-card form { display: grid; gap: 17px; }
.auth-card form > .button { margin-top: 3px; padding: 13px; }
.auth-card .notice { margin: 19px 0; }

/* Live application components. */
.brand { border: 0; background: transparent; text-align: left; }
.brand > span:last-child { font: 22px/1.2 var(--serif); letter-spacing: -.045em; white-space: nowrap; }
.brand em { font-weight: 400; color: #ac7775; }
.brand-symbol { width: 34px; height: 40px; display: flex; align-items: center; justify-content: center; }
.brand-symbol svg { width: 30px; height: 34px; stroke-width: 1.4; }
.brand small { font-size: 7px; letter-spacing: .13em; }
.app-sidebar > .sidebar-note { margin: auto 10px 23px; padding: 20px 8px; border-top: 0; border-bottom: 0; }
.little-heart { display: block; font: 25px/1 var(--serif); margin-bottom: 13px; }
.app-sidebar > .sidebar-bottom { padding-top: 0; margin-top: 0; border-top: 1px solid #e0d6c6; padding: 17px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.sidebar-bottom .user-chip { text-align: left; padding: 0; gap: 9px; }
.sidebar-bottom .user-chip strong { display: block; font-weight: 500; font-size: 11px; }
.sidebar-bottom .user-chip small { display: block; font-size: 9px; margin-top: 3px; }
.sidebar-bottom > .icon-button { width: 26px; height: 26px; }
.topbar > .button { margin-left: auto; }
.demo-banner { padding: 8px 44px; display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 9px; border-bottom: 1px solid #e4d8bf; }
.demo-banner button { border: 0; background: transparent; color: var(--wine); padding: 0; font-size: 9px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.app-footer { display: flex; justify-content: space-between; gap: 20px; padding: 21px 44px 25px; border-top: 1px solid var(--line); font-size: 9px; }
.page-section { margin-top: 37px; }
.section-head .eyebrow { margin-bottom: 7px; font-size: 7px; letter-spacing: .18em; }
.page-heading { margin: 5px 0 25px; }
.page-heading > .eyebrow { font-size: 8px; }
.page-heading > p, .page-heading > div > p { margin-top: 12px; max-width: 600px; font-size: 12px; }
.text-button { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; background: transparent; font: 11px/1.5 var(--sans); }
.text-button svg { width: 13px; height: 13px; }
.text-button:hover { color: var(--wine-dark); text-decoration: underline; text-underline-offset: 3px; }
.handwritten { font: italic 12px var(--serif); }
.hero-actions .text-button { font-size: 10px; }
.cookbook-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 19px; }
.book-cover { border: 0; border-radius: 0; }
.book-cover-eyebrow { text-transform: uppercase; font-size: 6px; letter-spacing: .17em; line-height: 1.7; max-width: 135px; margin-bottom: 4px; }
.book-cover-title { margin: 10px 0 8px; }
.book-cover-flourish { display: flex; align-items: center; justify-content: center; width: 60px; height: 42px; margin: 1px 0 9px; }
.book-cover-flourish::before, .book-cover-flourish::after { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .3; }
.book-cover-flourish svg { width: 24px; height: 28px; margin: 0 8px; opacity: .65; stroke-width: 1.3; transform: rotate(-20deg); }
.book-cover-owner { text-transform: uppercase; font-size: 6px; letter-spacing: .13em; line-height: 1.7; }
.book-cover.terracotta { background: #c99479; }
.book-cover:has(> img) { color: #fff7e9; }
.book-cover:has(> img)::before { background: linear-gradient(#36250d24,#211a0e78); opacity: 1; z-index: -1; }
.book-info { padding: 15px 15px 14px; }
.book-heading { display: flex; justify-content: space-between; align-items: center; gap: 7px; }
.book-heading h3 { font-size: 14px; line-height: 1.5; min-width: 0; }
.book-heading h3 button { font: inherit; border: 0; padding: 0; text-align: left; background: transparent; }
.book-heading > .icon-button { width: 25px; height: 25px; border: 0; padding: 4px; border-radius: 50%; background: transparent; min-width: 0; }
.book-heading > .icon-button svg { width: 15px; height: 15px; }
.book-heading > .icon-button.is-following svg { fill: #a4616620; }
.book-heading .badge { font-size: 7px; padding: 2px 5px; }
.book-info > p { margin-top: 7px; font-size: 9px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 30px; }
.book-info > .book-meta { padding: 11px 0 0; margin-top: 12px; border-top: 1px solid #eee6d8; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.book-meta .avatar-stack { align-items: center; }
.book-meta .avatar-stack > span:not(.avatar) { font-size: 8px; padding-left: 12px; white-space: nowrap; }
.book-meta .avatar-stack .avatar { margin-right: -7px; }
.book-meta .rating { font-size: 8px; gap: 3px; }
.book-meta .rating svg { width: 10px; height: 10px; }
.recipe-photo { display: block; padding: 0; border: 0; width: 100%; border-radius: 0; }
.photo-category { position: absolute; top: 11px; left: 11px; font-size: 8px; border-radius: 3px; padding: 3px 7px; box-shadow: 0 2px 8px #44351c09; }
.recipe-book-name { display: block; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.recipe-body h3 button { background: transparent; border: 0; font: inherit; text-align: left; padding: 0; line-height: 1.5; }
.recipe-tags { margin-top: 10px; gap: 4px; }
.recipe-tags .tag { font-size: 7px; padding: 2px 5px; }
.recipe-placeholder { width: 100%; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; }
.recipe-placeholder svg { width: 45px; height: 45px; stroke-width: 1; transform: rotate(-20deg); }
.recipe-photo.rose .recipe-placeholder { background: #ead2c7; color: #ac7a68; }
.recipe-photo.ochre .recipe-placeholder { background: #eadbb7; color: #af915c; }
.recipe-photo.terracotta .recipe-placeholder { background: #e2c2ac; color: #a67756; }
.button:not(.primary):not(.danger):not(.light) { background: transparent; }
.button:not(.primary):not(.danger):not(.light):hover { border-color: #c8b69d; }
.breadcrumb { margin-top: 0; padding: 0; border: 0; background: transparent; display: inline-flex; }
.cookbook-hero { grid-template-columns: 125px minmax(0,1fr); padding: 32px; gap: 28px; border: 1px solid #ddd0bb; border-radius: 8px; }
.cookbook-hero.blue { background: #dde6df; border-color: #c9d6cb; }
.cookbook-hero.wine { background: #ead6d3; border-color: #ddbeb8; }
.mini-book { width: 110px; height: 142px; border: 1px solid #a9816750; border-left: 9px solid #a9816735; background: #fff8e51c; box-shadow: 5px 5px 0 #fff4d533, 6px 6px 0 #a9816735; display: flex; align-items: center; justify-content: center; border-radius: 3px 5px 5px 3px; transform: rotate(-5deg); }
.mini-book svg { width: 43px; height: 43px; stroke-width: 1; }
.cookbook-hero h1 { font-size: 36px; }
.cookbook-hero p { margin-top: 12px; max-width: 650px; font-size: 12px; line-height: 1.9; }
.cookbook-hero-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 10px; }
.cookbook-hero .hero-actions { grid-column: 2; margin-top: -10px; gap: 9px; flex-wrap: wrap; }
.recipe-paper .paper-header { display: block; text-align: center; padding: 0; border: 0; }
.paper-flourish { font: 23px/1 var(--serif); margin-bottom: 17px; }
.recipe-title { max-width: 660px; margin: 0 auto; }
.recipe-description { font: italic 12px/1.9 var(--serif); max-width: 590px; margin: 18px auto; }
.recipe-paper .recipe-summary { display: flex; align-items: center; justify-content: center; gap: 23px; flex-wrap: wrap; max-width: none; margin: 20px 0 17px; font: 10px/1.7 var(--sans); }
.recipe-summary > span, .recipe-summary label { display: flex; align-items: center; gap: 6px; }
.recipe-summary svg { width: 13px; height: 13px; }
.recipe-summary input { text-align: center; font-size: 10px; }
.recipe-paper .recipe-tags { justify-content: center; margin-bottom: 25px; }
.paper-recipe-photo { width: 100%; height: 310px; object-fit: cover; border: 8px solid #fffef8; outline: 1px solid #e6dcc7; margin: 0 auto 25px; box-shadow: 3px 5px 15px #4c341012; }
.recipe-paper .recipe-columns { text-align: left; padding-top: 10px; }
.recipe-columns .section-head { margin: 10px 0 19px; display: block; }
.recipe-columns .section-head h2 { margin-bottom: 2px; }
.recipe-columns .handwritten { font-size: 10px; }
.ingredients-list li > span { flex: 1; }
.ingredients-list li > strong { font-size: 11px; font-weight: 500; white-space: nowrap; padding-left: 8px; }
.ingredients-list li small { display: block; font-size: 9px; margin-top: 3px; }
.paper-footnote { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e7dcc5; color: #b29d7d; font-size: 9px; line-height: 1.8; text-align: left; }
.paper-footnote a { text-decoration: underline; text-underline-offset: 2px; }
.paper-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }
.review-card > p { font-size: 12px; line-height: 1.9; margin: 14px 0 10px 46px; }
.review-author .text-button { font-weight: 500; font-size: 11px; }
.review-stars { margin-left: auto; letter-spacing: 2px; font-size: 13px; white-space: nowrap; }
.review-card .reply { margin-left: 46px; padding-left: 17px; font-size: 9px; }
.review-card .reply strong { font-size: 10px; font-weight: 500; }
.review-card .reply p { margin: 6px 0 0; }
.review-card .reply-toggle { margin-left: 46px; margin-top: 9px; font-size: 9px; }
.review-form .rating-input { border: 0; padding: 0; margin: 0 0 14px; gap: 7px; flex-wrap: wrap; }
.rating-input legend { font-size: 10px; color: #aa9573; margin-bottom: 9px; }
.review-form .rating-input label { margin: 0; }
.rating-input label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-input label span { cursor: pointer; border: 1px solid #dfd2ba; border-radius: 5px; padding: 6px 12px; display: block; font-size: 10px; }
.rating-input label input:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 3px; }
.review-form > .form-field { font-size: 11px; color: #a38a65; }
.review-form-actions { display: flex; gap: 10px; margin-top: 14px; }
.empty-reviews { text-align: center; padding: 30px; font-size: 12px; }
.form-error { grid-column: 1 / -1; }
.form-hint { font-size: 10px; margin: -5px 0 15px; line-height: 1.8; }
.form-field { font-size: 11px; }
.form-field > small { font-size: 9px; line-height: 1.7; }
.form-section { margin-top: 25px; padding-top: 10px; border-top: 1px solid var(--line); }
.form-section .section-head { margin: 12px 0 15px; }
.form-section h3 { font-size: 18px; }
.ingredient-row { grid-template-columns: minmax(0,1.4fr) 72px 85px minmax(0,1fr) 25px; gap: 7px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #e8decb; align-items: start; }
.ingredient-row > .icon-button { margin-top: 22px; width: 25px; }
.ingredient-row .form-field { gap: 5px; font-size: 9px; }
.ingredient-row .form-field input, .ingredient-row .form-field select { font-size: 11px; }
.ingredient-row > .ingredient-calories { grid-column: 1 / -1; color: #b3a183; font-size: 9px; margin: 0; display: block; }
.ingredient-calories summary { margin-bottom: 5px; }
.step-row > .form-field { flex: 1; }
.import-box { padding: 19px; border: 1px solid #e0d3bc; border-radius: 7px; margin-bottom: 24px; }
.import-box .eyebrow { font-size: 8px; margin-bottom: 12px; }
.inline-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inline-form > .form-field { flex: 1; min-width: 160px; }
.inline-form > .button { flex-shrink: 0; }
.inline-form > .form-error { width: 100%; flex: 0 0 100%; }
.import-box details { margin-top: 12px; font-size: 10px; }
.import-box summary { cursor: pointer; margin-bottom: 10px; }
.import-box details .button { margin-top: 9px; }
#import-status { margin-top: 11px; font-size: 10px; line-height: 1.7; }
.editor-photo { display: flex; align-items: center; justify-content: center; border: 1px dashed #d8c7aa; border-radius: 6px; min-height: 100px; overflow: hidden; font-size: 11px; }
.editor-photo > span { display: flex; align-items: center; gap: 10px; }
.editor-photo > span svg { width: 23px; height: 23px; stroke-width: 1; }
.editor-photo > img { max-height: 200px; width: 100%; object-fit: cover; }
.photo-upload { margin-top: 12px; overflow: hidden; }
.photo-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
#photo-status { margin-top: 8px; font-size: 9px; line-height: 1.8; }
.person-card h3 .text-button { font: inherit; }
.person-card > .muted { display: block; font-size: 9px; margin: 6px 0 12px; }
.person-card > .badge { margin-top: 20px; }
.people-grid { margin-top: 18px; }
.invitation { margin-top: 15px; }
.profile-hero { position: relative; display: block; text-align: center; border: 1px solid #e4d7c3; padding: 34px; border-radius: 8px; }
.profile-hero > .avatar { width: 70px; height: 70px; font-size: 21px; margin: 0 auto 19px; display: flex; }
.profile-hero > .eyebrow { display: block; font-size: 8px; }
.profile-hero > h1 { font-size: 31px; }
.profile-hero > p { margin: 10px auto; max-width: 550px; }
.profile-hero > p.muted { font-size: 10px; }
.profile-hero > .button { margin: 15px auto 0; }
.planner-select { max-width: 300px; margin: 25px 0; }
.shopping-layout { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.shopping-paper { padding: 25px 29px; }
.shopping-paper .section-head { margin-top: 0; }
.shopping-paper > .muted { font-size: 10px; margin: -10px 0 17px; }
.shopping-row { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px dashed #e5d7bc; font-size: 12px; cursor: pointer; }
.shopping-row > span { flex: 1; }
.shopping-row small { display: block; font-size: 9px; margin-top: 3px; }
.shopping-row strong { font-size: 11px; font-weight: 500; }
.shopping-row.checked > span, .shopping-row.checked > strong { text-decoration: line-through; }
.meal-plan { padding: 27px; border: 1px solid #e0d5c2; border-radius: 8px; align-self: start; }
.meal-plan h2 { font-size: 23px; margin-bottom: 25px; }
.meal-plan .eyebrow { font-size: 8px; margin-bottom: 9px; }
.meal-plan > p { font-size: 12px; line-height: 1.9; margin: 0 0 21px; }
.planned-meal { padding: 16px 0; border-top: 1px solid #ddd0b9; }
.planned-meal > .text-button { font-family: var(--serif); font-size: 15px; text-align: left; }
.planned-meal > div { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; }
.planned-meal label { display: flex; align-items: center; gap: 9px; font-size: 10px; }
.planned-meal input { width: 65px; padding: 5px 9px; font-size: 10px; }
.meal-plan > .button { margin-top: 13px; }
.auth-brand > svg { width: 35px; height: 40px; }
.auth-art > .eyebrow { margin-bottom: 21px; font-size: 8px; }
.auth-art > .handwritten { font-size: 12px; }
.auth-card .auth-tabs { margin-top: 0; margin-bottom: 32px; }
.auth-card > .eyebrow { font-size: 8px; }
.auth-card > form { margin-top: 25px; }
.auth-card > .notice { font-size: 10px; line-height: 1.8; }

@media (min-width: 1450px) {
  .app-shell { grid-template-columns: 248px minmax(0,1fr); }
  .app-sidebar { width: 248px; padding-left: 25px; padding-right: 25px; }
  .page-body { padding: 40px 55px 65px; }
  .topbar { padding: 0 55px; }
  .book-cover { height: 235px; }
  .hero-copy { padding-left: 45px; }
  .welcome-hero { min-height: 300px; }
  .demo-banner { padding-left: 55px; padding-right: 55px; }
  .app-footer { padding-left: 55px; padding-right: 55px; }
}
@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 200px minmax(0,1fr); }
  .app-sidebar { width: 200px; padding: 25px 14px 18px; }
  .brand-name, .brand strong { font-size: 21px; }
  .brand svg { width: 32px; }
  .nav-link { font-size: 12px; padding: 11px 12px; gap: 10px; }
  .topbar { padding: 0 28px; gap: 12px; height: 78px; }
  .page-body { padding: 28px 28px 45px; }
  .hero-copy { padding-left: 28px; }
  .hero-copy h1 { font-size: 33px; }
  .hero-copy p { font-size: 11px; }
  .welcome-hero { min-height: 265px; }
  .book-cover { padding-left: 28px; padding-right: 20px; }
  .book-cover-title { font-size: 21px; }
  .book-meta { padding: 14px 13px; }
  .book-meta h3 { font-size: 13px; }
  .recipe-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
  .recipe-paper { padding: 32px; }
  .paper-header { grid-template-columns: minmax(0,1fr) 220px; gap: 25px; }
  .recipe-columns { gap: 27px; }
  .people-grid { gap: 14px; }
  .person-card { padding: 21px 15px; }
  .cookbook-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 19px; }
  .book-cover { height: 220px; }
  .book-info { padding: 17px; }
  .book-info > p { font-size: 10px; }
  .book-heading h3 { font-size: 16px; }
  .book-meta .avatar-stack > span:not(.avatar), .book-meta .rating { font-size: 9px; }
  .demo-banner { padding-left: 28px; padding-right: 28px; }
  .app-footer { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 78px minmax(0,1fr); }
  .app-sidebar { width: 78px; padding: 24px 10px 18px; align-items: center; }
  .brand { padding: 0; min-height: 45px; }
  .brand svg { width: 36px; height: 42px; }
  .app-sidebar .brand > span, .app-sidebar .brand > div, .app-sidebar .brand-name, .app-sidebar .brand-tagline { display: none; }
  .sidebar-nav { width: 100%; margin-top: 34px; }
  .nav-link { font-size: 0; padding: 15px; justify-content: center; gap: 0; position: relative; }
  .nav-link svg { width: 21px; height: 21px; }
  .nav-link > span:not(.nav-count), .sidebar-label, .sidebar-note, .sidebar-user > div, .sidebar-user > button { display: none; }
  .sidebar-bottom { width: 100%; }
  .hero-copy h1 { font-size: 32px; }
  .hero-copy { padding: 28px 0 28px 25px; }
  .hero-copy p { margin-top: 12px; }
  .hero-actions { gap: 12px; margin-top: 17px; }
  .welcome-hero { grid-template-columns: 1.25fr 1fr; min-height: 260px; }
  .cookbook-grid { gap: 15px; }
  .book-cover { height: 180px; }
  .book-cover-title { font-size: 19px; }
  .toast { left: calc(50% + 39px); }
  .recipe-paper { padding: 29px; }
  .recipe-columns { grid-template-columns: 1fr 1.5fr; }
  .paper-header { grid-template-columns: minmax(0,1fr) 200px; }
  .recipe-title { font-size: 29px; }
  .app-sidebar .brand > span.brand-symbol { display: flex; }
  .app-sidebar > .sidebar-note { display: none; }
  .app-sidebar > .sidebar-bottom { border: 0; padding: 0; justify-content: center; margin-top: auto; }
  .app-sidebar > .sidebar-bottom > .icon-button { display: none; }
  .sidebar-bottom .user-chip > span:not(.avatar) { display: none; }
  .cookbook-hero h1 { font-size: 31px; }
  .cookbook-hero p { font-size: 11px; }
  .cookbook-hero-meta { font-size: 9px; gap: 10px; }
}
@media (max-width: 720px) {
  .app-shell { display: block; padding-bottom: 72px; }
  .app-sidebar { position: fixed; inset: auto 0 0; width: 100%; height: 68px; padding: 0 9px max(5px,env(safe-area-inset-bottom)); display: block; border-right: 0; border-top: 1px solid #e2d7c4; background: #f5efe3f5; backdrop-filter: blur(12px); z-index: 40; }
  .app-sidebar .brand, .sidebar-bottom, .sidebar-divider { display: none; }
  .sidebar-nav { display: flex; justify-content: space-around; align-items: center; gap: 2px; height: 100%; margin: 0; }
  .nav-link { width: auto; min-width: 53px; padding: 8px 7px 5px; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 8px; line-height: 1.3; }
  .nav-link svg { width: 20px; height: 20px; }
  .nav-link > span:not(.nav-count) { display: block; }
  .nav-link.active svg { stroke-width: 2; }
  .topbar { height: 70px; padding: 0 21px; gap: 16px; }
  .mobile-brand { flex-shrink: 0; }
  .mobile-brand svg { width: 30px; height: 34px; }
  .global-search input { font-size: 11px; padding-right: 0; }
  .global-search kbd { display: none; }
  .user-chip { padding-left: 3px; gap: 0; }
  .user-chip > span:not(.avatar), .user-chip > svg { display: none; }
  .user-chip .avatar { width: 30px; height: 30px; }
  .page-body { padding: 22px 21px 35px; }
  .welcome-hero { min-height: 249px; border-radius: 8px; margin-bottom: 26px; }
  .hero-copy { padding: 25px 0 25px 24px; }
  .hero-copy .eyebrow { font-size: 7px; letter-spacing: .16em; margin-bottom: 10px; }
  .hero-copy h1 { font-size: 28px; }
  .hero-copy p { font-size: 10px; line-height: 1.7; margin-top: 12px; }
  .hero-actions { gap: 12px; flex-wrap: wrap; }
  .hero-actions .button { font-size: 10px; padding: 9px 12px; }
  .section-head { gap: 12px; margin: 25px 0 16px; }
  .section-head h2 { font-size: 21px; }
  .section-head p { font-size: 10px; }
  .filter-row { gap: 6px; margin-bottom: 17px; }
  .filter-row select { font-size: 10px; padding: 5px 23px 5px 7px; }
  .cookbook-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .book-cover { height: 200px; padding: 24px 22px 18px 30px; }
  .book-cover-title { font-size: 21px; }
  .book-meta { padding: 13px; }
  .book-meta h3 { font-size: 13px; }
  .book-meta p { font-size: 9px; }
  .recipe-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .recipe-body { padding: 12px; }
  .recipe-body h3 { font-size: 13px; }
  .recipe-card-meta { font-size: 9px; }
  .cookbook-hero .book-cover { height: 215px; padding: 21px 15px 15px 23px; }
  .cookbook-hero .book-cover-title { font-size: 21px; }
  .breadcrumb { font-size: 9px; margin-bottom: 17px; }
  .recipe-paper { padding: 26px 23px; margin-bottom: 30px; }
  .paper-header { grid-template-columns: minmax(0,1fr) 170px; gap: 20px; padding-bottom: 23px; }
  .recipe-title { font-size: 27px; }
  .recipe-summary { font-size: 10px; line-height: 1.8; margin-top: 12px; }
  .recipe-columns { gap: 25px; grid-template-columns: 1fr 1.5fr; }
  .recipe-columns h2 { font-size: 19px; margin-bottom: 16px; }
  .ingredients-list li { font-size: 11px; }
  .instructions-list li { padding-left: 28px; font-size: 11px; line-height: 1.8; margin-bottom: 19px; }
  .instructions-list li::before { font-size: 15px; }
  .ingredient-calories { display: none; }
  .reviews-section { margin-top: 28px; }
  .reviews-section h2 { font-size: 22px; }
  .people-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .person-card { padding: 21px 15px; }
  .person-card h3 { font-size: 15px; }
  .person-card p { font-size: 10px; }
  .profile-hero { gap: 17px; flex-wrap: wrap; }
  .profile-hero > .avatar { width: 63px; height: 63px; font-size: 19px; }
  .profile-hero h1 { font-size: 26px; }
  .profile-hero p { font-size: 11px; }
  .profile-hero .button { margin: 0; }
  .shopping-layout { gap: 18px; }
  .app-dialog { max-height: calc(100dvh - 35px); }
  .dialog-header { padding: 20px; }
  .dialog-header h2 { font-size: 22px; }
  .dialog-content { padding: 20px; }
  .dialog-actions { padding: 15px 20px; }
  .toast { bottom: 84px; left: 50%; font-size: 11px; text-align: center; width: max-content; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { min-height: 300px; }
  .auth-art .brand { top: 25px; left: 30px; }
  .auth-art h1 { font-size: 28px; max-width: 350px; }
  .auth-art p { font-size: 11px; margin-top: 11px; }
  .auth-card { max-width: 380px; width: calc(100% - 50px); padding: 32px 0 40px; }
  .auth-card h2 { font-size: 27px; }
  .app-sidebar > .sidebar-bottom { display: none; }
  .topbar > .button { padding: 8px 10px; font-size: 9px; }
  .topbar > .button svg { width: 12px; height: 12px; }
  .demo-banner { padding: 8px 21px; font-size: 8px; align-items: flex-start; gap: 12px; }
  .demo-banner button { font-size: 8px; margin-top: 1px; }
  .app-footer { padding: 19px 21px 20px; display: block; text-align: center; line-height: 1.9; }
  .app-footer > span { display: block; }
  .app-footer > span + span { color: #bcaf99; }
  .page-section { margin-top: 29px; }
  .section-head .handwritten { display: none; }
  .section-head .eyebrow { font-size: 6px; letter-spacing: .14em; }
  .section-head .text-button { font-size: 9px; }
  .hero-actions .text-button { font-size: 9px; }
  .book-cover-eyebrow { font-size: 5px; letter-spacing: .14em; }
  .book-cover-owner { font-size: 5px; letter-spacing: .1em; }
  .book-info { padding: 13px; }
  .book-info > p { font-size: 9px; min-height: 29px; }
  .book-heading h3 { font-size: 13px; }
  .book-meta .avatar-stack > span:not(.avatar) { font-size: 8px; padding-left: 10px; }
  .book-meta .rating { font-size: 8px; }
  .book-info > .book-meta { gap: 4px; margin-top: 10px; padding-top: 10px; }
  .book-meta .avatar-stack .avatar { width: 20px; height: 20px; font-size: 6px; }
  .cookbook-hero { grid-template-columns: 110px minmax(0,1fr); padding: 24px; gap: 23px; }
  .mini-book { width: 90px; height: 120px; }
  .mini-book svg { width: 35px; height: 35px; }
  .cookbook-hero h1 { font-size: 29px; }
  .cookbook-hero .eyebrow { font-size: 7px; margin-bottom: 10px; }
  .cookbook-hero p { font-size: 10px; margin-top: 10px; }
  .cookbook-hero-meta { font-size: 8px; margin-top: 13px; gap: 9px; }
  .cookbook-hero .hero-actions { grid-column: 1 / -1; margin-top: 0; }
  .cookbook-hero .hero-actions .button { font-size: 10px; padding: 9px 12px; }
  .paper-recipe-photo { height: 245px; border-width: 6px; margin-bottom: 20px; }
  .recipe-description { font-size: 11px; margin: 15px auto; }
  .recipe-paper .recipe-summary { font-size: 9px; gap: 14px; margin: 16px 0; }
  .recipe-paper .recipe-summary input { font-size: 9px; width: 45px; }
  .recipe-paper .recipe-tags { margin-bottom: 22px; }
  .paper-actions .button { font-size: 10px; padding: 9px 13px; }
  .paper-footnote { margin-top: 23px; padding-top: 17px; font-size: 8px; }
  .review-card > p { font-size: 11px; }
  .review-form .rating-input label span { padding: 6px 10px; }
  .recipe-card .recipe-tags .tag { font-size: 6px; padding: 2px 4px; }
  .ingredient-row { grid-template-columns: minmax(0,1.3fr) 65px 75px minmax(0,1fr) 25px; }
  .ingredient-row .form-field input, .ingredient-row .form-field select { font-size: 10px; padding: 8px 6px; }
  .shopping-layout { grid-template-columns: 1fr; }
  .shopping-paper { padding: 23px; }
  .auth-art { padding: 105px 25px 30px; }
  .auth-art > .handwritten { margin-top: 20px; }
  .auth-art > .eyebrow { margin-bottom: 14px; }
  .auth-card .auth-tabs { margin-bottom: 25px; }
}
@media (max-width: 440px) {
  .page-body { padding: 20px 16px 30px; }
  .topbar { padding: 0 16px; height: 65px; gap: 12px; }
  .global-search svg { width: 16px; height: 16px; }
  .global-search input { padding-left: 25px; font-size: 10px; }
  .user-chip { display: none; }
  .welcome-hero { min-height: 251px; }
  .hero-copy { padding: 23px 0 23px 20px; }
  .hero-copy h1 { font-size: 27px; }
  .hero-copy p { font-size: 9px; max-width: 180px; }
  .hero-copy .eyebrow { font-size: 6px; letter-spacing: .12em; }
  .hero-actions { gap: 8px; margin-top: 15px; }
  .hero-actions .button { padding: 8px 10px; font-size: 9px; }
  .hero-actions .button svg { width: 11px; height: 11px; }
  .section-head h2 { font-size: 20px; }
  .filter-row { gap: 5px; }
  .cookbook-grid, .recipe-grid { gap: 11px; }
  .book-cover { height: 183px; padding: 23px 16px 17px 24px; }
  .book-cover-title { font-size: 19px; }
  .book-cover::after { inset: 9px 9px 9px 20px; }
  .book-meta { padding: 11px 10px; }
  .book-meta h3 { font-size: 12px; }
  .book-meta p { font-size: 8px; }
  .recipe-body { padding: 10px; }
  .recipe-body h3 { font-size: 12px; }
  .recipe-card .rating { font-size: 8px; }
  .recipe-card-meta { font-size: 8px; gap: 4px; }
  .recipe-card-meta svg { width: 10px; height: 10px; }
  .recipe-photo .tag { font-size: 7px; top: 8px; left: 8px; padding: 2px 5px; }
  .recipe-photo .icon-button { width: 24px; height: 24px; top: 7px; right: 7px; }
  .recipe-photo .icon-button svg { width: 13px; height: 13px; }
  .recipe-photo { aspect-ratio: 1.2; }
  .cookbook-hero .book-cover { height: 185px; padding: 16px 12px 13px 23px; }
  .cookbook-hero .book-cover-title { font-size: 17px; }
  .cookbook-hero .eyebrow { margin-bottom: 8px; }
  .recipe-paper { padding: 23px 19px; }
  .paper-header { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 23px; }
  .paper-header .recipe-photo { aspect-ratio: 1.7; width: 100%; transform: rotate(1.5deg); }
  .recipe-title { font-size: 29px; }
  .recipe-summary { font-size: 11px; }
  .recipe-columns { grid-template-columns: 1fr; gap: 28px; }
  .recipe-columns h2 { font-size: 21px; margin-bottom: 16px; }
  .ingredients-list li { font-size: 12px; padding: 10px 0; }
  .instructions-list li { font-size: 12px; line-height: 1.9; margin-bottom: 22px; padding-left: 32px; }
  .instructions-list li::before { font-size: 17px; }
  .reply { margin-left: 14px; padding-left: 14px; }
  .review-form { padding: 17px; }
  .people-grid { gap: 11px; }
  .person-card { padding: 21px 12px; }
  .form-grid { gap: 14px; }
  .form-grid > .form-field { grid-column: 1 / -1; }
  .ingredient-row { gap: 5px; }
  .ingredient-row .calories-field, .ingredient-row input[name*=calories] { display: none; }
  .ingredient-row input, .ingredient-row select { font-size: 10px; padding: 8px 6px; }
  .ingredient-row .icon-button { width: 25px; }
  .dialog-actions { flex-wrap: wrap; }
  .demo-banner { padding-left: 16px; padding-right: 16px; font-size: 7px; }
  .demo-banner button { font-size: 7px; }
  .hero-copy { z-index: 2; }
  .hero-actions .text-button { font-size: 8px; }
  .book-info { padding: 11px 10px; }
  .book-heading h3 { font-size: 12px; }
  .book-heading > .icon-button { width: 22px; height: 22px; }
  .book-heading > .icon-button svg { width: 13px; height: 13px; }
  .book-info > p { font-size: 8px; min-height: 27px; }
  .book-meta .avatar-stack > span:not(.avatar) { font-size: 7px; padding-left: 8px; }
  .book-meta .avatar-stack .avatar { width: 18px; height: 18px; font-size: 5px; }
  .book-meta .rating { font-size: 7px; }
  .book-meta .rating svg { width: 8px; height: 8px; }
  .book-cover-title { margin: 8px 0; }
  .book-cover-flourish { height: 33px; margin: 0 0 7px; }
  .book-cover-flourish svg { width: 20px; height: 23px; }
  .recipe-book-name { font-size: 6px; }
  .photo-category { font-size: 7px; top: 8px; left: 8px; padding: 3px 6px; }
  .recipe-card .recipe-tags { gap: 3px; }
  .recipe-card .recipe-tags .tag { font-size: 6px; }
  .cookbook-hero { grid-template-columns: 76px minmax(0,1fr); padding: 21px; gap: 17px; }
  .mini-book { width: 70px; height: 95px; border-left-width: 6px; }
  .mini-book svg { width: 28px; height: 28px; }
  .cookbook-hero h1 { font-size: 25px; }
  .cookbook-hero .eyebrow { font-size: 6px; letter-spacing: .1em; }
  .cookbook-hero p { font-size: 9px; }
  .cookbook-hero-meta { gap: 7px; font-size: 7px; }
  .cookbook-hero-meta > span:last-child { flex-basis: 100%; }
  .paper-recipe-photo { height: 195px; border-width: 5px; }
  .recipe-description { font-size: 10px; }
  .recipe-paper .recipe-summary { font-size: 8px; gap: 12px; }
  .recipe-paper .recipe-summary .rating { font-size: 8px; }
  .ingredients-list li > strong { font-size: 11px; }
  .review-card > p { margin-left: 0; }
  .review-card .reply { margin-left: 14px; }
  .review-card .reply-toggle { margin-left: 0; }
  .review-stars { font-size: 11px; letter-spacing: 1px; }
  .review-form .rating-input label span { padding: 6px 9px; font-size: 9px; }
  .ingredient-row { grid-template-columns: minmax(0,1.4fr) 60px 70px 25px; row-gap: 9px; }
  .ingredient-row > .form-field:nth-child(4) { grid-column: 1 / 4; grid-row: 2; }
  .ingredient-row > .icon-button { grid-column: 4; grid-row: 1; margin-top: 21px; }
  .ingredient-row > .ingredient-calories { display: block; grid-column: 1 / -1; }
  .inline-form .button { padding: 10px 13px; font-size: 10px; }
  .import-box { padding: 15px; }
  .import-box .inline-form { gap: 8px; }
  .import-box .inline-form .button { width: 100%; }
  .shopping-paper { padding: 20px; }
  .shopping-row { font-size: 11px; }
  .shopping-row strong { font-size: 10px; }
  .shopping-row small { font-size: 8px; }
  .profile-hero { padding: 29px 23px; }
  .profile-hero h1 { font-size: 28px; }
  .profile-hero > .eyebrow { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .page-body { max-width: 100%; }
  .recipe-paper { padding: 0; }
  .recipe-paper::before { display: none; }
  .recipe-columns { grid-template-columns: 1fr 1.7fr; }
  .ingredients-list li, .instructions-list li { break-inside: avoid; }
}