/* Cavendish Ltd website. The steward's day book: cream paper, ink, a bottle-green cover, one brass clasp.
   No scripts, no hairlines, no shadows, nothing that moves. See cavendishltd/DESIGN.md. */
@font-face{font-family:"Libre Baskerville";src:url("/static/fonts/LibreBaskerville.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Baskerville";src:url("/static/fonts/LibreBaskerville-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --paper:#f3eee2;--paper-2:#e6ddc8;--ink:#1c1a16;--ink-2:#5b5547;
  --green:#1e4b39;--green-2:#163b2c;--green-ink:#f3eee2;--green-soft:#bcd2c4;
  --brass:#c0892e;--brass-ink:#1c1a16;--bad:#8f2a2a;--ok:#1f6b45;--todo:#f5e27a;--todo-ink:#4a3c00;
  --serif:"Libre Baskerville",Baskerville,"Baskerville Old Face",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --measure:1120px;--gutter:24px;--section:120px;
  --t-display:clamp(2.4rem,5.6vw,4.5rem);--t-heading:clamp(1.65rem,3vw,2.125rem);--t-body:18px;--t-small:16px;--t-note:15px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-body)/1.55 var(--sans);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.18em}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;letter-spacing:-.02em}
h1{font-size:var(--t-display);line-height:1.0;max-width:20ch}
.keep{white-space:nowrap}
h2{font-size:var(--t-heading);line-height:1.12;max-width:24ch}
h3{font-size:1.25rem;line-height:1.25;letter-spacing:0}
p{margin:0 0 1em;max-width:68ch}
.lead{font-size:1.25rem;line-height:1.45;max-width:52ch}
.small{font-size:var(--t-small)}
.note{font-size:var(--t-note);color:var(--ink-2);max-width:68ch}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:.5rem 1rem}
.skip:focus{left:8px;top:8px;z-index:10}
.muted{color:var(--ink-2)}
mark.todo{background:var(--todo);color:var(--todo-ink);padding:0 .25em}

/* Fields: the page is a run of grounds, separated by a step in tone, never by a line */
.field{padding:var(--section) 0}
.field.green{background:var(--green);color:var(--green-ink)}
.field.green .note,.field.green .lead{color:var(--green-soft)}
.field.green .lead{color:var(--green-ink)}
.field.paper2{background:var(--paper-2)}
.field.tight{padding-top:56px;padding-bottom:72px}
.field.hero{padding-top:72px;padding-bottom:88px}
.field.hero .lead{margin-top:1.4rem}
.after-hero{padding-top:88px}

/* The bar */
header.top{background:var(--green);color:var(--green-ink)}
header.top .bar{display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
.brand{font-family:var(--serif);font-weight:700;font-size:1.35rem;text-decoration:none;letter-spacing:-.01em}
header nav{display:flex;gap:.3rem 1.5rem;flex-wrap:wrap;margin-left:auto;font-size:var(--t-small)}
header nav a{text-decoration:none;padding:.3rem 0}
header nav a.on{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
header nav a:hover{text-decoration:underline}
header .btn{padding:10px 16px;font-size:var(--t-small)}

/* Actions: one filled button, decided square; the quiet action is a link */
.btn{display:inline-block;background:var(--brass);color:var(--brass-ink);padding:14px 22px;font:600 17px/1.3 var(--sans);text-decoration:none;min-height:44px;cursor:pointer;border:0}
.btn:hover{background:var(--ink);color:var(--paper)}
.field.green .btn:hover{background:var(--paper);color:var(--ink)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.actions{display:flex;gap:1rem 2rem;align-items:center;flex-wrap:wrap;margin-top:2rem}
.actions a.quiet{font-weight:600}

/* Compositions */
.grid{display:grid;gap:3rem 4rem;align-items:center}
.grid.image-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.grid.image-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.grid.halves{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.grid.hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start;gap:2.5rem 5rem;margin-top:3rem}
.stack>*+*{margin-top:1rem}
.moment{text-align:center}
.moment h2,.moment p{margin-left:auto;margin-right:auto}
.moment .actions{justify-content:center}
.crumbs{font-size:var(--t-small);margin-bottom:2rem;color:var(--green-soft)}
.crumbs a{color:inherit}

/* Pictures: a real page on a step of tone, no frame line */
figure.shot{margin:0;background:var(--paper-2);padding:14px}
.field.green figure.shot{background:var(--green-2)}
.field.paper2 figure.shot{background:var(--paper)}
figure.shot img{display:block;width:100%}
figure.shot figcaption{font-size:var(--t-note);color:var(--ink-2);padding:12px 2px 0}
.field.green figure.shot figcaption{color:var(--green-soft)}
.shots{display:grid;gap:2rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}
.shots figure.shot:first-child{grid-column:1 / -1}

/* Lists: spaced paragraphs with a bold lead; no markers, no rules */
ul.spaced,ol.spaced{list-style:none;padding:0;margin:1.5rem 0 0}
ul.spaced li,ol.spaced li{margin:0 0 1.1rem;max-width:62ch}
ul.spaced.two{columns:2;column-gap:4rem}
ul.spaced.two li{break-inside:avoid}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.6rem 2rem;margin:1.5rem 0 0}
dl.facts dt{color:var(--ink-2)}
dl.facts dd{margin:0}
blockquote{margin:2rem 0 0;padding:0;font-family:var(--serif);font-size:1.3rem;line-height:1.4;font-style:italic;max-width:30ch}
blockquote .who{display:block;font-style:normal;font-family:var(--sans);font-size:var(--t-small);color:var(--ink-2);margin-top:.6rem}
.rules{display:grid;gap:2.5rem 4rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:3rem}
.rules h3{margin-bottom:.4rem}
.rules p{margin:0}

/* Tables: rows separated by a step of tone */
table{width:100%;border-collapse:collapse;margin:2rem 0 0;font-size:var(--t-small)}
th,td{text-align:left;padding:16px 14px;vertical-align:top}
th{font-size:var(--t-note);font-weight:600;color:var(--ink-2)}
tbody tr:nth-child(odd){background:var(--paper-2)}
.field.paper2 tbody tr:nth-child(odd){background:var(--paper)}
table.plans td.price{white-space:nowrap}
table.plans .amount{font-family:var(--serif);font-size:1.5rem;font-weight:700}
table.plans ul{margin:.4rem 0 0;padding-left:1.1rem}
table.tasks td:not(:first-child),table.tasks th:not(:first-child){text-align:right;white-space:nowrap}
.notice{background:var(--paper-2);padding:20px 24px;color:var(--ink-2);font-size:var(--t-small);margin-top:3rem;max-width:none}
.field.paper2 .notice{background:var(--paper)}

/* The read-back: the live thing */
.readback{background:var(--green-2);padding:24px;font-size:var(--t-small)}
.readback .say{margin:0 0 .8rem;color:var(--green-soft)}
.readback input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.readback label{display:block;padding:12px 16px;margin:0 0 8px;cursor:pointer;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.35;background:var(--green)}
.readback input:checked+label{background:var(--paper);color:var(--ink)}
.readback input:focus-visible+label{outline:3px solid var(--brass);outline-offset:2px}
.readback .answer{display:none;margin-top:20px}
.readback .answer p{margin:0 0 .7rem;max-width:none}
.readback .answer .then{color:var(--green-soft)}
.readback .yes{display:inline-block;background:var(--brass);color:var(--brass-ink);font-weight:700;padding:10px 18px;min-width:44px;min-height:44px;line-height:24px}
.readback .rule{display:flex;gap:14px;align-items:flex-start;margin:20px 0 0;color:var(--green-soft)}
#rb1:checked~.answers .a1,#rb2:checked~.answers .a2,#rb3:checked~.answers .a3{display:block}

/* Forms */
.form label{display:block;margin:1.2rem 0 0;font-weight:600}
.form .opt{color:var(--ink-2);font-weight:400}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:.4rem;padding:14px;font:inherit;font-weight:400;color:var(--ink);background:#fff;border:0;min-height:44px}
.form textarea{resize:vertical}
.form .actions{margin-top:1.6rem;margin-bottom:1.2rem}
.form h2{font-size:1.4rem;margin-top:2.5rem}
.form h2:first-child{margin-top:0}
.hours{display:grid;gap:0 2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.flash{padding:16px 20px;margin:0 0 1.5rem;background:var(--paper-2);font-weight:600}
.flash.ok{color:var(--ok)}
.flash.err{color:var(--bad)}
.panel{background:var(--paper-2);padding:28px}
.panel h2{font-size:1.25rem;margin:0 0 .6rem}
.panel h2+p{margin-top:0}
.panel h2:not(:first-child){margin-top:2rem}
.prose{max-width:72ch}
.prose h2{font-size:1.4rem;margin:2.5rem 0 .6rem}
.prose p{max-width:none}

/* The close */
footer.close{background:var(--green);color:var(--green-ink);padding:var(--section) 0 56px}
footer .address{font-family:var(--serif);font-size:var(--t-heading);line-height:1.2;max-width:22ch;margin:0 0 3rem;letter-spacing:-.01em}
footer .cols{display:grid;gap:2rem 3rem;grid-template-columns:repeat(3,minmax(0,1fr));font-size:var(--t-small)}
footer .cols strong{display:block;margin-bottom:.5rem}
footer .cols a{display:block;text-decoration:none;padding:.25rem 0;color:var(--green-ink)}
footer .cols a:hover{text-decoration:underline}
footer .legal{font-size:var(--t-note);color:var(--green-soft);margin:3rem 0 0;max-width:80ch}
footer .legal a{color:inherit}

/* The phone: its own composition */
@media (max-width:900px){
  :root{--section:72px}
  .grid.image-right,.grid.image-left,.grid.halves,.grid.hero-grid,.rules{grid-template-columns:1fr}
  .grid.image-left>figure{order:-1}
  .shots{grid-template-columns:1fr}
  ul.spaced.two{columns:1}
  footer .cols{grid-template-columns:1fr}
}
@media (max-width:600px){
  .field.hero{padding-top:48px;padding-bottom:56px}
  .after-hero{padding-top:56px}
  h1{font-size:2.4rem;max-width:none}
  .grid.hero-grid{margin-top:2rem}
  .lead{font-size:1.1rem}
  .actions .btn{width:100%;text-align:center}
  header.top .bar{padding-top:16px;padding-bottom:16px}
  header .btn{display:none}
  dl.facts{grid-template-columns:1fr}
  dl.facts dt{margin-top:.6rem}
  table.plans td.price{white-space:normal}
  figure.shot{padding:8px;margin-left:calc(-1 * var(--gutter) + 8px);margin-right:calc(-1 * var(--gutter) + 8px)}
  footer .address{font-size:1.6rem}
}