/* ==========================================================================
   Join Me. — joinme.one
   One stylesheet, in page order. Sections:
     01 Fonts          06 Occasions        11 Diary
     02 Tokens         07 Band / Duo       12 Principles / Expectations
     03 Base           08 Criteria         13 Closer / Pill
     04 Shell / Header 09 Lookbook         14 Enquiry form
     05 Hero / Intro   10 Steps / Compare  15 Footer
     16 Legal pages (terms, privacy)       17 404
     18 Mobile (<=760px)                   19 Reduced motion
   ========================================================================== */

/* 01 Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 400 is used by the Ask pill and the submit button, which set no weight. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/cormorant-garamond-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02 Tokens --------------------------------------------------------------- */

:root {
  --ink: #e9e3de;
  --bg: #131211;
  --rose: #d8a0a6;

  --ink-85: rgba(233, 227, 222, 0.85);
  --ink-80: rgba(233, 227, 222, 0.80);
  --ink-72: rgba(233, 227, 222, 0.72);
  --ink-70: rgba(233, 227, 222, 0.70);
  --ink-66: rgba(233, 227, 222, 0.66);
  --ink-62: rgba(233, 227, 222, 0.62);
  --ink-55: rgba(233, 227, 222, 0.55);
  --ink-52: rgba(233, 227, 222, 0.52);
  --ink-48: rgba(233, 227, 222, 0.48);
  --ink-42: rgba(233, 227, 222, 0.42);

  --line: rgba(233, 227, 222, 0.13);
  --line-soft: rgba(233, 227, 222, 0.10);
  --line-card: rgba(233, 227, 222, 0.14);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Page gutter: 5vw, but never wider than the 1680px content column allows. */
  --gutter: max(5vw, calc((100vw - 1680px) / 2));

  --shadow-portrait: 0 50px 110px rgba(0, 0, 0, 0.6);
  --shadow-plate: 0 40px 90px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 40px 80px rgba(0, 0, 0, 0.5);
  --shadow-pill: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* 03 Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

a { color: var(--rose); text-decoration: none; }
a:hover { color: #efe9e4; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

::selection { background: var(--rose); color: var(--bg); }

/* <picture> sits between the sized container and the <img>, so it has to
   pass the container's dimensions through rather than shrink-wrap. */
picture { display: block; width: 100%; height: 100%; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.serif { font-family: var(--serif); font-weight: 300; }
.label { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-66); }
.micro { font-size: 11px; line-height: 1.85; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-72); }
.gray { filter: grayscale(1) contrast(1.06); }
.hr { height: 1px; background: var(--line); }
.accent { color: var(--rose); font-weight: 300; font-style: normal; }

/* 04 Shell / header ------------------------------------------------------- */

.wrap {
  min-height: 100vh;
  padding: 38px var(--gutter) 0;
  overflow-x: hidden;
}

.site-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.site-head .micro {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--ink-72);
  line-height: 1.9;
}

.monogram { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 2px; }
.monogram i { border-radius: 50%; display: block; }
.monogram i:nth-child(1) { width: 11px; height: 11px; background: var(--rose); }
.monogram i:nth-child(2) { width: 6px; height: 6px; background: var(--ink-52); }
.monogram i:nth-child(3) { width: 3px; height: 3px; background: rgba(233, 227, 222, 0.25); }

/* 05 Hero / intro --------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2vw;
  align-items: center;
  padding: 11vh 0 6vh;
}
.hero h1 {
  grid-column: 1 / span 12;
  grid-row: 1;
  font-size: clamp(64px, 13.5vw, 232px);
  line-height: 0.84;
  letter-spacing: -0.03em;
  margin: 0;
  z-index: 1;
}
.hero h1 b { color: var(--rose); font-weight: 300; }
.hero .portrait {
  grid-column: 7 / span 3;
  grid-row: 1;
  aspect-ratio: 3 / 4;
  transform: rotate(-2.4deg);
  box-shadow: var(--shadow-portrait);
  z-index: 2;
}
.hero-note { grid-column: 11 / span 2; grid-row: 1; align-self: start; z-index: 3; }

.tagline {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 6vw;
  align-items: end;
  padding: 0 0 12vh;
}
.tagline p {
  font-size: clamp(19px, 2vw, 30px);
  line-height: 1.45;
  color: var(--ink-80);
  margin: 0;
  max-width: 26ch;
  text-wrap: pretty;
}
.tagline .micro { text-align: right; color: var(--ink-55); }

.strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.strip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rose);
  display: inline-block;
  margin-right: 14px;
  vertical-align: 1px;
}
.strip .dim { color: var(--ink-48); }

.statement { padding: 13vh 0 12vh; }
.statement p {
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 21ch;
  text-wrap: pretty;
}
.statement b { color: var(--rose); font-weight: 300; font-style: normal; }

/* Two-column section: label on the left, body on the right. */
.section {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 6vw;
  padding: 12vh 0;
}
.section > .label { padding-top: 12px; }

.scope {
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.scope .dim { color: var(--ink-66); }

.lede {
  font-size: clamp(26px, 3.4vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 7vh;
  max-width: 22ch;
  text-wrap: pretty;
}
.lede .dim { color: rgba(233, 227, 222, 0.58); }

/* 06 Occasions ------------------------------------------------------------ */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6vh 4vw; }
.cards > div { border-top: 1px solid var(--line-card); padding-top: 22px; }
.cards h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 16px; }
.cards p { font-size: 15px; line-height: 1.8; letter-spacing: 0.01em; color: var(--ink-80); margin: 0; }

.footnotes {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 6vh;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-62);
}

/* 07 Band / duo ----------------------------------------------------------- */

.band {
  position: relative;
  margin: 0 calc(-1 * var(--gutter)) 12vh;
  height: 76vh;
  min-height: 460px;
  overflow: hidden;
}
.band .bg { position: absolute; inset: 0; filter: grayscale(1) contrast(1.08) brightness(0.78); }
/* The band is ~2.1:1 on desktop but ~0.64:1 on mobile, cropped from one square
   image. A centred crop keeps only the middle 47% of the height on desktop,
   which cuts the subject's face off at the chin. Biasing the crop upwards keeps
   the face above the centred quote. Mobile has no vertical overflow, so this
   has no effect there. */
.band .bg img { object-position: 50% 16%; }
/* The quote sits at the foot of the band, not its centre, so it never lands
   across the subject's face. The gradient is a scrim: without it the text
   drops to ~1.3:1 contrast wherever it crosses a highlight. */
.band .quote {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 8vw 7vh;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.66) 30%,
    rgba(0, 0, 0, 0.22) 58%,
    rgba(0, 0, 0, 0) 80%);
}
.band .quote p {
  font-style: italic;
  font-size: clamp(24px, 3.8vw, 58px);
  line-height: 1.25;
  text-align: center;
  margin: 0;
  max-width: 20ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 30px rgba(0, 0, 0, 0.8);
}
.band .place {
  position: absolute;
  /* Sits just inside the content column rather than the screen edge, so it
     keeps its relationship to the quote at any width. */
  left: calc(var(--gutter) + 24px);
  top: 22px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-80);
}

.duo {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 6vw;
  padding-bottom: 12vh;
}
.duo .photo { aspect-ratio: 4 / 5; }
.duo .quote { display: flex; align-items: flex-end; }
.duo .quote p {
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.45;
  color: var(--ink-72);
  margin: 0;
  max-width: 22ch;
}

/* 08 Criteria ------------------------------------------------------------- */

.criteria { display: flex; flex-direction: column; gap: 38px; max-width: 44ch; }
.criteria > p { font-size: clamp(22px, 2.7vw, 38px); line-height: 1.32; margin: 0; text-wrap: pretty; }
.criteria .row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-80);
}
.criteria .row b {
  color: var(--rose);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding-top: 5px;
  font-weight: 400;
}

/* 09 Lookbook ------------------------------------------------------------- */

.lookbook {
  position: relative;
  margin: 0 calc(-1 * var(--gutter));
  padding: 10vh var(--gutter) 12vh;
  overflow: hidden;
}
.lookbook-word {
  position: absolute;
  /* Tied to the content column, not the viewport. The section bleeds full
     width, but this word belongs to the plates — pinned to the screen edge it
     drifted ~466px away from them on a 2560px monitor. */
  left: calc(var(--gutter) - 1vw);
  top: 16vh;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(120px, 22vw, 340px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--rose);
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}
.lookbook .grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min(5.2vw, 88px);
  min-height: 640px;
}
.lookbook .plate { box-shadow: var(--shadow-plate); position: relative; }
/* Each plate holds all five photographs for its position, stacked. Only one is
   shown; the rest stay hidden so the browser never fetches them unasked. */
.lookbook .frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.lookbook .frame.is-on { opacity: 1; }

.lb-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 4vh;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-62);
}
.lb-nav button {
  background: transparent;
  border: 1px solid var(--ink-42);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 260ms ease, color 260ms ease;
}
.lb-nav button:hover { border-color: var(--rose); color: var(--rose); }
.lb-count { min-width: 5ch; text-align: center; }
.plate-1 { grid-column: 4 / span 3;  grid-row: 1 / span 9;  transform: rotate(-3.5deg); }
.plate-2 { grid-column: 8 / span 2;  grid-row: 6 / span 7;  transform: rotate(2.5deg); }
.plate-3 { grid-column: 11 / span 2; grid-row: 1 / span 6;  transform: rotate(-1.5deg); }
.plate-4 { grid-column: 1 / span 3;  grid-row: 8 / span 6;  transform: rotate(1.5deg); }

.note-1 { grid-column: 8 / span 3;  grid-row: 14 / span 2; align-self: start; padding: 10px 0 0 22px; }
.note-2 { grid-column: 5 / span 2;  grid-row: 11 / span 3; padding: 20px 0 0 2vw; }
.note-3 {
  grid-column: 11 / span 2;
  grid-row: 9 / span 5;
  align-self: end;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 23px);
  line-height: 1.45;
  color: rgba(233, 227, 222, 0.74);
}
.lookbook .cap {
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-72);
}

/* 10 Steps / compare ------------------------------------------------------ */

.steps .row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 28px;
  align-items: baseline;
  border-top: 1px solid var(--line-soft);
  padding: 26px 0;
}
.steps .row:last-of-type { border-bottom: 1px solid var(--line-soft); }
.steps .num { font-size: 11px; letter-spacing: 0.2em; color: var(--rose); }
.steps h3 { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; margin: 0; }
.steps p { font-size: 15px; line-height: 1.8; letter-spacing: 0.01em; color: var(--ink-80); margin: 0; }
.steps .note {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding-top: 26px;
}

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8vh 5vw;
  padding: 12vh 0;
}
.compare .list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.35;
}
.compare .label { margin-bottom: 30px; }
.compare-yes { color: var(--ink-85); }
.compare-no { color: var(--ink-52); }

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6vw 5vw;
  padding: 12vh 0;
}
.testimonials p {
  font-style: italic;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.45;
  margin: 0 0 16px;
  color: var(--ink-80);
}
.testimonials span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-62); }

/* 11 Diary ---------------------------------------------------------------- */

.diary { padding: 12vh 0; }
.diary .top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 7vh;
}
.diary .cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 5vw 4vw; align-items: start; }
.diary .city .photo { aspect-ratio: 4 / 5; box-shadow: var(--shadow-card); }
.diary .city .cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--line-card);
  padding-top: 14px;
  margin-top: 20px;
}
.diary .city .cap b { font-family: var(--serif); font-size: 26px; font-weight: 300; }
.diary .city .cap span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-62); }
.diary .city .cap .rose { color: var(--rose); }
.diary .city.offset-1 { margin-top: 9vh; }
.diary .city.offset-2 { margin-top: 4vh; }
.diary .after {
  font-style: italic;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.45;
  color: var(--ink-70);
  margin: 7vh 0 0;
  max-width: 34ch;
}

/* 12 Principles / expectations -------------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px 5vw;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-80);
}

.expectations { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6vh 5vw; }
.expectations .span { grid-column: 1 / -1; }
.expectations .body { font-size: 15px; line-height: 1.85; letter-spacing: 0.01em; color: var(--ink-80); }
.expectations .label { margin-bottom: 26px; }
.expectations .after {
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.45;
  color: rgba(233, 227, 222, 0.74);
  margin: 2vh 0 0;
  max-width: 32ch;
}

.preamble .col { display: flex; flex-direction: column; gap: 26px; max-width: 46ch; }
.preamble p.lead { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.4; margin: 0; }
.preamble .body { font-size: 15px; line-height: 1.85; letter-spacing: 0.01em; color: var(--ink-80); }

/* 13 Closer / pill -------------------------------------------------------- */

.closer { padding: 14vh 0 12vh; border-top: 1px solid var(--line); }
.closer p {
  font-size: clamp(28px, 5vw, 74px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 19ch;
  text-wrap: pretty;
}
.closer .dim { color: var(--ink-55); }

.pill {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 50;
  background: rgba(19, 18, 17, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(233, 227, 222, 0.25);
  border-radius: 999px;
  padding: 15px 30px;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 11px;
  box-shadow: var(--shadow-pill);
  transition: border-color 260ms ease, color 260ms ease,
              opacity 320ms ease, visibility 320ms ease, transform 320ms ease;
}
.pill:hover { border-color: var(--rose); color: var(--rose); }
/* Once the form is on screen the pill is only in the way — it points at
   something already in front of you, and on a phone it covers the copy it
   floats over. */
.pill.is-away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); display: block; }

/* 14 Enquiry form --------------------------------------------------------- */

.enquiry { padding: 12vh 0 14vh; }
.enquiry .kicker {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 26px;
}
.enquiry h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 56px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 4vh;
  max-width: 22ch;
  text-wrap: pretty;
}
.enquiry h2 em { color: var(--rose); }
.enquiry .sub {
  font-size: 14.5px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink-80);
  margin: 0 0 7vh;
  max-width: 44ch;
}

form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 5vw; max-width: 820px; }
form label { display: flex; flex-direction: column; gap: 12px; }
form .full { grid-column: 1 / -1; }
form label span { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-70); }
form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(233, 227, 222, 0.22);
  color: var(--ink);
  font-family: inherit;
  font-size: 18px;
  padding: 0 0 12px;
  letter-spacing: 0.01em;
  border-radius: 0;
}
/* Focus is shown by the underline turning rose, nothing else. Text inputs
   match :focus-visible even on a mouse click, so the usual focus ring drew a
   full rose box around the field — the underline alone is the design. */
form input:focus,
form input:focus-visible { outline: none; border-bottom-color: var(--rose); }
form .err {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
  min-height: 14px;
  opacity: 0;
  transition: opacity 200ms ease;
}
form label.bad .err { opacity: 1; }
form label.bad input { border-bottom-color: rgba(216, 160, 166, 0.7); }
form .actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 18px;
}
form button {
  background: transparent;
  border: 1px solid var(--ink-42);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  padding: 16px 44px;
  cursor: pointer;
  transition: all 260ms ease;
}
form button:hover { border-color: var(--rose); color: var(--rose); }
form button[disabled] { opacity: 0.45; cursor: default; }

.honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

.receipt { border-top: 1px solid var(--line); padding-top: 34px; max-width: 38ch; display: none; }
.receipt h3 { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.4; margin: 0; }
.receipt p { font-size: 14.5px; line-height: 1.85; letter-spacing: 0.02em; color: var(--ink-80); margin: 14px 0 0; }

/* 15 Footer --------------------------------------------------------------- */

footer { border-top: 1px solid var(--line); padding: 56px 0 44px; }
footer .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 5vw; margin-bottom: 8vh; }
footer .monogram { grid-column: 1; grid-row: 1; align-items: flex-start; padding-bottom: 24px; }
footer .monogram i:nth-child(1) { width: 9px; height: 9px; }
footer .monogram i:nth-child(2) { width: 5px; height: 5px; margin-left: 2px; }
footer .monogram i:nth-child(3) { width: 2.5px; height: 2.5px; margin-left: 3px; }
footer .h {
  align-self: end;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-72);
  padding-bottom: 24px;
}
footer .about {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--ink-70);
  margin: 0;
  max-width: 38ch;
}
footer .list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--ink-70);
}
footer .base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(233, 227, 222, 0.09);
  padding-top: 26px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-62);
}
footer .base a { color: rgba(233, 227, 222, 0.58); }
footer .base .links { display: flex; gap: 36px; }

.swipecue { display: none; }

/* 15b Consent -------------------------------------------------------------
   A quiet bar at the foot of the page, never a modal: it does not cover the
   page, does not trap focus, and does not have to be answered to read on.
   Accept and Decline are deliberately identical — refusing must be no harder
   than agreeing. */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
  padding: 20px var(--gutter) max(20px, env(safe-area-inset-bottom));
  background: rgba(19, 18, 17, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.consent[hidden], .consent [hidden] { display: none; }
.consent-copy { max-width: 74ch; }
.consent p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-80);
}
.consent p b { color: var(--ink); font-weight: 400; }

/* Reports the setting rather than presenting a blank choice. Hidden on the
   first-visit bar, where there is nothing yet to report; always shown on the
   Cookies page, which carries data-persist. */
.consent-state[hidden] { display: none; }
.consent-state {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 10px;
}

/* The permanent control on the Cookies page. */
.cookie-control {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 30px 0;
  margin: 2vh 0 4vh;
  max-width: 70ch;
}
.cookie-control .consent-state { margin-bottom: 18px; }
.cookie-noscript {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-70);
  margin: 18px 0 0;
}
.consent-actions { display: flex; gap: 14px; flex-shrink: 0; }
.consent-actions button {
  background: transparent;
  border: 1px solid var(--ink-42);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 11px 30px;
  min-width: 124px;
  cursor: pointer;
  transition: border-color 260ms ease, color 260ms ease;
}
.consent-actions button:hover { border-color: var(--rose); color: var(--rose); }
/* Marks which way it is set already. Both buttons stay the same size — the
   easier option must never be the one that agrees. */
.consent-actions button.is-current {
  border-color: var(--rose);
  color: var(--rose);
  background: rgba(216, 160, 166, 0.08);
}

/* Lift the Ask pill clear of the bar while it is showing. */
body.consenting .pill { bottom: 132px; }

/* 16 Legal pages ---------------------------------------------------------- */

.legal { padding: 38px var(--gutter) 60px; }
.legal-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.legal-head a { color: var(--ink-66); }
.legal h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 14vh 0 0;
}
.legal h1 b { color: var(--rose); font-weight: 300; }
.legal-sub {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--ink-70);
  margin: 28px 0 10vh;
  max-width: 44ch;
}
.clause-group {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--rose);
  margin: 9vh 0 0;
  padding-bottom: 4px;
}
.clause-group:first-of-type { margin-top: 2vh; }

.clause {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  border-top: 1px solid rgba(233, 227, 222, 0.12);
  padding: 30px 0;
  max-width: 70ch;
}
.clause:last-of-type { border-bottom: 1px solid rgba(233, 227, 222, 0.12); }
.clause-num { font-size: 11px; letter-spacing: 0.2em; color: var(--rose); padding-top: 5px; }
.clause-body { font-size: 15.5px; line-height: 1.85; letter-spacing: 0.01em; color: rgba(233, 227, 222, 0.85); }
.clause-body strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.legal-foot {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-62);
  margin-top: 8vh;
}

/* 16b Journal --------------------------------------------------------------
   Long-form prose on the legal-page frame. Reads as a letter, not a blog. */

.journal .prose { max-width: 68ch; }
.journal .prose h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  margin: 7vh 0 18px;
}
.journal .prose p {
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.01em;
  color: var(--ink-80);
  margin: 0 0 1.5em;
}
.journal .prose .close {
  font-size: clamp(19px, 2vw, 26px);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-72);
  margin-top: 8vh;
}
.journal .figure {
  max-width: 440px;
  aspect-ratio: 3 / 4;
  margin: 6vh 0;
  box-shadow: var(--shadow-card);
}
.journal .clause-body a { color: var(--ink); }
.journal .clause-body a:hover { color: var(--rose); }

/* 17 404 ------------------------------------------------------------------ */

.notfound {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
}
.notfound h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin: 0;
}
.notfound h1 b { color: var(--rose); font-weight: 300; }
.notfound p {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.45;
  color: var(--ink-70);
  margin: 34px 0 0;
  max-width: 30ch;
}
.notfound .back { margin-top: 7vh; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; }

/* 18 Mobile --------------------------------------------------------------- */

@media (max-width: 760px) {
  .wrap { padding: max(20px, env(safe-area-inset-top)) 24px 0; }

  .hero { display: block; padding: 9vh 0 0; }
  .hero h1 { font-size: clamp(72px, 24vw, 96px); }
  /* Clears the full stop in the wordmark. At -18px the portrait, which stacks
     above the heading, cut through the rose dot — the one glyph that cannot be
     allowed to go missing. */
  .hero .portrait { width: min(64%, 340px); margin: 24px 0 0 auto; }
  .hero-note { display: block; padding-top: 26px; }

  .tagline { display: block; padding: 7vh 0 8vh; }
  .tagline p { font-size: 24px; }
  .tagline .micro { text-align: left; margin-top: 26px; }

  .strip { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 11.5px; padding: 18px 0; }

  .section { display: block; padding: 8vh 0; }
  .section > .label { padding: 0 0 30px; }

  .scope { font-size: clamp(26px, 7.2vw, 38px); }
  .lede { font-size: clamp(26px, 7vw, 36px); margin-bottom: 5vh; }

  .cards { display: block; }
  .cards > div { padding: 24px 0; }

  .band { margin: 0 -24px 8vh; height: 72vh; min-height: 420px; }
  .band .quote { align-items: flex-end; padding: 0 28px 40px; justify-content: flex-start; }
  .band .quote p { text-align: left; font-size: clamp(26px, 7vw, 36px); }

  .duo { display: block; padding-bottom: 8vh; }
  .duo .quote p { margin-top: 24px; font-size: 20px; }

  .lookbook { margin: 0 -24px; padding: 6vh 0 9vh; }
  .lookbook-word { left: 8px; top: 2vh; font-size: clamp(90px, 26vw, 140px); }
  .lookbook .grid {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 12vh 24px 10px;
    min-height: 0;
    scrollbar-width: none;
  }
  .lookbook .grid::-webkit-scrollbar { display: none; }
  /* The plate stops being a box and becomes a passthrough, so its five frames
     each become their own slide — twenty in all. */
  .lookbook .plate { display: contents; }
  .lookbook .frame,
  .lookbook .frame[hidden] {
    display: block;
    position: static;
    opacity: 1;
    flex: 0 0 min(68%, 340px);
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
    box-shadow: var(--shadow-plate);
    filter: grayscale(1) contrast(1.06);
  }
  .lb-nav { display: none; }
  .note-1, .note-2 { display: none; }
  .note-3 { flex: 0 0 min(68%, 340px); scroll-snap-align: center; align-self: center; font-size: 17px; }
  .swipecue {
    display: flex;
    justify-content: flex-end;
    padding: 6px 24px 0;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-62);
  }

  .steps .row { display: block; padding: 24px 0; }
  .steps h3 { display: inline-block; margin-left: 16px; margin-bottom: 10px; }

  .compare { display: block; padding: 8vh 0; }
  .compare .no-block { margin-top: 6vh; }

  .testimonials { display: block; padding: 8vh 0; }
  .testimonials > div { margin-bottom: 5vh; }

  .diary .cities {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -24px;
    padding: 0 24px;
    scrollbar-width: none;
  }
  .diary .cities::-webkit-scrollbar { display: none; }
  .diary .city { flex: 0 0 min(70%, 340px); scroll-snap-align: center; }
  .diary .city.offset-1, .diary .city.offset-2 { margin-top: 0; }

  .principles { display: flex; flex-direction: column; gap: 24px; }

  .expectations { display: block; }
  .expectations > div { margin-bottom: 5vh; }

  .closer { padding: 9vh 0; }

  form { display: flex; flex-direction: column; gap: 38px; }
  /* 44px is the smallest comfortable tap target; 17px keeps iOS from zooming
     the page when a field takes focus. */
  form input { font-size: 17px; min-height: 44px; }
  form button { width: 100%; padding: 18px 0; min-height: 56px; }
  form .actions { flex-direction: column; align-items: stretch; text-align: center; }

  .pill { bottom: max(20px, env(safe-area-inset-bottom)); right: 20px; padding: 14px 26px; font-size: 19px; }

  footer .cols { display: block; }
  footer .h { padding: 5vh 0 16px; }
  /* The footer links were 14px tall — readable, but an awkward thing to hit
     with a thumb. The padding gives them a proper target without moving them. */
  footer .base .links { gap: 8px 28px; flex-wrap: wrap; }
  footer .base .links a { padding: 15px 0; }
  .legal-foot a { display: inline-block; padding: 12px 0; }

  .legal { padding: 38px 24px 60px; }
  .clause { gap: 18px; }

  .consent { padding: 18px 24px max(18px, env(safe-area-inset-bottom)); gap: 18px; }
  .consent p { font-size: 13.5px; }
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1; min-width: 0; padding: 13px 0; }
  body.consenting .pill { bottom: 188px; }
}

/* 19 Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}