/* ------------------------------------------------------------------ tokens
     Liam's palette, unchanged. What changes is how little of it is used at
     once: The Campus runs on three grounds and one accent, so gold appears
     only on dark, where it also passes contrast at 6.68:1.

     One typeface, two weights. The serif display face is deliberately absent
     — a serif headline over a scrimmed photo is the single most recognisable
     "generated landing page" signature, and The Campus does not use one.
     Reinstating it is one @import and one font-family away. */
  :root{
    --green:#16412C; --green-d:#0C2519; --green-2:#1C4A33;
    --gold:#C6A15B; --gold-l:#D8BC82;
    --paper:#F4EFE4; --paper-2:#ECE4D3; --cream:#F7F2E8;
    --ink:#17251C; --muted:#546457; --line:#E1D9C7;
    --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* An author rule that sets display beats the UA's [hidden]. Anything
     hidden by the attribute must stay hidden whatever class it carries. */
  [hidden]{display:none!important}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--cream);
    line-height:1.65;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
  .narrow{max-width:720px;margin:0 auto}

  /* Headings: caps, spaced, one family. 24 of 24 headings on The Campus are
     uppercase; every one of ours ended in a full stop, which is what made
     them read as sentences from a document rather than signage. */
  h1,h2,h3{font-family:var(--sans);font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;line-height:1.16}
  h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
  h2{font-size:clamp(1.5rem,2.9vw,2.3rem)}
  h3{font-size:.95rem;letter-spacing:.14em}
  p{font-size:1.02rem}

  /* Nothing is rounded except the buttons. The Campus measures 0px on every
     block and 50px on its pills. Our 20px cards with soft shadows were the
     other half of the tell. */
  .btn{display:inline-block;border-radius:50px;padding:14px 30px;
    font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    border:1.5px solid transparent;background:transparent;font-family:inherit;
    /* A <button> renders as a native control while appearance is auto, and
       the engine paints buttonface over an author background - so the
       route finder's options came out cream-on-near-white and unreadable.
       Every .btn before them was an <a>, which is why this never showed. */
    -webkit-appearance:none;appearance:none;cursor:pointer;
    transition:background .18s,color .18s,border-color .18s}
  .btn-solid{background:var(--green);color:var(--cream)}
  .btn-solid:hover{background:var(--green-d)}
  .btn-line{border-color:var(--green);color:var(--green)}
  .btn-line:hover{background:var(--green);color:var(--cream)}
  .btn-light{border-color:rgba(247,242,232,.6);color:var(--cream)}
  .btn-light:hover{background:var(--cream);color:var(--green-d);border-color:var(--cream)}

  /* --------------------------------------------------------------------- nav */
  nav{position:sticky;top:0;z-index:60;background:var(--cream);
    border-bottom:1px solid var(--line)}
  .nav-in{position:relative;display:flex;align-items:center;gap:22px;height:70px}
  nav img{height:34px}
  /* The menu is behind a button at every width, which is what The Campus does
     with its own fourteen items. Seven uppercase labels with .12em tracking
     wrap to two lines even at 1262px, and a nav that wraps is the first thing
     that makes a site look homemade. */
  .nav-toggle{display:inline-flex;align-items:center;gap:9px;background:none;
    border:0;cursor:pointer;min-height:44px;padding:0;
    font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
    color:var(--green)}
  .nav-toggle .bars{display:inline-block;width:20px;height:9px;
    border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;background:var(--green-d);padding:34px 28px 40px;
    box-shadow:0 24px 48px rgba(12,37,25,.28)}
  .nav-links[data-open]{display:flex}
  .nav-links a{padding:13px 0;font-size:1.05rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--cream);
    border-bottom:1px solid rgba(247,242,232,.14)}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a:hover,.nav-links a.active{color:var(--gold-l)}
  .nav-cta{margin-left:auto}

  /* ------------------------------------------------------------- image bands
     The structural device the old build was missing. On The Campus these are
     full-bleed photographs carrying one phrase and one link, and they divide
     the page into chapters. We had exactly one and spent it on the finale. */
  .band{position:relative;min-height:64vh;display:flex;align-items:center;
    justify-content:center;text-align:center;color:var(--cream);overflow:hidden}
  .band--tall{min-height:88vh}
  .band .bg{position:absolute;inset:0;background-size:cover;background-position:center}
  .band .scrim{position:absolute;inset:0;background:rgba(12,37,25,.58)}
  .band .in{position:relative;z-index:2;padding:96px 28px;max-width:860px}
  .band h1,.band h2{color:var(--cream)}
  .band p{color:var(--cream);font-weight:500;margin-top:18px}
  .band .acts{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .scrolldown{position:absolute;bottom:30px;left:0;right:0;z-index:2;
    font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(247,242,232,.75)}

  /* -------------------------------------------------------------- facts strip
     Their second block is opening hours: unglamorous, immediately useful, and
     the first thing on the page that could be checked by a stranger. Ours had
     nothing of the kind, which is part of why it read as unfalsifiable. */
  .facts{background:var(--green-d);color:var(--cream)}
  .facts .row{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-block:44px}
  /* Field labels, not headings - they used to be h3 and broke the
     document outline by following the h1 directly. */
  .facts .lbl{color:var(--gold);margin-bottom:8px;font-weight:700;
    font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
  .facts p{font-size:.92rem;color:var(--cream);font-weight:500}
  .facts a{border-bottom:1px solid rgba(198,161,91,.55)}

  /* ------------------------------------------------------------ centred prose
     One tall block, centred, generous. Not a grid. */
  .prose{padding:104px 0;text-align:center}
  .prose--tint{background:var(--paper)}
  .prose--dark{background:var(--green-d);color:var(--cream)}
  .prose--dark h2{color:var(--cream)}
  .prose--dark p{color:var(--cream);font-weight:500}
  .prose .kicker{font-size:.7rem;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--muted);margin-bottom:16px}
  .prose--dark .kicker{color:var(--gold)}
  .prose h2{margin-bottom:22px}
  .prose p{margin:0 auto 16px;max-width:62ch}
  .prose .lead{font-size:1.14rem}
  .prose .acts{margin-top:30px}
  .prose figure{margin-top:52px}
  .prose figure img{width:100%;height:min(52vh,460px);object-fit:cover}

  /* A plain list. No ticks, no bordered panel, no grid. */
  .plain{list-style:none;max-width:60ch;margin:26px auto 0;text-align:left}
  .plain li{padding:14px 0;border-top:1px solid var(--line);font-size:1.02rem}
  .plain li:last-child{border-bottom:1px solid var(--line)}
  .prose--dark .plain li{border-color:rgba(247,242,232,.16)}

  /* ------------------------------------------------------------- photo cards
     Photo-led, not number-led: image, caps label, one line, a link that names
     where it goes. The Campus repeats "DISCOVER MORE" eight times and you
     never know what you are clicking — that is the one thing worth doing
     better rather than copying. */
  .cards{padding:100px 0}
  .cards .head{text-align:center;margin-bottom:52px}
  .cards .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
  .card{position:relative;display:block;min-height:390px;overflow:hidden;
    background:var(--green-d)}
  .card .bg{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform .5s ease}
  .card:hover .bg{transform:scale(1.04)}
  .card .veil{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(12,37,25,.18) 30%,rgba(12,37,25,.86))}
  .card .in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
    justify-content:flex-end;padding:34px;color:var(--cream);min-height:390px}
  .card h3{color:var(--cream);margin-bottom:10px;letter-spacing:.1em;font-size:1rem}
  .card p{font-size:.93rem;color:var(--cream);font-weight:500}
  .card .go{margin-top:16px;font-size:.7rem;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gold-l)}

  /* --------------------------------------------------------- alternating run
     Their inner-page unit, and the one we should have been using instead of
     card grids: image one side, caps label and a paragraph the other, sides
     swapping down the page. */
  /* stretch, not center: with align-items:center the photograph sat at its
     own 60vh inside a taller text row, leaving cream bands above and below
     it. The Campus's units are flush edge to edge. */
  .pic{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .pic .txt{display:flex;align-items:center}
  .pic .art{min-height:60vh;background-size:cover;background-position:center}
  .pic .txt{padding:80px 72px}
  .pic--flip .art{order:2}
  .pic h2{margin-bottom:18px}
  .pic p{color:var(--muted);margin-bottom:14px;max-width:46ch}
  .pic .acts{margin-top:22px}
  .pic--tint{background:var(--paper)}

  /* two half-panels, their PADEL/TENNIS device */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .duo a{position:relative;min-height:46vh;display:flex;align-items:center;
    justify-content:center;text-align:center;color:var(--cream);overflow:hidden}
  .duo .bg{position:absolute;inset:0;background-size:cover;background-position:center;
    transition:transform .5s ease}
  .duo a:hover .bg{transform:scale(1.04)}
  .duo .scrim{position:absolute;inset:0;background:rgba(12,37,25,.62)}
  .duo .in{position:relative;z-index:2;padding:30px}
  .duo h3{color:var(--cream);font-size:1.05rem;letter-spacing:.12em}
  .duo span{display:block;margin-top:12px;font-size:.7rem;font-weight:700;
    letter-spacing:.16em;color:var(--gold-l)}

  /* ------------------------------------------------------------------ footer */
  footer{background:var(--green-d);color:rgba(247,242,232,.88);padding:64px 0 32px}
  footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px}
  footer img{height:32px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:16px}
  footer h3{color:var(--gold);margin-bottom:14px;font-size:.7rem;letter-spacing:.18em}
  footer a{display:block;font-size:.9rem;padding:5px 0}
  footer a:hover{color:var(--cream)}
  footer p{font-size:.9rem}
  .foot-end{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    border-top:1px solid rgba(247,242,232,.14);margin-top:40px;padding-top:22px;
    font-size:.82rem}

  :focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition-duration:.01ms!important}
  }

  @media (max-width:640px){
    .nav-cta .btn{padding:11px 16px;font-size:.66rem}
    .nav-toggle span:not(.bars){display:none}   /* the bars carry it */
  }
  @media (max-width:860px){
    .facts .row{grid-template-columns:1fr;gap:24px;padding-block:34px}
    .cards .grid{grid-template-columns:1fr}
    .pic{grid-template-columns:1fr}
    .pic--flip .art{order:0}
    .pic .art{min-height:44vh}
    .pic .txt{padding:56px 28px}
    .duo{grid-template-columns:1fr}
    footer .cols{grid-template-columns:1fr}
  }

  /* ------------------------------------------------------- inner-page pieces
     Their inner pages are simpler than their home page: a hero carrying only
     the page title, one centred paragraph, then the alternating run. Nothing
     else. These are the additions that serve that. */
  .band--title{min-height:56vh}
  .band--title .in{padding:72px 28px}
  .prose--intro{padding:88px 0 78px}
  .prose--intro p{font-size:1.12rem}
  .prose h3{margin:36px 0 4px;font-size:.82rem;letter-spacing:.16em;color:var(--muted)}
  .prose--dark h3{color:var(--gold)}
  .prose .plain + h3{margin-top:48px}
  .pic .plain{margin:22px 0 0;max-width:46ch}
  .pic .plain li{font-size:.98rem}
  /* A kicker sits above the heading it introduces, so it is a label,
     not a subheading. */
  .pic .pickicker{margin-bottom:14px;color:var(--muted);font-weight:700;
    font-size:.95rem;letter-spacing:.14em;text-transform:uppercase}
  .cards .grid--three{grid-template-columns:repeat(3,1fr)}
  @media (max-width:1000px){ .cards .grid--three{grid-template-columns:1fr} }
  /* Two lists side by side without becoming bordered panels again: they are
     plain columns of text, not cards. */
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:52px;text-align:left;
    max-width:940px;margin:34px auto 0}
  .pair .plain{margin:12px 0 0;max-width:none}
  .pair h3{margin:0;text-align:left}
  @media (max-width:860px){ .pair{grid-template-columns:1fr;gap:34px} }

  /* --------------------------------------------------------------- ig strip
     Four photographs, flush, no captions and no invented like counts. */
  .strip{padding:0}
  .strip .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
  .strip .tile{position:relative;min-height:250px;background-size:cover;
    background-position:center}
  .strip .tile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
    background:linear-gradient(180deg,rgba(12,37,25,0),rgba(12,37,25,.88));
    color:var(--cream);font-size:.82rem}
  @media (max-width:860px){ .strip .grid{grid-template-columns:1fr 1fr} }

  /* ------------------------------------------------------------------ modal
     The Campus QDL promo overlay: a centred card, small caps title, one
     photograph, a short paragraph and a single pill. Theirs appears on every
     visit; this one remembers being dismissed, because a popup that returns
     on every page view is the thing people hate about popups. */
  .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;
    justify-content:center;padding:24px;background:rgba(12,37,25,.72)}
  .modal[data-open]{display:flex}
  .modal-card{position:relative;width:100%;max-width:520px;background:var(--cream);
    max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(12,37,25,.4)}
  .modal-card .top{padding:26px 30px 18px;text-align:center}
  .modal-card h2{font-size:.82rem;letter-spacing:.18em;color:var(--green)}
  .modal-card img{width:100%;height:230px;object-fit:cover}
  .modal-card .body{padding:26px 34px 34px;text-align:center}
  .modal-card .body p{font-size:.98rem;color:var(--muted);margin-bottom:24px}
  .modal-card .body p b{color:var(--ink)}
  .modal-close{position:absolute;top:10px;right:12px;z-index:2;width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;background:var(--cream);
    border:0;border-radius:50%;cursor:pointer;font-size:1.3rem;line-height:1;
    color:var(--green)}
  .modal-close:hover{background:var(--paper-2)}
  @media (max-width:520px){
    .modal-card img{height:180px}
    .modal-card .body{padding:22px 22px 28px}
  }

  /* --------------------------------------------------------- the two-up menu
     The plain .duo panels carry a label only, which is right for a chapter
     divider. This variant adds the sentence that says what the place is, so
     the visitor does not have to click to find out. */
  .duo--menu a{min-height:56vh;align-items:flex-end;text-align:left}
  .duo--menu .in{padding:40px 42px;max-width:560px}
  .duo--menu .scrim{background:linear-gradient(180deg,rgba(12,37,25,.34) 20%,rgba(12,37,25,.94))}
  .duo--menu h3{font-size:1.15rem;margin-bottom:12px}
  .duo--menu p{font-size:.95rem;color:var(--cream);font-weight:500;margin-bottom:16px}
  .duo--menu span{color:var(--gold-l)}
  @media (max-width:860px){
    .duo--menu a{min-height:48vh}
    .duo--menu .in{padding:30px 26px}
  }

  /* ------------------------------------------------------ the three-up menu
     Specialisms runs three panels rather than two. It sits directly under the
     route cards, so it keeps the full-bleed treatment to stay distinct from
     the grid above it. */
  .duo-head{text-align:center;padding:96px 0 44px}
  .duo-head p{color:var(--muted);margin-top:14px}
  .duo--three{grid-template-columns:repeat(3,1fr)}
  .duo--three a{min-height:52vh}
  .duo--three .in{padding:34px 32px}
  @media (max-width:1000px){
    .duo--three{grid-template-columns:1fr}
    .duo-head{padding:70px 0 34px}
  }

  /* ------------------------------------------------------- location & access
     Built in the site's own vocabulary rather than the drop-in's a1loc-
     prefixed copy of the palette: same tokens, same borders, so it cannot
     drift from the rest of the page. */
  .locgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:start;
    text-align:left;margin-top:38px}
  .locmap{position:relative;min-height:390px;background:var(--green-2);
    border:1px solid rgba(247,242,232,.18)}
  .locmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .loccap{font-size:.85rem;color:rgba(247,242,232,.62);margin-top:10px}
  .rows{list-style:none;border-top:1px solid rgba(247,242,232,.18)}
  .rows li{display:flex;justify-content:space-between;gap:22px;padding:14px 0;
    border-bottom:1px solid rgba(247,242,232,.18);font-size:1rem}
  .rows li b{font-weight:600;color:var(--cream)}
  .rows li span{color:rgba(247,242,232,.7);text-align:right}
  @media (max-width:860px){
    .locgrid{grid-template-columns:1fr}
    .locmap{min-height:300px}
    .rows li{gap:14px}
    .rows li span{text-align:right}
  }

  /* ------------------------------------------------------------------- form
     The brief specifies ten fields for the Campus enquiry. Until now the page
     listed them in a paragraph and asked people to compose an email covering
     all ten from memory. */
  .form{padding:100px 0;background:var(--paper)}
  .form .head{max-width:660px;margin:0 auto 44px;text-align:center}
  .form form{max-width:760px;margin:0 auto}
  .fset{border:0;padding:0;margin:0 0 34px}
  .fset legend{font-size:.7rem;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--muted);padding:0;margin-bottom:18px}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .f{margin-bottom:20px}
  .f label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;
    margin-bottom:7px;color:var(--ink)}
  .f .req{color:#8A3A2A}
  .f .hint{display:block;font-weight:400;font-size:.8rem;color:var(--muted);
    margin-top:3px;letter-spacing:0}
  .f input,.f select,.f textarea{width:100%;font:400 1rem/1.5 var(--sans);
    color:var(--ink);background:var(--cream);border:1px solid var(--line);
    border-radius:0;padding:13px 15px}
  .f textarea{min-height:104px;resize:vertical}
  .f input:focus,.f select:focus,.f textarea:focus{outline:3px solid var(--gold-ink);
    outline-offset:2px;border-color:var(--green)}
  .f input:invalid:not(:placeholder-shown){border-color:#8A3A2A}
  .form .boundary{background:var(--cream);border-left:4px solid var(--gold);
    padding:22px 26px;margin:0 0 30px;font-size:.95rem;color:var(--muted)}
  .form .privacy{font-size:.85rem;color:var(--muted);margin-top:18px}
  .form .actions{margin-top:8px}
  .msg{display:none;padding:18px 22px;margin-bottom:24px;font-size:.98rem;
    border-left:4px solid var(--green);background:var(--cream)}
  .msg[data-show]{display:block}
  .msg[data-kind="error"]{border-left-color:#8A3A2A}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  @media (max-width:700px){ .frow{grid-template-columns:1fr} }

  /* -------------------------------------------------------------- site plan
     A drawn plan of the site with the real photographs pinned to it. Not a
     satellite screenshot: that imagery is licensed, and a drawn plan reads as
     designed rather than borrowed. */
  .plan{padding:100px 0;background:var(--green-d);color:var(--cream)}
  .plan .head{max-width:660px;margin:0 auto 46px;text-align:center}
  .plan .head h2{color:var(--cream)}
  .plan .head p{color:rgba(247,242,232,.78)}
  .plan .kicker{font-size:.7rem;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--gold);margin-bottom:14px}
  .plangrid{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:start}
  .planfig svg{width:100%;height:auto;display:block;
    border:1px solid rgba(247,242,232,.18)}
  .planfig text{fill:var(--cream)}
  .pin circle{fill:rgba(12,37,25,.72);stroke:var(--gold);stroke-width:2;
    transition:fill .18s ease,stroke .18s ease}
  .pin text{font-size:15px;font-weight:700;letter-spacing:1px;text-anchor:middle}
  .pin{cursor:pointer}
  .pin:hover circle,.pin:focus circle,.pin.is-on circle{fill:var(--gold);stroke:var(--cream)}
  .pin:hover text,.pin:focus text,.pin.is-on text{fill:var(--green-d)}
  .pin:focus{outline:none}
  .pin:focus circle{stroke-width:3}
  .planpanel img{width:100%;height:min(46vh,330px);object-fit:cover;
    border:1px solid rgba(247,242,232,.18)}
  .planmeta{padding:22px 0 6px}
  .planmeta h3{color:var(--cream);font-size:1.05rem;margin-bottom:10px}
  .planmeta p{color:rgba(247,242,232,.78);font-size:.95rem}
  .planlist{list-style:none;border-top:1px solid rgba(247,242,232,.18);margin-top:16px}
  .planlist li{border-bottom:1px solid rgba(247,242,232,.18)}
  .planbtn{width:100%;text-align:left;background:none;border:0;cursor:pointer;
    padding:13px 2px;font:600 .92rem/1.4 var(--sans);letter-spacing:.04em;
    color:rgba(247,242,232,.78);transition:color .18s ease}
  .planbtn:hover,.planbtn.is-on{color:var(--gold-l)}
  @media (max-width:900px){
    .plangrid{grid-template-columns:1fr;gap:26px}
    .planpanel img{height:44vh}
  }

  /* ----------------------------------------------------------- route finder
     One question, sometimes two, then the route. Lives in the "Not sure where
     you fit?" band on Home. Options are real buttons so the keyboard works;
     the result is a live region so a screen reader hears it arrive. */
  .band--finder{min-height:0;padding:0}
  .band--finder .in{max-width:900px;padding:104px 28px}
  .finder{margin-top:34px;text-align:left}
  .finder-q{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-l);margin-bottom:16px;text-align:center}
  .finder-opts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .finder-opts .btn{text-transform:none;letter-spacing:.02em;font-size:.92rem;
    font-weight:600;padding:13px 22px;white-space:normal;text-align:center}
  .finder-back{display:block;margin:22px auto 0;background:none;border:0;cursor:pointer;
    font:600 .82rem/1 var(--sans);letter-spacing:.06em;color:rgba(247,242,232,.7)}
  .finder-back:hover{color:var(--cream)}
  .finder-result{background:var(--cream);color:var(--ink);padding:34px 36px;
    text-align:left;max-width:640px;margin:0 auto;outline:none}
  .finder-result .kicker{font-size:.7rem;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--muted);margin-bottom:12px}
  .finder-result h3{font-size:1.15rem;letter-spacing:.06em;margin-bottom:12px;
    color:var(--ink)}
  .finder-result p{color:var(--muted);font-size:.98rem;margin-bottom:22px}
  .finder-result .acts{justify-content:flex-start;align-items:center;margin-top:0}
  .finder-more{font-size:.82rem;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--green)}
  .finder-result .finder-back{color:var(--muted);margin:26px 0 0;text-align:left}
  .finder-result .finder-back:hover{color:var(--ink)}
  .finder-escape{margin-top:26px;text-align:center;font-size:.86rem;
    color:rgba(247,242,232,.62)}
  .finder-escape a{border-bottom:1px solid rgba(247,242,232,.45)}
  @media (max-width:640px){
    .band--finder .in{padding:72px 22px}
    .finder-opts{flex-direction:column;align-items:stretch}
    .finder-result{padding:26px 22px}
  }

  /* ------------------------------------------------------------ phone fixes
     Found by measuring at 375px and 320px rather than by looking, which is how
     the plan's 5.8px pin numbers went unnoticed for a week. Appended last so
     these win over the earlier breakpoints they correct.

     The plan is a drawing with a fixed viewBox: squeezed into a 319px column it
     scales to 0.39, so its labels rendered at 5.4-5.8px - present, and
     unreadable. It keeps a usable width and scrolls sideways in its own box
     instead, which is what a wide diagram should do, and its type is scaled up
     to survive the remaining reduction. Choosing a space on a phone is the job
     of the list underneath, whose buttons are 47px; the plan is the picture. */
  @media (max-width:900px){
    .planfig{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .planfig svg{min-width:620px}
    .planfig text{font-size:19px}
    .pin text{font-size:20px}
    .loccap{margin-top:12px}
  }

  /* Labels sat at 10.5-11.2px on a phone, and uppercase with letter-spacing
     makes small type harder to read, not easier. */
  @media (max-width:900px){
    .btn{font-size:.82rem}
    .card .go,.duo--menu span{font-size:.78rem}
    .nav-cta .btn{font-size:.74rem;padding:11px 16px}
  }
  @media (max-width:400px){
    /* .8rem measured at 171px wide inside a 320px bar, ending 28px clear of
       the edge - so there was no reason to leave this label at 11.5px. */
    .nav-cta .btn{font-size:.8rem;padding:10px 13px}
  }

  /* The small tracked labels - kickers, the finder's question, the scroll hint
     - sat between 10.6px and 11.5px. They are meant to be quiet, not strained,
     so they get a 12px floor on a phone. The tracking and the capitals stay. */
  @media (max-width:900px){
    .kicker,.finder-q,.prose .kicker{font-size:.76rem}
    .scrolldown{font-size:.74rem}
  }