/* ==========================================================================
   TACILLON — landing page
   Single stylesheet. No framework, no build step.

   This page deliberately shares a design system with sequonyx.com: the same
   palette tokens, the same three typefaces, the same alternating paper /
   grey / navy band rhythm, the same brass accent. The two sites should read
   as one company. If you change a colour or a typeface here, change it there
   too — see C:\LT\sequonyx-site\public\index.html.

   Where Tacillon differs from Sequonyx, on purpose:
     · Section eyebrows are numbers (01–06), not words. The page reads as a
       technical document, which suits the operational audience.
     · There is a severity ramp — steel / brass / rust — used only by the
       three step tiers. Sequonyx has nothing that needs it.
     · The section title rail sticks while long sections scroll past it.

   Small mono labels (.eyebrow, .gate-n, .tier-k, .video-meta) are sized at or
   above 0.80rem and weighted 600–700 deliberately: the audience includes older
   readers and shop-floor lighting. Do not shrink them back for aesthetics.

   The palette does not follow the viewer's light/dark setting, on purpose.
   Every colour is painted explicitly so the page looks identical everywhere.
   ========================================================================== */

:root {
  /* Ground — identical to Sequonyx */
  --paper:      #F6F7F8;   /* off-white, faint cool bias        */
  --paper-2:    #E7EBEF;   /* light cool grey band              */
  --ink:        #0E1620;   /* deep navy, near-black band        */
  --ink-2:      #17222E;   /* slate panel sitting on --ink      */

  /* Type */
  --text:       #16212C;   /* body on light                     */
  --steel:      #566A7C;   /* secondary on light                */
  --text-dk:    #DEE5EC;   /* body on dark                      */
  --steel-dk:   #94A6B6;   /* secondary on dark                 */

  /* Rules */
  --line:       #D3DAE1;
  --line-dk:    #27343F;

  /* Warm accent — brass against cold steel */
  --brass:      #8F6229;   /* accent text on light              */
  --brass-line: #B0793F;   /* rules, marks                      */
  --brass-dk:   #D2A461;   /* accent on dark                    */

  /* Severity ramp — used ONLY by the three step tiers, nowhere else.
     Standard is deliberately colourless: most steps are not special. */
  --sev-std:    #8FA1B1;
  --sev-crit:   #B0793F;
  --sev-safe:   #A93B18;
  --sev-safe-dk:#E0724A;

  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:  'Jura', 'Segoe UI', sans-serif;

  --gut:   clamp(1.25rem, 4vw, 2.75rem);
  --wide:  74rem;
  --prose: 38rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--brass-line);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Bands and containers
   -------------------------------------------------------------------------- */

.band { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.band--paper  { background: var(--paper);   color: var(--text); }
.band--grey   { background: var(--paper-2); color: var(--text); }
.band--ink    { background: var(--ink);     color: var(--text-dk); }

.band--ink h2, .band--ink h3, .band--ink strong, .band--ink b { color: #F2F6F9; }
.band--ink a { color: var(--brass-dk); }

.wrap  { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: 1.15em; }

/* Section head: number and title on a left rail, the argument on the right. */
.split {
  display: grid;
  gap: clamp(1.6rem, 4vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  /* Long sections scroll past a title that stays put. */
  .split__head { position: sticky; top: clamp(2rem, 6vh, 4rem); }
}
.split .prose { max-width: 42rem; }

/* A split whose only job is to hold prose in the right-hand column keeps an
   empty rail on wide screens — and collapses it entirely on narrow ones. */
.split__head:empty { display: none; }
@media (min-width: 64rem) { .split__head:empty { display: block; } }

/* Full-width blocks that break out below a split head. */
.breakout { margin-top: clamp(2.5rem, 5vw, 3.75rem); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
h3, .prose h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  letter-spacing: -0.018em;
  margin-top: clamp(2.75rem, 5vw, 3.5rem);
  margin-bottom: 1.25rem;
}
.prose h3 + * { margin-top: 0; }
.prose h3:first-child { margin-top: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.3rem;
  display: flex; align-items: center; gap: .85rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
  max-width: 8rem;
}
.band--ink .eyebrow { color: var(--brass-dk); }
.band--ink .eyebrow::after { background: var(--line-dk); }

/* The three-tread tick that opens every eyebrow — the mark, shrunk to a
   punctuation glyph. Ties the page back to the logo and to Sequonyx. */
.eyebrow::before {
  content: ""; width: 15px; height: 9px; flex: none;
  background:
    linear-gradient(var(--brass-line) 0 0) 0 100%/5px 3px no-repeat,
    linear-gradient(var(--brass-line) 0 0) 5px 50%/5px 3px no-repeat,
    linear-gradient(var(--brass-line) 0 0) 10px 0/5px 3px no-repeat;
}
.band--ink .eyebrow::before {
  background:
    linear-gradient(var(--brass-dk) 0 0) 0 100%/5px 3px no-repeat,
    linear-gradient(var(--brass-dk) 0 0) 5px 50%/5px 3px no-repeat,
    linear-gradient(var(--brass-dk) 0 0) 10px 0/5px 3px no-repeat;
}

.lede {
  font-size: clamp(1.15rem, 2.2vw, 1.32rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--text);
}
.band--ink .lede { color: var(--text-dk); }

p { margin: 0; }
strong { font-weight: 600; color: #000; }
.band--ink strong { color: #FFF; }

.dim { color: var(--steel); }
.band--ink .dim { color: var(--steel-dk); }

/* Footnote references ------------------------------------------------------ */

.ref { text-decoration: none; color: var(--brass); }
.ref sup {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .68em;
  padding-left: 2px;
}
.ref:hover sup, .ref:focus sup { text-decoration: underline; }
.band--ink .ref { color: var(--brass-dk); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: var(--ink);
  color: var(--text-dk);
  position: relative;
  overflow: hidden;
}

/* Brushed-steel wash: fine vertical striations, the way a machined face
   catches light. Cheap to render, no image required. Same treatment as the
   Sequonyx hero, lit from the opposite side. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.020) 0 1px,
      rgba(255,255,255,0)   1px 3px),
    radial-gradient(120% 90% at 22% 6%, #22303E 0%, #0E1620 62%);
  pointer-events: none;
}

/* The masthead stands alone here. It used to share the hero with a large
   gated-staircase drawing on the right, but that drawing was a scaled-up
   restatement of the mark sitting directly above the wordmark, and the two
   competed. The padding below carries the height the drawing used to give. */
.hero__inner {
  position: relative;
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(3.5rem, 10vw, 7rem) var(--gut) clamp(3.5rem, 9vw, 6.5rem);
}

/* Wordmark ---------------------------------------------------------------- */

.masthead { display: block; }

.masthead__mark {
  /* 25% of the rendered width of the TACILLON wordmark below it.
     The multiplier converts the wordmark's font-size (same clamp as
     .wordmark) into a quarter of its measured text width, so the ratio
     holds at every viewport size. */
  width: calc(clamp(2rem, 7.2vw, 4rem) * 1.65);
  height: auto;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* The rule above the wordmark, carried over from the original page and the
   social card — now brass rather than cyan. */
.wordmark-rule {
  width: 4.5rem; height: 3px;
  background: var(--brass-dk);
  margin: 0 0 1.4rem;
}

.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(2rem, 7.2vw, 4rem);
  line-height: 1.05;
  /* balances the trailing letter-space so the mark sits optically flush left */
  padding-right: 0.3em;
  margin: 0;
  color: var(--brass-dk);
}

.tagline {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: clamp(.85rem, 1.7vw, 1rem);
  line-height: 1.7;
  color: var(--steel-dk);
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  padding-right: 0.18em;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Video — structure and behaviour deliberately unchanged. Only the frame,
   the play button and the meta line were restyled to the shared palette.
   -------------------------------------------------------------------------- */

.video-section { padding-bottom: clamp(2.25rem, 5vw, 3rem) !important; }

.video-frame { max-width: 58rem; margin-inline: auto; }

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-2);
  border: 1px solid var(--line-dk);
  overflow: hidden;
}

.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.facade {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}

.facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
}
.play svg { display: block; width: 100%; height: auto; }
.play-bg  { fill: #0b0f14; fill-opacity: 0.72; }
.play-tri { fill: #ffffff; }

.facade:hover .play-bg,
.facade:focus-visible .play-bg { fill: var(--brass-dk); fill-opacity: 1; }
.facade:hover .play-tri,
.facade:focus-visible .play-tri { fill: var(--ink); }

.video-meta {
  font-family: var(--mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--steel-dk);
  margin: 1.1rem 0 0;
  padding-right: 0.18em;
}
.video-meta-sep { padding: 0 0.55em; color: var(--brass-dk); }

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

/* Not a .band — it continues the navy band directly above it, so the video
   and its button, and section 05 and its button, each read as one unit. */
.cta-section {
  background: var(--ink);
  color: var(--text-dk);
  text-align: center;
  padding-block: 0 clamp(3.5rem, 8vw, 6rem);
}

.cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1.05rem 2.5rem;
  background: var(--brass-dk);
  border: 1px solid var(--brass-dk);
  color: var(--ink);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.cta:hover, .cta:focus-visible { background: #E4BC7E; border-color: #E4BC7E; }

.cta-label {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 1.05rem;
  line-height: 1.5;
  padding-right: 0.2em;
}

.cta-url {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  padding-right: 0.14em;
  opacity: .78;
}

/* --------------------------------------------------------------------------
   Pull-quote band
   -------------------------------------------------------------------------- */

.quote { text-align: center; max-width: 48rem; margin-inline: auto; }
.quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: #F2F6F9;
  text-wrap: balance;
}
.quote blockquote p { margin: 0; }
.quote__mark {
  font-family: var(--mono);
  font-size: .82rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-dk);
  margin: 0 0 1.8rem;
}
.quote__after {
  max-width: 40rem; margin: clamp(2.5rem,5vw,3.5rem) auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-dk);
  color: var(--steel-dk);
  font-size: 1.02rem;
  text-align: left;
}
.quote__after strong { color: #F2F6F9; }

/* --------------------------------------------------------------------------
   Card grids — gates, tiers, properties.
   One hairline-divided slab, the way Sequonyx sets its pillars.
   -------------------------------------------------------------------------- */

.cards {
  list-style: none;
  display: grid; gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: 1fr;
  margin: 0; padding: 0;
}
.band--ink .cards { background: var(--line-dk); border-block-color: var(--line-dk); }

.cards > li {
  background: var(--paper);
  padding: 1.9rem 1.6rem 2.1rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.band--grey .cards > li { background: var(--paper); }
.band--ink  .cards > li { background: var(--ink); }

/* Child selectors only — a <strong> nested inside a card's body copy must not
   pick up the card-title treatment. */
.cards > li > strong,
.cards > li > .tier-k {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--text);
}
.band--ink .cards > li > strong { color: #F2F6F9; }

.cards > li > span:not(.gate-n):not(.tier-k) {
  display: block;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--steel);
}
.band--ink .cards > li > span:not(.gate-n):not(.tier-k) { color: var(--steel-dk); }

/* Four gates */
@media (min-width: 44rem) { .gates { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .gates { grid-template-columns: repeat(4, 1fr); } }

.gate-n {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 0.2em;
  color: var(--brass);
  margin-bottom: .35rem;
}

/* Three step tiers — the only place the severity ramp appears. */
@media (min-width: 52rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier { border-top: 3px solid var(--sev-std); }
.tier-crit { border-top-color: var(--sev-crit); }
.tier-safe { border-top-color: var(--sev-safe); }

.tier-k {
  display: block;
  margin-bottom: .35rem;
}
.tier-k::after {
  content: "";
  display: block;
  width: 1.75rem; height: 2px;
  margin-top: .7rem;
  background: var(--sev-std);
}
.tier-crit .tier-k::after { background: var(--sev-crit); }
.tier-safe .tier-k::after { background: var(--sev-safe); }
/* "There is no next button until it is affirmed." — the one sentence on the
   page that carries the severity colour rather than the brand accent. */
.tier-safe > span strong { color: var(--sev-safe); }

/* Four properties of the record */
@media (min-width: 44rem) { .props { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Numbered rail — "what it asks of you", set the way Sequonyx sets its
   capsule-type list.
   -------------------------------------------------------------------------- */

.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rail li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line-dk);
  font-size: 1rem;
  color: var(--steel-dk);
}
.rail li:last-child { border-bottom: 1px solid var(--line-dk); }
.rail b { color: #F2F6F9; font-weight: 600; }
.rail .rail-n {
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  letter-spacing: .1em;
  color: var(--brass-dk);
  padding-top: .22rem;
}

/* --------------------------------------------------------------------------
   The plain-speaking caveat — a navy inset in the middle of a paper band.
   -------------------------------------------------------------------------- */

.plainly {
  background: var(--ink);
  color: var(--text-dk);
  border-left: 3px solid var(--brass-dk);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.1rem);
  margin-top: clamp(2rem, 4vw, 2.75rem) !important;
  font-size: 1rem;
  line-height: 1.7;
}
.plainly strong { color: var(--brass-dk); }

/* --------------------------------------------------------------------------
   Chart
   -------------------------------------------------------------------------- */

.chart {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--line);
  max-width: 42rem;
}
.bar-row + .bar-row { margin-top: 1.4rem; }

.bar-lab {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--steel);
  margin: 0 0 0.45rem;
  padding-right: 0.2em;
}

.bar-line { display: flex; align-items: center; gap: 0.8rem; }
.bar-track { flex: 1; display: block; min-width: 0; }
.bar-fill { display: block; height: 15px; }

/* The chart card is --paper even on the grey band, so both bars are measured
   against #F6F7F8: steel 4.9:1, brass-line 3.3:1 — past the 3:1 that WCAG
   1.4.11 asks of a graphic carrying information. Warm against cool separates
   them for readers who cannot rely on hue. The value labels are text, so they
   use the darker --brass and clear 4.5:1. */
.bar-old { background: var(--steel); }
.bar-new { background: var(--brass-line); }

.bar-val {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--steel);
  flex: none;
  min-width: 3.6em;
}
.bar-val-new { color: var(--brass); }

figcaption {
  font-family: var(--serif);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--steel);
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Sources
   -------------------------------------------------------------------------- */

.sources ol {
  margin: 0;
  padding-left: 1.5rem;
  color: var(--steel);
  font-size: .95rem;
  line-height: 1.65;
  max-width: 46rem;
}
.sources li { margin-bottom: 1rem; }
.sources li::marker { font-family: var(--mono); font-weight: 700; color: var(--brass); }
.sources cite { font-style: italic; }
.sources a { color: var(--brass); }
.backref { text-decoration: none; padding-left: 0.3rem; color: var(--brass); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  background: var(--ink);
  color: var(--steel-dk);
  padding-block: clamp(3rem,6vw,4.5rem) 0;
  border-top: 1px solid var(--line-dk);
}

.foot__grid {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem,5vw,3.5rem);
}
@media (min-width: 46rem) { .foot__grid { grid-template-columns: 1.5fr 1fr; } }

.foot__mast { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.foot__mast img { width: 28px; height: auto; flex: none; }
.foot-mark {
  font-family: var(--mono); font-weight: 500; font-size: .95rem;
  letter-spacing: .32em; text-transform: uppercase;
  color: #F2F6F9; margin: 0; padding-right: .32em;
}
.foot__blurb { margin: 0; font-size: .93rem; line-height: 1.6; max-width: 34ch; }

.foot h2 {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-dk); margin: 0 0 1rem;
  line-height: 1.6;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot li { font-size: .93rem; }
.foot a { color: var(--steel-dk); text-decoration: none; border-bottom: 1px solid transparent; }
.foot a:hover { color: #F2F6F9; border-bottom-color: var(--brass-dk); }

.foot__bar {
  border-top: 1px solid var(--line-dk);
  padding-block: 1.5rem 2rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: .76rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: #6E8092;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--text-dk);
  padding: 0.75rem 1.1rem; z-index: 50;
  font-family: var(--mono);
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .split__head { position: static; }
}