/* ============================================================================
   visit.css  ·  /visit, /gallery, /pedestals
   Owned by tools/pages/visit.py. Tokens only, no new colours, no new faces.

   The whole page turns on one fact: every photograph is a 2003 JPEG and the
   widest is 600px. So nothing here is a hero. Everything is a plate in a mat,
   and each plate carries its own --cap so it can never be drawn above half its
   true pixel width. The air around the plate is doing the work.
   ============================================================================ */

/* ------------------------------------------------------------- the figure -- */

.gfig{display:block;text-decoration:none;color:inherit}
.gfig__mat{position:relative}
/* picture is a passthrough so the img itself is the grid item and its
   max-height:100% resolves against the mat's definite box */
.gfig__mat picture{display:contents}
.gfig__mat img{
  max-width:min(100%,var(--cap,240px));
  max-height:100%;width:auto;height:auto;object-fit:contain;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.gfig__body{display:block;padding-top:var(--s2)}
.gfig__name{display:block;font-size:var(--t-md);line-height:1.25;color:var(--ink)}
.gfig__note{display:block;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.55;margin-top:4px}
a.gfig:hover .gfig__name{text-decoration:underline;text-decoration-color:var(--brass);
  text-decoration-thickness:1px;text-underline-offset:3px}
a.gfig:hover .gfig__mat img{transform:scale(1.025)}

/* -------------------------------------------------------------- page tops -- */

.pagetop{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--s5) var(--s6);align-items:start}
.pagetop__fig{margin:0}
.pagetop__fig figcaption{font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.55;margin-top:var(--s2)}
.pagetop h1{margin-bottom:var(--s3)}
.pagetop .lede{max-width:52ch}
@media (max-width:900px){
  .pagetop{grid-template-columns:1fr;gap:var(--s4)}
  .pagetop__fig{max-width:300px}
}

/* --------------------------------------------------------------- callout -- */
/* A full box, never a leading dash-line. The telephone-first note is the most
   important sentence on the Visit page, so it is set as prose, not as chrome. */

.callout{
  border:1px solid var(--ground-3);background:var(--ground-2);color:var(--ink);
  padding:var(--s3) var(--s3);margin-top:var(--s4);max-width:52ch;
}
.callout p{margin:0;font-size:var(--t-md);line-height:1.5;color:var(--ink)}
.callout p+p{margin-top:var(--s2);font-family:var(--sans);font-size:var(--t-sm);
  color:var(--ink-2)}
.callout a{color:var(--ink)}

/* ----------------------------------------------------------------- facts -- */

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:var(--s4);margin:0}
.facts dt{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  color:var(--ink-3);margin:0 0 6px}
.facts dd{margin:0;font-size:var(--t-base);line-height:1.55;color:var(--ink)}
.facts dd a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.facts dd .meta{display:block;margin-top:2px}
/* A telephone number is the primary action on this page, so it gets a real
   44px target rather than the 21px line box a bare inline link would give. */
.facts .tel,.route .tel{
  font-family:var(--sans);font-size:var(--t-md);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  display:inline-flex;align-items:center;min-height:44px;
}

/* ------------------------------------------------------------------- map -- */

.map-head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  align-items:baseline;justify-content:space-between}
/* The frame reserves its full height whichever child is showing, so swapping
   the plain-link fallback for the live map shifts nothing. The fallback is the
   DEFAULT state in the markup: with no JavaScript at all the address and the
   directions link are still there, and the map only replaces them once it has
   actually drawn. */
.map-frame{
  position:relative;margin-top:var(--s4);display:grid;
  min-height:clamp(300px,50vw,460px);
  border:1px solid var(--ground-3);background:var(--ground-2);overflow:hidden;
}
.map{width:100%;height:100%;min-height:clamp(300px,50vw,460px);background:var(--ground-2)}
/* site.css sets img{max-width:100%}, which shreds Google's tile mosaic */
.gm-style img{max-width:none}
.map-fallback{display:none;align-self:center;padding:var(--s4);
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.65;
  color:var(--ink-2);max-width:56ch;margin:0}
.map-fallback a{color:var(--ink)}
.map-frame[data-failed="true"] .map{display:none}
.map-frame[data-failed="true"] .map-fallback{display:block}

.map-recentre{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  background:var(--ground);color:var(--ink);
  border:1px solid var(--ink-3);border-radius:1px;
  padding:8px 13px;margin:10px;min-height:36px;cursor:pointer;
  box-shadow:0 1px 3px rgba(33,30,25,.18);
}
.map-recentre:hover{border-color:var(--ink);background:#F3EFE6}
.map-recentre:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

.map-after{display:grid;grid-template-columns:minmax(0,1fr) 192px;
  gap:var(--s4) var(--s5);align-items:start;margin-top:var(--s4)}
.map-after .prose{max-width:56ch}
.map-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
/* the two small reference pictures beside the map: the printed sheet and the
   room itself. Both are capped well under 200px, so they stack rather than
   pretend to be one wide image. */
.map-refs{display:grid;gap:var(--s4);align-content:start}
.map-sketch{margin:0}
.map-sketch img{border:1px solid var(--ground-3)}
.map-sketch figcaption{font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);line-height:1.55;margin-top:var(--s1)}
@media (max-width:760px){
  .map-after{grid-template-columns:1fr}
  .map-sketch{max-width:192px}
}

/* ---------------------------------------------------------------- routes -- */

.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s4) var(--s4);margin-top:var(--s4)}
.route{border-top:1px solid var(--ground-3);padding-top:var(--s3)}
.route h3{font-size:var(--t-md);margin-bottom:var(--s1)}
.route p{margin:0;font-family:var(--sans);font-size:var(--t-sm);line-height:1.6;
  color:var(--ink-2)}
.route p+p{margin-top:var(--s2)}
.route a{color:var(--ink)}
.route .tel{margin-bottom:2px}

.charges{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s3) var(--s4);margin:0;padding:0;list-style:none;max-width:520px}
.charges li{border-top:1px solid var(--ground-3);padding-top:var(--s2)}
.charges .price{display:block;font-size:var(--t-md);margin-bottom:2px}
.charges .meta{display:block}

/* ------------------------------------------------------------- documents -- */

.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--s3);margin-top:var(--s4);padding:0;list-style:none}
.docs li{border-top:1px solid var(--ground-3);padding-top:var(--s3)}
.docs a{display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--t-md);color:var(--ink);line-height:1.3}
.docs .meta{display:block;margin-top:5px}

/* --------------------------------------------------------------- gallery -- */

.gal-intro{max-width:56ch}
.gal-intro .shown{font-family:var(--sans);font-size:var(--t-sm);
  color:var(--ink-2);margin-top:var(--s3)}
.gal-intro .shown a{color:var(--ink-2)}

/* ------------------------------------------------------------- pedestals -- */

.pagehead>div{max-width:60ch}

/* Acanthus and the practical note read as a closing spread rather than two
   more narrow columns stranded on the left of a wide page. */
.ped-end{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--s6)}
.ped-end h2{margin-bottom:var(--s3)}
.ped-end .prose{max-width:52ch}
.ped-end .docs{grid-template-columns:1fr}

.ped-note{max-width:56ch}
.ped-note h2{margin-bottom:var(--s3)}

/* ------------------------------------------------------------ small print -- */

.aside-note{font-family:var(--sans);font-size:var(--t-sm);line-height:1.65;
  color:var(--ink-2);max-width:60ch}
.aside-note a{color:var(--ink)}

/* -------------------------------------------------------------- 390px QA -- */

@media (max-width:430px){
  .pagetop__fig,.map-sketch,.ped-row__figs{max-width:100%}
  .callout{padding:var(--s3) var(--s2)}
}

@media (prefers-reduced-motion:reduce){
  .gfig__mat img{transition:none}
  a.gfig:hover .gfig__mat img{transform:none}
}