/* TrueLine Tailoring: Plum & Rose. See TRUELINE-BRAND.md for the rules behind these tokens. */

:root {
  --paper: #fbf6f4;
  --ink: #4a1942;
  --accent: #c27587;
  --accent-strong: #9c5d6c;
  --tint: #edd1d7;
  --deep: #2e0f29;

  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 104px;

  --r-small: 4px;
  --r-large: 8px;

  --measure: 62ch;
  --page: 1120px;
  --gutter: 16px;
  --rule: 1px solid var(--tint);

  --header-h: 76px;  /* height of the sticky header */
  --svh: 1vh;        /* one percent of the screen height */
}

@media (min-width: 720px) {
  :root { --gutter: 40px; --header-h: 85px; }
}
/* Phones change their screen height as the address bar slides away. svh is the smaller,
   stable height, so the home screen is sized against it where the browser knows the unit. */
@supports (height: 1svh) {
  :root { --svh: 1svh; }
}

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

/* The hidden attribute must win over any display value set below. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s4); /* keeps headings clear of the sticky header after a menu jump */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--r-small);
}

p { margin: 0 0 var(--s2); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Type scale */
/* Headings use the logo's own face: Montserrat Light. */
.display-xl, .display-l, h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.display-xl { font-size: 34px; line-height: 42px; }
.display-l  { font-size: 26px; line-height: 34px; }
@media (min-width: 480px) {
  .display-xl { font-size: 44px; line-height: 52px; }
}
@media (min-width: 720px) {
  .display-xl { font-size: 56px; line-height: 64px; }
  .display-l  { font-size: 34px; line-height: 42px; }
}

.lead {
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  letter-spacing: 0;
}
@media (min-width: 720px) {
  .lead { font-size: 20px; line-height: 32px; }
}

.note {
  font-size: 14px;
  line-height: 22px;
  color: var(--accent-strong);
}

/* The skip link targets the top of the page content; this keeps the page from scrolling
   when the visitor is already at the top. */
#main { scroll-margin-top: 104px; }

/* Skip link */
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  background: var(--paper);
  color: var(--ink);
  padding: var(--s1) var(--s2);
  border: var(--rule);
  border-radius: var(--r-small);
  z-index: 10;
}
.skip:focus { top: var(--s2); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) var(--gutter);
}
.brand img { width: 160px; height: auto; }
@media (min-width: 720px) { .brand img { width: 192px; } }

/* While the large animated logo is on screen, the header keeps its small logo back.
   It fades in once the visitor scrolls past. Without JavaScript it is always shown. */
.js .brand {
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.js.past-stage .brand,
.js.no-stage .brand {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms ease;
}

.site-nav { position: relative; }

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s3);
  align-items: center;
}
.menu a {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-strong);
  text-decoration: none;
  padding: var(--s1) 0;
  border-bottom: 1px solid transparent;
}
.menu a:hover { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s1);
  background: none;
  border: 0;
  padding: var(--s1) 0;
  color: var(--accent-strong);
  font: inherit;
  cursor: pointer;
}
.nav-toggle-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.nav-toggle-icon {
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.nav-toggle-icon::before, .nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 160ms ease;
}
.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after  { transform: translateY(-6px) rotate(-45deg); }

/* Small screens: the links fold into a panel behind the Menu button. The folded menu needs
   the script, so it only applies when the script is running (.js without .no-app).
   Otherwise the links stay visible and wrap under the logo. */
@media (max-width: 899px) {
  .site-header { flex-wrap: wrap; }
  .menu { flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s3); }
  .js:not(.no-app) .site-header { flex-wrap: nowrap; }
  .js:not(.no-app) .nav-toggle { display: inline-flex; }
  .js:not(.no-app) .menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + var(--s3));
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    min-width: 240px;
    background: var(--paper);
    border: var(--rule);
    border-radius: var(--r-large);
    padding: var(--s1) var(--s3);
  }
  .js:not(.no-app) .menu.is-open { display: flex; }
  .js:not(.no-app) .menu li { width: 100%; }
  .js:not(.no-app) .menu li + li { border-top: var(--rule); }
  .js:not(.no-app) .menu a { display: block; padding: var(--s2) 0; border-bottom: 0; }
  .js:not(.no-app) .menu a:hover { border-bottom: 0; }
}
/* The header is taller from 720px, so the panel hangs lower to clear its rule. */
@media (min-width: 720px) and (max-width: 899px) {
  .js:not(.no-app) .menu { top: calc(100% + var(--s4)); }
}

/* Layout helpers */
.section {
  padding: var(--s5) var(--gutter);
  max-width: var(--page);
  margin: 0 auto;
}
@media (min-width: 720px) {
  .section { padding: var(--s6) var(--gutter); }
}
.section-head { margin-bottom: var(--s4); }
.section-head .lead { margin-top: var(--s2); }

.two-col {
  display: grid;
  gap: var(--s2) var(--s4);
}
.two-col p { margin: 0; }
@media (min-width: 860px) {
  .two-col { grid-template-columns: 1fr 1fr; }
  .two-col p { max-width: none; }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Buttons */
.button {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  text-decoration: none;
  text-indent: 0.4em; /* balances the trailing letter-space */
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-small);
  padding: 14px 22px 14px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.button:hover { background: var(--deep); border-color: var(--deep); color: var(--paper); }
.button-quiet {
  background: transparent;
  color: var(--accent-strong);
  border-color: var(--accent);
}
.button-quiet:hover { background: var(--tint); color: var(--ink); border-color: var(--accent); }
.button:disabled { opacity: 0.5; cursor: default; }

/* Home: the logo and the opening lines fill exactly one screen, centred in it.
   "What we do" starts below, on scroll or from the menu. Sizes follow the screen height
   so the whole home screen fits on short laptops and phones too. */
.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100 * var(--svh) - var(--header-h));
}

/* Stage: the animated main logo opens the home page. The file animates itself and ends on
   the official artwork. The padding keeps free space of at least the height of the logo's
   capital T above it (header rule) and below it (hero text) at every screen size. */
.stage {
  display: grid;
  place-items: center;
  padding: var(--s4) var(--gutter) var(--s3);
}
.stage-logo {
  width: clamp(200px, min(max(40vw, 240px), calc(42 * var(--svh))), 440px);
  height: auto;
  aspect-ratio: 768 / 484;
}
/* Without JavaScript the empty placeholder is dropped and the still logo is shown. */
html:not(.js) .stage-logo[src^="data:"] { display: none; }
/* If no logo file could be loaded at all, the stage steps aside for the header logo. */
.no-stage .stage { display: none; }
@media (min-width: 720px) {
  .stage { padding: clamp(40px, calc(6 * var(--svh)), 64px) var(--gutter) var(--s3); }
}

/* Hero: a thin vertical rule echoing the u-to-L stroke of the logo. */
.hero {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s3) var(--gutter) var(--s4);
  display: grid;
  gap: var(--s4);
}
@media (min-width: 720px) {
  .hero { padding: clamp(24px, calc(4 * var(--svh)), 64px) var(--gutter) clamp(40px, calc(7 * var(--svh)), 104px); }
}
.hero-inner {
  padding-left: var(--s3);
  border-left: 1px solid var(--accent);
  max-width: 820px;
}
@media (min-width: 720px) {
  .hero-inner { padding-left: var(--s4); }
}
.hero .lead { margin-top: var(--s3); max-width: var(--measure); }
.hero .lead + p { margin-top: var(--s2); }

/* Line art: a needle, its thread, and the running stitch it leaves. */
.hero-art { stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .thread { stroke: var(--accent); }
.hero-art .needle { stroke: var(--ink); }
.hero-art-tall { display: none; width: clamp(180px, calc(30 * var(--svh)), 300px); height: auto; }
.hero-art-wide { width: min(100%, 320px); height: auto; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .hero-art-tall { display: block; }
  .hero-art-wide { display: none; }
}
/* On short screens the stitch line under the text is dropped so the home screen still fits. */
@media (max-width: 959px) and (max-height: 759px) {
  .hero-art-wide { display: none; }
}

/* Services: hairline rows, not cards */
.service-list { margin: 0; }
.service {
  display: grid;
  gap: var(--s1) var(--s4);
  padding: var(--s3) 0;
  border-top: var(--rule);
}
.service:last-child { border-bottom: var(--rule); }
.service dt {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 300;
  font-size: 20px;
  line-height: 28px;
}
.service-icon {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.service dd { margin: 0; max-width: var(--measure); }
@media (min-width: 860px) {
  .service { grid-template-columns: 340px 1fr; align-items: start; }
  .service dt { font-size: 22px; line-height: 30px; }
  .service dd { padding-top: 7px; }
}

/* Tint band */
.band {
  max-width: none;
  background: var(--tint);
}
.band-inner {
  max-width: calc(var(--page) - 2 * var(--gutter));
  margin: 0 auto;
}
.band .two-col { margin-top: var(--s3); }
.band .note { margin-top: var(--s3); color: var(--ink); }

/* Deep section */
.deep {
  max-width: none;
  background: var(--deep);
  color: var(--paper);
}
.deep-inner {
  max-width: calc(var(--page) - 2 * var(--gutter));
  margin: 0 auto;
  display: grid;
  gap: var(--s4);
}
@media (min-width: 860px) {
  .deep-inner { grid-template-columns: 300px 1fr; align-items: start; }
}
.deep-logo { width: 220px; }
.deep .display-l, .deep .lead { color: var(--paper); }
.deep a { color: var(--paper); text-decoration-color: var(--accent); }
.deep a:hover { color: var(--paper); text-decoration-color: var(--paper); }
.deep .lead { margin-top: var(--s2); }

.contact {
  margin: var(--s4) 0 0;
  display: grid;
  gap: var(--s3);
}
@media (min-width: 600px) {
  .contact { grid-template-columns: 1fr 1fr; }
}
.contact dt {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--s1);
}
.deep .contact dt { color: var(--paper); }
.contact dd { margin: 0; }

/* Footer */
.site-footer {
  background: var(--deep);
  color: var(--paper);
  padding: 0 var(--gutter) var(--s4);
}
.footer-inner {
  max-width: calc(var(--page) - 2 * var(--gutter));
  margin: 0 auto;
  border-top: 1px solid var(--accent-strong);
  padding-top: var(--s3);
  display: grid;
  gap: var(--s3);
}
.footer-line {
  font-size: 14px;
  line-height: 22px;
  color: var(--paper);
}
.updates { display: grid; gap: var(--s2); justify-items: start; }
.updates p { font-size: 14px; line-height: 22px; color: var(--paper); }
.site-footer .button-quiet { color: var(--paper); border-color: var(--accent-strong); }
.site-footer .button-quiet:hover { background: var(--ink); border-color: var(--accent); color: var(--paper); }

/* Offline page */
.offline {
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding: var(--s4) var(--gutter);
  text-align: left;
}
.offline img { width: 192px; margin-bottom: var(--s4); }