/*! The Better — better.co.th | fonts: Roboto Condensed, Noto Sans, Noto Sans Thai (SIL OFL 1.1 / Apache 2.0) */
:root {
--red:   #EB212E;
--ink:   #000000;
--paper: #FFFFFF;
--panel:      #F2F2F2;
--rule:       #DBDBDB;
--rule-soft:  #EAEAEA;
--ink-70:     #3D3D3D;
--ink-60:     #565656;
--ink-45:     #6E6E6E;
--rule-dark:      #2B2B2B;
--rule-dark-soft: #1C1C1C;
--paper-75:       #BFBFBF;
--paper-55:       #8F8F8F;
--focus: var(--red);
--ff-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
--ff-body:    "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--ff-thai:    "Noto Sans Thai", "Noto Sans", -apple-system, "Leelawadee UI", Tahoma, sans-serif;
--fs-hero:    clamp(2.5rem,   1.05rem + 5.95vw, 6rem);
--fs-display: clamp(2.125rem, 1.30rem + 3.44vw, 3.875rem);
--fs-h2:      clamp(1.75rem,  1.28rem + 1.96vw, 2.75rem);
--fs-term:    clamp(1.5rem,   1.19rem + 1.28vw, 2.15rem);
--fs-h3:      clamp(1.25rem,  1.11rem + 0.59vw, 1.55rem);
--fs-lead:    clamp(1.125rem, 1.02rem + 0.44vw, 1.375rem);
--fs-body:    clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);
--fs-small:   0.875rem;
--fs-label:   0.75rem;
--lh-display: 0.94;
--lh-heading: 1.04;
--lh-body:    1.65;
--tr-display: -0.022em;
--tr-label:    0.16em;
--wrap-max: 1360px;
--pad: clamp(1.25rem, 0.55rem + 3.1vw, 3rem);
--gap:  clamp(1.5rem, 0.9rem + 2.4vw, 2.5rem);
--section-y: clamp(4rem, 2.5rem + 5.4vw, 7rem);
--header-h: 4.5rem;
--measure: 63ch;
--measure-tight: 46ch;
--rule-w: 2px;
--rule-red-len: 3.25rem;
--dur-rule: 620ms;
--dur-type: 520ms;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 100em) {
:root { --pad: clamp(3rem, -6rem + 9vw, 6rem); }
}
:root:lang(th),
[lang="th"] {
--lh-display: 1.16;
--lh-heading: 1.24;
--lh-body:    1.82;
--tr-display: 0;
--fs-hero:    clamp(2rem,    0.95rem + 4.35vw, 4.25rem);
--fs-display: clamp(1.75rem, 1.13rem + 2.58vw, 3.06rem);
--fs-h2:      clamp(1.5rem,  1.15rem + 1.47vw, 2.25rem);
--fs-term:    clamp(1.3rem,  1.09rem + 0.88vw, 1.75rem);
--measure: 58ch;
}
@font-face {
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/roboto-condensed-latin-wght-normal.8d230115.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/noto-sans-latin-wght-normal.51ca196f.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Noto Sans Thai";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/noto-sans-thai-thai-wght-normal.1f5a1736.woff2") format("woff2-variations");
unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
*, *::before, *::after { box-sizing: border-box; }
html {
color-scheme: light;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
overflow-x: clip;
background: var(--paper);
color: var(--ink);
font-family: var(--ff-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body:lang(th) { font-family: var(--ff-thai); }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img {
display: block;
max-width: 100%;
height: auto;
}
a { color: inherit; }
button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
:target { scroll-margin-top: calc(var(--header-h) + 2rem); }
:focus { outline: none; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 1px;
}
.on-dark :focus-visible { outline-color: var(--red); }
.skip {
position: absolute;
left: var(--pad);
top: 0;
z-index: 100;
transform: translateY(-120%);
background: var(--ink);
color: var(--paper);
padding: 0.75rem 1.25rem;
font-family: var(--ff-display);
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tr-label);
text-transform: uppercase;
text-decoration: none;
transition: transform 180ms var(--ease);
}
.skip:lang(th) { font-family: var(--ff-thai); text-transform: none; letter-spacing: 0; }
.skip:focus-visible { transform: translateY(0); }
.t-display,
.t-hero,
.t-h2,
.t-term,
.t-label {
font-family: var(--ff-display);
font-weight: 700;
}
:lang(th) .t-display,
:lang(th) .t-hero,
:lang(th) .t-h2,
:lang(th) .t-term,
:lang(th) .t-label { font-family: var(--ff-thai); }
.t-hero {
font-size: var(--fs-hero);
line-height: var(--lh-display);
letter-spacing: var(--tr-display);
text-wrap: balance;
}
.t-display {
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--tr-display);
text-wrap: balance;
}
.t-h2 {
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--tr-display);
text-wrap: balance;
}
.t-term {
font-size: var(--fs-term);
line-height: var(--lh-heading);
letter-spacing: var(--tr-display);
font-weight: 700;
}
.t-label {
font-size: var(--fs-label);
font-weight: 600;
line-height: 1.2;
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--ink-45);
}
:lang(th) .t-label {
text-transform: none;
letter-spacing: 0.04em;
font-size: var(--fs-small);
font-weight: 600;
}
.t-lead {
font-size: var(--fs-lead);
line-height: 1.45;
color: var(--ink);
}
.t-body { max-width: var(--measure); color: var(--ink-60); }
.t-body + .t-body { margin-top: 1.15em; }
.on-dark .t-label   { color: var(--paper-55); }
.on-dark .t-body    { color: var(--paper-75); }
.on-dark .t-lead    { color: var(--paper); }
:lang(th) { word-break: normal; overflow-wrap: break-word; line-break: normal; }
.term-latin { font-family: var(--ff-display); font-weight: 700; }
.t-body--after-h { margin-top: clamp(1rem, 2vw, 1.5rem); }
.t-h3 {
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
letter-spacing: -0.012em;
text-wrap: balance;
}
:lang(th) .t-h3 { font-family: var(--ff-thai); letter-spacing: 0; }
.nb { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.vh {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.wrap {
width: 100%;
max-width: var(--wrap-max);
margin-inline: auto;
padding-inline: var(--pad);
}
.rule {
--_red: var(--rule-red-len);
height: var(--rule-w);
margin-inline-end: calc(-1 * var(--pad));
transform-origin: left center;
background: linear-gradient(
to right,
var(--red) 0, var(--red) var(--_red),
var(--rule) var(--_red), var(--rule) 100%
);
}
.on-dark .rule {
background: linear-gradient(
to right,
var(--red) 0, var(--red) var(--_red),
var(--rule-dark) var(--_red), var(--rule-dark) 100%
);
}
.hair {
height: 1px;
border: 0;
margin: 0;
background: var(--rule-soft);
}
.on-dark .hair { background: var(--rule-dark-soft); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.7); }
.section--air { padding-block: clamp(5rem, 2.9rem + 7.4vw, 9.5rem); }
.on-dark {
background: var(--ink);
color: var(--paper);
}
.section--panel { background: var(--panel); }
.spine {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.spine__rule { grid-column: 1 / -1; }
.spine__rail { align-self: start; }
@media (min-width: 62em) {
.spine {
grid-template-columns: minmax(0, 3.15fr) minmax(0, 8.85fr);
column-gap: clamp(2rem, 4.5vw, 5.5rem);
}
.spine__rail {
position: sticky;
top: calc(var(--header-h) + 2.5rem);
}
.spine--wide { grid-template-columns: minmax(0, 2.2fr) minmax(0, 9.8fr); }
}
.rail__label { display: block; }
.rail__heading { margin-top: 0.85rem; }
.site-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--paper);
}
.site-header::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 1px;
background: linear-gradient(
to right,
var(--red) 0, var(--red) var(--pad),
var(--rule) var(--pad), var(--rule) 100%
);
opacity: 0;
transition: opacity 220ms var(--ease);
}
.site-header.is-stuck::after { opacity: 1; }
.header__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: auto; height: 2rem; }
@media (min-width: 48em) {
.brand img { height: 2.75rem; }
}
.nav { display: none; }
@media (min-width: 62em) {
.nav {
display: flex;
align-items: center;
gap: clamp(1.25rem, 2.2vw, 2.25rem);
}
}
@media (max-width: 61.999em) {
html:not(.js) .header__bar { flex-wrap: wrap; row-gap: 0.5rem; padding-bottom: 0.75rem; }
html:not(.js) .nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.25rem;
width: 100%;
}
html:not(.js) .nav__sep { display: none; }
html:not(.js) .menu-btn { display: none; }
}
.nav__link {
position: relative;
font-family: var(--ff-display);
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tr-label);
text-transform: uppercase;
text-decoration: none;
color: var(--ink);
padding-block: 0.5rem;
}
:lang(th) .nav__link {
font-family: var(--ff-thai);
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-body);
}
.nav__link::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--red);
transform: scaleX(0);
transform-origin: left center;
transition: transform 260ms var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__sep {
width: 1px;
height: 1.15rem;
background: var(--rule);
}
.lang {
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: var(--tr-label);
text-decoration: none;
color: var(--ink);
padding: 0.35rem 0.15rem;
}
.lang:hover, .lang:focus-visible { color: var(--red); }
.menu-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--ff-display);
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tr-label);
text-transform: uppercase;
min-height: 2.75rem;
padding-inline: 0.25rem;
}
:lang(th) .menu-btn { font-family: var(--ff-thai); text-transform: none; letter-spacing: 0; }
@media (min-width: 62em) { .menu-btn { display: none; } }
.menu-btn__bars {
position: relative;
width: 1.5rem;
height: 0.75rem;
flex: none;
}
.menu-btn__bars::before,
.menu-btn__bars::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: var(--ink);
transition: transform 240ms var(--ease), background-color 240ms var(--ease);
}
.menu-btn__bars::before { top: 0; }
.menu-btn__bars::after  { bottom: 0; background: var(--red); }
.menu-panel {
position: fixed;
inset: 0;
z-index: 70;
background: var(--ink);
color: var(--paper);
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
padding:
env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.menu-panel[hidden] { display: none; }
.menu-panel__inner {
flex: 1;
display: flex;
flex-direction: column;
}
.menu-panel__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: var(--header-h);
}
.menu-panel__bar img { width: auto; height: 2rem; }
.menu-panel__close {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-height: 2.75rem;
font-family: var(--ff-display);
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tr-label);
text-transform: uppercase;
color: var(--paper);
}
:lang(th) .menu-panel__close { font-family: var(--ff-thai); text-transform: none; letter-spacing: 0; }
.menu-panel__close .x {
position: relative;
width: 1.1rem;
height: 1.1rem;
flex: none;
}
.menu-panel__close .x::before,
.menu-panel__close .x::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: var(--paper);
}
.menu-panel__close .x::before { transform: rotate(45deg); }
.menu-panel__close .x::after  { transform: rotate(-45deg); background: var(--red); }
.menu-panel__list {
display: flex;
flex-direction: column;
padding-block: clamp(1.5rem, 4vw, 3rem) 2rem;
}
.menu-panel__item + .menu-panel__item { border-top: 1px solid var(--rule-dark-soft); }
.menu-panel__link {
display: block;
padding-block: clamp(0.85rem, 2.6vw, 1.35rem);
font-family: var(--ff-display);
font-weight: 700;
font-size: clamp(1.75rem, 1.1rem + 3vw, 2.5rem);
line-height: 1.1;
letter-spacing: var(--tr-display);
text-decoration: none;
color: var(--paper);
}
:lang(th) .menu-panel__link {
font-family: var(--ff-thai);
font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
line-height: 1.35;
letter-spacing: 0;
}
.menu-panel__link:hover, .menu-panel__link:focus-visible { color: var(--red); }
.menu-panel__foot {
margin-top: auto;
padding-block: 2rem;
display: flex;
align-items: center;
gap: 1.25rem;
}
body.menu-open { overflow: hidden; }
.cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(1rem, 2.4vw, 2rem);
}
.cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.25rem;
padding: 0.9rem 1.75rem;
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: var(--tr-label);
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
}
:lang(th) .cta {
font-family: var(--ff-thai);
text-transform: none;
letter-spacing: 0.01em;
font-size: var(--fs-body);
}
.cta--primary { background: var(--ink); color: var(--paper); }
.on-dark .cta--primary { background: var(--paper); color: var(--ink); }
.cta--primary::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 4px;
background: var(--red);
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms var(--ease);
}
.cta--primary:hover::after,
.cta--primary:focus-visible::after { transform: scaleX(1); }
.cta--ghost {
padding-inline: 0;
min-height: 2.75rem;
color: var(--ink);
border-bottom: 2px solid var(--rule);
overflow: visible;
}
.on-dark .cta--ghost { color: var(--paper); border-bottom-color: var(--rule-dark); }
.cta--ghost::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: -2px;
height: 2px;
background: var(--red);
transform: scaleX(0);
transform-origin: left center;
transition: transform 320ms var(--ease);
}
.cta--ghost:hover::after,
.cta--ghost:focus-visible::after { transform: scaleX(1); }
.link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--rule);
transition: border-color 200ms var(--ease);
}
.link:hover, .link:focus-visible { border-bottom-color: var(--red); }
.on-dark .link { border-bottom-color: var(--rule-dark); }
.on-dark .link:hover, .on-dark .link:focus-visible { border-bottom-color: var(--red); }
.lang--panel { color: var(--paper); letter-spacing: 0.06em; }
.lang--panel:hover, .lang--panel:focus-visible { color: var(--red); }
.hero {
--hero-gap: clamp(1.75rem, 3.4vw, 3.5rem);
padding-block: clamp(2.5rem, 1.4rem + 4.4vw, 5rem) clamp(3.25rem, 1.8rem + 5.6vw, 6.5rem);
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
}
.hero__rule { grid-column: 1 / -1; }
.hero__main,
.hero__aside {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero__main  { gap: clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem); }
.hero__aside { gap: clamp(0.85rem, 0.65rem + 0.9vw, 1.25rem); }
.hero__eyebrow { color: var(--ink); }
.hero__head { max-width: 100%; }
.hero__prop {
color: var(--red);
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-term);
line-height: 1.12;
letter-spacing: var(--tr-display);
text-wrap: balance;
}
:lang(th) .hero__prop { font-family: var(--ff-thai); line-height: 1.38; letter-spacing: 0; }
.hero__since { color: var(--ink-45); }
.hero__ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(1rem, 2.4vw, 2rem);
}
.hero__divider { display: none; }
@media (min-width: 62em) {
.hero__grid {
grid-template-columns: minmax(0, 1.85fr) var(--rule-w) minmax(0, 1fr);
column-gap: var(--hero-gap);
row-gap: clamp(2rem, 3.6vw, 3.25rem);
align-items: start;
}
.hero__rule  { grid-column: 1 / -1; grid-row: 1; }
.hero__main  { grid-column: 1; grid-row: 2; }
.hero__aside { grid-column: 3; grid-row: 2; padding-top: 0.35rem; }
.hero__divider {
display: block;
position: relative;
grid-column: 2;
grid-row: 2 / span 2;
align-self: stretch;
background: linear-gradient(
to bottom,
var(--red) 0, var(--red) 3.25rem,
var(--rule) 3.25rem, var(--rule) 100%
);
}
.hero__divider::after {
content: "";
position: absolute;
top: 100%;
inset-inline-start: 0;
width: 100%;
height: clamp(2rem, 4vw, 3.5rem);
background: linear-gradient(to bottom, var(--rule), transparent);
}
.hero__ctas {
grid-column: 1 / -1;
grid-row: 3;
display: grid;
grid-template-columns: minmax(0, 1.85fr) var(--rule-w) minmax(0, 1fr);
column-gap: var(--hero-gap);
align-items: center;
}
.hero__ctas > :first-child { grid-column: 1; justify-self: start; }
.hero__ctas > :last-child  { grid-column: 3; justify-self: start; }
}
.idea__lead {
color: var(--red);
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--tr-display);
text-wrap: balance;
margin-top: 0.35em;
}
:lang(th) .idea__lead { font-family: var(--ff-thai); }
.idea__body { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.rows { display: flex; flex-direction: column; }
.row {
display: grid;
gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
padding-block: clamp(1.4rem, 2.4vw, 2.1rem);
}
.row:first-child { padding-top: 0; }
@media (min-width: 45em) {
.row { grid-template-columns: minmax(9rem, 3.4fr) minmax(0, 8.6fr); }
}
.row__term { color: var(--ink); }
.row__term-th { display: block; font-size: 0.62em; font-weight: 600; color: var(--ink-45); margin-top: 0.15em; letter-spacing: 0; }
.row__body { color: var(--ink-60); max-width: var(--measure); }
.frows { display: flex; flex-direction: column; }
.frow {
display: grid;
gap: 0.5rem clamp(1.5rem, 3vw, 3.5rem);
padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
border-top: 1px solid var(--rule-soft);
}
@media (min-width: 45em) {
.frow { grid-template-columns: minmax(14rem, 4.2fr) minmax(0, 7.8fr); }
}
.frow__term { color: var(--ink); }
.frow__term-th {
display: block;
font-size: 0.66em;
font-weight: 600;
color: var(--ink-45);
margin-top: 0.15em;
letter-spacing: 0;
}
.frow__body { color: var(--ink-60); max-width: var(--measure); }
.engage__intro { color: var(--ink-60); max-width: var(--measure); }
.engage__list { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.engage__item {
border-top: 1px solid var(--rule);
padding-block: clamp(1.05rem, 2vw, 1.6rem);
font-family: var(--ff-display);
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--ink);
text-wrap: pretty;
}
:lang(th) .engage__item {
font-family: var(--ff-thai);
letter-spacing: 0;
line-height: 1.55;
}
.engage__item:last-child { border-bottom: 1px solid var(--rule); }
.work {
position: relative;
padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
}
.work::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: var(--rule-w);
background: linear-gradient(
to bottom,
var(--red) 0, var(--red) 3.25rem,
var(--rule) 3.25rem, var(--rule) 100%
);
}
.work::after {
content: "";
position: absolute;
top: 100%;
inset-inline-start: 0;
width: var(--rule-w);
height: clamp(2.5rem, 5vw, 4.5rem);
background: linear-gradient(to bottom, var(--rule), transparent);
}
.work__step { padding-block: 0 clamp(1.75rem, 3.2vw, 2.75rem); }
.work__step:last-child { padding-bottom: 0; }
.work__term { color: var(--ink); }
.work__body { margin-top: 0.65rem; color: var(--ink-60); max-width: var(--measure); }
.since__pull {
margin-top: clamp(1.75rem, 3vw, 2.5rem);
padding-top: clamp(1.25rem, 2.2vw, 1.75rem);
border-top: var(--rule-w) solid var(--red);
max-width: 42ch;
font-size: var(--fs-h3);
line-height: 1.45;
color: var(--ink);
}
:lang(th) .since__pull { max-width: 38ch; line-height: 1.7; }
.contact__cta { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.contact__grid {
display: grid;
gap: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
}
@media (min-width: 62em) {
.contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.contact__details { padding-top: 0.25rem; }
.contact__addr {
margin-top: clamp(0.9rem, 2vw, 1.25rem);
font-style: normal;
display: flex;
flex-direction: column;
gap: 0.15rem;
color: var(--paper-75);
font-size: var(--fs-small);
line-height: 1.7;
}
.contact__addr span:first-child { color: var(--paper); font-weight: 600; }
.contact__dl {
margin-top: clamp(1.1rem, 2.2vw, 1.5rem);
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.55rem clamp(1rem, 2vw, 1.75rem);
font-size: var(--fs-small);
align-items: baseline;
}
.contact__dl dt {
font-family: var(--ff-display);
font-weight: 600;
letter-spacing: var(--tr-label);
text-transform: uppercase;
font-size: var(--fs-label);
color: var(--paper-55);
}
:lang(th) .contact__dl dt {
font-family: var(--ff-thai);
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-small);
}
.contact__dl dd { margin: 0; color: var(--paper-75); }
.contact__dl dd a { color: var(--paper); }
.closing {
padding-block: clamp(2.75rem, 1.6rem + 3.6vw, 4.25rem) clamp(2rem, 1rem + 3vw, 3rem);
}
.closing__logo {
display: block;
width: clamp(11rem, 26vw, 17.5rem);
}
.closing__logo-img { width: 100%; height: auto; }
.site-footer { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.footer__grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 48em) {
.footer__grid {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: clamp(2rem, 5vw, 5rem);
}
}
.footer__id {
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-small);
letter-spacing: 0.1em;
color: var(--paper);
}
.footer__est { margin-top: 0.35rem; color: var(--paper-55); font-size: var(--fs-small); }
.footer__links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem clamp(1.25rem, 2.5vw, 2rem);
font-size: var(--fs-small);
color: var(--paper-75);
}
.footer__links a { text-decoration: none; border-bottom: 1px solid var(--rule-dark); padding-block: 0.35rem; }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--paper); border-bottom-color: var(--red); }
.footer__dot { width: 3px; height: 3px; background: var(--paper-55); }
.doc__block { padding-block: clamp(1.6rem, 2.6vw, 2.4rem); border-top: 1px solid var(--rule-soft); }
.doc__block:first-child { border-top: 0; padding-top: 0; }
.doc__heading { color: var(--ink); }
.doc__block p { color: var(--ink-60); max-width: var(--measure); }
.doc__block p + p { margin-top: 0.9em; }
.doc__meta { margin-top: 0.85rem; color: var(--ink-45); font-size: var(--fs-small); }
.doc__back { margin-top: clamp(2rem, 4vw, 3.5rem); }
.ph {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.9em;
padding: 0.08em 0.35em;
background: var(--panel);
border-bottom: 1px dashed var(--ink-45);
white-space: nowrap;
}
.nf { min-height: 58svh; display: flex; flex-direction: column; justify-content: center; }
.nf__code {
margin-top: 1.5rem;
font-family: var(--ff-display);
font-weight: 700;
font-size: var(--fs-h3);
letter-spacing: 0.08em;
color: var(--red);
}
.nf__head { margin-top: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
.js .reveal .rule { transform: scaleX(0); transition: transform var(--dur-rule) var(--ease); }
.js .reveal.is-in .rule { transform: scaleX(1); }
.js .reveal .reveal-t {
clip-path: inset(-150% -150% 100% -150%);
transform: translateY(0.7rem);
transition: clip-path var(--dur-type) var(--ease) var(--rd, 140ms),
transform var(--dur-type) var(--ease) var(--rd, 140ms);
}
.js .reveal.is-in .reveal-t {
clip-path: inset(-150% -150% -150% -150%);
transform: none;
}
}
.rd-1 { --rd: 200ms; }
.rd-2 { --rd: 260ms; }
.rd-3 { --rd: 320ms; }
@media print {
.site-header, .menu-panel, .menu-btn, .cta-row, .skip { display: none !important; }
.on-dark { background: #fff !important; color: #000 !important; }
.on-dark .t-body, .on-dark .t-label, .on-dark .t-lead { color: #333 !important; }
.idea__lead { color: #000 !important; }
.section { padding-block: 1.5rem; break-inside: avoid; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}