/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · route: custom (bespoke) · structure: photographic fold → statement → editorial sequence → pricing line → contact
 * idea: "image carries the page; type stays almost silent"
 * paper: oklch(14.5% 0.012 173) · accent: oklch(48% 0.055 173) · display: Cormorant Garamond · body: Switzer
 * axes: dark-restrained / classical-serif / brand-moss · gates: all-pass · studied: no
 */

@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("fonts/cormorant-garamond-latin-ext-400-normal.woff2") format("woff2"),
    url("fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2"),
    url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src:
    url("fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2"),
    url("fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-paper: oklch(14.5% 0.012 173);
  --color-paper-2: oklch(18% 0.014 173);
  --color-ink: oklch(92% 0.012 85);
  --color-ink-2: oklch(72% 0.014 85);
  --color-muted: oklch(68% 0.016 173);
  --color-rule: oklch(28% 0.018 173);
  --color-accent: oklch(48% 0.055 173);
  --color-accent-ink: oklch(96% 0.01 85);
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Switzer", ui-sans-serif, sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;
  --measure: 36rem;
  --pad-x: clamp(1.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--color-accent-ink);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-paper-2);
  color: var(--color-ink);
  padding: 0.75rem 1rem;
  z-index: 100;
}

.skip:focus {
  left: var(--pad-x);
  top: var(--space-sm);
}

/* —— Nav over hero photo —— */
.site-nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: clamp(1.25rem, 3vh, 2rem) var(--pad-x);
  color: oklch(96% 0.01 85);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand:hover {
  opacity: 0.9;
}

.brand__logo {
  display: block;
  height: clamp(1.65rem, 2.4vw, 2.15rem);
  width: auto;
  filter: drop-shadow(0 1px 10px oklch(10% 0.01 173 / 0.35));
}

.nav-end {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
}

.langs {
  display: flex;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.langs a {
  text-decoration: none;
  color: oklch(96% 0.01 85 / 0.62);
  text-shadow: 0 1px 8px oklch(10% 0.01 173 / 0.4);
}

.langs a[aria-current="page"],
.langs a:hover {
  color: oklch(98% 0.01 85);
}

.nav-contact {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  color: oklch(98% 0.01 85);
  text-shadow: 0 1px 8px oklch(10% 0.01 173 / 0.4);
}

.nav-contact:hover {
  color: oklch(98% 0.01 85);
  opacity: 0.85;
}

/* —— Hero: one photographic composition —— */
.hero {
  position: relative;
  min-height: 100dvh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: oklch(97% 0.01 85);
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media picture,
.hero__media img,
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 45%;
}

.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      oklch(10% 0.02 173 / 0.42) 0%,
      transparent 32%,
      transparent 42%,
      oklch(8% 0.016 173 / 0.62) 68%,
      oklch(6% 0.014 173 / 0.92) 100%
    ),
    linear-gradient(105deg, oklch(8% 0.016 173 / 0.55) 0%, oklch(8% 0.016 173 / 0.2) 38%, transparent 58%);
}

.hero__copy {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-x) clamp(2.75rem, 9vh, 5.5rem);
  max-width: min(36rem, 90vw);
  display: grid;
  gap: 0.85rem;
  justify-items: start;
  animation: rise 1s var(--ease) both;
}

.hero__line {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(2.15rem, 4.6vw, 3.65rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: #f6f1e8;
  text-shadow: 0 2px 28px oklch(6% 0.02 173 / 0.55);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hero__sub {
  margin: 0;
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.35vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.5;
  color: #ebe4d8;
  text-shadow: 0 1px 16px oklch(6% 0.02 173 / 0.5);
}

.hero__cta {
  margin-top: 0.55rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.35rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #14201b;
  background: #f3eee4;
  border: 0;
  box-shadow: 0 8px 28px oklch(6% 0.02 173 / 0.35);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.hero__cta:hover {
  background: oklch(98% 0.01 85);
  color: oklch(12% 0.02 173);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.85rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

@media (max-width: 720px) {
  .hero__media img,
  .hero__img {
    object-position: center 38%;
  }

  .hero__copy {
    max-width: min(34rem, 94vw);
  }

  .hero__line {
    font-size: clamp(1.85rem, 8.2vw, 2.5rem);
  }
}

/* —— Sections —— */
.section {
  padding: var(--space-2xl) var(--pad-x);
}

.section--tight {
  padding-block: var(--space-xl);
}

.statement {
  max-width: min(28rem, 92vw);
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

.pricing-line {
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: min(26rem, 92vw);
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: none;
}

/* —— Editorial gallery —— */
.gallery {
  padding: 0 var(--pad-x) var(--space-2xl);
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.gallery__item {
  margin: 0;
  min-width: 0;
}

.gallery__item picture,
.gallery__item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 42%;
  aspect-ratio: 3 / 2;
  background: var(--color-paper-2);
}

.gallery__item:nth-child(1) {
  grid-column: 1 / span 7;
}

.gallery__item:nth-child(2) {
  grid-column: 8 / span 5;
  margin-top: 12%;
}

.gallery__item:nth-child(3) {
  grid-column: 1 / span 5;
}

.gallery__item:nth-child(4) {
  grid-column: 7 / span 5;
}

.gallery__item:nth-child(4) img {
  aspect-ratio: 4 / 5;
  object-position: center 35%;
}

.gallery__item:nth-child(5) {
  grid-column: 1 / -1;
}

.gallery__item:nth-child(5) img,
.gallery__item:nth-child(5) picture img {
  aspect-ratio: 21 / 9;
  max-height: 62vh;
  width: 100%;
  object-fit: cover;
  object-position: center 40%;
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery__item,
  .gallery__item:nth-child(n) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .gallery__item:nth-child(4) img {
    aspect-ratio: 3 / 4;
  }

  .gallery__item:nth-child(5) img,
  .gallery__item:nth-child(5) picture img {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

/* —— Contact —— */
.contact {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-2xl) var(--pad-x);
}

.contact__hint {
  margin: 0 0 var(--space-md);
  color: var(--color-ink-2);
  max-width: 28ch;
}

.contact__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
  overflow-wrap: break-word;
  hyphens: none;
  min-width: 0;
}

.contact__mail:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

/* —— Footer —— */
.site-footer {
  padding: var(--space-lg) var(--pad-x) var(--space-xl);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-ink-2);
}