/* Y & Z Tailoring Inc. — "notch-line" preset (2026-10-01).
   Identity: the pattern notch, the small triangle printed on a sewing pattern's cutting line to
   mark where pieces align. Three notches for the shop's three categories (facts.json YZ-F4).
   Flannel-grey surface, charcoal text, loden green as the one accent, given two structural areas
   (the hero pattern piece and the full-bleed close). Lines and triangles only; no images.
   Type: Archivo (variable, SIL OFL 1.1) for every word; JetBrains Mono (variable, SIL OFL 1.1) only
   for phone numbers, address digits, zip and hours at body size. Both vendored in assets/fonts.
   No CDN, no JavaScript, no third-party request.

   Measured contrast (WCAG 2.x relative luminance, on the hex shipped below):
     charcoal #201f1e on flannel #ebeee8 ... 14.05:1   loden #34502f on flannel ......... 7.68:1
     pewter   #5c5d59 on flannel ........... 5.66:1   flannel on loden-deep #22391f ... 10.72:1
     flannel on loden (piece, close) ....... 7.68:1   lichen #c9d4c3 on loden ........... 5.86:1
     loden-deep on lichen (hover) .......... 8.18:1   charcoal on rule #d7dad2 (band) .. 11.64:1
     loden on rule (band) .................. 6.36:1   flannel on charcoal (footer) ..... 14.05:1
     lichen on charcoal (footer) ........... 10.73:1  rule on flannel: decorative only */

@font-face { font-family: "Archivo"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/jetbrains-mono-latin-var.woff2") format("woff2"); }

:root {
  /* colour: 7 */
  --flannel: #ebeee8;
  --rule: #d7dad2;
  --charcoal: #201f1e;
  --pewter: #5c5d59;
  --loden: #34502f;
  --loden-deep: #22391f;
  --lichen: #c9d4c3;
  /* type: 6 steps, clamp() on the top three */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-1: .9375rem;
  --t0: 1.0625rem;
  --t1: 1.25rem;
  --t2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t3: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --t4: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);
  --lh-tight: 1.05;
  --lh-mid: 1.2;
  --lh-text: 1.55;
  --measure: 68ch;
  /* space: 6 steps; every margin / padding / gap uses one */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: clamp(4rem, 2rem + 6vw, 8rem);
  --wrap: 74rem;
  --gutter: max(var(--s3), calc((100% - var(--wrap)) / 2));
  /* shape + motion: one radius (square, a cut paper edge), one easing, two durations */
  --r: 0;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --d-fast: 160ms;
  --d-slow: 420ms;
  /* the device at its three scales (width of one notch), the line weight, the tap floor */
  --n-s: .75rem;
  --n-m: 1.125rem;
  --n-l: 1.75rem;
  --tile-w: 4.5rem;      /* notch line: one 12px notch every 72px, never a continuous sawtooth */
  --tile-h: .625rem;
  --tile-w-s: 3rem;
  --tile-h-s: .4167rem;
  --line: 2px;
  --measure-s: 32ch;
  --track-display: -.025em;
  --track-caps: .02em;
  --tap: 3rem;
  --notch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M0 8h72v2H0zM30 8l6-8 6 8z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--s5) + var(--s3)); }
body {
  margin: 0; background: var(--flannel); color: var(--charcoal);
  font: 400 var(--t0)/var(--lh-text) var(--sans);
  font-variant-numeric: lining-nums;
}
p, h1, h2, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--loden); text-underline-offset: .18em; text-decoration-thickness: .08em; }
:focus-visible { outline: 3px solid var(--loden-deep); outline-offset: 3px; }
.wrap { padding-inline: var(--gutter); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s1); top: var(--s1); z-index: 20; transform: translateY(-300%); background: var(--charcoal); color: var(--flannel); padding: var(--s1) var(--s2); font-weight: 700; }
.skip:focus { transform: none; }

/* figures: phone, address digits, zip, hours, at body size only */
.d { font-family: var(--mono); font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------- the notch device */
.notch {
  height: var(--tile-h); color: var(--loden); background: currentColor;
  -webkit-mask: var(--notch) 0 100% / var(--tile-w) var(--tile-h) repeat-x;
  mask: var(--notch) 0 100% / var(--tile-w) var(--tile-h) repeat-x;
}
.notch--s, .notch--foot {
  height: var(--tile-h-s);
  -webkit-mask-size: var(--tile-w-s) var(--tile-h-s);
  mask-size: var(--tile-w-s) var(--tile-h-s);
}
.notch--foot { color: var(--lichen); }
@keyframes draw { from { transform: scaleX(0); } }
.notch--draw { transform-origin: left center; animation: draw var(--d-slow) var(--ease); }

/* a single notch: the same triangle the line carries */
.cat::before, .about__note::before, .piece__notches i {
  content: ""; display: block; background: var(--loden);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.mark { width: 1.5rem; height: 1rem; flex: none; fill: var(--loden); }

/* ------------------------------------------------------------------- buttons */
.call, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--tap); padding: var(--s1) var(--s3); border-radius: var(--r);
  font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.call:active, .btn-line:active { transform: translateY(1px); }
.call { background: var(--loden-deep); color: var(--flannel); }
.call:hover { background: var(--loden); color: var(--flannel); }
.btn-line { border: var(--line) solid currentColor; color: inherit; }

/* -------------------------------------------------------------------- header */
.head { position: sticky; top: 0; z-index: 10; background: var(--flannel); }
.head__in { display: flex; align-items: center; gap: var(--s2); padding-block: var(--s1); }
.brand {
  display: flex; align-items: center; gap: var(--s1); flex: 1; min-width: 0; min-height: var(--tap);
  color: var(--charcoal); text-decoration: none; font-weight: 700; font-size: var(--t0); line-height: var(--lh-mid);
}
.head__nav { display: none; }
.call--head { flex: none; padding-inline: var(--s2); }

/* ---------------------------------------------------------------------- hero */
.hero { padding-block: var(--s4) var(--s6); }
.hero__in { display: grid; gap: var(--s4); }
.hero__h1 { font-size: var(--t4); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--track-display); text-wrap: balance; }
.notch--draw { margin-block: var(--s3); }
.hero__claim { font-size: var(--t2); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--track-caps); color: var(--loden); }
.hero__line { margin-top: var(--s1); font-size: var(--t1); line-height: var(--lh-mid); max-width: var(--measure-s); text-wrap: balance; }

/* the pattern piece: a loden panel with three notches standing on its top edge */
.piece {
  position: relative; display: grid; align-content: end; gap: var(--s2);
  margin-top: var(--s3); padding: var(--s4) var(--s3) var(--s3);
  background: var(--loden); color: var(--flannel);
}
.piece__notches { position: absolute; inset-inline: 0; bottom: 100%; display: flex; justify-content: space-evenly; }
.piece__notches i { width: var(--n-l); height: calc(var(--n-l) * .66); }
.piece__area { font-size: var(--t1); font-weight: 700; line-height: var(--lh-mid); text-wrap: balance; }
.piece__addr { font-style: normal; }
.piece__addr > span { display: block; }
.piece__acts { display: grid; gap: var(--s1); margin-top: var(--s1); }
.call--big { background: var(--flannel); color: var(--loden-deep); font-size: var(--t1); }
.call--big:hover { background: var(--lichen); color: var(--loden-deep); }
.piece .btn-line:hover { background: var(--flannel); color: var(--loden-deep); }
.piece :focus-visible, .close :focus-visible, .foot :focus-visible { outline-color: var(--flannel); }

/* ---------------------------------------------------------------- categories */
.cats { background: var(--rule); padding-block: var(--s6); }
.sec-h { font-size: var(--t3); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--track-display); text-wrap: balance; }
.cats__list { display: grid; gap: var(--s3); margin-top: var(--s5); }
.cat {
  position: relative; padding-top: var(--s2); border-top: var(--line) solid var(--loden);
  font-size: var(--t3); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--track-display);
}
.cat::before { position: absolute; left: 0; bottom: 100%; width: var(--n-m); height: calc(var(--n-m) * .66); }
.cats__note { margin-top: var(--s4); font-size: var(--t1); line-height: var(--lh-mid); }

/* --------------------------------------------------------------------- about */
.about { padding-block: var(--s6); }
.about__in { display: grid; gap: var(--s4); }
.about__line { font-size: var(--t3); line-height: var(--lh-mid); font-weight: 600; max-width: var(--measure-s); text-wrap: pretty; }
.about__note { display: flex; align-items: baseline; gap: var(--s2); max-width: var(--measure); color: var(--pewter); }
.about__note::before { flex: none; width: var(--n-s); height: calc(var(--n-s) * .66); }

/* --------------------------------------------------------------------- visit */
.visit { padding-block: var(--s6); border-top: var(--line) solid var(--rule); }
.visit__in { display: grid; gap: var(--s4); }
.visit__caveat { margin-top: var(--s2); max-width: var(--measure-s); color: var(--pewter); }
.ledger { width: 100%; border-collapse: collapse; border-top: var(--line) solid var(--loden); }
.ledger th, .ledger td { padding-block: var(--s2); text-align: left; vertical-align: baseline; }
.ledger tr + tr th, .ledger tr + tr td { border-top: 1px solid var(--rule); }
.ledger th { width: 32%; padding-right: var(--s2); font-weight: 600; color: var(--pewter); }
.ledger td { line-height: var(--lh-mid); }
.ledger__hours { font-weight: 700; }
.ledger__addr { font-style: normal; margin-bottom: var(--s2); }
.ledger__addr > span { display: block; }
.btn-line--ink { color: var(--loden); }
.btn-line--ink:hover { background: var(--loden); color: var(--flannel); }
.ledger__tel { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.ledger__tel:hover { color: var(--loden-deep); }

/* --------------------------------------------------------------------- close */
.close { background: var(--loden); color: var(--flannel); padding-block: var(--s6); }
.close__in { display: grid; gap: var(--s3); }
.close__h { font-size: var(--t2); line-height: var(--lh-tight); font-weight: 700; }
.close__tel {
  display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--s1);
  color: var(--flannel); font-size: var(--t3); font-weight: 700; letter-spacing: var(--track-display); font-variant-numeric: lining-nums tabular-nums;
}
.close__tel:hover { color: var(--lichen); }
.close__note { max-width: var(--measure-s); color: var(--lichen); font-size: var(--t1); line-height: var(--lh-mid); }

/* -------------------------------------------------------------------- footer */
.foot { background: var(--charcoal); color: var(--flannel); padding-block: var(--s5); }
.foot__in { display: grid; gap: var(--s2); }
.foot__name { display: flex; align-items: center; gap: var(--s1); font-size: var(--t1); font-weight: 700; }
.foot .mark { fill: var(--lichen); }
.foot__addr { font-style: normal; }
.foot__addr > span { display: block; }
.foot__tels { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--flannel); }
.foot a:hover { color: var(--lichen); }
.notch--foot { margin-top: var(--s3); }
.foot__disc { max-width: var(--measure); color: var(--lichen); font-size: var(--t-1); }

/* ------------------------------------------------------------- phones only */
@media (max-width: 639px) {
  /* the header keeps "Call"; the number stays in its accessible name and is on screen in the hero */
  .call--head .call__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ------------------------------------------------------------------- tablet */
@media (min-width: 640px) {
  .brand { font-size: var(--t1); }
  .piece__acts { display: flex; flex-wrap: wrap; }
  .cats__list { grid-template-columns: 1fr 1fr 1.35fr; gap: 0; }
  .cat { padding-right: var(--s3); }
  .ledger td { font-size: var(--t1); }
  .foot__in { grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); align-items: start; }
  .foot__name, .notch--foot, .foot__disc { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ desktop */
@media (min-width: 960px) {
  .head__in { gap: var(--s4); }
  .head__nav { display: flex; gap: var(--s3); }
  .head__nav a {
    display: inline-flex; align-items: center; min-height: var(--tap);
    color: var(--charcoal); font-weight: 600; text-decoration: none;
  }
  .head__nav a:hover { color: var(--loden); text-decoration: underline; }

  .hero { padding-top: var(--s5); }
  .hero__in { grid-template-columns: 1.45fr 1fr; gap: var(--s5); align-items: stretch; }
  .piece { padding: var(--s5) var(--s4) var(--s4); }

  .about__in { grid-template-columns: 7fr 5fr; row-gap: var(--s4); }
  .about__line { grid-column: 1 / -1; }
  .about__note { grid-column: 2; font-size: var(--t1); line-height: var(--lh-mid); }

  .visit__in { grid-template-columns: 1fr 1.7fr; gap: var(--s5); align-items: start; }

  .close__in { grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: end; }

  .foot__in { grid-template-columns: auto auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .notch--draw { animation: none; }
  .call, .btn-line { transition: none; }
}