.hl-book{max-width:min(64rem,92vw);margin-inline:auto;padding:2rem 0 3rem}
.hl-book h1{margin:0 0 .35em}
.hl-book h2{margin:2rem 0 .6em}
.hl-lede{margin:.2em 0 1.4em;opacity:.85}
.hl-crumb{margin:0 0 1em;font-size:.9em;opacity:.8}

/* The boat, before the form. One lead photograph and a strip of the rest,
   taken from the pages the site already publishes. */
.hl-hero{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:9rem;gap:.4rem;margin:0 0 1.8rem}
.hl-hero figure{margin:0;overflow:hidden;border-radius:.4rem}
.hl-hero figure.lead{grid-row:span 2;grid-column:1}
.hl-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* Three plain statements of fact, not badges. */
.hl-assure{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;padding:.8rem 0 0;margin:0 0 1.6rem;
  border-top:1px solid color-mix(in srgb,currentColor 15%,transparent);font-size:.9em}
.hl-assure li{opacity:.85}

/* Two columns: the trips are the page, the calendar is a tool beside them.
   Single column below 52rem, calendar first there, because on a phone picking
   the day is genuinely step one. */
.hl-cols{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:2.5rem;align-items:start}
.hl-main{min-width:0}
.hl-side{min-width:0}
.hl-side-h{margin:0 0 .5rem;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.hl-soon{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 1.5rem}
.hl-soon a{display:inline-block;padding:.35rem .7rem;border:1px solid color-mix(in srgb,currentColor 28%,transparent);
  border-radius:2rem;text-decoration:none;color:inherit;font-size:.86em}
.hl-soon a:hover,.hl-soon a:focus,.hl-soon a[aria-current]{background:color-mix(in srgb,currentColor 12%,transparent)}

/* month nav */
.hl-month{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .6rem;max-width:26rem}
.hl-month strong{font-size:1.05em}

/* the calendar: a plain grid, tappable at a dock or on a phone */
/* Capped, and NOT square at desktop widths. aspect-ratio:1 inside a 64rem
   column makes every cell ~145px, so an empty month becomes six rows of large
   grey boxes and the page reads as a wall of nothing. A calendar wants to be
   glanceable, not enormous. */
.hl-cal{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin:0 0 2rem;padding:0;max-width:26rem}
.hl-cal .dow{text-align:center;font-size:.72em;letter-spacing:.08em;text-transform:uppercase;opacity:.55;padding:.3rem 0}
.hl-cal .day{position:relative;min-height:2.9rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.35rem;display:flex}
.hl-cal .pad{border:0}
.hl-cal .day .n{font-variant-numeric:tabular-nums;font-size:.95em}
.hl-cal .day.shut{opacity:.32}
.hl-cal .day.shut .n{margin:auto}
/* Which half of the day is left, said without a palette.
   This sheet cannot invent colours: it inherits whatever the site uses, so a
   green that reads "free" on one business is wrong on the next. A filled cell
   is a free day, a half-filled cell shows which half survives, and the label
   says it in words for anyone the shading does not reach. A site that wants
   real colour puts it in its own booking.css. */
.hl-cal .day.free,.hl-cal .day.part-am,.hl-cal .day.part-pm{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.hl-cal .day.free a{background:color-mix(in srgb,currentColor 13%,transparent)}
.hl-cal .day.part-am a{background:linear-gradient(to bottom,color-mix(in srgb,currentColor 15%,transparent) 50%,transparent 50%)}
.hl-cal .day.part-pm a{background:linear-gradient(to top,color-mix(in srgb,currentColor 15%,transparent) 50%,transparent 50%)}
.hl-cal .day .ct{font-weight:600;letter-spacing:.03em}

.hl-legend{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:-1.4rem 0 1.6rem;font-size:.76em;opacity:.75}
.hl-legend b{font-weight:700}
.hl-cal .day.free a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;width:100%;min-height:44px;text-decoration:none;color:inherit;padding:.2rem}
.hl-cal .day.free a:hover,.hl-cal .day.free a:focus{background:color-mix(in srgb,currentColor 10%,transparent)}
.hl-cal .day .ct{font-size:.62em;opacity:.7;text-align:center;line-height:1.1}

/* trip cards */
.hl-trips{display:grid;gap:.9rem;margin:1.2rem 0 0}
.hl-trip{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start;
  padding:1.15rem 1.25rem;border:1px solid color-mix(in srgb,currentColor 18%,transparent);border-radius:.6rem}
.hl-trip:hover{border-color:color-mix(in srgb,currentColor 34%,transparent)}
.hl-trip h3{margin:0 0 .25em}
.hl-trip.unavailable{opacity:.55}
.hl-trip-main{flex:1 1 18rem;min-width:0}
.hl-trip-buy{flex:0 0 auto;text-align:right}
.hl-when{margin:.1em 0;font-size:.9em;opacity:.8}
.hl-blurb{margin:.4em 0 0}
.hl-why{margin:.4em 0 0;font-size:.9em;opacity:.75}
.hl-seats{margin:.4em 0 0;font-size:.9em;font-weight:600}
.hl-price{margin:0 0 .6em;font-weight:700;white-space:nowrap;font-size:1.25em}
.hl-price .per{display:block;font-weight:400;font-size:.78em;opacity:.7;white-space:normal}
.hl-price.big{font-size:1.3em;margin:1.2em 0}
.hl-policy{margin:.2em 0 1em;font-size:.92em;opacity:.85}
.hl-note{margin-top:1.5em;font-size:.92em;opacity:.85}
.hl-prose p{margin:0 0 .8em}
.hl-species,.hl-tech{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 1em}
.hl-species li,.hl-tech li{border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:2rem;padding:.25rem .7rem;font-size:.88em}

/* actions — colour comes from the site's own booking.css if it has one */
.hl-cta{display:inline-block;padding:.6rem 1.25rem;min-height:44px;line-height:1.6;
  border:1px solid currentColor;border-radius:.35rem;text-decoration:none;color:inherit;
  font:inherit;font-weight:700;cursor:pointer;background:color-mix(in srgb,currentColor 10%,transparent)}
.hl-cta:hover,.hl-cta:focus{background:color-mix(in srgb,currentColor 12%,transparent)}
.hl-alt{display:inline-block;padding:.5rem 0;text-decoration:underline;color:inherit;font-size:.92em}
.hl-onward{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:1.6rem 0 .4rem}

/* the form */
.hl-form{display:flex;flex-direction:column;gap:.9rem;max-width:32rem;margin:1.5rem 0}
.hl-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.92em}
.hl-form input,.hl-form select,.hl-form textarea{font:inherit;color:inherit;background:transparent;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:.3rem;padding:.55rem .6rem;min-height:44px}
.hl-form textarea{min-height:5rem;resize:vertical}
.hl-form button{align-self:flex-start}
/* the honeypot: off-screen rather than display:none, which some bots skip */
.hl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* the reservation */
.hl-res dt{font-size:.78em;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-top:1em}
.hl-res dd{margin:.15em 0 0;font-size:1.05em}
.hl-warn{border:1px solid currentColor;border-radius:.3rem;padding:1rem;margin:1.5rem 0}
.hl-booked{border-left:3px solid currentColor;padding:.2rem 0 .2rem .8rem;margin:0 0 1.2rem}
.hl-chosen{margin:2rem 0 .4rem}
.hl-reviews{margin:2.5rem 0 0;border-top:1px solid color-mix(in srgb,currentColor 15%,transparent);padding-top:1.5rem}
.hl-review{margin:0 0 1.8rem}
.hl-stars{margin:0;letter-spacing:.1em}
.hl-stars .dim{opacity:.25}
.hl-review blockquote{margin:.3rem 0;padding:0;font-size:1.05em}
.hl-by{margin:.2rem 0 0;font-size:.88em;opacity:.75}
.hl-reply{margin:.6rem 0 0;padding-left:.8rem;border-left:2px solid color-mix(in srgb,currentColor 30%,transparent);font-size:.94em}
.hl-shots{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0 0}
.hl-shots img{width:8rem;height:8rem;object-fit:cover;border-radius:.25rem}
.hl-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.8rem;margin:1.5rem 0}
.hl-board figure{margin:0}
.hl-board img{width:100%;height:11rem;object-fit:cover;border-radius:.25rem;display:block}
.hl-board figcaption{font-size:.82em;margin-top:.25rem;opacity:.8}
.dim{opacity:.6}
.hl-rate{border:0;padding:0;margin:0 0 1rem;display:flex;gap:1rem;flex-wrap:wrap}
.hl-rate legend{padding:0;margin-bottom:.4rem}
.hl-star{display:inline-flex;align-items:center;gap:.3rem}

@media (max-width:52rem){
  .hl-cols{grid-template-columns:1fr;gap:1.5rem}
  .hl-side{order:-1}
  .hl-cal{margin-bottom:1rem}
}

@media (max-width:34rem){
  .hl-book{padding:1.2rem 0 2rem}
  .hl-hero{grid-template-columns:1fr 1fr;grid-auto-rows:6.5rem}
  .hl-hero figure.lead{grid-column:span 2}
  .hl-cal{gap:.2rem;max-width:none}
  .hl-cal .day{aspect-ratio:1;min-height:0}
  .hl-month{max-width:none}
  .hl-cal .day .ct{display:none}
  .hl-trip-buy{text-align:left;flex-basis:100%}
  .hl-price{white-space:normal}
}