/* ============================================================
   upgrade.css — strategic design upgrades
   18 Sep 2026

   1 · two tones: one dark (espresso) against ivory; aubergine
       kept for the enquiry block and footer only
   2 · giant wordmark closing every page
   3 · photograph set into a headline
   4 · split-width heading (Shell / Theory)
   5 · oversized nautilus hairline on the engagements band
   6 · arrow marks on text links

   Loaded last, after motion.css. Delete the <link> to revert.
   ============================================================ */

/* 1 · two tones ------------------------------------------- */
:root{ --espresso:#1A1A1A; --wood:#1A1A1A; }
.thesis{ background:var(--espresso); }

.sec.dark, .method-band, .rooms{ background-color:var(--espresso); }
.footer{ background:var(--espresso); }

/* 2 · giant wordmark -------------------------------------- */
.wm-giant{ display:block; width:100%; margin:clamp(48px,6vw,88px) 0 clamp(22px,2.6vw,34px);
           color:var(--paper); opacity:.92; }
.wm-giant svg{ display:block; width:100%; height:auto; overflow:hidden; }
.wm-giant text{ font-family:'Cormorant','Cormorant Garamond',Georgia,serif; font-weight:300;
                text-transform:uppercase; fill:currentColor; }
footer .wm-giant{ border-top:1px solid var(--line-lt); padding-top:clamp(36px,4.4vw,60px); }
.footer .wm-giant{ margin-top:clamp(28px,3vw,44px); }
footer .fine, .footer .fine{ border-top:0 !important; margin-top:0 !important; padding-top:0 !important; }

/* 3 · photograph in a headline ---------------------------- */
.inl{ display:inline-block; width:2.1em; height:1em; vertical-align:-.1em; margin:0 .14em;
      overflow:hidden; border-radius:2px; background:var(--espresso); }
.inl img{ width:100%; height:100%; object-fit:cover; display:block;
          filter:grayscale(.5) contrast(1.05); transition:filter .9s ease; }
.inl:hover img{ filter:none; }

/* 4 · split-width heading --------------------------------- */
.splitline{ display:flex; justify-content:space-between; align-items:baseline;
            font-family:var(--dsp,var(--display)); font-weight:300; text-transform:uppercase;
            letter-spacing:.06em; font-size:clamp(2.4rem,7.4vw,7.2rem); line-height:1;
            padding-bottom:clamp(14px,1.6vw,22px); margin-bottom:clamp(44px,5vw,72px);
            border-bottom:1px solid var(--line); color:var(--ink); }
.splitline sup{ font-size:.28em; letter-spacing:.1em; vertical-align:top; margin-left:.2em; opacity:.6; }
.shell .g{ align-items:start; }

/* 5 · oversized nautilus hairline ------------------------- */
.adv{ position:relative; overflow:hidden; }
.adv > .wrap{ position:relative; z-index:1; }
.adv .spiral{ position:absolute; right:-18vw; top:-24vw; width:70vw; height:70vw; max-width:none;
              color:var(--paper); opacity:.17; pointer-events:none; z-index:0; }
@media(max-width:760px){ .adv .spiral{ width:120vw; height:120vw; right:-50vw; top:-40vw; opacity:.09; } }

/* 6 · arrow marks on text links --------------------------- */
.go::after{ content:"\00a0\00a0\2192"; display:inline; transition:transform .4s var(--mv-ease,ease); }
.go:hover::after{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .go:hover::after{ transform:none; } }

/* headline with photo keeps its first line together */
.between .said{ max-width:24ch; }
.phead h1 .inl{ width:1.7em; height:.82em; vertical-align:-.02em; }

/* ── Section eyebrows (22 Sept 2026) ────────────────────────
   A small letterspaced label with a hairline rule, sitting above
   the section heading, so every section opens with a clear scale
   step: tiny caps, then the largest type on the screen. */
.head-row .label.rule{
  flex:0 0 100%;
  order:-1;
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 clamp(6px,1vw,12px);
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.head-row .label.rule::after{
  content:"";
  flex:0 0 clamp(32px,4vw,64px);
  height:1px;
  background:currentColor;
  opacity:.45;
}
@media(max-width:900px){
  .head-row .label.rule{margin-bottom:12px}
}

/* ═══ Responsive pass · 22 Sept 2026 ═══════════════════════════
   Two faults found by rendering every page at 2560, 1920, 1440,
   1024, 834, 430, 390 and 360. */

/* ── 1 · Services "Choose by the moment" overflowed on phones ──
   atelier.css sets five columns with
   .moments:has(>:nth-child(5)):not(:has(>:nth-child(6))), which
   outranks the plain .moments responsive overrides below it. With
   exactly five moments the grid therefore stayed five columns at
   every width, and the Services page scrolled sideways to 772px
   on a 390px screen. These repeat the overrides at the specificity
   that wins. */
@media(max-width:1240px){
  .moments,
  .moments:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1000px){
  .moments,
  .moments:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .moments,
  .moments:has(> :nth-child(5)):not(:has(> :nth-child(6))){
    grid-template-columns:1fr}
  .moment{padding:32px 26px 28px}
  .moment .m-q{min-height:0}
}

/* ── 2 · Large displays ────────────────────────────────────────
   The site had no breakpoint above 1000px, so every page sat in a
   1180px column. On a 27in display that is under half the screen,
   with the vertical rhythm still tuned for a laptop. The column
   opens up in two steps and the section padding stops growing.
   html-prefixed so these hold whatever order the sheets load in. */
@media(min-width:1600px){
  html .wrap{max-width:max(1400px, var(--max,1180px))}
  html .sec{padding:clamp(110px,12vh,170px) 0}
}
@media(min-width:2000px){
  html{font-size:17px}
  html .wrap{max-width:max(1560px, var(--max,1180px))}
}
@media(min-width:2400px){
  html{font-size:18px}
  html .wrap{max-width:max(1680px, var(--max,1180px))}
}