/* Elysian Villa Retreat
   Palette pulled from the logo she chose. Gold is for the mark, the rules and
   the display type only, never body copy, because gold on ivory fails contrast.
   The luxury here comes from space and typography, not from decoration. */

:root{
  --ivory:#fdfcfa;
  --paper:#ffffff;
  --shell:#f7f3ec;
  --ink:#1c1a17;
  --ink-soft:#4d463e;
  --ink-faint:#6b6059;
  --gold-l:#f4e7bd;
  --gold:#c19a45;
  --gold-d:#8a6a24;
  --blush:#f0d5d0;
  --blush-pale:#fbf1ef;
  --line:rgba(28,26,23,.13);
  --line-soft:rgba(28,26,23,.07);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:760px;margin:0 auto}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,8vw,5.4rem);line-height:1.02}
h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1}
h3{font-size:1.5rem;line-height:1.25}
p{margin:0 0 1.1em;color:var(--ink-soft)}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft)}
strong{color:var(--ink);font-weight:600}

.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 18px;
}
.rule{width:54px;height:1.5px;background:var(--gold);margin:0 0 26px}
.rule.mid{margin-left:auto;margin-right:auto}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:rgba(253,252,250,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:15px;padding-bottom:15px}
.brand{font-family:var(--serif);font-size:1.32rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.brand small{display:block;font-family:var(--sans);font-size:.54rem;letter-spacing:.3em;color:var(--gold-d);margin-top:3px}
.top nav{display:flex;align-items:center;gap:30px}
.top nav a{
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:4px 0;
  border-bottom:1px solid transparent;
}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.top nav a.cta{
  background:var(--ink);color:var(--ivory);border:1px solid var(--ink);
  padding:11px 22px;letter-spacing:.12em;
}
.top nav a.cta:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
@media (max-width:820px){
  .top nav a:not(.cta){display:none}
  /* 44px minimum tap target. At 10px padding this measured 41px. */
  .top nav a.cta{padding:13px 17px;font-size:.72rem}
}

/* ---------- hero ---------- */
/* ⛔ TWO NUMBERS HERE ARE DELIBERATE AND APPROVED, 2026-09-12. Harold
   looked at the result and said "no it does not look too tight."
   TO PUT THEM BACK, if that ever changes:
     .hero padding-top  ->  clamp(56px,9vw,110px)
     .hero h1           ->  margin-bottom:26px
   That is the whole revert. Nothing else depends on them.

   WHY THEY CHANGED. Dr. the client asked for her welcome box to be visible
   before any scrolling on a desktop. It was not, and moving it up the
   stack could never fix that: on a 1280x900 laptop the logo alone runs
   195 to 824, so only 76px of screen remain below it and the box is
   87px tall. The space had to come from somewhere.

   It came from EMPTY SPACE, not from the logo. The logo's size is
   Harold's decision of 2026-08-15, logo over button, and shrinking it
   to fit a sentence would reverse a call he already made. So the 110px
   of air above it and the 26px gap below it pay for this instead: 96px
   recovered, box lands around 882 on a 900px screen.

   Measured after, at scroll zero: the box sits 800-886 on a 1280x900
   laptop (14px clear of the fold) and 688-774 on a 1440x800 one (26px
   clear). It holds on the shorter screen because the logo is capped at
   83vh and shrinks itself out of the way. Phones were never affected.

   If the desktop hero ever needs its air back, restore the two values
   above and accept that the box drops below the fold on a laptop while
   still showing on a 1080p monitor and well above the fold on every
   phone. */
.hero{padding:clamp(18px,3vw,34px) 0 clamp(50px,8vw,90px);text-align:center}
.hero h1{margin-bottom:10px}
/* The logo IS the h1. Reserving the aspect ratio stops the page jumping
   while a 400KB PNG loads. */
/* Bigger, Harold's call 2026-08-15. Was 560px. Her logo is the only
   picture on the page and it carries the whole brand, so it earns the
   room.

   Three caps, smallest wins. 92vw keeps it off the edges. The 88vh cap
   only bites on a short screen, a landscape phone or a netbook, where
   760px of logo would fill the whole window and bury everything else.
   It is width against vh because the image is 1.255 wider than tall,
   so 88vh of width is about 70vh of height.

   ⚠️ TRADE-OFF, measured, not guessed: at 760px the "Check your dates"
   button sits below the fold on a 1320x860 laptop. It was already
   marginal at 560px. There is no size that is both bigger AND keeps
   the button on screen at that height, so this is a deliberate choice
   of logo over button.

   The vh cap is 83, not 88, because option 1 is a taller shape than
   the logo this replaced (1.1877 against 1.2565). 83vh of width is
   about 70vh of height, which is what 88vh bought at the old ratio. */
.hero-logo{margin:0 auto 18px;max-width:min(760px,92vw,83vh)}
/* Must match the real pixels of logo-opt1-*.png, 1200x1010. A wrong
   ratio here makes the page jump while the PNG loads. */
.hero-logo img{width:100%;height:auto;aspect-ratio:600/505}
@media (max-width:640px){.hero-logo{max-width:90vw}}
/* ⚠️ THIS RULE SAT UNUSED UNTIL 2026-09-12 and its 34px bottom margin was
   tuned for a hero that no longer exists. The moment Dr. the client's welcome
   line started using it, that margin became real vertical space in the
   one place on the site that cannot afford any. 20px, measured. */
.hero .tag{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,3vw,2rem);color:var(--gold-d);margin:0 0 20px;
}
/* ⛔ THE BOX AROUND HER WELCOME LINE. Dr. the client asked for this
   specifically, 2026-09-12: a clear, highly visible note that a visitor
   meets before they start looking for anything, boxed the way it is
   boxed on her printed brochure card.

   ⚠️ IT IS BOXED IN THE SITE'S OWN LANGUAGE, NOT HERS. Harold, same
   day: "do not want to the site to be changed to look more like her
   brochure. She wants it called out more about being local friendly
   that is it." So this borrows `.modal-card`'s existing treatment,
   white paper inside a single gold hairline, which is how every other
   boxed thing on this site already looks. It does NOT borrow the
   brochure's script face, its lotus dividers or its cream ground.

   Square, no radius, on purpose: nothing else on this site has a
   rounded corner. */
.hero .hero-note{
  /* Transparent, Harold's call 2026-09-12. It was white paper, copying
     `.modal-card`. The hero already sits on its own soft ground and a
     white panel floating on it read as a second surface; the hairline
     alone is enough to say "box" without introducing one. */
  background:transparent;
  border:1px solid var(--gold);
  padding:15px 24px;
  /* Wide enough that the sentence breaks onto TWO lines on a desktop,
     not three. At 32px italic a 32rem box gave three, and a one-sentence
     note that runs to three ragged lines reads like an accident rather
     than a deliberate callout. Measured, not guessed. */
  max-width:46rem;
  margin:0 auto 20px;
}
.hero .lede{max-width:56ch;margin:0 auto 40px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ⛔ THE MOBILE HERO STACK, TIGHTENED 2026-09-12. DO NOT LOOSEN THESE
   WITHOUT RE-MEASURING THE BUTTON ON A PHONE WIDTH.

   Clarke FAILED Dr. the client's welcome line twice over this. The line is
   about 90px tall on a phone once its margin is counted, and it pushed
   "Check your dates" from fully visible (top 675px on a 375x812 screen)
   to mostly cut off by the fold. On a booking site, on the device most
   guests actually use, that is the one control that turns a visitor into
   a booking.

   ⚠️ THE TARGET IS NOT "ABOVE 812". A phone shows an expanded address
   bar on first load, before the visitor has scrolled anything, and that
   commonly eats 50-90px of the 812 a devtools viewport reports. So the
   button needs real headroom, not a number that only survives in
   devtools. Measured target: bottom of "Check your dates" at or under
   ~752px at 375x812. Clarke's second FAIL was 27px of clearance, which
   passed in the tool and would still have clipped on a real handset.

   The logo SIZE is NOT touched. That is Harold's documented decision of
   2026-08-15, logo over button, and buying space for a sentence by
   reversing a choice he already made is not on the table. Only the gaps
   move.

   ⚠️ WHY THE LOGO GAP IS WRITTEN `.hero h1.hero-logo` AND NOT
   `.hero-logo`. It was `.hero-logo` first and it did NOTHING. The logo
   IS the h1, and `.hero h1{margin-bottom:26px}` up at line 84 is class
   plus element, which outranks a bare class no matter that this rule is
   later and inside a media query. The computed margin stayed 26px and
   the rule sat here looking like it was doing work. Specificity beats
   source order; a media query adds none. Found by Clarke on re-review. */
@media (max-width:640px){
  .hero{padding-top:18px}
  .hero h1.hero-logo{margin-bottom:8px}
  .hero .lede{margin-bottom:10px}
  .hero .tag{margin-bottom:8px}
  /* The box costs 2px of border plus its padding, and that comes
     straight off the button's clearance. Tighter here than on
     desktop for exactly that reason. */
  .hero .hero-note{padding:8px 16px}
}

.btn{
  display:inline-block;font:inherit;font-size:.86rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:17px 38px;text-decoration:none;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:var(--ivory);
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gold)}
.btn.ghost:hover{background:var(--gold-d);color:#fff;border-color:var(--gold-d)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn[disabled]:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory)}

/* ---------- the four steps ---------- */
.steps{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.steps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:44px 26px;text-align:center;border-left:1px solid var(--line-soft)}
.step:first-child{border-left:0}
.step .n{font-family:var(--serif);font-size:1.05rem;color:var(--gold);display:block;margin-bottom:12px}
.step h3{font-size:1.32rem;margin-bottom:8px}
.step p{font-size:.9rem;margin:0;color:var(--ink-faint)}
@media (max-width:780px){
  .steps .wrap{grid-template-columns:repeat(2,1fr)}
  .step{border-top:1px solid var(--line-soft)}
  .step:nth-child(-n+2){border-top:0}
  .step:nth-child(odd){border-left:0}
}

/* ---------- generic section ---------- */
section{padding:clamp(64px,10vw,120px) 0;position:relative}
section.tint{background:var(--shell)}
section.paper{background:var(--paper)}

/* A clicked menu link used to land with the heading tucked under the
   sticky header. This is the fix for anyone whose browser does the
   jumping, which is everyone with motion switched off. */
section[id],main[id]{scroll-margin-top:99px}

/* ---------- the gold line work ----------
   The decorative SVGs. They bleed off the section edge on purpose and
   are cropped by it.

   overflow:CLIP, not overflow:hidden. hidden would turn every section
   into a scroll container and break the sticky vision quote. clip does
   the same cropping without that side effect, which is exactly what it
   was added to the language for. */
section{overflow:clip}
.wrap{position:relative;z-index:1}

.orn{
  position:absolute;z-index:0;pointer-events:none;
  fill:none;stroke:var(--gold);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke; /* stays a hairline at any size */
  height:auto;
  /* THE DIAL. This one number is how loud the gold line work is.
     .20 is a whisper you notice on the second look, which is the
     brief. Above about .30 it starts competing with her logo and the
     page stops feeling expensive. Change it here and in the two
     matching rules in motion.css, or they will disagree mid fade. */
  opacity:.20;
}
/* Six placements. Deliberately uneven, different shapes, sizes and
   angles, so it reads as considered rather than tiled.

   Angle and flip are held in --rot and --flip rather than written
   straight into transform, because motion.css also needs to move
   these on scroll and a second transform would wipe the first. */
.orn{transform:rotate(var(--rot,0deg)) scaleX(var(--flip,1))}
.orn--a{top:-70px;right:-90px;width:clamp(180px,26vw,360px);--rot:-8deg}
.orn--b{bottom:-110px;left:-130px;width:clamp(230px,34vw,470px);--rot:9deg}
.orn--c{top:40px;right:-160px;width:clamp(240px,36vw,520px);--rot:4deg}
.orn--d{bottom:-90px;left:-150px;width:clamp(200px,30vw,420px);--rot:-14deg;--flip:-1}
.orn--e{top:-90px;right:-120px;width:clamp(220px,32vw,450px);--rot:15deg}
.orn--f{bottom:-70px;left:-110px;width:clamp(170px,24vw,330px);--rot:-6deg;--flip:-1}
.orn--g{top:-60px;right:-140px;width:clamp(190px,28vw,400px);--rot:11deg}

/* On a phone they are cropped down to slivers and cost more than they
   give, so below 720px only two survive. */
@media (max-width:720px){
  .orn--a,.orn--d,.orn--f,.orn--g{display:none}
  .orn{opacity:.16}
}

/* No overflow:clip means no cropping, which means a sideways scrollbar.
   Older browser, no ornaments. Nothing else changes. */
@supports not (overflow:clip){
  .orn{display:none}
}
.head{max-width:660px;margin-bottom:52px}
.head.mid{margin-left:auto;margin-right:auto;text-align:center}
.head p:last-child{margin-bottom:0}

/* ---------- about story ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,66px);align-items:start}
/* The gap deliberately survives the stack. Zeroing it here welded the
   last paragraph of column one to the first of column two, because
   the rule below takes the trailing margin off. */
@media (max-width:860px){.story{grid-template-columns:1fr}}
.story p:last-child{margin-bottom:0}
.story-note{
  max-width:74ch;margin:clamp(30px,4vw,40px) 0 0;
  padding-top:22px;border-top:1px solid var(--line-soft);
}

/* Her closing line. Gold hairlines above and below instead of quote marks,
   because the page already uses the hairline as its one ornament. */
.credo{
  margin:clamp(46px,7vw,80px) auto;max-width:22ch;text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.32;color:var(--ink);
}
.credo::before,.credo::after{
  content:"";display:block;width:54px;height:1.5px;background:var(--gold);margin:0 auto;
}
.credo::before{margin-bottom:clamp(20px,3vw,30px)}
.credo::after{margin-top:clamp(20px,3vw,30px)}

/* ---------- vision ---------- */
.vision{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,86px);align-items:start}
.vision blockquote{
  margin:0;padding:0 0 0 30px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.42;color:var(--ink);
}
@media (max-width:860px){.vision{grid-template-columns:1fr}}

/* ---------- the atmosphere mosaic ----------
   Rebuilt 2026-08-19. The first version was six panels at nearly the same
   size, most of them 4:3, which read as a contact sheet rather than as a
   magazine spread. Harold's note: "not just square, it looks boring."

   This is a row-based masonry instead. The grid is 12 columns by a fixed
   row unit, and every figure claims a different number of columns AND a
   different number of rows, so no two frames share a shape: a standing
   portrait, a wide one, two mid blocks, a tall crop, and a panorama that
   closes the band edge to edge.

   The row unit is clamped rather than a bare vw so the band cannot grow
   absurdly tall on a wide monitor, where the content column stops at its
   max width but vw keeps climbing.

   Placement is explicit (grid-row / grid-column), so the DOM order is free
   to stay in reading order for a screen reader and for the stagger. */
.mosaic{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(42px,4.6vw,72px);
  gap:clamp(10px,1.4vw,18px);
}
.mosaic figure{margin:0;overflow:hidden;background:var(--shell);position:relative}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block}
/* A hairline of gold on the inside edge, the same ornament the rest of
   the page uses, so photographs do not arrive as bare rectangles. */
.mosaic figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(193,154,69,.28);
}

/* SEVEN frames, not eight. The wide one that used to sit at the top right was
   `atm-doorlight`, and it photographed the same landing corner as the two
   chairs now in `.m-mid` — Harold, 2026-08-25: "remove this image now that we
   have the other one". Deleting it left a hole beside the candles, so the band
   was re-laid as three unequal pairs closing on the panorama rather than
   4-3-2-1 with a gap in the first row.

   Each frame's box still roughly matches the shape of the photograph in it, so
   object-fit has little to crop. If a picture is ever swapped, check that
   pairing again: the box wins, and a portrait dropped into a landscape frame
   loses its top and bottom without warning. */
/* Band one: a standing portrait against one wide frame. */
.m-tall   {grid-column:1/5;   grid-row:1/span 6}
.m-tea    {grid-column:5/13;  grid-row:1/span 6}
/* Band two: an even pair, both landscape. */
.m-mid    {grid-column:1/7;   grid-row:7/span 5}
.m-feature{grid-column:7/13;  grid-row:7/span 5}
/* Band three: the standing crop, then the wider one. */
.m-port   {grid-column:1/6;   grid-row:12/span 6}
.m-care   {grid-column:6/13;  grid-row:12/span 6}
/* Band four: the panorama closes it, full width. */
.m-strip  {grid-column:1/-1;  grid-row:18/span 4}

/* A very slow lift on hover. Nothing moves far enough to notice as motion,
   it just stops the band feeling like flat paper. Pointer devices only, and
   the reduced-motion switch turns it off with everything else. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .mosaic img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .mosaic figure:hover img{transform:scale(1.045)}
}

/* On a phone the grid collapses to one column and each frame carries its
   own shape, which is where the aspect ratios have to be restated: the row
   spans above no longer apply once every figure is full width. */
@media (max-width:900px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:auto}
  .mosaic figure{grid-column:1/-1;grid-row:auto}
  .m-tall{aspect-ratio:3/4}
  .m-wide{aspect-ratio:3/2}
  .m-mid{aspect-ratio:60/40}
  .m-port{aspect-ratio:2/3}
  .m-feature{aspect-ratio:60/40}
  .m-tea{aspect-ratio:13/8}
  .m-care{aspect-ratio:23/20}
  /* The panorama is 18:5 on a desktop, where it is a thousand pixels
     wide and reads as a closing strip. At 335px that is a 93px sliver
     with nothing legible in it, so the phone gets a deeper crop. */
  .m-strip{aspect-ratio:2/1}
}

/* ---------- rooms ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
@media (max-width:900px){.rooms{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.room{background:var(--paper);border:1px solid var(--line-soft);display:flex;flex-direction:column}
.room .shot{
  aspect-ratio:4/3;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, #fffdf9 0%, transparent 60%),
    linear-gradient(150deg,#f4ece0 0%,#efe4d4 44%,#e9dcc9 100%);
  display:grid;place-items:center;
}
.room .shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The hairline inside each room photograph. It was white at .55 and inset
   14px, drawn back when these cards held dark placeholder panels and a pale
   line read as the mat around a framed print. Against Monday's real photos —
   bright rooms, white walls, white bedding — it read as a stray rectangle
   floating over the bed, which is what made Harold ask what it was.
   Now the same gold as the atmosphere band, at the same weight and opacity,
   so the two sets of photographs are edged the same way. The 14px inset stays:
   the band's frames sit edge to edge, but these sit inside a bordered card,
   and a line at the edge would double up against the card's own border. */
.room .shot::after{
  content:"";position:absolute;inset:14px;
  box-shadow:inset 0 0 0 1px rgba(193,154,69,.28);
  pointer-events:none;
}
.room .shot span{
  position:relative;font-family:var(--serif);font-size:2.7rem;
  color:rgba(138,106,36,.42);letter-spacing:.1em;
}
.room .body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.room h3{margin-bottom:6px}
.room .sleeps{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:14px}
.room p{font-size:.94rem;flex:1}
/* Her own line for each room, from the Rooms email 2026-08-16. It sits between
   the name and the description, so it must NOT take the flex growth that makes
   the description fill the card, or the three cards stop lining up. */
.room .motto{
  flex:0 0 auto;margin-bottom:12px;
  font-family:var(--serif);font-size:1.06rem;line-height:1.4;color:var(--ink);
}
.room .motto em{font-style:italic}
/* flex:0 0 auto matters. `.room p` sets flex:1 and the rate line is a <p>, so
   without this the rate and the description both grow and split the slack
   between them. The three descriptions are different lengths, so the three
   rate lines then land at three different heights and the row looks broken.
   Only the description grows now, and the rates sit level across all three. */
.room .rate{
  flex:0 0 auto;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-family:var(--serif);font-size:1.2rem;color:var(--ink);
}
.room .rate em{font-family:var(--sans);font-style:normal;font-size:.82rem;color:var(--ink-faint)}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,54px)}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.svc article{border-top:1px solid var(--line);padding-top:26px}
.svc h3{margin-bottom:12px}
.svc ul{margin:0 0 14px;padding:0;list-style:none}
.svc li{position:relative;padding-left:20px;margin-bottom:7px;font-size:.95rem;color:var(--ink-soft)}
.svc li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg);
}
.fineprint{font-size:.85rem;color:var(--ink-faint);font-style:italic;margin:0}

/* The pharmacy card is the only service that spans both columns. It carries
   a real third-party address, so it gets its own frame rather than sitting
   in the prose where it could read as our own location. */
.svc article.wide{grid-column:1/-1}
.pharm{
  background:var(--shell);border:1px solid var(--line-soft);
  border-left:3px solid var(--gold);
  padding:20px 24px;margin:0 0 16px;max-width:44ch;
}
.pharm .eyebrow{margin-bottom:10px}
.pharm p{margin:0}
/* Scoped with .pharm so these beat the .pharm p reset above (0,2,0 vs 0,1,1). */
.pharm .pharm-name{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-bottom:4px}
.pharm .pharm-line{font-size:.92rem;color:var(--ink-soft)}
.pharm-line a{color:var(--gold-d);text-decoration:none;border-bottom:1px solid rgba(193,154,69,.4)}
.pharm-line a:hover{border-bottom-color:var(--gold-d)}

/* ---------- booking ---------- */
.booking{background:var(--paper);border:1px solid var(--line);padding:clamp(26px,4vw,52px)}
.bstep{border-top:1px solid var(--line-soft);padding:32px 0}
.bstep:first-of-type{border-top:0;padding-top:0}
.bstep>h3{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.bstep>h3 .n{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold-d);border:1px solid var(--gold);border-radius:50%;
  width:26px;height:26px;display:inline-grid;place-items:center;flex:none;
}
.bstep .why{font-size:.92rem;color:var(--ink-faint);margin:0 0 20px 40px}
@media (max-width:640px){.bstep .why{margin-left:0}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}

label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
label .opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-faint);opacity:.8}
input[type=text],input[type=tel],input[type=email],input[type=date],input[type=time],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--ivory);border:1px solid var(--line);
  padding:13px 14px;border-radius:0;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold);outline-offset:-1px;background:#fff}
textarea{min-height:96px;resize:vertical}
.err{color:#9a2f1c;font-size:.86rem;margin:7px 0 0;display:none}
.err.show{display:block}
input.bad,textarea.bad{border-color:#9a2f1c;background:#fdf6f4}

.surgery-box{
  background:var(--blush-pale);border:1px solid var(--blush);
  padding:22px 22px 24px;margin-top:6px;
}
.surgery-box .grid2{margin-top:0}

.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:720px){.picks{grid-template-columns:1fr}}
.pick{
  position:relative;display:block;border:1px solid var(--line);background:var(--ivory);
  padding:20px 18px;cursor:pointer;text-align:left;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.pick:hover{border-color:var(--gold)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick:has(input:checked){
  border-color:var(--gold-d);background:#fff;
  box-shadow:inset 0 0 0 1px var(--gold-d);
}
.pick:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.pick .name{font-family:var(--serif);font-size:1.28rem;display:block;margin-bottom:4px}
.pick .meta{font-size:.78rem;color:var(--ink-faint);display:block}

/* a room somebody already has */
.pick.is-taken{
  opacity:.62;cursor:not-allowed;border-style:dashed;background:var(--shell);
}
.pick.is-taken:hover{border-color:var(--line)}
.pick.is-taken .name{text-decoration:line-through;text-decoration-thickness:1px}
.pick-taken{
  display:inline-block;margin-top:10px;font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8a3b26;
}

/* the house is full */
.full-alert{
  border-left:5px solid var(--gold-d);background:#fbf1ee;
  padding:22px 26px;margin:22px 0 0;
}
.full-alert[hidden]{display:none}
.full-alert b.hd{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.7rem);color:var(--ink);margin-bottom:6px;
}
.full-alert p{margin:0;font-size:.96rem}

.nights-strip{margin-top:16px}
.nights-strip[hidden]{display:none}
.ribbon{display:flex;gap:4px;margin-top:8px}
.ribbon i{flex:1;max-width:34px;height:7px;background:var(--gold);opacity:.55}
.nights-label{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

.sum-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.95rem}
.sum-row span{color:var(--ink-soft)}
.sum-empty{font-size:.95rem;color:var(--ink-faint);margin:0}

.extras{display:grid;gap:12px}
.extra{
  display:flex;align-items:flex-start;gap:13px;
  border:1px solid var(--line);background:var(--ivory);padding:16px 18px;cursor:pointer;
}
.extra:hover{border-color:var(--gold)}
.extra input{margin:4px 0 0;accent-color:var(--gold-d);width:17px;height:17px;flex:none}
.extra .t{font-weight:600;font-size:.97rem;color:var(--ink)}
.extra .d{font-size:.86rem;color:var(--ink-faint)}

/* summary */
.sum{background:var(--shell);border:1px solid var(--line);padding:26px 26px 28px;margin-top:34px}
.sum h3{font-size:1.35rem;margin-bottom:16px}
.sum dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.95rem}
.sum dt{color:var(--ink-faint)}
.sum dd{margin:0;text-align:right;color:var(--ink)}
.sum .total{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;
}
.sum .total .k{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.sum .total .v{font-family:var(--serif);font-size:1.8rem}
.sum-fine{font-size:.84rem;color:var(--ink-faint);margin:16px 0 0}
.sum .btn{width:100%;margin-top:20px;text-align:center}

/* How would you like to pay, added 2026-09-10 with the revision.
   Reuses .pick (the room-choice card) rather than inventing a new
   look for "pick one of two things" -- same border, same gold
   highlight on :checked, same focus ring. .paychoice only overrides
   the spacing a stacked pair needs inside the narrower .sum card;
   it is deliberately NOT a grid like .picks (three across) because
   two cards at .sum's own width read better stacked than squeezed
   side by side. */
.paychoice{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.paychoice .pick{padding:14px 16px}
.paychoice .name{font-size:1.05rem}
.pc-caption{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 8px;
}

/* cancellation policy, added 2026-08-18 */
.cancel-policy{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.cancel-note{font-size:.86rem;color:var(--ink-soft);margin:0 0 8px}
.cancel-details summary{
  font-size:.8rem;color:var(--gold-d);cursor:pointer;
  letter-spacing:.02em;list-style:none;
}
.cancel-details summary::-webkit-details-marker{display:none}
.cancel-details summary::before{content:"+ ";font-weight:600}
.cancel-details[open] summary::before{content:"\2212 "} /* minus sign */
.cancel-details ul{
  margin:10px 0 0;padding:0 0 0 18px;
  font-size:.82rem;color:var(--ink-faint);line-height:1.6;
}

.alert{
  border-left:4px solid var(--gold-d);background:#fbf5e9;
  padding:16px 20px;margin:18px 0 0;font-size:.95rem;color:var(--ink);
  display:none;
}
.alert.show{display:block}
.alert.warn{border-left-color:#9a2f1c;background:#fdf1ee}

/* ---------- reviews ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,30px)}
@media (max-width:900px){.revs{grid-template-columns:1fr}}
.rev{background:var(--paper);border:1px solid var(--line-soft);padding:28px 26px}
.rev .stars{color:var(--gold);letter-spacing:.18em;font-size:.95rem;margin-bottom:12px}
.rev p{font-family:var(--serif);font-size:1.16rem;line-height:1.5;color:var(--ink);margin-bottom:14px}
.rev .who{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- contact + footer ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.cbox{border-top:1px solid var(--line);padding-top:24px}
.cbox h3{font-size:1.28rem;margin-bottom:10px}
.cbox a{color:var(--gold-d);text-decoration:none;border-bottom:1px solid rgba(193,154,69,.4)}
.cbox a:hover{border-bottom-color:var(--gold-d)}

footer{background:var(--ink);color:#cfc7bb;padding:64px 0 44px;font-size:.9rem}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:44px}
@media (max-width:780px){footer .fgrid{grid-template-columns:1fr;gap:30px}}
footer .brand{color:var(--gold-l);text-decoration:none}
footer .brand small{color:rgba(244,231,189,.6)}
footer h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:600;font-family:var(--sans)}
footer p{color:#cfc7bb}
footer a{color:#e6ddd0}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin-bottom:8px}
footer li a{text-decoration:none;color:#cfc7bb}
footer li a:hover{color:var(--gold-l)}
.legal{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;font-size:.8rem;color:#9a9188;line-height:1.7}
.legal p{color:inherit;margin-bottom:10px}
.legal p:last-child{margin-bottom:0}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:90;
  background:rgba(28,26,23,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:24px;
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--paper);border:1px solid var(--gold);
  max-width:520px;width:100%;padding:38px 34px 34px;text-align:center;
}
.modal-card h3{font-size:1.9rem;margin-bottom:16px}
.modal-sum{margin:0 0 18px}
.modal-sum p{margin:0 0 6px;font-size:.96rem;color:var(--ink-soft)}
.modal-card .btn{margin-top:20px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

/* Visually hidden, but read by Google and by screen readers. Used for the text
   half of the H1 and for the hidden H2 over the four-step block.
   Clip-path plus 1px is the version that survives; `display:none` and
   `visibility:hidden` would hide it from screen readers too, and a plain
   `left:-9999px` on a block element can drag the page width out sideways. */
.vh{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

@media print{.top,.hero-actions,.booking{display:none}}

/* ---------- the phone menu ----------
   Hidden on a desktop, where the four links sit in the header already. Below
   820px those links are display:none and this takes over — before it existed,
   the header on a phone offered exactly one destination, "Check dates".

   Built on <details>/<summary> so it works with JavaScript switched off. */
.mnav{display:none;position:relative}
.mnav summary{
  list-style:none;cursor:pointer;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);
  /* 46px tall, over the 44px minimum tap target. */
  padding:14px 4px;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{
  content:"";display:inline-block;vertical-align:middle;
  margin-left:8px;width:7px;height:7px;
  border-right:1px solid var(--gold-d);border-bottom:1px solid var(--gold-d);
  transform:translateY(-2px) rotate(45deg);
}
.mnav[open] summary{color:var(--ink)}
.mnav[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.mnav ul{
  position:absolute;right:-4px;top:100%;z-index:70;
  margin:8px 0 0;padding:6px 0;list-style:none;min-width:190px;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(28,26,23,.14);
}
.mnav li{margin:0}
/* ⚠️ `.top nav .mnav`, not just `.mnav`. The rule that hides the header links
   on a phone is `.top nav a:not(.cta){display:none}`, and :not() carries the
   specificity of its argument, so that selector scores higher than a plain
   `.mnav ul a` and swallowed the menu's own links — the panel opened 14px
   tall with five invisible items in it. Measured, not spotted by eye. Keep
   the `.top nav` prefix on anything in here that styles an <a>. */
.top nav .mnav ul a{
  display:block;padding:13px 20px;   /* 45px tall */
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;border-bottom:0;
}
.top nav .mnav ul a:hover,.top nav .mnav ul a:focus{background:var(--shell);color:var(--ink)}
@media (max-width:820px){
  .mnav{display:block}
}

/* ---------- the room galleries ----------
   Three photographs behind each room card. Harold, 2026-08-19: "if I hover or
   click the image of the room the view should change to another image of that
   room."

   The images stack. Only the first one has a real `src` in the markup; the
   others carry `data-src` and are fetched the first time somebody hovers or
   taps, so a visitor who never touches a card downloads three photographs
   instead of nine.

   ⚠️ The same layering rule as every other cross fade on this site: the
   arriving photograph sits ABOVE and fades in alone while the one it replaces
   holds at full opacity underneath. Fading one out while the other fades in
   lets the card's cream ground show through at the halfway point. */
.room .shot{cursor:pointer}
/* The dissolve. .8s and eased at both ends, so one photograph melts into
   the next instead of switching. app.js holds the swap back until the
   arriving image has decoded, or this fades in on an empty element and
   the result reads as a cut. */
.room .shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:0;transition:opacity .8s cubic-bezier(.4,0,.2,1);
}
.room .shot img.is-on{opacity:1;z-index:2}
.room .shot img.is-prev{opacity:1;z-index:1}
/* The gold hairline has to outrank the photographs now that they are
   positioned, or it paints underneath them and disappears. */
.room .shot::after{z-index:3}

.room .shot .dots{
  position:absolute;z-index:4;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:7px;pointer-events:none;
}
.room .shot .dots i{
  width:6px;height:6px;border-radius:50%;
  background:rgba(253,252,250,.55);
  box-shadow:0 1px 3px rgba(28,26,23,.35);
  transition:background .3s ease;
}
.room .shot .dots i.is-on{background:var(--gold-l)}

/* Keyboard users get the same thing, and can see where they are. */
.room .shot:focus-visible{outline:2px solid var(--gold-d);outline-offset:3px}

/* ---------- the room summary under the booking picker ----------
   Filled by app.js from the room card, empty in the markup. It only takes up
   space once there is something in it, so the form does not jump around on an
   untouched page. */
.pick-summary:empty{display:none}
.pick-summary{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:16px;padding:16px;
  background:var(--paper);border:1px solid var(--line-soft);
  border-left:3px solid var(--gold);
}
.pick-summary img{
  width:112px;flex:0 0 112px;aspect-ratio:4/3;object-fit:cover;
}
.pick-summary .name{
  font-family:var(--serif);font-size:1.16rem;display:block;margin-bottom:2px;
}
.pick-summary .motto{
  font-family:var(--serif);font-style:italic;color:var(--gold-d);
  font-size:.95rem;display:block;margin-bottom:6px;
}
.pick-summary p{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink-faint)}
@media (max-width:520px){
  .pick-summary img{width:84px;flex-basis:84px}
  .pick-summary{gap:14px;padding:14px}
}

/* ---------- the FAQ ----------
   <details> again, so the questions open and close with no JavaScript, and so
   a browser's own find-in-page can reach the answers. */
.faq{border-top:1px solid var(--line-soft)}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;
  font-family:var(--serif);font-size:clamp(1.12rem,2vw,1.32rem);
  color:var(--ink);padding:22px 44px 22px 0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--gold-d)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* The plus/minus, drawn rather than typed so it lines up at every size. */
.faq-item summary::before,
.faq-item summary::after{
  content:"";position:absolute;right:8px;top:50%;background:var(--gold-d);
  transition:transform .22s ease,opacity .22s ease;
}
.faq-item summary::before{width:15px;height:1.5px;margin-top:-.75px}
.faq-item summary::after{width:1.5px;height:15px;right:14.75px;margin-top:-7.5px}
.faq-item[open] summary::after{transform:rotate(90deg);opacity:0}
.faq-item[open] summary{color:var(--gold-d)}
.faq-a{padding:0 44px 24px 0}
.faq-a p{margin:0;color:var(--ink-soft)}

/* A price sitting under a service list. Added 2026-08-21 when transportation
   stopped being included and started costing $150 — the list above it reads as
   "what you get", so the charge has to be impossible to miss. */
.svc .price-note{
  margin:-4px 0 10px;font-size:.92rem;color:var(--ink);
  padding:10px 14px;background:var(--shell);border-left:3px solid var(--gold);
}

/* ---------- the way through to See The House ----------
   Added 2026-08-21. Sits at the foot of the rooms, which is the moment
   somebody has just read about three suites and seen one photograph of each
   and wants more. The line under the button says what they get, so it is not
   a mystery link. */
.see-house{text-align:center;margin-top:clamp(38px,5vw,58px)}
.see-house span{
  display:block;margin-top:16px;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.04em;
  color:var(--ink-faint);
}

/* ---------- a photograph inside a section ----------
   Added 2026-08-25. the client sent four pictures of guests actually using the
   house — the first people on this site who are really here — and Harold's
   instruction was that they "can be spread out throughout the site in a nice
   elegant manner", not stacked into one block.

   So each one sits in the section it belongs to: the group on the patio under
   the story about arriving somewhere alone, the porch under the four steps of
   a stay, the suite under the rooms, the quiet corner under the services. One
   class, four placements, no new layout ideas.

   The gold hairline is the same inset the mosaic and the gallery tiles use,
   so a photograph in a text section reads as part of the same site rather
   than something dropped in. `--photo-max` keeps a wide picture from
   out-shouting the prose it follows; a caption is optional and stays quiet. */
.section-photo{
  margin:clamp(38px,5vw,64px) auto 0;
  max-width:var(--photo-max,860px);
  /* Two of these sit inside a .wrap that is itself a grid (the four steps of a
     stay, the service cards). Without this the figure becomes one more grid
     item and gets squeezed into a single column - it came out 212px wide the
     first time. Harmless everywhere else: a stray grid-column on a block-level
     element does nothing. */
  grid-column:1 / -1;
}
.section-photo img{
  display:block;width:100%;height:auto;
}
.section-photo .frame{
  position:relative;overflow:hidden;background:var(--shell);
}
.section-photo .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(193,154,69,.28);
}
.section-photo figcaption{
  margin-top:14px;text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.6vw,1.18rem);
  color:var(--ink-faint);
}
/* Full width of the wrap, for the one that carries a section on its own. */
.section-photo.wide{--photo-max:100%}
/* #stay is set to padding:0 in the markup, so a picture at its foot would
   otherwise butt straight into the next section. */
.steps .section-photo{margin-bottom:clamp(38px,5vw,64px)}

/* Four photographs, four shapes, four widths, and not all centred.
   Harold, 2026-08-25: "I don't want the images to all be squares give it some
   dimension." A 21:9 panorama, a 3:2 landscape pulled left, a 4:5 portrait
   pushed right, and a 16:9 across the full column. The alignment matters as
   much as the ratio: four centred rectangles read as a template no matter what
   shape they are. Below 900px they all go full width and centred, because on a
   phone there is no room for an offset and it only makes the column ragged. */
.section-photo.pano{--photo-max:100%}
.section-photo.left{--photo-max:760px;margin-left:0;margin-right:auto}
.section-photo.right{--photo-max:480px;margin-left:auto;margin-right:0}
@media (max-width:900px){
  .section-photo.left,
  .section-photo.right{--photo-max:100%;margin-left:auto;margin-right:auto}
}

/* ---------- curved corners on every photograph ----------
   Harold, 2026-08-25: "they all look the same same with no curved edges."
   He was right. Every picture on the site was a hard-cornered rectangle, so
   varying the SHAPES did not read as variety, it read as the same box at
   different sizes.

   One radius token, used by the mosaic, the section photographs, the trio in
   the rooms, the film and the gallery tiles, so nothing is rounded a little
   differently from anything else. The gold hairline is drawn by an ::after
   with an inset shadow, which does NOT follow the parent's radius on its own -
   it has to be given the same value or a square line shows through the
   rounded corner. That is the part worth remembering. */
/* Big enough to actually see. The first attempt at 10px was
   technically rounded and read as square, which was the complaint. */
:root{--photo-radius:clamp(14px,1.7vw,24px)}

.mosaic figure,
.mosaic figure::after,
.section-photo .frame,
.section-photo .frame::after,
.photo-trio .frame,
.photo-trio .frame::after,
.film-frame,
.film-frame::after{border-radius:var(--photo-radius)}

/* ---------- the three-up beside the suites ----------
   Two stacked stills on the left, the portrait standing full height on the
   right. The left column is told to stretch, so the two of them together come
   out exactly as tall as the portrait rather than roughly as tall. */
.photo-trio{
  display:grid;
  grid-template-columns:1.12fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:clamp(12px,1.6vw,20px);
  margin:clamp(38px,5vw,64px) auto 0;
  grid-column:1 / -1;
}
.photo-trio figure{margin:0;min-width:0}
.photo-trio .frame{
  position:relative;overflow:hidden;background:var(--shell);height:100%;
}
.photo-trio .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(193,154,69,.28);
}
.photo-trio img{display:block;width:100%;height:100%;object-fit:cover}
.pt-a{grid-column:1;grid-row:1}
.pt-b{grid-column:1;grid-row:2}
.pt-main{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column}
.pt-main .frame{flex:1}
.photo-trio figcaption{
  margin-top:14px;text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.6vw,1.18rem);color:var(--ink-faint);
}
/* On a phone the three simply stack, tallest last. Two columns at 335px would
   make the pair on the left postage stamps. */
@media (max-width:900px){
  .photo-trio{grid-template-columns:1fr;grid-template-rows:auto}
  .pt-a,.pt-b,.pt-main{grid-column:1;grid-row:auto}
  .photo-trio .frame{height:auto}
  .photo-trio img{height:auto}
}

/* The three suite cards carry the same curve as everything else.
   Clarke, 2026-08-25: rounding every other photograph on the site left these
   three square, directly above the now-rounded trio in the SAME section, which
   is a sharper inconsistency than existed before the change. The card itself
   gets the radius as well as the photograph inside it, otherwise a square
   border corner sits outside a rounded picture. */
.room{border-radius:var(--photo-radius);overflow:hidden}
.room .shot,
.room .shot::after{border-radius:var(--photo-radius) var(--photo-radius) 0 0}

/* ---------- A Day at Elysian ----------
   Added 2026-08-30 with the section Dr. the client asked for. A two-column grid
   rather than a list, so the eye can run down the left edge and read the
   shape of a day without reading the words.

   It collapses to one column below 720px: a 150px time column on a 375px
   phone squeezes "Rest, relaxation & optional services" into a four-word-tall
   ribbon. */
.day .wrap{max-width:860px}
.dayline{display:grid;grid-template-columns:150px 1fr;gap:0 34px;margin-top:6px}
.dayline > div{padding:20px 0;border-top:1px solid var(--line-soft)}
.dayline > div:nth-child(-n+2){border-top:0}
.dayline .when{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);
}
.dayline .what{font-size:1.05rem;color:var(--ink)}
.day .closing{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--ink-faint);max-width:62ch;
}
@media (max-width:720px){
  .dayline{grid-template-columns:1fr;gap:0}
  .dayline > div{padding:0}
  .dayline .when{padding:20px 0 0;border-top:1px solid var(--line-soft)}
  .dayline .when:first-child{border-top:0}
  .dayline .what{padding:4px 0 20px;border-top:0}
}