/* L'alphabet des amulettes: calm ground, black type, colour only in painted signs. */

:root {
  --ground: #f4f3ef;
  --ink: #111111;
  --ink-soft: #55554f;
  --blue: #2747d9;
  --ochre: #f2b21b;
  --pink: #e0457b;
  --green: #2f9e5b;
  --accent: var(--blue);
  --focus: var(--blue);
  --select-bg: var(--ochre);
  --select-ink: var(--ink);
  --show-ink: var(--blue);
  --rule: 1px solid var(--ink);
  --gutter: clamp(1.25rem, 4.4vw, 4.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-show="huis-clos"] { --show-ink: var(--pink); }
[data-show="titou"] { --show-ink: var(--green); }
[data-show="ateliers"] { --show-ink: var(--ochre); }
[data-show="soutien"] { --show-ink: var(--blue); }

.wrap {
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rules stop at the gutter, like the header rule and the rules inside sections. */
.news,
.shows,
.workshops,
.support,
.site-footer {
  position: relative;
}

.news::before,
.shows::before,
.workshops::before,
.support::before,
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: var(--rule-w, 1px) solid var(--ink);
}

/* Header */

.site-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 2rem;
  padding-block: 0.5rem;
  position: relative;
}

.site-header::after {
  content: "";
  grid-column: 1 / -1;
  border-bottom: var(--rule);
}

.logo img {
  width: clamp(9.5rem, 15vw, 13rem);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem clamp(1rem, 2.2vw, 2.25rem);
}

.site-nav a,
.nav-toggle {
  font-family: "Archivo", sans-serif;
  font-stretch: 68%;
  font-weight: 800;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.75rem;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.45rem 0;
  height: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  justify-self: end;
  min-height: 3rem;
  padding: 0 1.1rem;
  border: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle[aria-expanded="true"] {
  background: var(--ink);
  color: var(--ground);
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(1.5rem, 4vw, 5rem);
  padding-block: clamp(1.75rem, 3.2vw, 3rem) clamp(3rem, 5vw, 5rem);
}

h1 {
  font-size: clamp(3.5rem, 8.6vw, 7.25rem);
  line-height: 0.9;
  max-width: 9.5em;
}

.lede {
  max-width: 34em;
  font-size: clamp(1.125rem, 1.35vw, 1.3125rem);
  line-height: 1.45;
}

.hero .lede {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
}

.hero-sign {
  position: relative;
  min-height: 22rem;
  max-height: 47rem;
  height: 100%;
}

.sign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease-out, clip-path 0.6s var(--ease-out);
}

.sign-compagnie {
  animation: paint-down 1.2s var(--ease-out) both;
}

.sign-huis-clos,
.sign-titou {
  padding: 8% 4%;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

@keyframes paint-down {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* The alphabet speaks: a date under attention paints its show's sign large. */
.hero:has(.date[data-show="huis-clos"]:is(:hover, :focus-within)) .sign-huis-clos,
.hero:has(.date[data-show="titou"]:is(:hover, :focus-within)) .sign-titou {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.hero:has(.date:is(:hover, :focus-within)) .sign-compagnie {
  opacity: 0;
}

/* Dates */

.dates {
  margin-top: clamp(2.25rem, 3.5vw, 3.25rem);
  max-width: 50rem;
}

h2 {
  font-size: clamp(2rem, 3.4vw, 2.875rem);
  line-height: 1;
}

.dates h2 {
  font-size: clamp(1.625rem, 2.3vw, 2rem);
  margin-bottom: 0.75rem;
}

.dates ol {
  border-top: var(--rule);
}

.date {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 8.75rem minmax(6rem, 1fr) auto auto;
  align-items: center;
  column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
  min-height: 4.25rem;
  border-bottom: var(--rule);
}

.date::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 4px;
  background: var(--show-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}

.date:hover::after,
.date:focus-within::after {
  transform: scaleX(1);
}

.date-sign {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  transition: transform 0.5s var(--ease-out);
}

.date:hover .date-sign,
.date:focus-within .date-sign {
  transform: rotate(-8deg) scale(1.18);
}

.date-when,
.date-show {
  font-size: 1.3125rem;
  line-height: 1.1;
}

.date-where {
  white-space: nowrap;
}

.date-book {
  font-weight: 600;
  padding-block: 0.75rem;
}

/* The whole row is the target, the link stays the accessible name. */
.date-book::before {
  content: "";
  position: absolute;
  inset: 0;
}

.dates .sample-note {
  margin-top: 0.6rem;
}

/* News */

.news {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  row-gap: 1rem;
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
}

.news article {
  padding-left: clamp(1.5rem, 3vw, 3.5rem);
  border-left: var(--rule);
}

.news h3,
.ruled h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.news h3 a {
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s ease-out;
}

.news h3 a:hover,
.news h3 a:focus-visible {
  text-decoration-color: var(--blue);
  text-decoration-thickness: 3px;
}

.news article p {
  margin-top: 0.5rem;
  max-width: 34em;
}

.news-meta,
.fineprint {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.news .sample-note {
  grid-column: 2 / -1;
}

/* Shows */

.shows {
  padding-block: clamp(3.5rem, 6vw, 6rem) 0;
}

.show {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  column-gap: clamp(2rem, 6vw, 7rem);
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-bottom: var(--rule);
}

.show:first-of-type {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: var(--rule);
}

.show-flip .show-photo {
  order: 2;
}

.show-flip {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* The photo leads; the show's painted sign sits by its title like an initial. */
.show-sign {
  width: clamp(5rem, 8vw, 7.5rem);
  margin: 0 0 1rem -0.5rem;
  transform-origin: 40% 60%;
  transition: transform 0.7s var(--ease-out);
}

.show:hover .show-sign {
  transform: rotate(-8deg) scale(1.12);
}

.show h3 {
  font-size: clamp(3.25rem, 6.4vw, 6rem);
  line-height: 0.9;
}

.show-by {
  margin-top: 0.4rem;
  font-stretch: 68%;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.show-by + p {
  margin-top: 1.25rem;
  max-width: 36em;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: var(--rule);
  max-width: 36em;
}

.facts dt {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.facts dd {
  font-weight: 600;
}

.more {
  display: inline-block;
  margin-top: 1.75rem;
  padding-block: 0.5rem;
  font-stretch: 68%;
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  position: relative;
  isolation: isolate;
  transition: color 0.2s ease-out;
}

/* The ink underline rises to fill the link on hover; it sits behind the text. */
.more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--show-ink);
  /* clipped to a 4px underline; clip-path animates without touching layout */
  clip-path: inset(calc(100% - 4px) 0 0 0);
  transition: clip-path 0.4s var(--ease-out);
}

.more:hover::before,
.more:focus-visible::before {
  clip-path: inset(0 0 0 0);
}

.more:hover,
.more:focus-visible {
  color: var(--ink);
}

[data-show="soutien"] .more:hover,
.company .more:hover,
.company .more:focus-visible {
  color: var(--ground);
}

/* Company */

.company {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 6vw, 7rem);
  row-gap: 1.5rem;
  padding-block: clamp(4rem, 7vw, 7rem);
}

.company h2 {
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 0.92;
}

.company-text p + p {
  margin-top: 1rem;
}

.company-text p {
  max-width: 36em;
  font-size: 1.125rem;
}

/* Workshops and support share one grammar: a sign in the margin, text beside it. */

/* Workshops widens its margin column to host the photo under the sign. */
.workshops {
  --aside: 5fr;
  --body: 7fr;
}

.workshops .section-sign {
  max-width: 8rem;
  margin: 0 0 1.25rem -0.5rem;
  /* justify-self now also aligns block-level boxes, so undo the centring set on .section-sign */
  justify-self: start;
}

.workshops,
.support {
  display: grid;
  grid-template-columns: minmax(0, var(--aside, 3fr)) minmax(0, var(--body, 8fr));
  align-items: start;
  column-gap: clamp(2rem, 6vw, 7rem);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.section-sign {
  width: 100%;
  max-width: 17rem;
  justify-self: center;
}

.workshops h2,
.support h2 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 0.95;
}

.workshops .lede,
.support .lede {
  margin-top: 1rem;
}

.ruled {
  margin-top: 2rem;
  border-top: var(--rule);
  max-width: 50rem;
}

.ruled li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: 2rem;
  padding-block: 1rem;
  border-bottom: var(--rule);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: 2px solid var(--ink);
  font-family: "Imbue", "Bodoni 72", "Didot", serif;
  font-weight: 650;
  font-size: 1.625rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out;
}

.btn-solid {
  background: var(--ink);
  color: var(--ground);
}

.btn-solid:hover,
.btn-solid:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
}

.btn-line:hover,
.btn-line:focus-visible {
  background: var(--ink);
  color: var(--ground);
}

.fineprint {
  margin-top: 1.25rem;
  max-width: 38em;
}

/* Footer */

.site-footer {
  --rule-w: 3px;
  padding-block: clamp(2.5rem, 4vw, 4rem) 2.5rem;
}

.site-footer h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.alphabet ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.alphabet a {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  text-decoration: none;
  font-stretch: 68%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.alphabet img {
  height: 5rem;
  width: auto;
  transition: transform 0.5s var(--ease-out);
}

.alphabet a:hover img,
.alphabet a:focus-visible img {
  transform: rotate(-8deg) scale(1.1);
}

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: var(--rule);
}

.footer-cols p + p {
  margin-top: 0.5rem;
}

.legal li + li {
  margin-top: 0.4rem;
}

.site-footer .sample-note {
  margin-top: 2.5rem;
  max-width: 60em;
}

/* Photos: square-cornered, full colour, captioned as placeholders. */

.photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.photo figcaption {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.news-photo {
  margin-bottom: 1.1rem;
}

.company-photo {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

.company-photo img {
  aspect-ratio: 21 / 9;
  object-position: center 35%;
}

.workshops-photo img {
  aspect-ratio: 4 / 3;
}

/* Narrow screens */

@media (max-width: 56rem) {
  .js .nav-toggle {
    display: inline-block;
  }

  .site-nav {
    grid-column: 1 / -1;
  }

  .js .site-nav {
    display: none;
  }

  .js .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.75rem;
  }

  .site-nav a {
    min-height: 3rem;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-sign {
    order: -1;
    width: 36%;
    min-height: 0;
    height: auto;
    aspect-ratio: 2 / 3;
    margin-left: auto;
    margin-bottom: 0.5rem;
  }

  .news {
    grid-template-columns: minmax(0, 1fr);
  }

  .news article {
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: 0;
    border-top: var(--rule);
  }

  .news .sample-note {
    grid-column: auto;
  }

  .show,
  .show-flip,
  .company,
  .workshops,
  .support {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }

  .show-flip .show-photo {
    order: 0;
  }

  .company-photo img {
    aspect-ratio: 3 / 2;
  }

  .section-sign {
    max-width: 9rem;
    justify-self: start;
  }

  .alphabet ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 1.75rem;
  }
}

@media (max-width: 38rem) {
  .date {
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    grid-template-areas:
      "sign when book"
      "sign show book"
      "sign where book";
    row-gap: 0.1rem;
    padding-block: 0.85rem;
  }

  .date-sign { grid-area: sign; width: 2.75rem; height: 2.75rem; }
  .date-when { grid-area: when; }
  .date-show { grid-area: show; }
  .date-where { grid-area: where; font-size: 0.9375rem; }
  .date-book { grid-area: book; }

  .ruled li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.25rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}