/* The palette is Sherborne's own: the Ham stone quarried at Ham Hill, ink, the
   green of the Yeo valley, and one amber borrowed from the roof sign that is
   spent only on things you can press. One visual world, painted explicitly.
   No framework, no build step, both faces served from this origin because the
   content security policy allows nothing else. */

@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --stone: #ece1cb;
  --paper: #f8f3e9;
  --ink: #221e18;
  --ink-soft: #5c5548;
  --deep: #1d3227;
  /* White on the old #bf5f0d was 4.32:1, under the 4.5 that AA asks for, and
     it was the colour of every button on the site. This is 4.79:1 and looks
     the same. --signal-hi is the link colour as well as the button hover, and
     at #a24f09 it was 4.43:1 against the stone panels; this is 4.88:1. */
  --signal: #b35a0b;
  --signal-hi: #984a08;
  --line: #d9cfb8;
  --display: "Bricolage Grotesque", Georgia, serif;
  --body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --measure: 68rem;
  --text: 42rem;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 1rem/1.7 var(--body); overflow-wrap: break-word;
  overflow-x: clip;
}

h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 6vw, 3.4rem); margin: 0 0 .7rem; }
h2 { font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 2.6rem 0 .8rem; }
h3 { font-weight: 700; font-size: 1.2rem; margin: 0 0 .4rem; }
p { margin: 0 0 1.1rem; }
.lead { font-size: 1.06rem; color: var(--ink-soft); max-width: 36rem; }
.small { font-size: .88rem; color: var(--ink-soft); }
a { color: var(--signal-hi); text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: .5rem; position: fixed; background: var(--paper); padding: .5rem 1rem; z-index: 20; }

/* header ------------------------------------------------------------------ */

.bar { background: var(--ink); color: var(--paper); }
.bar-in { max-width: var(--measure); margin-inline: auto; padding: .7rem 1rem; display: flex; align-items: center; gap: .7rem 1.1rem; flex-wrap: wrap; }
.mark { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--paper); text-decoration: none; margin-right: auto; }
.bar nav ul { display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.bar nav a { color: #ddd6c6; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: .1rem; }
.bar nav a:hover { color: #fff; }
.bar nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--signal); }
.ring { background: var(--signal); color: #fff; text-decoration: none; padding: .4rem .85rem; border-radius: .2rem; font-weight: 600; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ring:hover { background: var(--signal-hi); color: #fff; }

/* the front page opener --------------------------------------------------- */

.hero { background: var(--deep); color: var(--paper); }
.hero-in { max-width: var(--measure); margin-inline: auto; padding-left: 1rem; display: grid; grid-template-columns: 1fr; }
.hero-text { padding: 2.8rem 1rem 3rem 0; align-self: center; }
.hero h1 { color: var(--paper); }
.eyebrow { font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #e0a86a; margin: 0 0 .9rem; }
.said { font-size: 1.06rem; color: #cfd8cf; margin: 0 0 1.7rem; max-width: 30rem; }
.hero-img { min-height: 15rem; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facts { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.1rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.16); }
.fact b { display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 700; }
.fact span { font-size: .8rem; color: #b9c5ba; }
@media (min-width: 54rem) {
  .hero-in { grid-template-columns: 1.05fr .95fr; }
  .hero-text { padding-block: 4rem; }
  .hero-img { min-height: 100%; }
}

.page-head { background: var(--stone); border-bottom: 1px solid var(--line); }
.page-head-in { max-width: var(--measure); margin-inline: auto; padding: 2.3rem 1rem 2rem; }
.page-head h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }

/* body -------------------------------------------------------------------- */

main { max-width: var(--measure); margin-inline: auto; padding: 2.6rem 1rem 3.5rem; }
main > section, main > article, main > h2, main > p, main > ul, main > dl, main > figure, main > form { max-width: var(--text); }
main > section.wide { max-width: none; }
section + section { margin-top: 1rem; }

.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.button {
  display: inline-block; padding: .65rem 1.3rem; border-radius: .25rem;
  background: var(--signal); color: #fff; border: 2px solid var(--signal);
  font-weight: 600; font-size: .86rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.button:hover { background: var(--signal-hi); border-color: var(--signal-hi); color: #fff; }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button.ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.hero .button.ghost, .hero .actions .button.ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.hero .button.ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { border: 1px solid var(--line); border-radius: .3rem; overflow: hidden; background: var(--stone); display: flex; flex-direction: column; }
.card img { width: 100%; height: 10.5rem; object-fit: cover; display: block; }
.card-in { padding: 1.05rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card h3 a { text-decoration: none; color: var(--ink); }
.card h3 a:hover { text-decoration: underline; }
.card p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
.card .more { margin-top: auto; padding-top: .55rem; font-size: .82rem; color: var(--signal-hi); font-weight: 600; }

.split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.split img { width: 100%; border-radius: .3rem; display: block; }
@media (min-width: 52rem) { .split { grid-template-columns: 20rem 1fr; } }

/* fares and lists --------------------------------------------------------- */

.runs { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.run { background: var(--stone); border: 1px solid var(--line); border-radius: .25rem; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .1rem; }
.run b { font-size: .98rem; }
.run .mins { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); }
.run .price { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; color: var(--signal-hi); margin-top: .2rem; }
.caveat { margin: 1rem 0 0; font-size: .82rem; color: var(--ink-soft); font-family: var(--mono); }

.inc { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.inc li { background: var(--stone); border-radius: .25rem; padding: .7rem .9rem; font-size: .93rem; }
.inc li b { display: block; font-size: .78rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--signal-hi); }

.ticks, .list, .posts, .contact-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.ticks li { padding-left: 1.7rem; position: relative; margin-bottom: .45rem; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--signal); font-weight: 700; }
.list li { margin-bottom: .4rem; }
.contact-list li { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.contact-list strong { min-width: 7rem; }

/* reviews ----------------------------------------------------------------- */

.score { display: grid; gap: 1.1rem; align-items: center; background: var(--stone); border: 1px solid var(--line); border-radius: .3rem; padding: 1.3rem; margin-bottom: 1.8rem; }
@media (min-width: 42rem) { .score { grid-template-columns: auto 1fr auto; } }
.score .num { font-family: var(--display); font-size: 3rem; font-weight: 800; line-height: 1; }
.stars { color: var(--signal); letter-spacing: .1em; }
.score p { margin: .2rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

.quotes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.quote { background: var(--stone); border-left: 3px solid var(--signal); border-radius: 0 .25rem .25rem 0; padding: 1.05rem 1.15rem; margin: 0 0 1rem; }
.quote blockquote, .quote p { margin: 0; }
.quote figcaption { margin-top: .65rem; font-size: .84rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .45rem; }
.quote figcaption strong { color: var(--ink); }

/* questions, blog, tables ------------------------------------------------- */

.faq { margin: 1.4rem 0; }
.faq dt { font-weight: 600; margin-top: 1.2rem; }
.faq dd { margin: .2rem 0 0; color: var(--ink-soft); }

.cta { margin-top: 2.6rem; padding: 1.4rem; background: var(--stone); border: 1px solid var(--line); border-radius: .3rem; }
.cta h2 { margin-top: 0; }
.cta p:last-child { margin-bottom: 0; }

.dateline { color: var(--ink-soft); font-size: .88rem; margin-bottom: 1rem; font-family: var(--mono); }
.posts li { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.posts h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
.posts h2 a { text-decoration: none; color: var(--ink); }
.posts h2 a:hover { text-decoration: underline; }

.schools { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .93rem; display: block; overflow-x: auto; }
.schools th, .schools td { text-align: left; padding: .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.schools th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }

/* the form ---------------------------------------------------------------- */

.grid2 { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .grid2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; }
input, select, textarea {
  font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: .2rem; padding: .6rem .7rem; width: 100%;
}
textarea { resize: vertical; }
button[type="submit"] {
  margin-top: 1rem; font: inherit; font-weight: 600; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--signal); color: #fff; border: 0; border-radius: .25rem; padding: .8rem 1.4rem; cursor: pointer;
}
button[type="submit"]:hover { background: var(--signal-hi); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* Hidden from people, left in the document for anything that fills in every
   field it finds. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* footer ------------------------------------------------------------------ */

footer.site { background: var(--ink); color: #cfc9ba; font-size: .9rem; }
footer.site a { color: #e9e2d3; }
.foot-in { max-width: var(--measure); margin-inline: auto; padding: 2.2rem 1rem 1.6rem; display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; justify-content: space-between; }
.foot-in p { margin: 0 0 .6rem; }
.foot-name { font-family: var(--display); font-weight: 700; color: #fff; font-size: 1.02rem; }
.foot-ring { font-weight: 600; font-variant-numeric: tabular-nums; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.14); }
.foot-legal-in { max-width: var(--measure); margin-inline: auto; padding: 1rem 1rem 5rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; font-size: .8rem; }
.foot-legal-in p { margin: 0; }
.policies { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: 0; margin: 0; }

/* on a phone the number follows you down the page */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 1px; background: var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.sticky a { flex: 1; text-align: center; padding: .85rem .5rem; text-decoration: none; font-weight: 600; font-size: .92rem; background: var(--signal); color: #fff; }
.sticky a.alt { background: var(--ink); color: var(--paper); }
@media (min-width: 54rem) { .sticky { display: none; } .foot-legal-in { padding-bottom: 2rem; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* A fact the site has to state and we do not have yet. Deliberately loud, and
   build.mjs refuses to publish a page carrying one. */
.ask {
  display: inline-block; background: var(--signal); color: #fff;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  padding: .05rem .4rem; border-radius: .2rem; white-space: nowrap;
}