:root {
  --ink: #f6f2ed;
  --gold: #d0b08a;
  --black: #090909;
}

@font-face {
  font-family: "Gucci Sans Pro";
  src: url("/fonts/GucciSansPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gucci Sans Pro";
  src: url("/fonts/GucciSansPro-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gucci Sans Pro";
  src: url("/fonts/GucciSansPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gucci Sans Pro";
  src: url("/fonts/GucciSansPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--black); }
body { min-height: 100%; margin: 0; overflow: hidden; color: var(--ink); background: var(--black); font-family: "Gucci Sans Pro", "Helvetica Neue", sans-serif; font-weight: 400; }
a { color: inherit; }
main { height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; }

.site-header {
  position: relative;
  flex: 0 0 clamp(6.7rem, 13vh, 8.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.5rem;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% -35%, #4a4a49 0, #151515 45%, #090909 75%);
}

.brand-logo {
  width: clamp(5.15rem, 7.2vw, 6.75rem);
  height: clamp(6.25rem, 8.75vw, 8.2rem);
  display: block;
  background: url("/assets/divak-logo-original.png") -15px -14px / 118px 118px no-repeat;
  filter: drop-shadow(0 0 5px rgba(208, 176, 138, .14));
  transition: filter 260ms ease, transform 260ms ease;
}
.brand-logo:hover, .brand-logo:focus-visible {
  filter: drop-shadow(0 0 8px rgba(208, 176, 138, .28));
  transform: scale(1.02);
}
.header-contact, .header-email { display: none; }
.page-layout { min-height: 0; flex: 1 1 auto; display: grid; grid-template-rows: minmax(0, 18fr) minmax(0, 2fr); }
.social-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: .65rem;
  border-top: 1px solid rgba(208, 176, 138, .22);
  background: #0b0a09;
}
.social-links {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.5vw, 1.15rem);
}
.social-links a {
  display: grid;
  width: clamp(2rem, 2.6vw, 2.5rem);
  height: clamp(2rem, 2.6vw, 2.5rem);
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #d6aa69;
  opacity: 1;
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease, filter 220ms ease;
}
.social-links a:hover, .social-links a:focus-visible { color: #fff1d4; filter: drop-shadow(0 0 3px rgba(208, 176, 138, .55)); transform: scale(1.04); }
.social-links a[aria-disabled="true"] { cursor: default; }
.social-links svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
.social-links .fill, .social-links .solid { fill: currentColor; stroke: none; }
.social-links a[data-social="facebook"] svg { transform: translateX(-.6px); }
.social-links a[data-social="x"] svg { transform: translateX(-.9px); }
.social-links a[data-social="tiktok"] svg { transform: translate(1px, -1px); }

.choice-grid { min-height: 0; display: grid; grid-template-rows: minmax(0, 10fr) minmax(0, 5fr) minmax(0, 4fr); }
.panel {
  --image: none;
  position: relative;
  isolation: isolate;
  min-height: 0;
  display: flex;
  overflow: hidden;
  background: #171514 var(--image) center / cover no-repeat;
  text-decoration: none;
}
.panel::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: inherit;
  transition: transform 850ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}
.panel__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.84) 92%);
  transition: background 450ms ease;
}
.main-brand { --image: url("/assets/divak-glamour.png"); background-position: 68% center; }
.collection { --image: url("/assets/divak-kollekcio.png"); background-position: 28% center; }
.studio { --image: url("/assets/divak-studio.png"); background-position: center; }

.panel__content { align-self: end; width: 100%; padding: clamp(1.1rem, 3vh, 2.25rem) clamp(1.4rem, 5vw, 4rem); transform: translateY(.2rem); transition: transform 450ms ease; }
.eyebrow { margin: 0 0 .8rem; color: var(--gold); font-size: .67rem; font-weight: 400; letter-spacing: .25em; text-transform: uppercase; }
h1, h2 { margin: 0; color: #fff; font-size: clamp(2rem, 3.4vw, 3.75rem); font-weight: 500; letter-spacing: .08em; line-height: 1.08; }
.domain { margin: .75rem 0 0; font-size: clamp(.74rem, 1.2vw, 1rem); font-weight: 400; letter-spacing: .12em; line-height: 1.1; text-transform: uppercase; }
.domain span { font-family: "Gucci Sans Pro", "Helvetica Neue", sans-serif; font-size: .8em; opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.panel:hover::before, .panel:focus-visible::before { transform: scale(1.055); filter: brightness(1.12); }
.panel:hover .panel__shade, .panel:focus-visible .panel__shade { background: linear-gradient(180deg, rgba(0,0,0,.02) 20%, rgba(0,0,0,.76) 90%); }
.panel:hover .panel__content, .panel:focus-visible .panel__content { transform: translateY(-.35rem); }
.panel:hover .domain span, .panel:focus-visible .domain span { opacity: 1; transform: translate(.25rem, -.15rem); }
.panel:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }

@media (max-width: 600px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    justify-items: center;
    flex-basis: clamp(5.55rem, 9.75vh, 6.375rem);
    padding-block: .4875rem;
    padding-inline: 1.15rem;
  }
  .brand-logo { width: 3.5rem; height: 4.27rem; background-position: -9px -9px; background-size: 73px 73px; }
  .header-contact {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .52rem;
    min-height: 2.5rem;
    color: #e3c08e;
    font-size: .62rem;
    font-weight: 400;
    letter-spacing: .19em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 220ms ease, filter 220ms ease;
  }
  .header-contact svg { width: 1.45rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
  .header-contact:hover, .header-contact:focus-visible { color: #fff1d9; filter: drop-shadow(0 0 3px rgba(208, 176, 138, .65)); }
  .header-contact:focus-visible { outline: 1px solid var(--gold); outline-offset: .22rem; }
  .header-email {
    display: block;
    justify-self: end;
    color: #e3c08e;
    font-size: .52rem;
    font-weight: 400;
    letter-spacing: .16em;
    line-height: 1;
    white-space: nowrap;
  }
  .social-links { gap: .9rem; }
  .social-links a { width: 2rem; height: 2rem; }
  .main-brand { background-position: 100% 22%; }
  .collection { background-position: 0 center; }
  .studio { background-position: 55% center; }
  .panel__content { padding: .85rem 1.25rem; }
  .eyebrow { margin-bottom: .36rem; font-size: .48rem; letter-spacing: .22em; }
  .main-brand h1 { font-size: clamp(2rem, 10vw, 3.25rem); }
  .collection h2, .studio h2 { font-size: clamp(.95rem, 4.7vw, 1.35rem); }
  .collection h2 br { display: none; }
  .domain { margin-top: .28rem; font-size: .78rem; letter-spacing: .08em; }
}
@media (max-width: 380px) {
  .site-header { padding-inline: .85rem; }
  .header-contact { gap: .36rem; font-size: .54rem; letter-spacing: .15em; }
  .header-contact svg { width: 1.2rem; height: 1rem; }
  .header-email { font-size: .44rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}