:root {
  color-scheme: dark;
  --bg: #050505;
  --ink: #e8e4da;
  --ink-muted: #8a8578;
  --ink-faint: #565349;
  --font-body: Georgia, "Times New Roman", serif;

  /* One design unit = 1% of the page width. Every size on the page is a
     multiple of this, so capping it (see the landscape query below) caps
     the whole page. */
  --page-unit: 1vw;
}

/* Horizontal (landscape) aspect ratio: the page would otherwise stretch
   edge to edge and grow unboundedly with the window. Cap the design width
   at 700px (1 unit = min(1vw, 7px)), centre it, and frame it with a
   border either side. */
@media (min-aspect-ratio: 1/1) {
  :root {
    --page-unit: min(1vw, 7px);
  }

  body {
    max-width: calc(100 * var(--page-unit));
    margin-inline: auto;
    border-inline: 1px solid var(--ink-faint);
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
}

.embers {
  /* ember particle tunables — consumed by js/embers.js */
  --embers-zone-depth: 0.55;        /* fraction of the zone element to cover */
  --embers-min-width: 0.1;          /* vw (≈2px at 1920w) */
  --embers-max-width: 0.55;         /* vw (≈10px at 1920w) */
  --embers-min-duration: 30;        /* s, full rise */
  --embers-max-duration: 60;        /* s */
  --embers-max-repeat-delay: 4;     /* s between respawns */
  --embers-glow-color: rgba(224, 91, 208, 0.6);
  --embers-glow-blur-min: 0.2;      /* vw */
  --embers-glow-blur-max: 0.5;      /* vw */
  --embers-glow-spread-min: 0.05;   /* vw */
  --embers-glow-spread-max: 0.1;    /* vw */
  --embers-colors: #ff00c8, #e05baf, #c22ba8, #d41426, #9b30d9, #5c1fb8, #ff9df0, #42387b;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.ember {
  position: absolute;
  will-change: top, left, opacity, transform;
}

.hero {
  position: relative;
  z-index: 1;
  position: relative;
  padding: 8vh calc(6 * var(--page-unit)) 0;
}

.status-link {
  position: absolute;
  top: 3vh;
  right: calc(4 * var(--page-unit));
  font-family: "Nunito", "Segoe UI Rounded", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(2 * var(--page-unit));
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  letter-spacing: 0.08em;
}

.status-link:hover {
  color: var(--ink);
}

.hero__title {
  font-size: calc(8 * var(--page-unit));
  font-weight: 400;
  letter-spacing: 0.18em;
}

.hero__title::after {
  content: "";
  display: block;
  width: calc(26 * var(--page-unit));
  height: 30px;
  margin-top: -1.4vh;
  margin-left: calc(1.4 * var(--page-unit));
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='46' viewBox='0 0 600 46'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23b3122e'/><stop offset='1' stop-color='%23b3122e' stop-opacity='0'/></linearGradient><filter id='p' x='-10%25' y='-150%25' width='120%25' height='400%25'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.5' numOctaves='4' seed='11' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='30' xChannelSelector='R' yChannelSelector='G' result='d'/></filter></defs><rect x='0' y='8' width='600' height='30' fill='url(%23g)' filter='url(%23p)'/><g fill='%23b3122e' filter='url(%23p)'><ellipse cx='18' cy='10' rx='14' ry='6'/><ellipse cx='42' cy='24' rx='9' ry='4'/><ellipse cx='8' cy='32' rx='6' ry='3'/><ellipse cx='30' cy='38' rx='5' ry='2.5'/><ellipse cx='55' cy='6' rx='4' ry='2'/><ellipse cx='2' cy='20' rx='4' ry='5'/><ellipse cx='66' cy='30' rx='3' ry='1.6'/></g></svg>");
}

.hero__sub {
  font-size: calc(2.8 * var(--page-unit));
  letter-spacing: 0.3em;
  color: var(--ink-muted);
  padding-bottom: 10vh;
}

.placeholder {
  display: none; /* TEMP: cerebus hidden */
  position: relative;
  z-index: 1;
  width: calc(70 * var(--page-unit));
  height: auto;
  margin: 2vh calc(-30 * var(--page-unit)) 10vh auto;
}

.work { 
  display: grid;
  place-items: center;
}

.work__row {
  display: flex;
  align-items: flex-end;
  gap: calc(2 * var(--page-unit));
  padding: 0 calc(1.9 * var(--page-unit));
}

.work__phone {
  position: relative;
  z-index: 20;
  width: calc(73 * var(--page-unit));
  pointer-events: none;
  margin-left: calc(-18 * var(--page-unit));
}

.work__copy {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: calc(2 * var(--page-unit));
  margin-left: calc(-18 * var(--page-unit));
}

.work__title {
  font-size: calc(4 * var(--page-unit));
  font-weight: 400;
  letter-spacing: 0.12em;
}

.work__sub {
  text-align: center;
  margin-top: calc(1 * var(--page-unit));
  font-size: calc(2 * var(--page-unit));
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  line-height: 1.6;
}

.work__web {
  font-size: calc(3 * var(--page-unit));
  display: block;
  width: fit-content;
  margin: calc(3 * var(--page-unit)) auto 0;
  color: var(--ink);
  letter-spacing: 0.15em;
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-faint);
  margin-left: calc(-7 * var(--page-unit));
}

.work__web:hover {
  border-bottom-color: var(--ink);
}

.work__stores {
  position: relative;
  z-index: 20;
  margin-top: calc(1.9 * var(--page-unit));
  display: flex;
  justify-content: center;
  gap: calc(3.1 * var(--page-unit));
  margin-left: calc(-30 * var(--page-unit));
}

.work__store {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--page-unit));
  height: calc(4.4 * var(--page-unit));
  padding: 0 calc(1.6 * var(--page-unit));
  border: 1px solid #a6a6a6;
  border-radius: calc(0.65 * var(--page-unit));
  background: #000;
  color: #fff;
}

.work__store:hover {
  border-color: #fff;
}

.work__store-logo {
  width: calc(2.4 * var(--page-unit));
  height: calc(2.4 * var(--page-unit));
  fill: currentColor;
}

.work__store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.work__store-small {
  font-size: calc(0.8 * var(--page-unit));
  letter-spacing: 0.05em;
}

.work__store-big {
  font-size: calc(1.7 * var(--page-unit));
  letter-spacing: 0.02em;
}

@media (max-width: 60vw) {
  .work__row {
    flex-direction: column;
    text-align: center;
  }

  .work__copy {
    text-align: center;
  }
}

.site-footer {
  position: relative;
  z-index: 2; /* footer text stays readable over the rose's upward overlap */
  height: 0;
  padding-top: 12vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: calc(2 * var(--page-unit));
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-left: 1px solid var(--ink-faint);
  border-right: 1px solid var(--ink-faint);
  padding: 0 calc(2 * var(--page-unit));
}

.site-footer__link,
.site-footer__header,
.site-footer__contact {
  color: var(--ink-muted);
  letter-spacing: 0.15em;
}

.site-footer__header {
  color: var(--ink-muted);
  font-size: calc(2.6 * var(--page-unit));
  margin-bottom: calc(1 * var(--page-unit));
}

.site-footer__link,
.site-footer__contact {
  font-family: "Nunito", "Segoe UI Rounded", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(2.4 * var(--page-unit));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.site-footer__link {
  letter-spacing: 0.02em;
}

.site-footer__link:hover,
.site-footer__contact:hover {
  color: var(--ink);
}

.site-footer__copyright {
  color: var(--ink-faint);
  letter-spacing: 0.3em;
}

.rose {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.rose__image {
  display: block;
  margin-top: -34%;
  width: calc(80 * var(--page-unit));
  height: auto;
  margin-inline: auto;
  mask-image: linear-gradient(to bottom, transparent, black 40%),
    linear-gradient(to right, transparent, black 45%),
    linear-gradient(to left, transparent, black 45%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%),
    linear-gradient(to right, transparent, black 45%),
    linear-gradient(to left, transparent, black 45%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}