:root{
  /* Maison V palette — core (top six) */
  --pinotage:#2A0209; --valpolicella:#623238; --rose:#946E74; --nebbiolo:#77232E;
  --porcelain:#F9F8F5; --ivory:#EFEBE7;
  /* accents */
  --oyster:#D2C7BE; --ash:#BDB8B4; --stonep:#95918C; --mink:#6D6964;
  --matcha:#5B6955; --sage:#959F91; --camel:#A48B6F; --champagne:#C7B8A5; --nordic:#9CAEB8;
  /* functional mapping (WCAG 2.2 AA verified) */
  --paper:var(--porcelain); --card:#FFFFFF; --ink:var(--pinotage); --ink-soft:#4A3B40;
  --stone:var(--mink); --line:var(--oyster); --line-soft:var(--ivory);
  --accent:var(--nebbiolo); --accent-deep:var(--valpolicella);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --max:1180px; --measure:44rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-weight:400;font-size:1.0625rem;line-height:1.75;letter-spacing:.002em}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
::selection{background:var(--nebbiolo);color:#fff}
:focus-visible{outline:2px solid var(--matcha);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
/* Body text runs the full width of the container and sits flush left
   (Tracey, 26 Oct 2026, as on japanwhatson): the old 44rem measure cap
   on prose blocks is gone. Display treatments keep their own widths:
   hero headlines and subheads, pull quotes, the footer brandline,
   portrait and narrow photo columns, and component internals. */
.prose{max-width:none}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem);margin:0 0 1.25rem}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 1rem}
h3{font-size:1.45rem;line-height:1.25;margin:0 0 .6rem}
p{margin:0 0 1.15rem}
/* heading rhythm inside long prose: a heading earns air above itself,
   except when it opens the column or follows its own eyebrow */
.prose h2{margin-top:1.9rem}
.prose h2:first-child,.prose .eyebrow + h2{margin-top:0}
.prose h3{margin-top:1.5rem}
.prose h3:first-child,.prose .eyebrow + h3{margin-top:0}
.prose .eyebrow{margin-top:2.75rem}
.prose .eyebrow:first-child{margin-top:0}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:var(--nebbiolo);margin:0 0 1.1rem;display:flex;align-items:center;gap:.9rem}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.5;color:var(--ink-soft)}
.rule{border:0;border-top:1px solid var(--line);margin:clamp(1.5rem,3.5vw,2.1rem) 0}
.small{font-size:.875rem;line-height:1.65;color:var(--stone)}
.micro{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nebbiolo)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:flex-start;gap:clamp(1.2rem,3vw,2.5rem);
  padding-top:.85rem;padding-bottom:.85rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none}
.brand img{height:42px;width:auto;display:block}
.brand span{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;letter-spacing:.24em;color:var(--ink);white-space:nowrap}
.head-in .nav{margin-right:auto}
.head-in .brand{margin-left:auto}
.head-cta{display:flex;align-items:center;gap:.9rem}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem)}
/* Nav rework (Tracey, 27 Oct 2026): the menu list is set in the serif at a
   larger size with the names as written, no capitals, no icon links, so the
   menu reads as luxury rather than utility. WhatsApp is out of the menu and
   the footer, and lives only in page content (Stays, Enquire, Request a
   Stay); Search is a search box at the foot of the menu, not a link. */
.nav a{color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:1.22rem;font-weight:500;
  letter-spacing:.03em;position:relative;padding:.35rem 0;white-space:nowrap}
.nav-search{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);width:100%}
.nav-search-label{display:block;font-family:var(--sans);font-size:.68rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--stone);margin-bottom:.55rem}
.nav-search-row{display:flex;gap:.6rem;align-items:baseline}
.nav-search-row input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.35rem 0;font:inherit;font-size:1rem;color:var(--ink)}
.nav-search-row input:focus{outline:none;border-bottom-color:var(--accent)}
.nav-search-row button{background:none;border:0;padding:.35rem 0;cursor:pointer;color:var(--ink);
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.nav-search-row button:hover{color:var(--accent)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent)}
/* The nav gained an eleventh item (Wine Atlas, Oct 2026): below 1600px the
   header uses the full width of the window instead of the text column's
   centred measure (the room beside Home was standing empty while Wine
   Atlas fell off the right edge), and the row tightens its spacing so
   the full row fits on one line at laptop widths, as it did before the
   item was added. The drawer rules at 760px below still govern small
   screens. */
@media (max-width:1600px){
  .head-in{max-width:none;padding-left:1.25rem;padding-right:1.25rem;gap:1rem}
  .nav{gap:.7rem}
}
.has-drop{position:relative}
.drop{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:13rem;
  background:var(--card);border:1px solid var(--line);padding:.7rem 0;opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;box-shadow:0 18px 40px -18px rgba(34,16,22,.25)}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:block;padding:.55rem 1.4rem;white-space:nowrap}
.drop-note{display:block;padding:.55rem 1.4rem}
.drop-label{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--nebbiolo);margin-bottom:.35rem}
.drop-text{display:block;font-size:.82rem;line-height:1.55;color:var(--mink);white-space:normal;max-width:17rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink);cursor:pointer;padding:.4rem}
.btn{display:inline-block;background:var(--matcha);color:#fff;border:1px solid var(--matcha);
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  padding:.95rem 2.1rem;text-decoration:none;cursor:pointer;transition:background .25s var(--ease),color .25s}
.btn:hover{background:var(--pinotage);border-color:var(--pinotage);color:#fff}
.btn-ghost{background:var(--matcha);color:#fff;border-color:var(--matcha)}
.btn-ghost:hover{background:var(--pinotage);border-color:var(--pinotage);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.btn-row + .small{margin-top:1.5rem}
/* the Or between the two Explore buttons on Select Destinations keeps
   the page's flush left alignment with an even, close gap on each side
   (Tracey, 26 Oct 2026): as a plain prose paragraph it had the second
   button row's 2rem top margin stacked under its own bottom margin */
.btn-or{margin:1rem 0 0}
.btn-or + .btn-row{margin-top:1rem}
.hardbreak span{display:block}
.tagline-lines{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1.42;color:var(--ink);margin:0 0 1.6rem;text-align:left}
.tagline-lines span{display:block}
.nl-form{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.3rem 0 .8rem}
.nl-form input[type=email]{flex:1 1 16rem;padding:.9rem 1.1rem;border:1px solid var(--line);
  background:#fff;font:inherit;color:var(--ink);border-radius:0}

/* ---------- hero ---------- */
.hero{padding:clamp(2.9rem,6vw,4.6rem) 0 clamp(1.7rem,3.5vw,2.4rem);position:relative;overflow:hidden}
.hero .kicker{margin-bottom:1.4rem}
.hero h1{max-width:16ch}
.hero h1.wide{max-width:none;white-space:nowrap}
/* Headlines on one line where they fit (Tracey, 26 Oct 2026): .oneline
   keeps a headline to a single line; the long hero variant steps the
   size down so a full sentence fits the measure. The nowrap drops away
   only on phone widths, so small screens wrap instead of clipping.
   (Breakpoint lowered 900px to 560px, Lachlin 26 Oct 2026: his laptop
   window sits under 900 CSS px and the headlines wrapped there; the
   vw-scaled sizes fit the measure at laptop widths.) */
.oneline{white-space:nowrap}
.hero h1.oneline{max-width:none}
.hero h1.oneline-long{font-size:clamp(1.9rem,3.6vw,3.1rem)}
@media (max-width:560px){.oneline{white-space:normal}}
.hero .sub{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.45;color:var(--ink-soft);max-width:34ch;margin:0 0 1.4rem}
.hero .geo{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--nebbiolo);margin:1.6rem 0 0}
.hero .geo a{color:inherit;text-decoration:none}
.hero .geo a:hover{text-decoration:underline;text-underline-offset:3px}
.hero-mark{position:absolute;right:clamp(1rem,6vw,5rem);top:50%;transform:translateY(-50%);
  width:clamp(120px,18vw,220px);opacity:.09;pointer-events:none}

/* ---------- sections ---------- */
.block{padding:clamp(1.9rem,4vw,2.9rem) 0}
.block.tint{background:var(--ivory)}
.block.tint-oyster{background:#E4DCD2}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
/* grid cells and cards close flush: the last paragraph in a cell does not
   carry its bottom margin into the grid gap, so rows sit at even depths */
.cols2 > div > p:last-child,.cols3 > div > p:last-child,
.tri article p:last-child,.fee p:last-child{margin-bottom:0}
.cols2 + .prose{margin-top:2rem}
.prose + .cols2,.prose + .cols3{margin-top:2rem}

/* ---------- image slots (owner photography to come) ---------- */
.slot{border:1px solid var(--line);background:
  repeating-linear-gradient(45deg,transparent,transparent 14px,rgba(91,105,85,.05) 14px,rgba(91,105,85,.05) 15px);
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;gap:.6rem;color:var(--stone)}
.slot .slot-name{font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.slot .slot-note{font-family:var(--serif);font-style:italic;font-size:1.05rem}
.slot.tall{min-height:420px}
.slot-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem);margin:2.2rem 0}
.slot figcaption{font-size:.85rem;line-height:1.55;color:var(--stone);font-style:italic}

/* ---------- fee cards ---------- */
.fee{border:1px solid var(--line);background:var(--card);padding:2.2rem 2rem;display:flex;flex-direction:column;gap:.7rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fee:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(34,16,22,.35)}
.fee .tier{font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.fee .price{font-family:var(--serif);font-size:2.6rem;line-height:1;margin:.2rem 0}
.fee p{font-size:1rem;line-height:1.7;color:var(--ink-soft)}

/* ---------- steps ---------- */
.steps{counter-reset:step;list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0}
.steps li{counter-increment:step;display:grid;grid-template-columns:4.5rem 1fr;gap:1.4rem;
  padding:1.6rem 0}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--serif);
  font-size:1.9rem;color:var(--accent);line-height:1.2}
.steps strong{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1.3;font-weight:500;margin-bottom:.25rem}
.steps p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.7}

/* ---------- by-us / method ---------- */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:2rem}
.tri article{border-top:2px solid var(--accent);padding-top:1.2rem}
.checklist{list-style:none;margin:1rem 0;padding:0}
.checklist li{padding:.55rem 0 .55rem 1.9rem;position:relative;font-size:1rem;line-height:1.7}
.checklist li::before{content:"–";position:absolute;left:0;color:var(--accent)}

/* ---------- quote / fora ---------- */
.fora{border:1px solid var(--line);background:var(--card);padding:clamp(1.8rem,4vw,2.8rem);
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;margin:2.5rem 0}
.fora .fora-mark{width:150px;height:90px;border:1px dashed var(--line);display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stone);padding:.8rem}
.fora h3{margin-bottom:.6rem}
.fora p{margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.7}
.pull{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,1.95rem);line-height:1.45;font-style:italic;
  color:var(--rose);margin:2.2rem 0;max-width:34ch}

/* ---------- founders ---------- */
.founder{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,4vw,3rem);padding:2.6rem 0;border-top:1px solid var(--line)}
.founder:last-of-type{border-bottom:1px solid var(--line)}
.founder .who{font-family:var(--serif);font-size:1.7rem;line-height:1.25;margin:0 0 .2rem}
.founder .role{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
.founder p{color:var(--ink-soft);font-size:1rem;line-height:1.7}
.founder .slot{min-height:260px}

/* ---------- journal ---------- */
.jcard{border:1px solid var(--line);background:var(--card);padding:2rem}
.jcard p{font-size:1rem;line-height:1.7;color:var(--ink-soft);margin-bottom:0}
.jcard .tag{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.8rem}
.jgroup{font-size:clamp(1.6rem,3vw,2.1rem);margin:2.8rem 0 1.3rem;padding-top:1.5rem;border-top:2px solid var(--nebbiolo)}
.jgroup-france{border-top-color:var(--matcha)}
.jgroup-select{border-top-color:var(--camel)}

/* ---------- faq ---------- */
.faq details{border-top:1px solid var(--line);padding:1.3rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.35rem;line-height:1.3;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--accent);font-size:1.4rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{color:var(--ink-soft);margin-top:.8rem}

/* ---------- forms ---------- */
form.enquiry{display:grid;gap:1.3rem;max-width:var(--measure)}
.field{display:grid;gap:.45rem}
.field label{font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pinotage)}
.field .opt{font-weight:400;letter-spacing:.08em;text-transform:none;color:var(--stone)}
.field input,.field select,.field textarea{font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--card);border:1px solid var(--line);padding:.85rem 1rem;border-radius:0;width:100%}
.field textarea{min-height:8rem;resize:vertical}
.field textarea[rows="3"]{min-height:5rem}
form.enquiry .small{margin-top:1rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--matcha);outline-offset:1px;border-color:var(--matcha)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.notice{border:1px solid var(--line);background:var(--card);padding:1.2rem 1.4rem;font-size:.875rem;line-height:1.65;color:var(--ink-soft)}
.notice a{color:var(--accent)}

/* ---------- footer ---------- */
.site-foot{background:var(--pinotage);color:var(--porcelain);margin-top:clamp(2rem,4vw,2.9rem)}
.foot-top{padding:1.6rem 0 .6rem}
.site-foot .brand span{color:var(--porcelain)}
.site-foot .brandline{font-family:var(--serif);font-size:1.35rem;line-height:1.5;max-width:26ch;margin:1rem 0;color:var(--porcelain)}
.site-foot .fora-short{font-size:.95rem;color:var(--oyster);margin:.6rem 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:.55rem 1.15rem;list-style:none;margin:0;
  padding:.85rem 0;border-top:1px solid rgba(210,199,190,.28)}
.foot-links a{font-size:.9rem;letter-spacing:.04em;white-space:nowrap}
.site-foot .ig-link{display:inline-flex;align-items:center;padding:.2rem;line-height:1}
.site-foot h4{font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--porcelain);margin:0 0 1.1rem}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.site-foot a{color:var(--porcelain);text-decoration:none;font-size:.9rem}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-base{border-top:1px solid rgba(210,199,190,.28);padding:.9rem 0;display:flex;flex-wrap:wrap;
  gap:.6rem 2rem;justify-content:space-between;font-size:.82rem;color:var(--oyster)}
.foot-base a{color:var(--porcelain)}

/* ---------- cookie banner ---------- */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:100;max-width:34rem;
  background:var(--ink);color:#F4EEE4;padding:1.4rem 1.6rem;box-shadow:0 20px 50px -12px rgba(0,0,0,.5)}
.cookie-banner p{font-size:.9rem;margin:0 0 1rem;line-height:1.6}
.cookie-actions{display:flex;gap:.8rem}
.cookie-banner .btn{padding:.7rem 1.6rem;font-size:.75rem}
.cookie-banner .btn-ghost{color:#F4EEE4;border-color:rgba(244,238,228,.4)}
.cookie-banner .btn-ghost:hover{border-color:#F4EEE4;color:#fff}
.cookie-banner a{color:#F4EEE4;text-decoration:underline;text-underline-offset:3px}

/* ---------- photography ----------
   One treatment everywhere: a standalone photo is shown WHOLE, at its own
   natural aspect ratio, never cropped into a fixed-ratio frame (Lachlin,
   22 Oct 2026: cover-cropping cut the Pichon Baron turrets and the Mount
   Yotei summit). Portraits sit in a centred narrower column, a photo
   marked narrow sits in a centred reduced column, photos inside grids
   take the grid's width, and every caption is the same small italic
   line. */
.photo{margin:1.5rem 0}
.photo.portrait{max-width:560px;margin-left:auto;margin-right:auto}
.photo.narrow{max-width:880px;margin-left:auto;margin-right:auto}
.photo img{width:100%;height:auto;border:1px solid var(--line)}
.cols2 .photo,.cols3 .photo{margin:0}
.cols2 .photo.portrait,.cols3 .photo.portrait,
.cols2 .photo.narrow,.cols3 .photo.narrow{max-width:none}
.photo figcaption{font-size:.85rem;line-height:1.55;color:var(--stone);font-style:italic;margin-top:.75rem;text-align:left}
.photo.flush-top{margin-top:1rem}
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.5rem 0}
.collage img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line)}
.carousel{position:relative;margin:2.6rem 0}
.car-viewport{overflow:hidden;border:1px solid var(--line)}
.car-track{display:flex;transition:transform .7s var(--ease);margin:0;padding:0;list-style:none}
.car-track li{flex:0 0 100%;margin:0;padding:0}
.car-track img{width:100%;height:auto;aspect-ratio:2/1;max-height:540px;object-fit:cover}
.car-btn{position:absolute;top:38%;background:rgba(251,249,245,.94);border:1px solid var(--line);
  width:3rem;height:3rem;border-radius:50%;cursor:pointer;font-size:1.15rem;color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:background .25s}
.car-btn:hover{background:#fff}
.car-prev{left:1.1rem}.car-next{right:1.1rem}
.car-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem}
.car-cap{font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.5;color:var(--ink-soft);margin:0}
.car-dots{display:flex;gap:.6rem;flex:none}
.car-dots button{width:.65rem;height:.65rem;border-radius:50%;border:1px solid var(--accent);
  background:transparent;cursor:pointer;padding:0}
.car-dots button[aria-current="true"]{background:var(--matcha)}

/* ---------- misc ---------- */
.todo{background:#FFF3D6;border-bottom:2px solid #C98A00;padding:0 .3em;font-style:normal}
.center{text-align:center}
.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.breadcrumbs{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:1.6rem}
.breadcrumbs a{color:var(--stone);text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.2rem;z-index:200}
.skip:focus{left:0}

@media (max-width:900px){
  .split,.cols2,.cols3,.tri{grid-template-columns:1fr}
  .fora{grid-template-columns:1fr}
  .fora .fora-mark{width:130px;height:76px}
  .founder{grid-template-columns:1fr}
  .foot-links{gap:.5rem 1.1rem}
  .frow{grid-template-columns:1fr}
  .collage{grid-template-columns:repeat(2,1fr)}
  .hero-mark{display:none}
}
@media (max-width:760px){
  .hero h1.wide{font-size:clamp(1.8rem,9vw,2.6rem)}
  .nav{position:fixed;inset:0 auto 0 0;width:min(20rem,84vw);background:var(--paper);flex-direction:column;
    align-items:flex-start;padding:5.5rem 2.2rem 2.2rem;gap:1.18rem;transform:translateX(-100%);overflow-y:auto;
    transition:transform .32s var(--ease);border-right:1px solid var(--line);box-shadow:20px 0 50px -20px rgba(34,16,22,.3)}
  .nav-search{width:100%;margin-top:.35rem;padding-top:.95rem}
  .nav a{font-size:1.14rem;padding:.12rem 0}
  .nav a[aria-current="page"]::after{bottom:-4px}
  .nav.open{transform:none}
  .head-cta{order:-1;margin-left:0}
  .head-in .brand{margin-left:auto}
  .nav .btn{margin-top:1rem}
  .nav-toggle{display:block;z-index:70;position:relative}
  .drop{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;
    background:transparent;padding:.2rem 0 .2rem 1rem;min-width:0}
  .drop a{padding:.35rem 0}
  .has-drop:hover .drop{transform:none}
  .slot-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ---------- journal story ---------- */
.story{max-width:none;margin:0}
.story h2{margin:2.1rem 0 1rem}
.story .photo{margin:1.5rem 0}
/* story photos show whole at natural ratio too, floated or not */
/* story headlines and sub-headlines stretch across the top of the page
   at the full width of the wrap (Tracey, 2 Nov 2026) */
.story-hero h1{font-size:clamp(2.2rem,5.6vw,3.6rem);max-width:none}
.story-hero .sub{max-width:none}
@media (min-width:900px){
  .story::after{content:"";display:block;clear:both}
/* travel-planning: the Ruinart caves photo wrapped by the Provenance
   Sessions text (Tracey, 22 Oct: next to the session, text wrapped) */
@media (min-width:900px){
  .prose .photo.wrap-r{float:right;width:44%;margin:.35rem 0 1.1rem 2rem}
  .prose:has(> .photo.wrap-r)::after{content:"";display:block;clear:both}
}
  .story .photo{float:right;width:46%;margin:.4rem 0 1.5rem 2.5rem;clear:right}
  .story h2{clear:both}
  /* editorial wrap (Opus One and Dassai Blue stories): every photo floats,
     sides alternate, text wraps each one; portraits sit a touch narrower */
  .story.flow .photo{clear:none}
  .story.flow .photo.fl{float:left;margin:.4rem 2.5rem 1.5rem 0}
  .story.flow .photo.portrait{width:40%}
}

/* ---------- story photo pattern: hero, pair, single (Tracey, 2 Nov 2026) ----------
   BASELINE RULE (Tracey, 2 Nov 2026): the float and wrap layout is the
   default for Journal story photos only when the photos fit it and the
   text wraps cleanly around them. When photos do not fit, or the text
   does not wrap cleanly, this responsive grid pattern is the baseline
   fallback and is used without needing a fresh steer: one full width
   hero photo near the top, then responsive two-up pairs lower down,
   with a lone photo as a story-single where a section has an odd one.
   Portraits are NEVER cropped: every photo renders whole at its natural
   ratio. Portraits pair with portraits in an even pair; a portrait
   beside a landscape goes in a pair-mix, whose column widths are set so
   both photos finish at the same height with nothing cut. These are new
   classes only: stories that do not use them render exactly as before,
   floats and all. The written rule also lives in
   notes/journal-photo-baseline.md. */
.story .photo.story-hero{float:none;width:100%;max-width:none;margin:1.6rem 0 1.9rem;clear:both}
.story-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;margin:1.6rem 0 1.9rem;clear:both}
.story .story-pair .photo{float:none;width:auto;max-width:none;margin:0;clear:none}
.story-pair.pair-mix{grid-template-columns:36fr 64fr}
.story .photo.story-single{float:none;width:100%;max-width:880px;clear:both;margin:1.6rem auto 1.9rem}
.story .photo.story-single.portrait{max-width:560px}
@media (max-width:899px){
  .story-pair,.story-pair.pair-mix{grid-template-columns:1fr;gap:1.5rem}
}

/* ---------- desktop header: menu dropdown (Oct 2026, Tracey) ----------
   On desktop the inline link row gives way to an Aman style top bar: a
   Menu control at the upper left opens the same links as a dropdown
   panel, and the brand mark centres in the bar. Below 761px nothing here
   applies and the drawer behaviour defined above is unchanged. */
.nav-toggle .nt-label{display:none}
@media (min-width:761px){
  .head-in{position:relative;min-height:4.35rem}
  .head-cta{order:-1}
  .nav-toggle{display:inline-flex;align-items:center;gap:.65rem;font-size:1.05rem;
    line-height:1;padding:.45rem .3rem}
  .nav-toggle .nt-label{display:inline;font-family:var(--sans);font-size:.74rem;
    font-weight:500;letter-spacing:.26em;text-transform:uppercase}
  .head-in .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  .head-in .nav{position:absolute;top:100%;left:clamp(1.25rem,4vw,3rem);z-index:80;
    flex-direction:column;align-items:stretch;gap:0;margin:0;min-width:17rem;
    background:var(--card);border:1px solid var(--line);border-top:0;
    box-shadow:0 24px 50px -20px rgba(34,16,22,.30);padding:1.1rem 0;
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
  .head-in .nav.open{opacity:1;visibility:visible;transform:none}
  .head-in .nav a{display:block;padding:.58rem 1.9rem;font-size:1.18rem}
  .head-in .nav a:hover{background:transparent}
  .head-in .nav a[aria-current="page"]::after{left:1.9rem;right:auto;width:1.8rem;bottom:.3rem}
  .head-in .nav-search{margin:1rem 1.9rem .6rem;padding-top:1rem;width:auto}
}
@media (min-width:761px) and (max-width:1600px){
  .head-in .nav{left:1.25rem}
}

/* ---------- desktop spacing polish (Oct 2026, Tracey) ----------
   The spacing values from this pass (section padding, rule and photo
   margins, footer offset) were folded into the base rules in the
   22 Oct 2026 tightening, so one rhythm now holds at every width.
   The homepage hero's nested wraps stop double indenting the carousel
   and tagline at every width (hard flush left: the tagline starts on the
   same left edge as the headline and prose, Tracey 25 Oct 2026); what
   remains desktop only is the homepage signature section sitting closer
   to the "How we work" section above it. */
.hero .wrap .wrap{max-width:none;padding-left:0;padding-right:0}
@media (min-width:761px){
  .block.sig-join{padding-top:1.75rem}
}

/* ---------- site search (added 2026-10-26) ---------- */
.search-main{padding:3.5rem 0 4.5rem}
.search-wrap{max-width:none}
.search-intro{font-size:1.08rem;color:var(--ink-soft)}
.search-form{margin:2rem 0 1rem}
.search-label{display:block;font-weight:600;margin-bottom:.6rem}
.search-row{display:flex;gap:.75rem}
.search-row input{flex:1;min-width:0;padding:.85rem 1rem;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font:inherit}
.search-button{white-space:nowrap}
.search-status{color:var(--ink-soft);margin:1rem 0}
.search-results{margin-top:1.5rem}
.search-result{padding:1.25rem 0;border-top:1px solid var(--line)}
.search-result h2{font-size:1.45rem;margin:.2rem 0 .45rem}
.search-result p{margin:.25rem 0}
.search-result-type{text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--stone)}
@media (max-width:640px){.search-row{flex-direction:column}.search-button{width:100%}}

/* Our Story tighter spacing and one-line pull quote (Tracey, 26 Oct 2026) */
.pull.oneline{max-width:none;font-size:clamp(1.02rem,1.85vw,1.4rem)}
.story-tight .hero{padding-bottom:1.6rem}
.story-tight .block{padding:1.7rem 0}
.story-tight .photo{margin:1.3rem 0}
.story-tight .founder{padding:1.6rem 0}
.story-tight .pull{margin:1.3rem 0}

/* Long second-level headlines on one line step down a size (Tracey, 26 Oct 2026) */
h2.oneline-long{font-size:clamp(1.32rem,2.35vw,1.9rem)}

/* Site-wide spacing sweep (Tracey, 26 Oct 2026: look over the entire site
   and close any gaps): base hero, block, rule, prose heading, photo, collage
   and footer spacing tightened in the rules above. */

/* Closed spacing at a photo-to-section join (Tracey, 26 Oct 2026) */
.hero.tight-bottom{padding-bottom:.75rem}
.block.tight-top{padding-top:.75rem}
.photo.flush-bottom{margin-bottom:.75rem}

/* Tracey, 26 Oct 2026 (evening): hero sub lines on one line, Our Story
   text wrapping around Tracey's photos, cookie policy link in the banner */
.hero .sub.oneline{max-width:none}
.hero .sub.oneline-sub{max-width:none;white-space:nowrap;font-size:clamp(.85rem,1.35vw,1.02rem)}
@media (max-width:560px){.hero .sub.oneline-sub{white-space:normal}}
@media (min-width:900px){
  .story-tight .photo.wrap-r{float:right;width:42%;max-width:none;margin:.4rem 0 1.2rem 2rem;clear:right}
  .story-tight .block .wrap::after{content:"";display:block;clear:both}
}

/* ---------- Tokyo Tangle story (Lachlin, 27 Oct 2026) ----------
   Page-scoped editorial photo layout for the one article carrying the
   .tangle class; no other page uses these rules. Mobile: no floats,
   squares full width, portraits capped and centred so no photo stands
   over a screen tall. Desktop: each photo floats with its section's
   opening paragraphs wrapped around it, sides alternating (the .fl
   class marks the left floats); photos show whole at natural ratio.
   Section headings clear every float, so a heading always starts on a
   clean line below the previous section's photo. */
.story.tangle .photo{float:none;width:auto;max-width:none;margin:1.6rem 0}
.story.tangle .photo.portrait{width:82%;margin-left:auto;margin-right:auto}
@media (min-width:900px){
  .story.tangle .photo{float:right;width:46%;margin:.35rem 0 1.4rem 2.25rem}
  .story.tangle .photo.fl{float:left;margin:.35rem 2.25rem 1.4rem 0}
  .story.tangle .photo.portrait{width:40%}
  .story.tangle .photo.ctr{float:none;width:min(460px,100%);margin:1.2rem auto 1.8rem}
  .story.tangle h2{clear:both}
}

/* ---------- The Other Blossom story (Tracey, 27 Oct 2026) ----------
   Page-scoped rules for the one article carrying the .blossom class:
   the plum hero runs full width above the text, the portrait snow
   video behaves like a portrait photo, and the article's three tables
   sit in a scroll wrapper so a phone never has to squeeze them. */
.story.blossom .photo.hero-photo{float:none;width:auto;max-width:none;margin:1.2rem 0 1.6rem;clear:none}
.story.blossom .photo video{width:100%;height:auto;display:block}
.story.blossom .photo.snow-photo{clear:left}
.story.blossom .photo.garden-photo{float:none;width:min(560px,100%);margin:1.4rem auto 1.8rem;clear:both}
.story.blossom .table-wrap{clear:both;overflow-x:auto;margin:1.4rem 0 1.8rem}
.story.blossom table{border-collapse:collapse;width:100%;min-width:600px;font-size:.97rem;line-height:1.55}
.story.blossom th,.story.blossom td{border-top:1px solid var(--line);padding:.6rem .85rem;text-align:left;vertical-align:top}
.story.blossom thead th{border-top:0;font-family:var(--serif);font-size:1.12rem;font-weight:600}
.story.blossom tbody th{font-weight:500;white-space:nowrap}

/* ---------- English Vine Time story (Tracey, 2 Nov 2026) ----------
   Page-scoped table rules for the article's three wine line-up tables,
   mirroring the Other Blossom table treatment so a phone never has to
   squeeze them. */
.story.vine-time .table-wrap{clear:both;overflow-x:auto;margin:1.4rem 0 1.8rem}
.story.vine-time table{border-collapse:collapse;width:100%;min-width:600px;font-size:.97rem;line-height:1.55}
.story.vine-time th,.story.vine-time td{border-top:1px solid var(--line);padding:.6rem .85rem;text-align:left;vertical-align:top}
.story.vine-time thead th{border-top:0;font-family:var(--serif);font-size:1.12rem;font-weight:600}
.story.vine-time tbody th{font-weight:500}

/* ---------- booking journey and WhatsApp (Tracey brief, 27 Oct 2026) ---------- */
.site-foot .foot-contact{font-size:.95rem;color:var(--oyster);margin:.35rem 0 0}
.site-foot .foot-contact a{font-size:.95rem}
/* Stays: the top pair under the Rakudo-An photo stays plain hyperlink
   text, centred, for the luxury feel; the calls to action further down
   the page use the green buttons (Tracey, 27 Oct 2026) */
.cta-line{text-align:center;margin:2rem 0 0}
.cta-line-first{margin:0 0 2rem}
.wa-line{font-size:.95rem;color:var(--stone);margin:0 0 1.5rem}