/* KAIGROUP: letterhead, subsidiary records, business card, report colophon.
   Source Serif 4 and IBM Plex licence notices remain in /fonts/. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/source-serif-500.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/source-serif-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-400.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --ink: #171717;
  --paper: #f7f5ef;
  --letter-paper: #f5f3ee;
  --index-paper: #f5f2e9;
  --business-paper: #fcfcfa;
  --secondary: #565651;
  --rule: #d7d3c8;
  --red: #cf352c;
  --blue: #2059d0;
  --yellow: #e6ba19;
  --purple: #8058ac;
  --green: #3b7957;
  --sans: 'IBM Plex Sans', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 32px; }
body { margin: 0; color: var(--ink); background: #fff; font: 400 1rem/1.5 var(--sans); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
::selection { background: var(--ink); color: var(--paper); }
/* Keep the skip link in document flow when focused, even with enlarged text. */
.skip { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: relative; display: block; width: fit-content; max-width: calc(100% - 40px); height: auto; margin: 20px; padding: 12px 16px; overflow: visible; clip-path: none; white-space: normal; background: var(--ink); color: #fff; }
.page { width: calc(100% - 40px); max-width: 680px; margin: 96px auto; }
/* Decorative grain lives behind HTML text. No overlay intercepts selection. */
.paper, .card-body, .number, .colophon {
  background-color: var(--stock, var(--paper));
  background-image: url('/paper-grain.svg');
  background-size: 256px 256px;
}
.paper, .card-body {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgb(77 67 44 / 12%), 0 2px 5px rgb(34 30 22 / 4%);
}
.paper > *, .card-body > * { min-width: 0; flex-shrink: 0; }
/* Keep body and contact text crisp; only display type gets a minute ink halo. */
h1, .identity h3 { text-shadow: 0 .01em .025em rgb(23 23 23 / 12%); }
::selection { text-shadow: none; }

/* Desktop proportions are minimum heights only. Content and gaps determine
   the actual height, including the full bottom padding on every paper. */
.letterhead {
  --stock: var(--letter-paper);
  min-height: 880px;
  padding: 56px 48px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  /* Fine photographic grain at a constant scale, with an even light tint.
     The material repeats as the sheet grows; it never stretches the text. */
  background-image: linear-gradient(rgb(255 255 255 / 18%), rgb(255 255 255 / 18%)), url('/letterhead-paper.webp');
  background-size: auto, 512px 512px;
  background-repeat: no-repeat, repeat;
}
.letterhead-masthead { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 24px; }
.letterhead-masthead > * { min-width: 0; max-width: 100%; }
.brand { display: flex; align-items: flex-start; gap: 14px; }
.brand-copy { min-width: 0; }
.masthead-flag { width: 40px; height: auto; flex: 0 0 40px; margin-top: 7px; }
h1 { font: 700 2.625rem/1.15 var(--serif); letter-spacing: -.018em; overflow-wrap: anywhere; }
.trademark { display: inline-block; font: 500 .3em/1 var(--sans); vertical-align: top; margin: .45em 0 0 .35em; letter-spacing: 0; }
.positioning { color: var(--secondary); font: 500 .9375rem/1.6 var(--serif); letter-spacing: .01em; }
.location { flex: 0 1 112px; border-left: 2px solid #9b8874; padding: 12px 0 12px 20px; color: var(--secondary); font-size: .875rem; line-height: 1.6; }
.letter-content { display: flex; flex-direction: column; flex: 1 0 auto; gap: 64px; margin-left: 104px; }
.letter-content > * { min-width: 0; flex-shrink: 0; }
.introduction { font: 500 1.5rem/1.541667 var(--serif); overflow-wrap: anywhere; }
.letterhead nav { display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: auto; }
.letterhead nav a { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 44px; padding-block: 8px; }

/* Five fully exposed records; one native link contains each tab and body. */
.directory { margin-top: 160px; }
h2 { font-size: .875rem; font-weight: 500; line-height: 1.6; letter-spacing: .045em; }
.directory > h2 { margin-bottom: 48px; }
.register { padding: 0; margin: 0; list-style: none; }
.entry + .entry { margin-top: 64px; }
.sinclair { --department: var(--red); --tab-step: 0; --index-paper: #f8e9e1; }
.kaidotblue { --department: var(--blue); --tab-step: 1; --index-paper: #e8eef5; }
.sharp { --department: var(--yellow); --tab-step: 2; --index-paper: #f8f0cf; }
.kable { --department: var(--purple); --tab-step: 3; --index-paper: #efebf6; }
.earthos { --department: var(--green); --tab-step: 4; --index-paper: #e9f0e5; }
.record { --tab-width: 72px; --tab-inset: 40px; display: block; text-decoration: none; }
/* Divide the usable travel into four equal steps, leaving matching edge insets.
   Subtract the complete border-box tab width before distributing positions. */
.number { position: relative; z-index: 1; display: block; width: var(--tab-width); min-height: 28px; margin: 0 0 -1px calc(var(--tab-inset) + (100% - var(--tab-width) - 2 * var(--tab-inset)) * var(--tab-step) / 4); padding: 1px 8px 2px; border: 1px solid var(--rule); border-top: 4px solid var(--department); border-bottom: 0; text-align: center; color: var(--ink); font: 400 .875rem/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.card-body, .number { --stock: var(--index-paper); }
/* Ruled rows follow the live content, so no rule crosses text when it wraps. */
.card-body { display: flex; flex-direction: column; min-height: 312px; gap: 24px; padding: 36px 40px 40px; border-radius: 8px; }
.identity h3 { padding-bottom: 14px; border-bottom: 1px solid rgb(78 85 81 / 20%); font-size: 1.5rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.role { display: block; padding-block: 14px; border-bottom: 1px solid rgb(78 85 81 / 20%); font-size: 1.125rem; line-height: 1.5; }
.destination { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-bottom: 12px; border-bottom: 1px solid rgb(78 85 81 / 20%); font-size: 1rem; line-height: 1.5; }
.destination > span { min-width: 0; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.destination svg { width: .75rem; height: .75rem; flex: 0 0 .75rem; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* A sparse, plain-stock calling card: name above details on a shared axis;
   the small company identity sits at the lower left. All text stays in flow. */
.contact-section { max-width: 600px; margin: 160px auto 0; }
.contact-section > h2 { margin-bottom: 32px; }
.business-card { --stock: var(--business-paper); min-height: 360px; padding: 112px 32px 32px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: 0 1px 2px rgb(34 30 22 / 5%); }
.contact-brand { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: 8px; padding-block: 10px; }
.contact-brand img { display: block; width: 16px; height: auto; flex: 0 0 16px; }
.contact-brand p { min-width: 0; font: 400 1rem/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-wrap: anywhere; }
.contact-brand .trademark { font-size: .45em; }
.contact-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.25fr); align-items: start; gap: 48px 24px; font-style: normal; }
/* Neither column has an intrinsic width floor; links can wrap with enlarged type. */
.contact-block > *, .contact-links > * { min-width: 0; overflow-wrap: anywhere; }
.contact-links { grid-column: 2; grid-row: 2; width: auto; max-width: 100%; }
.proprietor { grid-column: 2; grid-row: 1; font-size: 1rem; font-weight: 500; line-height: 1.5; }
.proprietor > span { display: block; margin-top: 6px; color: var(--secondary); font-size: .875rem; font-weight: 400; line-height: 1.571429; }
.contact-links a { display: block; max-width: 100%; min-height: 44px; padding-block: 10px; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.contact-location { margin-top: 4px; color: var(--secondary); font-size: .875rem; line-height: 1.571429; }
.colophon { margin-top: 160px; border-top: 1px solid var(--rule); padding: 24px; color: var(--secondary); font-size: .875rem; line-height: 1.571429; }
.colophon p + p { margin-top: 16px; }

@media (hover: hover) {
  .letterhead nav a:hover, .contact-links a:hover { text-decoration-thickness: 2px; }
  .record:hover .destination > span { text-decoration-thickness: 2px; }
  .record:hover .card-body { border-color: var(--secondary); }
}
a:active { text-decoration-thickness: 2px; }
.record:active .card-body { border-color: var(--ink); }

/* Desktop audit refinement: share the introduction's inset, keep the location
   at the right edge, and let navigation follow the existing 64px content gap.
   Minimum heights remain expandable; mobile and print keep their own flow. */
@media screen and (min-width: 761px) {
  .letterhead-masthead { margin-left: 104px; justify-content: flex-start; }
  .letterhead-masthead .location { margin-left: auto; }
  .letterhead nav { margin-top: 0; }
  .card-body { min-height: 280px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 24px; }
  .page { margin-block: 40px 56px; }
  .letterhead, .card-body, .business-card { min-height: 0; }
  .letterhead { padding: 24px; gap: 32px; }
  .letterhead-masthead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .brand { gap: 12px; }
  .masthead-flag { width: 28px; margin-top: 5px; flex: 0 0 28px; }
  h1 { font-size: 2.125rem; }
  .location { flex: none; padding-block: 0; padding-left: 14px; }
  .letter-content { margin-left: 0; gap: 32px; }
  .introduction { font-size: 1.25rem; line-height: 1.55; }
  .letterhead nav { column-gap: 32px; }
  .directory { margin-top: 96px; }
  .directory > h2 { margin-bottom: 32px; }
  .record { --tab-inset: 28px; }
  .card-body { padding: 24px; gap: 24px; }
  .identity h3 { font-size: 1.5rem; }
  .role { font-size: 1.0625rem; }
  .contact-section { margin-top: 96px; }
  .business-card { padding: 48px 24px 24px; }
  .contact-block { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact-block > * { grid-column: 1; grid-row: auto; }
  .contact-brand { padding-block: 0; }
  .colophon { margin-top: 64px; }
}

@media (max-width: 360px) {
  h1 { font-size: 2rem; }
  .introduction { font-size: 1.125rem; line-height: 1.555556; }
  .record { --tab-inset: 24px; }
}

/* The default experience has no animation or scripted navigation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .paper, .card-body, .number, .colophon { background: Canvas; box-shadow: none; }
  h1, .identity h3 { text-shadow: none; }
  .paper, .card-body, .number { border-color: CanvasText; }
  .number { border-top-color: CanvasText; }
  .location, .identity h3, .role, .destination { border-color: CanvasText; }
  a:focus-visible { outline-color: Highlight; }
}

@media print {
  .page { width: 100%; margin: 0; }
  .skip { display: none; }
  .letterhead { padding: 32px; gap: 32px; }
  .letter-content { margin-left: 0; gap: 32px; }
  .letterhead nav { margin-top: 0; }
  .directory, .contact-section, .colophon { margin-top: 48px; }
  .entry, .business-card { break-inside: avoid; }
  .entry + .entry { margin-top: 32px; }
  .paper, .card-body, .number, .colophon { background: white; box-shadow: none; }
  .paper, .card-body { min-height: 0; }
  h1, .identity h3 { text-shadow: none; }
  .number { print-color-adjust: exact; }
}