/* Shared shell for every page except the home page.

   The home page keeps its own inline stylesheet: it carries the map, the
   programme and the share sheet, none of which appear anywhere else, and
   inlining it saves a round trip on the one page everybody lands on. What
   lives here is only what the four text pages need — tokens, masthead,
   footer, and a prose layout — so the two can never disagree about a colour
   or a typeface. Tokens below are copied verbatim from index.html. */

@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin-opsz-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --paper:#F6EFE3; --card:#FFFBF4; --ink:#1E2A4A; --brick:#9E3B26; --amber:#FFB547; --muted:#595F73; --rule:#D8CCB8;
  --green:#2D6B4D; --green-deep:#1F4A36;
  --gutter:clamp(1.25rem,4vw,3rem);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.5 var(--sans);font-variant-numeric:tabular-nums}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--brick);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--green-deep);color:var(--card);padding:.7rem 1rem;z-index:40;font-weight:600}
.skip:focus{left:var(--gutter)}

/* ---------- masthead: the small one, for pages that are not the front ----------
   The home page wordmark is set at up to 7.5rem because it is the front page of
   a paper. Repeating that here would make every text page look like a second
   front page, and would push the actual content of a 150-word disclaimer below
   the fold. This is the same type at running-head size. */
.sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.25rem;padding:.9rem var(--gutter);border-bottom:1px solid var(--rule)}
.sub__wm{font:800 1.75rem/1 var(--serif);letter-spacing:-.02em;color:var(--green-deep);text-decoration:none}
.sub nav ul{display:flex;flex-wrap:wrap;gap:0 1.1rem}
.sub nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--green);text-underline-offset:.25em}
.sub nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px}

/* ---------- the page body ----------
   Two columns that are deliberately unequal, anchored to the left gutter and
   running to the right edge of the page — not a centred measure. The title rail
   holds still while the prose scrolls past it, so you always know which of the
   four pages you are on. Below 900px it stacks and the rail becomes a heading. */
.page{padding:0 var(--gutter) 3rem}
.page__rail h1{font:800 clamp(2.1rem,6vw,3.4rem)/1.05 var(--serif);letter-spacing:-.02em;color:var(--green-deep);padding:1.6rem 0 .3rem}
.page__rail p{color:var(--muted);font-weight:600;max-width:30ch;padding-bottom:1rem}
@media (min-width:900px){
  .page{display:grid;grid-template-columns:minmax(12rem,20rem) minmax(0,1fr);column-gap:clamp(2rem,5vw,5rem);align-items:start}
  .page__rail{position:sticky;top:0;padding-bottom:2rem}
  .page__body{padding-top:1.9rem}
}

/* Prose gets a reading measure, but the column it sits in stays anchored to the
   gutter — the text stops, the layout does not re-centre around it. */
.prose{max-width:62ch}
.prose > * + *{margin-top:.9rem}
.prose h2{font:800 1.5rem/1.15 var(--serif);color:var(--green);margin-top:2.1rem}
.prose h3{font:700 1.125rem/1.2 var(--serif);color:var(--green-deep);margin-top:1.4rem}
.prose a{color:var(--green-deep);font-weight:600;text-decoration:underline;text-decoration-thickness:1px}
.prose ul,.prose ol{display:grid;gap:.5rem;padding-left:1.35rem}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li::marker{color:var(--green)}
.prose strong{font-weight:700}
.prose .lede{font-size:1.125rem;font-weight:600}
.prose .stamp{color:var(--muted);font-size:.9375rem}

/* ---------- dates ---------- */
.sched{display:grid;gap:.6rem;margin-top:1.1rem}
.sched__row{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:.8rem 1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.sched__row.is-next{border-color:var(--green-deep);border-left:6px solid var(--amber)}
.sched__d{font:700 1.125rem/1.2 var(--serif);flex:1 0 11rem}
.sched__tag{background:var(--amber);color:var(--ink);font:700 .75rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .45rem;border-radius:3px;margin-left:.5rem;white-space:nowrap}
.sched__acts{display:flex;flex-wrap:wrap;gap:.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 .9rem;border:1.5px solid var(--green-deep);border-radius:999px;background:var(--card);color:var(--green-deep);font:700 .9375rem/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn--main{background:var(--green);border-color:var(--green);color:var(--card)}

/* ---------- signup ---------- */
.signup{background:var(--green-deep);color:var(--card);border-radius:12px;padding:1.2rem 1.3rem 1.3rem;outline:2px solid var(--amber);outline-offset:-8px;margin-top:2.2rem;max-width:40rem}
.signup h2{font:700 1.375rem/1.2 var(--serif);color:var(--amber);margin:0}
.signup__form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.signup input[type=email]{flex:1 1 14rem;min-height:44px;padding:0 .75rem;border:1.5px solid var(--card);border-radius:4px;background:var(--card);color:var(--ink);font:500 1rem var(--sans)}
.signup button{min-height:44px;padding:0 1.1rem;border:0;border-radius:999px;background:var(--amber);color:var(--ink);font:700 .9375rem var(--sans);cursor:pointer}
.signup button[disabled]{opacity:.6;cursor:progress}
/* Off-screen, not display:none — a hidden input is skipped by the bots worth
   catching, while an off-screen one still gets filled by the ones that are not. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup__consent{margin-top:.6rem;font-size:.9375rem}
.signup__consent a{color:var(--amber);font-weight:600}
.signup__msg{min-height:1.5em;margin-top:.5rem;font-weight:700;color:var(--amber)}

/* ---------- faq ---------- */
.faq{display:grid;gap:.5rem;margin-top:1rem;max-width:62ch}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:6px}
.faq summary{display:flex;align-items:center;min-height:48px;padding:.6rem 1rem;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:1rem;font:700 1.35rem/1 var(--sans);color:var(--green)}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--green-deep)}
.faq p{padding:0 1rem 1rem}

/* ---------- the €20 sample listing ----------
   Drawn with the site's own card styles rather than the hand-written inline
   colours the old page used, so what a buyer is shown is literally what they
   get. The gold left edge and the gold dot are the same two things the map and
   the programme use for a featured listing. */
.sample{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start;margin-top:1rem}
.sample__card{flex:0 1 20rem;background:var(--card);border:1px solid var(--rule);border-left:6px solid var(--amber);border-radius:6px;padding:.8rem 1rem 1rem}
.sample__flag{display:inline-block;background:var(--amber);color:var(--ink);font:700 .75rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .45rem;border-radius:3px}
.sample__card h3{font:600 1.25rem/1.25 var(--serif);margin:.5rem 0 .1rem}
.sample__at{font-weight:600;color:var(--muted)}
.sample__card p:last-child{margin-top:.35rem}
.sample__map{flex:0 1 13rem;text-align:center}
.sample__pin{width:18px;height:18px;border-radius:50%;background:var(--amber);border:2.5px solid var(--green-deep);margin:.9rem auto .7rem}
.sample__map p{color:var(--muted);font-size:.9375rem}

/* ---------- footer ---------- */
footer{background:var(--green-deep);color:var(--card);padding:1.5rem var(--gutter) 2.5rem;display:grid;gap:.8rem;font-size:.9375rem}
footer ul{display:flex;flex-wrap:wrap;gap:0 1.3rem}
footer a{color:var(--amber)}
footer ul a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
footer p{max-width:46rem}

@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }