/* Our name page. Linen opening, one dark band for the three roots, then the four houses as an image grid.
   Every photograph and the film here are licensed Pexels stock used as mood (see the credit comment in
   functions/[page].js); the jewellery itself only ever appears in real product photographs elsewhere. */
:root { --atelier: #141012; --champagne: #EDE3D6; --champagne-soft: #B8ABA1; --scrim: linear-gradient(180deg, rgba(14, 10, 11, 0) 35%, rgba(14, 10, 11, .78) 100%); }

/* ---------- hero ---------- */
.nm-hero { padding: 0; }
.nm-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: min(88vh, 860px); }
.nm-hero-copy { padding: clamp(48px, 7vw, 104px) var(--gutter); padding-right: clamp(24px, 5vw, 80px); display: grid; align-content: center; justify-items: start; gap: clamp(18px, 2.4vw, 28px); max-width: 720px; margin-left: auto; }
.nm-hero-copy .wordmark { width: clamp(220px, 28vw, 400px); height: auto; margin-left: -8px; }
.nm-hero h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0; max-width: 16ch; text-wrap: balance; }
.nm-hero .lead { font-size: var(--s-1); line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 36ch; }
.nm-say { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; }
.nm-say .say { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: .06em; color: var(--rose-deep); }
.nm-say .say b { font-weight: 500; }
.nm-say .how { font-size: var(--s--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.nm-hero-photo { position: relative; margin: 0; overflow: hidden; min-height: 420px; }
.nm-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (prefers-reduced-motion: no-preference) {
  .nm-hero-photo img { animation: nm-drift 22s ease-out both; }
  @keyframes nm-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
}
@media (max-width: 860px) {
  .nm-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .nm-hero-copy { margin: 0; padding-block: clamp(40px, 10vw, 64px); }
  .nm-hero-photo { min-height: min(58vh, 520px); }
}

/* ---------- the three roots: the dark band ---------- */
.nm-roots { background: var(--atelier); color: var(--champagne); padding-block: clamp(72px, 10vw, 136px); }
.nm-roots ::selection { background: var(--blush); color: var(--ink); }
.nm-roots-head { max-width: 760px; }
.nm-roots-head h2 { font-size: var(--s-3); line-height: 1.08; margin: 0; color: var(--champagne); text-wrap: balance; }
.nm-roots-head p { color: var(--champagne-soft); margin: 1rem 0 0; max-width: 52ch; }
.nm-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(40px, 6vw, 72px); }
.nm-panel { position: relative; margin: 0; min-height: clamp(460px, 64vh, 680px); overflow: hidden; background: #0c0a0b; isolation: isolate; }
.nm-panel > img, .nm-panel > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.nm-panel:hover > img, .nm-panel:hover > video { transform: scale(1.04); }
.nm-panel::after { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1; }
.nm-panel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 6px; }
.nm-panel .w { font-size: clamp(3.4rem, 2.4rem + 4vw, 6rem); font-weight: 200; line-height: .95; letter-spacing: -0.02em; color: #FBF6EF; }
.nm-panel .g { font: 500 var(--s--1)/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--blush); }
.nm-panel .d { color: rgba(251, 246, 239, .86); max-width: 30ch; margin-top: 4px; }
.nm-together { margin: clamp(56px, 8vw, 104px) 0 0; display: grid; justify-items: center; text-align: center; gap: 12px; }
.nm-together p { margin: 0; color: var(--champagne-soft); font-size: var(--s-1); }
.nm-together .phrase { font-family: var(--script); font-size: clamp(3rem, 2rem + 4.4vw, 5.8rem); line-height: 1.05; color: var(--blush); padding-bottom: .1em; }
.nm-together .small { font-size: 1rem; max-width: 52ch; }
@media (max-width: 860px) {
  .nm-panels { grid-template-columns: 1fr; }
  .nm-panel { min-height: 440px; }
}

/* ---------- three ways to read it ---------- */
.nm-read .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.nm-read h2 { font-size: var(--s-3); line-height: 1.08; margin: 0; max-width: 12ch; text-wrap: balance; }
.nm-read .note { color: var(--ink-soft); margin: 1.2rem 0 0; max-width: 40ch; }
.nm-read dl { margin: 0; }
.nm-read dl div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.nm-read dl div:last-child { border-bottom: 1px solid var(--line); }
.nm-read dt { font-size: var(--s-1); color: var(--ink); }
.nm-read dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) { .nm-read .wrap, .nm-read dl div { grid-template-columns: 1fr; } .nm-read dl div { gap: 6px; } }

/* ---------- the houses ---------- */
.nm-houses h2 { font-size: var(--s-3); line-height: 1.08; margin: 0; max-width: 20ch; text-wrap: balance; }
.nm-houses .intro-p { color: var(--ink-soft); margin: 1rem 0 0; max-width: 58ch; }
.nm-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(260px, 30vw, 380px)); grid-template-areas: "u c c" "u t e"; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(36px, 5vw, 56px); }
.nm-house { position: relative; overflow: hidden; display: block; color: #FBF6EF; text-decoration: none; isolation: isolate; background: #1b1618; }
.nm-house:nth-child(1) { grid-area: u; } .nm-house:nth-child(2) { grid-area: c; } .nm-house:nth-child(3) { grid-area: t; } .nm-house:nth-child(4) { grid-area: e; }
.nm-house img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.nm-house:hover img { transform: scale(1.05); }
.nm-house::after { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1; }
.nm-house .in { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.2vw, 30px); display: grid; gap: 4px; }
.nm-house .n { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -0.01em; }
.nm-house .r { font-size: .92rem; color: rgba(251, 246, 239, .82); }
.nm-house .v { font-size: 1rem; color: rgba(251, 246, 239, .92); max-width: 34ch; margin-top: 6px; }
.nm-house .go { margin-top: 10px; font: 500 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blush); }
.nm-house:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; }
@media (max-width: 860px) {
  .nm-bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: "u u" "c c" "t e"; grid-auto-rows: 300px; }
  .nm-house { min-height: 300px; }
  .nm-house:nth-child(1) { min-height: 380px; }
}
@media (max-width: 520px) { .nm-bento { grid-template-columns: 1fr; grid-template-areas: "u" "c" "t" "e"; } }

/* ---------- next ---------- */
.nm-next .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.nm-next h2 { font-size: var(--s-2); line-height: 1.2; margin: 0; max-width: 26ch; }
.nm-next .ctas { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.nm-next .text-link, .nm-roots .text-link { font: 500 var(--s--1)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 10px 0 6px; border-bottom: 1px solid var(--line); }
.nm-next .text-link:hover { border-color: var(--ink); }