/* lc-schools.css — the per-school single, /school/<slug>/.
   Loaded ONLY on is_singular('school') (lc-school-pages.php section 2). The /schools/
   directory is a different app and carries lc-schools-app.css.

   THE PALETTE IS INHERITED, NOT INVENTED. --lc-ink/muted/line/soft/gold are the values the
   restaurant, explore and builder singles already declare, and the three level colours are
   the directory map's own pin colours, so a level means the same thing in both views. The
   display face is the theme's h1 face; the body face is the theme's body face. Nothing here
   introduces a font or a grey the site did not already have.

   The whole file is a light treatment on paper. There is no dark section anywhere on this
   page: one dark band in an otherwise light document reads as a paste accident, and the
   masthead's legibility comes from a wash over the ground rather than from inverting it. */

.lcss-mast,
.lcss-rec,
.lcss-place,
.lcss-chain,
.lcss-tail {
  --ss-ink: #1d2721;
  --ss-muted: #6b7772;
  --ss-line: #e3e6e3;
  --ss-soft: #f6f7f5;
  --ss-paper: #f7f6f4;
  /* The house muted is a white-ground value. Over the masthead's plate it measures 3.4:1
     against the darker tiles, which is under AA for both the eyebrow and the address line —
     and it is the ground that varies, tile by tile and school by school, so the type has to
     hold against the darkest thing the mosaic can draw rather than against the average. */
  --ss-onplate: #495349;
  --ss-gold: #b8863b;
  --ss-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Scoped, never global. A site-wide box-sizing reset is known to make links on this site
   render wider than they were asked to be. Without it here a max-width of 1200 plus a 40px
   gutter measures 1280, so the masthead and the record below it align on the left and part
   company on the right — which is invisible in either block alone. */
.lcss-mast, .lcss-mast *,
.lcss-rec, .lcss-rec *,
.lcss-place, .lcss-place *,
.lcss-chain, .lcss-chain *,
.lcss-tail, .lcss-tail * { box-sizing: border-box; }

/* ---------------------------------------------------------------- *
 * The template's shell.
 *
 * Every block below carries its own max-width and gutter, so the builder's container is
 * unboxed rather than fought: a container inside a container gives the masthead a white
 * margin down each side and stops it reaching the top corners, which is the specific way a
 * full-bleed band fails on this theme. Width is removed structurally — no 100vw and no
 * negative margin, both of which overflow by the scrollbar width and loop against the
 * sticky header.
 * ---------------------------------------------------------------- */
body.lc-school-single #tm-main { padding-top: 0; }
body.lc-school-single #tm-main .uk-container { max-width: none; padding-left: 0; padding-right: 0; }
/* The masthead prints the page's one visible h1; the theme's own copy is the same words twice. */
body.lc-school-single #tm-main .uk-article-title,
body.lc-school-single #tm-main .tm-page-title,
body.lc-school-single #tm-main .uk-breadcrumb { display: none !important; }

/* ================================================================ *
 * 1. THE MASTHEAD
 *
 * Three layers, and the order is what makes the overlaid navigation safe: paper paints
 * first and unconditionally, the tile mosaic lays over it, the wash lays over that. A
 * transparent header above a band that failed to paint is a 200 response with the logo and
 * every link invisible, so the ground can never depend on an image resolving.
 *
 * 104px of top padding is the menu's room, and --lc-storm-h is added to it because the storm
 * ribbon renders INSIDE .tm-header, which is absolutely positioned: it lowers the menu
 * without moving the document, so a fixed figure measured against a bare header puts the
 * title inside the navigation whenever a storm is live. The variable defaults to 0.
 * ================================================================ */
.lcss-mast {
  position: relative;
  overflow: hidden;
  background: var(--ss-paper);
  box-shadow: inset 0 -1px 0 var(--ss-line);
}

.lcss-mast__ground { position: absolute; inset: 0; z-index: 0; }

/* Centred on the school and cropped by the band, so one server render serves 1440, 1024 and
   414 without being redrawn. The vignette is what stops the mosaic reading as a screenshot
   of a map: its edges dissolve into the paper instead of ending on a rectangle. */
.lcss-plate__map {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 380px;
  margin: -190px 0 0 -640px;
  /* Held back only slightly, and deliberately not drained to monochrome. This basemap draws
     its roads as white casing on pale ground, so removing the colour removes the roads and
     the plate renders as blank cream — measured on the directory's cards. */
  filter: saturate(.78) contrast(1.05);
  -webkit-mask-image: radial-gradient(150% 160% at 50% 45%, #000 62%, rgba(0, 0, 0, .62) 88%, transparent 100%);
  mask-image: radial-gradient(150% 160% at 50% 45%, #000 62%, rgba(0, 0, 0, .62) 88%, transparent 100%);
}
/* max-width is spelled out because the theme sets img{max-width:100%} globally, which would
   shrink each 256px tile to the width of its container and tear the mosaic apart. */
.lcss-plate__map img {
  position: absolute;
  display: block;
  width: 256px;
  height: 256px;
  max-width: none;
}

/* Two washes, each doing one job. The first keeps the strip the navigation sits on pale, so
   the dark logo and links stay legible whatever the mosaic happens to draw up there. The
   second keeps the type column near-paper and lets the ground come through on the side the
   photograph is on — an even wash would flatten the whole band to one grey. */
.lcss-mast__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(247, 246, 244, .93) 0, rgba(247, 246, 244, .34) 100px, rgba(247, 246, 244, 0) 176px),
    linear-gradient(97deg, rgba(247, 246, 244, .92) 0%, rgba(247, 246, 244, .84) 26%, rgba(247, 246, 244, .26) 47%, rgba(247, 246, 244, .04) 100%);
}

.lcss-mast__in {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(104px + var(--lc-storm-h, 0px)) 40px 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 52px;
}

.lcss-mast__type { flex: 1 1 auto; min-width: 0; }

.lcss-eyebrow {
  margin: 0 0 16px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ss-onplate);
}

.lcss-title {
  font-family: var(--ss-display);
  font-weight: 700;
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ss-ink);
  margin: 0;
  max-width: 17ch;
  text-wrap: balance;
}

.lcss-where {
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ss-onplate);
  max-width: 44ch;
}

/* ---- the action row ---- */
.lcss-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }

.lcss-btn {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 13px 19px;
  color: var(--ss-ink);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--ss-ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.lcss-btn--go { background: var(--ss-ink); color: #fff; }
.lcss-btn:hover { background: var(--ss-ink); color: #fff; }
.lcss-btn--go:hover { background: #101a14; }
.lcss-btn:active { transform: translateY(1px); }
.lcss-btn:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 3px; }

/* ---- the photograph ----
   It keeps its own proportions rather than being cropped into a fixed well. These are Google
   Places user snapshots and the corpus runs from a 5:1 panorama of a brick frontage to a
   portrait phone shot of a butterfly; forced into one aspect ratio the wide ones become a
   doorway and the tall ones become a centre crop of nothing. Capped by height and width, each
   one renders as the photograph it is — a print laid on the plate, with a paper mat and a
   shadow tinted to the ink rather than to black. */
.lcss-mast__print {
  flex: 0 0 auto;
  margin: 0;
  width: max-content;
  max-width: 44%;
  background: #fff;
  padding: 10px;
  box-shadow:
    0 1px 2px rgba(29, 39, 33, .12),
    0 24px 48px -20px rgba(29, 39, 33, .40);
}
.lcss-mast__printimg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 340px;
  height: auto;
  object-fit: contain;
}
/* 76 of 211 schools have no photograph, and on those pages the plate is not the ground behind
   a picture — it IS the picture. So it is given the height to be one and most of the wash is
   taken off it. Rendered at the photographed band's proportions the drawing read as a stain on
   cream rather than as a map, and a rural school, where the ground is genuinely sparse, showed
   almost nothing at all. */
.lcss-mast--noprint .lcss-mast__in { min-height: calc(430px + var(--lc-storm-h, 0px)); }
/* No geocode, no plate, and therefore nothing for the extra height to hold. */
.lcss-mast--noplate .lcss-mast__in { min-height: 0; }

/* A plate of this school's ground earns height; a plate of its TOWN does not. Stretched to a
   subject's height the town ground became a wide shallow field with the title stranded in a
   corner of it — a frame announcing a photograph that never arrived. Given only the height its
   own type needs, the same ground reads as a masthead band and the title is the figure. */
.lcss-mast--townband .lcss-mast__in { min-height: 0; padding-bottom: 44px; }
.lcss-plate--town .lcss-plate__map {
  width: 1520px;
  height: 280px;
  margin: -140px 0 0 -760px;
}
.lcss-mast--noprint .lcss-mast__wash {
  background:
    linear-gradient(to bottom, rgba(247, 246, 244, .82) 0, rgba(247, 246, 244, .22) 88px, rgba(247, 246, 244, 0) 160px),
    linear-gradient(97deg, rgba(247, 246, 244, .88) 0%, rgba(247, 246, 244, .7) 24%, rgba(247, 246, 244, .1) 44%, rgba(247, 246, 244, 0) 100%);
}
/* The drain comes almost all the way off and the vignette holds much further out. A rural
   school's ground is genuinely sparse — at Bonneau the plate is four roads and a creek — so
   whatever the tiles do draw has to be allowed to read. */
.lcss-mast--noprint .lcss-plate__map {
  filter: saturate(.92) contrast(1.1);
  -webkit-mask-image: radial-gradient(135% 145% at 54% 46%, #000 68%, rgba(0, 0, 0, .72) 90%, transparent 100%);
  mask-image: radial-gradient(135% 145% at 54% 46%, #000 68%, rgba(0, 0, 0, .72) 90%, transparent 100%);
}
.lcss-mast--noprint .lcss-title { max-width: 22ch; }
.lcss-mast--noprint .lcss-where { max-width: 52ch; }

/* ================================================================ *
 * 2. THE RECORD — the crest, what the record holds, and the week.
 * ================================================================ */
/* Less top padding than the sections below it, because the mark and the rule already supply
   the air a heading would have needed. */
.lcss-rec { max-width: 1200px; margin: 0 auto; padding: 44px 40px 0; }

.lcss-rec__body {
  border-top: 2px solid var(--ss-ink);
  padding-top: 26px;
  display: grid;
  align-items: start;
  /* No crest and no hours is the plainest form and also a common one, so it is the base. */
  grid-template-columns: minmax(0, 1fr);
}

/* ---- the four shapes this record takes, each stated outright ----
   ⚠ HALF THE ROSTER HAS NO CREST, so the two-column form is the primary layout and the mark
   is the variant — not the other way round. An absent mark must leave NO column: a zero-width
   track still contributes its gap, which at this scale is a visible indent down the left of
   the details on 150 pages. Spelling out all four combinations costs four lines and removes
   every case where the grid has to infer what is missing. */
.lcss-rec .lcss-rec__body                { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.lcss-rec--nohours .lcss-rec__body       { grid-template-columns: minmax(0, 1fr); }
.lcss-rec--mark .lcss-rec__body          { grid-template-columns: 25% minmax(0, 1.05fr) minmax(0, 1fr); }
.lcss-rec--mark.lcss-rec--nohours .lcss-rec__body { grid-template-columns: 25% minmax(0, 1fr); }

/* A quarter of the measure makes the mark an element of the composition rather than a marker
   tucked in a corner, and at that size its own proportions start to matter. The well is a
   fixed box and `object-fit: contain` fits the mark inside it, so a circular seal fills it
   square, a wordmark running about 5:1 spans it and sits shallow, and a portrait mark stands
   up — all three occupying the same reserved area, which is what keeps the row's geometry
   identical whatever shape arrives.
   Top-aligned rather than centred: level with the rule and with the first label beside it, so
   the mark and the details share a line to start from. */
.lcss-rec__mark { align-self: start; }

/* A FIXED BOX WITH THE INK FITTED INSIDE IT, not a mark left at whatever size its file
   happens to be. Measured across the 104 marks on the roster: the served longest edge is
   300px at the median but 154px at the minimum, so left to size themselves eleven of them
   would render a third smaller than the rest for no reason a reader could see. An explicit
   height gives every mark the same reserved area and costs at most a 1.4x upscale on those
   eleven, which is nothing on a flat graphic.

   Ink to the TOP LEFT of that box, so the mark starts on the same line as the first label
   beside it and against the same edge as the rule above it — whatever its shape.

   ⚠ SHAPE PARITY IS APPROXIMATE AND CANNOT BE ANYTHING ELSE. The roster runs from 0.57:1 to
   13:1 — 81 squarish, 20 wide, 3 tall. Containment puts a seal at 200 square and a 13:1
   wordmark at 280 by 21, and no box makes those weigh the same; the only ways to force it are
   cropping the wordmark or stretching it, and both damage a mark the school owns. A wordmark
   genuinely is a lighter object than a seal, and it stays legible at this width, which is the
   part that matters.

   ⚠ The logo SERVICE's 128px cap is overridden here, in this vertical's scope, and not raised
   at source. That cap is the sensible default for the eight other verticals drawing on the
   same service across 1,200-odd records, none of which asked for a mark at this scale;
   loosening it centrally would resize all of them to suit one page. The service still owns
   the mark, the containment and the rule that there is no placeholder. */
.lcss-rec__mark .lc-logo {
  display: block;
  /* Width drives the size, so a small file is scaled UP to the column and the marks stay the
     same size across pages. Height then follows the mark's own proportions and is only capped,
     never set: a fixed height reserves a box a wide mark cannot fill, and stacked on a phone
     that unfilled box becomes a 95px hole between the mark and the first label. */
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  object-position: left top;
  aspect-ratio: auto;
}

/* Beside a quarter-width mark the details have less room than they had across the full
   measure, so the label stops sitting in its own column and sits above its value. The rows
   get taller and narrower, which is the proportion that belongs next to a tall mark — and it
   is the same stacked form the narrow layout already uses, not a third pattern. */
.lcss-rec--mark .lcss-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.lcss-rec--mark .lcss-facts dt { padding-top: 0; }

/* A record with hours carries a hairline between the two columns of text; without them the
   block is brought in rather than ruled across the full measure above three short rows,
   which reads as a table that lost its other column. */
@media (min-width: 960px) {
  .lcss-rec--nohours:not(.lcss-rec--mark) { padding-right: 420px; }
}

/* Nothing left but the mark: no rule to hang from, and aligned with the title above it. */
.lcss-rec--markonly { padding-bottom: 8px; }
.lcss-rec--markonly .lcss-rec__mark { width: 25%; }

.lcss-facts { margin: 0; padding-right: 52px; }
.lcss-rec--nohours .lcss-facts { padding-right: 0; }
.lcss-rec--nohours:not(.lcss-rec--mark) .lcss-facts { max-width: 60ch; }
.lcss-rec--mark .lcss-facts { padding-left: 48px; }
.lcss-rec--mark.lcss-rec--nohours .lcss-facts { padding-right: 0; }

.lcss-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 22px;
  padding: 16px 0;
  border-top: 1px solid var(--ss-line);
}
.lcss-row:first-child { border-top: 0; padding-top: 0; }
.lcss-facts dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ss-muted);
  padding-top: .45em;
}
.lcss-facts dd {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.5;
  color: var(--ss-ink);
}
.lcss-facts dd a {
  color: var(--ss-ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ss-line);
  transition: box-shadow .2s ease;
}
.lcss-facts dd a:hover { box-shadow: inset 0 -1px 0 var(--ss-ink); }
.lcss-facts dd a:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }

/* Two of these rows are counted numbers rather than stated ones, and they were counted in a
   survey year that is not this one. Tabular figures so a column of them lines up, and so a
   ratio's decimal point sits under the digits above it rather than beside them. */
.lcss-facts dd { font-variant-numeric: tabular-nums; }

/* A qualifier sitting under its own value — what a tuition range spans, and the school year it
   was published for. On its own line rather than in parentheses after the figure: a parent
   scanning the column wants the number first and cleanly, and a parenthetical pushes the
   figure's own width around depending on how long the qualifier happens to be. */
.lcss-qual {
  display: block;
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--ss-muted);
  font-variant-numeric: normal;
}

/* ---- the source line ----
   Inside the list, directly under the two counted rows, with no rule of its own: a rule would
   make it the sixth entry rather than a note on the two above it. It dates both numbers at
   once — said against each of them it would be the qualification arriving twice and reading
   as doubt.

   It sits between rows, so it needs more air below than above: closer to the numbers it
   belongs to than to the address that follows, or it reads as a heading for the address. */
.lcss-source {
  margin: 12px 0 26px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ss-muted);
  max-width: 46ch;
}

/* ---- the week ----
   Under the record's own rule and separated by a hairline, so the address and the hours read
   as two columns of one entry rather than two blocks that happen to be side by side. */
.lcss-week { border-left: 1px solid var(--ss-line); padding-left: 52px; }
.lcss-h3 {
  font-family: var(--ss-display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--ss-ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.lcss-hours { list-style: none; margin: 0; padding: 0; }
.lcss-hours li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ss-line);
  font-size: .95rem;
  /* The seven values line up on the colon and the digits only with tabular figures; in
     proportional ones the column reads as seven slightly different columns. */
  font-variant-numeric: tabular-nums;
  color: var(--ss-ink);
}
.lcss-hours li span:first-child { color: var(--ss-muted); }
/* Today is marked with a rule in the gold the site already uses for emphasis, not with a
   colour of its own and not with a badge. */
.lcss-hours li.is-today {
  margin-left: -14px;
  padding-left: 12px;
  box-shadow: inset 2px 0 0 var(--ss-gold);
  font-weight: 700;
}
.lcss-hours li.is-today span:first-child { color: var(--ss-ink); }

/* ================================================================ *
 * 3. WHERE IT SITS
 * ================================================================ */
.lcss-place { max-width: 1200px; margin: 0 auto; padding: 66px 40px 0; }

.lcss-h2 {
  font-family: var(--ss-display);
  font-weight: 700;
  font-size: clamp(1.28rem, 2.3vw, 1.8rem);
  line-height: 1.16;
  letter-spacing: -.008em;
  color: var(--ss-ink);
  margin: 0 0 10px;
  max-width: 36ch;
  text-wrap: balance;
}

.lcss-key {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ss-muted);
}
.lcss-key__i { display: inline-flex; align-items: center; gap: 8px; }
.lcss-key i { display: block; width: 9px; height: 9px; border-radius: 50%; }

.lcss-map {
  width: 100%;
  height: clamp(320px, 40vw, 470px);
  /* Leaflet paints its container #ddd by default, so a map still fetching tiles reads as a
     grey hole punched in the page rather than as paper waiting for ink. */
  background: var(--ss-paper);
  box-shadow: inset 0 0 0 1px var(--ss-line);
}

/* ⛔ THE BUG THAT MADE EVERY SCHOOL MAP LOOK BROKEN, and it was never a sizing bug.
   lc-motion.js blooms every <img> that had to travel by adding .lc-photo-in, whose keyframes
   animate `transform` and carry `both` fill. Leaflet positions each tile with an INLINE
   `transform: translate3d(...)`, and a CSS animation outranks an inline style — including
   after it finishes, because the retained final frame is `transform: none`. So every tile
   collapsed onto the pane origin and stacked in one corner, leaving the rest of the map as
   bare container colour with the markers, which are positioned the same way, scattered over
   it. The three tiles that ever appeared were the ones cached and therefore skipped.

   The map JS also stamps data-lc-seen on each tile as it is created, which stops the class
   being added at all; this rule is the belt to that pair of braces and covers a tile arriving
   by any route. It costs nothing visually — Leaflet fades its own tiles in. */
.lcss-map img { animation: none !important; }

/* ---- map furniture ---- */
.lc-schm-pin {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(29, 39, 33, .45);
}
/* The school the page is about reads as the subject and everything else as context: a ring
   rather than a second colour, because colour already carries the level. */
.lc-schm-pin--subject {
  width: 19px;
  height: 19px;
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(29, 39, 33, .22), 0 2px 7px rgba(29, 39, 33, .45);
}
.lc-schm-pop { display: block; color: var(--ss-ink, #1d2721); min-width: 156px; text-decoration: none; }
.lc-schm-pop__lvl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.lc-schm-pop__name { font-family: "Playfair Display", Georgia, serif; font-size: 15px; line-height: 1.2; margin: 4px 0 0; }
.lc-schm-pop__city { font-size: 11px; color: #6b7772; margin-top: 3px; }
.lc-schm-pop__link { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
a.lc-schm-pop:hover .lc-schm-pop__link { box-shadow: inset 0 -1px 0 currentColor; }

/* ================================================================ *
 * 4. THE CHAIN — the schools this one is joined to.
 *
 * A hairline grid rather than a row of bordered boxes: the 1px gaps show the rule colour
 * through, so the set reads as one ruled table of links and not as cards competing with the
 * photograph above. The level rides a coloured edge, which is what lets a card with a crest
 * and a card without still read as the same object.
 * ================================================================ */
.lcss-chain { max-width: 1200px; margin: 0 auto; padding: 66px 40px 0; }
.lcss-chain__b + .lcss-chain__b { margin-top: 48px; }

/* The rule between two cards is each card's own outline, drawn outside its box and meeting
   its neighbour's in the 1px gap. Painting the grid's background through the gaps is the
   other way to get the same hairline and it fills the ragged last row with a grey block —
   ten schools in a four-column grid leave two cells empty, and those cells then read as
   something that failed to load. */
.lcss-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1px;
  margin-top: 22px;
}

.lcss-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 18px 22px 18px 24px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--ss-line);
  transition: background .2s ease;
}
/* The crest's column is bought back as padding so every name in the set starts on the same
   line whether or not its school has a mark. Collapsing the column instead leaves a grid
   where a third of the rows begin further left, which reads as a mistake. */
.lcss-card--nocrest { grid-template-columns: minmax(0, 1fr); padding-left: 84px; }
.lcss-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--lvl, #86A9A6);
}
.lcss-card__crest { display: block; width: 46px; }
.lcss-card__crest .lc-logo { max-width: 46px; }
.lcss-card__name {
  display: block;
  font-family: var(--ss-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--ss-ink);
}
.lcss-card__meta {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ss-muted);
}
.lcss-card:hover { background: #fbfcfb; }
.lcss-card:hover .lcss-card__name {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lcss-card:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: -2px; }

/* ================================================================ *
 * 5. THE WAY BACK
 * ================================================================ */
.lcss-tail { max-width: 1200px; margin: 0 auto; padding: 56px 40px 0; }
.lcss-tail a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ss-muted);
  text-decoration: none;
  transition: color .2s ease;
}
/* Drawn from two borders rather than set as a character: a glyph handed to whatever font the
   platform substitutes comes back at that font's weight and size. */
.lcss-tail a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.lcss-tail a:hover { color: var(--ss-ink); }
.lcss-tail a:hover::before { transform: rotate(45deg) translate(-2px, 2px); }
.lcss-tail a:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 3px; }

/* ================================================================ *
 * NARROW
 *
 * The mobile header is shorter — it carries the logo alone, because navigation on a phone is
 * LCBottomBar — so the band needs less room over the picture, but it is still over it.
 * ================================================================ */
@media (max-width: 959px) {
  /* Every shape collapses to one column, the mark first. */
  .lcss-rec .lcss-rec__body,
  .lcss-rec--nohours .lcss-rec__body,
  .lcss-rec--mark .lcss-rec__body,
  .lcss-rec--mark.lcss-rec--nohours .lcss-rec__body { grid-template-columns: minmax(0, 1fr); }
  .lcss-facts,
  .lcss-rec--mark .lcss-facts { padding-right: 0; padding-left: 0; }
  .lcss-rec--nohours:not(.lcss-rec--mark) { padding-right: 20px; }
  /* Stacked, the hairline between the columns becomes a rule above the week. */
  .lcss-week {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--ss-line);
    margin-top: 34px;
    padding-top: 26px;
  }
}

@media (max-width: 767px) {
  .lcss-mast__in {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: calc(86px + var(--lc-storm-h, 0px)) 20px 34px;
  }
  .lcss-mast__wash {
    background:
      linear-gradient(to bottom, rgba(247, 246, 244, .95) 0, rgba(247, 246, 244, .5) 92px, rgba(247, 246, 244, .12) 168px),
      linear-gradient(to bottom, rgba(247, 246, 244, .3) 0, rgba(247, 246, 244, .72) 62%, rgba(247, 246, 244, .9) 100%);
  }
  .lcss-mast--noprint .lcss-mast__in { min-height: calc(360px + var(--lc-storm-h, 0px)); }
  .lcss-mast--townband .lcss-mast__in { min-height: 0; padding-bottom: 30px; }
  .lcss-mast__print { max-width: 100%; align-self: flex-start; }
  /* Taller than the desktop cap rather than shorter. A portrait phone shot capped by height
     is capped by its narrow side too, and at 230px it rendered about 130px wide on a 414
     screen — a stamp rather than a photograph. */
  .lcss-mast__printimg { max-height: 380px; }
  .lcss-title, .lcss-mast--noprint .lcss-title { max-width: 15ch; }
  .lcss-where, .lcss-mast--noprint .lcss-where { max-width: none; }
  .lcss-acts { gap: 8px; }
  .lcss-btn { padding: 12px 15px; font-size: 11px; letter-spacing: .1em; }

  .lcss-rec { padding: 44px 20px 0; }
  /* A DIFFERENT DECISION FROM THE DESKTOP ONE, and it has to be. A quarter of 414 is about a
     hundred pixels, which is smaller than the mark was before it was asked to grow; the full
     width is a billboard that outweighs the school's own name a few lines above it. So the
     mark is sized here in absolute terms — larger than the tucked marker it replaced, still
     clearly subordinate to the title — and left-aligned to the same edge as the labels under
     it and the h1 above it. */
  .lcss-rec__mark { margin-bottom: 22px; }
  .lcss-rec__mark .lc-logo { width: min(46vw, 190px); height: auto; max-height: 120px; }
  .lcss-rec--markonly .lcss-rec__mark { width: auto; }
  .lcss-rec__body { padding-top: 20px; }
  .lcss-row { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 14px 0; }
  .lcss-facts dt { padding-top: 0; }

  .lcss-place, .lcss-chain, .lcss-tail { padding-left: 20px; padding-right: 20px; }
  .lcss-place, .lcss-chain { padding-top: 48px; }
  .lcss-cards { grid-template-columns: minmax(0, 1fr); }
  .lcss-chain__b + .lcss-chain__b { margin-top: 36px; }
  .lcss-tail { padding-top: 44px; }
}

/* Parallax and travel cause real vestibular nausea; the page keeps its colour changes and
   drops everything that moves. */
@media (prefers-reduced-motion: reduce) {
  .lcss-btn, .lcss-tail a::before, .lcss-card, .lcss-facts dd a { transition: none; }
  .lcss-btn:active { transform: none; }
  .lcss-tail a:hover::before { transform: rotate(45deg); }
}