/* Design 7, "Two Squares" (docs/superpowers/specs/2026-10-06-landing-page-
   design.md with its amendments, as built at commit 1d422cd). Every
   eight-point star in Levantine stonework is two squares, one turned 45
   degrees: the nav mark, the hero frame and the footer mark are those two
   squares, and the one movement the page makes is the turn. A warm white
   ground (not a cream), white cards with an edge and a soft shadow, Plex
   at 600, one accent, pomegranate.

   Palette. Contrast, text pairs (ratio):
     Ink on Flour 16.3        Tahini on Flour 6.3      Tahini on Card 6.6
     Pomegranate on Flour 6.8 Flour on Pomegranate 7.4
   Boundaries: Walnut on Flour 3.6, on Card 3.8.
   Sand (1.2) is decorative only: resting card edges and hairlines. */

:root {
  --flour: #fbf9f5;
  --card: #ffffff;
  --ink: #1f1712;
  --tahini: #6b5a4c;
  --walnut: #8f7f6e;
  --sand: #e6ddd0;
  --pomegranate: #9e2f2f;

  --ground: var(--flour);
  --band: var(--sand);
  --visit-ground: var(--flour);
  --map-ground: var(--flour);
  --text: var(--ink);
  --text-2: var(--tahini);
  --line: var(--sand);
  --edge: var(--walnut);
  --accent: var(--pomegranate);
  --on-accent: var(--flour);
  --badge: var(--pomegranate);
  --on-badge: var(--flour);

  --fw-display: 600;
  --fw-heading: 600;
  --fw-price: 600;
  --track-display: -0.015em;
  --r-photo: 20px;
  --r-card: 20px;
  --photo-ratio: 1 / 1;
  --shadow-card: 0 1px 2px rgb(42 31 25 / 0.06), 0 8px 24px rgb(42 31 25 / 0.07);
  --shadow-lift: 0 2px 4px rgb(42 31 25 / 0.06), 0 12px 32px rgb(42 31 25 / 0.11);
  --ease-turn: cubic-bezier(0.34, 1.3, 0.4, 1);

  /* The hero frame's outer square, and each window: the frame over root two. */
  --frame: min(calc(100vw - 32px), 360px);
  --win: calc(var(--frame) / 1.41421356);
  /* How much the frame grows while the square turns into the star: on a
     phone only what the gutters allow (the frame is 100vw minus 32px), from
     48em a sixth, so the finished star is a third wider than the resting
     square (85 % of the frame). */
  --grow: 1.06;
  /* The headline's measure, the standalone v7's: two lines centred over the
     square on a wide screen. */
  --display-max: 13ch;

  --clip-square: polygon(
    50% 7.5%,
    64.645% 7.5%,
    92.5% 7.5%,
    92.5% 35.355%,
    92.5% 50%,
    92.5% 64.645%,
    92.5% 92.5%,
    64.645% 92.5%,
    50% 92.5%,
    35.355% 92.5%,
    7.5% 92.5%,
    7.5% 64.645%,
    7.5% 50%,
    7.5% 35.355%,
    7.5% 7.5%,
    35.355% 7.5%
  );
  --clip-star: polygon(
    50% 0%,
    64.645% 14.645%,
    85.355% 14.645%,
    85.355% 35.355%,
    100% 50%,
    85.355% 64.645%,
    85.355% 85.355%,
    64.645% 85.355%,
    50% 100%,
    35.355% 85.355%,
    14.645% 85.355%,
    14.645% 64.645%,
    0% 50%,
    14.645% 35.355%,
    14.645% 14.645%,
    35.355% 14.645%
  );
}

@media (min-width: 40em) {
  :root {
    --fs-display: clamp(44px, 7.5vw, 80px);
  }
}

@media (min-width: 48em) {
  :root {
    --frame: 560px;
    --grow: 1.15;
    --display-max: 14ch;
  }
}

@media (min-width: 66.8125em) {
  :root {
    --fs-display: 96px;
  }
}

[dir='rtl'] {
  --track-display: 0;
  --display-max: 20rem;
}

@media (min-width: 48em) {
  [dir='rtl'] {
    --display-max: 32rem;
  }
}

/* The mark in the nav: the outline square turns with the page's scroll
   and the star is complete at the footer; in the footer it rests turned. */
.mark {
  display: grid;
}

.nav__name {
  gap: 12px;
}

.motion .nav .mark__turn {
  transform: rotate(0deg);
}

@supports (animation-timeline: scroll()) {
  .motion .nav .mark__turn {
    animation: turn linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 100vh;
  }
}

/* The hero: the words centred and the square frame centred under them at
   every width, as the standalone v7 had it (the two-column desktop hero in
   base.css is design 8's). The picture is clipped by a sixteen-vertex
   polygon that is the inner square at rest and the eight-point star after
   the first 70 % of a screen of scroll, and the frame grows by --grow over
   the same scroll, so the picture comes toward the visitor as it rises; a
   hairline square behind it runs the turn as a rotation. Without motion the
   star stands finished at the frame's own size. The hero clips sideways so
   the grown star can never widen the page. */
.hero {
  overflow-x: clip;
}

.hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__words {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__words .actions {
  justify-content: center;
}

.frame {
  inline-size: var(--frame);
  block-size: var(--frame);
  margin-block-start: 28px;
}

.frame__tilt {
  inline-size: 100%;
  block-size: 100%;
}

.frame__hair {
  display: block;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--win);
  block-size: var(--win);
  margin: calc(var(--win) / -2) 0 0 calc(var(--win) / -2);
  border: 1px solid var(--walnut);
  transform: rotate(calc(45deg * var(--dir)));
}

html[dir='rtl'] .frame__hair {
  margin: calc(var(--win) / -2) calc(var(--win) / -2) 0 0;
}

.frame__media {
  position: absolute;
  inset: 0;
  background: var(--sand);
  clip-path: var(--clip-star);
}

.frame__pause {
  inset-block-end: 12%;
  inset-inline-end: 12%;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.motion .frame__media {
  clip-path: var(--clip-square);
}

.motion .frame__hair {
  transform: rotate(0deg);
}

@supports (animation-timeline: scroll()) {
  .motion .frame__media {
    animation: morph linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 70vh;
  }

  .motion .frame__hair {
    animation: turn linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 70vh;
  }

  .motion .frame__tilt {
    animation: grow linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 70vh;
  }
}

@keyframes morph {
  from {
    clip-path: var(--clip-square);
  }
  to {
    clip-path: var(--clip-star);
  }
}

@keyframes turn {
  to {
    transform: rotate(calc(45deg * var(--dir)));
  }
}

@keyframes grow {
  to {
    transform: scale(var(--grow));
  }
}

@media (min-width: 64em) {
  .hero__grid {
    display: flex;
  }

  .frame {
    margin-block-start: 12px;
  }
}

/* Chapters are centred under their headings on a phone, as the first look
   had them. */
.chapter__head:not(.chapter__head--nav) {
  text-align: center;
}

.chapter__head:not(.chapter__head--nav) .heading,
.chapter__head:not(.chapter__head--nav) .intro {
  margin-inline: auto;
}

/* The chapter that opens the Kontakt page reads as the page's title, at the
   axis like the headings under it. */
.chapter--first .chapter__head {
  text-align: start;
}

.chapter--first .chapter__head .heading {
  margin-inline: 0;
}

/* Every rail is a grid: two columns on a phone, three or four from 48em.
   The progress line and the rail buttons go. */
.rail,
.rail--fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-inline: var(--axis);
  overflow: visible;
}

.rail::after,
.progress,
.rail-nav,
.panel__num {
  display: none !important;
}

.rail .panel {
  flex: none;
}

.rail--fit {
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 48em) {
  .rail {
    gap: 20px;
  }

  .rail--fit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .rail--range,
  .rail--offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .rail--offers {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .rail--range {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Cards: white, a Sand edge, the soft shadow, the picture edge to edge at
   the top, the words on a padded plate. */
.panel,
.offers__flyer-link {
  border: 1px solid var(--sand);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform 240ms var(--ease-arrive),
    border-color 240ms var(--ease-arrive);
}

.panel__photo {
  border-radius: 0;
}

.service .panel__photo {
  aspect-ratio: 3 / 2;
}

.panel__title,
.offer__name,
.panel__line,
.panel__name,
.offer__body {
  padding-inline: 20px;
}

.panel__title,
.offer__name {
  margin-block-start: 18px;
  font-weight: 600;
  letter-spacing: var(--track-display);
}

.panel__line {
  margin-block-start: 8px;
  padding-block-end: 24px;
}

.panel__name {
  padding-block: 12px 14px;
  font-weight: 600;
}

.offer__body {
  padding-block-end: 20px;
}

.offer__name {
  padding-inline: 0;
}

.offer__price {
  font-weight: 600;
}

.offer__edit {
  margin-inline: 20px;
}

.offers__flyer-link {
  padding: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .panel:hover {
    border-color: var(--walnut);
    box-shadow: var(--shadow-lift);
    transform: translateY(-4px);
  }
}

/* The hours as a white card with the turned-square marker before today. */
.hours {
  table-layout: fixed;
  border: 1px solid var(--sand);
  border-radius: var(--r-card);
  border-collapse: separate;
  border-spacing: 0;
  padding: 6px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.hours th,
.hours td {
  padding: 16px 14px;
}

.hours th {
  padding-inline-start: 36px;
}

.hours th .dot {
  inset-inline-start: 16px;
  inset-block-start: calc(16px + 0.625em - 4px);
}

.hours tr[aria-current] th,
.hours tr[aria-current] td {
  font-weight: 600;
}

/* The dot everywhere is the motif at its smallest: a square turned 45
   degrees. */
.dot,
.place__dot {
  border-radius: 0;
  transform: rotate(45deg);
}

.place__ring {
  border-radius: 0;
  transform: rotate(45deg);
}

/* The map card, the contact rows' plate. */
.place {
  border: 1px solid var(--sand);
  box-shadow: var(--shadow-card);
}

.rows {
  border: 1px solid var(--sand);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.rows .row {
  padding-inline: 16px;
}

/* Reveals arrive through the turn at card size, from a slight turn and
   0.94, as the first look had them. Screen only, like base.css's start
   state: a printed page shows every panel at rest. */
@media screen {
  .motion [data-reveal]:not(.is-lit) {
    transform: rotate(calc(-5deg * var(--dir))) scale(0.94);
  }

  .motion .visit__hours[data-reveal]:not(.is-lit),
  .motion .place[data-reveal]:not(.is-lit) {
    transform: translateY(12px);
  }
}

.motion .place[data-reveal].is-lit .place__ring {
  animation-name: breathe-square;
}

@keyframes breathe-square {
  0%,
  100% {
    opacity: 0.6;
    transform: rotate(45deg) scale(1);
  }
  50% {
    opacity: 0.15;
    transform: rotate(45deg) scale(1.8);
  }
}