:root{--wine:#591e2b;--cream:#f5f1e9;--ink:#2a2925;--muted:#716e66;--gold:#ba9460}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 "Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}.preview{background:var(--wine);color:white;padding:9px 5%;font-size:10px;letter-spacing:1.5px}.preview span{float:right;letter-spacing:.3px;opacity:.8}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 5%;border-bottom:1px solid #ded8cd}.brand{text-decoration:none;display:flex;align-items:center;gap:10px;line-height:1}.brand>b{font:52px "Gill Sans","Gill Sans MT",Calibri,sans-serif;color:var(--wine)}.brand span{font-size:14px;letter-spacing:2px;font-weight:bold}.brand small{display:block;font-size:7px;letter-spacing:1.9px;margin-top:8px}nav{display:flex;gap:30px}nav button{border:0;background:none;color:var(--muted);padding:10px 0;border-bottom:2px solid transparent;font-size:14px}nav button.active{color:var(--wine);border-color:var(--wine)}.outline{border:1px solid #cfc6b8;background:none;padding:10px 18px;font-size:12px}main{max-width:1300px;margin:auto;padding:45px 5% 70px}.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--wine);font-weight:bold}h1,h2,h3{font-family:"Gill Sans","Gill Sans MT",Calibri,"Trebuchet MS",sans-serif;font-weight:normal;line-height:1.15}h1{font-size:46px;margin:10px 0 14px}h2{font-size:30px}h3{font-size:23px;margin:12px 0}.intro{color:var(--muted);max-width:600px}.hero{display:grid;grid-template-columns:1.2fr 1fr;background:#e8e2d5;min-height:360px;margin:30px 0 45px}.hero-text{padding:45px}.hero h2{font-size:38px;max-width:400px;margin:18px 0}.hero p{color:#635e53;max-width:400px}.hero-art{display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 60% 30%,#a6aa89,#6f785c);overflow:hidden;padding:30px}.hero-art img{height:290px;width:210px;object-fit:contain;transform:rotate(7deg);filter:drop-shadow(14px 18px 12px #0005)}.primary{background:var(--wine);color:white;border:0;padding:13px 24px;display:inline-block;text-decoration:none;font-size:13px}.text-button{border:0;background:none;color:var(--wine);padding:10px 0;font-size:13px;text-decoration:underline;text-underline-offset:5px}.section-head{display:flex;justify-content:space-between;align-items:center;margin:30px 0 20px}.section-head h2{margin:0}.section-head span{color:var(--muted);font-size:12px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.cover{height:285px;display:flex;justify-content:center;align-items:center;background:#e7e2d8;padding:22px}.cover img{max-width:100%;height:100%;object-fit:contain;filter:drop-shadow(6px 8px 5px #0003);transition:transform .2s}.card:hover img{transform:translateY(-5px)}.card p{color:var(--muted);font-size:13px;margin:5px 0}.tag{color:var(--wine);font-size:9px;letter-spacing:1.2px;text-transform:uppercase}.card h3{font-size:21px;margin-bottom:5px}.card button{margin-top:8px}.band{background:var(--wine);color:var(--cream);padding:30px 35px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:50px}.band h2{margin:5px 0 12px}.band p{font-size:13px;opacity:.8}.band .outline{color:white;border-color:#b59698;white-space:nowrap}.search{width:100%;padding:15px 18px;border:1px solid #d4ccbe;background:#fbf9f5;margin:20px 0 30px;font:inherit}.empty{padding:40px;background:#e9e3d8}.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.recipe{border:1px solid #ddd3c5;padding:30px;background:#fcfaf6}.recipe .number{font:50px "Gill Sans","Gill Sans MT",Calibri,sans-serif;color:#c5b795}.recipe p{font-size:14px;color:var(--muted)}footer{padding:25px 5%;border-top:1px solid #dcd4c6;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}dialog{border:0;padding:45px;max-width:620px;width:90%;background:var(--cream);color:var(--ink)}dialog::backdrop{background:#21171ccc}.close{position:absolute;right:15px;top:8px;border:0;background:none;font-size:30px}.detail{display:grid;grid-template-columns:130px 1fr;gap:25px}.detail img{width:130px}.notice{font-size:13px;padding:15px;background:#e9e1d4;color:#665c4c}.check{display:flex;gap:12px;align-items:start;font-size:14px;padding:20px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--wine);color:white;display:none;max-width:90%;font-size:13px}@media(max-width:800px){header{flex-wrap:wrap}.outline#help{font-size:10px;padding:8px}nav{order:3;width:100%;justify-content:space-around;gap:10px}.preview span{display:block;float:none;font-size:9px;margin-top:3px}h1{font-size:36px}.hero{grid-template-columns:1fr}.hero-text{padding:28px}.hero-art{height:270px}.hero-art img{height:230px}.grid{grid-template-columns:repeat(2,1fr);gap:22px 16px}.cover{height:230px;padding:16px}.recipe-grid{grid-template-columns:1fr}.band{display:block;padding:25px}.detail{grid-template-columns:1fr}.detail img{max-height:220px;object-fit:contain;width:100%}.section-head{align-items:start;gap:15px}.section-head h2{font-size:26px}}

.brand img{display:block;width:180px;height:auto;object-fit:contain}@media(max-width:480px){.brand img{width:145px}}

@media(max-width:600px){nav{gap:12px;overflow-x:auto;justify-content:flex-start}nav button{white-space:nowrap;font-size:12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.media-controls{display:flex;gap:15px;align-items:center}.media-controls .search{flex:1;min-width:0}.media-controls select{padding:15px;border:1px solid #d4ccbe;background:#fbf9f5;font:inherit}header nav{gap:22px}header{flex-wrap:wrap}@media(max-width:1100px){header nav{order:3;width:100%;overflow-x:auto;justify-content:flex-start}header nav button{white-space:nowrap}}@media(max-width:600px){.media-controls{display:block}.media-controls select{width:100%;margin-bottom:25px}}

@media(max-width:600px){header{padding:18px 5%;gap:16px}header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;overflow:visible}header nav button{white-space:normal;text-align:left;line-height:1.3;padding:12px 0;min-height:44px}main{padding-top:28px}h1{font-size:32px}.card h3{font-size:20px}.card button,.text-button{min-height:44px}.cover{height:220px;padding:12px}dialog{padding:36px 24px;max-height:90dvh;overflow-y:auto}.preview{line-height:1.5}}

.sample-button{display:block}.sample-image{background:#e7e2d8;padding:8px;text-align:center}.sample-image img{max-width:100%;max-height:55vh;object-fit:contain}.sample-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0}.sample-controls button:disabled{opacity:.35;cursor:default}.sample-controls span{font-size:13px}dialog .sample-controls+.text-button{display:block;margin-bottom:12px}

.header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.header-actions .outline{min-height:44px}#updates-count{display:inline-block;min-width:20px;line-height:20px;border-radius:50%;background:var(--wine);color:white;margin-left:5px;text-align:center}#updates-count[hidden]{display:none}.update-tabs{display:flex;gap:8px;margin:20px 0}.update-tabs button{min-height:44px}.update-item{border-top:1px solid #d6cbbd;padding:24px 0}.update-item h3{font-size:23px}.update-item p{color:var(--muted);font-size:15px}.notification-test{margin-top:24px;border-top:1px solid #d6cbbd;padding-top:15px}.notification-test p{font-size:14px}.notification-test button:disabled{opacity:.6;cursor:default}.check input{width:20px;height:20px;flex:none;accent-color:var(--wine)}#choices-status,#notification-status{font-size:14px;color:var(--wine)}@media(max-width:480px){.header-actions{gap:6px}.header-actions .outline{font-size:11px;padding:7px 10px}header{gap:12px}.update-tabs button{padding:10px 12px;font-size:12px}}

/* Compact phone navigation beside the logo. */
.mobile-menu{display:none}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){
 .preview{padding:5px 5%;font-size:9px;line-height:1.5}.preview span{display:none}
 header{display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px 14px;padding:12px 5%;align-items:center}
 header .brand{grid-column:1;grid-row:1 / 3;align-self:center;width:112px}header .brand img{width:112px}
 header nav{display:none}
 .mobile-menu{display:block;grid-column:2;grid-row:1;min-width:0}
 .mobile-menu select{width:100%;min-height:44px;border:1px solid #cfc6b8;border-radius:0;background:#fbf9f5;color:var(--wine);padding:8px 5px;font:12px 'Gill Sans','Gill Sans MT',Calibri,sans-serif;text-overflow:ellipsis}
 header .header-actions{grid-column:2;grid-row:2;display:flex;flex-wrap:nowrap;gap:6px;min-width:0}
 header .header-actions .outline{min-height:44px;padding:7px 8px;font-size:12px;white-space:nowrap}
 header .header-actions .about-extra{display:none}
 #updates-count{min-width:18px;line-height:18px;margin-left:2px;font-size:11px}
 main{padding-top:20px}
}
@media(max-width:360px){header{grid-template-columns:96px minmax(0,1fr);gap:6px 10px}header .brand,header .brand img{width:96px}header .header-actions .outline{padding:7px 6px;font-size:11px}}

#publish-update{display:grid;gap:16px}#publish-update label{display:grid;gap:5px;font-size:14px}#publish-update input,#publish-update textarea,#publish-update select{width:100%;padding:10px;border:1px solid #cfc6b8;background:#fbf9f5;font:inherit;color:var(--ink)}#publish-update button{min-height:44px}#publish-status{font-size:14px}#refresh-phone-app,#install-phone-app{min-height:44px}

/* Keep the two book actions together, with distinct tap areas. */
.card .text-button{display:block;width:fit-content;margin:0;padding:4px 0;min-height:32px;line-height:1.4}

.book-date{white-space:nowrap}

.account-panel{margin-top:32px;padding-top:24px;border-top:1px solid #d6cbbd}.account-panel>.text-button{display:block;min-height:44px}.account-form{display:grid;gap:14px;margin:20px 0}.account-form label{display:grid;gap:6px;font-size:14px}.account-form input,.account-form select{width:100%;padding:10px;border:1px solid #cfc6b8;background:#fbf9f5;font:inherit}.account-form .check{display:flex;align-items:flex-start}.account-form .check input{width:20px;margin-top:3px}.access-list{padding-left:20px;overflow-wrap:anywhere}.access-list li{margin-bottom:10px}