/* Casolena shared page components. Themed entirely via tokens set in theme.css */
/* anchor jumps land below the sticky header */
[id]{scroll-margin-top:84px}
/* ---------- content protection ---------- */
/* The photos and words here are our own work. Selection is off by default and
   switches back on where a guest genuinely copies things: form fields, and
   anything marked .allow-copy (the booking pages carry it on body, codes and
   details can carry it inline). Deters casual copying only; the baked
   watermarks are the real protection. */
body{-webkit-user-select:none;user-select:none}
input,textarea,select,.allow-copy,.allow-copy *{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;-webkit-touch-callout:none}
/* Italics are always the display face, inside prose and out of it. Scoped to .prose
   until Aug 2026, which left the brand name in a different italic on about and press. */
em{font-family:var(--display);font-style:italic}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
@media(max-width:700px){
.wrap{padding:0 22px}
}
/* ---------- page hero ---------- */
/* Vertical rhythm, set once here and echoed by the homepage blocks in
   theme.css: 56px between sections, a little more where a page wants to
   breathe (the CTA band), and the whole scale stepped down again on phones by
   the block at the foot of this file. The site ran roughly a third looser than
   this until Aug 2026, which read as wasted screen rather than calm. */
.page-hero{padding:64px 0 40px;background:var(--bg)}
.page-hero .kicker{margin-bottom:16px}
.page-hero h1{font-size:clamp(34px,4.6vw,54px);max-width:18em}
.page-hero .lede{margin-top:20px;color:var(--ink-soft);font-size:17.5px}
/* On an article the lede sits above a 68ch prose column, so it matches that
   measure. Landing pages have no prose body and run the full width. */
body:has(.prose) .page-hero .lede{max-width:68ch}
.page-img{margin:26px 0 0}
.page-img img{width:100%;max-height:66vh;object-fit:cover;border-radius:var(--radius)}
.page-img figcaption{font-family:var(--label);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px}
.sec{padding:56px 0}
.sec.alt{background:var(--bg-alt)}
.sec-head{margin-bottom:32px}
.sec-head h2,.sec-head h1{font-size:clamp(26px,3vw,38px)}
.sec-head .kicker{margin-bottom:14px}
.sec-head p{margin-top:14px;color:var(--ink-soft)}
.prose{max-width:68ch}
.prose h2{font-size:clamp(26px,2.8vw,34px);margin:34px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:22px;margin:24px 0 10px}
.prose p{margin-bottom:16px;color:var(--ink-soft)}
.prose strong{color:var(--ink)}
.prose ul{margin:0 0 16px 20px;color:var(--ink-soft)}
.prose li{margin-bottom:8px}
/* In-content links. Scoped to p/li/figcaption so it never touches .btn,
   .guide-card or the nav. Accent + semibold at rest, underline on hover/focus. */
main p a:not(.btn),main li a:not(.btn),main figcaption a:not(.btn){color:var(--accent);font-weight:600;text-decoration:none}
main p a:not(.btn):hover,main li a:not(.btn):hover,main figcaption a:not(.btn):hover,main p a:not(.btn):focus-visible,main li a:not(.btn):focus-visible,main figcaption a:not(.btn):focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* ---------- layout blocks ---------- */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:48px}
.media-split:last-child{margin-bottom:0}
.media-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.media-split h2{font-size:clamp(26px,2.8vw,34px)}
.media-split .kicker{margin-bottom:12px}
.media-split p{margin-top:14px;color:var(--ink-soft)}
.media-split.flip>.ms-img{order:2}
/* Portrait photo beside the text. The image track narrows so a 3:4 photo sits
   beside its paragraphs instead of towering over them, and flipping moves the
   photo into the second track, so the track widths swap too. */
.media-split.tall{grid-template-columns:2fr 3fr}
.media-split.tall.flip{grid-template-columns:3fr 2fr}
.media-split.tall img{aspect-ratio:3/4}
figure.ms-img{margin:0}
.media-split figcaption{font-family:var(--label);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px}
@media(max-width:900px){
.media-split,.media-split.flip,.media-split.tall,.media-split.tall.flip{grid-template-columns:1fr;gap:26px}
.media-split.flip>.ms-img{order:0}
}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:900px){
.grid-3{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.card h3{font-size:19px;margin-bottom:10px}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);margin-bottom:18px}
.card p{font-size:15.5px;color:var(--ink-soft)}
/* stat strip */
/* The space above the strip is set here and the space below it is the section's
   bottom padding plus the next block's top padding, so the two are tuned together
   to leave the strip sitting centred between the intro and what follows. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:64px}
.stats div{padding:20px 8px 4px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border-right:none}
.stats b{display:block;font-family:var(--display);font-weight:var(--display-weight,400);font-size:28px;font-variant-numeric:tabular-nums;color:var(--ink)}
.stats span{font-family:var(--label);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:700px){
.stats{grid-template-columns:1fr 1fr;margin-top:48px}
.stats div{border-bottom:1px solid var(--line);padding:14px 8px 12px}
/* 2 columns, so the divider belongs between the pair and not after it. Only
   the 4th cell is :last-child, which left the 2nd hanging a border on the
   right edge of the strip. */
.stats div:nth-child(2n){border-right:none}
/* The number inherits the body's 1.7, which turns a 26px figure into a 44px line
   box. Four of those stacked 2 by 2 was most of the strip's height on a phone. */
.stats b{font-size:26px;line-height:1.15}
.stats span{display:block;line-height:1.35}
}
/* amenities */
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 40px;list-style:none}
.amenities li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink-soft)}
.amenities li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:99px;background:var(--accent)}
.amenities li strong{color:var(--ink);font-weight:600}
@media(max-width:900px){
.amenities{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.amenities{grid-template-columns:1fr}
}
/* at-a-glance panel (the lakehouse page): chips switch panes, only one shows.
   This is the first thing on the page, so it carries the top breathing room
   the page-hero would otherwise have given it. */
.glance-sec{padding-top:48px}
.glance-title{font-size:clamp(26px,3vw,38px);margin-bottom:24px}
/* Only three chips here and they are a tab bar, not filters, so they stay on
   one line at every width (the gallery's chips still wrap). */
.glance .chips{margin-bottom:32px;flex-wrap:nowrap}
.glance .chips button{white-space:nowrap}
.glance-pane.hide{display:none}
.glance-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gf{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.gf svg{width:26px;height:26px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gf b{display:block;font-family:var(--display);font-weight:var(--display-weight,400);font-size:21px;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.gf span{display:block;font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.glance h2{display:flex;align-items:center;gap:10px;font-size:17px;margin:26px 0 8px;text-wrap:auto}
.glance h2:first-child{margin-top:0}
.glance h2 svg{width:20px;height:20px;flex:none;color:var(--kicker-c);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Amenity categories. Multi-column rather than grid so the six blocks balance
   themselves instead of leaving a hole under the short ones; break-inside
   keeps a category from splitting across two columns. */
.amen-groups{column-count:2;column-gap:56px}
.amen-groups>div{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:26px}
.amen-groups>div>.amenities{grid-template-columns:1fr;gap:0}
/* The amenity names below are bold, so a light display heading disappears next
   to them. Set these as spaced uppercase labels instead: a different tier, not
   a heavier version of the same one. */
.amen-groups h2{font-family:var(--label);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
/* Every outdoor amenity is seasonal, so each carries a marker back to the note
   that sits directly beneath them. */
/* Footnote marker: ties a fact to the note that qualifies it (occupancy, and
   the outdoor amenities that are seasonal). */
.glance-mark{color:var(--accent);font-weight:600}
.gf .glance-mark{font-size:11px}
.amen-seasonal{margin-top:14px}
/* Getting here: the map fills the width on a phone, but at desktop widths a
   full-bleed map dwarfs everything, so pair it with the drive times instead. */
.loc-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:22px}
.loc-split .post-fig{margin:0}
.loc-split .contact-list{margin-top:0}
@media(max-width:820px){
.loc-split{grid-template-columns:1fr;gap:24px}
}
@media(max-width:620px){
.amen-groups{column-count:1}
}
.glance-note{margin-top:18px;font-size:13.5px;color:var(--ink-soft)}
.glance-note a{color:var(--accent);font-weight:600}
@media(max-width:900px){
.glance-facts{grid-template-columns:1fr 1fr}
}
/* Stay two tiles per row on phones. Below this the card is too narrow for the
   icon to sit beside the text, so it moves above and the number and label get
   the card's full width. */
@media(max-width:560px){
.glance-facts{gap:12px}
.gf{flex-direction:column;align-items:flex-start;gap:9px;padding:14px 15px}
.gf svg{width:22px;height:22px}
.gf b{font-size:19px}
.gf span{font-size:9.5px;letter-spacing:.12em;margin-top:4px}
.glance .chips{gap:6px;margin-bottom:26px}
.glance .chips button{font-size:10px;letter-spacing:.06em;padding:8px 12px}
}
@media(max-width:360px){
.glance .chips button{font-size:9px;letter-spacing:.03em;padding:7px 9px}
}
/* room blocks */
.room-block{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center;padding:44px 0;border-bottom:1px solid var(--line)}
.room-block:last-of-type{border-bottom:none}
/* Flipping moves the photo into the second track, so the track widths swap too.
   Without this the photo is 5fr on one row and 6fr on the next, and the four
   room photos come out at two different sizes. */
.room-block.flip{grid-template-columns:6fr 5fr}
.room-block.flip .rb-img{order:2}
.rb-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.room-block h2{font-size:clamp(26px,3vw,36px)}
.room-name-sub{font-family:var(--display);font-style:italic;color:var(--kicker-c);font-size:17px;margin-top:6px}
.room-block p{margin-top:16px;color:var(--ink-soft);max-width:52ch}
.room-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;list-style:none}
.room-meta li{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;color:var(--ink-soft);background:var(--surface)}
@media(max-width:900px){
.room-block,.room-block.flip{grid-template-columns:1fr;gap:24px}
.room-block.flip .rb-img{order:0}
}
/* quotes */
/* Fifteen cards of two or three sentences each, so the type steps down and the
   padding comes in; at the old size this ran the length of the page twice. */
.quote-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote-wall blockquote{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  font-family:var(--display);font-size:15px;line-height:1.5;font-style:italic;color:var(--ink)}
/* the ellipsis is ours, not the guest's, so it sits back from their words */
.quote-wall .ell{opacity:.42}
.quote-wall cite{display:block;margin-top:11px;font-family:var(--label);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:900px){
.quote-wall{grid-template-columns:1fr}
}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.badges span{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:9px 18px;
  font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* the proof boxes at the top of the reviews page. Set like an engraved plate:
   a rule, the mark, the source, the claim, a rule. The platforms' logos are
   theirs to license, so the marks are drawn here instead. Airbnb and Vrbo are
   whole-box links to the source, which is why there is no read-more line and
   why a faint corner arrow is the only thing that says so. */
.proof-sec{padding-top:64px}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proof-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px 24px}
a.proof-item:hover{border-color:var(--accent)}
.proof-rule{display:block;width:46px;height:1px;background:var(--kicker-c);opacity:.5}
.proof-mk{display:flex;align-items:center;justify-content:center;gap:2px;color:var(--kicker-c)}
/* after dark the kicker gold turns pale blue, and these marks are the one place
   on the site that has to stay gold in both seasons */
html[data-season="luna"] .proof-mk{color:var(--accent)}
html[data-season="luna"] .proof-rule{background:var(--accent)}
.proof-mk b{font-family:var(--display);font-weight:var(--display-weight,400);font-size:34px;line-height:1;
  color:currentColor;font-variant-numeric:tabular-nums}
.proof-mk .sprig{width:18px;height:39px;fill:currentColor}
.proof-mk .sprig.flip{transform:scaleX(-1)}
.proof-mk .mag{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.proof-src{font-family:var(--display);font-weight:var(--display-weight,400);font-size:20px;color:var(--ink);line-height:1}
.proof-note{font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);max-width:22ch}
.proof-go{position:absolute;top:14px;right:14px;width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-soft);opacity:.4}
a.proof-item:hover .proof-go{color:var(--accent);opacity:1}
/* The boxes stay three across at every width; below the phone breakpoint they
   shrink rather than stack, which keeps them out of the way of the reviews.
   Letter-spacing is pulled in on the caption because at this width the tracking
   costs more room than the type does. */
@media(max-width:900px){
.proof{gap:14px}
.proof-item{padding:22px 14px 20px}
}
@media(max-width:700px){
.proof{gap:7px}
.proof-item{padding:14px 6px 12px;gap:6px}
.proof-rule{width:22px}
.proof-mk b{font-size:19px}
.proof-mk .sprig{width:10px;height:22px}
.proof-mk .mag{width:20px;height:20px}
.proof-src{font-size:14px}
.proof-note{font-size:9px;letter-spacing:.05em;max-width:none}
/* the corner arrow has nowhere to go in a 110px box, and the whole box is the
   tap target anyway */
.proof-go{display:none}
}
/* the guest-words cloud at the foot of the reviews page. One drawing per
   season, because the word colours are the season's own tokens set against
   that season's page background. A background-image rather than two <img>
   tags, so only the season on screen is ever fetched. */
.words-cloud{display:block;width:100%;max-width:840px;margin:0 auto;aspect-ratio:827/820;
  background:url("../assets/img/guest-words-sole.svg") center/contain no-repeat}
html[data-season="luna"] .words-cloud{background-image:url("../assets/img/guest-words-luna.svg")}
.words-sec .kicker{text-align:center;margin-bottom:24px}
@media(max-width:700px){
.words-cloud{max-width:none}
}
/* FAQ */
.faq-group{margin-bottom:36px}
.faq-group h2{font-size:24px;margin-bottom:8px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:20px 4px;font-weight:600;font-size:18px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:22px;color:var(--accent);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 4px 22px;color:var(--ink-soft);max-width:68ch}
/* rules */
.rules{list-style:none;counter-reset:rule;border-top:1px solid var(--line);max-width:820px}
.rules li{counter-increment:rule;display:grid;grid-template-columns:54px 1fr;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line)}
.rules li::before{content:counter(rule,decimal-leading-zero);font-family:var(--display);font-size:22px;color:var(--kicker-c);font-variant-numeric:tabular-nums}
.rules h2{font-size:17px;font-weight:600;font-family:var(--body);text-wrap:auto}
.rules p{font-size:15.5px;color:var(--ink-soft);margin-top:4px}
.callout{background:var(--bg-alt);border-left:3px solid var(--accent);border-radius:var(--radius);padding:20px 24px;margin:26px 0;max-width:820px}
.callout p{color:var(--ink-soft);font-size:16px}
.callout strong{color:var(--ink)}
/* seasonal announcement. Content and expiry date both live in js/site.js;
   the [data-announce] slots on pages are inert when nothing is running. */
.notice{max-width:820px;margin:30px 0 0;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius);padding:16px 22px}
.notice p{color:var(--ink-soft);font-size:16px}
.notice strong{color:var(--ink)}
/* gallery */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.chips button{font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:99px;padding:9px 18px;color:var(--ink-soft);background:var(--surface)}
.chips button:hover{border-color:var(--accent);color:var(--ink)}
.chips button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* row-order grid so the photo sequence reads left-to-right, top-to-bottom */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px;align-items:start}
.gallery-grid figure{margin:0;cursor:zoom-in}
.gallery-grid img{width:100%;border-radius:var(--radius);aspect-ratio:3/4;object-fit:cover}
.gallery-grid figcaption{font-size:12.5px;color:var(--ink-soft);padding:8px 2px 0;font-family:var(--label);letter-spacing:.06em}
.gallery-grid figure.hide{display:none}
@media(max-width:1000px){
.gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
.gallery-grid{grid-template-columns:1fr}
}
.lightbox{position:fixed;inset:0;z-index:200;background:#0e1216ee;display:none;align-items:center;justify-content:center;flex-direction:column;padding:30px}
.lightbox.open{display:flex}
/* Every gallery photo is portrait and 58 of 72 are exactly 3:4, so the viewer
   holds one fixed 3:4 frame. Matching photos fill it identically; the handful
   of taller or wider ones letterbox inside it rather than resizing the frame
   and shifting the caption under it. */
.lightbox img{width:min(94vw,calc(82vh * 3 / 4));aspect-ratio:3/4;height:auto;object-fit:contain;border-radius:4px}
/* reserve two lines so a wrapping caption doesn't nudge the photo up */
.lightbox figcaption{color:#cfd8db;font-size:13.5px;margin-top:14px;font-family:var(--label);letter-spacing:.08em;min-height:3.4em;text-align:center}
.lb-close{position:absolute;top:18px;right:22px;color:#fff;font-size:15px;font-family:var(--label);letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;border:1px solid #ffffff44;border-radius:99px}
.lb-close:hover{background:#ffffff22}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:99px;
  border:1px solid #ffffff44;background:#0e121666;color:#fff;display:flex;align-items:center;justify-content:center;z-index:1}
.lb-prev{left:18px}
.lb-next{right:18px}
.lb-prev:hover,.lb-next:hover{background:#ffffff22}
.lb-prev svg,.lb-next svg{width:22px;height:22px}
/* trim the padding on phones so the frame isn't shrunk below the 94vw it asks for */
@media(max-width:620px){
.lb-prev{left:8px}
.lb-next{right:8px}
.lb-prev,.lb-next{width:40px;height:40px}
.lightbox{padding:16px 12px}
}
/* contact */
.contact-grid{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
@media(max-width:900px){
.contact-grid{grid-template-columns:1fr}
}
.contact-list{list-style:none;border-top:1px solid var(--line)}
.contact-list li{display:flex;justify-content:space-between;gap:18px;padding:16px 4px;border-bottom:1px solid var(--line);font-size:16px}
.contact-list a{color:var(--accent);font-weight:600}
.demo-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.demo-form label{display:block;font-family:var(--label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:18px 0 8px}
.demo-form label:first-of-type{margin-top:0}
/* Soft-cornered fields, the same --radius the cards, callouts and photos use.
   These used to be derived from --btn-radius and came out as 68px pills, which
   made the form the only place on the site with that shape. The submit button
   stays a pill, because every other button on the site is one. */
.demo-form input,.demo-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg);color:var(--ink);padding:12px 14px;font:inherit;font-size:16px}
.demo-form input:focus,.demo-form textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.demo-form .btn{margin-top:24px;width:100%}
.form-note{display:none;margin-top:16px;padding:14px 16px;background:var(--bg-alt);border-radius:var(--radius);color:var(--ink);font-size:15.5px}
.form-note.show{display:block}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* CTA band + footer */
.cta-band{text-align:center;padding:72px 0}
.cta-band h2{font-size:clamp(28px,3.4vw,42px);max-width:20em;margin:0 auto}
.cta-band p{margin-top:14px;color:var(--ink-soft)}
.cta-band .btn{margin-top:30px}
.page-foot{background:var(--foot-bg);color:var(--foot-ink);padding:52px 0 40px;font-size:13.5px;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.6fr;gap:44px}
.page-foot h2{font-family:var(--label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--foot-head);margin-bottom:14px;text-wrap:auto}
.page-foot a{display:block;padding:4px 0}
.page-foot a:hover{color:var(--foot-head)}
.page-foot .foot-note{margin-top:14px;max-width:30ch}
/* Name over email over the button. The column this sits in is about 280px
   wide, so two fields cannot share a row without both becoming too narrow to
   read what you typed. Stacked, it stays one bordered object rather than
   three, and the hairlines read as the divisions of a small form. */
/* Name over email, with the button standing beside them: two rows rather than
   three, so asking for a name costs the footer almost no height.
   The right corners are half the block's height, which is what makes that end
   a true half round. They cannot be written as some large number and left to
   the browser to clamp: when radii overflow, CSS scales every corner by one
   factor, so an oversized right radius would flatten the left ones to nothing.
   The block measures exactly 60px tall, so 30px is that half. Two 28.5px rows,
   the hairline between them and the border top and bottom: change any of those
   and this number has to move with it.
   The rows carry an explicit line-height: at the footer's inherited 1.7 the
   text alone is 23px, so no amount of trimming the padding would have brought
   two rows near 60px.
   The button column and the field padding are as tight as the label allows,
   because every pixel spent on them is one the address cannot use: a column
   282px wide has no room to be generous with both.
   Auto-placement would put the second field in the button's column, so all
   three children name their cell. */
.news{display:grid;grid-template-columns:1fr 96px;border:1px solid var(--foot-line);
  border-radius:var(--radius) 30px 30px var(--radius);overflow:hidden;background:var(--foot-field)}
.news input{border:none;background:none;padding:6px 12px;font:inherit;font-size:13.5px;line-height:16.5px;color:var(--foot-head);outline:none;min-width:0}
.news input:nth-of-type(1){grid-column:1;grid-row:1}
.news input:nth-of-type(2){grid-column:1;grid-row:2;border-top:1px solid var(--foot-line)}
.news input:focus{background:var(--foot-field-focus,rgba(255,255,255,.04))}
/* A fixed column, not the width of the word: the label changes to "Sending"
   and then "Sent" as it works, and a button that resized would drag the
   fields and the round end with it every time. */
.news button{grid-column:2;grid-row:1 / 3;background:var(--accent);color:var(--accent-ink);
  font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  text-align:center;border-left:1px solid var(--foot-line)}
.news input:disabled{opacity:.6}
.news button:disabled{opacity:.65;cursor:default}
/* The answer to a signup: hidden until there is one, so the footer keeps its shape. */
.news-note{margin-top:9px;font-size:12.5px;line-height:1.5;max-width:34ch;opacity:0;max-height:0;overflow:hidden;transition:opacity .3s ease}
.news-note.show{opacity:1;max-height:9em}
.news-note.bad{color:var(--foot-head)}
.copyright{margin-top:32px;padding-top:18px;border-top:1px solid var(--foot-line);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:12px}
/* The three social links used to be words set in the smallest type on the page,
   sitting in the same line as the copyright, which is where an eye stops
   looking. They are buttons now: the logo is read before the word is, the
   border marks each one as something to press, and the whole thing is tall
   enough for a thumb. */
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;font-size:13px;line-height:1;
  color:var(--foot-head);background:var(--foot-field);border:1px solid var(--foot-line);border-radius:99px;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.socials svg{width:17px;height:17px;flex:none;fill:currentColor}
.socials a:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media(max-width:900px){
.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
.foot-grid{grid-template-columns:1fr}
}
/* ---------- guides & posts ---------- */
.post-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-family:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.post-meta span{border:1px solid var(--line);border-radius:99px;padding:6px 14px;background:var(--surface)}
.post-byline{margin-top:14px;font-family:var(--display);font-style:italic;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.sec-more{margin-top:32px;text-align:center}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){
.guide-grid{grid-template-columns:1fr}
}
.guide-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.guide-card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.guide-card .gc-body{padding:24px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1}
.guide-card h3{font-size:21px}
.guide-card p{font-size:15.5px;color:var(--ink-soft);flex:1}
.guide-card .c-link{font-family:var(--label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.fact-list{list-style:none;border-top:1px solid var(--line);max-width:820px}
.fact-list li{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:16px}
.fact-list li b{font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
@media(max-width:640px){
.fact-list li{grid-template-columns:1fr;gap:4px}
}
.press-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){
.press-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.press-grid{grid-template-columns:1fr}
}
.press-grid figure{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0}
.press-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}
.press-grid figcaption{padding:14px 16px;font-size:13px;color:var(--ink-soft)}
.press-grid figcaption a{color:var(--accent);font-weight:600;display:inline-block;margin-top:6px}
.dl-hero{display:grid;grid-template-columns:5fr 6fr;gap:56px;align-items:center}
@media(max-width:900px){
.dl-hero{grid-template-columns:1fr;gap:26px}
}
.dl-hero img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow,0 18px 44px #00000026)}
/* journal post pages: portrait hero beside the title, portrait figures in prose */
.post-hero{display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:center}
.post-hero .ph-img{margin:0}
.post-hero .ph-img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.post-hero .ph-img figcaption{font-family:var(--label);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px}
@media(max-width:900px){
.post-hero{grid-template-columns:1fr;gap:30px}
}
.post-fig{margin:28px 0;max-width:520px}
.post-fig img{width:100%;border-radius:var(--radius)}
.post-fig figcaption{font-family:var(--label);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:10px}
.post-fig.wide{max-width:100%}
.launch-map{max-width:420px}
.launch-map svg{display:block;width:100%;height:auto}
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:28px 0;max-width:720px}
.fig-pair .post-fig{margin:0}
@media(max-width:620px){
.fig-pair{grid-template-columns:1fr}
}
/* ---------- tighter rhythm on phones ----------
   A 56px band reads as generous on a 1440px screen and as a hole on a 390px
   one, where it is a seventh of everything the reader can see. Every
   section-level space steps down once here; nothing inside a section moves, so
   the type, the cards and the photos keep their own spacing. The homepage's
   blocks do the same at the foot of theme.css. */
@media(max-width:700px){
.page-hero{padding:44px 0 28px}
.sec{padding:40px 0}
.glance-sec{padding-top:34px}
.sec-head{margin-bottom:24px}
.cta-band{padding:52px 0}
.room-block{padding:32px 0}
.media-split{margin-bottom:36px}
.faq-group{margin-bottom:28px}
.prose h2{margin-top:28px}
.post-fig,.fig-pair{margin:22px 0}
.page-foot{padding:40px 0 32px}
.copyright{margin-top:26px}
}