/* ══════════════════════════════════════════════════════════════════
   needlebound
   A pale-tissue page with a graduated tailor's tape for a spine.
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── colour: dyed-cotton palette ────────────────────────────── */
  --tissue:      #FBF5F3;   /* pattern-tissue ground              */
  --tissue-deep: #F4E7E4;   /* a second sheet laid over the first */
  --rose:        #E7A7B6;   /* the sketch line                    */
  --rose-pale:   #F8E2E7;   /* tape body                          */
  --rose-faint:  #FCEFF2;
  --madder:      #A9485F;   /* madder-root dye: prices, titles    */
  --ink:         #38292D;   /* plum-black                         */
  --pencil:      #97838A;   /* tailor's pencil                    */
  --chalk:       #5D7E93;   /* contrasting basting thread ONLY    */

  /* ── type ───────────────────────────────────────────────────── */
  --sans:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif:  'Faustina', Georgia, 'Times New Roman', serif;
  --script: 'Mrs Saint Delafield', 'Snell Roundhand', cursive;

  /* ── measure: the tape's own units ──────────────────────────────
     --tape-w is the lane the tape swings inside, not the tape itself.
     The woven ribbon is (--tape-w - 2 × --wave-a) wide, so however far
     it wanders it can never reach the prices or the service names. */
  --inch:      128px;
  --tape-w:    102px;
  --wave-a:    20px;    /* how far off centre the tape drifts */
  --wave-l:    780px;   /* and how long it takes to come back */
  --trail:     240px;   /* how far the loose end trails in above the list */
  --trail-a:   22px;    /* and the extra play it has before it settles */
  --lane-left: var(--price-w);
  --price-w:   150px;
  --gap:       28px;

  --page: min(1080px, 100% - 3rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;              /* the tape runs off the left edge */
}

body {
  margin: 0;
  background: var(--tissue);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.66;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul { margin: 0; }
ol { list-style: none; padding: 0; }

a { color: var(--madder); text-underline-offset: .28em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--chalk);
  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;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--madder); color: var(--tissue);
  padding: .7rem 1.1rem; border-radius: 2px;
  font-family: var(--sans); font-size: .8rem;
  font-stretch: 84%; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 1rem; color: var(--tissue); }

/* ── shared type roles ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-stretch: 88%;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */

.hero {
  width: var(--page);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5rem);
  text-align: center;
}

.hero__mark { margin-inline: auto; width: min(380px, 82vw); }

.markart { display: block; width: 100%; height: auto; overflow: visible; }

.markart__script {
  font-family: var(--script);
  font-size: 165px;
  fill: var(--madder);
}

.hero__tagline {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--sans);
  font-size: clamp(.78rem, 2.1vw, .95rem);
  font-stretch: 112%;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--madder);
}

.hero__tagline i { padding: 0 .9em; font-style: normal; opacity: .5; }

.hero__tagline a {
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* the underline arrives as a line of running stitch */
.hero__tagline a::after {
  content: "";
  position: absolute;
  left: 0;
  right: .3em;                 /* trim the trailing letterspace */
  bottom: -.55em;
  height: 1px;
  background-image: linear-gradient(to right, currentColor 0 4px, transparent 4px);
  background-size: 8px 1px;
  opacity: 0;
  transition: opacity .22s ease;
}
.hero__tagline a:hover::after,
.hero__tagline a:focus-visible::after { opacity: 1; }

.hero__lede {
  max-width: 34ch;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  font-size: clamp(1.1rem, 2.6vw, 1.375rem);
  line-height: 1.62;
  color: var(--ink);
  text-wrap: pretty;
}

.hero__by {
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-stretch: 84%;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* ══════════════════════════════════════════════════════════════════
   THE MEASURE — price list threaded onto the tape
   ══════════════════════════════════════════════════════════════════ */

.measure {
  position: relative;
  width: min(940px, 100% - 3rem);
  margin-inline: auto;
  padding-top: var(--trail);      /* clear space for the tape to trail into */
  padding-bottom: clamp(4rem, 10vh, 7rem);
  --offset: calc(var(--price-w) + var(--tape-w) + var(--gap));
}

/* the copy that isn't inside a row still starts at the name column */
.measure__eyebrow,
.measure__note,
.chapter__head { padding-left: var(--offset); }

.measure__eyebrow { padding-bottom: .9rem; }

.measure__note {
  max-width: calc(48ch + var(--offset));   /* padding is inside the box */
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
  font-size: 1.0625rem;
  color: var(--pencil);
  font-style: italic;
  text-wrap: pretty;
}

/* ── the tape ──────────────────────────────────────────────────── */
.tape {
  position: absolute;
  top: 0;                         /* the trail lives in the measure's top padding */
  bottom: clamp(4rem, 10vh, 7rem);
  left: 0;
  right: 0;
  z-index: -1;                    /* the trail passes behind the hero's words */
}

/* the drawn tape breaks out to the full viewport so its end can come in
   off the left edge; .tape itself stays in the measure's coordinates so
   the no-script ribbon and the row grid still line up with it */
.tape__svg { display: none; }
.js .tape__svg {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
}

/* the drawn tape */
.tape__body   { fill: var(--rose-pale); stroke: var(--rose); stroke-width: 1; }
.tape__grad   { stroke: var(--madder); fill: none; stroke-linecap: butt; }
.tape__grad--eighth { stroke-width: 1.5; opacity: .46; }
.tape__grad--half   { stroke-width: 1.5; opacity: .72; }
.tape__grad--inch   { stroke-width: 2; }

.tape__lead { stroke: color-mix(in srgb, var(--rose) 78%, transparent); stroke-width: 1; }
.tape__mark { stroke: var(--madder); stroke-width: 2; stroke-linecap: butt; }
.tape__mark--open { stroke: var(--pencil); opacity: .55; }
.tape__chapter { stroke: var(--madder); stroke-width: 2; opacity: .85; }

/* no-script fallback: the same tape, lying straight */
.js .tape__flat { display: none; }
.tape__flat {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lane-left) + var(--wave-a));
  width: calc(var(--tape-w) - 2 * var(--wave-a));
  background-color: var(--rose-pale);
  border-left: 1px solid var(--rose);
  border-right: 1px solid var(--rose);
  border-radius: 1px;

  /* graduations: 1/8", 1/2", 1" — printed from the left edge */
  background-image:
    linear-gradient(to bottom, color-mix(in srgb, var(--madder) 46%, transparent) 0 1.5px, transparent 1.5px),
    linear-gradient(to bottom, color-mix(in srgb, var(--madder) 72%, transparent) 0 1.5px, transparent 1.5px),
    linear-gradient(to bottom, var(--madder) 0 2px, transparent 2px);
  background-size:
    12px calc(var(--inch) / 8),
    20px calc(var(--inch) / 2),
    32px var(--inch);
  background-position: left top, left top, left top;
  background-repeat: repeat-y, repeat-y, repeat-y;
}

.tape__numeral {
  font-family: var(--sans);
  font-size: .68rem;
  font-stretch: 70%;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  fill: var(--pencil);
}

/* ── chapters ──────────────────────────────────────────────────── */
.chapter { position: relative; padding-top: clamp(2.5rem, 6vw, 4rem); }
.chapter + .chapter { padding-top: clamp(4.5rem, 11vw, 8rem); }

.chapter__head { position: relative; padding-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* a doubled tick across the tape marks a new chapter */
.chapter__mark {
  position: absolute;
  left: calc(var(--price-w) - 10px);
  top: .9em;
  width: calc(var(--tape-w) + 20px);
  height: 7px;
  border-top: 2px solid var(--madder);
  border-bottom: 2px solid var(--madder);
  opacity: .85;
}

.chapter__title {
  font-family: var(--sans);
  font-size: clamp(2.4rem, 6.6vw, 4.25rem);
  font-stretch: 118%;
  font-weight: 320;
  line-height: .96;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--madder);
  text-indent: .14em;   /* balance the trailing letterspace */
  scroll-margin-top: clamp(1.5rem, 9vh, 5rem);
}

.chapter__qualifier {
  margin-top: .7rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--pencil);
}

/* ── priced rows ───────────────────────────────────────────────── */
.row {
  position: relative;
  display: grid;
  grid-template-columns: var(--price-w) var(--tape-w) minmax(0, 1fr);
  align-items: start;
  padding: clamp(1.5rem, 3.4vw, 2.4rem) 0;
}
/* with script, the marks are drawn onto the tape so they follow its slack */
.js .row__tick,
.js .chapter__mark { display: none; }

/* the divider belongs to the name column — a rule across the tape would read
   as one more graduation */
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--offset);
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--rose) 42%, transparent);
}

/* all three share one grid row — the body comes first in the DOM so it reads
   "Pants … $20", but auto-placement will not walk back to column 1 on its own */
.row__body  { grid-row: 1; grid-column: 3; padding-left: var(--gap); }
.row__price { grid-row: 1; grid-column: 1; }
.row__tick  { grid-row: 1; grid-column: 2; }

.row__price {
  justify-self: end;
  margin-top: -.08rem;          /* sits on the service name's baseline */
  padding-right: 22px;
  font-family: var(--sans);
  font-size: clamp(1.35rem, 3.4vw, 1.85rem);
  font-stretch: 72%;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--madder);
}
.row__price--none { color: var(--pencil); font-stretch: 100%; font-weight: 400; }

/* the measurement mark: crosses the tape, points at the price */
.row__tick {
  position: relative;
  height: 2px;
  margin-top: .86rem;           /* centred on the name's first line */
  background: var(--madder);
  transform: scaleX(1);
  transform-origin: right center;
}
.row__tick::before {
  content: "";
  position: absolute; right: 100%; top: 50%;
  width: 14px; height: 1px;
  background: var(--madder);
  transform: translateY(-50%);
}
.row__tick::after {
  content: "";
  position: absolute; left: 100%; top: 50%;
  width: calc(var(--gap) - 8px); height: 1px;
  background: color-mix(in srgb, var(--rose) 78%, transparent);
  transform: translateY(-50%);
}
.row__tick--open { background: var(--pencil); opacity: .55; }
.row__tick--open::before, .row__tick--open::after { background: var(--pencil); }

.row__name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

.row__desc {
  max-width: 52ch;
  margin-top: .5rem;
  color: var(--pencil);
  text-wrap: pretty;
}

.row__addendum {
  display: inline-block;
  margin-left: .1rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-stretch: 76%;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--madder);
  white-space: nowrap;
}

.row--open .row__desc { max-width: 48ch; }

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS
   ══════════════════════════════════════════════════════════════════ */

.how {
  position: relative;
  background: var(--tissue-deep);
  padding: clamp(4.5rem, 12vh, 8rem) 0;
}

.how__inner { position: relative; width: var(--page); margin-inline: auto; }

.spool {
  position: absolute;
  top: -2.25rem; right: 0;
  width: clamp(104px, 15vw, 168px);
  height: auto;
}

.how__title {
  max-width: 16ch;
  margin-top: .85rem;
  text-wrap: balance;
  font-family: var(--sans);
  font-size: clamp(1.9rem, 5.2vw, 3rem);
  font-stretch: 112%;
  font-weight: 330;
  line-height: 1.06;
  letter-spacing: .06em;
  color: var(--madder);
}

.steps {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: clamp(2.75rem, 6vw, 4rem);
}

.step { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--rose); }

.step__num {
  position: absolute;
  top: -.72em; left: 0;
  padding-right: .6rem;
  background: var(--tissue-deep);
  font-family: var(--sans);
  font-size: .82rem;
  font-stretch: 72%;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--madder);
}

.step__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}

.step__desc { margin-top: .45rem; color: var(--pencil); text-wrap: pretty; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

.foot {
  width: var(--page);
  margin-inline: auto;
  padding: clamp(4rem, 10vh, 6.5rem) 0 clamp(3rem, 7vh, 4.5rem);
  text-align: center;
}

.machine {
  display: block;
  width: min(330px, 74vw);
  height: auto;
  margin-inline: auto;
}

.foot__stitch {
  height: 1px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto clamp(2.5rem, 6vw, 3.5rem);
  max-width: 620px;
  background-image: linear-gradient(to right, var(--rose) 0 9px, transparent 9px);
  background-size: 18px 1px;
  background-repeat: repeat-x;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.foot__word {
  font-family: var(--script);
  font-size: clamp(3.5rem, 13vw, 5.5rem);
  line-height: .9;
  color: var(--madder);
}

.foot__sub {
  margin-top: 1.1rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--pencil);
}

.foot__contact {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
}
.foot__contact a { text-decoration-color: var(--rose); }

.foot__place { margin-top: clamp(3rem, 8vw, 4.5rem); }

.peaks { display: block; width: 76px; height: auto; margin: 0 auto .7rem; }

.foot__based {
  font-family: var(--sans);
  font-size: .66rem;
  font-stretch: 84%;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pencil);
}

/* ══════════════════════════════════════════════════════════════════
   NARROW SCREENS — the tape moves to the edge
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  :root {
    --inch:      104px;
    --tape-w:    62px;
    --wave-a:    8px;
    --wave-l:    520px;
    --trail:     140px;
    --trail-a:   6px;
    --lane-left: 6px;
    --price-w:   56px;
    --gap:       14px;
    --page:      min(1080px, 100% - 2.25rem);
  }

  .measure { width: min(940px, 100% - 2.25rem); }

  .tape__flat {
    background-size:
      8px  calc(var(--inch) / 8),
      13px calc(var(--inch) / 2),
      20px var(--inch);
  }
  .tape__numeral { font-size: .58rem; }

  .chapter__mark { left: -8px; width: calc(var(--tape-w) + 16px); }

  .row { grid-template-columns: var(--tape-w) var(--price-w) minmax(0, 1fr); }
  .row__tick  { grid-column: 1; margin-top: .74rem; }
  .row__price { grid-column: 2; }
  .row__body  { grid-column: 3; }
  /* the display face narrows with the column — that is what the width axis is for */
  .chapter__title {
    font-size: clamp(1.95rem, 7vw, 3.4rem);
    font-stretch: 100%;
    letter-spacing: .07em;
    text-indent: .07em;
  }

  .row__price { padding-right: 0; padding-left: 14px; justify-self: start; }
  .row__tick::before { display: none; }
  .row__tick::after {
    width: calc(var(--price-w) + var(--gap) - 10px);
    background: color-mix(in srgb, var(--rose) 55%, transparent);
  }

  .spool { position: static; margin: 0 0 1.75rem auto; display: block; }
}

@media (max-width: 480px) {
  :root { --price-w: 52px; --gap: 12px; }
  .row__desc { font-size: .98rem; }
  .chapter__title { font-size: clamp(1.85rem, 7vw, 3.4rem); }
}

/* ══════════════════════════════════════════════════════════════════
   MOTION — one orchestrated open, then quiet reveals
   ══════════════════════════════════════════════════════════════════ */

.js .sew-arc { stroke-dashoffset: 100; animation: sew 1.5s cubic-bezier(.42, 0, .18, 1) .2s forwards; }

.js .markart__word,
.js .hero__tagline,
.js .hero__lede,
.js .hero__by {
  opacity: 0;
  animation: rise .85s cubic-bezier(.22, .7, .3, 1) forwards;
}
.js .markart__word  { animation-delay: 1.05s; }
.js .hero__tagline  { animation-delay: 1.25s; }
.js .hero__lede     { animation-delay: 1.4s; }
.js .hero__by       { animation-delay: 1.52s; }

.js .markart__thread { opacity: 0; animation: rise .9s ease 1.5s forwards; }

.js .tape__svg { clip-path: inset(0 0 100% 0); animation: unspool 1.2s cubic-bezier(.3, 0, .2, 1) 1.7s forwards; }

@keyframes sew     { to { stroke-dashoffset: 0; } }
@keyframes rise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes unspool { to { clip-path: inset(0 0 0 0); } }

/* scroll reveals — drawn marks stroke themselves on from the tape outwards */
.tape__row > * {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .62s cubic-bezier(.3, 0, .2, 1);
}
.tape__row.is-in > * { stroke-dashoffset: 0; }

.js .row__price,
.js .row__body,
.js .chapter__head > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .3, 1);
}
.js .row__price { transition-delay: .1s; }
.js .row__body  { transition-delay: .16s; }
.js .chapter__head > *:nth-child(2) { transition-delay: .08s; }
.js .chapter__head > *:nth-child(3) { transition-delay: .16s; }

.js .is-in .row__price,
.js .is-in .row__body,
.js .is-in.chapter__head > * { opacity: 1; transform: none; }

/* hover: the leader darkens toward the price */
.tape__row > .tape__lead { transition: stroke-dashoffset .62s cubic-bezier(.3, 0, .2, 1), stroke .3s ease; }
.tape__row.is-hot > .tape__lead { stroke: var(--madder); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .sew-arc,
  .js .markart__word, .js .markart__thread,
  .js .hero__tagline, .js .hero__lede, .js .hero__by,
  .js .tape__svg,
  .tape__row > *,
  .js .row__price, .js .row__body, .js .chapter__head > * {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
    clip-path: none;
    stroke-dashoffset: 0;
  }
}

@media print {
  .tape, .machine, .spool, .peaks { display: none; }
  body { background: #fff; }
}