/* site.css: the pages the drafts did not have (the shop, care, our story, ordering) and the email
   order box. Same quiet layer as lux.css: square, one colour, the type the client chose. */

/* a page that opens on its words, not a photograph */
.page-top { padding-top: calc(var(--s-9, 96px) + var(--s-4)); }
.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5) var(--s-7); margin-bottom: var(--s-7); }
.page-head h1 { font-size: clamp(40px, 2.6vw + 16px, 60px); line-height: 1.05; margin: 0; }
.page-head p { margin: var(--s-3) 0 0; color: var(--muted); max-width: 46ch; }
.page-head--stack { margin-bottom: var(--s-6); }
.page-head--centre { justify-content: center; text-align: center; }
.page-head--centre p { margin-inline: auto; }

/* the shop's filter: three words, the chosen one underlined */
.filter { display: flex; gap: var(--s-5); }
.filter > button { background: none; border: 0; padding: var(--s-2) 0; color: var(--muted); font: inherit; cursor: pointer;
                   border-bottom: 1px solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.filter > button > span { font-size: var(--t-small); margin-left: 2px; }
.filter > button:hover { color: var(--ink); }
.filter > button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filter > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.shop__group[hidden], .shop__drops[hidden] { display: none; }
.shop .section-head { margin-bottom: var(--s-5); }
@media (min-width: 640px) { .shop .grid--studs .tile { --tile-ratio: 3 / 4; } }

/* care: the habits, numbered in the display face */
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); align-content: start; }
.habit { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.habit:last-child { border-bottom: 0; }
.habit__n { font: 400 44px/1 var(--font-display); color: var(--muted); }
.habit h2 { font-size: clamp(24px, 1vw + 16px, 30px); margin: 0 0 var(--s-2); }
.habit p { margin: 0; max-width: 48ch; }

/* a phone: square tiles, the head closer, so the studs and the head share one screen */
@media (max-width: 639px) {
  .shop .tile { --tile-ratio: 1 / 1; }
  .shop .page-head { margin-bottom: var(--s-5); gap: var(--s-4); }
  .shop .section-head { margin-bottom: var(--s-4); }
  .shop .grid { row-gap: var(--s-5); }
}

/* the shop filtered to one kind: its first screen closes up round what is left, so the drops
   come straight under the head instead of a screen below it */
main > .section.shop.is-filtered { min-height: 0; height: auto; padding-bottom: var(--s-6); }
main > .section.shop__drops.is-filtered { min-height: 0; height: auto; padding-top: 0; }

/* spec rows: a long value wraps under its name on a narrow screen instead of running into it */
.rows--spec .rows__value { white-space: normal; }
@media (max-width: 639px) {
  .rows--spec > li { grid-template-columns: auto minmax(0, 1fr); }
  .rows--spec .rows__name { white-space: nowrap; }
  #specs .faq--tight { display: none; }   /* a phone keeps the specs to one screen; the care guide is a link away */
}
.specs__care { margin-top: var(--s-5); }

/* a phone: the odd last tile under "More pearl earrings" stays half width like the others */
@media (max-width: 639px) { #more .grid > .tile:is(.span-3, .span-4):nth-child(odd of .tile):nth-last-child(1 of .tile) { grid-column: auto / span 6; } }

/* the name, one way everywhere: FLOW MOON in capitals, the letters spaced. The space after the last
   letter is given back on the left where the name is centred, so the letters sit on the centre */
.nav__logo { font-family: var(--font-display); letter-spacing: .3em; }
@media (min-width: 1024px) { .nav--split .nav__logo { padding-left: .3em; } }
@media (max-width: 639px) { .nav--split .nav__logo { letter-spacing: .26em; } }   /* a phone: the spaced name, the button and the menu on one line */
@media (max-width: 379px) { .nav--split .nav__logo { font-size: 17px; letter-spacing: .22em; } }
.close__word { letter-spacing: .14em; }
.closing__cta.close--word, .close__word { min-width: 0; }   /* the spaced name is wider than the line before it is fitted: it must not stretch the close */
.brand { letter-spacing: .16em; }

/* studio photographs (a product with photos/shot/), on the same stone grey as the cut-outs (the retouch
   sets them on #ededeb). In a tile the pair cropped from the photograph sits like a cut-out; on hover the
   photograph of the pair on the ear fills the tile */
.gallery__main, .frame--photo { background: var(--surface); }
.tile__media--cut > .tile__alt--photo { padding: 0; object-fit: cover; }
.menu-card .panel > img.cut--shot { padding: 7% 10% 3%; }   /* its reflection runs into the lower padding, so the pair matches the cut-outs */

/* the product page's gallery: the photograph large, the thumbnails in a row under it, the chosen one
   underlined like the shop's filter */
.hero__media.gallery { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-3); background: none; overflow: visible; }
.gallery__main { position: relative; overflow: clip; min-height: 0; }
.gallery__main > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: opacity .25s var(--ease); }
.gallery__main > img.is-swapping { opacity: 0; }
.gallery__thumbs { display: flex; gap: var(--s-3); padding-bottom: 7px; }
.gallery__thumbs > button { position: relative; flex: none; width: 64px; aspect-ratio: 1; padding: 0; border: 0; background: var(--surface); cursor: pointer;
                            opacity: .6; transition: opacity var(--dur) var(--ease); }
.gallery__thumbs > button > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--ink); opacity: 0; transition: opacity var(--dur) var(--ease); }
.gallery__thumbs > button:hover, .gallery__thumbs > button[aria-pressed="true"] { opacity: 1; }
.gallery__thumbs > button[aria-pressed="true"]::after { opacity: 1; }
.gallery__thumbs > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 639px) { .gallery__thumbs { gap: var(--s-2); } .gallery__thumbs > button { width: 52px; } }
/* the other size, which has no photographs yet: its cut-out sits in the frame, and the thumbnails (of the
   size that has them) step back until that size is chosen again */
.gallery__main > img.is-cut, .gallery__main > img.is-plain { object-fit: contain; }   /* a pair on the plain grey is shown whole */
.gallery.is-other .gallery__thumbs { visibility: hidden; }
.gallery__thumbs[hidden] { display: none; }   /* the other size's thumbnails */
@media (prefers-reduced-motion: reduce) { .gallery__main > img { transition: none; } }
/* a phone: the heading, then the pair on the ear (square, the ear kept in), then the close-up */
@media (max-width: 639px) {
  .tall-small--photo > .split-col { display: contents; }
  .tall-small--photo > .split-col > * { grid-column: 1 / -1; }
  .tall-small--photo > .split-col > .section-head { order: -2; }
  .tall-small--photo > .frame { order: -1; --ratio: 100% !important; }
  .tall-small--photo > .frame > .frame__img { object-position: 50% 35%; }
  .tall-small--photo .split-col__end .frame.small { margin-top: 0; }
}

/* a pair that runs off its photograph (an editorial crop, noted by shots.py): the side it runs off is laid
   on the frame's edge, so the pair runs off the frame too instead of stopping in mid-air */
:is(.gallery__main, .tile__media--cut, .menu-card .panel) > img.bleed-r { object-position: 100% 50%; padding-right: 0; }
:is(.gallery__main, .tile__media--cut, .menu-card .panel) > img.bleed-l { object-position: 0 50%; padding-left: 0; }

/* a design: its moon name, what it is underneath, then the price */
.tile__head { flex-direction: column; align-items: flex-start; gap: 2px; }
.tile__name { display: grid; gap: 2px; min-width: 0; }
.tile__name > h3 { font: 400 22px/1.15 var(--font-display); letter-spacing: 0; margin: 0; }
.tile__desc { font-size: 14px; color: var(--muted); }
.tile__price { font-size: 14px; margin-top: 2px; }
.tile__price > [data-open] { color: var(--ink); }
@media (max-width: 639px) { .tile__name > h3 { font-size: 20px; } .tile__desc, .tile__price { font-size: 13px; } }
[data-open][hidden] { display: none; }
.pdp__desc { margin: var(--s-2) 0 0; font-size: 17px; letter-spacing: 0.02em; }

/* two studs: a pair of wide tiles */
@media (min-width: 640px) { .grid--two > .tile { --tile-ratio: 3 / 2; } }

/* the order box: the price, the opening price under it, Order by email and the line on how it works */
.order__price { display: grid; gap: var(--s-1, 4px); }
.order__open { font-size: var(--t-small); color: var(--ink); }
.order__line { margin: 0; max-width: 44ch; }
.wear { margin-top: var(--s-3); color: var(--ink); }

/* our story: paragraphs in the reading measure */
.prose { display: grid; gap: var(--s-4); max-width: 52ch; }
.prose > p { margin: 0; }
.prose > h2 { font-size: clamp(28px, 1.4vw + 16px, 40px); line-height: 1.1; margin: 0 0 var(--s-2); }
.eyebrow { color: var(--muted); margin: 0 0 var(--s-3); }
.story__link { display: inline-block; margin-top: var(--s-4); }
.subscribe__line { flex-basis: 100%; margin: 0; order: 3; opacity: .72; }

/* the two studs: the head on the left half, the pair of tiles on the right */
.studs-pair { align-items: stretch; }
.studs-pair > .span-6 { display: flex; flex-direction: column; }
@media (min-width: 640px) { .studs-pair > .tile { --tile-ratio: 3 / 4; } }
@media (max-width: 639px) { .studs-pair > .span-6 .split-col__end { margin-top: var(--s-3); } }

/* fitting each screen: the specs' photograph and the story's photographs give way on a phone and a tablet */
@media (max-width: 1279px) {
  .rows--spec > li { padding-block: 10px; }
  .habits { gap: var(--s-4); }
  .habit { padding-bottom: var(--s-4); }
}
@media (max-width: 639px) {
  .story__pic { --ratio: 62% !important; }
  .story-teaser__pic { --ratio: 70% !important; }
  .habit h2 { font-size: 22px; }
  .habit p { font-size: 15px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #range .group:last-child .tile { --tile-ratio: 1 / 1; }
  .habit p { font-size: 15px; line-height: 1.5; }
  .habits { gap: var(--s-3); }
  .habit { padding-bottom: var(--s-3); }
}
@media (max-width: 639px) {
  .wear { margin-top: var(--s-2); }
  .rows--spec > li { padding-block: 7px; font-size: 14px; }
  .habits { gap: var(--s-3); }
  .habit { padding-bottom: var(--s-3); grid-template-columns: 40px minmax(0, 1fr); }
  .habit__n { font-size: 34px; }
  .habit p { line-height: 1.45; }
}
/* spec rows: the name keeps its own width beside a long value */
@media (min-width: 640px) { .rows--spec > li { grid-template-columns: minmax(7em, max-content) minmax(0, 1fr); } .rows--spec .rows__value { text-align: right; } }