:root { --paper:#f6f0e4; --card:#f8efd9; --ink:#272722; --red:#b63828; --blue:#1f416e; --green:#516d38; --line:rgba(41,38,29,.23); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",Arial,sans-serif; }
body::before { content:""; pointer-events:none; position:fixed; inset:0; z-index:20; opacity:.2; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; } img { display:block; width:100%; height:100%; object-fit:cover; } .sr-only { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.site-header { min-height:93px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:11px clamp(25px,4.2vw,72px); border-bottom:1px solid var(--line); background:rgba(246,240,228,.95); position:sticky; top:0; z-index:10; }
.brand { grid-column:2; grid-row:1; display:flex; align-items:center; justify-self:center; gap:7px; font:700 clamp(1.55rem,2.25vw,2.2rem)/1 Kalam,cursive; white-space:nowrap; }.brand span { color:var(--red); }.brand svg { width:34px; height:32px; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.main-nav { grid-column:1; grid-row:1; display:flex; align-items:center; gap:clamp(15px,2vw,31px); font:.76rem "DM Mono",monospace; text-transform:none; }.main-nav a { padding:10px 0; position:relative; }.main-nav a.active::after,.main-nav a:hover::after { content:""; position:absolute; bottom:3px; left:2px; width:25px; height:2px; background:var(--red); transform:rotate(-2deg); }
.header-links { grid-column:3; grid-row:1; justify-self:end; display:flex; gap:18px; align-items:center; font:.75rem "DM Mono",monospace; }.icon-link svg { width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.icon-link:hover svg { stroke:var(--red); }.menu-toggle { display:none; }
.route { min-height:150px; max-width:1450px; margin:0 auto; padding:34px clamp(40px,7vw,112px) 9px; display:grid; grid-template-columns:1fr .95fr 1fr; align-items:center; }.place { display:flex; align-items:center; gap:9px; font:700 clamp(1.35rem,2vw,2rem) Kalam,cursive; }.germany { color:var(--blue); }.vietnam { justify-self:end; color:var(--red); }.landmark { width:111px; height:60px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }.pagoda { width:67px; height:62px; }.pin { font-size:1.95rem; line-height:1; color:var(--red); }.route-line { height:49px; margin-top:28px; border-top:2px dashed var(--blue); position:relative; transform:rotate(-3deg); }.route-line::before,.route-line::after { content:""; position:absolute; top:-11px; width:28px; height:20px; border-top:2px dashed var(--blue); }.route-line::before { left:-12px; border-radius:70% 0 0 0; }.route-line::after { right:-13px; border-radius:0 70% 0 0; }.route-line span { position:absolute; top:-17px; left:49%; font-size:1.35rem; transform:rotate(17deg); }
.hero { position:relative; max-width:1440px; margin:0 auto; padding:0 clamp(28px,4.2vw,68px); display:grid; grid-template-columns:.94fr 1.24fr .94fr; align-items:center; gap:clamp(12px,2.4vw,38px); }.hero::before,.hero::after { content:""; position:absolute; width:74px; height:120px; border-left:1.5px solid var(--green); border-radius:80% 0 0 80%; opacity:.65; }.hero::before { left:11px; top:144px; transform:rotate(-40deg); }.hero::after { right:12px; top:55px; transform:rotate(36deg) scaleX(-1); }
.taped-photo { position:relative; padding:8px; height:clamp(350px,35vw,499px); background:#f7f0e3; box-shadow:4px 8px 14px rgba(67,48,25,.24); }.taped-photo::before,.taped-photo::after { content:""; position:absolute; z-index:2; width:91px; height:24px; background:rgba(214,195,151,.67); }.taped-photo::before { top:-12px; left:calc(50% - 45px); transform:rotate(-3deg); }.taped-photo::after { display:none; }.photo-cologne { transform:rotate(-5.8deg) translateY(18px); }.photo-hanoi { transform:rotate(5.8deg) translateY(11px); }.photo-hanoi::before { transform:rotate(5deg); }.photo-note { position:absolute; z-index:3; bottom:-38px; left:26px; padding:4px 8px; background:#f8eed7; font:1.05rem/1.12 Kalam,cursive; transform:rotate(-4deg); box-shadow:0 2px 2px rgba(41,30,18,.08); }.photo-hanoi .photo-note { right:10px; left:auto; transform:rotate(4deg); }
.paper-card { background:var(--card); box-shadow:0 8px 16px rgba(66,48,25,.17); }.hero-story { min-height:393px; position:relative; z-index:1; padding:clamp(33px,4vw,59px); background-color:var(--card); background-image:linear-gradient(90deg,transparent 91%,rgba(97,74,45,.05) 91%),linear-gradient(rgba(97,74,45,.04) 1px,transparent 1px); background-size:14px 14px; }.eyebrow { margin:0 0 8px; color:var(--red); font-size:1.62rem; }.handwritten { font-family:Kalam,cursive; } h1,h2 { margin:0; font-family:Fraunces,Georgia,serif; font-weight:500; letter-spacing:-.052em; line-height:.96; } h1 { font-size:clamp(3.15rem,5.3vw,5.45rem); }.hero-story > p:not(.eyebrow) { max-width:350px; margin:23px 0 26px; line-height:1.62; font-size:1.02rem; }.button { display:inline-flex; align-items:center; gap:28px; padding:12px 18px; color:#fff8ec; background:var(--red); box-shadow:3px 3px 0 rgba(40,36,28,.16); font:1.13rem Kalam,cursive; transform:rotate(-1deg); }.button:hover { transform:rotate(1deg) translateY(-2px); }.button span,.text-link span { font-size:1.35rem; }.ink-sketch { position:absolute; right:37px; top:79px; color:rgba(42,40,34,.45); font:4.5rem/.35 serif; transform:rotate(-16deg); }.small-food-photo { position:absolute; z-index:3; width:59%; height:42%; left:-45px; bottom:-43px; padding:6px; background:#f8f1e3; box-shadow:4px 7px 11px rgba(62,46,25,.22); transform:rotate(-7deg); }
.quick-link { margin:106px auto 35px; max-width:800px; text-align:center; }.quick-link a { color:var(--green); font:clamp(1.65rem,3vw,2.45rem) Kalam,cursive; }.quick-link a span { margin-left:12px; }.quick-link a:hover { color:var(--red); }
.latest { max-width:1440px; margin:0 auto; padding:0 clamp(28px,4.2vw,68px) 112px; display:grid; grid-template-columns:1.08fr repeat(6,1fr); gap:16px; align-items:start; }.sticky-note { min-height:172px; padding:28px 18px; background:#e9dfbd; color:var(--blue); box-shadow:3px 4px 5px rgba(57,44,21,.17); font:2.05rem/1.03 Kalam,cursive; transform:rotate(-4deg); }.mini-post { display:block; transform:rotate(var(--tilt,-2deg)); transition:transform .18s ease; }.mini-post:nth-of-type(2) { --tilt:2deg; }.mini-post:nth-of-type(3) { --tilt:-1deg; }.mini-post:nth-of-type(4) { --tilt:2deg; }.mini-post:nth-of-type(5) { --tilt:-2deg; }.mini-post:nth-of-type(6) { --tilt:1deg; }.mini-post img { aspect-ratio:.94; padding:5px 5px 27px; background:#faf3e5; box-shadow:2px 5px 8px rgba(61,45,25,.17); }.mini-post span { display:block; margin-top:9px; text-align:center; font:600 .92rem/1.35 "DM Sans",Arial,sans-serif; }.mini-post:hover { transform:rotate(0deg) translateY(-8px); }
.travel-section { padding:clamp(76px,9vw,135px) clamp(28px,8.5vw,145px); display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(55px,10vw,155px); background:#dfe3ce; }.travel-section h2,.about-section h2,footer h2 { font-size:clamp(2.5rem,4.6vw,4.7rem); }.intro { max-width:380px; line-height:1.7; }.city-list { align-self:center; }.city-row { display:grid; grid-template-columns:40px 1fr 1.5fr 25px; gap:13px; align-items:baseline; padding:19px 0; border-bottom:1px solid rgba(48,59,35,.25); }.city-row span { font:.72rem "DM Mono",monospace; }.city-row strong { font:1.8rem Fraunces,Georgia,serif; font-weight:500; }.city-row em { font-style:normal; font-size:.9rem; }.city-row b { font-size:1.2rem; }.city-row:hover { color:var(--red); padding-left:8px; }
.little-notes { padding:clamp(76px,9vw,130px) clamp(28px,8.5vw,145px); background:#f4e6ce; }.little-notes-heading { max-width:600px; margin-bottom:clamp(35px,5vw,62px); }.little-notes-heading h2 { font-size:clamp(2.5rem,4.6vw,4.7rem); }.little-notes-heading > p:last-child { max-width:420px; margin:20px 0 0; line-height:1.7; }.notes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,38px); align-items:start; }.life-note { min-height:312px; padding:clamp(24px,3vw,36px); box-shadow:5px 8px 15px rgba(68,47,22,.16); transition:transform .18s ease,box-shadow .18s ease; }.life-note:nth-child(1) { transform:rotate(-2deg); }.life-note:nth-child(2) { transform:translateY(18px) rotate(1.3deg); }.life-note:nth-child(3) { transform:rotate(-1deg); }.life-note:hover { transform:translateY(-7px) rotate(0); box-shadow:7px 11px 19px rgba(68,47,22,.22); }.note-red { background:#f5d4c9; }.note-blue { background:#d9e4e4; }.note-green { background:#dfe5c5; }.note-place { margin:0 0 26px; color:var(--red); font:.76rem "DM Mono",monospace; }.life-note h3 { margin:0; font:500 clamp(1.7rem,2.4vw,2.4rem)/.98 Fraunces,Georgia,serif; letter-spacing:-.045em; }.life-note > p:not(.note-place) { margin:20px 0 23px; line-height:1.6; }.life-note a { color:var(--red); font:1.05rem Kalam,cursive; }.life-note a span { font-size:1.25rem; }
.notes-more { display:inline-block; margin-top:42px; color:var(--red); font:1.2rem Kalam,cursive; }
.little-notes-page,.little-note-detail { min-height:calc(100vh - 93px); padding:clamp(54px,7vw,96px) clamp(28px,8.5vw,145px) clamp(80px,10vw,130px); }
.little-notes-intro { max-width:720px; margin:0 0 clamp(48px,7vw,84px); }.little-notes-intro h1 { font-size:clamp(3.3rem,6vw,6.4rem); }.little-notes-intro > p:last-child { max-width:530px; margin:25px 0 0; line-height:1.75; font-size:1.08rem; }
.little-notes-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px); max-width:1180px; }.little-note-card { min-height:345px; padding:clamp(28px,4vw,52px); box-shadow:6px 10px 18px rgba(68,47,22,.16); transition:transform .18s ease,box-shadow .18s ease; }.little-note-card:nth-child(1) { transform:rotate(-1.4deg); }.little-note-card:nth-child(2) { transform:translateY(22px) rotate(1.1deg); }.little-note-card:nth-child(3) { transform:rotate(.8deg); }.little-note-card:nth-child(4) { transform:translateY(15px) rotate(-1deg); }.little-note-card:hover { transform:translateY(-8px) rotate(0); box-shadow:9px 14px 21px rgba(68,47,22,.22); }.little-note-card > span { color:var(--red); font:.75rem "DM Mono",monospace; }.little-note-card h2 { margin:26px 0 20px; font-size:clamp(2rem,3.2vw,3.3rem); }.little-note-card p { max-width:400px; margin:0; line-height:1.65; }.little-note-card b { display:block; margin-top:29px; color:var(--red); font:1.1rem Kalam,cursive; font-weight:400; }.note-new { border:2px dashed rgba(81,109,56,.48); background:#f7ebca; }
.little-note-detail article { max-width:780px; margin:0 auto; }.little-note-detail h1 { max-width:720px; font-size:clamp(3.8rem,7vw,7.2rem); }.little-note-byline { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; color:var(--green); font:.78rem "DM Mono",monospace; }.little-note-opening { max-width:690px; margin:clamp(34px,5vw,52px) 0 0; font-size:clamp(1.3rem,2.1vw,1.7rem); line-height:1.72; }.little-note-photo { position:relative; display:grid; min-height:clamp(270px,44vw,510px); margin:clamp(42px,6vw,70px) 0; place-content:center; border:8px solid #fff9ed; background:#dfe5c5; box-shadow:7px 10px 18px rgba(63,49,29,.14); color:var(--green); transform:rotate(-.6deg); }.little-note-photo span { font:1.6rem Kalam,cursive; }.little-note-photo figcaption { position:absolute; align-self:end; justify-self:start; max-width:100%; padding:10px 13px; color:var(--ink); background:#fff9ed; font:.78rem "DM Mono",monospace; }.little-note-section { max-width:690px; margin:clamp(42px,6vw,68px) auto 0; }.little-note-section h2 { font-size:clamp(2.15rem,3.8vw,3.5rem); }.little-note-section p { margin:22px 0 0; font-size:1.08rem; line-height:1.82; }.little-note-quote { max-width:690px; margin:clamp(48px,7vw,84px) 0 0; padding:clamp(28px,4vw,44px); border-left:3px solid var(--red); background:#f5e8c8; color:var(--green); font:1.35rem/1.6 Kalam,cursive; }
.vietnam-map-section { padding:clamp(54px,7vw,96px) clamp(28px,8.5vw,145px); background:#f6f0e4; }.map-heading { max-width:880px; margin:0 auto 20px; display:flex; align-items:center; justify-content:space-between; gap:22px; }.map-heading > p { margin:0; color:var(--red); font-size:clamp(1.7rem,3vw,2.5rem); }.map-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; font:.72rem "DM Mono",monospace; }.map-legend span::before { content:""; display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; }.city-dot::before,.map-pin.city::before { background:#c8483b; }.beach-dot::before,.map-pin.beach::before { background:#367ca3; }.mountain-dot::before,.map-pin.mountain::before { background:#51703d; }.central-dot::before,.map-pin.central::before { background:#bb7d2e; }.vietnam-map { position:relative; max-width:880px; height:620px; margin:0 auto; overflow:hidden; background:#e9eddf; border:10px solid #fffaf0; box-shadow:7px 10px 18px rgba(63,49,29,.15); }.map-route { position:absolute; inset:5% 38%; width:24%; height:90%; overflow:visible; }.map-route path { fill:none; stroke:rgba(51,85,65,.45); stroke-width:2.8; stroke-linecap:round; stroke-dasharray:3 5; }.map-pin { position:absolute; z-index:1; max-width:138px; padding-left:15px; color:var(--ink); font:.85rem/1.1 Kalam,cursive; white-space:nowrap; transform:translate(-50%,-50%) rotate(var(--tilt,-2deg)); }.map-pin::before { content:""; position:absolute; left:0; top:50%; width:10px; height:10px; border:2px solid #fffaf0; border-radius:50%; transform:translateY(-50%); box-shadow:0 1px 2px rgba(35,37,27,.2); }.ha-giang { left:35%; top:7%; }.cao-bang { left:62%; top:11%; --tilt:2deg; }.hanoi { left:42%; top:20%; }.ham-lon { left:68%; top:25%; --tilt:2deg; }.cat-ba { left:61%; top:31%; }.quang-binh { left:39%; top:47%; }.quang-tri { left:63%; top:52%; --tilt:2deg; }.ba-den { left:31%; top:75%; }.thi-vai { left:62%; top:78%; --tilt:2deg; }.nui-dinh { left:39%; top:82%; }.toc-tien { left:66%; top:84%; --tilt:2deg; }.sai-gon { left:34%; top:89%; }.vung-tau { left:60%; top:91%; --tilt:2deg; }.phan-thiet { left:73%; top:95%; }
.map-pin[href] { text-decoration:underline; text-decoration-color:transparent; transition:color .18s ease,text-decoration-color .18s ease; }.map-pin[href]:hover,.map-pin[href]:focus-visible { color:var(--red); text-decoration-color:currentColor; outline:none; }.city-detail { max-width:850px; margin:0 auto; padding:clamp(44px,8vw,100px) clamp(28px,7vw,90px) clamp(80px,10vw,145px); }.city-detail h1 { font-size:clamp(4rem,8vw,7.5rem); }.city-detail-lead { max-width:580px; margin:25px 0 42px; font-size:1.15rem; line-height:1.75; }.city-photo-placeholder { display:grid; min-height:clamp(280px,42vw,500px); place-items:center; border:2px dashed rgba(81,109,56,.45); background:#dfe5c5; color:var(--green); font:1.65rem Kalam,cursive; transform:rotate(-1deg); }.city-writing { max-width:680px; margin:clamp(56px,8vw,92px) auto 0; padding:clamp(28px,4vw,50px); background:#f5e8c8; box-shadow:5px 8px 15px rgba(63,49,29,.13); }.city-writing > p:first-child { margin:0 0 20px; color:var(--red); font-size:1.65rem; }.city-writing > p:not(:first-child) { line-height:1.75; }.city-writing .story-edit { margin-top:24px; color:var(--green); font:1.05rem/1.5 Kalam,cursive; }
.about-section { padding:clamp(76px,8vw,124px) clamp(28px,8.5vw,145px); display:grid; grid-template-columns:1fr .8fr; gap:clamp(48px,8vw,120px); align-items:center; }.about-photo { max-width:650px; height:min(530px,48vw); padding:10px 10px 44px; background:#fbf4e7; box-shadow:6px 9px 16px rgba(63,49,29,.16); transform:rotate(2deg); }.about-section > div:last-child > p:not(.eyebrow) { max-width:470px; margin:24px 0; line-height:1.75; }.text-link { color:var(--red); font:1.3rem Kalam,cursive; }
footer { min-height:320px; padding:58px clamp(28px,8.5vw,145px); display:grid; grid-template-columns:1fr 1.2fr .55fr; gap:50px; align-items:center; color:#f6f0e4; background:#1f2f27; }.footer-note { align-self:end; text-align:right; font:1.1rem Kalam,cursive; }.subscribe-form { display:flex; max-width:500px; background:#f8f2e4; }.subscribe-form input { min-width:0; flex:1; padding:16px; border:0; background:transparent; font:1rem "DM Sans",sans-serif; }.subscribe-form button { border:0; padding:12px 18px; color:white; background:var(--green); font:1.15rem Kalam,cursive; cursor:pointer; }.subscribe-form button:hover { background:var(--red); }
@media (max-width:960px) { .site-header { grid-template-columns:1fr auto; }.brand { grid-column:1; justify-self:start; }.main-nav { display:none; grid-column:1/-1; grid-row:2; flex-direction:column; gap:2px; padding-top:12px; }.main-nav.open { display:flex; }.header-links { display:none; }.menu-toggle { grid-column:2; grid-row:1; display:flex; align-items:center; gap:8px; border:0; color:var(--ink); background:transparent; font:.75rem "DM Mono",monospace; text-transform:uppercase; cursor:pointer; }.menu-toggle span { width:18px; height:12px; border-top:2px solid; border-bottom:2px solid; }.route { padding-inline:7vw; }.landmark { width:80px; }.hero { grid-template-columns:.62fr 1fr; }.photo-hanoi { display:none; }.latest { grid-template-columns:repeat(3,1fr); }.travel-section,.about-section { grid-template-columns:1fr; }.notes-grid { grid-template-columns:repeat(2,1fr); }.about-photo { height:420px; } footer { grid-template-columns:1fr; gap:28px; }.footer-note { text-align:left; } }
@media (max-width:610px) { .site-header { min-height:67px; padding:14px 19px; }.brand { font-size:1.35rem; }.brand svg { width:26px; }.route { min-height:96px; padding:18px 24px 5px; grid-template-columns:1fr .66fr 1fr; }.landmark { display:none; }.place { gap:3px; font-size:1.22rem; }.pin { font-size:1.4rem; }.route-line { margin-top:20px; }.hero { display:block; padding:0 30px; }.photo-cologne { display:none; }.hero-story { min-height:0; padding:37px 29px 32px; }.photo-hanoi { display:block; height:282px; margin:32px 23px 0; transform:rotate(3deg); }.quick-link { margin:77px 29px 34px; }.latest { grid-template-columns:repeat(2,1fr); gap:18px 12px; padding:0 28px 72px; }.sticky-note { min-height:116px; padding:22px 15px; font-size:1.5rem; }.mini-post img { aspect-ratio:1; }.mini-post span { font-size:.87rem; }.travel-section,.vietnam-map-section,.little-notes,.about-section { padding:70px 28px; }.map-heading { align-items:flex-start; flex-direction:column; }.map-legend { justify-content:flex-start; }.vietnam-map { height:590px; border-width:7px; }.map-pin { max-width:112px; font-size:.74rem; }.notes-grid { grid-template-columns:1fr; gap:28px; }.life-note { min-height:0; }.life-note:nth-child(2) { transform:rotate(1.3deg); }.city-row { grid-template-columns:28px 1fr 20px; }.city-row em { display:none; }.about-photo { height:310px; } footer { padding:55px 28px; }.subscribe-form { flex-direction:column; }.subscribe-form button { padding:13px; }.ink-sketch { display:none; } }

/* Hand-drawn collage details matching the selected prototype. */
.route { min-height:137px; padding-top:26px; }
.landmark { width:86px; height:55px; stroke-width:1.45; opacity:.86; }
.germany .landmark { transform:translateY(4px); }
.pagoda { width:62px; height:58px; }
.pin { width:25px; height:25px; display:inline-grid; place-items:center; border:1.8px solid currentColor; border-radius:50%; font:0/0 a; position:relative; }
.pin::before,.pin::after { content:""; position:absolute; background:currentColor; }.pin::before { width:1.6px; height:35px; }.pin::after { width:35px; height:1.6px; }
.leaf-sketch { position:absolute; right:23px; bottom:18px; width:69px; height:91px; overflow:visible; fill:rgba(82,109,56,.18); stroke:rgba(71,92,48,.68); stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; transform:rotate(15deg); }
.sticky-note { position:relative; isolation:isolate; overflow:visible; clip-path:polygon(1% 2%,97% 0,100% 97%,4% 100%,0 68%); }
.sticky-note::before { content:""; position:absolute; z-index:-1; left:34%; top:-12px; width:72px; height:24px; background:rgba(215,193,145,.62); transform:rotate(4deg); }
.sticky-note::after { content:"♡"; position:absolute; right:17px; bottom:13px; color:var(--red); font:1.7rem Kalam,cursive; transform:rotate(11deg); }
@media (max-width:610px) { .pin { width:18px; height:18px; }.pin::before { height:28px; }.pin::after { width:28px; }.leaf-sketch { width:52px; height:67px; right:13px; bottom:10px; } }

@media (max-width:700px) {
  .little-notes-page,.little-note-detail { padding:48px 28px 76px; }
  .little-notes-list { grid-template-columns:1fr; }
.little-note-card { min-height:0; }
.little-note-card:nth-child(2),.little-note-card:nth-child(4) { transform:rotate(1deg); }
  .heidelberg-page .city-detail { padding-inline:28px; }
}

/* Raster scrapbook illustrations generated for this design. */
.route { display:block; min-height:168px; padding:0; position:relative; max-width:1440px; }
.route-art { position:absolute; inset:5px 4.5% auto; width:91%; height:auto; max-height:158px; object-fit:contain; }
.route-label { position:absolute; top:78px; z-index:1; font:700 clamp(1.35rem,2vw,2rem) Kalam,cursive; }.route-label.vietnam { left:13%; color:var(--red); }.route-label.germany { right:12%; color:var(--blue); }
.leaf-sketch { object-fit:contain; }
@media (max-width:610px) { .route { min-height:115px; }.route-art { inset:7px 2% auto; width:96%; max-height:102px; }.route-label { top:54px; font-size:1.16rem; }.route-label.vietnam { left:9%; }.route-label.germany { right:8%; } }

.sticky-note { min-height:0; padding:0; background:transparent; box-shadow:none; clip-path:none; transform:rotate(-3deg); }
.sticky-note::before,.sticky-note::after { display:none; }
.sticky-note img { width:100%; height:auto; object-fit:contain; }

/* Generated aged journal paper for the main travel story. */
.hero-story { background-color:#f5ead2; background-image:url("assets/hero-antique-paper.jpg"); background-size:cover; background-position:center; }
.brand { font-family:"Be Vietnam Pro","DM Sans",sans-serif; font-weight:700; letter-spacing:-.055em; }

/* A close, aligned square-frame recipe grid. */
.latest { gap:10px; }
.latest .mini-post { transform:none; }
.latest .mini-post img { aspect-ratio:1; padding:8px; background:#fffdf8; box-shadow:2px 4px 9px rgba(61,45,25,.18); }
.latest .mini-post span { margin-top:7px; }

/* Original scrapbook-like card effect for Latest bites. */
.latest .mini-post { transform:rotate(var(--tilt,-2deg)); animation:none; }
.latest .mini-post:nth-of-type(1) { --tilt:-2deg; }.latest .mini-post:nth-of-type(2) { --tilt:2deg; }.latest .mini-post:nth-of-type(3) { --tilt:-1deg; }.latest .mini-post:nth-of-type(4) { --tilt:2deg; }.latest .mini-post:nth-of-type(5) { --tilt:-2deg; }.latest .mini-post:nth-of-type(6) { --tilt:1deg; }
.latest .mini-post:hover { transform:rotate(0deg) translateY(-8px); }

/* Duplicated botanical notes beneath the travel-photo captions. */
.photo-leaf { position:absolute; z-index:4; width:70px; height:94px; object-fit:contain; pointer-events:none; }.leaf-cologne { left:auto; right:1.5cm; bottom:-116px; transform:rotate(60deg); }.leaf-hanoi { right:27px; bottom:-126px; width:98px; height:132px; transform:rotate(45deg) scaleX(-1); }

/* Earlier polaroid frame, softened into a rounded rectangle. */
.latest .mini-post img { aspect-ratio:.94; padding:5px 5px 27px; background:#faf3e5; border-radius:14px; box-shadow:2px 5px 8px rgba(61,45,25,.17); }
@media (max-width:610px) { .photo-leaf { width:55px; height:74px; }.leaf-cologne { left:auto; right:1.5cm; bottom:-92px; }.leaf-hanoi { right:14px; bottom:-104px; width:76px; height:102px; } }

/* Straight rectangular frame with a rounded-rectangle photograph inside. */
.latest .mini-post > .photo-frame { display:grid; aspect-ratio:.94; margin-top:0; padding:5px 5px 27px; background:#faf3e5; border-radius:0; box-shadow:2px 5px 8px rgba(61,45,25,.17); text-align:initial; font:inherit; }
.latest .mini-post > .photo-frame img { width:100%; height:100%; padding:0; background:transparent; border-radius:0; box-shadow:none; object-fit:cover; }

/* Original simple handwritten captions on both travel photos. */
.photo-note { width:auto; min-height:0; display:block; margin:0; padding:4px 8px; background:#f8eed7; background-image:none; border:0; border-radius:0; box-shadow:0 2px 2px rgba(41,30,18,.08); color:var(--ink); text-align:center; font:1.05rem/1.12 Kalam,cursive; }
.note-german,.note-vietnam { background-image:none; color:var(--ink); }
@media (max-width:610px) { .photo-note { padding:4px 7px; font-size:.9rem; } }

/* Individual recipe pages. */
.recipe-detail { max-width:1180px; margin:0 auto; padding:clamp(42px,7vw,92px) clamp(28px,6vw,80px) clamp(72px,9vw,125px); }.recipe-back { display:inline-block; margin-bottom:clamp(30px,5vw,62px); color:var(--red); font:1.12rem Kalam,cursive; }.recipe-intro { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(38px,7vw,96px); align-items:center; }.recipe-intro h1 { font-size:clamp(3.4rem,6vw,6.5rem); }.recipe-summary { max-width:410px; margin:25px 0 17px; font-size:1.08rem; line-height:1.7; }.recipe-meta { color:var(--green); font:.83rem "DM Mono",monospace; }.recipe-photo-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }.recipe-photo { height:clamp(300px,37vw,510px); margin:0; padding:8px 8px 33px; background:#fffaf0; box-shadow:7px 11px 18px rgba(63,49,29,.17); }.recipe-photo-before { transform:rotate(-2deg) translateY(23px); }.recipe-photo-after { transform:rotate(2deg); }.recipe-photo figcaption { margin-top:9px; color:var(--green); text-align:center; font:1.08rem Kalam,cursive; }.recipe-content { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(28px,6vw,82px); margin-top:clamp(70px,10vw,125px); align-items:start; }.ingredients-card,.method-card { padding:clamp(24px,3.2vw,42px); box-shadow:4px 7px 14px rgba(63,49,29,.12); }.ingredients-card { background:#dfe5c5; transform:rotate(-1.5deg); }.ingredients-card > p { margin:0 0 15px; color:var(--green); font-size:1.65rem; }.ingredients-card ul { margin:0; padding-left:20px; line-height:2; }.method-card { background:#f5e8c8; }.method-card ol { margin:19px 0 0; padding-left:24px; line-height:1.75; }.method-card li + li { margin-top:10px; }.recipe-note { margin:26px 0 0; padding-top:18px; border-top:1px solid rgba(81,109,56,.28); color:var(--green); font:1.02rem/1.5 Kalam,cursive; }
@media (max-width:760px) { .recipe-intro,.recipe-content { grid-template-columns:1fr; }.recipe-photo { height:350px; }.recipe-content { margin-top:65px; } }

/* Growing collection of salad recipes. */
.salad-collection { padding:clamp(72px,9vw,124px) clamp(28px,8.5vw,145px); background:#dfe5c5; }.salad-collection > div:first-child { max-width:560px; margin:0 auto clamp(38px,5vw,66px); text-align:center; }.salad-collection h2 { font-size:clamp(2.6rem,4.8vw,5rem); }.salad-collection > div:first-child > p:last-child { margin:20px auto 0; max-width:420px; line-height:1.7; }.salad-type-grid { max-width:920px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:clamp(25px,4vw,46px); }.salad-type-card { display:grid; grid-template-columns:clamp(180px,27vw,255px) 1fr; gap:clamp(24px,5vw,66px); align-items:center; padding:10px; background:#fffaf0; box-shadow:5px 8px 14px rgba(63,49,29,.15); transition:transform .18s ease,box-shadow .18s ease; }.salad-type-card:nth-child(1) { transform:rotate(-1deg); }.salad-type-card:nth-child(2) { transform:rotate(1deg); }.salad-type-card:nth-child(3) { transform:rotate(-.7deg); }.salad-type-card:hover { transform:translateY(-7px) rotate(0); box-shadow:7px 12px 20px rgba(63,49,29,.21); }.salad-type-card img { aspect-ratio:3 / 4; object-fit:cover; }.salad-type-copy { display:block; padding:14px clamp(3px,2vw,22px) 14px 0; }.salad-type-copy b { display:block; margin-bottom:14px; color:var(--red); font:.74rem "DM Mono",monospace; }.salad-type-copy strong { display:block; font:500 clamp(2rem,4vw,3.55rem)/.95 Fraunces,Georgia,serif; letter-spacing:-.055em; }.salad-type-copy em { display:block; max-width:390px; margin-top:17px; color:var(--green); font:1.15rem/1.5 Kalam,cursive; }.salad-type-card[aria-current="page"] { outline:2px solid var(--green); outline-offset:5px; }
@media (max-width:610px) { .salad-type-card { grid-template-columns:135px 1fr; gap:20px; }.salad-type-copy { padding:6px 5px 6px 0; }.salad-type-copy b { margin-bottom:9px; font-size:.67rem; }.salad-type-copy strong { font-size:1.7rem; }.salad-type-copy em { margin-top:10px; font-size:.92rem; } }

/* Map on the left with room for a few small visual memories beside it. */
.vietnam-map-section .map-heading { max-width:1080px; margin-left:0; margin-right:0; }
.vietnam-map-layout { max-width:1080px; margin:0; display:grid; grid-template-columns:minmax(360px,.92fr) minmax(220px,.48fr); align-items:start; gap:clamp(20px,3vw,38px); }
.vietnam-map-layout .vietnam-map { width:100%; max-width:none; height:700px; margin:0; background:linear-gradient(150deg,#dbe8e4,#c9dfe7); }
.vietnam-map-layout .map-route { inset:5% 30%; width:38%; }
.vietnam-map-layout .map-pin { font-size:.78rem; }
.map-photo-strip { display:grid; gap:22px; padding-top:20px; }.map-photo-strip > p { margin:0 0 2px; color:var(--red); font-size:1.35rem; }.map-photo-placeholder { min-height:150px; margin:0; padding:7px; display:grid; place-items:center; background:#fffaf0; box-shadow:4px 7px 12px rgba(63,49,29,.13); transform:rotate(var(--photo-tilt,-2deg)); }.map-photo-placeholder:nth-of-type(2) { --photo-tilt:2deg; }.map-photo-placeholder:nth-of-type(3) { --photo-tilt:-1deg; }.map-photo-placeholder span { display:grid; place-items:center; width:100%; height:106px; border:1.5px dashed rgba(81,109,56,.5); background:#e3ead4; color:var(--green); font:.95rem Kalam,cursive; }.map-photo-placeholder figcaption { margin-top:8px; color:var(--ink); font:.66rem "DM Mono",monospace; }
@media (max-width:820px) { .vietnam-map-layout { grid-template-columns:1fr; }.vietnam-map-layout .vietnam-map { height:610px; }.map-photo-strip { grid-template-columns:repeat(3,1fr); padding-top:0; }.map-photo-strip > p { grid-column:1/-1; }.map-photo-placeholder { min-height:130px; }.map-photo-placeholder span { height:87px; font-size:.82rem; } }
@media (max-width:460px) { .vietnam-map-layout .vietnam-map { height:560px; }.vietnam-map-layout .map-pin { font-size:.7rem; }.map-photo-strip { gap:12px; }.map-photo-placeholder { min-height:104px; padding:5px; }.map-photo-placeholder span { height:65px; font-size:.72rem; }.map-photo-placeholder figcaption { font-size:.55rem; } }

/* Extra map stops: one dot for one kind of place, two dots for mountain-and-beach journeys. */
.vietnam-map-layout .vietnam-map { height:1120px; }.vietnam-map-layout .map-pin { max-width:130px; font-size:.7rem; }.map-pin.beach.mountain,.map-pin.city.beach { padding-left:27px; }.map-pin.beach.mountain::before { background:#367ca3; }.map-pin.city.beach::before { background:#c8483b; }.map-pin.beach.mountain::after,.map-pin.city.beach::after { content:""; position:absolute; left:12px; top:50%; width:10px; height:10px; border:2px solid #fffaf0; border-radius:50%; transform:translateY(-50%); box-shadow:0 1px 2px rgba(35,37,27,.2); }.map-pin.beach.mountain::after { background:#51703d; }.map-pin.city.beach::after { background:#367ca3; }
.vn-dien-bien { left:22%; top:3%; }.vn-son-la { left:58%; top:5%; --tilt:2deg; }.vn-yen-bai { left:26%; top:8%; }.vn-ha-giang { left:60%; top:10%; --tilt:2deg; }.vn-cao-bang { left:27%; top:13%; }.vn-quang-ninh { left:61%; top:15%; --tilt:2deg; }.vn-hai-phong { left:30%; top:18%; }.vn-hanoi { left:60%; top:20%; --tilt:2deg; }.vn-ham-lon { left:27%; top:23%; }.vn-cat-ba { left:62%; top:25%; --tilt:2deg; }.vn-ninh-binh { left:28%; top:28%; }.vn-thai-binh { left:61%; top:30%; --tilt:2deg; }.vn-thanh-hoa { left:25%; top:33%; }.vn-nghe-an { left:61%; top:35%; --tilt:2deg; }.vn-ha-tinh { left:25%; top:38%; }.vn-quang-binh { left:61%; top:40%; --tilt:2deg; }.vn-quang-tri { left:26%; top:43%; }.vn-quang-nam { left:61%; top:46%; --tilt:2deg; }.vn-quang-ngai { left:25%; top:49%; }.vn-phu-yen { left:61%; top:52%; --tilt:2deg; }.vn-ninh-thuan { left:26%; top:55%; }.vn-dak-lak { left:61%; top:58%; --tilt:2deg; }.vn-dak-nong { left:25%; top:61%; }.vn-lam-dong { left:61%; top:64%; --tilt:2deg; }.vn-ta-nang { left:25%; top:67%; }.vn-bu-gia-map { left:61%; top:70%; --tilt:2deg; }.vn-cat-tien { left:25%; top:73%; }.vn-chua-chan { left:61%; top:76%; --tilt:2deg; }.vn-ba-den { left:25%; top:79%; }.vn-binh-duong { left:61%; top:81%; --tilt:2deg; }.vn-ho-chi-minh { left:25%; top:84%; }.vn-tay-ninh { left:61%; top:86%; --tilt:2deg; }.vn-thi-vai { left:25%; top:88%; }.vn-nui-dinh { left:61%; top:90%; --tilt:2deg; }.vn-toc-tien { left:25%; top:92%; }.vn-ba-ria { left:61%; top:93%; --tilt:2deg; }.vn-vung-tau { left:25%; top:94%; }.vn-phan-thiet { left:61%; top:95%; --tilt:2deg; }.vn-an-giang { left:25%; top:96%; }.vn-dong-thap { left:61%; top:97%; --tilt:2deg; }.vn-ben-tre { left:25%; top:98%; }.vn-can-tho { left:61%; top:99%; --tilt:2deg; }.vn-kien-giang { left:42%; top:99%; }
@media (max-width:820px) { .vietnam-map-layout .vietnam-map { height:1080px; } }
@media (max-width:460px) { .vietnam-map-layout .vietnam-map { height:980px; }.vietnam-map-layout .map-pin { max-width:110px; font-size:.62rem; }.map-pin.beach.mountain,.map-pin.city.beach { padding-left:23px; }.map-pin.beach.mountain::after,.map-pin.city.beach::after { left:10px; width:8px; height:8px; } }

/* Restored Design B: compact map and city list beside it. */
.vietnam-map-section .map-heading { max-width:1080px; margin:0 auto 20px; }
.vietnam-map-layout { max-width:1080px; margin:0 auto; grid-template-columns:minmax(360px,.92fr) minmax(370px,1.08fr); align-items:stretch; }
.vietnam-map-layout .vietnam-map { height:700px; background:linear-gradient(150deg,#dbe8e4,#c9dfe7); }
.vietnam-map-layout .map-route { inset:5% 30%; width:38%; }
.vietnam-map-layout .map-pin { max-width:138px; font-size:.78rem; }
.city-diary-list { max-height:700px; overflow:auto; padding:20px clamp(20px,3.2vw,38px); background:#fff8e9; box-shadow:7px 10px 18px rgba(63,49,29,.13); scrollbar-color:var(--green) transparent; scrollbar-width:thin; }
.city-diary-kicker { margin:2px 0 14px; color:var(--red); font:1.35rem Kalam,cursive; }.city-diary-entry { position:relative; display:grid; grid-template-columns:31px minmax(114px,1fr) minmax(90px,.8fr) 18px; gap:8px; align-items:center; min-height:61px; padding:10px 0; border-top:1px solid rgba(62,59,43,.18); transition:padding .18s ease,background .18s ease,color .18s ease; }.city-diary-entry::before { content:""; width:9px; height:9px; margin-left:1px; border-radius:50%; grid-column:1; grid-row:1; }.city-diary-entry > span { font:.66rem "DM Mono",monospace; color:transparent; }.city-diary-entry strong { grid-column:2; grid-row:1; font:500 clamp(1.22rem,2.1vw,1.7rem)/1 Fraunces,Georgia,serif; letter-spacing:-.035em; }.city-diary-entry em { grid-column:3; grid-row:1; font-style:normal; color:rgba(39,39,34,.68); font:.72rem/1.25 "DM Mono",monospace; }.city-diary-entry b { grid-column:4; grid-row:1; color:var(--red); font-size:1.15rem; font-weight:400; }.city-diary-entry.city::before { background:#c8483b; }.city-diary-entry.beach::before { background:#367ca3; }.city-diary-entry.mountain::before { background:#51703d; }.city-diary-entry:hover,.city-diary-entry:focus-visible { padding-inline:10px; color:var(--red); background:#f6edcf; outline:none; }
.germany-city-list { max-width:760px; max-height:none; margin:0 auto; }
@media (max-width:820px) { .vietnam-map-layout { grid-template-columns:1fr; }.vietnam-map-layout .vietnam-map { height:610px; }.city-diary-list { max-height:none; }.city-diary-entry { grid-template-columns:31px 1fr 130px 18px; } }
@media (max-width:460px) { .vietnam-map-layout .vietnam-map { height:560px; }.vietnam-map-layout .map-pin { max-width:112px; font-size:.7rem; }.city-diary-list { padding:18px; }.city-diary-entry { grid-template-columns:27px 1fr 18px; }.city-diary-entry em { display:none; } }

/* Simple city diary: a small photo collection next to a few personal lines. */
.city-diary-page { display:grid; grid-template-columns:minmax(320px,1fr) minmax(250px,.76fr); gap:clamp(30px,5vw,74px); align-items:start; margin-top:clamp(34px,6vw,68px); }.city-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.city-photo-slot { aspect-ratio:1 / .84; margin:0; padding:6px; display:grid; place-items:center; background:#fffaf0; box-shadow:4px 7px 12px rgba(63,49,29,.14); transform:rotate(var(--photo-turn,-1.5deg)); }.city-photo-slot:nth-child(2) { --photo-turn:1.5deg; }.city-photo-slot:nth-child(3) { --photo-turn:.8deg; }.city-photo-slot:nth-child(4) { --photo-turn:-1deg; }.city-photo-slot span { display:grid; place-items:center; width:100%; height:100%; border:1.5px dashed rgba(81,109,56,.48); color:var(--green); background:#e3ead4; font:1rem Kalam,cursive; }.city-diary-writing { padding:clamp(26px,3.5vw,42px); background:#f5e8c8; box-shadow:5px 8px 15px rgba(63,49,29,.13); }.city-diary-writing > p:first-child { margin:0 0 19px; color:var(--red); font-size:1.7rem; }.city-diary-writing > p:not(:first-child) { margin:0; line-height:1.75; }.city-diary-writing .story-edit { margin-top:24px; color:var(--green); font:1.03rem/1.5 Kalam,cursive; }
@media (max-width:760px) { .city-diary-page { grid-template-columns:1fr; }.city-photo-grid { max-width:650px; }.city-diary-writing { max-width:650px; } }

/* A city page can grow in three simple photo collections. */
.city-photo-collections { margin-top:clamp(40px,6vw,70px); }
.besigheim-page .city-detail { max-width:none; padding-inline:4cm; }
.heidelberg-page .city-detail { max-width:none; padding-inline:4cm; }
@media (max-width:700px) { .heidelberg-page .city-detail,.besigheim-page .city-detail { padding-inline:28px; } }
.city-photo-section + .city-photo-section { margin-top:clamp(56px,8vw,96px); }
.city-photo-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:24px; }
.city-photo-section-heading .eyebrow { margin:0; color:var(--red); font-size:1.35rem; }
.city-photo-section-heading h2 { margin:0; font:500 clamp(1.9rem,3.2vw,3rem)/1 Fraunces,Georgia,serif; letter-spacing:-.045em; }
.city-photo-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
.city-photo-grid-nature { grid-template-columns:repeat(5,minmax(0,1fr)); max-width:none; }
.city-photo-grid-eight { grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
.city-photo-collections .city-photo-slot { aspect-ratio:1 / 1.1; }
.city-photo-collections .city-diary-writing { max-width:720px; margin:clamp(60px,9vw,110px) auto 0; }
@media (max-width:760px) { .city-photo-grid-four,.city-photo-grid-nature,.city-photo-grid-eight { grid-template-columns:repeat(2,minmax(0,1fr)); }.city-photo-section-heading { display:block; }.city-photo-section-heading h2 { margin-top:10px; } }

/* Heidelberg: a small photo strip first, then the diary note underneath. */
.heidelberg-page .city-diary-page { display:block; }
.heidelberg-page .city-photo-grid { max-width:none; margin:0; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.heidelberg-page .city-photo-slot { aspect-ratio:3 / 4; }
.heidelberg-page .city-diary-writing { max-width:none; margin:clamp(34px,5vw,58px) 0 0; }
.heidelberg-page .heidelberg-wide-photo { display:block; aspect-ratio:auto; margin:clamp(34px,5vw,58px) 0 0; transform:none; }
.heidelberg-page .heidelberg-wide-photo img { height:auto; object-fit:contain; }
@media (max-width:760px) { .heidelberg-page .city-photo-grid { max-width:520px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }

/* Cuisine landing page and its simple restaurant-note templates. */
.cuisine-page { max-width:1120px; margin:0 auto; padding:clamp(42px,7vw,92px) clamp(28px,6vw,80px) clamp(80px,10vw,135px); }.cuisine-heading { max-width:640px; }.cuisine-heading h1 { font-size:clamp(3.5rem,7vw,6.7rem); }.cuisine-heading > p:last-child { max-width:470px; margin:24px 0 0; line-height:1.7; }.cuisine-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,32px); margin-top:clamp(48px,7vw,84px); }.cuisine-card { position:relative; min-height:260px; padding:clamp(23px,3vw,35px); display:flex; flex-direction:column; background:#f5e8c8; box-shadow:5px 8px 15px rgba(63,49,29,.14); transition:transform .18s ease,box-shadow .18s ease; }.cuisine-card:nth-child(2) { background:#dfe5c5; transform:translateY(17px) rotate(1deg); }.cuisine-card:nth-child(3) { background:#d9e4e4; transform:rotate(-1deg); }.cuisine-card:nth-child(4) { background:#f5d4c9; transform:translateY(13px) rotate(-1deg); }.cuisine-card:nth-child(5) { background:#e6e0c9; transform:rotate(1deg); }.cuisine-card:hover { transform:translateY(-7px) rotate(0); box-shadow:8px 12px 20px rgba(63,49,29,.2); }.cuisine-card > span { color:var(--red); font:.72rem "DM Mono",monospace; }.cuisine-card strong { margin-top:28px; font:500 clamp(1.8rem,3.2vw,3rem)/.95 Fraunces,Georgia,serif; letter-spacing:-.05em; }.cuisine-card em { margin-top:18px; font:1rem/1.45 Kalam,cursive; }.cuisine-card b { margin-top:auto; align-self:flex-end; color:var(--red); font-size:1.35rem; font-weight:400; }
@media (max-width:760px) { .cuisine-grid { grid-template-columns:1fr; }.cuisine-card { min-height:205px; }.cuisine-card:nth-child(n) { transform:none; } }

/* A cuisine can keep several separate restaurant visits. */
.restaurant-list { max-width:850px; margin-top:clamp(42px,7vw,75px); }.restaurant-list > p { margin:0 0 20px; color:var(--red); font-size:1.55rem; }.restaurant-card { display:grid; grid-template-columns:44px 1fr minmax(170px,.8fr) 22px; gap:14px; align-items:center; min-height:112px; padding:22px 24px; border-top:1px solid rgba(62,59,43,.22); background:#f5e8c8; transition:padding .18s ease,background .18s ease,color .18s ease; }.restaurant-card + .restaurant-card { margin-top:14px; }.restaurant-card span { color:var(--red); font:.72rem "DM Mono",monospace; }.restaurant-card strong { font:500 clamp(1.65rem,3vw,2.5rem)/1 Fraunces,Georgia,serif; letter-spacing:-.045em; }.restaurant-card em { font:1rem/1.4 Kalam,cursive; }.restaurant-card b { color:var(--red); font-size:1.25rem; font-weight:400; }.restaurant-card:hover,.restaurant-card:focus-visible { padding-inline:32px; color:var(--red); background:#f0ddaa; outline:none; }
@media (max-width:610px) { .restaurant-card { grid-template-columns:32px 1fr 20px; padding:18px; }.restaurant-card em { display:none; } }

/* Two visits for the same cuisine, kept together for an easy comparison. */
.restaurant-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,4vw,48px); margin-top:clamp(42px,7vw,76px); }.restaurant-diary { padding:clamp(20px,3vw,32px); background:#f5e8c8; box-shadow:5px 8px 15px rgba(63,49,29,.13); }.restaurant-diary:nth-child(2) { background:#dfe5c5; transform:translateY(18px) rotate(1deg); }.restaurant-number { margin:0; color:var(--red); font:.72rem "DM Mono",monospace; }.restaurant-diary h2 { margin-top:22px; font-size:clamp(2rem,3.8vw,3.5rem); }.restaurant-name-tip { margin:11px 0 23px; color:var(--green); font:.94rem/1.4 Kalam,cursive; }.restaurant-mini-photos { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.restaurant-mini-photos .city-photo-slot { aspect-ratio:1 / 1.18; }.restaurant-mini-photos .city-photo-slot span { font-size:.82rem; }.restaurant-note-copy { margin-top:24px; padding-top:18px; border-top:1px solid rgba(81,109,56,.3); }.restaurant-note-copy > p:first-child { margin:0 0 10px; color:var(--red); font-size:1.28rem; }.restaurant-note-copy > p:last-child { margin:0; line-height:1.65; }
@media (max-width:760px) { .restaurant-comparison { grid-template-columns:1fr; }.restaurant-diary:nth-child(2) { transform:none; } }

/* A compact layout for individual cuisine notes. */
body:has(.restaurant-comparison) .city-detail { padding:clamp(24px,4vw,48px) clamp(20px,4vw,50px) clamp(44px,6vw,72px); }
body:has(.restaurant-comparison) .city-detail-lead { margin:16px 0 26px; }
body:has(.restaurant-comparison) .restaurant-comparison { margin-top:clamp(24px,4vw,42px); }
body:has(.restaurant-diary-single) .restaurant-comparison { max-width:820px; grid-template-columns:1fr; }
body:has(.restaurant-diary-single) .restaurant-diary { padding:clamp(30px,5vw,58px); }
body:has(.restaurant-diary-single) .restaurant-mini-photos { grid-template-columns:repeat(4,minmax(0,1fr)); }
body:has(.restaurant-diary-single) .restaurant-mini-photos .city-photo-slot { aspect-ratio:1 / 1.18; }
@media (max-width:760px) { body:has(.restaurant-diary-single) .restaurant-mini-photos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
body:has(.restaurant-diary-single) .restaurant-entry-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(190px,.85fr); gap:clamp(22px,4vw,48px); align-items:stretch; margin-top:24px; }
body:has(.restaurant-diary-single) .restaurant-entry-layout .restaurant-mini-photos { grid-template-columns:repeat(2,minmax(0,1fr)); }
body:has(.restaurant-diary-single) .restaurant-entry-layout .restaurant-mini-photos figure:nth-child(3) { overflow:hidden; }
img[src$="Russ203.jpeg"] { object-fit:contain; background:#fffaf0; }
.restaurant-diary-single:nth-child(2) { transform:none; }
body:has(.restaurant-diary-single) .restaurant-diary,
body:has(.restaurant-diary-single) .restaurant-mini-photos .city-photo-slot { transform:none !important; }
body:has(.restaurant-diary-single) .restaurant-entry-layout .restaurant-note-copy { margin:0; min-height:100%; padding:clamp(26px,3.5vw,38px); border-top:0; border-left:1px solid rgba(81,109,56,.3); background:rgba(255,250,240,.45); }
@media (max-width:480px) { body:has(.restaurant-diary-single) .restaurant-entry-layout { grid-template-columns:1fr; }.restaurant-entry-layout .restaurant-note-copy { border-top:1px solid rgba(81,109,56,.3); border-left:0; } }

/* Mexican restaurant page: each taco stop keeps its own small photo set. */
.mexican-visits .restaurant-mini-photos { margin-top:24px; }
body:has(.mexican-visits) .city-detail { max-width:none; }
@media (min-width:701px) {
  body:has(.mexican-visits) .city-detail { padding-left:4cm; padding-right:4cm; }
}
@media (max-width:700px) {
  body:has(.mexican-visits) .city-detail { padding-left:28px; padding-right:28px; }
}