/* Layout idea: an eclipse for the logo, flat moons for the products, and quiet Scenes. Every page is one screen with no scrolling.
   Palette: gold, white, blood red, darkness and snow white, on milk-white paper. */
:root {
  --milk: #fbf8f1;
  --ink: #221c15;
  --sub: #6f6452;
  --gold: #b8913a;
  --sun: #c9a248;
  --night: #17120e;
  --hairline: #e4dac4;
  --display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --serif: "Cormorant Garamond", "Garamond", Georgia, serif;
  --vh: 1vh;
  /* --u is one unit of the 640x400 sketches, in real pixels */
  --u: min(100vw / 640, 100 * var(--vh) / 400);
  color-scheme: light;
}
@supports (height: 1dvh) { :root { --vh: 1dvh; } }
@media (max-aspect-ratio: 11/10) { :root { --u: min(100vw / 340, 100 * var(--vh) / 600); } }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background-color: var(--milk);
  color: var(--word, var(--ink));
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- the logo: same rule at every size ----------
   Letters are placed one by one: each is as wide as Cinzel's own letter plus .14em.
   The O starts .14em after the last L's ink and is exactly as tall as the G, overshoot included.
   The O is an eclipse: a night disc, a thin gold ring, and a small fiery corona that spills outside the box
   without moving anything. Its shapes are drawn into each page's logo. */
.logo, .name { display: inline-block; white-space: nowrap; font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: 0; }
.logo { text-decoration: none; color: inherit; font-size: calc(20 * var(--u)); }
.l { display: inline-block; }
.l:nth-child(1) { width: .649em; }   /* S */
.l:nth-child(2) { width: .494em; }   /* I */
.l:nth-child(3) { width: .72em; }    /* L */
.l:nth-child(4) { width: .494em; }   /* I */
.l:nth-child(5) { width: .951em; }   /* G */
.l:nth-child(6) { width: .7em; }     /* L: ink ends at .56, then .14 */
.o { display: inline-block; position: relative; width: .73em; height: .73em; vertical-align: -.015em; }
.o svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- top left of the product pages: the small logo with PRODUCTS under it ---------- */
.bar {
  position: fixed; left: calc(26 * var(--u)); top: calc(22 * var(--u)); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-start;
}

/* ---------- PRODUCTS: hover, tap or keyboard focus shows AL, Eve and Maple just below ---------- */
.products { position: relative; }
.products-label {
  display: block; margin: 0; padding: max(calc(4 * var(--u)), 6px) 0 max(calc(3 * var(--u)), 5px);
  border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer;
  font-family: var(--display); font-size: max(calc(8 * var(--u)), 9px); line-height: 1; letter-spacing: .25em;
  color: var(--sub);
  transition: border-color .3s ease;
}
.bar .products { margin: calc(5.6 * var(--u)) 0 0 var(--u); }
.products-label:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.products.open .products-label { border-bottom-color: var(--gold); }
.products-list {
  position: absolute; z-index: 40; top: calc(100% + 12px); left: 0;
  display: flex; flex-direction: column; gap: max(calc(7 * var(--u)), 14px);
  width: max-content; max-width: calc(100vw - 32px);
  padding: max(calc(9 * var(--u)), 16px) max(calc(12 * var(--u)), 20px);
  text-align: left;
  --sub: #6f6452;
  color: var(--ink);
  background: var(--milk);
  border: 1px solid var(--hairline); border-top-color: var(--gold);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 18px 40px -26px rgba(34,28,21,.3);
  /* closed; on the way out it waits a moment, so the mouse can travel from the label into the list */
  opacity: 0; visibility: hidden; transform: translate(var(--shift, 0), -8px);
  transition: opacity .35s ease .2s, transform .35s ease .2s, visibility 0s linear .55s;
}
.products-list::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px; }   /* bridge over the gap */
.products.open .products-list,
.products:has(:focus-visible) .products-list {
  opacity: 1; visibility: visible; transform: translate(var(--shift, 0), 0);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
@media (hover: hover) {
  .products:hover .products-label { border-bottom-color: var(--gold); }
  .products:hover .products-list {
    opacity: 1; visibility: visible; transform: translate(var(--shift, 0), 0);
    transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
}
.products.shut .products-list { opacity: 0; visibility: hidden; transition: none; }   /* after Escape */
.products-list a {
  display: grid; grid-template-columns: auto 1fr; column-gap: max(calc(6 * var(--u)), 12px); row-gap: 2px; align-items: center;
  text-decoration: none;
}
.products-list .ico { grid-row: span 2; width: max(calc(10 * var(--u)), 20px); height: max(calc(10 * var(--u)), 20px); overflow: visible; }
.products-list .pname {
  justify-self: start;
  font-family: var(--display); font-size: max(calc(7 * var(--u)), 14px); letter-spacing: .24em; line-height: 1.4;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.products-list .psub { font-style: italic; font-size: max(calc(8.5 * var(--u)), 17px); line-height: 1.25; color: var(--sub); }
.products-list a:hover .pname, .products-list a:focus-visible .pname, .products-list a[aria-current="page"] .pname { border-bottom-color: var(--gold); }

/* ---------- a product page: an animated Scene behind a round gold-ringed frame and the words ---------- */
.env { position: fixed; left: 0; top: 0; width: 100vw; height: calc(100 * var(--vh)); display: block; }
.stage { position: fixed; left: 0; top: 0; width: 100vw; height: calc(100 * var(--vh)); z-index: 10; }
.frame {
  position: absolute; left: 50%;
  top: calc(50% + (var(--cy) - 200 - 70.5) * var(--u));
  width: calc(141 * var(--u)); height: calc(141 * var(--u));
  margin-left: calc(-70.5 * var(--u));
}
.frame svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* words: each sits on the baseline --y of the sketch, at size --fs, with --b its baseline within the line box */
.t {
  position: absolute; left: 0; right: 0; margin: 0;
  top: calc(50% + (var(--y) - 200 - var(--b, .8) * var(--fs)) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  line-height: 1; text-align: center; font-weight: 400;
}
.t-title { font-family: var(--display); font-weight: 500; letter-spacing: .184em; padding-left: .184em; --fs: 38; }
.t-tiny { font-family: var(--display); font-size: max(calc(var(--fs) * var(--u)), 8px); letter-spacing: .28em; padding-left: .28em; color: var(--sub); }
.status { --fs: 7; }
.t-by { --fs: 8.5; }
.t-line { line-height: var(--lh, 1); }

/* Maple: the morning room. The centre panel runs from the top of the curtain rods to the bottom of the curtains */
.maple { --cy: 156.5; background-color: #f3ead8; }
.maple .env { pointer-events: none; }
.maple canvas.env { z-index: 0; }
.maple svg.env { z-index: 1; }
.maple .status { --y: 244.5; }
.maple .t-title { --y: 282.5; }
.maple .t-line { --y: 310.5; --fs: 20; font-style: italic; }
.maple .t-by { --y: 334.5; }

/* Eve: above the clouds. The words change from snow to ink as the sky turns to morning */
.eve { --cy: 122; background-color: #2c3044; --word: #fdfbf5; --sub: #f0e6cd; }
.eve .t-tiny { color: var(--sub); }
.eve .products-label { color: var(--word); }   /* it sits on the sky, which stays darker than the clouds for longer */
.eve .status { --y: 212; }
.eve .t-title { --y: 250; }
.eve .t-line { --y: 280; --fs: 17; --lh: 1.1765; --b: .9; }
.eve .t-by { --y: 324; }

/* AL: in the garden. The words sit on a calm panel like Maple's */
.al { --cy: 122; background-color: #f3ead8; }
.al .status { --y: 202.5; }
.al .t-title { --y: 236; letter-spacing: .158em; padding-left: .158em; }
.al .t-sub { --y: 259; --fs: 18; font-style: italic; color: var(--sub); }
.al .t-line { --y: 288; --fs: 15; --lh: 1.2; --b: .91; }

/* a screen too narrow for the sketch: frame and words stack, the Scene goes around them */
.br { display: inline; }
@media (max-aspect-ratio: 11/10) {
  .stage { display: flex; flex-direction: column; align-items: center; justify-content: center; top: var(--top); height: auto; bottom: var(--bottom, 0); }
  .frame { position: static; margin: 0; flex: none; }
  .t { position: static; width: min(92vw, calc(310 * var(--u))); flex: none; }
  .status { margin-top: calc(9 * var(--u)); }
  .t-title { margin-top: calc(8 * var(--u)); }
  .t-line { margin-top: calc(7 * var(--u)); }
  .t-by { margin-top: calc(9 * var(--u)); }
  .br { display: none; }
  .maple { --top: calc(72 * var(--u) + 48.14vw); --bottom: calc(50 * var(--u)); }
  .eve { --top: calc(70 * var(--u)); }
  .al { --top: calc(78 * var(--u)); }
  .al .stage { bottom: auto; justify-content: flex-start; }
  .al .t-sub { margin-top: calc(5 * var(--u)); }
  .al .t-line { margin-top: calc(8 * var(--u)); }
}

/* ---------- moving between pages ----------
   The logo, Back and Forward: a quick fade. Choosing a product: site.js draws that product's cover over the screen. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; }
.cover { position: fixed; left: 0; top: 0; width: 100vw; height: calc(100 * var(--vh)); z-index: 70; pointer-events: none; display: block; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .products-list, .products.open .products-list, .products:has(:focus-visible) .products-list {
    transform: translate(var(--shift, 0), 0); transition: visibility 0s linear .2s;
  }
  .products:hover .products-list { transform: translate(var(--shift, 0), 0); transition: none; }
}