/* =====================================================================
   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: clamp(3rem,8vw,7rem); color: var(--paper-dim); line-height: 1; }
.page-hero h1 { font-family: var(--serif); font-weight: 320; font-size: var(--fs-h1); line-height: .92; letter-spacing: -0.02em; max-width: 16ch; }
.page-hero h1 .th { font-family: var(--thai); font-weight: 300; display: block; font-size: .42em; color: var(--fg-dim); margin-top: .3rem; }
.page-hero .lede { max-width: 52ch; color: var(--fg-dim); font-size: clamp(1.05rem,1.4vw,1.35rem); margin-top: 1.6rem; line-height: 1.55; }

/* 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: 330; font-size: var(--fs-h3); 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: 340; font-size: var(--fs-h3); 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-h3); color: var(--accent); }
.step h4 { font-size: 1.2rem; 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: 250; font-size: clamp(7rem,20vw,16rem); 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: center; }
.band h2 { font-family: var(--serif); font-weight: 320; font-size: var(--fs-h1); 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: 330; font-size: clamp(2rem,5vw,3.4rem); line-height: 1; }
.font-item__name .th { font-family: var(--thai); font-size: .5em; 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: clamp(2.4rem,9vw,6rem); 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 { width: 100%; background: none; border: none; outline: none; font: inherit; color: inherit; }

/* ---- 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: clamp(1.6rem,3vw,2.4rem); }
.map-loc__city .co { font-family: var(--grotesk); font-size: .7rem; letter-spacing: .12em; color: var(--fg-dim); margin-left: 1rem; }
.map-loc__desc { color: var(--fg-dim); font-size: .95rem; 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,1fr); 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: clamp(1.4rem,2.6vw,2rem); line-height: 1.05; }
.collab .nt { font-size: .9rem; 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 { 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); }
.tl .yr { font-family: var(--serif); font-size: var(--fs-h3); color: var(--accent); }
.tl h4 { font-size: 1.1rem; margin-bottom: .3rem; }
.tl p { color: var(--fg-dim); max-width: 56ch; }
@media (max-width:560px){ .tl { grid-template-columns: 1fr; gap: .3rem; } }
.portrait { aspect-ratio: 3/4; background: var(--ink); color: var(--paper); display: grid; place-items: center; position: relative; overflow: hidden; }
.portrait .mono { font-family: var(--thai); font-weight: 250; font-size: clamp(8rem,18vw,14rem); }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 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: clamp(1.4rem,3vw,2.2rem); }
@media (max-width: 820px){ .contact-grid { grid-template-columns: 1fr; } }