/* ══════════════════════════════════════════════════════════════════
   needlebound
   Four navy quilt-block panels on white, pinned at the crossing
   by the monogram medallion.
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --paper: #FFFFFF;
  --navy:  #3B4A63;
  --pink:  #F2BCC9;

  --sans:   'Avenir Next', Avenir, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
  --script: 'Savoye LET', 'Snell Roundhand', 'Mrs Saint Delafield', cursive;

  --gap: clamp(14px, 2.6vw, 52px);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  padding-block: var(--gap);
  background: var(--paper);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

::selection { background: var(--pink); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 4px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   THE BOARD — 3×3 tracks, four panels, medallion on the middle cell
   ══════════════════════════════════════════════════════════════════ */

.board {
  container-type: inline-size;
  width: min(1160px, 100% - 2 * var(--gap));
}

@media (min-width: 1200px) {
  /* the wide layout is one size: fixed board, fixed gutters — nothing
     about it follows the window */
  :root { --gap: 34px; }

  .board {
    width: 1160px;
    display: grid;
    grid-template-columns: 42fr 12fr 46fr;
    /* 145px = 12.5% of the fixed board; cqw would resolve against the
       viewport here, since a container's own styles can't query itself */
    grid-template-rows: auto 145px auto;
    gap: var(--gap);
  }
  .panel--brand       { grid-area: 1 / 1 / 3 / 2; }
  .panel--hems        { grid-area: 1 / 2 / 2 / 4; }
  .panel--repairs     { grid-area: 2 / 3 / 4 / 4; }
  .panel--alterations { grid-area: 3 / 1 / 4 / 3; }
  .hub                { grid-area: 2 / 2 / 3 / 3; }
}

.panel {
  background: var(--navy);
  color: var(--paper);
  padding: clamp(1.6rem, 4.6cqw, 3.4rem);
  display: flex;
  flex-direction: column;
}

/* ── the medallion ─────────────────────────────────────────────────
   The ring is drawn as a white disc under the navy one, so it cuts
   the panel corners the way the mockup's circle does. */
.hub { position: relative; z-index: 1; }

.hub__ring {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(200px, 33cqw, 384px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
}

.hub__disc {
  width: 86.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  display: grid;
  place-items: center;
}

.monogram { display: block; width: 70%; height: auto; }

/* ══════════════════════════════════════════════════════════════════
   BRAND PANEL
   ══════════════════════════════════════════════════════════════════ */

.brand__services {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: .1em;
  font-size: clamp(1.05rem, 2.4cqw, 1.45rem);
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
}

.brand__services a {
  color: inherit;
  text-decoration: none;
}
.brand__services a:hover,
.brand__services a:focus-visible { color: var(--pink); }

.brand__logo {
  margin-top: clamp(1rem, 3cqw, 2rem);
  line-height: 0;
}

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

.brand__contact {
  padding-top: clamp(.8rem, 2cqw, 1.4rem);
  font-size: clamp(.95rem, 2.2cqw, 1.3rem);
  text-align: center;
  overflow-wrap: break-word;
}

.brand__contact a {
  color: inherit;
  text-decoration: none;
}
.brand__contact a:hover,
.brand__contact a:focus-visible { color: var(--pink); }

/* ══════════════════════════════════════════════════════════════════
   PRICE PANELS
   ══════════════════════════════════════════════════════════════════ */

.script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.2rem, 7.2cqw, 5.2rem);
  line-height: .55;
  scroll-margin-block: var(--gap);
}

.items {
  display: flex;
  flex-direction: column;
  gap: clamp(1.3rem, 3cqw, 2.1rem);
  text-align: center;
}

.item__line {
  font-size: clamp(1.05rem, 2.3cqw, 1.5rem);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.item__price { font-weight: 700; }

.item__note {
  margin-top: .1em;
  max-width: 36ch;
  margin-inline: auto;
  font-size: clamp(.92rem, 1.9cqw, 1.2rem);
  font-weight: 400;
  text-wrap: pretty;
}

.item__note b { font-weight: 700; }

/* hems: prices up top, the word settles bottom-right */
.panel--hems .items  { order: 1; }
.panel--hems .script { order: 2; align-self: flex-end; margin-top: auto; padding-top: 1.2em; padding-right: 4%; }

/* repairs: the word leads, right of centre */
.panel--repairs .script { align-self: flex-end; margin-right: 10%; padding-bottom: 1em; }
.panel--repairs .items  { margin-block: auto; }

/* alterations: the word leads, left of centre */
.panel--alterations .script { align-self: flex-start; margin-left: 12%; padding-bottom: 1em; }

.alterations__note {
  margin-block: auto;
  max-width: 46ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(1rem, 2.2cqw, 1.35rem);
  text-wrap: pretty;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER — the mountain, and where the table is
   ══════════════════════════════════════════════════════════════════ */

.foot {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}

.foot__peaks {
  display: block;
  width: clamp(75px, 10vw, 110px);
  height: auto;
  margin-inline: auto;
}

.foot__based {
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
}

/* ══════════════════════════════════════════════════════════════════
   NARROW SCREENS — the blocks stack, the medallion pins the seam
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1199.98px) {
  .board {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  .panel { min-height: 0; }

  /* the medallion belongs to the wide layout's crossing — stacked, it goes */
  .hub { display: none; }

  .brand__services { align-self: center; text-align: center; }

  .brand__logo {
    width: min(86%, 420px);
    margin-top: clamp(2rem, 6vw, 3rem);
    margin-inline: auto;
  }

  /* stacked, every panel leads with its word */
  .panel--hems .script { order: 0; margin-top: 0; padding-top: 0; }

  .panel--hems .script,
  .panel--repairs .script,
  .panel--alterations .script {
    align-self: center;
    margin-inline: 0;
    padding-right: 0;
    padding-bottom: .45em;
  }
}

/* ══════════════════════════════════════════════════════════════════
   MOTION — the blocks settle, the medallion pins them
   ══════════════════════════════════════════════════════════════════ */

.panel { animation: settle .65s cubic-bezier(.22, .7, .3, 1) backwards; }
.panel--brand       { animation-delay: .05s; }
.panel--hems        { animation-delay: .13s; }
.panel--repairs     { animation-delay: .21s; }
.panel--alterations { animation-delay: .29s; }

.hub__ring { animation: pin .55s cubic-bezier(.3, 1.4, .4, 1) .45s backwards; }

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

@keyframes pin {
  from { opacity: 0; scale: .6; }
  to   { opacity: 1; scale: 1; }
}

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

@media print {
  body { display: block; }
  .panel { break-inside: avoid; }
}