@font-face {
  font-family: "Mooser Editorial";
  src: url("assets/editorial-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Mooser Editorial";
  src: url("assets/editorial-italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Mooser Sans";
  src: url("assets/sans-regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0b0c0a;
  --paper: #e9e6dc;
  --secondary: #adafa3;
  --accent: #b4ba89;
  --page-gutter: clamp(1.5rem, 6.25vw, 7.5rem);
  font-family: "Mooser Sans", Arial, sans-serif;
  font-synthesis: none;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
  color: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
::selection { background: var(--accent); color: var(--ink); }

.composition {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(1.75rem, 4.7vh, 3.75rem);
  min-block-size: 100vh;
  min-block-size: 100svh;
  min-block-size: 100dvh;
  padding-block-start: max(clamp(1.75rem, 4.9vh, 3.75rem), env(safe-area-inset-top));
  padding-block-end: max(clamp(1.5rem, 4.9vh, 3.75rem), env(safe-area-inset-bottom));
  padding-inline: var(--page-gutter);
}

.editorial {
  align-self: center;
  padding-block: 1rem 0.75rem;
  inline-size: fit-content;
  max-inline-size: 100%;
}

h1 {
  position: relative;
  margin: 0 0 0 -0.045em;
  font-family: "Mooser Editorial", Georgia, serif;
  font-weight: 400;
  font-size: clamp(5rem, 10.5vw, 12.5rem);
  line-height: 0.91;
  letter-spacing: -0.054em;
  overflow-wrap: anywhere;
}

.headline-line { display: block; }
h1 em { font-weight: 400; letter-spacing: -0.06em; }
.full-stop { color: var(--accent); }

.introduction {
  position: relative;
  margin-block-start: clamp(2rem, 4.8vh, 3.25rem);
  padding-inline-start: 0.125rem;
}

p { margin: 0; }
.lead {
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.support {
  margin-block-start: 0.5rem;
  color: var(--secondary);
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0.015em;
}

.page-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 1rem;
}
.company-info {
  flex: 1 1 10rem;
  color: #989b90;
  font-size: 0.6875rem;
  line-height: 1.65;
  letter-spacing: 0.015em;
  overflow-wrap: anywhere;
}
.contact {
  flex: 0 0 auto;
  margin-inline-start: auto;
}
.company-info a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
.company-info a:hover {
  color: var(--paper);
  text-decoration: underline;
}
.company-info a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.whatsapp {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: relative;
  min-block-size: 44px;
  padding-block: 0.6rem;
  padding-inline: 0.125rem;
  color: var(--paper);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 240ms ease;
}
.whatsapp::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--accent);
  opacity: 0.5;
  transform-origin: left;
  transition: opacity 240ms ease;
}
.whatsapp__icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; }
.whatsapp:hover { color: var(--accent); }
.whatsapp:hover::after { opacity: 1; }
.whatsapp:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 8px;
  border-radius: 1px;
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: radial-gradient(ellipse at 78% 43%, #181a14 0%, var(--ink) 62%);
}
.sculpture {
  position: absolute;
  inset-block-start: -14%;
  inset-inline-end: -8%;
  inline-size: min(78vw, 1120px);
  block-size: 134%;
}
.sculpture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sculpture__shadow { opacity: 0.16; }
.sculpture__reveal {
  opacity: 0.8;
  -webkit-mask-image: radial-gradient(ellipse 38% 32% at 50% 46%, #000 8%, transparent 77%);
  mask-image: radial-gradient(ellipse 38% 32% at 50% 46%, #000 8%, transparent 77%);
  -webkit-mask-size: 145% 145%;
  mask-size: 145% 145%;
  -webkit-mask-position: 58% 35%;
  mask-position: 58% 35%;
  animation: reveal 28s ease-in-out infinite alternate;
}
.light-beam {
  position: absolute;
  inset-block-start: -47%;
  inset-inline-end: -13%;
  inline-size: 74%;
  block-size: 135%;
  transform: rotate(32deg);
  background: radial-gradient(ellipse 24% 48% at 50% 50%, #c6cba50a 0%, #c6cba503 48%, transparent 72%);
  filter: blur(16px);
  animation: light-breathe 28s ease-in-out infinite alternate;
}
.atmosphere__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, #0b0c0af7 17%, #0b0c0ac4 34%, #0b0c0a40 55%, transparent 73%),
    linear-gradient(0deg, #0b0c0ae8 0%, transparent 26%, transparent 82%, #0b0c0a60 100%);
}
.grain {
  position: absolute;
  inset: 0;
  background: url("assets/grain.svg") repeat;
  opacity: 0.026;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@keyframes reveal {
  from { -webkit-mask-position: 58% 35%; mask-position: 58% 35%; opacity: 0.72; }
  to { -webkit-mask-position: 30% 56%; mask-position: 30% 56%; opacity: 0.92; }
}
@keyframes light-breathe {
  from { opacity: 0.65; transform: rotate(32deg); }
  to { opacity: 1; transform: rotate(28deg); }
}

@media (min-width: 1800px) {
  .sculpture { inset-inline-end: 0; inline-size: 72vw; }
}

@media (max-width: 640px) {
  :root { --page-gutter: clamp(1.5rem, 6.2vw, 2.5rem); }
  .composition {
    gap: clamp(1.5rem, 4dvh, 2rem);
    padding-block-start: max(2rem, env(safe-area-inset-top));
    padding-block-end: max(1.75rem, env(safe-area-inset-bottom));
  }
  .editorial { padding-block: 1rem; }
  h1 { font-size: clamp(3rem, 20.3vw, 7rem); line-height: 0.94; letter-spacing: -0.06em; }
  .headline-the { display: block; }
  h1 em { letter-spacing: -0.055em; }
  .introduction { margin-block-start: clamp(1.75rem, 4.5dvh, 2.5rem); }
  .lead { font-size: 1.0625rem; }
  .support { margin-block-start: 0.4rem; font-size: 0.875rem; letter-spacing: 0; }
  .sculpture { inset-inline-end: -59%; inset-block-start: -16%; inline-size: 155%; block-size: 112%; }
  .sculpture__shadow { opacity: 0.22; }
  .sculpture__reveal { opacity: 0.65; }
  .light-beam { inline-size: 130%; inset-inline-end: -61%; }
  .atmosphere__shade {
    background:
      linear-gradient(90deg, #0b0c0ae8 0%, #0b0c0ac9 35%, #0b0c0a6e 65%, #0b0c0a1f 100%),
      linear-gradient(0deg, #0b0c0af5 0%, #0b0c0a9c 28%, transparent 72%);
  }
  .whatsapp { font-size: 0.9375rem; }
}

/* Short landscape viewports keep every element in normal flow. */
@media (max-height: 570px) and (min-width: 641px) {
  .composition { gap: 1rem; padding-block: 1.5rem; }
  h1 { font-size: clamp(3.75rem, 15vh, 7rem); }
  .editorial { padding-block: 0.5rem; }
  .introduction { margin-block-start: 1.25rem; }
}

/* Small screens and enlarged text may grow the composition and scroll safely. */
@media (max-width: 360px) {
  .support { max-inline-size: 22em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sculpture__reveal {
    -webkit-mask-position: 44% 45%;
    mask-position: 44% 45%;
    opacity: 0.82;
  }
  .light-beam { opacity: 0.8; }
}

@media (forced-colors: active) {
  .atmosphere { display: none; }
  .whatsapp { border-block-end: 1px solid LinkText; }
  .full-stop { color: CanvasText; }
}