/* L'Atelier des Poussins — single stylesheet (one-page static site) */

:root {
  --vert-lagon:    #3A818D; /* brand color: flat areas, thin rules */
  --lagon-profond: #2A5F68; /* buttons, links, focus (AA on light) */
  --menthe:        #A6E3C1; /* the glaze — surfaces only, never text */
  --rose-poussin:  #F5C6C6; /* soft accent, occasional, surfaces only */
  --pate-doree:    #E3B77F; /* the dough — warmth, accents */
  --creme:         #F9F2E7; /* main background */
  --blanc-chaud:   #FFFCF6; /* cards, raised surfaces */
  --cacao:         #3B2A24; /* all text, never #000 */
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--creme);
  color: var(--cacao);
  font-family: 'Karla', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lagon-profond); }
a:hover { color: var(--vert-lagon); }

:focus-visible {
  outline: 3px solid var(--lagon-profond);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------- Layout: one full-screen page, footer pinned to the bottom ------- */

.page {
  min-height: 100vh;      /* fallback for browsers without dvh */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 5vmin, 52px) 24px;
}

/* ------- Logo ------- */

.logo {
  width: clamp(184px, 30vmin, 300px);
  line-height: 0;
  margin-bottom: clamp(20px, 3.4vmin, 36px);
  filter: drop-shadow(0 6px 16px rgba(59, 42, 36, .14));
}

.logo img { width: 100%; height: auto; display: block; }

/* ------- Hero text — grouped rhythm: eyebrow hugs the title, then it opens up ------- */

.eyebrow {
  margin: 0 0 clamp(9px, 1.3vmin, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lagon-profond);
  font-size: clamp(.72rem, 1.5vmin, .86rem);
}

.title {
  margin: 0 0 clamp(13px, 2vmin, 20px);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  line-height: 1.02;
  font-size: clamp(2.4rem, 7.4vmin, 4.8rem);
  color: var(--cacao);
  text-wrap: balance;
}

.lede {
  margin: 0 0 clamp(22px, 3.2vmin, 34px);
  max-width: 34ch;
  font-size: clamp(1.05rem, 2.4vmin, 1.4rem);
  line-height: 1.45;
  color: var(--cacao);
  text-wrap: balance;
}

.kitchen-note {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  max-width: min(42rem, 92vw);
  text-align: left;
  background: var(--blanc-chaud);
  border: 1px solid var(--menthe);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: clamp(.9rem, 1.8vmin, 1rem);
  line-height: 1.35;
  color: var(--cacao);
}

.kitchen-note__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--menthe);
}

/* ------- Glaze-drip section divider ------- */

.glaze-divider {
  line-height: 0;
  transform-origin: top;
}

.glaze-divider svg {
  display: block;
  height: clamp(46px, 7vmin, 72px);
}

.glaze-divider path { fill: var(--lagon-profond); }

/* ------- Footer ------- */

.site-footer {
  background: var(--lagon-profond);
  color: #fff;
  padding: clamp(16px, 2.6vmin, 24px) 22px clamp(18px, 2.8vmin, 26px);
  /* Overlap the glaze by 1px so no seam of page background shows through. */
  margin-top: -1px;
  position: relative;
}

.site-footer__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 4vmin, 40px);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.site-footer :focus-visible { outline-color: #fff; }

.site-footer__link {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Hover cue via a mint underline (a rule, not colored text). */
.site-footer__link:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--menthe);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.site-footer__ig {
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, 2vmin, 1.15rem);
}

.site-footer__mail {
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: clamp(.95rem, 1.9vmin, 1.08rem);
}

/* ------- Short landscape viewports: keep it to one screen ------- */

@media (max-height: 480px) {
  .logo { width: clamp(120px, 20vmin, 168px); margin-bottom: 12px; }
  .hero { padding: 16px 22px; }
  .eyebrow { margin-bottom: 6px; }
  .title { margin-bottom: 8px; }
  .lede { margin-bottom: 13px; }
}

/* ------- Entrance animations (only with JS, disabled on reduce) ------- */

@keyframes apRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes apPop  { 0% { opacity: 0; transform: scale(.84); } 62% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes apDrip { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }

.js .logo         { animation: apPop .8s cubic-bezier(.2, .8, .3, 1) both; }
.js .eyebrow      { animation: apRise .6s ease .10s both; }
.js .title        { animation: apRise .6s ease .20s both; }
.js .lede         { animation: apRise .6s ease .32s both; }
.js .kitchen-note { animation: apRise .6s ease .44s both; }
.js .glaze-divider{ animation: apDrip .8s ease .50s both; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}