/* Johnny's Beach Bungalow — Playa Avellanas
   Palette pulled from the property itself: the turquoise pool, the hardwood
   decks, the thatch, and the sand. */
:root{
  --sand:#f7f3ec; --sand-2:#efe8dc; --ink:#22201d; --ink-2:#55504a;
  --teal:#1d7f84; --teal-d:#155f63; --teal-l:#e6f2f2;
  --wood:#8a5a34; --thatch:#c8a86b; --line:#e2d9cb; --white:#fff;
  --shadow:0 1px 2px rgba(34,32,29,.06),0 8px 24px rgba(34,32,29,.08);
  --wrap:1180px; --r:14px;
  /* One height for the hero window AND the pinned image behind it. If they
     disagree, the bottom of the photo hides behind the content that scrolls
     over it - which is exactly where the pool and loungers are. */
  --hero-h:min(88vh, 820px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);
  font:400 17px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.15;
  margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1.1em}
a{color:var(--teal-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;z-index:99;border-radius:8px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,243,236,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:84px}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
/* "Johnny's" is tracked out so it measures the same width as the
   "BEACH BUNGALOW" line beneath it - the two read as one stacked lockup. */
.brand-name{font-family:Fraunces,serif;font-size:2rem;font-weight:600;color:var(--ink);
  letter-spacing:.075em;line-height:1.02}
.brand-sub{font-size:.9rem;letter-spacing:.155em;text-transform:uppercase;
  color:var(--ink-2);margin-top:5px;font-weight:500}
.nav{margin-left:auto;display:flex;gap:19px;align-items:center}
.nav a{color:var(--ink);font-size:.93rem;font-weight:500}
.nav-toggle,.nav-burger{display:none}

/* buttons */
.btn{display:inline-block;padding:13px 24px;border-radius:999px;font-weight:600;
  font-size:.95rem;border:1.5px solid transparent;cursor:pointer;transition:.15s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-d)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{padding:9px 18px;font-size:.88rem}
.hero-copy .btn-ghost{border-color:#fff;color:#fff}
.hero-copy .btn-ghost:hover{background:#fff;color:var(--ink)}

/* hero — the image is pinned to the viewport and the page scrolls over it.

   The sibling sites use background-attachment:fixed, which iOS Safari simply
   ignores. Pinning a real <img> instead keeps the effect on iPhone AND keeps
   the responsive srcset, so a phone still downloads the 800px file rather than
   a desktop-sized background. Negative z-index puts it above the canvas
   background but below every section, and the sections are opaque so they
   wipe over it as you scroll. */
/* The hero window and the pinned image are the same height, so the whole
   frame is visible: roofline at the top, pool and loungers at the bottom. */
.hero{position:relative;min-height:var(--hero-h);display:flex;align-items:flex-end}
.hero picture{position:fixed;top:0;left:0;width:100%;height:var(--hero-h);z-index:-2;
  display:block;pointer-events:none}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center center}
.hero::after{content:"";position:fixed;top:0;left:0;width:100%;height:var(--hero-h);z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.62) 100%)}

/* Sections must be opaque, or the pinned image shows through them. */
main > section{position:relative;z-index:1;background:var(--sand)}
.hero-copy{position:relative;z-index:2;color:#fff;padding:0 22px 64px;max-width:760px}
.hero-copy h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-copy p{font-size:1.15rem;opacity:.95;margin-bottom:1.4em}
.eyebrow{display:inline-block;max-width:100%;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(4px)}

/* sections */
section{padding:clamp(40px,5.2vw,72px) 0;background:var(--sand)}
/* Two sections in a row each contribute their own vertical padding, so the gap
   between them was double the intended rhythm - 172px at desktop. Where the two
   share a background there is no colour band to justify it and it reads as a
   hole in the page, which is exactly how it looked. Collapse the second one's
   top padding whenever the neighbour is the same colour. */
section + section,
.section-sand + .section-sand,
.section-teal + .section-teal{padding-top:0}
/* ...but a genuine colour change should keep its padding: that is the band. */
section + .section-sand,
section + .section-teal,
section + .bg-scenic,
.section-sand + section,
.section-sand + .section-teal,
.section-sand + .bg-scenic,
.section-teal + section,
.section-teal + .section-sand,
.section-teal + .bg-scenic,
.bg-scenic + section,
.bg-scenic + .section-sand,
.bg-scenic + .section-teal{padding-top:clamp(40px,5.2vw,72px)}
.section-sand{background:var(--sand-2)}
.section-teal{background:var(--teal-l)}
.lede{font-size:1.18rem;color:var(--ink-2);max-width:62ch}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  margin:34px 0 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center}
.stat b{display:block;font-family:Fraunces,serif;font-size:1.9rem;color:var(--teal-d);line-height:1}
.stat span{font-size:.85rem;color:var(--ink-2);display:block;margin-top:6px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);transition:.18s;color:inherit;display:block}
.card:hover{transform:translateY(-3px);text-decoration:none;box-shadow:0 4px 8px rgba(34,32,29,.08),0 16px 40px rgba(34,32,29,.12)}
.card-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand-2)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-body{padding:20px 22px 24px}
.card-body h3{margin-bottom:.25em}
.card.feature .card-img{aspect-ratio:16/10}
.card.feature h3{font-size:1.1rem;line-height:1.25}
.card.feature .more{display:inline-block;margin-top:.7em;font-size:.86rem;
  font-weight:600;color:var(--teal-d)}
.card.feature:hover .more{text-decoration:underline}
.feature-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.tagline{color:var(--ink-2);margin-bottom:.6em}
.meta{font-size:.87rem;color:var(--teal-d);font-weight:500;margin:0}

/* gallery grid */
/* Was auto-fill grid columns, which hard-aligns every row to the left. Any
   gallery whose photo count is not a multiple of the column count left a hole
   on the right of the last row - surf has 5 photos, yoga-platform has 4, and a
   limit cannot invent more. Flex with a fixed basis and a centred last row puts
   the orphans under the middle of the row above, which reads as deliberate
   instead of broken, and works at every column count. */
.grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* grow to fill the row, but never wider than one column - so rows fill at every
   breakpoint and a last-row orphan stays the same size as its neighbours
   instead of ballooning to full width. */
.grid-item{flex:1 1 260px;max-width:100%;margin:0;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--sand-2)}
/* basis must equal the cap, or the smaller basis lets an extra tile squeeze
   into the row and the column count stops matching the cap. */
@media(min-width:700px){.grid-item{flex-basis:calc(50% - 7px);max-width:calc(50% - 7px)}}
@media(min-width:1040px){.grid-item{flex-basis:calc(33.333% - 10px);max-width:calc(33.333% - 10px)}}
/* .wide used to span two columns. With auto-fill columns that leaves a hole
   in the row whenever a wide tile lands anywhere but the start, which is what
   made these galleries look broken. A landscape photo does not need to be
   twice as big to read; uniform tiles do not go ragged. Kept as a no-op so the
   macro's class does not need changing. */
.grid-item.wide{grid-column:auto}
.grid-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.grid-item:hover img{transform:scale(1.04)}


/* prose columns */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:840px){.two-col{grid-template-columns:1fr}}
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);position:relative}
.feature-list li::before{content:"";position:absolute;left:4px;top:21px;width:9px;height:9px;
  border-radius:50%;background:var(--teal)}
.feature-list li:last-child{border-bottom:0}

/* cta */
/* The teal card is already a hard visual break. Giving its wrapper a full
   content-band gap on top of the card's own 58px of inner padding left ~163px
   of empty sand above it. The wrapper has to stay - main > section carries the
   background and z-index that cover the pinned hero - so trim its top padding
   instead. */
section:has(> .cta){padding-top:clamp(24px,3vw,40px)}

.cta{background:var(--teal);color:#fff;text-align:center;border-radius:var(--r);
  padding:clamp(36px,5vw,58px) 24px;margin:0 auto;max-width:var(--wrap)}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.92)}
.cta .btn-ghost{border-color:#fff;color:#fff}
.cta .btn-ghost:hover{background:#fff;color:var(--teal-d)}
.cta .btn-primary{background:#fff;color:var(--teal-d)}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 10px}
.cta-note{font-size:.88rem;opacity:.85;margin:0}

/* availability calendar */
.calendar{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow)}
.cal-head{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;margin-bottom:6px}
.cal-head h3{margin:0;font-size:1.15rem}
.cal-legend{display:flex;gap:14px;font-size:.78rem;color:var(--ink-2);flex-wrap:wrap}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.lg-open i{background:#fff;border:1.5px solid var(--teal)}
.lg-booked i{background:#ded6c8}
.lg-notopen i{background:repeating-linear-gradient(45deg,#eee9e0,#eee9e0 3px,#fff 3px,#fff 6px);
  border:1px solid var(--line)}
.cal-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin:14px 0 10px}
.cal-controls button{background:var(--teal);color:#fff;border:0;border-radius:999px;
  padding:7px 16px;font-size:.88rem;font-weight:600;cursor:pointer}
.cal-controls button:disabled{opacity:.3;cursor:default}
.cal-range{font-weight:600;color:var(--teal-d);min-width:190px;text-align:center;font-size:.95rem}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:620px){.cal-months{grid-template-columns:1fr}}
.cal-month h4{text-align:center;margin:.2em 0 .6em;font-family:Inter,sans-serif;
  font-size:.95rem;font-weight:600;color:var(--ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{text-align:center;font-size:.7rem;color:var(--ink-2);font-weight:600;padding:2px 0}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;border-radius:6px;background:var(--sand-2);color:var(--ink)}
.cal-day.empty{background:transparent}
.cal-day.past{background:#f4f1eb;color:#c9c2b6}
.cal-day.booked{background:#ded6c8;color:#8d8372;text-decoration:line-through}
.cal-day.notopen{background:repeating-linear-gradient(45deg,#eee9e0,#eee9e0 3px,#fff 3px,#fff 6px);
  color:#a89f92}
.cal-day.open{background:#fff;border:1.5px solid var(--teal-l);cursor:pointer;
  transition:background .12s,border-color .12s}
.cal-day.open:hover{background:var(--teal-l);border-color:var(--teal)}
.cal-day.open:focus-visible{outline:2px solid var(--teal);outline-offset:1px}
.cal-day.today{font-weight:700;box-shadow:inset 0 0 0 2px var(--thatch)}
.cal-day.sel-start,.cal-day.sel-end{background:var(--teal);color:#fff;border-color:var(--teal)}
.cal-day.in-range{background:var(--teal-l);border-color:var(--teal-l)}
.cal-loading{padding:30px 0;text-align:center;color:var(--ink-2);font-size:.92rem}
.cal-selection{margin:12px 0 0;font-size:.93rem;color:var(--teal-d);font-weight:500}
.cal-window-note{margin:10px 0 0;font-size:.85rem;color:var(--ink-2);
  background:var(--sand-2);border-radius:8px;padding:10px 12px}

/* video facade */
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  cursor:pointer;background:#000;box-shadow:var(--shadow)}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.video:hover img{transform:scale(1.03);opacity:.85}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none}
.video-play svg{filter:drop-shadow(0 2px 12px rgba(0,0,0,.4));transition:transform .2s}
.video:hover .video-play svg{transform:scale(1.1)}
.video:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
blockquote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--thatch);
  border-radius:var(--r);padding:26px 28px;margin:0;box-shadow:var(--shadow)}
blockquote p{font-size:1.02rem}
blockquote cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--teal-d)}

/* forms */
.field{margin-bottom:16px}
label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:.96rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
.hp{position:absolute;left:-9999px}
.flash{padding:13px 18px;border-radius:10px;margin:18px 0}
.flash-success{background:#e6f5ec;border:1px solid #bde2cc}
.flash-error{background:#fdecea;border:1px solid #f5c6c2}

/* footer */
.site-footer{background:var(--ink);color:#cfc9c1;margin-top:0;padding:56px 0 26px;
  position:relative;z-index:1}
.site-footer a{color:#cfc9c1;display:block;padding:4px 0;font-size:.93rem}
.site-footer a:hover{color:#fff}
.site-footer .brand-name{color:#fff;font-size:1.5rem;line-height:1.05;
  letter-spacing:.04em;margin-bottom:.5em}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.foot-h{font-weight:600;color:#fff;margin-bottom:8px;font-size:.93rem}
/* social icons, matching the Bella Vista footer treatment */
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  color:#e8e3db;padding:0;transition:background .2s,color .2s,transform .2s}
.socials a:hover{background:var(--thatch);color:#241f10;transform:translateY(-2px)}
.socials svg{width:19px;height:19px;display:block}

.foot-base{border-top:1px solid #3a3733;margin-top:36px;padding-top:20px}
.site-footer .muted{color:#8d8781}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}

/* mobile nav */
@media(max-width:1040px){
  .nav-burger{display:block;margin-left:auto;width:26px;height:20px;position:relative;cursor:pointer}
  .nav-burger span,.nav-burger span::before,.nav-burger span::after{
    content:"";position:absolute;left:0;width:26px;height:2px;background:var(--ink);border-radius:2px}
  .nav-burger span{top:9px}
  .nav-burger span::before{top:-8px}
  .nav-burger span::after{top:8px}
  .nav{position:fixed;inset:68px 0 auto 0;background:var(--sand);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 22px 22px;border-bottom:1px solid var(--line);
    display:none;box-shadow:var(--shadow)}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:14px;text-align:center;border-bottom:0}
  .nav-toggle:checked ~ .nav{display:flex}
}


/* Someone who has asked for reduced motion gets a normal, non-pinned hero. */
@media (prefers-reduced-motion: reduce){
  .hero picture,.hero::after{position:absolute;height:100%}
}


/* --- captioned figures in prose, and a non-ragged photo band ---------------
   The old pattern dumped every photo into .grid at the foot of the page, which
   forced portrait sources into a 4/3 box (cropping through the subject) and
   left a hole whenever a .wide tile landed mid-row. These two give an article
   page images that sit next to the paragraph they illustrate. */
.fig{margin:34px 0 40px}
.fig picture{display:block}
.fig img{width:100%;height:auto;display:block;border-radius:10px}
.fig figcaption{margin-top:10px;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
/* break a figure out past the 820px prose column so the page has some rhythm */
@media(min-width:1000px){
  .fig.bleed{width:min(1120px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
}
/* fixed columns, uniform ratio: never leaves a ragged gap the way auto-fill did */
.band{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.band figure{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:3/2;background:var(--sand-2)}
.band img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.band figure:hover img{transform:scale(1.04)}
@media(max-width:820px){.band{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.band{grid-template-columns:1fr}}
/* side-by-side block for the conversion section */
.split-media img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.split-media{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--sand-2)}


/* --- scenic section backdrops ----------------------------------------------
   Every band on the site was sand or teal, so long pages read as one flat
   colour. These put a photo behind a section with a scrim heavy enough to keep
   AA contrast on white text. Scoped to short, high-intent bands - a photo
   behind a long block of prose costs legibility and buys nothing. */
.bg-scenic{
  position:relative;color:#fff;
  background-size:cover;background-position:center;
  background-image:
    linear-gradient(170deg, rgba(10,44,46,.60) 0%, rgba(16,60,62,.54) 45%, rgba(8,38,40,.66) 100%),
    url('../photos/beach/beach-05-1600.jpg');
}
.bg-scenic h2,.bg-scenic h3,.bg-scenic .eyebrow{color:#fff}
.bg-scenic p,.bg-scenic li{color:rgba(255,255,255,.94)}
.bg-scenic p,.bg-scenic li,.bg-scenic h2,.bg-scenic h3{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.bg-scenic a:not(.btn){color:#fff;text-decoration:underline}
.bg-scenic .btn-ghost{border-color:#fff;color:#fff}
.bg-scenic .btn-ghost:hover{background:#fff;color:var(--teal-d)}
.bg-scenic .btn-primary{background:#fff;color:var(--teal-d)}
/* the beach-club scene: blue umbrellas and loungers on Avellanas sand.
   Source tops out at 1014px, which a hero would show up but a scrimmed
   backdrop hides comfortably. */
.bg-scenic.scenic-loungers{
  /* This scene is bright sand and sky, so a dark scrim fights the photo and a
     thin dark scrim would leave white text unreadable. Light wash + dark ink
     instead: the beach shows through and contrast goes UP, not down. */
  color:var(--ink);
  background-image:
    linear-gradient(170deg, rgba(247,243,236,.44) 0%, rgba(247,243,236,.40) 45%, rgba(247,243,236,.48) 100%),
    url('../photos/scenic/beach-loungers-1014.jpg');
}
.bg-scenic.scenic-loungers h2,
.bg-scenic.scenic-loungers h3,
.bg-scenic.scenic-loungers .eyebrow{color:var(--ink)}
/* full ink, not ink-2: the muted grey measured 2.0:1 over the palm shadows,
   well under the 4.5 AA floor. Ink holds 4.65:1 at the worst pixel. */
.bg-scenic.scenic-loungers p,
.bg-scenic.scenic-loungers li,
.bg-scenic.scenic-loungers .muted,
.bg-scenic.scenic-loungers .lede{color:var(--ink)}
/* white halo rather than a dark one, so text sits on the light wash cleanly */
.bg-scenic.scenic-loungers p,
.bg-scenic.scenic-loungers li,
.bg-scenic.scenic-loungers h2,
.bg-scenic.scenic-loungers h3{text-shadow:0 1px 10px rgba(255,255,255,.75)}
.bg-scenic.scenic-loungers a:not(.btn){color:var(--teal-d)}
.bg-scenic.scenic-loungers .btn-primary{background:var(--teal);color:#fff}
.bg-scenic.scenic-loungers .btn-ghost{border-color:var(--teal-d);color:var(--teal-d)}
.bg-scenic.scenic-loungers .btn-ghost:hover{background:var(--teal-d);color:#fff}
@media(max-width:640px){
  .bg-scenic.scenic-loungers{background-image:
    linear-gradient(170deg, rgba(247,243,236,.52) 0%, rgba(247,243,236,.46) 45%, rgba(247,243,236,.56) 100%),
    url('../photos/scenic/beach-loungers-800.jpg')}
}
/* muted caption text has to lift off a dark backdrop or it disappears */
.bg-scenic .muted,.bg-scenic .lede{color:rgba(255,255,255,.88)}
/* a second scene, for pages where the sunset shot is already the hero */
.bg-scenic.scenic-surf{
  background-image:
    linear-gradient(170deg, rgba(10,44,46,.72) 0%, rgba(16,60,62,.60) 45%, rgba(8,38,40,.80) 100%),
    url('../photos/beach/beach-08-800.jpg');
}
/* the backdrop is decorative: on a narrow screen the scrim gets heavier so the
   text stays readable over a much tighter crop of the photo */
@media(max-width:640px){
  .bg-scenic{background-image:
    linear-gradient(170deg, rgba(10,44,46,.70) 0%, rgba(16,60,62,.64) 45%, rgba(8,38,40,.76) 100%),
    url('../photos/beach/beach-05-800.jpg')}
}
/* centred intro block used by the scenic bands */
.section-head{text-align:center;max-width:760px;margin:0 auto 1.6em}
.section-head .eyebrow{display:inline-block;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;font-weight:600;margin-bottom:.6em;opacity:.9}
.section-head h2{margin:0}
.prose-center{max-width:720px;margin:0 auto 1.1em}