/* ============================================================ lc-guide.css ==
   The three small guide fronts — /daufuskie/, /golf/, /private-aviation/.

   What this replaces: every section on all three pages opened with the same
   hand-written block —

     <div style="border-top:2px solid #111;padding-top:10px">
       <p style="font-size:11px;letter-spacing:.3em;text-transform:uppercase;
                 font-weight:700;color:#111">TITLE<span style="float:right">meta</span></p></div>

   fourteen copies of it, inline, in raw html blocks. It is legible but it is
   not typography: a floated span, a 2px slab rule, and #111 — a black the site
   uses nowhere else. The pages read as a stack of plugins because every band
   announces itself in exactly the same voice at exactly the same size.

   The replacement is a department rule, the way an index page in a magazine
   sets one: a hairline with an accent tick sitting on it, the section name in
   the theme's display serif, and the note that used to float right now set as
   a small label on the same baseline. One component, three pages.

   Tokens are the theme's own, read off the live stylesheet rather than
   guessed: Playfair Display is what h1/h2 already resolve to, PT Serif is the
   body face, and #2d2e33 / #6c6d74 / #e5e5e7 are the ink, muted and line the
   rest of the site is already set in. The accent is the house red, not a
   fourth palette invented for these pages.

   Loaded on those three pages only, by mu-plugins/lc-guide.php.
   ========================================================================== */

:root {
  --gd-ink:    #2d2e33;
  --gd-muted:  #6c6d74;
  --gd-line:   #e5e5e7;
  --gd-accent: #e44e56;
  --gd-well:   #14161a;          /* what a photograph fades into. Never #000. */
  --gd-paper:  #f7f6f4;
  --gd-ease:   cubic-bezier(.22,.72,0,1);
  --gd-serif:  'Playfair Display', 'PT Serif', Georgia, serif;
  --gd-sans:   -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================ the hero ==
   The house formula puts the photograph on the SECTION and tucks the header
   over it. Two things then need saying in CSS rather than in section props.

   1. The old heroes dimmed the whole picture with media_overlay rgba(0,0,0,.3),
      which greys the sky as hard as it greys the grass and leaves the frame
      muddy. lc-motion.css's .lc-hero-scrim is the bottom-up gradient that
      darkens only where the type actually sits; it is applied by class in the
      layout, and nothing more is needed here.
   2. The lede wants a measure. YOOtheme's max-width control emits
      uk-width-*, which is a FIXED width, so the only honest place to set a
      line length is here. */
.lc-gd-hero .uk-h1,
.lc-gd-hero h1 {
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(10,14,12,.34);
}
.lc-gd-hero .lc-gd-kicker {
  margin: 0 0 .5em;
  font-family: var(--gd-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
}
.lc-gd-hero .lc-gd-lede {
  margin: .55em 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.62;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 16px rgba(10,14,12,.4);
}

/* ==================================================== the department rule ==
   Baseline-aligned: name on the left in the display serif, note on the right
   in the label sans. The accent tick sits ON the hairline rather than under
   the text, so the eye finds the start of each band without another 2px slab
   shouting at it. */
.lc-gd-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--gd-line);
}
.lc-gd-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--gd-accent);
}
.lc-gd-head__t {
  /* The name gets the room. One of these notes runs to eight words ("phones,
     hours & websites — updated from live listings"), and an unshrinkable note
     would break the title across three lines to make space for it. */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--gd-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--gd-ink);
}
.lc-gd-head__m {
  flex: 0 1 auto;
  max-width: 40%;
  text-align: right;
  font-family: var(--gd-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gd-muted);
  text-wrap: balance;
}

/* =============================================================== the spread ==
   Daufuskie's "Know Before You Go" was two columns of running text on white —
   the one band on the page with nothing to look at, carrying the five facts
   that actually stop a visitor getting stranded. Same five facts, but given a
   photograph and a number each, so they read as instructions rather than as
   paragraph five of a brochure.

   Full-bleed on purpose: it is the only place on the page where the white
   stops, which is what keeps it from reading as a second hero. */
.lc-gd-spreadsection { padding-top: 0 !important; padding-bottom: 0 !important; }
.lc-gd-spreadsection .uk-container { max-width: none; padding-left: 0; padding-right: 0; }

.lc-gd-spread {
  display: grid;
  grid-template-columns: 6fr 6fr;
  align-items: stretch;
  background: var(--gd-well);
}
.lc-gd-spread__fig {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background: var(--gd-well);
}
.lc-gd-spread__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95);
}
/* The credit sits on the picture rather than under it — a caption under a
   full-bleed figure gets orphaned against the panel's top edge. */
.lc-gd-spread__cap {
  position: absolute;
  z-index: 2;
  left: 22px;
  bottom: 18px;
  padding-left: 12px;
  border-left: 2px solid var(--gd-accent);
  font-family: var(--gd-sans);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  text-shadow: 0 1px 10px rgba(0,0,0,.6);
}
.lc-gd-spread__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 68px 7% 68px 60px;
  color: #fff;
}
.lc-gd-spread__kicker {
  font-family: var(--gd-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gd-accent);
}
.lc-gd-spread__title {
  margin: 18px 0 0;
  font-family: var(--gd-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.12;
  color: #fff;
  /* At 1280 this dropped a single word onto its own line. */
  text-wrap: balance;
}

/* The five facts. A hanging number in the accent, a lead clause in white, the
   rest in a quieter grey — so the band can be read at a glance or in full, and
   both are useful. */
.lc-gd-facts { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: gdfact; }
.lc-gd-facts li {
  position: relative;
  counter-increment: gdfact;
  padding: 0 0 0 44px;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.66;
  color: rgba(255,255,255,.74);
}
.lc-gd-facts li:last-child { margin-bottom: 0; }
.lc-gd-facts li::before {
  content: counter(gdfact, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--gd-sans);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--gd-accent);
}
.lc-gd-facts strong { color: #fff; font-weight: 600; }
.lc-gd-facts em { color: rgba(255,255,255,.86); }
.lc-gd-facts a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.42);
  transition: border-color .22s ease;
}
.lc-gd-facts a:hover { border-bottom-color: var(--gd-accent); }
.lc-gd-facts a:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; }

/* ========================================================== the golf CTA ==
   Was 12px-radius pills and an 8px-radius white button written inline in
   lc-golf-finder.php — a radius the rest of the site uses nowhere, on the one
   band that carries the page's actual conversion. Square, ink-on-paper, and
   the label in the same sans as every other label on these three pages. */
.lcgf-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 26px 30px;
  background: var(--gd-well);
}
.lcgf-cta__t {
  margin: 0;
  font-family: var(--gd-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}
.lcgf-cta__s {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
}
.lcgf-cta__b {
  flex: none;
  padding: 15px 28px;
  background: #fff;
  color: var(--gd-ink);
  font-family: var(--gd-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .24s ease, color .24s ease, transform .24s var(--gd-ease);
}
.lcgf-cta__b:hover  { background: var(--gd-accent); color: #fff; transform: translateY(-2px); }
.lcgf-cta__b:active { transform: translateY(0); }
.lcgf-cta__b:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 3px; }

@media (max-width: 639px) {
  .lcgf-cta { padding: 22px 20px; }
  .lcgf-cta__t { font-size: 20px; }
  .lcgf-cta__b { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lcgf-cta__b { transition: none !important; }
  .lcgf-cta__b:hover { transform: none; }
}

/* ================================================================ the tail ==
   The four cross-links that closed the page were centred grey text with four
   underlines in it — a footer pretending to be a section. Set as labels on a
   paper band they at least look chosen. */
.lc-gd-tail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 34px;
}
.lc-gd-tail__l {
  width: 100%;
  text-align: center;
  font-family: var(--gd-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gd-muted);
}
.lc-gd-tail a {
  font-family: var(--gd-serif);
  font-size: 20px;
  color: var(--gd-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .22s ease, border-color .22s ease;
}
.lc-gd-tail a:hover { color: var(--gd-accent); border-bottom-color: var(--gd-accent); }
.lc-gd-tail a:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 4px; }

/* ============================================================ breakpoints ==*/
@media (max-width: 1199px) {
  .lc-gd-spread__title { font-size: 33px; }
  .lc-gd-spread__panel { padding: 54px 44px; }
  .lc-gd-head__t { font-size: 24px; }
}

@media (max-width: 959px) {
  .lc-gd-spread { grid-template-columns: 1fr; }
  /* min-height MUST drop to 0 alongside an aspect-ratio, or the ratio derives
     the WIDTH from the height and the figure grows wider than the phone. */
  .lc-gd-spread__fig { min-height: 0; aspect-ratio: 16 / 9; }
  .lc-gd-spread__panel { padding: 44px 30px 52px; }
  .lc-gd-hero .lc-gd-lede { font-size: 15px; }
}

@media (max-width: 639px) {
  /* The note that sat on the right has nowhere to go on a phone, so it drops
     under the name rather than squeezing the title to two words a line. */
  .lc-gd-head { flex-wrap: wrap; gap: 4px; }
  .lc-gd-head__t { font-size: 21px; width: 100%; }
  .lc-gd-head__m { font-size: 10px; letter-spacing: .14em; }
  .lc-gd-spread__title { font-size: 27px; }
  .lc-gd-spread__fig { aspect-ratio: 4 / 3; }
  .lc-gd-facts li { padding-left: 36px; font-size: 13.5px; }
  .lc-gd-tail { gap: 8px 22px; }
  .lc-gd-tail a { font-size: 17px; }
  .lc-gd-hero .lc-gd-kicker { font-size: 10px; letter-spacing: .2em; }
}

/* ========================================================= reduced motion ==*/
@media (prefers-reduced-motion: reduce) {
  .lc-gd-tail a,
  .lc-gd-facts a { transition: none !important; }
}