/* Celvor Industrial — shared stylesheet v2.0 (2026-10-09). */
:root {
  --paper: #F4F4F1;
  --ink: #141614;
  --grey-700: #3A3E3A;
  --grey-500: #5E635E;
  --grey-300: #B8BCB8;
  --grey-100: #E2E4E0;
  --green: #4CBB17;
  --green-deep: #2F7A12;

  --theme: var(--green);

  --sans: "IBM Plex Sans", "Archivo", "Manrope", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

body[data-theme="green"]  { --theme: var(--green); }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 200;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--green-deep); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Links in running text (2026-10-10): a thin underline at rest, so they are not marked by colour alone (WCAG 1.4.1).
   Nav, footer, part cards, the table of contents and .cta buttons keep their own styles. */
main p a:not(.cta), main dd a, .prose li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.num, .mono, code {
  font-family: var(--mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: inherit;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 72rem);
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-500);
  margin: 0 0 1.25rem;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--theme);
  margin-right: 0.9em;
  vertical-align: 0.05em;
}

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--grey-100);
}
.site-header .r1 {
  position: relative;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 26px 0 0;
  transition: padding .45s ease;
}
.site-header .logo {
  display: block; height: 40px; max-width: 100%;
  color: var(--ink);
  --ring: var(--green);
  transition: height .45s ease;
}
.site-header .logo img, .site-header .logo svg { height: 100%; width: auto; max-width: 100%; display: block; }
.site-header .r2 { max-height: 12rem; overflow: hidden; transition: max-height .45s ease, opacity .3s ease; }
.site-header .r2 .site-nav { padding: 20px 0 14px; }
.site-header .nav-compact { display: none; position: absolute; right: 0; top: 22px; height: 40px; align-items: center; }
.site-header .nav-compact ul { flex-wrap: nowrap; }

.site-header.is-intro .logo { height: clamp(56px, 8.5vw, 96px); }
.site-header .nav-compact { transition: opacity .3s ease .45s; }
.site-header.is-intro .nav-compact { opacity: 0; visibility: hidden; transition: none; }


.site-nav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.site-nav a {
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover, .site-nav a:focus-visible { text-decoration: none; border-bottom-color: var(--grey-300); }

.site-nav a[aria-current="page"] { border-bottom-color: var(--theme); }

.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section + .section { border-top: 1px solid var(--grey-100); }

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  max-width: 22ch;
}
.hero .sub {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--grey-700);
  max-width: var(--measure);
}
.hero .sub .num { color: var(--ink); }

.photo { margin: 0; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
}
.photo figcaption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--grey-500);
}
.photo-placeholder {
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: var(--grey-100);
  display: grid;
  place-items: center;
  color: var(--grey-500);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--grey-100);
}
.facts > div {
  display: contents;
}
.facts dt, .facts dd {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--grey-100);
  margin: 0;
}
.facts dt {
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-500);
  padding-top: 1.35rem;
}
.facts dd { color: var(--grey-700); max-width: var(--measure); }
.facts dd .num { color: var(--ink); }

.panel {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
}
.panel .eyebrow { color: var(--theme); }
.panel .eyebrow::before { display: none; }
.panel p { color: var(--grey-300); }
.panel h2 { color: var(--paper); }
.panel .num { color: var(--paper); }
.panel a { color: var(--paper); }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2.5rem 2.5rem;
}
.steps li {
  counter-increment: step;
  color: var(--grey-700);
  border-top: 1px solid var(--ink);
  padding-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--grey-500);
  margin-bottom: 1.5rem;
}
.steps strong {
  display: block;
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.teaser h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); max-width: 28ch; }
.teaser h2 a { color: var(--ink); }
.teaser .byline { margin-top: 1rem; font-size: 0.85rem; color: var(--grey-500); }
/* Home teaser lists both articles (2026-10-11): newest first, split by the same thin grey rule as the sections; byline separator as on /articles/. */
.teaser-list { list-style: none; margin: 0; padding: 0; }
.teaser-list > li + li { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--grey-100); }
.teaser-list .byline { margin-bottom: 0; }
.teaser .byline .sep { margin-inline: 0.7em; color: var(--grey-300); }

.site-footer {
  margin-top: clamp(3rem, 8vw, 6rem);
  border-top: 2px solid var(--green);
  padding-block: 2rem 3rem;
  font-size: 0.8rem;
  color: var(--grey-500);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.site-footer li::after { content: "·"; margin-left: 1.5rem; color: var(--grey-300); }
.site-footer li:last-child::after { content: none; }
.site-footer a { color: var(--green-deep); }

@media (max-width: 40rem) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0.25rem; border-bottom: 0; }
  .facts dd { padding-top: 0; }
  .site-footer li::after { content: none; }
  .site-footer ul { flex-direction: column; gap: 0.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .r1, .site-header .logo, .site-header .r2, .site-header .nav-compact { transition: none; }
}

.mat-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.95rem;
}
.mat-table th, .mat-table td {
  text-align: left;
  vertical-align: top;
  padding: 1rem 1.5rem 1rem 0;
  border-bottom: 1px solid var(--grey-100);
}
.mat-table thead th {
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-500);
  border-bottom: 1px solid var(--ink);
  padding-top: 0;
}
.mat-table td { color: var(--grey-700); }
.mat-table td.num { color: var(--ink); white-space: nowrap; }
.mat-table td:last-child { padding-right: 0; }
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }   /* tabindex="0" lets keyboard users scroll a wide table */
/* Scroll hint (2026-10-10): on narrow screens a soft shadow at the right edge shows the table goes on.
   The shadow stays at the edge; a paper-coloured cover scrolls with the table and hides it once the last column is in view,
   or when the table fits. Browsers without background-attachment: local simply show no shadow. */
@media (max-width: 48rem) {
  .table-scroll {
    background:
      linear-gradient(to left, var(--paper) 50%, rgba(244, 244, 241, 0)) right / 2.5rem 100% no-repeat local,
      linear-gradient(to left, rgba(20, 22, 20, .12), rgba(20, 22, 20, 0)) right / 1.25rem 100% no-repeat scroll;
  }
}
.facts.also { margin-top: 2rem; border-top: 0; }

.figures {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem 3rem;
}
.figures li { border-top: 1px solid var(--grey-700); padding-top: 1rem; }
.figures .fig-label {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-300);
  margin-bottom: 0.9rem;
}
.figures .fig-value {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.1;
  color: var(--paper);
}
.figures .fig-note {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--grey-300);
}
.panel .disclaimer {
  margin: 2.5rem 0 0;
  font-size: 0.85rem;
  color: var(--grey-300);
  max-width: var(--measure);
}

.panel--paper {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.panel--grey {
  background: var(--grey-100);
  color: var(--ink);
}
.panel--grey .eyebrow { color: var(--grey-500); }
.panel--grey .eyebrow::before { display: inline-block; }
.panel--grey .figures li { border-top-color: var(--ink); }
.panel--grey .figures .fig-label { color: var(--grey-500); }
.panel--grey .figures .fig-value { color: var(--ink); }
.panel--grey .figures .fig-note,
.panel--grey .disclaimer,
.panel--grey p { color: var(--grey-700); }
.panel--paper .eyebrow { color: var(--grey-500); }
.panel--paper .eyebrow::before { display: inline-block; }
.panel--paper .figures li { border-top-color: var(--ink); }
.panel--paper .figures .fig-label { color: var(--grey-500); }
.panel--paper .figures .fig-value { color: var(--ink); }
.panel--paper .figures .fig-note,
.panel--paper .disclaimer,
.panel--paper p { color: var(--grey-700); }

.statement a { color: var(--green-deep); }
.statement {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 200;
  line-height: 1.4;
  max-width: 34ch;
  margin: 0;
  color: var(--ink);
}

.claims {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem 2.5rem;
  max-width: 44rem;
}
.claims li {
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
  color: var(--grey-700);
  font-size: 1rem;
}

.next { margin-top: 2.5rem; font-size: 0.95rem; color: var(--grey-700); }

@media (max-width: 40rem) {
  .mat-table th, .mat-table td { padding-right: 1rem; }
}
/* Capabilities materials table on phones (2026-10-10, .mat-table--stack only; article tables untouched): Notes drops under each row at full width, so a long note no longer leaves
   a tall blank gap beside the short cells (it used to sit off-screen in the scroll area). Desktop and tablet unchanged.
   2026-10-11: each row is now material name (full width) / US–UNS and JIS side by side, each with its column label above the value / notes (full width).
   The labels repeat the header text with empty alt text ("/ ''"), so screen readers that already hear the column header do not hear it twice;
   only the Material header stays visible above the table. Keep the label strings in step with the <th> text. */
@media (max-width: 40rem) {
  .mat-table--stack, .mat-table--stack thead, .mat-table--stack tbody { display: block; }
  .mat-table--stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .mat-table--stack th, .mat-table--stack td { padding: 0; }
  .mat-table--stack thead tr { border-bottom: 1px solid var(--ink); }
  .mat-table--stack thead th { padding-bottom: .75rem; border-bottom: 0; }
  .mat-table--stack thead th:not(:first-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mat-table--stack tbody td { border-bottom: 0; padding-top: .8rem; }
  .mat-table--stack tbody td:first-child { grid-column: 1 / -1; color: var(--ink); }
  .mat-table--stack td.num { white-space: normal; overflow-wrap: normal; word-break: normal; padding-top: .55rem; }
  .mat-table--stack td.num::before {
    display: block; margin-bottom: .2rem;
    font-family: var(--sans); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--grey-500);
  }
  .mat-table--stack td:nth-child(2)::before { content: "US / UNS"; content: "US / UNS" / ""; }
  .mat-table--stack td:nth-child(3)::before { content: "JIS"; content: "JIS" / ""; }
  .mat-table--stack tbody td:last-child { grid-column: 1 / -1; padding: .55rem 0 .8rem; border-bottom: 1px solid var(--grey-100); }
}

.act { margin: 1.75rem 0 0; }
.cta {
  display: inline-flex; align-items: center; gap: .6em;
  color: var(--ink); text-decoration: none;
  font-weight: 400; font-size: .95rem;
  border-bottom: 1px solid var(--ink); padding-bottom: .25rem;
  white-space: nowrap;
}
.cta .ar { display: inline-block; transition: transform .3s ease; }
.cta:hover, .cta:focus-visible { text-decoration: none; border-bottom-color: var(--green); }
.cta:hover .ar, .cta:focus-visible .ar { transform: translateX(6px); }

.hero--banner h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); max-width: none; line-height: 1.05; text-wrap: balance; }
.hero--banner .row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero--banner .row .sub { margin-top: 1.5rem; max-width: 34rem; }
.hero--banner .row .act { margin: 2rem 0 0; }
.hero--banner .row .act .cta { font-size: 1.2rem; font-weight: 500; }
.hero--banner .banner { position: relative; margin: 2.5rem 0 0; border-top: 1px solid var(--ink); padding-top: 1px; }
.hero--banner .banner img, .hero--banner .banner-placeholder {
  display: block; width: 100%; height: auto; aspect-ratio: 1800 / 1129; object-fit: cover;
}
.hero--banner .banner-placeholder {
  background: var(--grey-100); display: grid; place-items: center;
  color: var(--grey-500); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; padding: 1rem;
}
.hero--banner .banner .tag {
  position: absolute; right: 1rem; bottom: 1rem;
  background: var(--paper); color: var(--grey-700);
  font-size: .78rem; line-height: 1.4; padding: .55rem .85rem;
  box-shadow: 0 6px 18px rgba(20, 22, 20, .12);
  max-width: min(60%, 22rem);
}
@media (max-width: 40rem) {
  .hero--banner .banner img, .hero--banner .banner-placeholder { aspect-ratio: 16 / 10; }
  .hero--banner .banner .tag { right: .6rem; bottom: .6rem; font-size: .72rem; padding: .45rem .65rem; }
}

.parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 60rem) { .parts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .parts { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }
.statement + .parts { margin-top: 2rem; }
.parts--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 60rem) { .parts--4 { grid-template-columns: repeat(2, 1fr); } }
.parts a {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid var(--grey-100); border-radius: 14px;
  padding: 1.4rem 1.3rem 1.2rem; min-height: 11rem; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.parts a:hover, .parts a:focus-visible { transform: translateY(-4px); border-color: var(--grey-300); box-shadow: 0 10px 30px rgba(20, 22, 20, .08); text-decoration: none; }
.parts svg.ic { display: block; width: 34px; height: 34px; margin-bottom: 1.4rem; color: var(--ink); }
.parts svg.ic path, .parts svg.ic circle, .parts svg.ic rect { stroke-dasharray: 130; stroke-dashoffset: 0; }
.parts a:hover svg.ic path, .parts a:hover svg.ic circle, .parts a:hover svg.ic rect { animation: celvor-draw .9s ease; }
@keyframes celvor-draw { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }
.parts strong { display: block; font-weight: 400; font-size: 1rem; color: var(--ink); margin-bottom: .2rem; }
.parts small { display: block; font-size: .82rem; line-height: 1.4; color: var(--grey-500); max-width: 13.5rem; padding-right: 1.5rem; }   /* padding keeps the last line clear of the corner arrow; max-width = 12rem of text + the padding */
.parts .ar { position: absolute; right: 1.2rem; bottom: 1rem; font-size: 1.1rem; transition: transform .3s ease; }
.parts a:hover .ar { transform: translateX(5px); }
.parts a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--green); transition: width .45s ease; }
.parts a:hover::after, .parts a:focus-visible::after { width: 100%; }
.parts .pic { position: absolute; right: -8px; top: 50%; transform: translate(30px, -50%); opacity: 0; width: 44%; color: var(--grey-300); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
.parts a:hover .pic { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 40rem) {
  .parts a { padding: 1.1rem 1rem 1rem; min-height: 9.5rem; }
  .parts .pic { display: none; }
}

.steps--big { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; }
@media (max-width: 48rem) { .steps--big { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }
.steps--big li::before {
  content: "0" counter(step);
  font-family: var(--sans); font-weight: 200; font-size: 2.6rem; line-height: 1;
  letter-spacing: -.01em; color: var(--ink); margin-bottom: 1.25rem;
}

.who { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 50rem) { .who { grid-template-columns: 1fr; gap: 2rem; } }
.who--solo { grid-template-columns: 1fr; }
.who .statement { max-width: 30ch; }
.who .photo img { aspect-ratio: 1400 / 877; object-fit: cover; background: var(--grey-100); }

.teaser h2 { max-width: none; text-wrap: balance; }

.teaser h2 a, .article-list h2 a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--ink);
  transition: text-decoration-color .2s ease;
}
.teaser h2 a:hover, .teaser h2 a:focus-visible,
.article-list h2 a:hover, .article-list h2 a:focus-visible { color: var(--ink); text-decoration-color: var(--green); }
.facts + .photo.sample { margin-top: 2.5rem; }
.photo.sample img { border: 1px solid var(--grey-100); background: #fff; }
.photo.sample .zoom { display: block; cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .teaser h2 a, .article-list h2 a { transition: none; }
  .parts a, .parts .ar, .parts .pic, .parts a::after, .cta .ar { transition: none; }
  .parts a:hover svg.ic path, .parts a:hover svg.ic circle, .parts a:hover svg.ic rect { animation: none; }
}

@media (min-width: 56.25rem) {
  .site-header .r1 { padding: 22px 0 23px; }
  .site-header .r2 { display: none; }
  .site-header .nav-compact { display: flex; }
}
@media (max-width: 40rem) {
  .site-header .r1 { padding-top: 18px; }
  .site-header .r2 .site-nav { padding: 14px 0 10px; }
  .site-nav ul { flex-wrap: nowrap; gap: .75rem; }
  .site-nav a { font-size: .7rem; letter-spacing: .1em; }
}
@media (max-width: 22.5rem) {
  .site-nav ul { gap: .5rem; }
  .site-nav a { font-size: .64rem; letter-spacing: .05em; }
}

/* About page: wordmark construction drawing (2026-10-09). */
.photo.mark { margin-top: 2rem; }
.photo.mark img { max-width: 52rem; }
.photo.mark figcaption { max-width: var(--measure); }

/* Footer vernier scale (2026-10-09): main scale above the green footer line (::before), vernier below (::after); one line meets. Decorative only. */
.site-footer { view-timeline-name: --footer; }
.site-footer .wrap { position: relative; }
.site-footer .wrap::before,
.site-footer .wrap::after { content: ""; position: absolute; right: 0; top: -60px; width: 402px; height: 44px; pointer-events: none; background: no-repeat; }
.site-footer .wrap::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='402' height='44'><path d='M1 26V12M11 26V20M21 26V20M31 26V20M41 26V20M51 26V16M61 26V20M71 26V20M81 26V20M91 26V20M101 26V12M111 26V20M121 26V20M131 26V20M141 26V20M151 26V16M161 26V20M171 26V20M181 26V20M191 26V20M201 26V12M211 26V20M221 26V20M231 26V20M241 26V20M251 26V16M261 26V20M271 26V20M281 26V20M291 26V20M301 26V12M311 26V20M321 26V20M331 26V20M341 26V20M351 26V16M361 26V20M371 26V20M381 26V20M391 26V20M401 26V12' stroke='%23141614' stroke-opacity='.75'/></svg>"); }
.site-footer .wrap::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='402' height='44'><path d='M197 29v11M206 29v7M215 29v7M224 29v7M233 29v7M242 29v7M260 29v7M269 29v7M278 29v7M287 29v11' stroke='%235E635E' stroke-opacity='.75'/><path d='M251 29v7' stroke='%234CBB17' stroke-width='1.6'/></svg>"); }
@media (max-width: 640px) {
  .site-footer .wrap::before,
  .site-footer .wrap::after { width: 202px; }
  .site-footer .wrap::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='202' height='44'><path d='M1 26V12M11 26V20M21 26V20M31 26V20M41 26V20M51 26V16M61 26V20M71 26V20M81 26V20M91 26V20M101 26V12M111 26V20M121 26V20M131 26V20M141 26V20M151 26V16M161 26V20M171 26V20M181 26V20M191 26V20M201 26V12' stroke='%23141614' stroke-opacity='.75'/></svg>"); }
  .site-footer .wrap::after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='202' height='44'><path d='M67 29v11M76 29v7M85 29v7M94 29v7M103 29v7M112 29v7M130 29v7M139 29v7M148 29v7M157 29v11' stroke='%235E635E' stroke-opacity='.75'/><path d='M121 29v7' stroke='%234CBB17' stroke-width='1.6'/></svg>"); }
}

/* Scroll-triggered (2026-10-09): sections rise in as they enter the screen; the vernier slides into line as the footer arrives.
   CSS scroll-driven animations only; browsers without support, and visitors who ask for reduced motion, see everything in place. */
@keyframes celvor-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes celvor-vernier { from { transform: translateX(-54px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main > .section:not(.hero) > .wrap { animation: celvor-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .site-footer .wrap::after { animation: celvor-vernier linear both; animation-timeline: --footer; animation-range: entry 0% entry 100%; }
  }
}

/* Phone swipe between the home page and the menu pages (2026-10-11, assets/swipe.js). The content follows the finger; a small tag at the
   screen edge names the page it will turn to and turns dark once the swipe is far enough to turn. Existing colours only. */
html.is-swiping body { overflow-x: hidden; }
@supports (overflow: clip) { html.is-swiping body { overflow-x: clip; } }
.swipe-hint {
  position: fixed; top: 50%; z-index: 20; transform: translateY(-50%); pointer-events: none;
  padding: .55rem .85rem; background: var(--paper); border: 1px solid var(--grey-300);
  font-size: .7rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-500);
  opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.swipe-hint.is-next { right: 12px; }
.swipe-hint.is-prev { left: 12px; }
.swipe-hint.is-on { opacity: 1; }
.swipe-hint.is-ready { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@keyframes celvor-swipe-in-next { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes celvor-swipe-in-prev { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
html.swipe-in-next main, html.swipe-in-next .site-footer { animation: celvor-swipe-in-next .28s ease both; }
html.swipe-in-prev main, html.swipe-in-prev .site-footer { animation: celvor-swipe-in-prev .28s ease both; }
html.swipe-in-next body, html.swipe-in-prev body { overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { .swipe-hint { transition: none; } }
/* Table scroll bar (2026-10-11, table-bar.js): a slim bar under a wide table, shown only when the table scrolls sideways.
   The visible line is thin; the touch area is taller so it is easy to grab on a phone. Hidden when the table fits. */
.table-bar { position: relative; height: 22px; margin-top: .25rem; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.table-bar[hidden] { display: none; }
.table-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--grey-100); }
.table-bar-thumb { position: absolute; left: 0; top: 8px; height: 6px; background: var(--grey-500); border-radius: 3px; transition: background .15s ease; }
.table-bar:hover .table-bar-thumb, .table-bar.is-active .table-bar-thumb { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .table-bar-thumb { transition: none; } }