@font-face {
  font-family: "Brygada 1918";
  src: url("/assets/fonts/brygada-1918-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Brygada 1918";
  src: url("/assets/fonts/brygada-1918-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: Sarabun;
  src: url("/assets/fonts/sarabun-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: Sarabun;
  src: url("/assets/fonts/sarabun-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: Recursive;
  src: url("/assets/fonts/recursive-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --bg: #ede3c7;
  --ink: #1C1B17;
  --ink-mid: #4D483D;
  
  --ink-soft: #655F50;      
  --stock-raised: #FBF7EC;  
  --stock-sunk: #DCCFAC;    
  --rule: #7E7460;          
  --rule-faint: #B5A88B;    

  
  --forest: #18372E;
  --magenta: #99295F;
  --magenta-ink: #892555;
  --olive: #574A34;         
  --nav: #635948;           
  --bronze: #796131;
  
  --bronze-lit: #E0B45A;
  --crumb-strip: #ffe2b1;

  --font-display: "Brygada 1918", Georgia, "Times New Roman", serif;
  --font-text: Sarabun, "Segoe UI", system-ui, sans-serif;
  --font-data: Recursive, "DejaVu Sans Mono", Menlo, monospace;

  --step-1: 0.25rem;
  --step-2: 0.5rem;
  --step-3: 0.875rem;
  --step-4: 1.375rem;
  --step-5: 2.25rem;
  --step-6: 3.5rem;

  
  --measure: 39rem;
  --shell: 78rem;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

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

body {
  
  overflow-x: clip;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -0.005em;
}
h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  color: var(--forest);
  padding-block-end: var(--step-3);
  
  background-image:
    linear-gradient(var(--magenta), var(--magenta)),
    linear-gradient(var(--bronze), var(--bronze));
  background-repeat: no-repeat;
  background-size: 3.5rem 4px, 100% 2px;
  background-position: left calc(100% - 1px), left bottom;
}
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); color: var(--forest); }
h3 { color: var(--olive); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p, li, dd { hyphens: auto; overflow-wrap: break-word; }

a { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--magenta-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
}


.flow > * + * { margin-block-start: var(--step-4); }
.flow > * + h2 { margin-block-start: var(--step-6); }
.flow > * + h3 { margin-block-start: var(--step-5); }

.section { padding-block: var(--step-6); }
.section + .section { padding-block-start: 0; }

.measure { max-width: var(--measure); }


.with-rail {
  display: grid;
  gap: var(--step-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;   
}

.with-rail > * ,
body.has-rail .crumbs ol,
body.has-rail .measure,
body.has-rail .axis-head,
body.has-rail .table-scroll {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}


@media (min-width: 68rem) {
  .with-rail {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
    column-gap: var(--step-5);
  }
  .with-rail > :not(.rail) { grid-column: 2; max-width: none; margin-inline: 0; }
  .with-rail > .rail { grid-column: 3; max-width: none; margin-inline: 0; }
}


.page-head { position: relative; }

.atf {
  
  position: absolute;
  inset-block: -2.5rem -6rem;
  inset-inline-start: calc(50% - 50vw);
  inset-inline-end: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.atf img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  
  scale: -1 1;
  object-position: right 62%;
  opacity: 0.9;
}

.atf {
  
  
  -webkit-mask-image:
    linear-gradient(to left, transparent 0, transparent calc(var(--measure) + 3rem),
                             #000 calc(var(--measure) + 13rem)),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 96%);
  mask-image:
    linear-gradient(to left, transparent 0, transparent calc(var(--measure) + 3rem),
                             #000 calc(var(--measure) + 13rem)),
    linear-gradient(to bottom, transparent 0, #000 12%, #000 58%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.atf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(237,227,199,0) 70%, var(--bg));
}

@media (max-width: 67.999rem) {
  .atf {
    position: relative;
    inset: auto;
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    block-size: clamp(7rem, 26vw, 11rem);
    
    margin-block: calc(-1 * var(--step-6)) var(--step-5);
    -webkit-mask-image: none;
            mask-image: none;
  }
  .atf img {
    scale: 1 1;                 
    object-position: center 58%;
    opacity: 1;
  }
  
  .atf::after {
    background: none;
    border-block-end: 1px solid var(--rule-faint);
  }
}

h1 { position: relative; z-index: 1; }


:root {
  --plot-ease: cubic-bezier(.32, .72, .12, 1);
  --plot-near: 120ms;
  --plot-mid: 260ms;
  --plot-far: 520ms;
  --plot-step: 45ms;
}


::selection { background: var(--magenta); color: var(--stock-raised); }
:root { accent-color: var(--magenta); scrollbar-color: var(--rule) var(--bg); }
.flow ul:not([class]) > li::marker { color: var(--bronze); }


figure:not(.field) img,
.flow > p > img,
main .flow img:not(.brand__mark) {
  border: 1px solid var(--rule-faint);
  background: var(--stock-sunk);
  padding: var(--step-2);
}

main .flow .atf img, .atf img { border: 0; background: none; padding: 0; }


h2::after {
  content: "";
  display: block;
  block-size: 1px;
  margin-block-start: var(--step-2);
  background: var(--rule-faint);
  transform-origin: center;
}


.loc { display: block; margin-block-start: var(--step-2); }



.nav__link { position: relative; font-variation-settings: "wght" 400; }
.nav__link::before {
  content: attr(data-label);
  display: block; block-size: 0; overflow: hidden;
  visibility: hidden; pointer-events: none;
  font-variation-settings: "wght" 700;
}
.nav__link:hover, .nav__link:focus-visible { font-variation-settings: "wght" 680; }
.nav__link[aria-current="page"] { font-variation-settings: "wght" 600; }


.index-table tbody tr td:first-child { box-shadow: inset 2px 0 0 transparent; }
.index-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--magenta); }
.faq__item > summary { box-shadow: inset 2px 0 0 transparent; }
.faq__item > summary:hover { box-shadow: inset 2px 0 0 var(--bronze); }

@media (prefers-reduced-motion: no-preference) {
  .nav__link { transition: font-variation-settings var(--plot-near) var(--plot-ease); }
  .index-table tbody tr td:first-child,
  .faq__item > summary { transition: box-shadow var(--plot-near) var(--plot-ease); }

  
  @supports (animation-timeline: view()) {
    h2::after {
      scale: 0 1;
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }
  }
  @keyframes rule-draw { to { scale: 1 1; } }

  
  .loc { scale: 0.86; animation: locator-set var(--plot-far) var(--plot-ease) 120ms both; }
  @keyframes locator-set { to { scale: 1; } }

  
  
  .field__pt {
    scale: 0.6;
    transform-box: fill-box;
    transform-origin: center;
    animation: point-land var(--plot-mid) var(--plot-ease) both;
    animation-delay: calc(var(--i) * var(--plot-step));
  }
  @keyframes point-land { to { scale: 1; } }
}


.masthead { background: var(--forest); color: var(--stock-raised); border-block-end: 3px solid var(--magenta); }
.masthead a { color: inherit; }
.masthead a:hover { color: #fff; }

.masthead a:focus-visible, .masthead button:focus-visible { outline-color: var(--stock-raised); }

.masthead__bar {
  display: flex; flex-wrap: nowrap; gap: var(--step-3);
  align-items: center; justify-content: space-between;
  padding-block: var(--step-3);
}
.brand {
  display: flex; align-items: center; gap: var(--step-3); text-decoration: none;
  flex: 1 1 auto; min-inline-size: 0;
}
.brand__text { min-inline-size: 0; }
.brand__mark { width: 2.25rem; height: 2.25rem; flex: none; }
.brand__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.brand__line {
  display: block; font-family: var(--font-data);
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--stock-sunk);
}


.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-toggle {
  
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 2.75rem; min-block-size: 2.75rem;
  font-family: var(--font-data); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 0; color: var(--stock-raised); cursor: pointer;
  background: none;
  flex: 0 0 auto;
}
.nav-toggle__glyph { display: block; width: 1rem; height: 1px; background: currentColor; position: relative; }
.nav-toggle__glyph::before, .nav-toggle__glyph::after {
  content: ""; position: absolute; left: 0; width: 1rem; height: 1px; background: currentColor;
}
.nav-toggle__glyph::before { top: -5px; }
.nav-toggle__glyph::after { top: 5px; }

.nav { background: var(--nav); color: var(--stock-raised); border-block-start: 1px solid rgba(255,255,255,.14); }
.nav__list {
  display: flex; flex-wrap: wrap; align-items: stretch;
  font-family: var(--font-data); font-size: 0.74rem;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.nav__link {
  display: block; padding: var(--step-3) var(--step-3); color: var(--stock-raised);
  text-decoration: none; border-inline-end: 1px solid rgba(255,255,255,.14);
}
.nav__link:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav__link[aria-current="page"] {
  background: var(--magenta); color: var(--stock-raised);
  
  box-shadow: inset 0 3px 0 var(--bronze-lit);
}

@media (max-width: 63.999rem) {
  .nav { display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; }
  .nav__link { border-inline-end: 0; border-block-end: 1px solid var(--rule-faint); }
}
@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  .nav { display: block; }
}


.crumbs {
  
  background: var(--crumb-strip);
  font-family: var(--font-data); font-size: 0.72rem; color: var(--ink-mid);
  padding-block: var(--step-3); border-block-end: 1px solid var(--rule);
}
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--step-2); padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--step-2); color: var(--rule); }


.axis-head {
  display: flex; flex-wrap: wrap; gap: var(--step-3);
  align-items: baseline; justify-content: space-between;
  border-block-end: 2px solid var(--magenta); padding-block-end: var(--step-2);
}
.axis-head__note {
  font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bronze);
}



.field__plot .d { font: 600 14px var(--font-text), sans-serif; fill: var(--forest); }
.field__plot .ax {
  
  font: 400 14px var(--font-data), monospace; fill: var(--olive);
  letter-spacing: .1em; text-transform: uppercase;
}
.field__plot circle { fill: var(--magenta); }

.field__plot .q {
  font: 600 13px var(--font-data), monospace; fill: var(--forest);
  letter-spacing: .08em; text-transform: uppercase;
}
.field__plot .p { font: 400 13px var(--font-text), sans-serif; fill: var(--ink); }



.field__plot .n { display: none; }
.field__key { display: none; }
@media (max-width: 40rem) {
  .field__plot .d, .field__plot .p, .field__plot .q { display: none; }
  .field__plot .n {
    display: block; font: 600 30px var(--font-data), monospace; fill: var(--stock-raised);
    paint-order: stroke; stroke: var(--magenta); stroke-width: 14px; stroke-linejoin: round;
  }
  .field__plot .ax { font-size: 30px; }
  .field__key {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--step-2) var(--step-3);
    margin-block-start: var(--step-3); padding: 0; list-style: none;
    font-family: var(--font-data); font-size: 0.78rem; line-height: 1.35;
  }
  .field__key li { display: flex; gap: 0.45em; align-items: baseline; }
  .field__key-n {
    flex: none; min-inline-size: 1.35em; text-align: center;
    background: var(--magenta); color: var(--stock-raised);
    border-radius: 0.8em; font-weight: 600; font-size: 0.86em;
  }
  .field__key a { color: var(--ink); }
  .field__key-q {
    display: block; font-size: 0.86em; color: var(--ink-soft);
    letter-spacing: .06em; text-transform: uppercase;
  }
}
@media (max-width: 26rem) {
  .field__key { grid-template-columns: 1fr; }
}
.field__plot a { text-decoration: none; }
.field__plot a:hover circle { r: 9; }

.field { border: 1px solid var(--bronze); border-block-start: 4px solid var(--bronze); background: var(--stock-raised); padding: var(--step-4); }
.field__plot { width: 100%; height: auto; }
.field__caption {
  font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--olive); margin-block-start: var(--step-3);
}


.band { border: 1px solid var(--rule); border-inline-start: 4px solid var(--magenta); background: var(--stock-raised); display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.band__cell { padding: var(--step-3); border-block-end: 1px solid var(--rule-faint); }
.band__cell + .band__cell { border-inline-start: 1px solid var(--rule-faint); }
.band__key {
  font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--olive); margin-block-end: var(--step-2);
}
.band__val { font-size: 0.95rem; line-height: 1.5; }



.rail {
  font-size: 0.95rem;
  background: var(--stock-raised);
  border: 1px solid var(--rule-faint);
  border-block-start: 3px solid var(--bronze);
  padding: var(--step-4);
  
  box-shadow:
    0 1px 2px rgba(24, 55, 46, 0.10),
    0 6px 18px -6px rgba(24, 55, 46, 0.18);
}

@media (min-width: 68rem) {
  .with-rail > .rail { margin-block-start: calc(var(--step-4) * -1); }
}

.rail .placement {
  margin-inline: calc(var(--step-4) * -1);
  margin-block-end: calc(var(--step-4) * -1);
}
.rail .placement img { display: block; }
.rail__block + .rail__block { margin-block-start: var(--step-5); }
.rail__title {
  font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--forest);
  border-block-end: 2px solid var(--forest); padding-block-end: var(--step-2);
  margin-block-end: var(--step-3);
}
.rail__list li + li { margin-block-start: var(--step-2); }
.rail__list a { text-decoration: none; border-block-end: 1px solid var(--rule-faint); }
.rail__list a:hover { border-block-end-color: var(--magenta); }
.placement img { width: 100%; }


.table-scroll { overflow-x: auto; }
.index-table { width: 100%; font-size: 0.95rem; }
.index-table caption {
  font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--olive); text-align: left;
  padding-block-end: var(--step-2);
}
.index-table th, .index-table td {
  text-align: left; padding: var(--step-3) var(--step-3) var(--step-3) 0;
  border-block-end: 1px solid var(--rule-faint); vertical-align: top;
}
.index-table tbody tr:hover td { background: var(--stock-raised); }
.index-table th { font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--forest); font-weight: 400; border-block-end-color: var(--forest); }

@media (max-width: 47.999rem) {
  
  .index-table, .index-table tbody, .index-table tr,
  .index-table td, .index-table th { display: block; width: 100%; }
  .index-table thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .index-table tr { border-block-end: 1px solid var(--rule); padding-block: var(--step-3); }
  .index-table td { border: 0; padding: var(--step-1) 0; }
  .index-table td::before {
    content: attr(data-label) " ";
    font-family: var(--font-data); font-size: 0.66rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-soft); display: block;
  }
}


.faq__item { border-block-end: 1px solid var(--rule-faint); }
.faq__item[open] { border-inline-start: 3px solid var(--bronze); padding-inline-start: var(--step-3); }
.faq__item summary { cursor: pointer; padding-block: var(--step-3); list-style: none; display: flex; gap: var(--step-3); align-items: baseline; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "+"; font-family: var(--font-data); color: var(--magenta); font-weight: 700; }
.faq__item[open] summary::before { content: "\2212"; }
.faq__q { font-size: 1.05rem; font-family: var(--font-display); font-weight: 600; margin: 0; }
.faq__a { padding-block-end: var(--step-4); }


.site-foot { background: var(--forest); color: var(--stock-raised); border-block-start: 3px solid var(--magenta); margin-block-start: var(--step-6); padding-block: var(--step-5); font-size: 0.9rem; }
.site-foot a { color: var(--stock-raised); }
.site-foot a:hover { color: #fff; }
.site-foot .rail__title { color: var(--stock-sunk); border-block-end-color: var(--stock-sunk); }

.site-foot .rail__list + .rail__title { margin-block-start: var(--step-5); }
.site-foot .soft { color: var(--stock-sunk); }
.site-foot__cols { display: grid; gap: var(--step-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 48rem) { .site-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.to-top {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
  width: 2.75rem; height: 2.75rem; display: none;
  align-items: center; justify-content: center;
  background: var(--magenta); color: var(--stock-raised); cursor: pointer;
  font-family: var(--font-data); font-size: 0.9rem;
}
.to-top.is-visible { display: flex; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.data { font-family: var(--font-data); }
.soft { color: var(--ink-mid); }


.contact-block {
  font-style: normal;
  margin-block-start: var(--step-5);
  padding: var(--step-4);
  background: var(--stock-raised);
  border: 1px solid var(--rule-faint);
  border-inline-start: 3px solid var(--bronze);
  line-height: 1.7;
}