@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ==========================================================================
   CHRISTMAS AT ROWAN COTTAGE · stylesheet
   --------------------------------------------------------------------------
   The look: a printed invitation. White card, navy ink, fine blue rules and
   pink thistle ornaments (the drawings live in ornaments/).

   How this file is organised: one block per part of the page, top to bottom.
   Inside each block the normal rules come first, then the changes for
   smaller screens:
     max-width:1100px  small laptops and tablets
     max-width:900px   tablets
     max-width:650px   phones
     max-width:360px   very small phones
   The printer settings are all together at the very end.

   Tidied 25 Oct 2026 (one rule per thing, unused rules removed). The page
   looks the same as before. The old file is backups/style.before-tidy.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Colours and basics
   -------------------------------------------------------------------------- */
:root{
  --ink:#203b61;          /* navy: text, rules, headings */
  --cream:#fffdfb;        /* page background */
  --paper:#fffefe;        /* cards, frames */
  --line:#c3cedd;         /* fine blue rules */
  --line-strong:#97abc4;  /* slightly darker blue rules */
  --muted:#52627a;        /* grey-blue secondary text */
  --wine:#943e78;         /* pink accent text */
  --pink-line:#d9a9cc;    /* pink rules */
  --pink-wash:#fcf0f8;    /* very pale pink fill */
  --blue-wash:#f0f5fb;    /* very pale blue fill */
  --r:4px;                /* nearly square corners, like cut card */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{margin:0;background:var(--cream);color:var(--ink);font:19px/1.55 'EB Garamond',Garamond,Georgia,serif}
a{color:inherit;text-decoration:none;touch-action:manipulation}
a:focus-visible,summary:focus-visible{outline:3px solid #a65b92;outline-offset:5px}
h2{font:400 clamp(34px,3.2vw,47px)/1.2 'EB Garamond',Georgia,serif;letter-spacing:-.6px;margin:0 0 25px}
h3{font:400 30px/1.3 'EB Garamond',Georgia,serif;margin:0 0 16px}
p{margin:0 0 16px}
.small{font-size:16px;color:var(--muted)}
/* hidden on screen, still read out by screen readers */
.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}
/* the "Skip to content" link, which only appears when tabbing with the keyboard */
.skip{position:fixed;top:-80px;left:10px;z-index:99;padding:15px;border-radius:12px;background:white}
.skip:focus{top:10px}

@media(max-width:650px){
  html{scroll-padding-top:124px}
  h2{font-size:37px}
}

/* People who ask their device for less motion: no smooth scrolling or turning */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}


/* --------------------------------------------------------------------------
   2. Top bar: the site name (with a small thistle) and the menu
   -------------------------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:10;height:92px;padding:0 5.5%;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);background:#fffdfbf5;backdrop-filter:blur(10px);
}
header .brand{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:.2px;line-height:1.4}
header .brand::before{
  content:'';flex:none;width:15px;height:24px;margin-top:-2px;
  background:url('ornaments/thistle.svg') center/contain no-repeat;
}
nav{display:flex;align-items:center;gap:29px;font-size:17px}
nav a{font-size:17px}
nav a:hover{color:var(--wine)}

@media(max-width:900px){
  header .brand{font-size:16px}
  nav{gap:16px}
  nav a{font-size:16px}
}
/* phones: the name on top, the four menu links underneath in two rows */
@media(max-width:650px){
  header{height:auto;padding:14px 6% 10px;flex-wrap:wrap;gap:8px}
  header .brand{font-size:15px}
  header .brand::before{width:13px;height:21px}
  nav{width:100%;display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:2px 16px}
  nav a{font-size:15px;white-space:nowrap}
}
@media(max-width:360px){
  header .brand{font-size:13px}
  nav a{font-size:13px}
}


/* --------------------------------------------------------------------------
   3. Hero: the cottage sketch in a ring of lettering and leafy wreaths,
   then the place and the dates
   -------------------------------------------------------------------------- */
.hero{display:flex;flex-direction:column;align-items:center;padding:52px 20px 30px;text-align:center;background:var(--cream)}
.cottage-emblem{position:relative;width:min(320px,74vw);aspect-ratio:1;margin:22px auto 34px}
.cottage-emblem img{position:absolute;inset:20%;width:60%;height:60%;object-fit:contain;mix-blend-mode:multiply;border-radius:50%}
.cottage-emblem svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--ink);font-family:'EB Garamond',Garamond,Georgia,serif;font-weight:400}
.circle-title{font-size:52px;letter-spacing:0}
/* The wreaths come from emblem-wreath-outer.svg and emblem-wreath-inner.svg, drawn on the same 520×520 grid as
   the lettering so they line up exactly. The outer wreath sits slightly
   outside the emblem's box, so this layer is 30/520ths bigger on every side. */
.cottage-emblem{background:url('ornaments/emblem-thistle.svg') center/100% 100% no-repeat}   /* the thistle, which stays still */
.cottage-emblem::before,.cottage-emblem::after{content:'';position:absolute;pointer-events:none}
/* outer wreath: a little bigger than the emblem, so it sits outside the lettering */
.cottage-emblem::before{
  inset:calc(-30 / 520 * 100%);
  background:url('ornaments/emblem-wreath-outer.svg') center/100% 100% no-repeat;
}
/* inner wreath: around the cottage */
.cottage-emblem::after{
  inset:0;
  background:url('ornaments/emblem-wreath-inner.svg') center/100% 100% no-repeat;
}

.hero-location{font-size:24px;font-style:italic;margin:0 0 8px}
/* "23–28 DECEMBER 2026 • 59 DAYS TO GO": the dash in the page is hidden
   and a dot is shown in its place */
.hero-dates{margin:0;font-size:15px;letter-spacing:2px;text-transform:uppercase}
.hero-dates>[aria-hidden]{font-size:0;margin:0 8px;color:var(--wine)}
.hero-dates>[aria-hidden]::before{content:'•';font-size:16px;margin:0 8px}

/* phones: the line is too long, so the countdown gets its own line */
@media(max-width:650px){
  .hero{padding:52px 16px 22px}
  .hero-dates>[aria-hidden]{display:none}
  .countdown{display:block;margin-top:8px}
}


/* --------------------------------------------------------------------------
   4. Sections: hairline dividers with a thistle sprig in the middle
   -------------------------------------------------------------------------- */
.section{position:relative;max-width:1400px;margin:auto;padding:96px 5.5% 88px}
/* the divider line, drawn only across the text area (not edge to edge) */
.section:not(.welcome)::before{
  content:'';position:absolute;top:0;left:5.5%;right:5.5%;
  height:1px;background:var(--line);
}
/* the sprig sitting on the line; the cream background hides the line behind it */
.section:not(.welcome)::after{
  content:'';position:absolute;top:0;left:50%;width:230px;height:40px;padding:0 16px;
  transform:translate(-50%,-50%);
  background:url('ornaments/divider.svg') center/contain no-repeat var(--cream);
  background-origin:content-box;
}
/* Top-level headings are centred, like the wording on an invitation */
.section-heading{text-align:center;margin-bottom:44px}
.section-heading h2{margin:0}
.section-heading .small{display:block;margin-top:12px;font-style:italic}
/* two-column layouts. The row gap is a fixed size on purpose: a percentage
   row gap made the map poke out of the bottom of its section. */
.split{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:8%;row-gap:72px}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:5%}

/* Welcome: centred invitation wording, no divider above it */
.welcome{max-width:860px;padding-top:24px;padding-bottom:64px;text-align:center}
.welcome h2{margin:0 0 22px}
.welcome>p{max-width:640px;margin:0 auto;color:var(--muted)}

@media(max-width:900px){
  .split{column-gap:5%}
}
/* phones: one column */
@media(max-width:650px){
  .section{padding:64px 6% 56px}
  .section:not(.welcome)::before{left:6%;right:6%}
  .section:not(.welcome)::after{width:190px;height:33px}
  .split,.two-up{display:block}
  .split>div+div{margin-top:25px}
  .two-up>div+div{margin-top:35px}
  .welcome{padding-top:16px}
}


/* --------------------------------------------------------------------------
   5. Framed cards (the cottages and the three day cards)
   An ornamented frame: curved-in corners, with a thistle and a sprig in each
   corner. It's drawn with border-image, so the corners stay the same size and
   the straight edges stretch to fit any card.
   -------------------------------------------------------------------------- */
.day-card,.card{
  border:46px solid transparent;
  border-image:url('ornaments/frame.svg') 40 stretch;
  padding:0 6px 4px;background:var(--paper);text-align:center;
}

@media(max-width:650px){
  .day-card,.card{border-width:36px;padding:0 2px 2px}
}


/* --------------------------------------------------------------------------
   6. Where we're staying: centred intro, the four cottages in a row,
   then the map
   -------------------------------------------------------------------------- */
#stay{display:block}
#stay>div:first-child{max-width:720px;margin:0 auto 44px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.full{grid-column:1/-1}
.card{border-width:40px}
.card h3{font-size:27px}
.card p:last-child{margin-bottom:0}
/* a small label on a cottage card, e.g. "Spare for now". None at the moment:
   add  status:'…'  to a cottage in data.js to show one. */
.status{display:inline-block;border:1px solid currentColor;border-radius:99px;background:transparent;font-size:12px;letter-spacing:.3px;padding:4px 12px;line-height:1.4;white-space:nowrap}
.pending{color:#863b70;background:#f9eaf4}
.card .status{margin-bottom:14px}

/* The illustrated map, in the grand frame like a mounted print */
.cottage-map{width:100%;max-width:1000px;margin:34px auto 0}
.cottage-map>a{
  display:block;overflow:hidden;
  border:84px solid transparent;
  border-image:url('ornaments/frame-grand.svg') 70 stretch;
  background:var(--paper);
}
.cottage-map img{display:block;width:100%;height:auto;
  /* soft, feathered edges: the map fades into the paper over its outer 7% on every side,
     plus a wider fade in the bottom-right corner that hides the drawn-in
     "Illustrated from the family map · Not to scale" caption */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent),radial-gradient(ellipse 42% 16% at 100% 100%,transparent 78%,#000 100%);
  -webkit-mask-composite:source-in,source-in;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent),radial-gradient(ellipse 42% 16% at 100% 100%,transparent 78%,#000 100%);
  mask-composite:intersect}
.cottage-map figcaption{padding:18px 12px 0;text-align:center;font-size:17px;line-height:1.7;font-style:italic;color:var(--muted)}
.text-link{display:inline-block;padding:8px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}

/* tablets: the cottages two by two */
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
/* phones: one column (cards a little smaller, as elsewhere) */
@media(max-width:650px){
  #stay>div:first-child{margin-bottom:28px}
  .grid{grid-template-columns:1fr}
  .card{border-width:36px}
  .cottage-map{margin-top:20px}
  .cottage-map>a{border-width:44px}
  .cottage-map figcaption{padding:14px 0 0;font-size:16px}
}


/* --------------------------------------------------------------------------
   7. What we're doing: the three day cards
   -------------------------------------------------------------------------- */
.day-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.day-card{display:flex;flex-direction:column;align-items:center;min-height:240px}
.day-card:nth-child(2){background:var(--pink-wash)}   /* Christmas Day stands out */
.day-card .date{text-transform:uppercase;margin-bottom:14px;font-size:12px;letter-spacing:2px;color:var(--wine)}
.day-card h3{font-size:31px}
.day-card h3::after{content:'';display:block;width:28px;height:1px;margin:16px auto 0;background:var(--pink-line)}
.day-card p{font-size:18px;color:var(--muted)}
.day-card a{margin-top:auto;padding:12px 0 1px;border-bottom:1px solid var(--line-strong);font-size:17px;font-style:italic}
.day-card a:hover{color:var(--wine);border-color:var(--wine)}

@media(max-width:650px){
  .day-cards{grid-template-columns:1fr}
  .day-card{min-height:0}
}


/* --------------------------------------------------------------------------
   8. The three days (Christmas Eve, Christmas Day, Boxing Day)
   All three sit in the grand ornamented frame. Christmas Day's frame is
   bigger and has the sprig on top as a crest, so it stays the grandest.
   -------------------------------------------------------------------------- */
#day-1,#day-2,#day-3{
  width:min(calc(100% - 48px),1352px);
  border:62px solid transparent;
  border-image:url('ornaments/frame-grand.svg') 70 stretch;
}
#day-1,#day-3{padding:20px 30px 18px;margin-top:28px;margin-bottom:28px}
#day-2{border-width:90px;padding:24px 28px 20px;margin-top:56px;margin-bottom:24px}
/* the frames separate these sections, so no divider line on top of them... */
#day-1::before,#day-1::after,#day-2::before,#day-3::before,#day-3::after{display:none}
/* ...except Christmas Day's crest, which sits on the top edge of its frame */
#day-2::after{top:-90px;padding:0 18px}

/* the day label across the top of each frame: "24 DECEMBER · CHRISTMAS EVE" */
.day-label{
  grid-column:1/-1;margin:0 0 30px;text-align:center;
  font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--wine);
}
.day-label::before,.day-label::after{
  content:'';display:inline-block;width:44px;height:1px;margin:0 16px;
  background:var(--pink-line);vertical-align:middle;
}
#day-2 .day-label{margin-top:8px}

/* the dinner menus, in italic */
.menu{font:italic 400 25px/1.65 'EB Garamond',Georgia,serif}

/* Christmas Day's timeline */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:100px 1fr;gap:25px;padding:20px 0;border-bottom:1px solid var(--line)}
.timeline time{font-size:18px;font-style:italic;color:var(--wine)}
.timeline h3{font-size:28px;margin:0 0 7px}
.timeline p{margin:0;font-size:18px;color:var(--muted)}

/* phones: thinner frames; the little rules beside the day labels go, and a
   label that needs two lines is split evenly ("25 December · / Christmas Day") */
@media(max-width:650px){
  #day-1,#day-3{border-width:40px;width:calc(100% - 16px);padding:12px 6px 8px}
  #day-2{border-width:52px;width:calc(100% - 16px);padding:16px 6px 10px}
  #day-2::after{top:-52px;width:170px;height:30px}
  .day-label{margin-bottom:22px;font-size:12px;letter-spacing:1.8px;text-wrap:balance}
  .day-label::before,.day-label::after{content:none}
  .timeline li{grid-template-columns:75px 1fr;gap:15px}
}


/* --------------------------------------------------------------------------
   9. Open / close sections ("More details", and the travel options)
   The browser's ▶ triangle is replaced by a drawn floral roundel
   (ornaments/toggle.svg) on the right, which turns 45° into an × when open.
   -------------------------------------------------------------------------- */
details{padding:19px 5px;border-bottom:1px solid var(--line)}
details p{margin:15px 0 0;color:var(--muted)}
summary{position:relative;padding-right:52px;font-size:20px;font-weight:500;list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--wine)}
summary::after{
  content:'';position:absolute;right:0;top:50%;width:34px;height:34px;
  background:url('ornaments/toggle.svg') center/contain no-repeat;
  transform:translateY(-50%);transition:transform .3s ease;
}
details[open]>summary::after{transform:translateY(-50%) rotate(45deg)}
summary:hover::after{transform:translateY(-50%) scale(1.08)}
details[open]>summary:hover::after{transform:translateY(-50%) rotate(45deg) scale(1.08)}


/* --------------------------------------------------------------------------
   10. Tables: printed-programme style, with fine rules and no box
   On phones each row becomes a little card, with the column name beside
   each value (the travel timetables stay as tables, see section 11).
   -------------------------------------------------------------------------- */
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:16px;text-align:left}
th,td{padding:15px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{border-bottom-color:var(--ink);font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase}
td{font-size:16px}
td:first-child{min-width:110px;font-style:italic}

@media(max-width:650px){
  table,tbody,tr{display:block}
  thead{display:none}
  tr{margin-bottom:20px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fffdfb}
  td{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:8px 0}
  td::before{content:attr(data-label);font-size:14px;font-weight:600}
  td:last-child{border:0}
}


/* --------------------------------------------------------------------------
   11. How to get there
   -------------------------------------------------------------------------- */
.travel-guide>p{max-width:850px}
.travel-alert{margin:26px 0;padding:22px 26px;border:1px solid var(--pink-line);border-radius:var(--r);background:var(--pink-wash);text-align:center}
.travel-alert p{margin:7px 0 0}
.travel-sections{display:grid;gap:16px}
/* each travel option: a timetable card, or an open/close section */
.travel-detail{padding:0;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);overflow:hidden}
.travel-detail summary{padding:20px 76px 20px 26px;font-size:25px}
.travel-detail summary::after{right:24px}
.travel-detail[open] summary{border-bottom:1px solid var(--line);background:var(--paper)}
.travel-body{padding:24px 26px}
.travel-body p{margin:0 0 18px;color:var(--ink)}
.travel-status{font-size:16px!important;font-style:italic;color:var(--wine)!important}
.travel-note{margin:18px 0!important;color:var(--muted)!important}
.travel-sources{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin:20px 0 0;padding:0;font-size:16px}
.travel-sources a{text-decoration:underline;text-underline-offset:4px}
.travel-body .table-wrap{margin:22px 0}
.travel-body table{table-layout:fixed}
/* the three timetables (train, coach, flights) */
.travel-timetable>h3{margin:0;padding:20px 26px;border-bottom:1px solid var(--line);background:var(--blue-wash);font-size:28px}
.travel-timetable .travel-body{padding-top:18px}
.travel-timetable .table-wrap{margin:16px 0 22px}
.travel-timetable .table-wrap:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.travel-timetable table{table-layout:auto;min-width:620px}
.travel-timetable th{white-space:nowrap}
.travel-timetable td{font-variant-numeric:tabular-nums}
.travel-timetable td:last-child{color:var(--wine);font-size:15px}

@media(max-width:650px){
  .travel-alert{padding:20px}
  .travel-detail summary{padding:18px 76px 18px 20px;font-size:23px}
  .travel-body{padding:20px}
  .travel-body td{grid-template-columns:100px 1fr;overflow-wrap:anywhere}
  .travel-sources{display:block}
  .travel-sources li+li{margin-top:10px}
  /* the timetables stay as real tables on phones (they scroll sideways) */
  .travel-timetable>h3{padding:18px 20px;font-size:25px}
  .travel-timetable table{display:table}
  .travel-timetable thead{display:table-header-group}
  .travel-timetable tbody{display:table-row-group}
  .travel-timetable tr{display:table-row}
  .travel-timetable td,.travel-timetable th{display:table-cell;padding:12px;border-bottom:1px solid var(--line);font-size:16px}
  .travel-timetable td::before{content:none}
}


/* --------------------------------------------------------------------------
   12. What to bring: the packing list, then the food table under it
   -------------------------------------------------------------------------- */
.checks{list-style:none;padding:0}
.checks li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line)}
.checks li::before{content:'○';position:absolute;left:0;color:#a3548c}
.bring-food{margin-top:64px}
.bring-food>h3{text-align:center;margin-bottom:32px}
.bring-food>.small{text-align:center;font-style:italic;margin-bottom:28px}
#food caption{display:none}

@media(max-width:650px){
  #food tr{border-radius:var(--r);border-color:var(--line-strong)}
}


/* --------------------------------------------------------------------------
   13. Footer: a sign-off, centred, under a sprig
   -------------------------------------------------------------------------- */
footer{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 5.5% 64px;border-top:1px solid var(--line);font-size:17px;text-align:center}
footer::before{content:'';width:210px;height:36px;background:url('ornaments/divider.svg') center/contain no-repeat}
footer p{order:-1;margin:0;font-size:20px;font-style:italic}   /* the sign-off goes first */
footer .brand{font-size:25px;font-weight:500;letter-spacing:.4px;line-height:1.5}
footer .brand span{display:block;margin-top:2px;font-size:11px;font-weight:400;letter-spacing:1.7px}
footer>a:last-child{margin-top:8px;border-bottom:1px solid var(--line-strong);font-size:15px;letter-spacing:1px}

@media(max-width:900px){
  footer .brand{font-size:23px}
}
@media(max-width:650px){
  footer{font-size:16px}
  footer .brand{font-size:22px}
  footer .brand span{font-size:10px}
}


/* --------------------------------------------------------------------------
   14. Printing
   Black text on white, no top bar or footer, and cards kept whole across
   page breaks. Open/close sections print the way they are on screen.
   -------------------------------------------------------------------------- */
@media print{
  header,nav,footer,.day-card a{display:none!important}
  html,body{background:#fff;color:#111}
  .countdown{display:none}
  .hero{padding-right:0;padding-bottom:0;padding-left:0}
  .section{padding-right:0;padding-left:0}
  .section:not(.welcome){max-width:none}   /* the welcome keeps its narrower column */
  .split{column-gap:25px}
  h2{font-size:25px}
  .small,td,.day-card p{font-size:11px}
  .dark,.soft,.card,.day-card{background:#fff!important;color:#111!important}
  .dark *,.timeline time,.timeline p{color:#111!important}
  .section,.card,details,tr{break-inside:avoid}
  .travel-alert{background:white}
  .travel-detail{break-inside:auto}
  .travel-detail summary{font-size:20px}
  .travel-body{padding:8px}
  .travel-sources{font-size:10px}
  .travel-timetable .table-wrap{overflow:visible}
  .travel-timetable table{min-width:0;width:100%;font-size:10px}
  .travel-timetable th{white-space:normal}
  .travel-timetable td,.travel-timetable th,.travel-timetable td:last-child{padding:6px;font-size:10px}
}
/* small paper (A5 and smaller): the sections keep a little margin at the sides */
@media print and (max-width:650px){
  .section{padding-right:6%;padding-left:6%}
}

/* Intro paragraph under a centred section heading, e.g. the itinerary (added 26 Oct) */
.section-intro{max-width:640px;margin:-24px auto 40px;text-align:center}
.section-intro p:last-child{margin-bottom:0}
/* the same kind of paragraph, below the itinerary cards */
.section-outro{margin:40px auto 0}
/* the travel intro is a centred .section-intro (like the itinerary), which already leaves the gap above the panels */
.travel-sections{margin-top:0}


/* --------------------------------------------------------------------------
   The choice page at / : the emblem, then Christmas and Hogmanay buttons
   -------------------------------------------------------------------------- */
.home{min-height:100vh;display:flex;align-items:center;justify-content:center}
.home .hero{padding-bottom:64px}
.home-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:34px}
.home-choices .button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:250px;padding:18px 30px;
  color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:4px;
  outline:1px solid var(--line);outline-offset:-6px;transition:background .18s ease}
.home-choices .button:hover{background:var(--pink-wash)}
.home-choices .button:focus-visible{outline:3px solid var(--wine);outline-offset:4px}
.choice-name{font-size:24px;line-height:1.2}
.choice-dates{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--wine)}
@media(max-width:650px){.home-choices .button{min-width:0;width:100%}}
/* packing list: lines between items only, none under the last one (added 26 Oct) */
.checks li:last-child{border-bottom:0}


/* --------------------------------------------------------------------------
   Phone tweaks (added 26 Oct)
   1. Top bar: site name and menu at body size; the menu is one row you can
      swipe sideways (no visible scrollbar)
   2. "On the menu" and the dishes at body size
   3. Food table: a real table you swipe sideways, instead of stacked cards
   -------------------------------------------------------------------------- */
@media(max-width:650px){
  html{scroll-padding-top:112px}
  header .brand{font-size:19px}
  nav{display:flex;flex-wrap:nowrap;gap:24px;width:100%;overflow-x:auto;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  nav::-webkit-scrollbar{display:none}
  nav a{font-size:19px;white-space:nowrap;flex:none}

  section[id^="day-"] > div > h3{font-size:19px;font-weight:600}   /* "On the menu" only, not the timeline titles */
  section[id^="day-"] .menu{font-size:19px}

  #food .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #food table{display:table;min-width:820px}
  #food thead{display:table-header-group}
  #food tbody{display:table-row-group}
  #food tr{display:table-row;margin:0;padding:0;border:0;border-radius:0;background:none}
  #food th,#food td{display:table-cell;padding:12px 10px;border-bottom:1px solid var(--line);font-size:16px}
  #food td::before{content:none}
  #food th{white-space:nowrap}   /* keep each column heading on one line */
}

/* Phones: the top bar is one row — just the thistle (the site name is hidden
   visually but still read out by screen readers), then the swipeable menu */
@media(max-width:650px){
  html{scroll-padding-top:72px}
  header{flex-wrap:nowrap;align-items:center;gap:18px;min-height:0;padding:12px 6%}
  header .brand{font-size:0;gap:0;flex:none}
  header .brand::before{width:17px;height:28px;margin:0}
  nav{flex:1;min-width:0;width:auto}
  /* the menu runs right to the edge of the screen, so the links slide out of view */
  header{padding-right:0}
  /* a little space after the last link, so it doesn't sit hard against the edge when you swipe to the end */
  nav::after{content:'';flex:none;width:1px}
}

/* The menu link for the section you're reading (set as you scroll) */
nav a[aria-current]{color:var(--wine);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
nav a{transition:color .2s ease}
/* food table: lines between rows only, none under the last one (added 26 Oct) */
#food tbody tr:last-child td{border-bottom:0}