/* ===================================================================== The Journey to Asa's Kitchen — shared stylesheet Aesthetic: French palace-hotel "carte" by candlelight — deep velvet backdrop, glowing ivory paper, fine gold, engraved type ===================================================================== */ /* Web fonts are loaded via in each page's (parallel, non-blocking). Chinese text prefers the system brush-kaiti (Kaiti SC / STKaiti) so it renders instantly; LXGW WenKai is only a fallback for other systems. */ /* Ayaha 2 — decorative Victorian swash display serif, used for the AK monogram */ @font-face{ font-family:"Ayaha 2"; src:url("../fonts/Ayaha2.ttf") format("truetype"); font-weight:400;font-style:normal;font-display:swap; } :root{ --paper:#f7f0e1; --paper-2:#efe5cf; --ink:#2a2620; /* WCAG AA — ink-soft & gold tuned to ≥4.5:1 on both paper tones (impeccable audit) */ --ink-soft:#635a47; --gold:#7a5e22; --gold-deep:#5f4a1b; --line-strong:#9c8757; --gold-soft:#b89a5e; --gold-line:#cbb47f; --rule:#d8c8a3; --night:#241810; --shadow:rgba(50,38,18,.2); /* fine paper grain, tiled (inline SVG noise — costs no request) */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"); } *{box-sizing:border-box;} html{scroll-behavior:smooth;scrollbar-color:#5c4729 #1d130b;color-scheme:light;} ::selection{background:rgba(184,154,94,.4);color:#241c0c;} /* even heading lines; fewer orphans in prose */ .house-name,.recipe-title,.course-title,.block-title{text-wrap:balance;} .dish-desc,.serve-note,.block-sub,.intro,.tip{text-wrap:pretty;} body{ margin:0; color:var(--ink); /* candlelit velvet backdrop — a deep, warm espresso with a soft glow rising behind the carte and a gentle vignette toward the edges */ background-color:var(--night); background-image: var(--grain), radial-gradient(85% 55% at 50% 14%, rgba(226,182,114,.16), transparent 70%), radial-gradient(150% 110% at 50% 115%, rgba(0,0,0,.55), transparent 58%), linear-gradient(180deg,#2e2013 0%,#241810 46%,#1b1109 100%); background-attachment:fixed; font-family:"EB Garamond","Cormorant Garamond",Georgia,serif; font-size:1.125rem; /* rem respects user font settings */ line-height:1.7; padding:34px 16px 80px; text-rendering:optimizeLegibility; font-kerning:normal;font-optical-sizing:auto; touch-action:manipulation; -webkit-tap-highlight-color:rgba(122,94,34,.15); } /* language-specific typography */ body.zh{font-family:"Kaiti SC","STKaiti","LXGW WenKai","KaiTi","Noto Serif SC",serif;font-weight:400;line-height:2.0;letter-spacing:.04em;} body.zh .house-name, body.zh .course-title, body.zh .recipe-title, body.zh .block-title{ font-family:"Kaiti SC","STKaiti","LXGW WenKai","KaiTi","Noto Serif SC",serif;font-weight:400; } body.zh .house-name{letter-spacing:.14em;} body.zh .course-title{letter-spacing:.42em;} body.zh .block-title{letter-spacing:.34em;} body.fa{direction:rtl;font-family:"Vazirmatn","Tahoma",serif;line-height:2;} /* ---------- language switcher ---------- */ .langbar{ position:sticky;top:0;z-index:30; display:flex;justify-content:center;gap:6px; margin:-34px -16px 34px;padding:11px; background:rgba(22,14,7,.78); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(203,180,127,.22); } .langbar button{ font-family:"EB Garamond",serif;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase; color:#e9dcc0;background:transparent;border:1px solid rgba(201,178,127,.4); padding:6px 16px;border-radius:999px;cursor:pointer; transition:background-color .22s,border-color .22s,color .22s,box-shadow .22s; } .langbar button:hover{background:rgba(201,178,127,.16);border-color:rgba(201,178,127,.65);} .langbar button.active{ background:linear-gradient(180deg,#c5a05a,#a37f3a); border-color:#a37f3a;color:#241c0c; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 8px rgba(0,0,0,.35); } body.fa .langbar button{letter-spacing:.05em;} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold);outline-offset:2px;border-radius:2px; } /* ---------- the framed sheet ---------- */ .sheet{ max-width:720px;margin:0 auto; background-color:var(--paper); background-image: var(--grain), linear-gradient(180deg,rgba(255,255,255,.38),transparent 260px), radial-gradient(125% 55% at 50% 0%, rgba(255,250,238,.6), transparent 62%), radial-gradient(140% 80% at 50% 102%, rgba(118,90,48,.08), transparent 64%); /* the carte floats in candlelight: deep shadow below, faint warm halo around */ box-shadow: 0 0 0 1px rgba(203,180,127,.55), 0 30px 70px rgba(0,0,0,.55), 0 8px 22px rgba(0,0,0,.4), 0 0 110px rgba(232,192,122,.10); padding:14px; position:relative; } .frame{ border:1px solid var(--gold-line); outline:3px double var(--gold-line); outline-offset:5px; padding:56px 56px 52px; position:relative; } /* gold filigree corner marks — shown on EVERY screen size (phone & desktop alike) */ .frame::before,.frame::after, .sheet::before,.sheet::after{ content:"❖";position:absolute;color:var(--gold-soft);font-size:.82rem;opacity:.85;pointer-events:none; } .frame::before{top:13px;inset-inline-start:17px;} .frame::after{top:13px;inset-inline-end:17px;} .sheet::before{bottom:26px;inset-inline-start:30px;} .sheet::after{bottom:26px;inset-inline-end:30px;} @media (max-width:560px){ .frame{padding:46px 26px 42px;} body{font-size:1.0625rem;} /* comfortable touch targets on phones */ .langbar{gap:8px;} .langbar button{padding:10px 18px;} /* keep the corner marks tucked neatly into the smaller mobile frame */ .frame::before{top:11px;inset-inline-start:13px;} .frame::after{top:11px;inset-inline-end:13px;} .sheet::before{bottom:24px;inset-inline-start:24px;} .sheet::after{bottom:24px;inset-inline-end:24px;} } /* ===================== DESKTOP — a wider, grander carte ===================== */ @media (min-width:860px){ .sheet{max-width:856px;padding:18px;} .frame{padding:88px 96px 76px;} /* nudge the corner marks outward for the larger desktop frame */ .frame::before,.frame::after,.sheet::before,.sheet::after{font-size:.9rem;} .frame::before{top:16px;inset-inline-start:22px;} .frame::after{top:16px;inset-inline-end:22px;} .sheet::before{bottom:34px;inset-inline-start:40px;} .sheet::after{bottom:34px;inset-inline-end:40px;} /* grander masthead (display sizes are fluid via clamp(); only fixed bits here) */ .crest .monogram{width:210px;height:210px;} .crest .monogram .m-a,.crest .monogram .m-k{font-size:4rem;} .estab{letter-spacing:.46em;} .dbl-rule{max-width:400px;margin:34px auto 38px;} /* menu: more presence */ .course{margin:48px 0 10px;} .course-title{letter-spacing:.32em;} .dish{padding:20px 14px;} .dish-desc{font-size:1.08rem;margin-top:8px;} /* recipe pages: photo and secondary type scale */ .photo{max-width:480px;margin-top:34px;} .meta{gap:46px;margin:40px 0 8px;} .meta .v{font-size:1.2rem;} .serve-note{font-size:1.08rem;max-width:580px;} .block-title{margin:52px 0 6px;} .ing{max-width:500px;font-size:1.05rem;} ol.steps{max-width:600px;} ol.steps li{padding-bottom:22px;} .tip{max-width:600px;font-size:1.04rem;} } /* extra-wide screens — a touch more air without sprawling */ @media (min-width:1200px){ .sheet{max-width:900px;} } /* wide desktop — language switcher as a vertical pill at the side */ @media (min-width:1100px){ .langbar{ position:fixed;top:50%;transform:translateY(-50%); inset-inline-end:22px;left:auto; flex-direction:column;gap:7px; margin:0;padding:8px;width:auto; background:rgba(22,14,7,.72); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1px solid rgba(203,180,127,.3);border-radius:26px;border-bottom-width:1px; box-shadow:0 16px 40px rgba(0,0,0,.5); } .langbar button{width:100%;text-align:center;font-size:.8rem;padding:7px 18px;border-radius:999px;} } /* ---------- entrance — the carte settles into the candlelight ---------- */ @keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} .lang.show>*{animation:rise .55s cubic-bezier(.22,.61,.21,1) both;animation-delay:.32s;} .lang.show>:nth-child(1){animation-delay:.02s;} .lang.show>:nth-child(2){animation-delay:.06s;} .lang.show>:nth-child(3){animation-delay:.1s;} .lang.show>:nth-child(4){animation-delay:.14s;} .lang.show>:nth-child(5){animation-delay:.18s;} .lang.show>:nth-child(6){animation-delay:.22s;} .lang.show>:nth-child(7){animation-delay:.26s;} .lang.show>:nth-child(8){animation-delay:.3s;} @media (prefers-reduced-motion:reduce){ .lang.show>*{animation:none;} html{scroll-behavior:auto;} } /* ---------- masthead ---------- */ .crest{text-align:center;margin-bottom:6px;} .crest .monogram{ display:inline-flex;align-items:center;justify-content:center; position:relative;width:190px;height:190px;margin-bottom:8px; font-family:"Ayaha 2","Cinzel Decorative",serif; background:url("../images/monogram-lace.svg") center/contain no-repeat; filter:drop-shadow(0 10px 18px rgba(50,38,18,.28)); } .crest .monogram .m-a, .crest .monogram .m-k{ position:relative;z-index:1; font-family:"Ayaha 2","Cinzel Decorative",serif; font-weight:400;font-size:3.6rem;line-height:1; color:#f5eeda;text-shadow:0 1px 2px rgba(0,0,0,.4); } .crest .monogram .m-a{margin-right:-.04em;} .estab{ text-align:center;font-family:"Cormorant Garamond",serif; font-size:clamp(.8rem, .76rem + .18vw, .9rem);letter-spacing:.4em;text-transform:uppercase;color:var(--gold); font-variant-numeric:lining-nums; } body.fa .estab{letter-spacing:.12em;} .house-name{ text-align:center; font-family:"Cormorant Garamond",serif;font-weight:600; font-size:clamp(2.5rem, 1.3rem + 4.2vw, 4.4rem);line-height:1.08;margin:.18em 0 .1em;color:#262219; /* letterpress — as if pressed into the paper */ text-shadow:0 1px 0 rgba(255,255,255,.55); } .house-sub{ text-align:center;font-style:italic;color:var(--ink-soft); font-size:clamp(1.02rem, .93rem + .42vw, 1.2rem);margin-bottom:6px; } body.zh .house-sub,body.fa .house-sub{font-style:normal;} .flourish{ text-align:center;color:var(--gold-soft);font-size:1.15rem;letter-spacing:.4em;margin:18px 0 4px; text-shadow:0 1px 0 rgba(255,255,255,.5); } /* twin rules with a small gold diamond at the centre */ .dbl-rule{ border:none;height:0;border-top:1px solid var(--gold-line); position:relative;margin:28px auto 32px;max-width:340px; } .dbl-rule::after{ content:"";position:absolute;left:0;right:0;top:3px;border-top:1px solid var(--gold-line); } .dbl-rule::before{ content:"◆";position:absolute;left:50%;top:2px;transform:translate(-50%,-50%); color:var(--gold-soft);font-size:.62rem;line-height:1; background:var(--paper);padding:0 14px;z-index:1; } /* ---------- menu (homepage) ---------- */ .course{margin:40px 0 8px;} .course-title{ text-align:center;font-family:"Cormorant Garamond",serif; font-size:clamp(1.45rem, 1.3rem + .6vw, 1.72rem);letter-spacing:.28em;text-transform:uppercase;color:var(--gold); margin:0 0 4px;text-shadow:0 1px 0 rgba(255,255,255,.45); } body.fa .course-title{letter-spacing:.08em;} /* hairline that breathes — fades out at both ends */ .course-rule{ width:150px;height:1px;border:none;margin:2px auto 24px; background:linear-gradient(90deg,transparent,var(--gold-line) 28%,var(--gold-line) 72%,transparent); } .dish{display:block;text-decoration:none;color:inherit;text-align:center; padding:16px 10px;position:relative;} .dish + .dish{border-top:1px dotted var(--rule);} .dish::before{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none; background:radial-gradient(75% 90% at 50% 50%, rgba(201,178,127,.16), transparent); opacity:0;transition:opacity .35s ease;} .dish:hover::before{opacity:1;} .dish-name{ font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--ink); font-size:clamp(1.55rem, 1.35rem + .9vw, 2rem); display:inline-block;position:relative;transition:color .25s; } .dish:hover .dish-name{color:var(--gold-deep);} .dish-name::after{ content:"";position:absolute;left:50%;right:50%;bottom:-3px;height:1px;background:var(--gold); transition:.3s ease; } .dish:hover .dish-name::after{left:0;right:0;} .dish-desc{font-style:italic;color:var(--ink-soft);font-size:1rem;margin-top:6px;} body.zh .dish-desc,body.fa .dish-desc{font-style:normal;} .coming{text-align:center;color:var(--ink-soft);font-style:italic;margin-top:34px;font-size:.96rem;letter-spacing:.04em;} body.zh .coming,body.fa .coming{font-style:normal;} /* ---------- recipe page ---------- */ .recipe-kicker{ text-align:center;font-family:"Cormorant Garamond",serif; font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold); font-variant-numeric:lining-nums; } body.fa .recipe-kicker{letter-spacing:.1em;} .recipe-title{ text-align:center;font-family:"Cormorant Garamond",serif;font-weight:600; font-size:clamp(2.3rem, 1.7rem + 2.6vw, 3.1rem);line-height:1.12;margin:.12em 0 .12em;color:#262219; text-shadow:0 1px 0 rgba(255,255,255,.55); } .recipe-tag{text-align:center;font-style:italic;color:var(--ink-soft);font-size:clamp(1.05rem, .97rem + .36vw, 1.18rem);margin-bottom:4px;} body.zh .recipe-tag,body.fa .recipe-tag{font-style:normal;} /* the photograph — an ivory mat with a gold fillet, like a framed print */ .photo{margin:28px auto 0;max-width:430px;} .photo img{width:100%;height:auto;display:block; border:9px solid #fffdf6; outline:1px solid var(--gold-line); box-shadow:0 20px 45px rgba(50,38,18,.32),0 4px 12px rgba(50,38,18,.18);} .photo figcaption{text-align:center;font-style:italic;color:var(--ink-soft);font-size:.85rem;margin-top:14px;} body.zh .photo figcaption,body.fa .photo figcaption{font-style:normal;} .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:34px; margin:32px 0 6px;padding:18px 0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);} .meta div{text-align:center;} .meta .k{display:block;font-family:"Cormorant Garamond",serif; font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);} body.fa .meta .k{letter-spacing:.05em;} .meta .v{font-size:1.12rem;font-weight:500;font-variant-numeric:lining-nums;} .serve-note{ text-align:center;color:var(--ink-soft);font-style:italic; margin:26px auto 0;max-width:520px;font-size:1rem; } body.zh .serve-note,body.fa .serve-note{font-style:normal;} .block-title{ text-align:center;font-family:"Cormorant Garamond",serif; font-size:clamp(1.4rem, 1.3rem + .45vw, 1.55rem);letter-spacing:.22em;text-transform:uppercase;color:var(--gold); margin:44px 0 6px;text-shadow:0 1px 0 rgba(255,255,255,.45); } body.fa .block-title{letter-spacing:.06em;} .block-sub{text-align:center;font-style:italic;color:var(--ink-soft);font-size:.92rem;margin:-2px 0 18px;} body.zh .block-sub,body.fa .block-sub{font-style:normal;} .block-rule{ width:130px;height:1px;border:none;margin:0 auto 22px; background:linear-gradient(90deg,transparent,var(--gold-line) 28%,var(--gold-line) 72%,transparent); } /* ingredients as a carte with dotted leaders */ .ing{list-style:none;padding:0;margin:0 auto;max-width:460px;} .ing li{display:flex;align-items:baseline;gap:8px;padding:8px 0;} .ing .nm{white-space:nowrap;} .ing .dots{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-4px);} /* no diagonal-fractions here — EB Garamond renders standalone digits as tiny numerators with it (250 g → ²⁵⁰ g) */ .ing .amt{white-space:nowrap;color:var(--gold);font-variant-numeric:lining-nums tabular-nums;} /* steps — engraved gold medallion numerals */ ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 auto;max-width:560px;} ol.steps li{position:relative;padding:0 0 20px 54px;} body.fa ol.steps li{padding:0 54px 20px 0;} ol.steps li::before{ counter-increment:s;content:counter(s); position:absolute;inset-inline-start:0;top:0; width:32px;height:32px;border:1px solid var(--gold);border-radius:50%; color:var(--gold);font-family:"Cormorant Garamond",serif;font-size:1.05rem;font-weight:600; /* lining figures — oldstyle digits (3,4,5,7,9) descend below the baseline and sit visibly off-centre inside the circle */ font-variant-numeric:lining-nums tabular-nums;line-height:1; display:flex;align-items:center;justify-content:center; background:rgba(255,253,247,.5); box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(203,180,127,.55); } body.fa ol.steps li::before{font-family:"Vazirmatn",serif;} /* full hairline border + tint — no side-stripe accent (banned pattern) */ .tip{max-width:560px;margin:32px auto 0;padding:16px 20px; background:var(--paper-2); border:1px solid rgba(154,124,56,.45); border-radius:6px;font-size:.98rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.4);} .tip b{color:var(--gold);} .signoff{text-align:center;color:var(--gold-soft);font-size:1.15rem;letter-spacing:.4em;margin:42px 0 6px; text-shadow:0 1px 0 rgba(255,255,255,.5);} .backlink{display:block;text-align:center;margin-top:20px; font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.05rem; color:var(--gold);text-decoration:none;letter-spacing:.04em;transition:color .2s;} .backlink:hover{color:var(--gold-deep);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--gold-soft);} .footer-note{text-align:center;color:var(--ink-soft);font-size:.78rem;letter-spacing:.22em; text-transform:uppercase;margin-top:42px;} body.fa .footer-note,body.zh .footer-note{text-transform:none;letter-spacing:.04em;} /* ---------- visitor links on the menu ---------- */ .visit-links{text-align:center;margin:48px 0 0; font-family:"Cormorant Garamond",serif;font-size:1.18rem;letter-spacing:.05em;} .visit-links a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent; padding-bottom:1px;transition:color .2s,border-color .2s;} .visit-links a:hover{border-bottom-color:var(--gold-soft);color:var(--gold-deep);} .visit-links .sep{color:var(--gold-soft);margin:0 .55em;} /* ---------- forms (guestbook / submit recipe / admin) ---------- */ .intro{text-align:center;color:var(--ink-soft);max-width:540px;margin:0 auto 6px;font-size:1.02rem;font-style:italic;} body.zh .intro,body.fa .intro{font-style:normal;} .form{max-width:520px;margin:26px auto 0;} .field{margin:0 0 18px;} .field label{display:block;font-family:"Cormorant Garamond",serif;font-size:.82rem;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);margin-bottom:7px;} body.fa .field label,body.zh .field label{text-transform:none;letter-spacing:.05em;} .field input,.field textarea{ width:100%;font-family:inherit;font-size:1rem;color:var(--ink); background:#fffdf7;border:1px solid var(--line-strong);border-radius:10px;padding:11px 14px; outline:none;transition:border-color .15s,box-shadow .15s; box-shadow:inset 0 1px 3px rgba(50,38,18,.06); } .field input:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(122,94,34,.22);} .field textarea{min-height:150px;resize:vertical;line-height:1.6;} .cf-wrap{display:flex;justify-content:center;margin:6px 0 16px;min-height:65px;} .form-actions{text-align:center;} .btn{display:inline-block;font-family:"Cormorant Garamond",serif;font-size:1.08rem;letter-spacing:.08em; color:#fffdf7;background:linear-gradient(180deg,#8a6a26,#6d5318); border:1px solid transparent;border-radius:999px; padding:11px 34px;cursor:pointer; transition:background .2s,box-shadow .2s,transform .2s,color .2s; text-shadow:0 1px 1px rgba(0,0,0,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px rgba(30,20,8,.28);} .btn:hover{background:linear-gradient(180deg,#94732c,#75591c);transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 8px rgba(30,20,8,.32);} .btn:active{transform:none;} .btn:disabled{opacity:.5;cursor:default;transform:none;} .btn.ghost{color:var(--gold);background:transparent;border-color:var(--gold); text-shadow:none;box-shadow:none;} .btn.ghost:hover{background:rgba(201,178,127,.14);transform:none;} .btn.small{font-size:.92rem;padding:6px 18px;} .form-msg{text-align:center;margin-top:16px;font-size:1rem;min-height:1.3em;} .form-msg.ok{color:#2f6a3a;} .form-msg.err{color:#a23b2f;} /* guestbook entries */ .gb-list{max-width:560px;margin:6px auto 0;} .gb-entry{border-top:1px dotted var(--rule);padding:18px 4px;} .gb-entry:first-child{border-top:none;} .gb-name{font-family:"Cormorant Garamond",serif;font-weight:600;color:var(--gold);font-size:1.18rem;} .gb-msg{margin:5px 0 0;white-space:pre-wrap;} .gb-date{display:block;color:var(--ink-soft);font-size:.78rem;margin-top:7px;letter-spacing:.02em;} .gb-empty{text-align:center;color:var(--ink-soft);font-style:italic;margin:22px 0;} body.zh .gb-empty,body.fa .gb-empty{font-style:normal;} /* admin moderation rows */ .adm-row{border-top:1px dotted var(--rule);padding:16px 4px;display:flex;gap:14px;align-items:flex-start;} .adm-row:first-child{border-top:none;} .adm-body{flex:1;} .adm-actions{display:flex;flex-direction:column;gap:6px;white-space:nowrap;} /* language visibility */ .lang{display:none;} .lang.show{display:block;} /* ===================================================================== Print / Save-as-PDF — keep the candlelit carte (velvet backdrop, ivory paper, gold). Only the active language prints (.lang.show). We force colour printing and drop the on-screen nav controls. ===================================================================== */ @media print{ @page{margin:0;} html,body{ -webkit-print-color-adjust:exact;print-color-adjust:exact;color-adjust:exact; /* a fixed backdrop only paints page 1 when printing — let it scroll */ background-attachment:scroll !important; } /* drop the interactive nav; keep all the decoration (crest, ❦, gold rules) */ .langbar,.backlink{display:none !important;} .frame{padding-top:30px !important;} /* keep a heading from being orphaned from its list, and don't split items */ .recipe-title,.house-name,.course-title,.block-title{break-after:avoid;page-break-after:avoid;} .ing li,.steps li,.meta div,.tip,.photo{break-inside:avoid;page-break-inside:avoid;} /* a portrait photo shouldn't swallow a whole sheet */ .photo img{max-height:120mm;width:auto;margin:0 auto;} /* links print as plain text, no trailing URLs */ a[href]::after{content:"" !important;} }