/* Original supplied artwork. Only the main Hacaarq wordmark is in this viewport. */
.wordmark-crop {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1480 / 350;
  overflow: hidden;
  pointer-events: none;
}
.wordmark-crop img {
  position: absolute;
  width: 103.7837837838%;
  max-width: none;
  height: auto;
  left: -1.6216216216%;
  top: -51.4285714286%;
  filter: invert(1) brightness(5) invert(1);
}
.brand {
  display: block;
  width: 194px;
  flex-shrink: 0;
  padding: 8px 0;
  line-height: 1;
  mix-blend-mode: screen;
}
.brand img { filter: invert(1) brightness(15); }
.project-dialog-bar > .brand {
  display: block;
  width: 170px;
  mix-blend-mode: multiply;
}
.project-dialog-bar > .brand img { filter: invert(1) brightness(15) invert(1); }
.section-signature {
  display: block;
  flex: 0 0 154px;
  width: 154px;
  mix-blend-mode: screen;
}
.section-signature img { filter: invert(1) brightness(15); }
.signature-division {
  display: block;
  padding-top: 6px;
  text-align: right;
  font-size: .875rem;
  letter-spacing: .12em;
  color: var(--white);
}
.hero-wordmark,
.footer-wordmark {
  font-size: inherit;
  letter-spacing: normal;
  line-height: normal;
  mix-blend-mode: screen;
}
.hero-wordmark { left: var(--pad); right: var(--pad); }
.hero-wordmark .wordmark-crop { width: min(100%, 118svh); }
.footer-wordmark { margin-left: 0; }
.hero-wordmark img,
.footer-wordmark img { filter: invert(1) brightness(5); }

/* Compass first, complete signature next, then an opening onto the real project. */
.brand-intro {
  --compass-scale: 1.25;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  color: #faf9f6;
  perspective: 1200px;
}
.intro-pending .brand-intro { display: grid; }
.intro-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.1%;
  background: #101110;
  z-index: -2;
}
.intro-panel-top { top: 0; }
.intro-panel-bottom { bottom: 0; }
.intro-grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 9vw 9vw;
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
.intro-logo-stage {
  position: relative;
  width: min(82vw, 1120px);
  aspect-ratio: 1480 / 350;
  mix-blend-mode: screen;
}
.intro-logo-stage img { filter: invert(1) brightness(7); }
.intro-signature { position: relative; opacity: 0; }
.intro-compass {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: 20.5% 50%;
  /* Clip the photographed compass itself; the neighbouring H and C are excluded. */
  clip-path: polygon(18.92% 0, 22.23% 0, 22.23% 14.29%, 23.78% 19.14%, 23.78% 32.57%, 27.64% 72.86%, 28.72% 77.43%, 29.12% 100%, 11.96% 100%, 13.04% 72.86%, 17.7% 32%, 17.43% 19.14%, 18.92% 14.29%);
}
.intro-glint {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
}
.intro-glint img { filter: invert(1) brightness(18) sepia(.7) saturate(.7); }
.intro-rule {
  position: absolute;
  left: calc(50% - 50px);
  bottom: 21%;
  height: 1px;
  width: 100px;
  background: #c4a27c;
  transform: scaleX(0);
  transform-origin: center;
}
.intro-skip {
  position: absolute;
  right: var(--pad);
  bottom: max(28px, env(safe-area-inset-bottom));
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 8px 0 8px 14px;
  background: transparent;
  font-size: .875rem;
}
.intro-skip > span { font-size: 21px; }
.intro-skip:hover { color: #d7b893; }
.intro-playing .intro-compass { animation: compass-arrival 3.4s cubic-bezier(.22, .61, .36, 1) both; }
.intro-playing .intro-signature { animation: wordmark-arrival 3.4s cubic-bezier(.22, .61, .36, 1) both; }
.intro-playing .intro-glint { animation: wordmark-light 1.1s 1.65s ease both; }
.intro-playing .intro-rule { animation: intro-rule 3.4s ease both; }
.intro-playing .intro-grid-lines { animation: intro-grid 3.4s ease both; }
.intro-playing .intro-panel-top { animation: intro-open-top .85s 2.55s cubic-bezier(.76, 0, .24, 1) both; }
.intro-playing .intro-panel-bottom { animation: intro-open-bottom .85s 2.55s cubic-bezier(.76, 0, .24, 1) both; }
.intro-playing .intro-skip { animation: intro-control .3s 2.45s ease both; }
@keyframes compass-arrival {
  0% { opacity: 0; transform: translateX(29.5%) scale(var(--compass-scale)) rotateY(-14deg); }
  14%, 23% { opacity: 1; transform: translateX(29.5%) scale(var(--compass-scale)) rotateY(0); }
  43% { opacity: 1; transform: translateX(0) scale(1) rotateY(0); }
  49%, 100% { opacity: 0; transform: translateX(0) scale(1) rotateY(0); }
}
@keyframes wordmark-arrival {
  0%, 28% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px); }
  48% { opacity: 1; }
  62%, 75% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
  93%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateY(-16px) scale(1.04); }
}
@keyframes wordmark-light {
  0% { opacity: 0; clip-path: polygon(-25% 0, -15% 0, 0 100%, -10% 100%); }
  20%, 65% { opacity: 1; }
  100% { opacity: 0; clip-path: polygon(110% 0, 120% 0, 135% 100%, 125% 100%); }
}
@keyframes intro-rule {
  0%, 15% { transform: scaleX(0); opacity: 0; }
  50%, 71% { transform: scaleX(1); opacity: .85; }
  83%, 100% { transform: scaleX(.5); opacity: 0; }
}
@keyframes intro-grid {
  0% { opacity: 0; transform: scale(1.08); }
  25%, 70% { opacity: 1; transform: scale(1); }
  87%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes intro-open-top { to { transform: translateY(-101%); } }
@keyframes intro-open-bottom { to { transform: translateY(101%); } }
@keyframes intro-control { to { opacity: 0; visibility: hidden; } }

/* The configurator is announced honestly while the owner builds it in Claude. */
.closet-designer {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  gap: 8vw;
  background: var(--paper);
  color: var(--ink);
}
.designer-copy > .eyebrow { color: #78634c; margin-bottom: 30px; }
.designer-copy h2 { font-size: clamp(40px, 4.7vw, 82px); line-height: 1.13; letter-spacing: -.055em; }
.designer-copy h2 em { color: #716652; }
.designer-description { max-width: 610px; margin-top: 30px; font-size: 1rem; line-height: 1.95; color: #55594e; }
.designer-copy .line-link { margin-top: 28px; }
.designer-photo { position: relative; }
.designer-photo img { width: 100%; height: 560px; max-height: 64svh; object-fit: cover; }
.designer-photo figcaption { padding-top: 17px; color: #706956; font-size: .75rem; letter-spacing: .08em; line-height: 1.8; }
@media (max-width: 860px) {
  .brand-intro { --compass-scale: 2.1; }
  .brand { width: 165px; }
  .project-dialog-bar { gap: 16px; }
  .project-dialog-bar > .brand { width: 151px; }
  .section-signature { flex-basis: 126px; width: 126px; }
  .intro-logo-stage { width: 88vw; }
  .intro-rule { bottom: 31%; }
  .hero-project { bottom: calc(21.3vw + 135px); }
  .closet-designer { grid-template-columns: 1fr; gap: 40px; }
  .designer-copy > .eyebrow { margin-bottom: 23px; }
  .designer-copy h2 { font-size: clamp(38px, 7.4vw, 62px); }
  .designer-description { max-width: none; margin-top: 25px; }
  .designer-photo { width: min(100%, 480px); justify-self: end; }
  .designer-photo img { height: 480px; max-height: none; object-position: center 47%; }
}
@media (max-width: 420px) {
  .section-signature { flex-basis: 103px; width: 103px; }
  .designer-copy h2 { font-size: 37px; }
}
@media (max-height: 730px) and (min-width: 861px) {
  .hero-wordmark .wordmark-crop { width: min(100%, 105svh); }
  .intro-rule { bottom: 17%; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-pending .brand-intro { display: none; }
}