/* ============================================================================
   web-03 · ธนกร แอนด์ พาร์ทเนอร์ส

   Concept: what a law firm sells is documents, so the page is set like a
   well-typeset one — clause numbers in the margin, hairline rules, and body
   copy in a serif that survives long reading. The roles of the two faces are
   swapped from the usual brochure: headings are a tight technical sans, body is
   the serif. That inversion is what makes it read as a document rather than an
   advert. Navy and brass — every law firm's default — are absent; the ground is
   paper and the accent is oxblood. There is one photograph on the whole site.

   Signature: the redline (.redline). The firm's position on fees is written as
   a contract amendment: struck-out text, then the replacement. Once per page.
   ============================================================================ */

:root {
  --paper: #EFEBE4;
  --paper-2: #E4DFD5;
  --graphite: #23211E;
  --oxblood: #6B2233;
  --oxblood-lit: #C4657C;
  --rule: #C4BDB0;
  --muted: #6E675D;

  --container: 1060px;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(72px, 9vw, 120px);
}

body {
  background: var(--paper);
  color: var(--graphite);
  font-family: 'Taviraj', Georgia, serif;
  /* Taviraj has long descenders and Thai marks stack on top of them — 1.9 is the floor here */
  line-height: 1.9;
}

.mono, .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1, h2, h3, .sans { font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; font-weight: 600; line-height: 1.35; }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 2.75vw, 2rem); }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap); position: relative; }
.section--alt { background: var(--paper-2); }
.section--dark { background: var(--graphite); color: var(--paper); }
p { max-width: 68ch; }
.lede { color: var(--muted); }
a { color: var(--oxblood); }
.section--dark a { color: var(--oxblood-lit); }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.section--dark :focus-visible { outline-color: var(--oxblood-lit); }

/* -- structure: clause numbers in the margin ---------------------------------- */
/* § numbers are real in a legal document — they are how one clause refers to another —
   so they are structure here, not decoration. Outside the container on wide screens,
   above the heading in the middle range, gone on small screens. */
.clause {
  font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--rule);
  margin-bottom: 10px;
}
/* On wide screens it steps out into the margin, the way a clause number sits beside a
   paragraph in a printed contract. It stays in the flow so it can never land on the heading. */
@media (min-width: 1281px) { .clause { margin-left: -56px; } }

/* -- buttons ------------------------------------------------------------------- */
.btn { display: inline-block; padding: 15px 30px; border-radius: 0; text-decoration: none; font-weight: 600; font-family: 'IBM Plex Sans Thai', sans-serif; transition: background .2s, color .2s; }
.btn--primary { background: var(--oxblood); color: var(--paper); }
.btn--primary:hover { background: #55192a; }
.btn--ghost { border: 1px solid currentColor; color: var(--graphite); }
.btn--ghost:hover { background: var(--graphite); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* -- header -------------------------------------------------------------------- */
.header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header__inner { max-width: var(--container); margin-inline: auto; padding: 14px var(--pad); display: flex; align-items: center; gap: 28px; }
.brand { font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--graphite); }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav__link { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: .9375rem; text-decoration: none; color: var(--graphite); padding-block: 3px; border-bottom: 2px solid transparent; }
.nav__link.is-active { color: var(--oxblood); border-bottom-color: var(--oxblood); }
.nav__link:hover { color: var(--oxblood); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 2px; background: var(--graphite); }
@media (max-width: 900px) {
  .burger { display: flex; }
  .nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; align-items: center; gap: 26px; margin: 0; background: var(--paper); transform: translateY(-100%); transition: transform .3s; }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 1.25rem; }
  body.nav-open { overflow: hidden; }
}

/* -- SIGNATURE: the redline ------------------------------------------------------ */
.redline {
  display: inline-block;
  background: var(--paper-2);
  padding: 20px 24px;
  margin-top: 28px;
  font-size: 1.25rem;
  line-height: 1.7;
  max-width: 56ch;
}
.section--alt .redline { background: var(--paper); }
.section--dark .redline { background: rgba(239,235,228,.07); }
.redline del {
  color: var(--rule);
  /* the rule is painted as a 1px background stripe so its width can be animated;
     text-decoration cannot be transitioned */
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 58%;
}
.redline ins {
  color: var(--oxblood);
  text-decoration: none;
  font-weight: 600;
}
.section--dark .redline ins { color: var(--oxblood-lit); }
.redline .arrow { color: var(--rule); margin: 0 .4em; }
@media (max-width: 600px) { .redline .arrow::after { content: '\A'; white-space: pre; } }

/* struck text draws itself once when the line first arrives on screen. The stripe is at full
   width by default; JS only takes it away in order to animate it back, so with JS off or
   broken the amendment still reads correctly. */
.js-redline.is-armed del { background-size: 0% 1px; }
.js-redline.is-drawn del { background-size: 100% 1px; transition: background-size .42s ease-out; }
@media (prefers-reduced-motion: reduce) { .js-redline.is-armed del { background-size: 100% 1px; } }

/* -- hero ----------------------------------------------------------------------- */
/* Text left, the marked-up draft right. The photograph is the redline as an object — the same
   argument the .redline line makes in type — so the image reinforces the signature instead of
   competing with it. Below 900px the clause number and headline still open the page: this site
   is set as a document, and a document opens with its clause, not with a picture. */
.hero { padding-block: clamp(72px,10vw,132px) var(--gap); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px,5vw,72px); align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.hero h1 { max-width: 20ch; }
.hero p.lede { margin-top: 24px; max-width: 60ch; }
.hero::after { content: ''; display: block; height: 1px; background: var(--rule); margin-top: var(--gap); }

/* A hairline mat, drawn as padding inside a border rather than an outset pseudo-element —
   an outset frame hangs past the container and puts a scrollbar on the page at container width. */
.shot img {
  display: block; width: 100%;
  padding: 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.shot__cap { margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--muted); }

/* -- image band ------------------------------------------------------------------
   Full-bleed, fixed proportion, no caption. Used once per page at most. */
.band-img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; display: block; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,36px); align-items: start; margin-top: 40px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }
.duo img { width: 100%; display: block; }
.duo figcaption { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--muted); }

/* -- two practice columns --------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 clamp(28px,4vw,56px); margin-top: 44px; }
.split__rule { background: var(--rule); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split__rule { height: 1px; margin-block: 32px; } }
.split h3 { font-size: 1.5rem; color: var(--oxblood); margin-bottom: 12px; }
.split__list { color: var(--graphite); }
.split__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .9375rem; }

/* -- numbered rows ---------------------------------------------------------------- */
.rows { max-width: 780px; margin-top: 40px; }
.row { display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__n { font-family: 'IBM Plex Mono', monospace; color: var(--rule); font-size: .875rem; }
.row h3 { font-size: 1.125rem; margin-bottom: 6px; }
.row p { color: var(--muted); font-size: 1rem; }

/* -- figures strip ------------------------------------------------------------------ */
.figures { display: grid; grid-template-columns: repeat(5,1fr); }
@media (max-width: 860px) { .figures { grid-template-columns: repeat(2,1fr); } }
.figure { padding: 24px; border-right: 1px solid rgba(239,235,228,.18); }
.figure:last-child { border-right: 0; }
.figure__n { font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.75rem,4vw,3rem); line-height: 1.1; }
.figure__n--word { color: var(--oxblood-lit); }
.figure__label { font-size: .9375rem; color: var(--rule); margin-top: 6px; }

/* -- people table --------------------------------------------------------------------- */
.roster { width: 100%; max-width: 880px; margin-top: 36px; font-size: 1rem; }
.roster th, .roster td { padding: 16px 20px 16px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.roster thead th { border-top: 0; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--rule); font-weight: 400; padding-bottom: 8px; }
.roster tbody tr:last-child td, .roster tbody tr:last-child th { border-bottom: 1px solid var(--rule); }
.roster .is-name { font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; white-space: nowrap; }
.roster .is-area { color: var(--oxblood); }
.roster .is-cv { color: var(--muted); font-size: .9375rem; }
@media (max-width: 800px) {
  .roster thead { display: none; }
  .roster, .roster tbody, .roster tr, .roster th, .roster td { display: block; width: auto; }
  .roster tr { padding: 18px 0; border-top: 1px solid var(--rule); }
  .roster th, .roster td { border: 0; padding: 0; }
}

/* -- scope of work list ------------------------------------------------------------------ */
.work { max-width: 880px; }
.work__item { padding: 28px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; }
.work__item:last-child { border-bottom: 1px solid var(--rule); }
.work h3 { font-size: 1.25rem; margin-bottom: 14px; }
.work__meta { display: grid; grid-template-columns: 1.6fr .9fr .9fr; gap: 20px; }
@media (max-width: 720px) { .work__meta { grid-template-columns: 1fr; gap: 14px; } }
.work__meta dt { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--rule); }
.work__meta dd { margin: 2px 0 0; font-size: .9375rem; }
.work__meta .num { color: var(--graphite); }

/* -- sticky in-page toc --------------------------------------------------------------------- */
.toc { position: sticky; top: 56px; z-index: 12; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 12px 0; margin-top: 32px; }
.toc__list { display: flex; gap: 0; overflow-x: auto; }
.toc__link { display: flex; gap: 8px; align-items: baseline; padding: 4px 20px 4px 0; margin-right: 20px; border-right: 1px solid var(--rule); text-decoration: none; color: var(--graphite); white-space: nowrap; font-family: 'IBM Plex Sans Thai', sans-serif; font-size: .9375rem; }
.toc__link:last-child { border-right: 0; margin-right: 0; }
.toc__link .n { font-family: 'IBM Plex Mono', monospace; color: var(--rule); font-size: .75rem; }
.toc__link.is-current { color: var(--oxblood); }
.toc__link.is-current .n { color: var(--oxblood); }

/* -- fee table ---------------------------------------------------------------------------- */
.fees { max-width: 720px; margin-top: 32px; }
.fees tr { border-top: 1px solid var(--rule); }
.fees tr:last-child { border-bottom: 1px solid var(--rule); }
.fees th, .fees td { padding: 14px 0; font-weight: 400; }
.fees td { text-align: right; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.fees tr:first-child td { color: var(--oxblood); }

/* packages, laid out as a table in a document — not as SaaS pricing cards */
.packages { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; margin-top: 40px; }
@media (max-width: 900px) { .packages { grid-template-columns: 1fr; } .packages .split__rule { height: 1px; margin-block: 28px; } }
.package { padding-inline: clamp(0px,2vw,24px); }
.package:first-child { padding-left: 0; }
.package h3 { font-size: 1.25rem; }
.package__price { font-family: 'IBM Plex Mono', monospace; font-size: 1.75rem; color: var(--oxblood); margin: 8px 0 12px; }
.package p { color: var(--muted); font-size: .9375rem; }

/* -- contact ------------------------------------------------------------------------------- */
.contact-table { width: 100%; max-width: 820px; margin-top: 40px; }
.contact-table tr { border-top: 1px solid var(--rule); }
.contact-table tr:last-child { border-bottom: 1px solid var(--rule); }
.contact-table tr:hover { background: var(--paper-2); }
.contact-table th, .contact-table td { padding: 18px 16px 18px 0; vertical-align: top; }
.contact-table .is-kind { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--rule); font-weight: 400; width: 22%; }
.contact-table .is-value { font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; font-size: 1.125rem; }
.contact-table .is-note { color: var(--muted); font-size: .9375rem; }
@media (max-width: 700px) {
  .contact-table, .contact-table tbody, .contact-table tr, .contact-table th, .contact-table td { display: block; width: auto; }
  .contact-table tr { padding: 16px 0; }
  .contact-table th, .contact-table td { padding: 0; border: 0; }
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .two-col > .is-map { order: -1; } }
.locator { width: 100%; border: 1px solid var(--rule); display: block; }
.dl__row { padding: 14px 0; border-top: 1px solid var(--rule); }
.dl__row:last-child { border-bottom: 1px solid var(--rule); }
.dl__label { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--oxblood); }

.hours { max-width: 560px; margin-top: 24px; }
.hours tr { border-top: 1px solid var(--rule); }
.hours tr:last-child { border-bottom: 1px solid var(--rule); }
.hours th, .hours td { padding: 12px 0; font-weight: 400; }
.hours td { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.hours tr.is-today th { font-weight: 600; }

.callout { background: var(--graphite); color: var(--paper); padding: 28px; margin-top: 32px; max-width: 780px; }
.callout p { max-width: 62ch; }

/* -- CTA band --------------------------------------------------------------------------------- */
.band { background: var(--oxblood); color: var(--paper); padding-block: clamp(56px,7vw,88px); }
.band h2 { color: inherit; }
.band p { color: rgba(239,235,228,.85); }
.band .btn--primary { background: var(--paper); color: var(--oxblood); }
.band .btn--ghost { border-color: var(--paper); color: var(--paper); }
.band .btn--ghost:hover { background: var(--paper); color: var(--oxblood); }

/* -- footer ------------------------------------------------------------------------------------ */
.footer { background: var(--paper-2); padding-block: 56px 28px; }
.footer__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; font-size: .9375rem; color: var(--muted); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'IBM Plex Sans Thai', sans-serif; font-weight: 600; color: var(--graphite); margin-bottom: 8px; }
.footer__label { font-size: .8125rem; color: var(--oxblood); margin-bottom: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: .8125rem; }