/* Lighter journal (direction A), in antique white, black and cherry rose. Loaded last on every page so it settles the whole site:
   same colours and fonts, one corner size, one soft shadow, thinner lines, lighter type.
   Change the look here rather than page by page. */
:root{
  --fn-ink:#030301;
  --fn-soft:#4a4245;
  --fn-hair:#0000001a;
  --fn-r:14px;
  --fn-lift:0 1px 2px #00000008,0 8px 22px #0000000f;
  --fn-photo:0 1px 3px #00000014,0 10px 24px #0000001c;
}
html body{color:var(--fn-ink);-webkit-font-smoothing:antialiased}
html body p{color:inherit}

/* Type: fewer heavy weights */
html body :is(strong,b,th,dt){font-weight:600}
html body :is(h1,h2,h3,.fn-page-title){font-weight:600;letter-spacing:-.015em}
html body .fn-intro h1,html body .fn-page-title,html body.fn-vienna h1{letter-spacing:-.03em}
html body .jp-days h3,html body .jp-album .vn-stop h2{font-family:'Playfair Display',Georgia,serif}
html body :is(.detail,.fn-stop-description,.day-theme,.task-note){color:var(--fn-soft)}
html body .fn-kicker,html body .eyebrow{font-weight:600;letter-spacing:.14em}

/* Cards: one corner, one hairline, one soft lift (no hard offset shadows) */
html body :is(.vn-stop,.vn-album .vn-stop,.jp-day-card .vn-stop,.ba-scrap-row>.vn-stop,.ba-dinners article,
  .outing,.before,.pace,.progress-panel,.fn-budget,.fn-support,.fn-card,.fn-card-face,.fn-flip-front,
  .day,.fn-experiences,.practical){
  border:1px solid var(--fn-hair);border-radius:var(--fn-r);box-shadow:var(--fn-lift)}
html body.fn-vienna #itinerary :is(.day-head,.period){border:1px solid var(--fn-hair);border-radius:var(--fn-r);box-shadow:var(--fn-lift)}
html body.fn-vienna #itinerary section.day{border:0;box-shadow:none;border-radius:0}
html body .fn-budget-row{border-radius:10px;background:#fdebd8b3}
html body .fn-support{border-left:3px solid var(--fn-red)}
html body.fn-mexico .outing{border-top:3px solid var(--accent,var(--fn-red))}
html body .weekend .outing-heading{border-radius:var(--fn-r) var(--fn-r) 0 0}

/* Tips and notes: a thin wine rule, no box shadow */
html body :is(.tip,.outing-note),html body.fn-vienna #itinerary .tip{box-shadow:none;border:0;border-left:2px solid var(--fn-red);border-radius:0 10px 10px 0}

/* Photos: hero, portraits, postcards and the map card lose the hard black block shadow */
html body :is(.fn-vienna-hero-photo,.ba-hero-layout .ba-photo,.vn-portrait,.postcard,.fn-home-portrait,.fn-about-portrait){box-shadow:var(--fn-photo)}
html body .fn-map-card{box-shadow:var(--fn-photo),inset 0 0 40px #a7884f26}
html body .fn-pc-back{box-shadow:var(--fn-photo)}
html body :is(.vn-album-photo,.jp-photo,.ba-scrap-photo,.fn-v-photo){box-shadow:var(--fn-photo);border-color:#00000012}

/* Map links and small links: quieter */
html body :is(.vn-map,.fn-map-links a){font-weight:500;font-size:.8rem;text-decoration:none;border-bottom:1px solid #b3054540;color:var(--fn-red)}
html body :is(.vn-map,.fn-map-links a):hover{border-bottom-color:var(--fn-red)}

/* Handwritten notes in wine, not blue */
html body :is(.fn-margin-note,.fn-map-picked,.fn-map-hint,.fn-map-numbers p){color:var(--fn-red);font-weight:500}

/* Buttons and pills: lighter */
html body :is(button,.fn-btn,nav[aria-label] a,.vn-jump a){font-weight:500}
html body.fn-vienna nav a{background:transparent;border-color:#b3054555}
html body .number{font-weight:600}

/* Checkboxes: thinner, wine when ticked */
html body input[type=checkbox]{accent-color:var(--fn-red)}

/* Day titles inside cards use the site's serif, like every other page */
html body .jp-day-card .vn-stop>h3,html body .jp-days .vn-stop>h3{font:600 1.45rem/1.25 'Playfair Display',Georgia,serif;letter-spacing:-.01em;margin:0 0 14px}

/* Palette: antique white paper, black ink, cherry rose accent. Cards are outlined only: no fill, no lift. */
:root{--fn-paper:#FDEBD8;--fn-red:#B30545;--fn-blue:#B30545;--fn-ink:#030301;--fn-hair:#03030133;--fn-lift:none}
html body{background:#FDEBD8}
html body :is(.fn-card,.fn-card-face,.fn-flip-front,.fn-budget,.fn-support,.fn-map-numbers p,.vn-stop,.jp-day-card .vn-stop,.ba-scrap-row>.vn-stop,
  .ba-dinners article,.outing,.before,.pace,.progress-panel,.day,.fn-experiences,.practical,.outing-note){background:transparent}
html body.fn-vienna #itinerary :is(.day-head,.period){background:transparent}
html body .fn-header{background:#FDEBD8}
/* The back of a turned destination card keeps its solid cherry fill (text on it is cream) */
html body .fn-card .fn-card-back{background:var(--fn-red);color:#FDEBD8;border-color:var(--fn-red)}

/* Heading icons: one size whatever the heading size, with a clear gap after the words */
html body .fn-icon{width:34px;height:34px;margin-top:-17px;left:14px}
html body h3 .fn-icon{width:26px;height:26px;margin-top:-13px;left:12px}

/* "See all 41 countries" list under the map */
html body .fn-countries{margin:18px 0 0}
html body .fn-countries summary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:9px 16px;border:1px solid var(--fn-red);border-radius:99px;color:var(--fn-red);font:500 .9rem 'DM Sans',sans-serif}
html body .fn-countries summary::-webkit-details-marker{display:none}
html body .fn-countries summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .25s}
html body .fn-countries[open] summary::after{rotate:225deg;translate:0 2px}
html body .fn-countries-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px 34px;margin-top:22px;padding:24px 26px;border:1px solid var(--fn-hair);border-radius:var(--fn-r)}
html body .fn-countries-grid>div:first-child ul{columns:3;column-gap:24px}
html body .fn-countries-grid>div:nth-child(2) ul{columns:1}
html body .fn-countries-h{margin:0 0 10px;font:600 .75rem 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--fn-red)}
html body .fn-countries-h span{color:var(--fn-soft);font-weight:500;margin-left:4px}
html body .fn-countries ul{margin:0;padding:0;list-style:none}
html body .fn-countries li{padding:3px 0;font-size:.95rem;break-inside:avoid}
html body .fn-countries li a{color:inherit;text-decoration:none;border-bottom:1px solid var(--fn-red)}
html body .fn-countries-note{margin:10px 0 0;font-size:.8rem;color:var(--fn-soft)}
html body .fn-countries-grid>div:nth-child(n+3){grid-column:3}
html body .fn-countries-grid>div:nth-child(-n+2){grid-row:1 / span 4}
html body .fn-countries-grid{align-content:start;grid-auto-rows:min-content}
@media(max-width:760px){html body .fn-countries-grid>div:nth-child(-n+2){grid-row:auto}html body .fn-countries-grid{grid-template-columns:1fr 1fr;padding:18px}html body .fn-countries-grid>div:first-child{grid-column:1/-1}html body .fn-countries-grid>div:first-child ul{columns:2}html body .fn-countries-grid>div:nth-child(n+3){grid-column:auto}}

/* Map: country borders keep the same thin line when zoomed in */
html body .fn-map-svg :is(path,circle){vector-effect:non-scaling-stroke}

/* Mexico pages: each stop group splits into shorter cards (heading, one card per part of the day, note),
   with up to two tilted photos beside a card, alternating sides; photos sit above the card on phones */
html body.fn-mexico .outing.fn-split{border:0;background:none;box-shadow:none;padding:0;margin:0 0 56px}
html body.fn-mexico .fn-split>.outing-heading,html body.fn-mexico .fn-split .task-group,html body.fn-mexico .fn-split>.outing-note{border:1px solid var(--fn-hair);border-radius:var(--fn-r);background:transparent;margin:0 0 22px}
html body.fn-mexico .fn-split>.outing-heading{border-top:3px solid var(--accent,var(--fn-red))}
html body.fn-mexico .fn-split .task-group{padding:22px 26px}
html body.fn-mexico .fn-split>.outing-note{border:0;border-left:2px solid var(--fn-red);border-radius:0 10px 10px 0;margin:0 0 0 0}
html body.fn-mexico .fn-split-body{display:block;padding:0;border:0}
html body.fn-mexico .fn-split-body>.task-group{max-width:660px}
html body.fn-mexico .fn-v-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:center;margin:0 0 22px}
html body.fn-mexico .fn-v-row>.task-group{grid-column:2;grid-row:1;margin:0}
html body.fn-mexico .fn-v-side{grid-column:1;grid-row:1;min-width:0;display:flex;gap:16px;align-items:flex-start;justify-content:center;padding:10px}
html body.fn-mexico .fn-v-rev>.task-group{grid-column:1}html body.fn-mexico .fn-v-rev .fn-v-side{grid-column:2}
html body.fn-mexico .fn-v-photo{flex:1 1 0;min-width:0;margin:0;padding:10px 10px 24px;background:#fdebd8;border:1px solid #00000012;box-shadow:var(--fn-photo);transform:rotate(-2deg)}
html body.fn-mexico .fn-v-photo:only-child{max-width:360px}
html body.fn-mexico .fn-v-photo:nth-child(2){transform:rotate(2deg);margin-top:36px}
html body.fn-mexico .fn-v-photo a{display:block}
html body.fn-mexico .fn-v-photo img{display:block;width:100%;height:auto}
html body.fn-mexico .fn-v-photo figcaption{font:400 .7rem/1.35 'DM Sans',sans-serif;color:#303030;margin-top:8px}
html body.fn-mexico .fn-v-photo figcaption a{color:inherit}
@media(max-width:760px){html body.fn-mexico .fn-v-row{display:flex;flex-direction:column;gap:0}html body.fn-mexico .fn-v-side{width:100%;box-sizing:border-box;padding:0 6px;gap:12px}html body.fn-mexico .fn-v-photo{padding:6px 6px 16px}html body.fn-mexico .fn-v-photo:only-child{max-width:78%}html body.fn-mexico .fn-v-photo:nth-child(2){margin-top:22px}html body.fn-mexico .fn-v-row>.task-group{width:100%;box-sizing:border-box;margin-top:-10px;position:relative;z-index:1}html body.fn-mexico .fn-split .task-group{padding:20px 18px}}
/* Saturday day-trip headings keep their solid cherry fill with cream text */
html body.fn-mexico .weekend.fn-split>.outing-heading{background:var(--fn-red);color:#FDEBD8;border-color:var(--fn-red)}

/* Every page: 60px heading icons and a little icon after every stop title (Nicky's choice) */
html body h1 .fn-icon,html body h2 .fn-icon,html body h3 .fn-icon{width:60px;height:60px;margin-top:-30px;left:14px}
html body .fn-stop-icon{display:inline-block;vertical-align:middle;margin:-6px 0 -6px 8px;line-height:0}
html body .fn-stop-icon .fn-icon{position:static;display:block;width:36px;height:36px;margin:0;left:auto}

/* My travels: trip length and country drop-downs side by side (Nicky found pills too busy) */
html body .fn-filters{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:flex-end}
@media(max-width:650px){html body .fn-filters{justify-content:flex-start}}
/* Drop-downs: our own chevron, well inside the box (Safari drew its arrow against the edge) */
html body .fn-filter select{-webkit-appearance:none;appearance:none;padding:10px 44px 10px 16px;background:#FDEBD8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B30545' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center/12px 8px}
/* The "No rushing required" box on the Mexico pages: text sits inside the outline, not on it */
html body .pace{padding:20px 28px;margin:8px 0 28px}
html body .pace p{margin:0}
@media(max-width:600px){html body .pace{padding:16px 20px}}
/* Booking and info links under a stop (Puerto Escondido tours): small cherry links, one per line on phones */
html body .fn-task-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:.85em}
html body .fn-task-links a{color:#B30545;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html body .fn-plan-name a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}