/* ================================================================= /cuisine/ ==
   The five sections below the hero: the featured mosaic, the browse index,
   the casual roster, the magazine spread and the closing band.

   What this replaces: six sections that were all the same shape — a centred
   eyebrow, a gold rule, a centred title, then three equal cards across. Four
   identical card grids stacked on top of each other reads as one widget bound
   to four datasets, which is precisely what it was. The fix is that each
   section here has a DIFFERENT shape, chosen from what its content is:
   photography leads the featured tables, a tight index carries the filters,
   a roster carries the casual list, and the magazine gets a real lead story.

   Colour is inherited, not invented. The previous version introduced a gold
   (#c9a96e) and a navy (#1a1a2e) that exist nowhere else on the site; every
   value below is the theme's own — ink #2d2e33, muted #6c6d74, rule #e5e5e7,
   accent #e44e56 — so the page reads as this magazine rather than a template
   dropped into it. Type is the theme's PT Serif and Montserrat for the same
   reason; the old page hard-coded Georgia.

   Loaded only on /cuisine/ by lc-cuisine-hub.php.
   ========================================================================== */

:root {
  --cui-ink:    #2d2e33;
  --cui-muted:  #6c6d74;
  --cui-line:   #e5e5e7;
  --cui-accent: #e44e56;
  --cui-paper:  #f6f4f1;          /* a warmer neighbour of the theme's #efefef */
  --cui-well:   #16130f;          /* the colour a photo fades into, never #000 */
  --cui-ease:   cubic-bezier(.22,.72,0,1);
  --cui-serif:  'PT Serif', Georgia, 'Times New Roman', serif;
  --cui-sans:   Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* -------------------------------------------------------------- the eyebrow --
   One accent rule and one small word above each section title, left-aligned.
   The old page centred this ornament and repeated it six times with a 40px
   <hr> under it; centring everything is what made six different sections read
   as one repeating stamp. Left is also where the eye already is. */
.lc-cui-eyebrow {
  font-family: var(--cui-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cui-accent);
}
.lc-cui-eyebrow::after {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 12px;
  background: var(--cui-accent);
}
/* Measure lives here rather than on YOOtheme's max-width control, which emits
   uk-width-* — a FIXED width, not a maximum. */
.lc-cui-lede { color: #4c5057; }
.lc-cui-lede p { max-width: 62ch; }

/* Every number on this page — ratings, review counts, totals — is tabular so
   columns of them line up instead of shimmering. */
.lc-cui-num { font-variant-numeric: tabular-nums; }

/* The markup uses <span> inside <a> so a whole tile stays one valid link
   target. An inline span ignores aspect-ratio and overflow, which silently
   collapses a figure to zero height — the magazine lead shipped with no
   photograph for exactly this reason. Blockify them once, here, rather than
   remembering it at six call sites. */
.lc-cui-tile__body,
.lc-cui-idx__body,
.lc-cui-row__fig, .lc-cui-row__text,
.lc-cui-lead__fig,
.lc-cui-story__fig, .lc-cui-story__text { display: block; }

/* ======================================================= 1. FEATURED TABLES ==
   Six restaurants, not six equal cards. The lead cell is a double square
   because the contact sheet is honest: Iron Rose and River House are real
   dining-room photographs and the rest are a mix of storefronts and signage.
   Sizing by photograph quality is the whole job of a mosaic — it puts the
   picture that can carry a half-second glance in the cell that gets one. */
/* Three columns, not four: six items then fill nine cells exactly — a 2x2
   lead, two stacked beside it, three across the bottom. A four-column grid
   leaves three cells empty at the end, and an empty cell in a mosaic reads as
   a loading bug rather than as breathing room. */
.lc-cui-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.lc-cui-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cui-well);
  text-decoration: none;
  isolation: isolate;
}
.lc-cui-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* A hair of desaturation pulls twelve photographs shot on twelve different
     phones into something that looks curated rather than collected. */
  filter: saturate(.94);
  transition: transform 1.1s var(--cui-ease), filter .55s ease;
}
/* Bottom-up, vertical, desaturated. A 45-degree saturated gradient is the
   naive tell; a legibility scrim should go unnoticed. */
.lc-cui-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(22,19,15,.90) 0%, rgba(22,19,15,.48) 34%,
    rgba(22,19,15,.08) 66%, rgba(22,19,15,0) 100%);
}
/* The small cells need a taller scrim than the lead does. A name that wraps to
   two lines climbs out of a 34%-tall dark zone and lands on whatever the photo
   is doing up there — a whitewashed wall at Late Air, a lit ceiling at
   Hudson's — and white type on that is unreadable. Measured on a phone, where
   the cells are shortest and the wrapping is worst. */
.lc-cui-tile:not(.lc-cui-tile--lead)::after {
  background: linear-gradient(to top,
    rgba(22,19,15,.92) 0%, rgba(22,19,15,.70) 40%,
    rgba(22,19,15,.30) 72%, rgba(22,19,15,.04) 100%);
}

.lc-cui-tile__body {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #fff;
}
.lc-cui-tile__name {
  display: block;
  font-family: var(--cui-serif);
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
}
.lc-cui-tile__meta {
  display: block;
  margin-top: 7px;
  font-family: var(--cui-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.74);
}
/* The rating is the one place the accent appears over a photograph, which is
   what keeps it readable as a score rather than as more caption. */
.lc-cui-tile__score {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--cui-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}
.lc-cui-tile__score b {
  color: var(--cui-accent);
  font-weight: 700;
  padding-right: 5px;
}
.lc-cui-tile__score span { font-weight: 400; color: rgba(255,255,255,.62); }

/* the lead cell */
.lc-cui-tile--lead {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}
.lc-cui-tile--lead .lc-cui-tile__body { left: 32px; right: 32px; bottom: 32px; }
.lc-cui-tile--lead .lc-cui-tile__name { font-size: 38px; line-height: 1.08; }
.lc-cui-tile--lead .lc-cui-tile__note {
  display: block;
  margin-top: 12px;
  max-width: 34em;
  font-family: var(--cui-sans);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}
.lc-cui-tile__note { display: none; }   /* only the lead has room for prose */

/* hover — one slow push in. Nothing bounces, nothing lifts. */
.lc-cui-tile:hover img,
.lc-cui-tile:focus-visible img { transform: scale(1.055); filter: saturate(1); }
.lc-cui-tile:focus-visible { outline: 2px solid var(--cui-accent); outline-offset: 3px; }

/* ========================================================== 2. BROWSE INDEX ==
   Navigation, so it is shaped like an index and not like six more cards: a
   single tight row of small tiles. Each carries a real count queried from the
   library, because "Seafood" is a guess and "Seafood — 34 places" is an
   answer. The band sits on paper so it reads as a rule between two chapters
   rather than as a third gallery. */
/* Doubled up with .uk-section deliberately. YOOtheme puts uk-section-default
   on the very same element as the custom class, and a single-class background
   rule loses the tie — the band shipped white. Two classes wins it without an
   !important that a later section would have to fight. */
.uk-section.lc-cui-indexsection { background: var(--cui-paper); }

.lc-cui-index {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.lc-cui-idx {
  position: relative;
  display: block;
  overflow: hidden;
  /* Portrait, not square. At a sixth of the container a square tile is ~190px
     and reads as a thumbnail lost under a 40px headline; the taller frame also
     gives a two-word label somewhere to wrap that is not on top of its count. */
  aspect-ratio: 4 / 5;
  background: var(--cui-well);
  text-decoration: none;
  isolation: isolate;
}
.lc-cui-idx img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.9) brightness(.92);
  transition: transform 1s var(--cui-ease), filter .5s ease;
}
.lc-cui-idx::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(22,19,15,.88) 0%, rgba(22,19,15,.4) 46%, rgba(22,19,15,.06) 100%);
}
.lc-cui-idx__body { position: absolute; z-index: 2; left: 14px; right: 12px; bottom: 14px; }
.lc-cui-idx__label {
  display: block;
  font-family: var(--cui-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.lc-cui-idx__count {
  display: block;
  margin-top: 5px;
  font-family: var(--cui-sans);
  font-size: 11px;
  color: rgba(255,255,255,.66);
}
.lc-cui-idx:hover img,
.lc-cui-idx:focus-visible img { transform: scale(1.07); filter: saturate(1) brightness(1); }
.lc-cui-idx:focus-visible { outline: 2px solid var(--cui-accent); outline-offset: 3px; }

/* The sixth cell is a colour field rather than a sixth photograph — the same
   device the weddings hub uses. It gives the eye somewhere to rest in a row
   of five pictures, it is where "all of them" lives, and it means no image on
   this page has to appear twice to fill a hole. */
.lc-cui-idx--all {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 16px;
  background: var(--cui-ink);
}
.lc-cui-idx--all::after { display: none; }
.lc-cui-idx--all .lc-cui-idx__label { color: #fff; }
.lc-cui-idx--all .lc-cui-idx__count {
  margin-top: 8px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}
.lc-cui-idx--all .lc-cui-idx__go {
  display: block;
  margin-top: 12px;
  font-family: var(--cui-sans);
  font-size: 15px;
  color: var(--cui-accent);
  transition: transform .35s var(--cui-ease);
}
.lc-cui-idx--all:hover .lc-cui-idx__go { transform: translateX(8px); }

/* ========================================================= 3. CASUAL ROSTER ==
   A list, not a gallery — and the photographs are the reason. A burger shack
   in a strip mall and a pub's roadside sign are honest pictures of honest
   places, but blown up to card size they look like a directory scrape. At
   thumbnail size they do the job a thumbnail is for: telling you which one
   this is. The row also fits the content's meaning; counter service does not
   want a glossy card. */
.lc-cui-roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 44px;
}
.lc-cui-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--cui-line);
  text-decoration: none;
  transition: background .2s ease;
}
/* Bleed the hover field past the text so the row reads as one target. */
.lc-cui-row:hover { background: var(--cui-paper); box-shadow: 0 0 0 14px var(--cui-paper); }
.lc-cui-row:focus-visible { outline: 2px solid var(--cui-accent); outline-offset: 2px; }

.lc-cui-row__fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cui-well);
}
.lc-cui-row__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92);
  transition: transform .8s var(--cui-ease);
}
.lc-cui-row:hover .lc-cui-row__fig img { transform: scale(1.06); }

.lc-cui-row__name {
  display: block;
  font-family: var(--cui-serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--cui-ink);
}
.lc-cui-row__meta {
  display: block;
  margin-top: 5px;
  font-family: var(--cui-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cui-muted);
}
.lc-cui-row__score {
  display: block;
  margin-top: 8px;
  font-family: var(--cui-sans);
  font-size: 12px;
  color: var(--cui-muted);
}
.lc-cui-row__score b { color: var(--cui-accent); padding-right: 5px; }

.lc-cui-rosterfoot {
  margin-top: 30px;
  font-family: var(--cui-sans);
  font-size: 12px;
  color: var(--cui-muted);
}
.lc-cui-rosterfoot a {
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cui-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cui-accent);
  padding-bottom: 2px;
  margin-right: 26px;
  transition: color .2s ease;
}
.lc-cui-rosterfoot a:hover { color: var(--cui-accent); }

/* ============================================================= 4. MAGAZINE ==
   Six stories laid out as six identical cards says all six are equally worth
   reading, which is not a claim anyone believes. A lead and an index says an
   editor looked. The lead is the newest guide; the rest are a dated list. */
.uk-section.lc-cui-storysection { background: var(--cui-paper); }

.lc-cui-stories {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 52px;
  align-items: start;
}

.lc-cui-lead { display: block; text-decoration: none; }
.lc-cui-lead__fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--cui-well);
}
.lc-cui-lead__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.94);
  transition: transform 1.1s var(--cui-ease);
}
.lc-cui-lead:hover .lc-cui-lead__fig img { transform: scale(1.04); }
.lc-cui-lead__kicker {
  display: block;
  margin-top: 20px;
  font-family: var(--cui-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cui-accent);
}
.lc-cui-lead__title {
  display: block;
  margin-top: 12px;
  font-family: var(--cui-serif);
  font-size: 31px;
  line-height: 1.2;
  color: var(--cui-ink);
  text-wrap: balance;
}
.lc-cui-lead__dek {
  display: block;
  margin-top: 14px;
  max-width: 54ch;
  font-family: var(--cui-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cui-muted);
}
.lc-cui-lead:hover .lc-cui-lead__title { color: var(--cui-accent); }
.lc-cui-lead:focus-visible { outline: 2px solid var(--cui-accent); outline-offset: 4px; }

.lc-cui-slist { border-top: 1px solid var(--cui-line); }
.lc-cui-story {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--cui-line);
  text-decoration: none;
}
.lc-cui-story__title {
  display: block;
  font-family: var(--cui-serif);
  font-size: 16px;
  line-height: 1.35;
  color: var(--cui-ink);
  transition: color .2s ease;
  text-wrap: pretty;
}
.lc-cui-story__date {
  display: block;
  margin-top: 7px;
  font-family: var(--cui-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cui-muted);
}
.lc-cui-story__fig {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cui-well);
}
.lc-cui-story__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92);
  transition: transform .8s var(--cui-ease);
}
.lc-cui-story:hover .lc-cui-story__title { color: var(--cui-accent); }
.lc-cui-story:hover .lc-cui-story__fig img { transform: scale(1.06); }
.lc-cui-story:focus-visible { outline: 2px solid var(--cui-accent); outline-offset: 2px; }

/* =============================================================== 5. CLOSER ==
   The old closer was a flat dark band dropped into a light page — the
   copy-paste tell. This one is a photograph, full bleed, which is the same
   move as the hero and therefore reads as the page closing rather than as a
   different page starting. */
.lc-cui-closersection { padding-top: 0 !important; padding-bottom: 0 !important; }
.lc-cui-closersection .uk-container { padding-left: 0; padding-right: 0; max-width: none; }

.lc-cui-closer {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 380px;
  background: var(--cui-well);
}
.lc-cui-closer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92);
}
.lc-cui-closer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(22,19,15,.86) 0%, rgba(22,19,15,.72) 44%, rgba(22,19,15,.34) 100%);
}
.lc-cui-closer__inner {
  position: relative;
  z-index: 2;
  padding: 64px 6vw;
  max-width: 720px;
}
.lc-cui-closer__inner .lc-cui-eyebrow { color: rgba(255,255,255,.7); }
.lc-cui-closer__inner .lc-cui-eyebrow::after { background: var(--cui-accent); }
.lc-cui-closer__t {
  margin: 22px 0 0;
  font-family: var(--cui-serif);
  font-size: 40px;
  line-height: 1.12;
  color: #fff;
}
.lc-cui-closer__p {
  margin: 16px 0 0;
  max-width: 46ch;
  font-family: var(--cui-sans);
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.84);
}
.lc-cui-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 14px 28px;
  background: #fff;
  color: var(--cui-ink);
  font-family: var(--cui-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s var(--cui-ease);
}
.lc-cui-btn:hover { background: var(--cui-accent); color: #fff; transform: translateY(-2px); }
.lc-cui-btn:active { transform: translateY(0); }
.lc-cui-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ------------------------------------------------------ the hero action pair --
   The hero is a native YOOtheme background-image section, so its two buttons
   are plain UIkit inline-blocks sitting in a block wrapper: they lay out in
   inline flow with nothing between them but the word space in the markup.

   That word space measures 3.89px, so the pair needs 247.70 + 3.89 + 177.08 =
   428.67px to hold one line, against a 384px column at 414px of viewport. The
   second button therefore wraps — onto a line box exactly as tall as the
   button itself, which leaves zero separation: both edges measured at y=582.70,
   exactly coincident. The outline button's 1px top border then paints into the
   filled button's white fill and disappears, so the outline reads as a
   three-sided open-topped box hanging off the slab above rather than as its own
   control. Both buttons are border-box, so this is inline flow, not the
   box-sizing mismatch that produced a similar overflow on the tee-time page.

   A wrapping flex row replaces the word space with a real gap that applies in
   both axes: the pair still sits side by side wherever it fits and separates
   properly where it does not, with no width breakpoint to keep in sync with
   the button labels. Widths are left intrinsic on purpose — the eyebrow,
   headline and lede above are all left-aligned with ragged right edges, so
   buttons sized to their own words belong to that rhythm, where two equal
   full-width bars would be the only justified element in the column.

   Applied at every width, not just where the pair wraps. The word space is
   the separation on one line too, and 3.89px between a filled slab and an
   outlined box is close enough that the two read as a single segmented bar
   with a seam rather than as a primary and a secondary choice. The same gap
   value fixes both readings, and keeping it unconditional means there is no
   step at the breakpoint where the spacing visibly changes.

   `.lc-hero-scrim` is a shared class that other heroes on the site also carry;
   this rule is page-scoped only because this file is enqueued on /cuisine/
   alone. Moving it into a site-wide sheet would restyle those heroes too. */
.lc-hero-scrim .uk-margin-medium-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================================================= breakpoints ==*/
@media (max-width: 1199px) {
  .lc-cui-tile--lead .lc-cui-tile__name { font-size: 30px; }
  .lc-cui-index { grid-template-columns: repeat(3, 1fr); }
  .lc-cui-stories { grid-template-columns: 1fr; gap: 40px; }
  .lc-cui-lead__title { font-size: 27px; }
  .lc-cui-closer__t { font-size: 33px; }
}

@media (max-width: 959px) {
  .lc-cui-mosaic { grid-template-columns: repeat(2, 1fr); }
  .lc-cui-tile--lead { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
  /* Six items in two columns leaves the last one stranded at half width on a
     row of its own. Widening it closes the grid instead of looking truncated. */
  .lc-cui-tile:last-child { grid-column: span 2; aspect-ratio: 16 / 10; }
  .lc-cui-roster { grid-template-columns: 1fr; gap: 0; }
  /* The bled hover field has to go with the single column: at full width it
     paints over the section's own padding and the row looks like a bug. */
  .lc-cui-row:hover { box-shadow: none; }
  .lc-cui-closer { min-height: 0; }
  .lc-cui-closer__inner { padding: 52px 34px; }
}

@media (max-width: 639px) {
  .lc-cui-mosaic { gap: 8px; }
  .lc-cui-tile__body { left: 13px; right: 13px; bottom: 14px; }
  .lc-cui-tile__name { font-size: 15px; }
  .lc-cui-tile--lead .lc-cui-tile__body { left: 18px; right: 18px; bottom: 20px; }
  .lc-cui-tile--lead .lc-cui-tile__name { font-size: 25px; }
  .lc-cui-tile--lead .lc-cui-tile__note { display: none; }
  .lc-cui-index { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lc-cui-row { grid-template-columns: 72px 1fr; gap: 16px; }
  .lc-cui-lead__title { font-size: 23px; }
  .lc-cui-story { grid-template-columns: 1fr 64px; gap: 14px; }
  .lc-cui-closer__t { font-size: 27px; }
  .lc-cui-rosterfoot a { display: block; margin: 0 0 12px; }
}

/* ========================================================== reduced motion ==
   Every transform above is decoration on a layout that is already correct, so
   the honest branch removes the movement and keeps every state reachable. */
@media (prefers-reduced-motion: reduce) {
  .lc-cui-tile img,
  .lc-cui-idx img,
  .lc-cui-row__fig img,
  .lc-cui-lead__fig img,
  .lc-cui-story__fig img,
  .lc-cui-btn { transition: none !important; }
  .lc-cui-tile:hover img,
  .lc-cui-idx:hover img,
  .lc-cui-row:hover .lc-cui-row__fig img,
  .lc-cui-lead:hover .lc-cui-lead__fig img,
  .lc-cui-story:hover .lc-cui-story__fig img { transform: none; }
  .lc-cui-btn:hover { transform: none; }
}

/* ===================================== TRIAL: desktop section rhythm ==
   TRIAL BLOCK — delete this whole block to restore the original spacing.

   The four body sections are uk-section-large, which is 140px top AND
   bottom above 960px, so each seam between them is 280px of empty page —
   roughly a third of a 900px viewport, four times down the page. This
   trims them to 110px, taking each seam to 220px and the document about
   240px shorter, to see on screen whether tighter reads better.

   Deliberately partial. The hero is untouched: it is a background-image
   section, so trimming its padding re-crops the photograph rather than
   just removing whitespace, which would confuse a comparison meant to be
   about spacing alone. The closing band is untouched because it already
   sits at 0.

   Doubled with .uk-section for the reason documented at the browse index
   above — this file loads before theme.css, so specificity, not source
   order, is what carries the override.

   Above 960px only. Below that UIkit already serves 70px, which is right
   for a phone and is left alone. */
@media (min-width: 960px) {
  .uk-section.lc-cui-tablesection,
  .uk-section.lc-cui-indexsection,
  .uk-section.lc-cui-rostersection,
  .uk-section.lc-cui-storysection {
    padding-top: 110px;
    padding-bottom: 110px;
  }
}
/* =================================== end TRIAL: desktop section rhythm == */