/* Elternrat Herbesthal — one screen, no scroll. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #edeee9;
  --paper-light: #f7f8f4;
  --paper-fold: #e4e6e0;
  --card: #f8f9f5;
  --ink: #16181a;
  --ink-crease: #4a524f;
  --ink-soft: #5c6360;
  --rule: rgba(22, 24, 26, 0.16);
  --marigold: #e9a521;
  --pine: #0e4f45;

  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", "Helvetica Neue", sans-serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 74rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* The whole page is one screenful: header, content that flexes, footer. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p {
  margin: 0;
}

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

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

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(0.85rem, 2.2vh, 1.5rem) var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand__logo {
  width: auto;
  height: clamp(2.1rem, 5vh, 3rem);
  flex: none;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.langs {
  display: flex;
  flex: none;
  gap: 1px;
  background: var(--rule);
  padding: 1px;
}

.lang {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0.4rem 0.7rem;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.lang:hover {
  color: var(--ink);
}

.lang--on {
  background: var(--ink);
  color: var(--paper-light);
  cursor: default;
}

/* -------------------------------------------------------------------- main */

main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 5vh, 4rem);
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1rem, 3vh, 3rem) var(--gutter);
}

/* -------------------------------------------------------------------- hero */

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 2px;
  margin-right: 0.75rem;
  vertical-align: 0.22em;
  background: var(--marigold);
}

.hero__title {
  margin-top: clamp(0.4rem, 1.2vh, 0.8rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.55rem, min(5.6vw, 6vh), 3.3rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}

/* The signature: the date is creased like a folded sheet. */
.datemark {
  width: fit-content;
  max-width: 100%;
  margin-top: clamp(0.3rem, 1.2vh, 1rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(14vw, 16.5vh, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .datemark {
    background-image: linear-gradient(
      166deg,
      var(--ink) 0 51.6%,
      var(--paper) 51.6% 52.4%,
      var(--ink-crease) 52.4% 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__date {
  margin-top: clamp(0.5rem, 1.8vh, 1.2rem);
  font-size: clamp(0.95rem, 2vh, 1.15rem);
  font-weight: 500;
}

.hero__lede {
  margin-top: 0.3rem;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 1.9vh, 1rem);
}

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

/* ----------------------------------------------------------------- actions */

.actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1rem, 2.8vh, 2.25rem);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(22, 24, 26, 0.05), 0 14px 30px -24px rgba(22, 24, 26, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Dog-ear: the corner is turned back, showing the page beneath it. */
.cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(
    225deg,
    transparent 0 49.4%,
    var(--rule) 49.4% 50.6%,
    var(--paper-fold) 50.6% 100%
  );
  transition: width 0.25s ease, height 0.25s ease;
}

.cta[href]:hover,
.cta[href]:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(22, 24, 26, 0.05), 0 22px 38px -26px rgba(22, 24, 26, 0.6);
}

.cta[href]:hover::after,
.cta[href]:focus-visible::after {
  width: 40px;
  height: 40px;
}

.cta:not([href]) {
  cursor: default;
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, min(2.8vw, 3.2vh), 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.cta__desc {
  margin-top: clamp(0.35rem, 1vh, 0.6rem);
  margin-bottom: clamp(0.9rem, 2.4vh, 1.75rem);
  max-width: 28rem;
  color: var(--ink-soft);
  font-size: clamp(0.87rem, 1.85vh, 0.97rem);
}

/* margin-top: auto keeps both cards' calls to action on the same baseline */
.cta__go {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--marigold);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cta__go::after {
  content: "→";
  font-size: 1.05em;
  letter-spacing: 0;
  transition: transform 0.25s ease;
}

.cta[href]:hover .cta__go::after {
  transform: translateX(4px);
}

/* -------------------------------------------------------------------- shop */

/* L'accueil tient dans une fenêtre ; la boutique, elle, doit pouvoir défiler. */
.page--flow main {
  justify-content: flex-start;
  padding-block: clamp(1.5rem, 5vh, 3.25rem);
}

.shop__title {
  margin-top: clamp(0.4rem, 1.2vh, 0.8rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}

.shop__lede {
  margin-top: 0.5rem;
  max-width: 40rem;
  color: var(--ink-soft);
}

.shop__back {
  margin-top: 1.5rem;
}

/* Réserve la place du widget pour éviter que la page ne saute au chargement. */
.shop__store {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  min-height: 22rem;
}

.shop__back a {
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-underline-offset: 3px;
}

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

/* La brand devient cliquable sur les pages internes. */
a.brand {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------------------- colophon */

.colophon {
  flex: none;
  background: var(--pine);
  color: rgba(237, 238, 233, 0.78);
  font-size: 0.83rem;
}

.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(0.9rem, 2.2vh, 1.7rem) var(--gutter);
}

.colophon__org {
  color: var(--paper);
  font-weight: 500;
}

.colophon a {
  color: var(--marigold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.colophon a:hover {
  color: var(--paper-light);
}

.colophon :focus-visible {
  outline-color: var(--marigold);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 44rem) {
  .actions {
    grid-template-columns: 1fr;
  }

  .brand__name {
    font-size: 0.95rem;
    white-space: normal;
  }

  .cta__desc {
    max-width: none;
  }
}

@media (max-width: 20rem) {
  .brand__name {
    display: none;
  }
}

/* Short screens: tighten everything. The lede stays — it is the one sentence
   that tells someone arriving by QR code what the site is for, so the space
   comes back from the type and the spacing rather than from the message. */
@media (max-height: 800px) and (max-width: 44rem), (max-height: 560px) {
  main {
    gap: 1rem;
  }

  .hero__lede {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .cta {
    padding: 0.9rem 1rem;
  }

  .cta__desc {
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
    line-height: 1.35;
  }

  .cta__go {
    font-size: 0.7rem;
  }

  .colophon {
    font-size: 0.78rem;
  }
}

/* Very short screens: squeeze the frame and drop the card descriptions — the
   lede above and the card titles carry it on their own. The height-only branch
   catches landscape phones, wider than 44rem but just as short. */
@media (max-height: 660px) and (max-width: 44rem), (max-height: 500px) {
  .masthead {
    padding-block: 0.5rem;
  }

  .brand__logo {
    height: 1.9rem;
  }

  main {
    gap: 0.8rem;
    padding-block: 0.6rem;
  }

  .cta__desc {
    display: none;
  }

  .cta__title {
    margin-bottom: 0.9rem;
  }

  .colophon {
    font-size: 0.72rem;
  }

  .colophon__inner {
    padding-block: 0.6rem;
    gap: 0.15rem 1rem;
    line-height: 1.35;
  }
}

/* Last stop — the shortest handsets. The date gives up a little of its size so
   the lede keeps its lines. */
@media (max-height: 540px) and (max-width: 44rem) {
  .datemark {
    font-size: min(12vw, 14vh, 6rem);
  }

  .hero__date {
    margin-top: 0.35rem;
  }
}

/* ------------------------------------------------------------------ motion */

/* Declared only under no-preference so nothing can be left invisible. */
@media (prefers-reduced-motion: no-preference) {
  .eyebrow {
    animation: rise 0.6s ease-out 0.05s both;
  }

  .hero__title {
    animation: rise 0.6s ease-out 0.13s both;
  }

  .datemark {
    animation: rise 0.65s ease-out 0.21s both;
  }

  .hero__date {
    animation: rise 0.6s ease-out 0.29s both;
  }

  .hero__lede {
    animation: rise 0.6s ease-out 0.35s both;
  }

  .cta {
    animation: rise 0.6s ease-out 0.42s both;
  }

  .actions .cta:last-child {
    animation-delay: 0.5s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}