/* =====================================================================
   SIRIN GUNKLOY — shared page primitives (secondary pages)
   ===================================================================== */

/* Paper base used by most inner pages */
body.page { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-dim: var(--muted); --hairline: var(--line-dark); }
body.page ::selection { background: var(--ink); color: var(--paper); }

/* Page hero */
.page-hero { padding: calc(var(--nav-h) + 9vh) 0 clamp(3rem,8vh,6rem); position: relative; }
.page-hero .idx { position: absolute; top: calc(var(--nav-h) + 4vh); right: var(--pad-x); font-family: var(--serif); font-size: var(--fs-section); color: var(--paper-dim); line-height: 1; }
.page-hero .idx.idx--img { width: clamp(2.8rem,6vw,5.5rem); height: auto; opacity: .4; overflow: visible; }

/* Hand-drawn mark (about.html) — a gentle sway plus an occasional eye blink,
   just enough to feel alive without breaking the quiet-museum tone. */
.mark-sway { transform-origin: 50% 65%; animation: markSway 7s ease-in-out infinite; }
.eye { transform-box: fill-box; transform-origin: center; animation: markBlink 5s ease-in-out infinite; }
.mouth { transform-box: fill-box; transform-origin: center; animation: markSmile 8.6s ease-in-out infinite; }
@keyframes markSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(1.5deg) translateY(-1px); }
}
@keyframes markBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
  96%           { transform: scaleY(1); }
}
@keyframes markSmile {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50%      { transform: scaleX(1.08) scaleY(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .mark-sway, .eye, .mouth { animation: none; }
}
.page-hero h1 { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: .92; letter-spacing: -0.02em; max-width: 16ch; }
.page-hero h1 .th { font-family: var(--thai); font-weight: 200; display: block; font-size: var(--fs-body); color: var(--fg-dim); margin-top: .3rem; }
.page-hero .lede { max-width: 52ch; color: var(--fg-dim); font-size: var(--fs-body); margin-top: 1.6rem; line-height: 1.55; text-wrap: balance; }

/* Prose */
.prose { max-width: 62ch; }
.prose p { margin-bottom: 1.3rem; color: var(--fg); }
.prose p.big, .prose p.big .thai { font-family: var(--serif); font-weight: 200; font-size: var(--fs-body); line-height: 1.25; color: var(--ink); }
.prose em { color: var(--accent); font-style: italic; }

/* Two column editorial */
.cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem,5vw,5rem); padding: clamp(3rem,9vh,7rem) 0; align-items: start; }
.cols.flip { grid-template-columns: 1.4fr 1fr; }
.cols__aside { position: sticky; top: calc(var(--nav-h) + 3vh); }
.cols__aside h3 { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: 1.05; margin-bottom: 1rem; }
.cols__aside .kicker { margin-bottom: 1rem; }
@media (max-width: 820px){ .cols, .cols.flip { grid-template-columns: 1fr; gap: 1.5rem; } .cols__aside { position: static; } }

/* Numbered steps */
.steps { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.step { background: var(--paper); padding: clamp(1.5rem,4vh,2.4rem) 0; display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; }
.step .n { font-family: var(--serif); font-size: var(--fs-section); color: var(--accent); }
.step h4 { font-size: var(--fs-section); margin-bottom: .5rem; }
.step p { color: var(--fg-dim); max-width: 60ch; }
@media (max-width:560px){ .step { grid-template-columns: 1fr; gap: .4rem; } }

/* Generic plate / specimen panel */
.plate { background: var(--ink); color: var(--paper); display: grid; place-items: center; aspect-ratio: 16/10; position: relative; overflow: hidden; }
.plate .glyph { font-family: var(--thai); font-weight: 200; font-size: var(--fs-section); line-height: .8; }
.plate.latin .glyph { font-family: var(--serif); }
.plate .cap { position: absolute; bottom: 1rem; left: 1.2rem; right: 1.2rem; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }

/* Section spacing */
.block { padding: clamp(4rem,10vh,8rem) 0; }
.block--tight { padding: clamp(2.5rem,6vh,4rem) 0; }

/* CTA band */
.band { background: var(--ink); color: var(--paper); padding: clamp(4rem,12vh,9rem) 0; text-align: left; }   /* 27-Aug: all text flush left */
.band h2 { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: 1; letter-spacing: -0.02em; margin-bottom: 2rem; }

/* ---- Fonts page ---- */
.font-item { border-top: 1px solid var(--hairline); padding: clamp(2rem,5vh,3.5rem) 0; }
.font-item__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.font-item__name { font-family: var(--serif); font-weight: 200; font-size: var(--fs-section); line-height: 1; }
.font-item__name .th { font-size: var(--fs-body); color: var(--fg-dim); margin-left: .3em; }
.font-item__tag { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; padding: .35em .9em; border: 1px solid currentColor; border-radius: 100px; }
.font-item__tag.free { color: var(--muted); } .font-item__tag.comm { color: var(--ink); }
.font-item__specimen { font-family: var(--serif); font-weight: 320; font-size: var(--fs-section); line-height: 1.05; margin: 1.2rem 0; letter-spacing: -0.01em; }
.font-item__specimen.thai { font-family: var(--thai); }
.font-item__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; color: var(--fg-dim); font-size: var(--fs-small); letter-spacing: .08em; }
.tester-bar { position: sticky; top: 0; z-index: 5; background: var(--paper); padding-bottom: clamp(.7rem,1.8vh,1.1rem); box-shadow: 0 20px 24px -20px rgba(20,20,20,.14); }
.tester-bar .shell { padding-top: clamp(1rem,2.2vh,1.5rem); }
.tester-field { position: relative; }
.tester-field__icon { position: absolute; left: .9em; top: 50%; transform: translateY(-50%); width: 1.5em; height: auto; color: var(--fg-dim); opacity: .55; pointer-events: none; }
.tester { width: 100%; background: rgba(0,0,0,.045); border: none; outline: none; color: inherit;
  font-family: var(--body); font-size: var(--fs-body); font-weight: 200;
  border-radius: 12px; padding: .65em .9em .65em 2.3em; cursor: text; transition: background .25s; }
.tester:hover { background: rgba(0,0,0,.065); }
.tester:focus { background: rgba(0,0,0,.09); }
.tester::placeholder { color: var(--fg-dim); opacity: .6; }
.tester-hint2 { font-size: var(--fs-small); letter-spacing: .04em; color: var(--fg-dim); margin-top: .6rem; }
.font-item__controls { display: flex; flex-wrap: wrap; gap: 1.3rem; align-items: center; color: var(--fg-dim); font-size: var(--fs-small); letter-spacing: .08em; margin-bottom: 1.2rem; }
.font-item__controls label { display: inline-flex; align-items: center; gap: .5em; }

/* ---- Maps page ---- */
.map-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; }
.map-svg { background: var(--ink); border-radius: 4px; min-height: 60vh; position: relative; overflow: hidden; }
.map-svg svg { width: 100%; height: 100%; }
.map-pin { cursor: pointer; }
.map-list { display: flex; flex-direction: column; }
.map-loc { border-top: 1px solid var(--hairline); padding: 1.3rem 0; cursor: pointer; transition: padding-left .3s, background .3s; }
.map-loc:hover, .map-loc.active { padding-left: 1rem; background: rgba(13,13,12,.04); }
.map-loc__city { font-family: var(--serif); font-size: var(--fs-section); }
.map-loc__city .co { font-family: var(--grotesk); font-size: var(--fs-small); letter-spacing: .12em; color: var(--fg-dim); margin-left: 1rem; }
.map-loc__desc { color: var(--fg-dim); font-size: var(--fs-body); margin-top: .3rem; }
@media (max-width: 820px){ .map-wrap { grid-template-columns: 1fr; } .map-svg { min-height: 42vh; } }

/* ---- Collaborators ---- */
.collab-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr));   /* minmax: long names wrap instead of pushing the page wider (overflowed at 1024px) */
  overflow-wrap: break-word; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.collab { background: var(--paper); padding: clamp(1.6rem,3vw,2.4rem); min-height: clamp(180px,24vh,260px); display: flex; flex-direction: column; justify-content: space-between; transition: background .4s, color .4s; }
.collab:hover { background: var(--accent); color: var(--paper); }
.collab .role { font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.collab .nm { font-family: var(--serif); font-size: var(--fs-section); line-height: 1.05; }
.collab .nt { font-size: var(--fs-body); opacity: .8; margin-top: .4rem; }
@media (max-width: 820px){ .collab-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .collab-grid { grid-template-columns: 1fr; } }

/* ---- About ---- */
/* "Timeline" heading dropped per client feedback (2026-09-13): the section
   label is just "2009 - present", body-text size, bold, left position. */
.tl-label { font-family: var(--serif); font-weight: 700; font-size: var(--fs-body); }
.timeline { border-top: 1px solid var(--hairline); }
.tl { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--hairline); }
/* Year matches the row's body text (h4) in size, 2 weight-steps bolder
   (200 Thin -> 400 Regular), same line as that text — client feedback 2026-09-13. */
.tl .yr { font-family: var(--serif); font-size: var(--fs-body); font-weight: 400; color: var(--accent); }
.tl h4, .tl h3 { font-family: var(--serif); font-weight: 200; font-size: var(--fs-body); margin-bottom: .3rem; }
.tl h4 .thai, .tl h3 .thai { font-family: var(--thai); }
.tl p { color: var(--fg-dim); max-width: 56ch; }
@media (max-width:560px){ .tl { grid-template-columns: 1fr; gap: .3rem; } }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); padding: clamp(2rem,6vh,4rem) 0 clamp(5rem,12vh,9rem); }
.field { margin-bottom: 1.8rem; }
.field label { display: block; font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: .6rem; }
/* line-free: filled field instead of an underline stroke */
.field input, .field textarea { width: 100%; background: rgba(0,0,0,.04); border: none; border-radius: 8px; padding: .85rem 1rem; font: inherit; color: var(--ink); outline: none; transition: background .25s; }
.field input:focus, .field textarea:focus { background: rgba(0,0,0,.08); }
.field textarea { resize: vertical; min-height: 100px; }
.contact-info h4 { font-size: var(--fs-small); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); margin: 1.5rem 0 .5rem; }
.contact-info .big { font-family: var(--serif); font-size: var(--fs-section); }
@media (max-width: 820px){ .contact-grid { grid-template-columns: minmax(0,1fr); } }   /* was 1fr: the email line held the page at 470px wide on phones */
.contact-info .big { overflow-wrap: break-word; }   /* breaks at the <wbr> before @ first; mid-word only as a last resort */