/* Llum Nòmada — sistema visual del quadern de viatge: manuscrit insular i capital romana
   damunt vitel·la. Tinta, brezo i or vell, mai color pla. */

:root {
  --vitela: #ede6d6;
  --vitela-mojada: #e1d8c0;
  --tinta: #1e211c;
  --oro-viejo: #a07c33;
  --oro-logo: #af9052;
  --piedra: #8a8677;
  --verde-brezo: #445d4e;
  --blau-mari-clar: #c7d5e6;
  --crema-suau: #f6efdf;
  --verd-maragda: #5ac98a;
  --rosa-suau: #f9e9ec;
  --borgonya-suau: #cb92a0;

  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-uncial: 'Uncial Antiqua', var(--font-display);
  --font-handwritten: 'Kalam', 'Comic Sans MS', cursive;

  --box-shadow: 0 2px 8px rgba(30, 33, 28, 12%);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  background: var(--vitela);
  color: var(--tinta);
  font-size: 21px;
  line-height: 1.65;
}

main { width: 720px; max-width: calc(100% - 2em); margin: auto; padding: 3em 1em; }

@media (max-width: 720px) {
  body { font-size: 18px; }
  main { padding: 1em; }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem 0;
  color: var(--tinta);
  line-height: 1.2;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
h1 { font-size: 2.7em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.1em; }

a { color: var(--tinta); text-decoration-color: var(--oro-viejo); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--oro-viejo); }

strong, b { font-weight: 600; }
p { margin-bottom: 1em; }
img { max-width: 100%; height: auto; }
table { width: 100%; }
hr { border: none; border-top: 1px solid var(--piedra); opacity: 0.35; }

.prose { text-align: left; }
.prose p { margin-bottom: 1.6em; }
.prose em { font-style: italic; }

/* Photo captions: a paragraph whose entire content is a single <em> — authored that way
   deliberately in the editor to mark it as a caption, not inferred from its position. */
.prose > p:has(> em:only-child) { font-size: 0.85em; }
.prose > p:first-of-type::first-letter {
  font-family: var(--font-uncial);
  font-size: 3.4em;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.1em 0 0;
  color: var(--oro-viejo);
  font-weight: 400;
}

blockquote { border-left: 2px solid var(--oro-viejo); padding: 0 0 0 20px; margin: 1.5em 0; font-size: 1.2em; font-style: italic; color: var(--tinta); }

.prose-image {
  display: inline-block;
  vertical-align: top;
  margin: 0.6em 1.5% 1.4em;
}
.prose-image img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: var(--box-shadow);
  border-style: solid;
}
.prose-image-link { display: block; cursor: zoom-in; }

/* Photo frame + size are per-article (each relat carries its own decorative treatment). They all work the
   same way: the photo runs to its edge and the frame is an overlay (a pseudo-element on the link, since an
   <img> can't have one) that fades out towards the inside via a mask — one gradient per side. Each article
   names its frame image in --frame: a 384 px square drawn as corner / edge / corner (slice 128). The frames are
   deliberately thin and light, so the photograph stays the protagonist. */
.page-roma .prose-image,
.page-copenhagen .prose-image,
.page-irlanda .prose-image,
.page-berlin .prose-image,
.page-dresden .prose-image { width: 80%; }
.page-roma { --frame: url("/frame-roma.png") 128 round; }
.page-copenhagen { --frame: url("/frame-copenhagen.png") 128 round; }
.page-irlanda { --frame: url("/frame-celtic.png") 128 round; }
.page-berlin { --frame: url("/frame-berlin.png") 128 round; }
.page-dresden { --frame: url("/frame-dresden.png") 128 round; }
.page-roma .prose-image-link,
.page-copenhagen .prose-image-link,
.page-irlanda .prose-image-link,
.page-berlin .prose-image-link,
.page-dresden .prose-image-link { position: relative; --w: 20px; --solid: 45%; }
.page-roma .prose-image img,
.page-copenhagen .prose-image img,
.page-irlanda .prose-image img,
.page-berlin .prose-image img,
.page-dresden .prose-image img { border-width: 0; }
.page-roma .prose-image-link::after,
.page-copenhagen .prose-image-link::after,
.page-irlanda .prose-image-link::after,
.page-berlin .prose-image-link::after,
.page-dresden .prose-image-link::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--w) solid transparent;
  border-image: var(--frame);
  -webkit-mask-image:
    linear-gradient(to right, #000 0, #000 var(--solid), transparent 100%),
    linear-gradient(to left, #000 0, #000 var(--solid), transparent 100%),
    linear-gradient(to bottom, #000 0, #000 var(--solid), transparent 100%),
    linear-gradient(to top, #000 0, #000 var(--solid), transparent 100%);
  mask-image:
    linear-gradient(to right, #000 0, #000 var(--solid), transparent 100%),
    linear-gradient(to left, #000 0, #000 var(--solid), transparent 100%),
    linear-gradient(to bottom, #000 0, #000 var(--solid), transparent 100%),
    linear-gradient(to top, #000 0, #000 var(--solid), transparent 100%);
  -webkit-mask-size: var(--w) 100%, var(--w) 100%, 100% var(--w), 100% var(--w);
  mask-size: var(--w) 100%, var(--w) 100%, 100% var(--w), 100% var(--w);
  -webkit-mask-position: left, right, top, bottom;
  mask-position: left, right, top, bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Pure-CSS lightbox: the thumbnail links to #lightbox-N, :target reveals the fullscreen overlay. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 4em 1.5em;
  background: rgba(30, 33, 28, 0.92);
  cursor: zoom-out;
}
.lightbox:target { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 30px rgba(0, 0, 0, 40%); }

/* Watermark: faint site mark fixed on every page */
.watermark { position: fixed; right: 1.2em; bottom: 1.2em; width: 96px; height: 96px; opacity: 0.07; pointer-events: none; z-index: 1; }
.watermark img { width: 100%; height: 100%; display: block; }
@media (max-width: 600px) { .watermark { width: 58px; height: 58px; right: 0.7em; bottom: 0.7em; } }

.eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7em; color: var(--piedra); }
.tag { display: inline-block; padding: 0.2em 0.7em; margin: 0 0.4em 0.4em 0; border: 1px solid var(--piedra); color: var(--piedra); font-family: var(--font-mono); font-size: 0.65em; letter-spacing: 0.04em; text-transform: uppercase; }
a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--oro-viejo); color: var(--tinta); }
.location { display: inline-flex; align-items: center; gap: 0.35em; color: var(--verde-brezo); font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.03em; text-transform: uppercase; }
.ornament-rombo { display: flex; justify-content: center; margin: 3em 0; color: var(--oro-viejo); font-size: 1.1em; }

.btn { display: inline-block; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8em; padding: 0.9em 1.8em; border-radius: 0; text-decoration: none; }
.btn-solid { background: var(--verde-brezo); color: var(--vitela); border: 1px solid var(--verde-brezo); }
.btn-solid:hover { background: var(--tinta); border-color: var(--tinta); color: var(--vitela); }
.btn-outline { background: transparent; color: var(--tinta); border: 1px solid var(--tinta); }
.btn-outline:hover { border-color: var(--oro-viejo); color: var(--oro-viejo); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Header */
.site-header { background: var(--tinta); padding: 1.2em 1em 0; }
.header-inner { width: 960px; max-width: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1em; padding-bottom: 1em; }
.brand { display: flex; align-items: center; gap: 0.6em; text-decoration: none; }
.brand span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--oro-logo); font-size: 1.1em; }
.site-header nav { display: flex; gap: 1.5em; }
.site-header nav a { color: var(--vitela); text-decoration: none; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.04em; padding-bottom: 0.3em; border-bottom: 2px solid transparent; }
.site-header nav a:hover, .site-header nav a.active { border-bottom-color: var(--oro-viejo); color: var(--vitela); }
.header-chain { display: block; width: 100%; height: 16px; }
@media (max-width: 480px) {
  .header-inner { flex-direction: column; text-align: center; }
  .site-header nav { justify-content: center; gap: 1em; }
  .site-header nav a { white-space: nowrap; letter-spacing: 0.02em; }
}

/* Footer */
.site-footer { background: var(--tinta); color: var(--vitela); text-align: center; padding: 3em 1em; margin-top: 4em; }
.site-footer p { color: var(--vitela); opacity: 0.85; font-size: 0.9em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 1.5em; margin-top: 1em; }
.footer-links a { color: var(--oro-logo); text-decoration: underline; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.04em; }
.footer-links a:hover { color: var(--vitela); }

/* Home */
.page-home main.page-home { padding: 0; width: 100%; max-width: 100%; }
.hero { position: relative; background: var(--tinta); text-align: center; padding: 6em 1em; overflow: hidden; }
.hero-mark { position: absolute; top: 50%; left: 50%; width: 640px; height: 640px; transform: translate(-50%, -50%); opacity: 0.08; }
.hero .wordmark { position: relative; text-align: center; }
.hero .wordmark .llum { display: block; font-size: 1.4em; color: var(--vitela); }
.hero .wordmark .nomada { display: block; font-size: 2.2em; color: var(--oro-logo); }
.hero .tagline { position: relative; font-style: italic; font-family: var(--font-body); font-size: 1.3em; max-width: 560px; margin: 1em auto 2em; color: var(--vitela); }
@media (max-width: 720px) {
  .hero .wordmark .llum { font-size: 1.1em; }
  .hero .wordmark .nomada { font-size: 1.3em; letter-spacing: 0.02em; }
}
.about-blurb { width: 640px; max-width: calc(100% - 2em); margin: 3.5em auto 0; text-align: center; }
.about-blurb p { font-style: italic; font-size: 1.15em; line-height: 1.7; }
.about-blurb .see-all { margin-top: 0.5em; }

.latest { width: 960px; max-width: calc(100% - 2em); margin: 3.5em auto; }
.latest h2 { text-align: center; margin-bottom: 1.5em; }
.latest ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.latest li { width: calc(33.333% - 1.4rem); }
.latest a { text-decoration: none; color: var(--tinta); display: block; }
.latest img { width: 100%; height: 180px; object-fit: cover; box-shadow: var(--box-shadow); }
.latest h4 { margin-top: 0.7em; font-size: 1.1em; }
.latest .date { font-family: var(--font-mono); font-size: 0.7em; color: var(--piedra); text-transform: uppercase; }
.see-all { display: block; text-align: center; margin-top: 2em; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.03em; }
@media (max-width: 720px) { .latest li { width: 100%; } }

/* Blog index */
main.page-blog-index { width: 960px; max-width: calc(100% - 2em); }
main.page-blog-index h1 { text-align: center; margin-bottom: 1.5em; }
main.page-blog-index h1, main.page-blog-index h2 { overflow-wrap: anywhere; }
@media (max-width: 720px) { main.page-blog-index h1 { font-size: 1.8em; } main.page-blog-index .destination h2 { font-size: 1.6em; } }
main.page-blog-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; }
main.page-blog-index li { width: calc(50% - 1rem); }
main.page-blog-index li.featured { width: 100%; text-align: center; }
main.page-blog-index a { text-decoration: none; color: var(--tinta); display: block; }
main.page-blog-index img { width: 100%; height: 240px; object-fit: cover; box-shadow: var(--box-shadow); }
main.page-blog-index li.featured img { height: 340px; }
main.page-blog-index h4.title { margin-top: 0.7em; }
main.page-blog-index li.featured h4.title { font-size: 2rem; }
main.page-blog-index .intro { text-align: center; margin: -1em 0 1.5em; font-style: italic; }
main.page-blog-index .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; margin: 0 0 2em; }
main.page-blog-index .chips a { display: inline-block; padding: 0.3em 0.9em; border: 1px solid var(--piedra); font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--piedra); }
main.page-blog-index .chips a:hover, main.page-blog-index .chips a.current { border-color: var(--oro-viejo); color: var(--tinta); background: rgba(160, 124, 51, 12%); }
/* World map: the static drawing is the background (zoomed inline); pins are plain links. */
main.page-blog-index .world-map { position: relative; width: 100%; aspect-ratio: var(--ar, 1.6); margin: 0 0 2em; background: #c7d5e6; border: 1px solid rgba(138, 134, 119, 55%); box-shadow: var(--box-shadow); overflow: hidden; }
main.page-blog-index .world-map .map-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
main.page-blog-index .world-map.is-zoomable { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
main.page-blog-index .world-map.is-zoomable.zoomed { touch-action: none; }
main.page-blog-index .world-map.dragging { cursor: grabbing; }
main.page-blog-index .world-map.far .map-pin .label { display: none; }
main.page-blog-index .map-controls { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
main.page-blog-index .map-controls button { width: 34px; height: 34px; padding: 0; border: 1px solid rgba(138, 134, 119, 70%); background: rgba(255, 255, 255, 88%); color: var(--tinta); font-family: var(--font-mono); font-size: 18px; line-height: 1; cursor: pointer; touch-action: manipulation; }
main.page-blog-index .map-controls button:hover:not(:disabled) { border-color: var(--oro-viejo); }
main.page-blog-index .map-controls button:disabled { opacity: 0.4; cursor: default; }
main.page-blog-index .map-pin { position: absolute; display: flex; align-items: center; gap: 0.45em; transform: translate(-7px, -50%); text-decoration: none; color: var(--tinta); }
main.page-blog-index .map-pin.left { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
main.page-blog-index .map-pin .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--oro-viejo); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(30, 33, 28, 45%); transition: transform 0.15s; }
main.page-blog-index .map-pin .label { font-family: var(--font-mono); font-size: 0.62em; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 5px #fff; }
main.page-blog-index .map-pin:hover .dot, main.page-blog-index .map-pin:focus-visible .dot { transform: scale(1.3); background: var(--verde-brezo); }
main.page-blog-index .map-pin:focus-visible { outline: 2px solid var(--verde-brezo); outline-offset: 4px; }
main.page-blog-index .destination { margin-bottom: 3em; scroll-margin-top: 1em; }
main.page-blog-index .destination h2 { margin-bottom: 1em; padding-bottom: 0.3em; border-bottom: 1px solid rgba(138, 134, 119, 40%); }
main.page-blog-index .destination h2 span, main.page-blog-index .by-theme { font-family: var(--font-mono); }
main.page-blog-index .destination h2 span { font-size: 0.4em; font-weight: 400; letter-spacing: 0.04em; color: var(--piedra); text-transform: uppercase; margin-left: 0.6em; }
main.page-blog-index .by-theme { text-align: center; font-size: 1.1em; margin: 2em 0 1em; }
main.page-blog-index .meta { display: flex; gap: 1em; align-items: center; font-family: var(--font-mono); font-size: 0.7em; color: var(--piedra); text-transform: uppercase; margin-top: 0.4em; }
@media (max-width: 720px) { main.page-blog-index li, main.page-blog-index li.featured { width: 100%; } }

/* Article */
.page-article main { width: calc(100% - 2em); max-width: 100%; margin: 0; padding: 0; }
.hero-image { width: 100%; max-height: 420px; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.page-article .prose { width: 720px; max-width: calc(100% - 2em); margin: auto; padding: 3em 1em; }
.page-article .title { text-align: center; padding: 1em 0; }
.page-article .title .meta { display: flex; justify-content: center; align-items: center; gap: 1em; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.7em; color: var(--piedra); flex-wrap: wrap; }
.page-article .title .tags { margin-top: 1em; }

.reading { font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.03em; text-transform: uppercase; }

/* Practical sheet, table of contents and previous/next links — plain HTML, no JS. */
.trip-info { margin: 0 0 1.8em; padding: 1em 1.3em; border: 1px solid rgba(30, 33, 28, 25%); background: rgba(255, 255, 255, 35%); font-family: var(--font-mono); font-size: 0.75em; line-height: 1.5; }
.trip-info h2 { margin: 0 0 0.7em; font-size: 1.1em; }
.trip-info dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1.2em; margin: 0; }
.trip-info dl > div { display: contents; }
.trip-info dt { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--verde-brezo); }
.trip-info dd { margin: 0; }
.toc { margin: 0 0 2em; border-left: 2px solid var(--oro-viejo); padding-left: 1em; }
.toc summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85em; }
.toc summary span { font-family: var(--font-mono); font-weight: 400; text-transform: none; font-size: 0.85em; color: var(--piedra); }
.toc ol { margin: 0.8em 0 0; padding-left: 1.4em; font-size: 0.85em; line-height: 1.5; }
.toc li { margin-bottom: 0.3em; }
.prose h3[id] { scroll-margin-top: 1em; }
.post-nav { display: flex; gap: 1em; margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid rgba(30, 33, 28, 25%); }
.post-nav a { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.3em; padding: 0.9em 1em; border: 1px solid rgba(30, 33, 28, 25%); text-decoration: none; }
.post-nav a:hover { border-color: var(--oro-viejo); }
.post-nav a span { font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--verde-brezo); }
.post-nav a strong { font-family: var(--font-display); font-size: 0.85em; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.post-nav a.next { text-align: right; margin-left: auto; }
@media (max-width: 720px) { .post-nav { flex-direction: column; } .trip-info dl { grid-template-columns: 1fr; gap: 0.1em; } .trip-info dd { margin-bottom: 0.5em; } }

.refs { font-family: var(--font-mono); font-size: 0.75em; color: var(--piedra); border-top: 1px solid var(--piedra); padding-top: 1.5em; margin-top: 2em; }
.refs li { margin-bottom: 0.5em; }

/* Reader rating — a CSS-only (no JS) 1-5 star vote, one per visitor, form-submitted. */
.rating { text-align: center; margin-top: 1em; }
.rating h3 { font-size: 1.3em; }
.rating-table {
  margin: 1em auto 1.5em;
  max-width: 420px;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75em;
  color: var(--piedra);
}
.rating-table td { vertical-align: middle; }
.rating-table td:first-child { width: 5.5em; }
.rating-table td:last-child { padding: 0.55em 0; }
/* The tap target's real padding lives on the star glyph itself (button or span), not on a
   surrounding wrapper — a negative-margin trick to fake extra touch area without it bled into
   neighbouring rows and silently swallowed taps there. Real padding on the interactive element
   keeps the visible spacing and the hit box the same box. */
.rating-table .stars {
  display: block;
  box-sizing: border-box;
  padding: 0.55em 0.6em 0.55em 0;
  color: var(--oro-viejo);
  letter-spacing: 0.05em;
}
button.stars {
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  font: inherit;
  font-size: 1.15em;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
button.stars:hover,
button.stars:focus-visible {
  color: var(--verde-brezo);
}
.rating-table tr.mine td:last-child { color: var(--tinta); font-weight: 600; }
.rating-table tr.mine .stars { color: var(--verde-brezo); }
.rating-result { font-family: var(--font-mono); font-size: 0.85em; color: var(--tinta); margin-bottom: 1em; }
.rating-result .stars-display { color: var(--oro-viejo); font-size: 1.3em; letter-spacing: 0.05em; margin-right: 0.3em; }
.rating-thanks { font-style: italic; color: var(--verde-brezo); }

/* Mobile: the desktop percentages (44% / 80% of an already narrow column) leave thumbnails
   too small and the frame too heavy, so photos become a centred, near-full-width block with a
   proportionally thinner frame. */
@media (max-width: 720px) {
  .page-roma .prose-image,
  .page-copenhagen .prose-image,
  .page-irlanda .prose-image,
  .page-berlin .prose-image,
  .page-dresden .prose-image { display: block; width: 90%; margin: 1.2em auto 1.4em; }
  .page-roma .prose-image-link,
  .page-copenhagen .prose-image-link,
  .page-irlanda .prose-image-link,
  .page-berlin .prose-image-link,
  .page-dresden .prose-image-link { --w: 15px; }
}

/* "ROMA: la Città Eterna" — darker parchment behind the reading column, to suit its photos */
.page-roma .prose { background: var(--vitela-mojada); box-shadow: 0 0 40px rgba(30, 33, 28, 10%) inset; }

/* "Copenhagen: la ciutat de les mil punxes" — light marine-blue reading column */
.page-copenhagen .prose { background: var(--blau-mari-clar); box-shadow: 0 0 40px rgba(30, 33, 28, 10%) inset; }

/* "Irlanda: l'illa Maragda" — emerald-green reading column; the muted grey-green used for small
   print elsewhere would wash out on it, so those texts are darkened here. */
.page-irlanda .prose { background: var(--verd-maragda); box-shadow: 0 0 40px rgba(20, 50, 30, 18%) inset; }
.page-irlanda .trip-info dt,
.page-irlanda .toc summary span,
.page-irlanda .post-nav a span { color: #143a24; }
.page-irlanda .prose .meta,
.page-irlanda .prose .meta *,
.page-irlanda .refs,
.page-irlanda .rating-table,
.page-irlanda .rating-result { color: var(--tinta); }
.page-irlanda .prose a { color: var(--tinta); }
.page-irlanda .rating-table .stars { color: #7a5416; }
.page-irlanda .rating-thanks { color: #143a24; }

/* "Berlín: l'Atenes de l'Spree" — very soft pink reading column; the dark ornamental frame around
   each photo (frame-berlin.png) fades out towards the picture, as in the Irish relat. */
.page-berlin .prose { background: var(--rosa-suau); box-shadow: 0 0 40px rgba(90, 40, 55, 8%) inset; }

/* "Dresden: la Florència de l'Elba" — soft burgundy reading column, with a simple gilded baroque frame
   (frame-dresden.png) that fades out towards each photo. Small print is darkened to stay legible. */
.page-dresden .prose { background: var(--borgonya-suau); box-shadow: 0 0 40px rgba(70, 10, 30, 14%) inset; }
.page-dresden .trip-info dt,
.page-dresden .toc summary span,
.page-dresden .post-nav a span,
.page-dresden .route-map-wrap figcaption { color: #4a1626; }
.page-dresden .prose .meta,
.page-dresden .prose .meta *,
.page-dresden .refs,
.page-dresden .rating-table,
.page-dresden .rating-result,
.page-dresden .prose a { color: var(--tinta); }
.page-dresden .rating-table .stars { color: #6e2236; }
.page-dresden .rating-thanks { color: #4a1626; }

/* "Com faig la motxilla per viatjar lleuger" — soft cream page + handwritten-look body text,
   like notes jotted in a travel notebook. Title stays in the site's display font on purpose. */
.page-motxilla .prose { background: var(--crema-suau); box-shadow: 0 0 40px rgba(30, 33, 28, 8%) inset; }
.page-motxilla .prose p,
.page-motxilla .prose blockquote,
.page-motxilla .prose h3 {
  font-family: var(--font-handwritten);
}
.page-motxilla .prose p,
.page-motxilla .prose blockquote {
  font-size: 1.15em;
  line-height: 1.55;
}
.page-motxilla .prose h3 {
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 700;
}
.page-motxilla .prose > p:first-of-type::first-letter {
  font-family: var(--font-handwritten);
  font-weight: 700;
}

/* Route map at the top of a relat: static, numbered pins joined by a dashed line */
.route-map-wrap { margin: 0 0 1.8em; }
.route-map { position: relative; width: 100%; aspect-ratio: var(--ar, 1.8); background: #c7d5e6; border: 1px solid rgba(138, 134, 119, 55%); overflow: hidden; }
.route-map .route-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.route-map-city { background: #f6ece8; }
.route-map-city .route-pin { width: 18px; height: 18px; line-height: 14px; font-size: 9.5px; }
.route-pin { position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: var(--oro-viejo); color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(30, 33, 28, 45%); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; line-height: 16px; text-align: center; }
.route-list { columns: 2; column-gap: 1.6em; margin: 0.9em 0 0; padding-left: 1.6em; font-family: var(--font-mono); font-size: 0.72em; line-height: 1.6; }
.route-map-wrap figcaption { margin-top: 0.5em; font-family: var(--font-mono); font-size: 0.65em; color: var(--piedra); }
.page-irlanda .route-map-wrap figcaption { color: #143a24; }
@media (max-width: 480px) { .route-list { columns: 1; } }

/* Series: the box inside each part, and the series page */
.series-box { margin: 0 0 1.8em; padding: 1em 1.2em; border: 1px solid rgba(30, 33, 28, 28%); background: rgba(255, 255, 255, 40%); }
.series-box .k { font-family: var(--font-mono); font-size: 0.65em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-brezo); }
.series-box .t { margin: 0.1em 0 0.5em; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9em; }
.series-box .t a { text-decoration: none; }
.series-box ol { list-style: none; margin: 0; padding: 0; font-size: 0.85em; }
.series-box li { display: flex; gap: 0.7em; align-items: baseline; padding: 0.35em 0; border-top: 0.5px solid rgba(30, 33, 28, 15%); }
.series-box li b { flex: none; width: 1.2em; font-family: var(--font-mono); font-weight: 400; font-size: 0.8em; color: var(--piedra); }
.series-box li a { text-decoration: none; }
.series-box li a:hover { text-decoration: underline; }
.series-box li em { margin-left: auto; flex: none; font-family: var(--font-mono); font-style: normal; font-size: 0.7em; color: var(--verde-brezo); }
.series-box li.cur { background: rgba(160, 124, 51, 16%); margin: 0 -0.5em; padding-left: 0.5em; padding-right: 0.5em; font-weight: 600; border-top-color: transparent; }
.page-series .intro { max-width: 640px; margin: -0.6em auto 1.2em; }
.page-series .series-start { text-align: center; margin: 0 0 2em; font-family: var(--font-mono); font-size: 0.8em; }
.page-series .series-start span { text-transform: uppercase; letter-spacing: 0.05em; color: var(--verde-brezo); }
.page-irlanda .series-box .k, .page-irlanda .series-box li b, .page-irlanda .series-box li em { color: #143a24; }

/* Newsletter sign-up box and its small standalone pages */
.subscribe { margin: 2.5em 0 0; padding: 1.4em 1.5em; border: 1px solid rgba(30, 33, 28, 25%); background: rgba(255, 255, 255, 35%); text-align: center; }
.subscribe h3 { font-size: 1.25em; }
.subscribe p { margin: 0 0 1em; }
.subscribe-row { display: flex; gap: 0.6em; max-width: 440px; margin: 0 auto 0.9em; }
.subscribe input[type="email"] { flex: 1 1 auto; min-width: 0; padding: 0.55em 0.7em; border: 1px solid var(--piedra); background: #fffdf8; font: inherit; font-size: 0.8em; color: var(--tinta); }
.subscribe button { flex: none; padding: 0.55em 1.1em; border: 1px solid var(--tinta); background: var(--tinta); color: var(--vitela); font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.subscribe button:hover { background: var(--verde-brezo); border-color: var(--verde-brezo); }
.subscribe .consent { display: block; max-width: 440px; margin: 0 auto; font-family: var(--font-mono); font-size: 0.62em; line-height: 1.5; text-align: left; color: var(--tinta); }
.subscribe .consent input { margin-right: 0.4em; }
.subscribe .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 480px) { .subscribe-row { flex-direction: column; } .subscribe button { padding: 0.8em 1em; } }
.page-newsletter main, main.page-newsletter { text-align: center; padding: 4em 1em; }
main.page-newsletter .subscribe { max-width: 560px; margin: 2em auto; }
main.page-newsletter h1 { overflow-wrap: anywhere; }
@media (max-width: 720px) { main.page-newsletter h1 { font-size: 1.8em; } }
.page-legal .prose > p:first-of-type::first-letter { all: unset; }
/* Mobile: single long words in a relat's title ("COPENHAGEN", "MARRÀKECH") must fit the column,
   and small links get a finger-sized hit area. */
.page-article .title h1 { overflow-wrap: anywhere; }
@media (max-width: 720px) { .page-article .title h1 { font-size: 1.9em; } }
.footer-links a { display: inline-block; padding: 0.5em 0.25em; }
.toc li { margin-bottom: 0; }
.toc li a { display: inline-block; padding: 0.3em 0; }

/* 404 */
.page-404 main { text-align: center; padding: 6em 1em; }