/* ikonictowers.life — destination content site.
   Deliberately NOT home.css. That stylesheet carries the sales site's unit
   grids, price tables and availability components, none of which may ever
   appear on this domain (see README.md). Sharing it would put the temptation
   one class name away. The design tokens below are copied from home.css so the
   two sites read as one brand. Palette source: "Tonalidades de azul",
   the client deck of 2026-09-08, five named blues at hue ~207. See the
   header of home.css for the names, the hexes, and the contrast note that
   governs any change to a text colour on this page.

   ponytail: hand-written, ~1 breakpoint, no framework. If this grows past a
   dozen components, extract a builder for the CSS too, not before. */

:root{
  --ink:#1f395d;
  --surf:#2f4a6e;
  --surf-2:#2a4568;
  --surf-3:#223c5c;
  --line:#6f88a8;
  --line-soft:#4f6a8e;
  --sand:#e6c093;
  --sand-hi:#f2dcbc;
  --sea:#c9d4e2;
  --sea-deep:#132842;
  --gold:#ecd0a6;
  --shell:#f4efe6;
  --shell-2:#eef1f5;
  --muted:#c9d2de;
  --faint:#bcc7d4;
  --serif:"Instrument Serif","Bodoni MT",Didot,"Hoefler Text",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  --max:1180px;
  --pad:clamp(20px,4vw,44px);
  --sec-y:clamp(32px,4.5vw,62px);
  --r-sm:6px; --r-md:11px; --r-lg:18px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--ink);
  color:var(--shell);
  font:400 clamp(16px,1.05vw,17px)/1.7 var(--sans);
  letter-spacing:.005em;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sand);text-decoration:none}
a:hover{color:var(--sand-hi)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--sea);outline-offset:3px;border-radius:var(--r-sm)
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--sand);color:var(--ink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0
}
.skip:focus{left:0}

/* ------------------------------------------------------------------ layout */
.wrap{width:min(var(--max),100%);margin-inline:auto;padding-inline:var(--pad)}
.narrow{width:min(760px,100%);margin-inline:auto}
section{padding-block:var(--sec-y)}
.rule{border:0;border-top:1px solid var(--line-soft);margin:0}

/* --------------------------------------------------------------------- nav */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(16,30,50,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  display:flex;align-items:center;gap:24px;
  width:min(var(--max),100%);margin-inline:auto;
  padding:14px var(--pad);
}
.mark{display:flex;flex-direction:column;line-height:1;color:var(--shell);flex:0 0 auto}
.mark b{font:400 20px/1 var(--serif);letter-spacing:.14em}
.mark small{font:400 9px/1.4 var(--mono);letter-spacing:.24em;color:var(--faint);margin-top:5px}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(14px,2.2vw,30px);list-style:none;margin:0;padding:0;align-items:center}
.nav a{font:500 13px/1 var(--sans);letter-spacing:.02em;color:var(--shell-2)}
.nav a:hover,.nav a[aria-current=page]{color:var(--sand)}
.nav .lang{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--faint);
  border:1px solid var(--line);padding:7px 10px;border-radius:var(--r-sm)}
.nav .lang:hover{color:var(--sand);border-color:var(--sand)}
.navtoggle{display:none}

@media (max-width:820px){
  .navtoggle{
    display:block;margin-left:auto;background:none;border:1px solid var(--line);
    color:var(--shell-2);border-radius:var(--r-sm);padding:9px 12px;
    font:500 12px/1 var(--mono);letter-spacing:.12em;cursor:pointer
  }
  .nav nav{
    margin-left:0;flex-basis:100%;order:3;
    max-height:0;overflow:hidden;transition:max-height .32s var(--ease)
  }
  .nav nav[data-open=true]{max-height:340px}
  .nav ul{flex-direction:column;align-items:flex-start;gap:0;padding:8px 0 14px}
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:11px 0;font-size:15px}
  .nav-in{flex-wrap:wrap;row-gap:0}
}

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative;
  min-height:clamp(420px,62vh,620px);
  display:flex;align-items:flex-end;
  padding-block:clamp(70px,11vw,130px) clamp(44px,6vw,74px);
  border-bottom:1px solid var(--line-soft);
  isolation:isolate;
}
/* Placeholder ground. Every .plate is a slot for a generated image from
   section 5 of the campaign plan. data-plate names which prompt fills it.
   Until the file exists the gradient stands in and the page is complete. */
.plate{
  position:absolute;inset:0;z-index:-1;
  /* --plate-img is the top layer and defaults to nothing, so the gradient below
     is the finished look until a file exists. A 404 on the image leaves an empty
     layer rather than a blank box, which is why the gradient stack stays here
     instead of being replaced. */
  background:
    var(--plate-img, none),
    radial-gradient(120% 85% at 18% 8%, rgba(90,116,148,.16), transparent 62%),
    radial-gradient(95% 70% at 88% 92%, rgba(230,192,147,.13), transparent 58%),
    linear-gradient(178deg, var(--sea-deep) 0%, var(--surf) 46%, var(--ink) 100%);
  background-size:cover;background-position:center;
}

/* Image slots. Drop the file in assets/img/ under the exact name below and it
   appears. No HTML or build change. Names carry the ai- prefix from section 5
   of the campaign plan so a generated plate is never mistaken for a render of
   the building. Prompts live in that same section. */
/* H1 to H3 are the three hero slides, T1 to T3 the body mosaic tiles. Added
   2026-09-11 with Hero B and Cuerpo B. Prompts live in section 5i of the
   campaign plan. Drop the file in under the exact name and it appears. */
[data-plate="H1"] .plate{--plate-img:url("../img/ai-h1-malecon-amanecer.webp?v=21d0d1b077c7") center/cover no-repeat}
[data-plate="H2"] .plate{--plate-img:url("../img/ai-h2-pueblo-sombra.webp?v=de9ee3ad72ff") center/cover no-repeat}
[data-plate="H3"] .plate{--plate-img:url("../img/ai-h3-cenote.webp?v=28ea9cd50822") center/cover no-repeat}
[data-plate="T1"] .plate{--plate-img:url("../img/ai-t1-luz-manana.webp?v=2fae5e778ab8") center/cover no-repeat}
[data-plate="T2"] .plate{--plate-img:url("../img/ai-t2-agua-dulce.webp?v=819e4ca8b97b") center/cover no-repeat}
[data-plate="T3"] .plate{--plate-img:url("../img/ai-t3-pueblo-retrato.webp?v=773a973f077d") center/cover no-repeat}
/* The hero is full screen, so a 21:9 desktop plate on a 9:16 phone crops to a
   thin band through the middle and throws away the whole composition. Each
   hero slot therefore has a SECOND, separately composed portrait file, the
   same arrangement the sales site's hero uses. The 720px cut matches the one
   the hero halo changes at, so the crop and the type shadow change together.
   Until a portrait file exists the landscape one is used and it will crop. */
@media (max-width:720px){
  [data-plate="H1"] .plate{--plate-img:url("../img/ai-h1-malecon-amanecer-movil.webp?v=3700ff53b069") center/cover no-repeat}
  [data-plate="H2"] .plate{--plate-img:url("../img/ai-h2-pueblo-sombra-movil.webp?v=ebe8b213670e") center/cover no-repeat}
  [data-plate="H3"] .plate{--plate-img:url("../img/ai-h3-cenote-movil.webp?v=63e8198cb844") center/cover no-repeat}
}
[data-plate="F1"] .plate{--plate-img:url("../img/ai-f1-costa.webp?v=c467cccb7ed6") center/cover no-repeat}
[data-plate="F3"] .plate{--plate-img:url("../img/ai-f3-colonial.webp?v=a1a376746f5c") center/cover no-repeat}
[data-plate="F6"] .plate{--plate-img:url("../img/ai-f6-textura.webp?v=f4cbfd414870") center/cover no-repeat}
[data-plate="D1"] .plate{--plate-img:url("../img/ai-d1-muelle.webp?v=13e6bb15401b") center/cover no-repeat}
[data-plate="E2"] .plate{--plate-img:url("../img/ai-e2-degradado.webp?v=857b0789255a") center/cover no-repeat}
.plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(16,30,50,.92) 0%, rgba(16,30,50,.35) 52%, rgba(16,30,50,.55) 100%);
}
.hero .wrap{position:relative}
.eyebrow{
  font:500 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--sand);margin:0 0 20px
}
h1{
  font:400 clamp(38px,6.4vw,74px)/1.02 var(--serif);
  letter-spacing:-.015em;margin:0 0 22px;max-width:16ch
}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--shell-2);max-width:56ch;margin:0}

/* The sales hero halo, copied exactly. Every layer sits at offset 0 0 so the
   dark comes out of the glyph evenly and reads as a stroke with a faded edge.
   A drop shadow only protects the side it falls on. Every hero on the site
   gets it, the home slider and the four page heads alike. Blur radii are on
   the 8 grid halved: 3 and 6 and 10 and 16 for the large type, 2 and 4 and 7
   and 11 for the small. */
.hero h1,
.hero .lede{text-shadow:
  0 0 3px rgba(0,0,0,.98),0 0 6px rgba(0,0,0,.98),
  0 0 10px rgba(0,0,0,.82),0 0 16px rgba(0,0,0,.58)}
.hero .eyebrow{text-shadow:
  0 0 2px rgba(0,0,0,.98),0 0 4px rgba(0,0,0,.98),
  0 0 7px rgba(0,0,0,.8),0 0 11px rgba(0,0,0,.56)}

/* ---------------------------------------------------------------- headings */
h2{
  font:400 clamp(27px,3.5vw,42px)/1.12 var(--serif);
  letter-spacing:-.01em;margin:0 0 20px;max-width:22ch
}
h3{font:600 15px/1.4 var(--sans);letter-spacing:.01em;margin:0 0 9px;color:var(--shell)}
p{margin:0 0 20px;color:var(--shell-2)}
p strong{color:var(--shell);font-weight:600}
.section-tag{
  font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin:0 0 16px
}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{
  background:var(--surf);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:clamp(22px,2.6vw,30px);
  transition:border-color .3s var(--ease),transform .3s var(--ease)
}
.card:hover{border-color:var(--line);transform:translateY(-2px)}
.card p{margin:0;font-size:15px;line-height:1.65}
.card .num{
  font:400 30px/1 var(--serif);color:var(--sand);display:block;margin-bottom:12px
}

/* figure with a plate slot */
.fig{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:3/2;border:1px solid var(--line-soft)}
.fig .plate{position:absolute;inset:0;z-index:0}
.fig .plate::after{background:linear-gradient(160deg,rgba(16,30,50,.25),rgba(16,30,50,.6))}
.fig figcaption{
  position:absolute;left:0;bottom:0;z-index:1;padding:16px 20px;
  font:400 13px/1.5 var(--sans);color:var(--shell-2)
}
.split{display:grid;gap:clamp(26px,4vw,58px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* --------------------------------------------------------------------- faq */
details{border-bottom:1px solid var(--line-soft);padding:4px 0}
summary{
  cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font:600 16px/1.45 var(--sans);color:var(--shell)
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";position:absolute;right:4px;top:19px;
  font:400 22px/1 var(--serif);color:var(--sand);transition:transform .25s var(--ease)
}
details[open] summary::after{transform:rotate(45deg)}
details .body{padding:0 0 20px;max-width:66ch}
details .body p:last-child{margin-bottom:0}

/* -------------------------------------------------------------------- note */
.note{
  border-left:2px solid var(--sand);background:var(--surf);
  padding:20px 24px;border-radius:0 var(--r-md) var(--r-md) 0;margin:0 0 24px
}
.note p{margin:0;font-size:15px;color:var(--shell-2)}

/* -------------------------------------------------------------------- form */
.formwrap{background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,44px)}
.field{margin:0 0 20px}
.field label{display:block;font:500 13px/1.4 var(--sans);color:var(--shell);margin:0 0 8px}
.field input[type=text],.field input[type=email],.field select{
  width:100%;background:var(--surf-2);color:var(--shell);
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;font:400 16px/1.4 var(--sans)
}
.field input::placeholder{color:var(--muted)}
.hint{display:block;font:400 12px/1.5 var(--mono);color:var(--faint);margin-top:7px}
.rd-check input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--sea)}
.btn{
  display:inline-block;background:var(--sand);color:var(--ink);border:0;
  border-radius:var(--r-sm);padding:15px 30px;cursor:pointer;
  font:600 15px/1 var(--sans);letter-spacing:.01em;
  transition:background .25s var(--ease)
}
.btn:hover{background:var(--sand-hi)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--shell)}
.btn-ghost:hover{background:var(--surf-2);border-color:var(--sand)}
.formmsg{margin:18px 0 0;font-size:15px}
.formmsg[data-state=ok]{color:var(--sea)}
.formmsg[data-state=err]{color:var(--gold)}
.legal{font:400 12px/1.6 var(--sans);color:var(--faint);margin:18px 0 0}
.legal a{color:var(--shell-2);text-decoration:underline}

/* ------------------------------------------------------------------- ctas */
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 0}

/* ------------------------------------------------------------------ footer */
footer{border-top:1px solid var(--line-soft);padding-block:clamp(44px,5vw,68px)}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer h4{font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 10px}
footer a{font-size:14px;color:var(--shell-2)}
footer a:hover{color:var(--sand)}
.colophon{margin-top:44px;padding-top:24px;border-top:1px solid var(--line-soft);
  font:400 12px/1.7 var(--sans);color:var(--faint)}
.colophon p{margin:0 0 8px;color:var(--faint);font-size:12px}
/* Designer credit, bottom left of every page. Added 2026-09-12 at the owner's
   instruction, the same line and the same three colour classes as the sales
   site. It is a workshop credit, not a real estate signal, so it sits inside
   the NONE category rule rather than against it. */
.colophon .ppw{margin:16px 0 0}
.colophon .ppw a{color:inherit;text-decoration:none}
.colophon .ppw a:hover{text-decoration:underline}
.fc-blue{color:#bbd9f5}
.fc-sky{color:#8fe3ff}
.fc-white{color:#fff}

/* ==========================================================================
   HERO B, the full screen slider. Chosen by the owner 2026-09-11.
   Markup comes from render_hero() in build_life.py. The copy sits in the
   middle of the frame and a named band across the foot doubles as a table of
   contents for the coast.
   The veil is CENTRE weighted, not left weighted the way the sales site is,
   because the type is centred here. A left weighted grade would darken open
   sky on one side and leave the words sitting on lit water on the other.
   ========================================================================== */
.hero-slides{
  min-height:100svh;
  align-items:center;justify-content:center;text-align:center;
  padding-block:clamp(96px,13vw,140px) clamp(158px,17vw,196px);
  overflow:hidden;border-bottom:0;
}
.hero-slides .wrap{position:relative;z-index:1}
.slide-plate{
  position:absolute;inset:0;z-index:-1;opacity:0;transform:scale(1);
  transition:opacity 1.4s var(--ease),transform 9s var(--ease);
}
.slide-plate[data-on]{opacity:1;transform:scale(1.06)}
.slide-plate .plate{z-index:0}
.hero-slides .plate::after{
  background:
    radial-gradient(58% 62% at 50% 46%,rgba(8,16,30,.80) 0%,rgba(8,16,30,.60) 45%,
                    rgba(8,16,30,.16) 78%,transparent 100%),
    linear-gradient(180deg,rgba(16,30,50,.74) 0%,transparent 22%,
                    transparent 46%,rgba(16,30,50,.94) 100%);
}
/* Only the live slide is in the document flow, so the hero is the height of
   one slide and not of three stacked. */
.slide-copy{display:none}
.slide-copy[data-on]{display:block;animation:slide-in .9s var(--ease) both}
@keyframes slide-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-slides .eyebrow{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,20px);margin:0 0 clamp(22px,3vw,32px)
}
.hero-slides .eyebrow .rule{
  flex:0 0 auto;width:clamp(26px,6vw,58px);height:1px;background:rgba(230,192,147,.75)
}
.hero-slides h1{max-width:17ch;margin:0 auto clamp(20px,2.6vw,30px);
  font-size:clamp(38px,6.6vw,80px);line-height:1.0}
.hero-slides .lede{max-width:58ch;margin:0 auto}
/* The halo moved to .hero on 2026-09-12. It was scoped to .hero-slides, so the
   home slider had it and progreso, merida, comprar-en-mexico and guia did not.
   Their plates are lit ochre plaster and pale limestone, which is the worst
   possible ground for white serif type, and merida was close to unreadable.
   .hero-slides IS a .hero, so the home page is byte identical after this move.
   See the same block at .hero h1 below for the shared definition. */
.slide-tab .n,.slide-tab .t,.slide-tab .c{text-shadow:
  0 0 2px rgba(0,0,0,.98),0 0 4px rgba(0,0,0,.98),
  0 0 7px rgba(0,0,0,.8),0 0 11px rgba(0,0,0,.56)}

.slide-band{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  padding-inline:var(--pad);
  border-top:1px solid rgba(244,239,230,.20);
  background:linear-gradient(180deg,rgba(8,16,30,0),rgba(8,16,30,.55));
}
.slide-tab{
  position:relative;background:none;border:0;cursor:pointer;text-align:left;
  color:var(--shell);padding:18px 10px 20px 0;opacity:.5;
  transition:opacity .4s var(--ease)
}
.slide-tab:hover{opacity:1}
.slide-tab[data-on]{opacity:1}
.slide-tab + .slide-tab{
  padding-left:clamp(14px,2.4vw,30px);border-left:1px solid rgba(244,239,230,.16)
}
/* the hairline fills across the live tab, which is the only progress cue */
.slide-tab::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--sand);transition:width .8s var(--ease)
}
.slide-tab[data-on]::before{width:100%}
.slide-tab .n{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;
  color:var(--sand);margin:0 0 8px}
.slide-tab .t{display:block;font:400 clamp(16px,1.9vw,22px)/1.2 var(--serif);
  color:var(--shell);margin:0 0 4px}
.slide-tab .c{display:block;font:400 12.5px/1.4 var(--sans);color:var(--muted)}

/* ==========================================================================
   CUERPO B, "mosaico". Chosen by the owner 2026-09-11.
   A numbered rail opens each tagged section, body copy can run in two
   columns, and the photographs sit in offset tiles that break the grid.
   ========================================================================== */
.rail-grid{
  display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:start
}
.rail-n{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--faint);margin:0 0 14px}
.rail .section-tag{margin:0}
.rail-line{display:block;width:44px;height:1px;background:rgba(230,192,147,.6);margin-top:22px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,40px)}
.cols > div > p:last-child{margin-bottom:0}
.measure{max-width:68ch}
.measure p:last-child{margin-bottom:0}

/* Photograph tiles. The caption sits INSIDE the frame, which is what keeps a
   tile reading as one object instead of a picture with a line under it. */
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);align-items:start}
.tile{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-soft)}
.tile .plate{position:absolute;inset:0;z-index:0}
.tile .plate::after{background:linear-gradient(180deg,transparent 42%,rgba(16,30,50,.78) 100%)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:0 20px 16px;
  font:500 10px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--shell-2);text-shadow:0 0 6px rgba(0,0,0,.9)
}
.tile-tall{grid-column:1 / span 7;aspect-ratio:16/10}
.tile-short{grid-column:8 / span 5;aspect-ratio:4/3;margin-top:clamp(24px,7vw,86px)}
.tile-portrait{aspect-ratio:4/5}

/* the culture section: portrait tile on the left, copy and the pull quote right */
.split{grid-template-columns:5fr 7fr;gap:clamp(26px,4.4vw,58px);align-items:center}
.pull{margin:clamp(22px,3vw,30px) 0 0;padding-left:24px;border-left:2px solid var(--sand)}
.pull p{margin:0;font:italic 400 clamp(20px,2.4vw,27px)/1.3 var(--serif);color:var(--sand)}

/* the four facts, one deep panel instead of four separate boxes */
.facts{background:linear-gradient(158deg,var(--surf),var(--surf-3));
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(28px,3.6vw,46px)}
.facts .section-tag{margin:0 0 clamp(22px,2.6vw,30px)}
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.8vw,38px)}
.fact .num{display:block;font:400 clamp(32px,3.4vw,46px)/1 var(--serif);
  color:var(--sand);margin:0 0 12px}
.fact h3{margin:0 0 8px}
.fact p{margin:0;font-size:14px;line-height:1.6}

.links-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:0 0 clamp(24px,3vw,34px)}
.links-head h2{margin:0}
.links-head .section-tag{margin:0}
.stagger{align-items:start}
.stagger > :nth-child(2){margin-top:clamp(10px,3vw,30px)}
.stagger > :nth-child(3){margin-top:clamp(20px,6vw,60px)}

/* ------------------------------------------------------- mosaico on a phone
   The asymmetry is a desktop idea. On a narrow screen every offset becomes a
   reason to scroll past something, so all of it collapses to one column. */
@media (max-width:880px){
  .rail-grid{grid-template-columns:1fr;gap:20px}
  .rail{display:flex;align-items:center;gap:14px}
  .rail-n{margin:0}
  .rail-line{margin:0;width:28px}
  .cols{grid-template-columns:1fr;gap:0}
  .tiles{grid-template-columns:1fr}
  .tile-tall,.tile-short{grid-column:auto}
  .tile-short{margin-top:0}
  .split{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stagger > :nth-child(2),.stagger > :nth-child(3){margin-top:0}
}
@media (max-width:560px){
  .facts-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------- hero on a phone
   The copy column is the whole frame here, so the lede lands on open sky and
   water, which is the brightest thing in the photograph. Every halo radius is
   the desktop radius times 1.5, the same ratio the sales site uses. */
@media (max-width:720px){
  .hero-slides{padding-block:clamp(88px,22vw,112px) 172px}
  .hero-slides h1,
  .hero-slides .lede{text-shadow:
    0 0 4.5px rgba(0,0,0,.98),0 0 9px rgba(0,0,0,.98),
    0 0 15px rgba(0,0,0,.98),0 0 24px rgba(0,0,0,.98)}
  /* The hairlines only work while the eyebrow is ONE line. On a phone it
     wraps, and the rules then sit beside a two line block with the second
     line hanging under nothing. They go. */
  .hero-slides .eyebrow{display:block;font-size:10px;letter-spacing:.2em}
  .hero-slides .eyebrow .rule{display:none}
  .slide-tab .c{display:none}
  .slide-tab .t{font-size:14px}
  .slide-tab{padding:14px 6px 16px 0}
  .slide-tab + .slide-tab{padding-left:12px}
}

/* -------------------------------------------------------------------- blog
   Posts and the newest-posts strip. Built by build_life.py from
   01_build_files_shared/life_posts/. The drawings are stick figures on sand,
   so the image frames stay light on the blue page. */
.post-head{padding:calc(var(--sec-y) + 64px) 0 var(--sec-y)}
.post-head h1{font:400 clamp(36px,5vw,56px)/1.08 var(--serif);margin:0 0 16px;color:var(--shell)}
.post-head .eyebrow{font:500 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 16px}
.post-head .lede{font-size:clamp(17px,1.3vw,19px);color:var(--shell-2);margin:0 0 16px}
.crumbs{font:500 12px/1.4 var(--mono);color:var(--faint);margin:0 0 24px}
.post-lang{margin:0 0 24px}
.post-lang a{display:inline-block;border:1px solid var(--sand);border-radius:var(--r-sm);padding:8px 16px;font-weight:600}
.post-lang a:hover{background:var(--sand);color:var(--ink)}
.post-fig{margin:0;border-radius:var(--r-md);overflow:hidden;background:#f4efe6}
.post-sec{padding:0 0 32px}
.post-sec h2{font:400 clamp(26px,3vw,34px)/1.15 var(--serif);margin:0 0 16px}
.post-sec p{max-width:68ch}
.post-src{margin:0 0 16px;padding-left:20px;font-size:15px}
.post-src-h{font-size:24px!important}
.post-strip{padding:var(--sec-y) 0}
.post-card{display:flex;flex-direction:column;gap:8px;padding:0;overflow:hidden;color:var(--shell)}
.post-card img{background:#f4efe6;aspect-ratio:16/9;object-fit:cover}
.post-card .post-meta,.post-card h3,.post-card p{padding:0 24px}
.post-card .post-meta{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:16px}
.post-card h3{font:400 24px/1.2 var(--serif);margin:0;color:var(--shell)}
.post-card p{padding-bottom:24px}
.post-strip .grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:880px){.post-strip .grid{grid-template-columns:1fr}}
.post-card img{width:100%}
.post-fig figcaption{font-size:12px;color:#3a4a56;padding:8px 16px}
.post-fig figcaption a{color:#1f5a8a}