/* In Selene's Light: moonlit gothic editorial.
   Claret night with a soft moon glow; blackletter for the gown's name only;
   Cormorant for the voice of the page; Karla for small practical text. */

@font-face { font-family: "Unifraktur"; src: url("assets/fonts/unifraktur.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/cormorant-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/cormorant-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/cormorant-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/cormorant-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("assets/fonts/cormorant-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Karla"; src: url("assets/fonts/karla.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Karla"; src: url("assets/fonts/karla-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  --night: #2a0a12;
  --claret: #3d0f1b;
  --rose: #b8243b;
  --rose-hover: #9e1c31;
  --blush: #f0aab6;
  --moon: #f6ece6;
  --tissue: #f2e9e6;
  --ink: #1f1215;
  --muted-dark: #6e5559;
  --muted-light: #cfb5ba;
  --hair-dark: rgba(31, 18, 21, .2);
  --hair-light: rgba(246, 236, 230, .24);

  --display: "Unifraktur", "Old English Text MT", serif;
  --serif: "Cormorant", "Cormorant Garamond", Garamond, Georgia, serif;
  --sans: "Karla", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--claret); color: var(--moon); font-family: var(--sans); font-size: 1.02rem; line-height: 1.65; }
/* fine film grain over everything, so the colour never looks flat */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--blush); outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--moon); color: var(--ink); padding: 8px 14px; z-index: 60; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 780px; }

/* small italic lead-in with a hairline, like a caption in an exhibition catalogue */
.eyebrow { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--muted-light); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .8rem; }
.eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--dark { color: var(--muted-dark); }

h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.01em; }

/* buttons: framed like a printed label */
.buy { display: inline-block; background: var(--rose); color: var(--moon); text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; padding: 1.2em 2.2em; box-shadow: inset 0 0 0 4px var(--rose), inset 0 0 0 5px rgba(246, 236, 230, .45); transition: background .2s ease, box-shadow .2s ease; }
.buy:hover { background: var(--rose-hover); box-shadow: inset 0 0 0 4px var(--rose-hover), inset 0 0 0 5px rgba(246, 236, 230, .65); }
.buy--small { padding: .9em 1.4em; font-size: .7rem; }
.top .buy { white-space: nowrap; }
.buy--large { font-size: .9rem; padding: 1.35em 3em; }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px var(--gutter); max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; }
.brand { white-space: nowrap; display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: .03em; }
.moon { width: 1.1em; height: 1.1em; fill: var(--moon); }

/* hero, lit from the upper right like moonlight through the window */
.hero { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(20px, 4vw, 48px) var(--gutter) clamp(64px, 8vw, 112px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero::before { content: ""; position: absolute; inset: -120px -10vw 0 30%; background: radial-gradient(ellipse at 60% 25%, rgba(255, 205, 214, .16), rgba(255, 205, 214, 0) 60%); pointer-events: none; z-index: -1; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(4.8rem, 11.5vw, 10.2rem); line-height: .8; letter-spacing: -.005em; margin: 0 0 .4em -.04em; text-shadow: 0 0 60px rgba(255, 190, 205, .18); }
.lede { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.28; max-width: 22em; margin-bottom: .9em; }
.hero__body { color: var(--muted-light); max-width: 30em; }
.cta { margin-top: 2rem; }
.cta__note { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted-light); margin: 1em 0 0; }

/* annotated photograph in a gothic arch */
.anatomy { margin: 0; }
.anatomy__frame { position: relative; aspect-ratio: 3 / 4; }
.anatomy__frame::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--hair-light); border-radius: 50% 50% 0 0 / 30% 30% 0 0; pointer-events: none; }
.anatomy__arch { position: absolute; inset: 0; overflow: hidden; border-radius: 50% 50% 0 0 / 30% 30% 0 0; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.anatomy__arch img { width: 100%; height: 100%; object-fit: cover; }
.anatomy__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anatomy__lines polyline { fill: none; stroke: var(--moon); stroke-opacity: .85; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dot { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--moon); background: rgba(42, 10, 18, .7); color: var(--moon); font-family: var(--serif); font-weight: 600; font-size: .9rem; line-height: 1; display: grid; place-items: center; }
.note { position: absolute; transform: translateY(-50%); width: 21%; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(.95rem, 1.15vw, 1.12rem); line-height: 1.2; color: var(--moon); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .85); }
.note em { display: block; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blush); margin-top: .35em; }
.note--r { right: 0; text-align: right; }
.note--l { left: 0; }
.anatomy__key { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .anatomy__arch img { animation: settle 1.6s ease-out both; }
  .anatomy__lines { animation: appear .8s ease-out .6s both; }
  .note { animation: appear .8s ease-out .9s both; }
}
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { transform: scale(1.05); } to { transform: scale(1); } }

/* what you get */
.inside { background: var(--tissue); color: var(--ink); padding: clamp(72px, 9vw, 128px) 0; }
.inside__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.inside h2 { margin-bottom: clamp(24px, 3vw, 40px); max-width: 12em; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: .9em 0 .9em 1.8em; border-top: 1px solid var(--hair-dark); position: relative; }
.ticks li:last-child { border-bottom: 1px solid var(--hair-dark); }
.ticks li::before { content: ""; position: absolute; left: .1em; top: 1.45em; width: 7px; height: 7px; background: var(--rose); transform: rotate(45deg); }
.pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
.pages a { text-decoration: none; display: block; transition: transform .35s ease; }
.pages a:nth-child(1) { transform: rotate(-2.4deg) translateY(10px); }
.pages a:nth-child(2) { transform: rotate(1.8deg); }
.pages a:nth-child(3) { transform: rotate(1.4deg) translateY(6px); }
.pages a:nth-child(4) { transform: rotate(-1.6deg) translateY(-4px); }
.pages a:hover { transform: rotate(0) translateY(-6px); }
.pages img { background: #fff; box-shadow: 0 2px 4px rgba(31, 18, 21, .12), 0 22px 40px -20px rgba(31, 18, 21, .5); }
.pages span { display: block; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted-dark); margin-top: .6em; text-align: center; }

/* before you buy: the back of a pattern envelope */
.envelope { background: var(--night); padding: clamp(72px, 9vw, 128px) 0; }
.envelope h2 { margin-bottom: clamp(32px, 4vw, 56px); }
.env { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--hair-light); outline: 1px solid var(--hair-light); outline-offset: 6px; }
.env > * { padding: clamp(24px, 3.4vw, 44px); }
.env__facts { margin: 0; border-right: 1px solid var(--hair-light); }
.env__facts div { padding: 1em 0; border-bottom: 1px solid var(--hair-light); }
.env__facts div:first-child { padding-top: 0; }
.env__facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.env__facts dt, .env__fabric h3 { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blush); margin-bottom: .4em; }
.env__facts dd { margin: 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; }
.env__fabric h3:not(:first-child) { margin-top: 1.8em; }
.env table { width: 100%; border-collapse: collapse; margin-top: .4em; }
.env th { text-align: left; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; padding: .32em 0; border-bottom: 1px solid var(--hair-light); }
.env th small { font-family: var(--sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); margin-left: .5em; }
.env td { text-align: right; font-family: var(--serif); font-weight: 600; font-size: 1.2rem; padding: .32em 0; border-bottom: 1px solid var(--hair-light); white-space: nowrap; }
.env__small { font-size: .9rem; color: var(--muted-light); margin: 1em 0 0; }

/* gallery */
.gallery { display: grid; grid-template-columns: 1.2fr 1fr; background: var(--night); }
.gallery figure { margin: 0; position: relative; overflow: hidden; }
.gallery figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 35%; background: linear-gradient(to top, rgba(20, 5, 9, .75), rgba(20, 5, 9, 0)); pointer-events: none; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; max-height: 90vh; }
.gallery__seated img { object-position: 50% 20%; }
.gallery figcaption { position: absolute; left: clamp(16px, 3vw, 36px); bottom: clamp(14px, 2.5vw, 30px); z-index: 1; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

/* faq */
.faq { background: var(--tissue); color: var(--ink); padding: clamp(72px, 9vw, 128px) 0; }
.faq h2 { margin-bottom: clamp(28px, 3.5vw, 48px); }
.faq details { border-top: 1px solid var(--hair-dark); }
.faq details:last-of-type { border-bottom: 1px solid var(--hair-dark); }
.faq summary { cursor: pointer; list-style: none; padding: .85em 2.2em .85em 0; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; line-height: 1.25; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .1em; top: .62em; font-family: var(--serif); font-weight: 500; font-size: 1.7rem; line-height: 1; color: var(--rose); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.3em; max-width: 40em; color: #3d2c2f; }
.faq a { color: var(--rose-hover); }

/* final */
.final { position: relative; padding: clamp(80px, 10vw, 140px) 0; text-align: center; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255, 205, 214, .14), rgba(255, 205, 214, 0) 60%); pointer-events: none; }
.final__inner { position: relative; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; color: var(--blush); }
.ornament span { width: 5rem; height: 1px; background: currentColor; opacity: .6; }
.ornament svg { width: 22px; height: 22px; fill: currentColor; }
.final h2 { font-weight: 500; }
.final__kicker { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--muted-light); }
.final .bl { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 7.5vw, 6rem); line-height: 1; margin-top: .15em; }
.final__price { font-family: var(--serif); font-weight: 600; font-size: 3rem; line-height: 1; margin: 1.6rem 0 .5rem; }
.final__meta { color: var(--muted-light); font-size: .95rem; margin-bottom: 2.2rem; }
.final__notice { margin-top: 1.2rem; font-size: .9rem; color: var(--blush); }

/* footer */
.foot { background: var(--night); color: var(--muted-light); font-size: .85rem; padding: 40px var(--gutter); text-align: center; }
.foot p { margin: 0 0 .4em; }
.foot__brand { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--moon); }
.foot nav { margin-top: .9em; letter-spacing: .04em; }

/* legal pages */
.legal { background: var(--tissue); color: var(--ink); padding: clamp(48px, 7vw, 96px) 0; }
.legal h1 { font-family: var(--serif); font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1.05; margin-bottom: .2em; }
.legal h2 { font-size: 1.55rem; margin: 1.6em 0 .4em; }
.legal .updated { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--muted-dark); margin-bottom: 2em; }
.legal a { color: var(--rose-hover); }

/* responsive */
@media (max-width: 960px) {
  .hero, .inside__grid, .env { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(4.6rem, 18vw, 8rem); }
  .anatomy { max-width: 560px; margin: 0 auto; width: 100%; }
  .env__facts { border-right: 0; border-bottom: 1px solid var(--hair-light); }
}
@media (max-width: 640px) {
  .note, .anatomy__lines { display: none; }
  .anatomy__frame::before { inset: -8px; }
  .anatomy__key { display: block; margin: 26px 0 0; padding-left: 1.4em; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.35; }
  .anatomy__key li { margin-bottom: .5em; padding-left: .2em; }
  .anatomy__key em { white-space: nowrap; font-family: var(--sans); font-style: normal; font-weight: 700; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blush); margin-left: .5em; }
  .brand { font-size: 1.1rem; }
  .buy--small { font-size: .62rem; padding: .85em 1.1em; }
  .gallery { grid-template-columns: 1fr; }
  .pages { gap: 22px 16px; }
}
@media (max-width: 520px) {
  .wide-only { display: none; }
}