/*
Theme Name: Poh-Chang Heritage
Theme URI: https://www.rmutr.ac.th/
Author: วิทยาลัยเพาะช่าง มหาวิทยาลัยเทคโนโลยีราชมงคลรัตนโกสินทร์
Description: ธีมสำหรับวิทยาลัยเพาะช่าง ถ่ายทอดเอกลักษณ์ช่างไทย — ลายรดน้ำทองบนพื้นรักดำ สีชาด ลายประจำยาม กรวยเชิง และเลขไทย เพื่อบอกเล่าเรื่องราวของโรงเรียนศิลปะที่สืบสานวิถีแห่งช่างไทยมากว่าศตวรรษ
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pohchang
Tags: education, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   1. Tokens — สีจากงานช่างไทย
   รักดำ (lacquer) · ทองคำเปลว (gold leaf) · ชาด (vermilion) · กระดาษข่อย (khoi paper)
   ========================================================= */
:root {
	--ph-lacquer: #15110e;
	--ph-lacquer-2: #211a15;
	--ph-lacquer-3: #2d241d;
	--ph-gold: #c8a04a;
	--ph-gold-light: #e7cc85;
	--ph-gold-deep: #94701f;
	/* สีประจำสถาบัน แดง–ดำ: แดง คือเลือดของช่าง */
	--ph-vermilion: #a51c1c;
	--ph-vermilion-deep: #761212;
	--ph-khoi: #f5eddd;
	--ph-khoi-2: #ebdfc6;
	--ph-ink: #2a211b;
	--ph-muted: #6f6052;
	--ph-line: rgba(148, 112, 31, .28);

	--ph-font-display: "Chonburi", "Noto Serif Thai", serif;
	--ph-font-body: "Sarabun", "Noto Sans Thai", system-ui, sans-serif;

	--ph-container: 1200px;
	--ph-gutter: clamp(16px, 4vw, 32px);
	--ph-radius: 4px;
	--ph-section: clamp(64px, 9vw, 120px);

	/* ลายประจำยาม — gold on transparent */
	--ph-pattern-prajamyam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c8a04a' stroke-width='1'%3E%3Cpath d='M30 1 59 30 30 59 1 30Z' stroke-opacity='.35'/%3E%3Cpath d='M30 29C25 24 25 15 30 9c5 6 5 15 0 20ZM31 30c5-5 14-5 20 0-6 5-15 5-20 0ZM30 31c5 5 5 14 0 20-5-6-5-15 0-20ZM29 30c-5 5-14 5-20 0 6-5 15-5 20 0Z'/%3E%3Ccircle cx='30' cy='30' r='2.5' fill='%23c8a04a'/%3E%3C/g%3E%3C/svg%3E");
	/* กรวยเชิง — hanging triangles with flame tips */
	--ph-pattern-kruay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cpath d='M0 0h32L17.2 16.4a1.6 1.6 0 0 1-2.4 0Z' fill='%23c8a04a'/%3E%3Cpath d='M7 0h18L16.9 9.6a1.2 1.2 0 0 1-1.8 0Z' fill='%2315110e'/%3E%3Ccircle cx='16' cy='3.2' r='1.6' fill='%23c8a04a'/%3E%3C/svg%3E");
	--ph-pattern-kruay-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18'%3E%3Cpath d='M0 18h32L17.2 1.6a1.6 1.6 0 0 0-2.4 0Z' fill='%23c8a04a'/%3E%3Cpath d='M7 18h18L16.9 8.4a1.2 1.2 0 0 0-1.8 0Z' fill='%2315110e'/%3E%3Ccircle cx='16' cy='14.8' r='1.6' fill='%23c8a04a'/%3E%3C/svg%3E");
	/* ลายเหล็กดัด — window grille of ตึกอำนวยการ (wing pattern), from the 3D model */
	--ph-pattern-grille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 54.1' fill='none' stroke='%23c8a04a' stroke-width='1'%3E%3Cpath d='M5.3 0v54.1M64.7 0v54.1M0 2.2h70M0 51.9h70' opacity='.55'/%3E%3Cpath d='M35 2.2v8.9M35 43.1v8.8M5.3 27.05h13M51.7 27.05h13'/%3E%3Crect x='18.3' y='11.1' width='33.4' height='32'/%3E%3Crect x='19.6' y='12' width='30.8' height='30.1' opacity='.6'/%3E%3Crect x='23' y='14.7' width='24' height='24.4'/%3E%3Cpath d='M18.3 11.1l4.7 3.6M51.7 11.1 47 14.7M51.7 43.1 47 39.1M18.3 43.1l4.7-4'/%3E%3Cpath d='M35 20.4l6.6 6.65L35 33.7l-6.6-6.65Z'/%3E%3Ccircle cx='35' cy='27.05' r='3.7'/%3E%3Ccircle cx='35' cy='27.05' r='2.1'/%3E%3C/svg%3E");
	--ph-pattern-grille-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 54.1' fill='none' stroke='%23fff4e3' stroke-width='1'%3E%3Cpath d='M5.3 0v54.1M64.7 0v54.1M0 2.2h70M0 51.9h70' opacity='.55'/%3E%3Cpath d='M35 2.2v8.9M35 43.1v8.8M5.3 27.05h13M51.7 27.05h13'/%3E%3Crect x='18.3' y='11.1' width='33.4' height='32'/%3E%3Crect x='19.6' y='12' width='30.8' height='30.1' opacity='.6'/%3E%3Crect x='23' y='14.7' width='24' height='24.4'/%3E%3Cpath d='M18.3 11.1l4.7 3.6M51.7 11.1 47 14.7M51.7 43.1 47 39.1M18.3 43.1l4.7-4'/%3E%3Cpath d='M35 20.4l6.6 6.65L35 33.7l-6.6-6.65Z'/%3E%3Ccircle cx='35' cy='27.05' r='3.7'/%3E%3Ccircle cx='35' cy='27.05' r='2.1'/%3E%3C/svg%3E");
}

/* =========================================================
   2. Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--ph-khoi);
	color: var(--ph-ink);
	font-family: var(--ph-font-body);
	font-size: 1.0625rem;
	line-height: 1.8;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ph-vermilion); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--ph-vermilion-deep); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ph-font-display);
	font-weight: 400;
	line-height: 1.35;
	color: var(--ph-lacquer);
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.2em; }

::selection { background: var(--ph-gold); color: var(--ph-lacquer); }

:focus-visible { outline: 2px solid var(--ph-gold); outline-offset: 3px; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto; margin: 0;
	left: 8px; top: 8px; z-index: 100000; padding: 12px 20px;
	background: var(--ph-gold); color: var(--ph-lacquer); font-weight: 700;
}

.ph-container { width: 100%; max-width: var(--ph-container); margin: 0 auto; padding: 0 var(--ph-gutter); }
.ph-container--narrow { max-width: 780px; }

/* =========================================================
   3. Buttons & small ornaments
   ========================================================= */
.ph-btn {
	display: inline-flex; align-items: center; gap: .6em;
	padding: .85em 1.7em;
	font-family: var(--ph-font-body); font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none; border: 1px solid transparent; border-radius: var(--ph-radius);
	cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.ph-btn:hover { transform: translateY(-2px); }
.ph-btn--gold { background: var(--ph-gold); color: var(--ph-lacquer); }
.ph-btn--gold:hover { background: var(--ph-gold-light); color: var(--ph-lacquer); }
.ph-btn--ghost { border-color: var(--ph-gold); color: var(--ph-gold-light); background: transparent; }
.ph-btn--ghost:hover { background: rgba(200, 160, 74, .12); color: var(--ph-gold-light); }
.ph-btn--dark { background: var(--ph-lacquer); color: var(--ph-khoi); }
.ph-btn--dark:hover { background: var(--ph-lacquer-3); color: var(--ph-gold-light); }
.ph-btn--light { background: var(--ph-khoi); color: var(--ph-vermilion-deep); }
.ph-btn--light:hover { background: #fff; color: var(--ph-vermilion); }

.ph-eyebrow {
	display: inline-flex; align-items: center; gap: .7em;
	font-size: .88rem; font-weight: 600; letter-spacing: .04em;
	color: var(--ph-vermilion); margin-bottom: .8rem;
}
.ph-eyebrow::before {
	content: ""; width: 10px; height: 10px; transform: rotate(45deg);
	background: currentColor; flex: none;
}

/* ornament divider: line — ประจำยาม — line */
.ph-ornament {
	display: flex; align-items: center; gap: 14px;
	color: var(--ph-gold-deep); margin: 1rem 0 0;
}
.ph-ornament::before, .ph-ornament::after {
	content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, currentColor);
	max-width: 120px;
}
.ph-ornament::after { background: linear-gradient(-90deg, transparent, currentColor); }
.ph-ornament svg { width: 26px; height: 26px; flex: none; }
.ph-heading--center { text-align: center; }
.ph-heading--center .ph-ornament { justify-content: center; }
.ph-heading { margin-bottom: clamp(36px, 5vw, 60px); }
.ph-heading p { max-width: 640px; color: var(--ph-muted); margin-top: .8rem; }
.ph-heading--center p { margin-left: auto; margin-right: auto; }

/* กรวยเชิง bands */
/* Bands overlap the neighbouring section so they never leave a stray strip. */
.ph-kruay { position: relative; z-index: 2; height: 18px; margin-bottom: -18px; pointer-events: none; background: var(--ph-pattern-kruay) repeat-x top center / 32px 18px; }
.ph-kruay--up { margin: -18px 0 0; background-image: var(--ph-pattern-kruay-up); background-position: bottom center; }
.ph-footer__fringe { margin: 0; }

/* พื้นรักดำ */
.ph-lacquer {
	position: relative; background: var(--ph-lacquer); color: #e9dfcc;
	isolation: isolate;
}
.ph-lacquer::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--ph-pattern-prajamyam) repeat center / 60px 60px;
	opacity: .08;
}
.ph-lacquer h1, .ph-lacquer h2, .ph-lacquer h3, .ph-lacquer h4 { color: var(--ph-gold-light); }
.ph-lacquer .ph-eyebrow { color: var(--ph-gold); }
.ph-lacquer .ph-heading p { color: #b9ab95; }
.ph-lacquer a:not(.ph-btn) { color: var(--ph-gold-light); }
.ph-lacquer a:not(.ph-btn):hover { color: #fff; }

/* =========================================================
   4. Header
   ========================================================= */
.ph-topbar {
	background: var(--ph-vermilion-deep); color: #f3d9c9;
	font-size: .82rem; line-height: 1.4;
}
.ph-topbar .ph-container { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 7px; padding-bottom: 7px; }
.ph-topbar a { color: #f7e5d8; text-decoration: none; }
.ph-topbar a:hover { color: #fff; }
.ph-topbar__links { display: flex; gap: 18px; flex-wrap: wrap; }
.ph-topbar__links li { list-style: none; }
@media (max-width: 720px) { .ph-topbar__links { display: none; } }

.ph-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--ph-lacquer); color: var(--ph-khoi);
	transition: box-shadow .3s;
}
.admin-bar .ph-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ph-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ph-header { top: 0; } }
.ph-header::after {
	content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
	background: var(--ph-pattern-kruay) repeat-x top center / 22px 12px;
	pointer-events: none;
}
.ph-header.is-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }

.ph-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; transition: min-height .3s; }
.ph-header.is-scrolled .ph-header__inner { min-height: 68px; }

.ph-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; min-width: 0; }
.ph-brand:hover { color: inherit; }
.ph-brand .custom-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; background: #fff; padding: 2px; box-shadow: 0 0 0 2px var(--ph-gold), 0 0 0 5px rgba(200, 160, 74, .2); }
.ph-brand__emblem { width: 52px; height: 52px; flex: none; color: var(--ph-gold); }
.ph-brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ph-brand__name { font-family: var(--ph-font-display); font-size: 1.3rem; color: var(--ph-gold-light); white-space: nowrap; }
.ph-brand__tagline { font-size: .78rem; letter-spacing: .08em; color: #b6a78f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ph-nav ul { list-style: none; margin: 0; padding: 0; }
.ph-nav > ul { display: flex; align-items: center; gap: 4px; }
.ph-nav li { position: relative; }
.ph-nav a {
	display: block; padding: .55em .9em; color: #eadfca; text-decoration: none;
	font-weight: 500; font-size: .98rem; border-radius: var(--ph-radius); white-space: nowrap;
}
.ph-nav a:hover, .ph-nav .current-menu-item > a, .ph-nav .current_page_item > a, .ph-nav .current-menu-ancestor > a { color: var(--ph-gold-light); }
.ph-nav > ul > li > a { position: relative; }
.ph-nav > ul > li > a::after {
	content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px;
	background: var(--ph-gold); transform: translateX(-50%) rotate(45deg) scale(0); transition: transform .25s;
}
.ph-nav > ul > li > a:hover::after,
.ph-nav > ul > .current-menu-item > a::after,
.ph-nav > ul > .current_page_item > a::after { transform: translateX(-50%) rotate(45deg) scale(1); }

.ph-nav .sub-menu, .ph-nav .children {
	position: absolute; top: 100%; left: 0; min-width: 220px; padding: 10px 0;
	background: var(--ph-lacquer-2); border-top: 2px solid var(--ph-gold);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s;
}
.ph-nav li:hover > .sub-menu, .ph-nav li:focus-within > .sub-menu,
.ph-nav li:hover > .children, .ph-nav li:focus-within > .children { opacity: 1; visibility: visible; transform: none; }
.ph-nav .sub-menu a, .ph-nav .children a { padding: .5em 1.2em; font-size: .94rem; }
.ph-nav .sub-menu .sub-menu { top: -10px; left: 100%; }

.ph-header__cta { flex: none; }

/* Header tools: social icons + search (Customizer > ส่วนหัว) */
.ph-header__tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ph-header__social, .ph-nav__social { display: flex; align-items: center; gap: 6px; }
.ph-header__social a, .ph-nav__social a, .ph-search-toggle {
	width: 34px; height: 34px; display: grid; place-items: center; flex: none; padding: 0;
	color: var(--ph-gold-light); background: none; border: 1px solid rgba(200, 160, 74, .35); border-radius: 50%;
	cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.ph-header__social a:hover, .ph-nav__social a:hover, .ph-search-toggle:hover, .ph-search-toggle[aria-expanded="true"] { background: var(--ph-gold); border-color: var(--ph-gold); color: var(--ph-lacquer); }
.ph-header__social svg, .ph-nav__social svg { width: 15px; height: 15px; }
.ph-search-toggle { width: 40px; height: 40px; }
.ph-search-toggle svg { width: 18px; height: 18px; }
.ph-search-toggle__close, .ph-search-toggle[aria-expanded="true"] .ph-search-toggle__open { display: none; }
.ph-search-toggle[aria-expanded="true"] .ph-search-toggle__close { display: block; }
.ph-header__social + .ph-search-toggle { margin-left: 4px; }
.ph-nav__social { display: none; }

/* Search bar: drops down under the header */
.ph-hsearch {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 18px 0 20px;
	background: var(--ph-lacquer-2); border-top: 1px solid rgba(200, 160, 74, .25); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	animation: ph-hsearch-in .25s ease;
}
.ph-hsearch[hidden] { display: none; }
@keyframes ph-hsearch-in { from { opacity: 0; transform: translateY(-8px); } }
.ph-hsearch__form { position: relative; display: flex; gap: 12px; align-items: stretch; }
.ph-hsearch__icon { position: absolute; left: calc(var(--ph-gutter) + 16px); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ph-gold); pointer-events: none; }
.ph-hsearch__form input {
	flex: 1; min-width: 0; height: 50px; padding: 0 16px 0 48px; font: inherit; font-size: 1.05rem; color: #fff;
	background: rgba(0, 0, 0, .25); border: 1px solid rgba(200, 160, 74, .45); border-radius: 0; outline: none;
}
.ph-hsearch__form input::placeholder { color: #9d8f79; }
.ph-hsearch__form input:focus { border-color: var(--ph-gold); box-shadow: 0 0 0 3px rgba(200, 160, 74, .18); }
.ph-hsearch__form .ph-btn { flex: none; }
@media (prefers-reduced-motion: reduce) { .ph-hsearch { animation: none; } }
@media (max-width: 1023px) {
	.ph-header__tools { gap: 10px; }
	.ph-header__social a { width: 30px; height: 30px; }
	.ph-brand__tagline { display: none; }
}
@media (max-width: 767px) {
	.ph-header__social { display: none; }
	.ph-header__tools { margin-left: auto; }
	.ph-nav__social { display: flex; padding: 18px var(--ph-gutter) 26px; gap: 10px; }
	.ph-nav__social a { width: 40px; height: 40px; }
	.ph-hsearch__form .ph-btn { padding-inline: 1em; }
}

.ph-menu-toggle {
	display: none; background: none; border: 1px solid rgba(200, 160, 74, .5); color: var(--ph-gold-light);
	width: 46px; height: 46px; border-radius: var(--ph-radius); cursor: pointer; padding: 0;
	align-items: center; justify-content: center;
}
.ph-menu-toggle span, .ph-menu-toggle span::before, .ph-menu-toggle span::after {
	display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: .25s;
}
.ph-menu-toggle span::before, .ph-menu-toggle span::after { content: ""; position: absolute; left: 0; }
.ph-menu-toggle span::before { top: -6px; }
.ph-menu-toggle span::after { top: 6px; }
.ph-menu-toggle[aria-expanded="true"] span { background: transparent; }
.ph-menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.ph-menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 767px) {
	.ph-menu-toggle { display: inline-flex; }
	.ph-header__cta { display: none; }
	.ph-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--ph-lacquer-2); border-top: 1px solid rgba(200, 160, 74, .25);
		max-height: 0; overflow: hidden; transition: max-height .35s ease;
	}
	.ph-nav.is-open {
		max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
		overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
	}
	.ph-nav.is-open::-webkit-scrollbar { display: none; }
	.ph-nav > ul { flex-direction: column; align-items: stretch; padding: 16px var(--ph-gutter) 28px; gap: 0; }
	.ph-nav a { padding: .8em 0; border-bottom: 1px solid rgba(200, 160, 74, .12); }
	.ph-nav > ul > li > a::after { display: none; }
	.ph-nav .sub-menu, .ph-nav .children {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; background: none; padding: 0 0 0 16px;
	}
	.ph-header__inner { position: static; }
	.ph-header { position: sticky; }
}

/* =========================================================
   5. Hero
   ========================================================= */
.ph-hero {
	min-height: min(88vh, 860px);
	display: flex; align-items: center;
	padding: clamp(80px, 10vw, 130px) 0 clamp(70px, 8vw, 110px);
	overflow: hidden;
}
.ph-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(ellipse 60% 70% at 78% 45%, rgba(200, 160, 74, .16), transparent 70%),
		radial-gradient(ellipse 50% 60% at 0% 100%, rgba(168, 50, 31, .22), transparent 70%);
}
.ph-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ph-hero__since {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 1rem; letter-spacing: .06em; color: var(--ph-gold); margin-bottom: 1.2rem;
}
.ph-hero__since::before, .ph-hero__since::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.ph-hero__title {
	font-size: clamp(3.6rem, 11vw, 8rem); line-height: 1.05; margin: 0 0 .2em;
	background: linear-gradient(180deg, #f3dfa6 0%, var(--ph-gold) 55%, var(--ph-gold-deep) 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
	text-shadow: none; padding-top: .15em;
}
.ph-hero__subtitle { font-family: var(--ph-font-display); font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: #efe4cf; margin-bottom: 1rem; }
.ph-hero__lead { max-width: 560px; color: #bfb19b; font-size: 1.08rem; }
.ph-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

.ph-hero__visual { position: relative; justify-self: center; width: min(100%, 440px); }

/* ซุ้มโค้ง — Thai arched niche frame */
.ph-arch {
	position: relative; aspect-ratio: 4 / 5;
	border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
	padding: 10px; background: linear-gradient(160deg, var(--ph-gold-light), var(--ph-gold-deep));
	box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.ph-arch__inner {
	position: relative; height: 100%; overflow: hidden;
	border-radius: 50% 50% 2px 2px / 32% 32% 2px 2px;
	background: var(--ph-lacquer-2);
	outline: 1px solid rgba(21, 17, 14, .6); outline-offset: -8px;
}
.ph-arch__inner img { width: 100%; height: 100%; object-fit: cover; }
.ph-arch__finial {
	position: absolute; left: 50%; top: -46px; width: 40px; height: 60px; transform: translateX(-50%);
	color: var(--ph-gold);
}
.ph-mandala { position: absolute; inset: 0; display: grid; place-items: center; }
.ph-mandala svg { width: 86%; height: auto; color: var(--ph-gold); animation: ph-spin 120s linear infinite; }
@keyframes ph-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ph-mandala svg { animation: none; } }

.ph-hero__badge {
	position: absolute; left: -28px; bottom: 36px;
	width: 132px; height: 132px; border-radius: 50%;
	display: grid; place-content: center; text-align: center;
	background: var(--ph-vermilion); color: #fbe9dc;
	border: 3px solid var(--ph-gold); box-shadow: 0 0 0 6px var(--ph-lacquer), 0 18px 40px rgba(0,0,0,.4);
	line-height: 1.1;
}
.ph-hero__badge strong { font-family: var(--ph-font-display); font-weight: 400; font-size: 2.4rem; color: var(--ph-gold-light); display: block; }
.ph-hero__badge span { font-size: .78rem; letter-spacing: .1em; }

@media (max-width: 900px) {
	.ph-hero__grid { grid-template-columns: 1fr; }
	.ph-hero__visual { width: min(80%, 360px); margin-top: 40px; }
	.ph-hero__badge { width: 108px; height: 108px; left: -16px; }
	.ph-hero__badge strong { font-size: 1.9rem; }
}

/* =========================================================
   6. Sections
   ========================================================= */
.ph-section { padding: var(--ph-section) 0; position: relative; }
.ph-section--paper { background: var(--ph-khoi); }
.ph-section--paper-2 { background: var(--ph-khoi-2); }

/* 6a. Story / meaning of name */
.ph-story__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.ph-story__word {
	position: relative; padding: clamp(28px, 4vw, 48px);
	border: 1px solid var(--ph-line); background: rgba(255, 255, 255, .35);
}
.ph-story__word::before, .ph-story__word::after {
	content: ""; position: absolute; width: 38px; height: 38px; border: 2px solid var(--ph-gold);
}
.ph-story__word::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.ph-story__word::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }
.ph-word { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: baseline; }
.ph-word + .ph-word { margin-top: 26px; padding-top: 26px; border-top: 1px dashed var(--ph-line); }
.ph-word__term { font-family: var(--ph-font-display); font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--ph-vermilion); line-height: 1.1; }
.ph-word__def { color: var(--ph-muted); margin: 0; }
.ph-word__def strong { display: block; color: var(--ph-ink); font-size: 1.1rem; }
/* Thai has leading vowels (เ แ โ ไ ใ), so ::first-letter drop caps break words — use a lead paragraph instead. */
.ph-story__body .ph-dropcap { font-size: 1.2rem; color: var(--ph-ink); }
/* คำคัดเน้นพร้อมแถบสีประจำสถาบัน แดง–ดำ */
.ph-story__body blockquote {
	position: relative; margin: 1.8rem 0 0; padding: 1.1rem 0 1.1rem 1.6rem;
	font-family: var(--ph-font-display); font-size: 1.15rem; color: var(--ph-lacquer-3);
}
.ph-story__body blockquote::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
	background: linear-gradient(var(--ph-vermilion) 50%, var(--ph-lacquer) 50%);
}
.ph-story__body blockquote cite {
	display: block; margin-top: .7rem; font-family: var(--ph-font-body); font-style: normal;
	font-size: .9rem; color: var(--ph-muted);
}
@media (max-width: 900px) { .ph-story__grid { grid-template-columns: 1fr; } }

/* 6a+. Story, compact: heading + meanings on the left, one lead paragraph + quote on the right,
   the rest of the story folds behind "อ่านเรื่องเต็ม". */
.ph-section.ph-story { padding-block: clamp(56px, 7vw, 88px); }
.ph-story .ph-story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ph-story__intro h2 { margin: .35rem 0 1.4rem; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.ph-story .ph-story__word { padding: 22px 24px; }
.ph-story .ph-word { grid-template-columns: 84px 1fr; gap: 4px 16px; }
.ph-story .ph-word + .ph-word { margin-top: 16px; padding-top: 16px; }
.ph-story .ph-word__term { font-size: clamp(1.9rem, 3.2vw, 2.4rem); }
.ph-story .ph-word__def { font-size: .92rem; line-height: 1.65; }
.ph-story .ph-word__def strong { font-size: 1rem; margin-bottom: 2px; }
.ph-story__body { padding-top: .4rem; }
.ph-story__body p { margin: 0 0 1rem; }
.ph-story__body .ph-dropcap { font-size: 1.08rem; line-height: 1.85; }
.ph-story__rest[hidden] { display: none; }
.ph-story__more {
	display: inline-flex; align-items: center; gap: 8px; padding: 0; margin: -.2rem 0 .4rem;
	font: inherit; font-size: .95rem; font-weight: 600; color: var(--ph-vermilion); background: none; border: 0; cursor: pointer;
}
.ph-story__more::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.ph-story__more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.ph-story__more:hover { text-decoration: underline; }
.ph-story__more [hidden] { display: none; }
.ph-story__body blockquote { margin-top: 1.2rem; padding: .7rem 0 .7rem 1.4rem; font-size: 1.05rem; line-height: 1.7; }
.ph-story__body blockquote cite { margin-top: .4rem; font-size: .85rem; }
.ph-lacquer .ph-story__more { color: var(--ph-gold-light); }
@media (max-width: 900px) {
	.ph-story .ph-story__grid { grid-template-columns: minmax(0, 1fr); }
	.ph-story__intro h2 { margin-bottom: 1rem; }
}

/* 6b. ช่างสิบหมู่ */
.ph-crafts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(200, 160, 74, .22); border: 1px solid rgba(200, 160, 74, .22); }
.ph-craft {
	position: relative; padding: 30px 22px 28px; background: var(--ph-lacquer);
	transition: background .3s;
}
.ph-craft:hover { background: var(--ph-lacquer-2); }
.ph-craft__num {
	font-family: var(--ph-font-display); font-size: 2.6rem; line-height: 1; color: var(--ph-gold);
	display: block; margin-bottom: 14px; transition: transform .35s;
}
.ph-craft:hover .ph-craft__num { transform: translateY(-4px); color: var(--ph-gold-light); }
.ph-craft h3 { font-size: 1.2rem; margin-bottom: .35em; }
.ph-craft p { font-size: .92rem; color: #ad9f89; margin: 0; line-height: 1.65; }
.ph-craft::after {
	content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px;
	background: var(--ph-vermilion); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.ph-craft:hover::after { transform: scaleX(1); }
@media (max-width: 1024px) { .ph-crafts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ph-craft { padding: 22px 16px; } }

/* 6c. สาขาวิชา — the same grid, each card links to its major; 14 + ปริญญาโท fill 5 × 3 */
a.ph-craft { display: block; color: inherit; text-decoration: none; }
a.ph-craft:focus-visible { outline: 2px solid var(--ph-gold-light); outline-offset: -4px; }
.ph-crafts--programs .ph-craft h3 { font-size: 1.1rem; line-height: 1.45; }
.ph-crafts--programs .ph-craft__num { font-size: 2.2rem; }
.ph-craft--master {
	background: linear-gradient(150deg, rgba(200, 160, 74, .2), rgba(165, 28, 28, .22)), var(--ph-lacquer);
	--ph-card-edge: var(--ph-gold);
}
.ph-craft--master:hover { background: linear-gradient(150deg, rgba(200, 160, 74, .3), rgba(165, 28, 28, .3)), var(--ph-lacquer-2); }
.ph-craft--master .ph-craft__num { color: var(--ph-gold-light); font-size: 1.9rem; }
.ph-craft--master p { color: #d6c7a8; }
.ph-craft__more { display: inline-block; margin-top: .9rem; font-size: .82rem; font-weight: 600; color: var(--ph-gold); opacity: .75; transition: opacity .25s, transform .25s; }
a.ph-craft:hover .ph-craft__more, a.ph-craft:focus-visible .ph-craft__more { opacity: 1; transform: translateX(4px); }
/* tablet: 3 × 5; phone: two columns, the master's card takes a full row so the grid stays even */
@media (max-width: 1024px) { .ph-crafts--programs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
	.ph-crafts--programs { grid-template-columns: repeat(2, 1fr); }
	.ph-crafts--programs .ph-craft--master:nth-child(odd) { grid-column: 1 / -1; }
}

/* 6c. Timeline */
.ph-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.ph-timeline::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
	background: linear-gradient(var(--ph-gold) 0 0) center / 2px 100% no-repeat;
	opacity: .55;
}
.ph-timeline__item { position: relative; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: start; }
.ph-timeline__item + .ph-timeline__item { margin-top: 36px; }
.ph-timeline__node {
	grid-column: 2; justify-self: center; margin-top: 10px;
	width: 34px; height: 34px; color: var(--ph-vermilion);
	background: var(--ph-khoi); border-radius: 50%; padding: 3px;
}
.ph-timeline__card {
	grid-row: 1; background: #fffaf0; border: 1px solid var(--ph-line); padding: 24px 28px;
	position: relative;
}
.ph-timeline__item:nth-child(odd) .ph-timeline__card { grid-column: 1; text-align: right; }
.ph-timeline__item:nth-child(even) .ph-timeline__card { grid-column: 3; }
.ph-timeline__year { font-family: var(--ph-font-display); font-size: 2rem; color: var(--ph-vermilion); line-height: 1.1; display: block; margin-bottom: 6px; }
.ph-timeline__card h3 { font-size: 1.2rem; margin-bottom: .3em; }
.ph-timeline__card p { color: var(--ph-muted); margin: 0; font-size: .98rem; }
.ph-timeline__card img { margin: 0 0 14px; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 800px) {
	.ph-timeline::before { left: 17px; }
	.ph-timeline__item { grid-template-columns: 34px 1fr; gap: 18px; }
	.ph-timeline__node { grid-column: 1; }
	.ph-timeline__item:nth-child(n) .ph-timeline__card { grid-column: 2; text-align: left; }
}

/* 6d. Cards (programs / news) */
.ph-grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.ph-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ph-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ph-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 1024px) { .ph-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .ph-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ph-grid--3, .ph-grid--4 { grid-template-columns: 1fr; } }

.ph-program {
	position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit;
	background: #fffaf0; border: 1px solid var(--ph-card-edge); transition: transform .3s, border-color .3s;
}
.ph-program:hover { transform: translateY(-6px); color: inherit; }
.ph-program__media {
	margin: 14px 14px 0; aspect-ratio: 4 / 3; overflow: hidden;
	border-radius: 50% 50% 0 0 / 22% 22% 0 0; background: var(--ph-lacquer);
}
.ph-program__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ph-program:hover .ph-program__media img { transform: scale(1.06); }
.ph-program__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.ph-program__body h3 { margin-bottom: .35em; }
.ph-program__body p { color: var(--ph-muted); font-size: .96rem; flex: 1; }
.ph-more { font-weight: 600; color: var(--ph-vermilion); display: inline-flex; align-items: center; gap: .4em; }
.ph-more::after { content: "→"; transition: transform .25s; }
a:hover .ph-more::after, .ph-more:hover::after { transform: translateX(4px); }

/* all majors — chips */
.ph-majors { margin-top: clamp(40px, 6vw, 64px); text-align: center; }
.ph-majors__title { font-size: 1.15rem; margin-bottom: 1.1rem; }
.ph-majors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ph-majors a {
	position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 1.1em;
	border: 1px solid var(--ph-line); background: #fffaf0; color: var(--ph-ink); text-decoration: none; font-size: .95rem;
	--ph-cut: 10px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ph-cut)), calc(100% - var(--ph-cut)) 100%, 0 100%);
	transition: background .2s, border-color .2s, color .2s;
}
.ph-majors a::after {
	content: ""; position: absolute; right: -1px; bottom: -1px; width: var(--ph-cut); height: var(--ph-cut);
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ph-line) calc(50% - 1px), var(--ph-line) calc(50% + .5px), transparent calc(50% + .5px));
}
.ph-majors a:hover { background: var(--ph-vermilion); border-color: var(--ph-vermilion); color: #fff; }

/* Any section can be switched to the lacquer tone — light cards keep dark text. */
.ph-lacquer :is(.ph-program, .ph-card, .ph-timeline__card) :is(h2, h3, h4) { color: var(--ph-lacquer); }
.ph-lacquer .ph-program, .ph-lacquer .ph-card__title a:not(.ph-btn), .ph-lacquer .ph-timeline__card a:not(.ph-btn) { color: var(--ph-ink); }
.ph-lacquer .ph-card__title a:not(.ph-btn):hover { color: var(--ph-vermilion); }
.ph-lacquer .ph-card__cat:not(.ph-btn) { color: var(--ph-vermilion); }
.ph-lacquer .ph-majors__title { color: var(--ph-gold-light); }
.ph-lacquer .ph-majors a:not(.ph-btn) { color: var(--ph-ink); }
.ph-lacquer .ph-majors a:not(.ph-btn):hover { color: #fff; }
.ph-lacquer .ph-timeline__node { background: var(--ph-lacquer); }
.ph-lacquer .ph-story__word { background: rgba(255, 255, 255, .04); }
.ph-lacquer .ph-word__def strong, .ph-lacquer .ph-story__body blockquote { color: #efe4cf; }
.ph-lacquer .ph-story__body blockquote::before { background: linear-gradient(var(--ph-vermilion) 50%, var(--ph-gold) 50%); }
.ph-lacquer .ph-story__body .ph-dropcap { color: #efe4cf; }

/* …and on paper tones, the lacquer-styled pieces keep their own contrast. */
.ph-craft h3 { color: var(--ph-gold-light); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-stat strong { color: var(--ph-vermilion); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-stat span { color: var(--ph-muted); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-stat + .ph-stat { border-left-color: var(--ph-line); }

/* Free content placed between section blocks. */
.ph-flow { padding: clamp(40px, 6vw, 72px) 0; }

/* placeholder art (no featured image) */
.ph-placeholder {
	position: relative; width: 100%; height: 100%; min-height: 160px;
	display: grid; place-items: center; overflow: hidden;
	background: radial-gradient(circle at 50% 60%, var(--ph-lacquer-3), var(--ph-lacquer) 70%);
	color: var(--ph-gold);
}
.ph-placeholder::before {
	content: ""; position: absolute; inset: 0; background: var(--ph-pattern-prajamyam) center / 44px 44px; opacity: .14;
}
.ph-placeholder__glyph { position: relative; font-family: var(--ph-font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--ph-gold-light); text-align: center; line-height: 1.3; padding: 0 12px; }
.ph-placeholder--initial .ph-placeholder__glyph {
	font-size: clamp(4rem, 8vw, 6rem); line-height: 1; padding: .2em .1em 0;
	background: linear-gradient(180deg, #f3dfa6, var(--ph-gold) 60%, var(--ph-gold-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ph-program__media .ph-placeholder, .ph-card__media .ph-placeholder { min-height: 0; }

/* 6e. Artworks gallery */
.ph-works { columns: 3 280px; column-gap: 20px; }
.ph-work { break-inside: avoid; margin: 0 0 20px; position: relative; overflow: hidden; background: var(--ph-lacquer-2); }
.ph-work a { display: block; color: inherit; text-decoration: none; }
.ph-work img { width: 100%; transition: transform .6s, filter .6s; }
.ph-work:hover img { transform: scale(1.04); filter: brightness(.55); }
.ph-work { border: 1px solid rgba(200, 160, 74, .3); }
.ph-work .ph-placeholder {
	aspect-ratio: var(--ratio, 4/5);
	background: radial-gradient(circle at 50% 45%, #4a3a2c, #241c16 75%);
	outline: 1px solid rgba(200, 160, 74, .35); outline-offset: -12px;
}
.ph-work figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 18px;
	background: linear-gradient(transparent, rgba(12, 9, 7, .92));
	transform: translateY(35%); opacity: 0; transition: .35s;
}
.ph-work:hover figcaption, .ph-work:focus-within figcaption { transform: none; opacity: 1; }
.ph-work figcaption strong { display: block; font-family: var(--ph-font-display); font-weight: 400; color: var(--ph-gold-light); font-size: 1.1rem; }
.ph-work figcaption span { font-size: .88rem; color: #cbbca4; }
@media (hover: none) { .ph-work figcaption { transform: none; opacity: 1; } }
.ph-work figcaption .ph-work__cat { display: inline-block; margin-bottom: 4px; font-style: normal; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--ph-lacquer); background: var(--ph-gold); padding: 2px 8px; }

/* Bento: tiles of mixed sizes. Every 8 tiles fill a 4 × 4 block exactly:
   1 = 2×2, 4 / 6 / 8 = wide, 5 / 7 = tall (the same set also packs 2 columns). */
.ph-works--bento {
	columns: auto; display: grid; grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: clamp(150px, 16vw, 210px); grid-auto-flow: dense; gap: 14px;
}
.ph-works--bento .ph-work { margin: 0; min-height: 0; }
.ph-works--bento .ph-work > a, .ph-works--bento .ph-work__ph { display: block; height: 100%; }
.ph-works--bento .ph-work img { height: 100%; object-fit: cover; }
.ph-works--bento .ph-work .ph-placeholder { aspect-ratio: auto; height: 100%; }
.ph-works--bento:not(.is-tiled) .ph-work:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; --ph-cut: 40px; }
.ph-works--bento:not(.is-tiled) .ph-work:is(:nth-child(8n+4), :nth-child(8n+6), :nth-child(8n)) { grid-column: span 2; }
.ph-works--bento:not(.is-tiled) .ph-work:is(:nth-child(8n+5), :nth-child(8n+7)) { grid-row: span 2; }
/* main.js sets data-tile from the number of tiles, so a last group of 1–7 also fills its rows */
.ph-works--bento .ph-work[data-tile="big"] { grid-column: span 2; grid-row: span 2; --ph-cut: 40px; }
.ph-works--bento .ph-work[data-tile="wide"] { grid-column: span 2; }
.ph-works--bento .ph-work[data-tile="tall"] { grid-row: span 2; }
.ph-works--bento .ph-work[data-tile="full"] { grid-column: 1 / -1; grid-row: span 2; --ph-cut: 40px; }
.ph-work figcaption strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (max-width: 900px) {
	.ph-works--bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 30vw, 220px); gap: 10px; }
}

/* Category tabs (front page: buttons that filter; archive: links) */
.ph-works-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 clamp(24px, 4vw, 36px); }
.ph-works-tab {
	position: relative; padding: .55em 1.3em; font: inherit; font-size: .95rem; font-weight: 500; line-height: 1.3; cursor: pointer; text-decoration: none;
	color: var(--ph-gold-light); background: transparent; border: 1px solid rgba(200, 160, 74, .45);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background .2s, color .2s, border-color .2s;
}
.ph-works-tab:hover { border-color: var(--ph-gold); color: #fff; }
.ph-works-tab[aria-pressed="true"], .ph-works-tab[aria-current="page"] { background: var(--ph-gold); border-color: var(--ph-gold); color: var(--ph-lacquer); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-works-tab { color: var(--ph-ink); border-color: var(--ph-line); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-works-tab[aria-pressed="true"] { background: var(--ph-lacquer); border-color: var(--ph-lacquer); color: var(--ph-gold-light); }

/* "แยกเป็นกลุ่ม": one gallery per category */
.ph-works-group + .ph-works-group { margin-top: clamp(40px, 6vw, 64px); }
.ph-works-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(200, 160, 74, .3); }
.ph-works-group__head h3 { margin: 0; font-size: 1.4rem; color: var(--ph-gold-light); }
.ph-works-group__head a { color: var(--ph-gold); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.ph-works-group__head a:hover { color: #fff; }
:is(.ph-section--paper, .ph-section--paper-2) .ph-works-group__head { border-color: var(--ph-line); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-works-group__head h3 { color: var(--ph-ink); }
:is(.ph-section--paper, .ph-section--paper-2) .ph-works-group__head a { color: var(--ph-vermilion); }

/* 6f. News cards */
.ph-card { position: relative; display: flex; flex-direction: column; background: #fffaf0; border: 1px solid var(--ph-card-edge); transition: transform .3s, border-color .3s; }
.ph-card:hover { transform: translateY(-4px); }
.ph-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ph-lacquer); }
.ph-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ph-card:hover .ph-card__media img { transform: scale(1.05); }
.ph-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ph-card__meta { font-size: .84rem; color: var(--ph-muted); margin-bottom: .6rem; display: flex; gap: 12px; flex-wrap: wrap; }
.ph-card__cat { color: var(--ph-vermilion); font-weight: 600; text-decoration: none; }
.ph-card__title { font-size: 1.2rem; margin-bottom: .5em; }
.ph-card__title a {
	color: var(--ph-lacquer); text-decoration: none;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* Long Thai headlines read better in the text face than the display face. */
.ph-card__title { font-family: var(--ph-font-body); font-weight: 600; font-size: 1.12rem; line-height: 1.55; }
.ph-card__title a:hover { color: var(--ph-vermilion); }
.ph-card__excerpt { color: var(--ph-muted); font-size: .96rem; flex: 1; }
.ph-card__excerpt p { margin: 0; }

.ph-section__footer { margin-top: clamp(32px, 5vw, 56px); text-align: center; }

/* 6g. Stats band */
.ph-stats { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); text-align: center; margin-bottom: clamp(56px, 8vw, 100px); }
.ph-stat { padding: 10px 16px; }
.ph-stat + .ph-stat { border-left: 1px solid rgba(200, 160, 74, .25); }
.ph-stat strong { display: block; font-family: var(--ph-font-display); font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); color: var(--ph-gold-light); line-height: 1.2; }
.ph-stat span { color: #b9ab95; font-size: .95rem; }
@media (max-width: 700px) {
	.ph-stats { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
	.ph-stat:nth-child(3) { border-left: 0; }
}

/* 6h. CTA */
.ph-cta {
	position: relative; background: var(--ph-vermilion); color: #fbe7d9;
	padding: clamp(56px, 8vw, 96px) 0; text-align: center; isolation: isolate; overflow: hidden;
}
.ph-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--ph-pattern-prajamyam) center / 72px 72px; opacity: .14; filter: brightness(1.6);
}
.ph-cta h2 { color: #fff4e3; }
.ph-cta p { max-width: 620px; margin: 0 auto 2rem; }
.ph-cta .ph-eyebrow { color: var(--ph-gold-light); }
.ph-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ph-cta .ph-btn--ghost { color: #fff4e3; border-color: rgba(255, 244, 227, .6); }

/* =========================================================
   7. Page header (inner pages)
   ========================================================= */
.ph-pagehead { padding: clamp(70px, 9vw, 110px) 0 clamp(50px, 6vw, 80px); text-align: center; }
.ph-pagehead h1 { margin-bottom: .3em; }
.ph-pagehead__desc { max-width: 680px; margin: 0 auto; color: #bfb19b; }
.ph-pagehead .ph-ornament { justify-content: center; }
.ph-breadcrumb { font-size: .88rem; color: #a8997f; margin-bottom: 1rem; }
.ph-breadcrumb a { color: var(--ph-gold); text-decoration: none; }
.ph-breadcrumb span[aria-hidden] { margin: 0 .5em; opacity: .6; }

/* =========================================================
   8. Content (entry)
   ========================================================= */
.ph-main { padding: clamp(48px, 7vw, 90px) 0; }
.ph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 64px); }
.ph-layout--full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .ph-layout { grid-template-columns: minmax(0, 1fr); } }

.ph-entry__thumb { margin: 0 0 2rem; }
.ph-entry__thumb img { width: 100%; border: 1px solid var(--ph-line); }
.ph-entry__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; color: #bfb19b; font-size: .92rem; margin-top: .6rem; }

.entry-content { font-size: 1.08rem; }
.entry-content > * { max-width: 100%; }
.entry-content h2, .entry-content h3 { margin-top: 1.8em; }
.entry-content h2 { position: relative; padding-bottom: .4em; }
.entry-content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: linear-gradient(90deg, var(--ph-vermilion) 60%, var(--ph-gold) 60%); }
.entry-content blockquote, .wp-block-quote {
	margin: 2em 0; padding: 1.2em 1.6em; border-left: 3px solid var(--ph-gold);
	background: rgba(200, 160, 74, .08); font-family: var(--ph-font-display); font-size: 1.12rem;
}
.entry-content blockquote cite, .wp-block-quote cite { display: block; font-family: var(--ph-font-body); font-size: .9rem; color: var(--ph-muted); margin-top: .6em; font-style: normal; }
.entry-content img { border-radius: 2px; }
.entry-content figure { margin: 2em 0; }
.entry-content figcaption, .wp-element-caption { font-size: .88rem; color: var(--ph-muted); text-align: center; margin-top: .6em; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .98rem; }
.entry-content th, .entry-content td { border: 1px solid var(--ph-line); padding: .6em .9em; text-align: left; }
.entry-content th { background: var(--ph-lacquer); color: var(--ph-gold-light); font-weight: 600; }
.entry-content hr, .wp-block-separator { border: 0; height: 26px; margin: 2.4em auto; background: var(--ph-pattern-prajamyam) center / 26px 26px no-repeat; position: relative; }
.entry-content ul li::marker { color: var(--ph-gold-deep); }
.entry-content pre { background: var(--ph-lacquer); color: var(--ph-khoi); padding: 1.2em; overflow-x: auto; font-size: .92rem; }
.alignwide { margin-left: calc(-1 * min(8vw, 120px)); margin-right: calc(-1 * min(8vw, 120px)); max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.ph-layout:not(.ph-layout--full) .alignwide, .ph-layout:not(.ph-layout--full) .alignfull { margin-left: 0; margin-right: 0; width: auto; }
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-block-button__link { background: var(--ph-vermilion); color: #fff; border-radius: var(--ph-radius); }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--ph-vermilion); color: var(--ph-vermilion); background: none; }

.ph-entry__footer { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--ph-line); display: flex; flex-wrap: wrap; gap: 10px; }
.ph-tag { display: inline-block; font-size: .85rem; padding: .3em .9em; border: 1px solid var(--ph-line); color: var(--ph-ink); text-decoration: none; }
.ph-tag:hover { border-color: var(--ph-vermilion); color: var(--ph-vermilion); }

.ph-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 3rem; }
.ph-postnav a { display: block; padding: 18px 22px; border: 1px solid var(--ph-line); text-decoration: none; color: var(--ph-ink); background: #fffaf0; }
.ph-postnav a:hover { border-color: var(--ph-gold); }
.ph-postnav small { display: block; color: var(--ph-vermilion); font-weight: 600; letter-spacing: .08em; }
.ph-postnav .nav-next { text-align: right; }
@media (max-width: 600px) { .ph-postnav { grid-template-columns: 1fr; } }

/* artwork / program detail meta */
.ph-factsheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--ph-line); border: 1px solid var(--ph-line); margin: 0 0 2rem; }
.ph-factsheet div { background: #fffaf0; padding: 14px 18px; }
.ph-factsheet dt { font-size: .8rem; letter-spacing: .1em; color: var(--ph-vermilion); font-weight: 600; }
.ph-factsheet dd { margin: 0; font-family: var(--ph-font-display); font-size: 1.1rem; }

/* pagination */
.ph-pagination { margin-top: 3rem; }
.ph-pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ph-pagination .page-numbers {
	min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 12px;
	border: 1px solid var(--ph-line); text-decoration: none; color: var(--ph-ink); background: #fffaf0;
}
.ph-pagination .page-numbers.current { background: var(--ph-lacquer); color: var(--ph-gold-light); border-color: var(--ph-lacquer); }
.ph-pagination a.page-numbers:hover { border-color: var(--ph-vermilion); color: var(--ph-vermilion); }

/* sidebar & widgets */
.ph-sidebar .widget { margin-bottom: 2.4rem; padding: 26px; background: #fffaf0; border: 1px solid var(--ph-line); }
.ph-sidebar .widget-title, .ph-sidebar .wp-block-heading { font-size: 1.15rem; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--ph-line); }
.ph-sidebar ul { list-style: none; margin: 0; padding: 0; }
.ph-sidebar li { padding: .45em 0; border-bottom: 1px dashed var(--ph-line); }
.ph-sidebar li:last-child { border-bottom: 0; }
.ph-sidebar a { color: var(--ph-ink); text-decoration: none; }
.ph-sidebar a:hover { color: var(--ph-vermilion); }

/* search form */
.ph-search { display: flex; border: 1px solid var(--ph-line); background: #fff; }
.ph-search input[type="search"] { flex: 1; min-width: 0; border: 0; padding: .8em 1em; font: inherit; background: transparent; color: var(--ph-ink); }
.ph-search button { border: 0; background: var(--ph-lacquer); color: var(--ph-gold-light); padding: 0 1.2em; cursor: pointer; font: inherit; }
.ph-search button:hover { background: var(--ph-vermilion); color: #fff; }

/* comments */
.comments-area { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--ph-line); }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.comment-list .children { list-style: none; padding-left: clamp(16px, 4vw, 40px); }
.comment-body { padding: 20px 0; border-bottom: 1px dashed var(--ph-line); }
.comment-author { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: .85rem; }
.comment-metadata a { color: var(--ph-muted); text-decoration: none; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: .75em 1em; font: inherit; border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink);
}
.comment-form .submit { background: var(--ph-vermilion); color: #fff; border: 0; padding: .85em 1.8em; font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--ph-radius); }
.comment-form .submit:hover { background: var(--ph-vermilion-deep); }

/* 404 */
.ph-404 { text-align: center; padding: clamp(80px, 12vw, 160px) 0; }
.ph-404__num { font-family: var(--ph-font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: 1; color: var(--ph-gold); }
.ph-404 .ph-search { max-width: 460px; margin: 2rem auto 0; }

/* =========================================================
   9. Footer
   ========================================================= */
.ph-footer { padding: clamp(64px, 8vw, 96px) 0 0; font-size: .96rem; border-top: 3px solid var(--ph-gold); }
.ph-footer__fringe { position: absolute; top: 0; left: 0; right: 0; }
.ph-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); }
@media (max-width: 960px) { .ph-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ph-footer__grid { grid-template-columns: 1fr; } }
.ph-footer .ph-brand { margin-bottom: 1.2rem; }
.ph-footer__about { color: #ad9f89; }
.ph-footer h2, .ph-footer .widget-title { font-size: 1.1rem; color: var(--ph-gold-light); margin-bottom: 1.1rem; }
.ph-footer ul { list-style: none; padding: 0; margin: 0; }
.ph-footer li { margin-bottom: .55em; }
.ph-footer a:not(.ph-btn) { color: #d9ccb4; text-decoration: none; }
.ph-footer a:not(.ph-btn):hover { color: var(--ph-gold-light); }
.ph-contact li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: #cdbfa8; }
.ph-contact svg { width: 18px; height: 18px; margin-top: 5px; color: var(--ph-gold); }
.ph-social { display: flex; gap: 10px; margin-top: 1.2rem; }
.ph-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(200, 160, 74, .4); border-radius: 50%; }
.ph-social a:hover { background: var(--ph-gold); color: var(--ph-lacquer) !important; }
.ph-social svg { width: 18px; height: 18px; }
.ph-footer__bottom {
	margin-top: clamp(48px, 6vw, 72px); padding: 22px 0; border-top: 1px solid rgba(200, 160, 74, .18);
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #8f8270; font-size: .88rem;
}

/* =========================================================
   10. Reveal on scroll
   ========================================================= */
.js .ph-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js .ph-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ph-reveal { opacity: 1; transform: none; transition: none; } }

/* Reading progress — a red-to-gold thread along the top of the header. */
.ph-progress {
	position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 3px;
	background: linear-gradient(90deg, var(--ph-vermilion), var(--ph-gold));
	transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* =========================================================
   11. Motion — "งานช่างที่กำลังเกิดขึ้น"
   ปิดทอง (gilding) · ลากเส้น (drawing) · เปิดผ้าคลุม (unveiling)
   Everything here is skipped for prefers-reduced-motion.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

	/* Hero entrance, staggered. */
	.ph-hero__text > * { animation: ph-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
	.ph-hero__text > .ph-hero__since { animation-delay: .1s; }
	.ph-hero__text > .ph-hero__subtitle { animation-delay: .45s; }
	.ph-hero__text > .ph-hero__lead { animation-delay: .6s; }
	.ph-hero__text > .ph-hero__actions { animation-delay: .75s; }
	@keyframes ph-rise { from { opacity: 0; transform: translateY(26px); } }

	/* ปิดทอง — a glint of gold leaf sweeps across the title, then again every few seconds. */
	.ph-hero__text > .ph-hero__title {
		background-image:
			linear-gradient(100deg, transparent 42%, rgba(255, 249, 226, .95) 50%, transparent 58%),
			linear-gradient(180deg, #f3dfa6 0%, var(--ph-gold) 55%, var(--ph-gold-deep) 100%);
		background-size: 250% 100%, 100% 100%;
		background-repeat: no-repeat;
		background-position: 160% 0, 0 0;
		animation: ph-rise .9s cubic-bezier(.2, .7, .2, 1) .25s both, ph-gild 7s ease-in-out 1.3s infinite;
	}
	@keyframes ph-gild {
		0% { background-position: 160% 0, 0 0; }
		28%, 100% { background-position: -60% 0, 0 0; }
	}

	/* The arch frame opens, the photo rises inside it like a niche being unveiled. */
	.ph-arch { animation: ph-arch-in 1.1s cubic-bezier(.2, .7, .2, 1) .2s both; }
	@keyframes ph-arch-in { from { opacity: 0; transform: translateY(40px) scale(.96); } }
	.ph-arch__inner img, .ph-arch__inner .ph-mandala { animation: ph-unveil 1.6s cubic-bezier(.7, 0, .2, 1) .5s both; }
	@keyframes ph-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

	/* Parallax inside the arch (set by main.js as --scroll). */
	.ph-arch__inner img { scale: 1.12; translate: 0 calc(var(--scroll, 0) * -.06px); }
	.ph-hero.ph-lacquer::before { translate: 0 calc(var(--scroll, 0) * .25px); }

	/* Flame finial flickers gently. */
	.ph-arch__finial { transform-origin: 50% 100%; animation: ph-flicker 3.2s ease-in-out 1.6s infinite; }
	@keyframes ph-flicker {
		0%, 100% { transform: translateX(-50%) scale(1, 1); }
		30% { transform: translateX(-50%) scale(.96, 1.06); }
		60% { transform: translateX(-50%) scale(1.03, .97); }
	}

	/* Age badge stamps into place like a seal. */
	.ph-hero__badge { animation: ph-seal .7s cubic-bezier(.3, 1.5, .5, 1) 1.2s both; }
	@keyframes ph-seal { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }

	/* ลากเส้น — section ornaments draw themselves, then the petals bloom. */
	.js .ph-reveal .ph-ornament::before, .js .ph-reveal .ph-ornament::after { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) .5s; }
	.js .ph-reveal .ph-ornament::before { transform-origin: right; }
	.js .ph-reveal .ph-ornament::after { transform-origin: left; }
	.js .ph-reveal .ph-outline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease .15s; }
	.js .ph-reveal .ph-petals { transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-90deg); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1) .7s; }
	.js .ph-reveal.is-visible .ph-ornament::before, .js .ph-reveal.is-visible .ph-ornament::after { transform: scaleX(1); }
	.js .ph-reveal.is-visible .ph-outline { stroke-dashoffset: 0; }
	.js .ph-reveal.is-visible .ph-petals { transform: none; }

	/* เปิดผ้าคลุม — images are unveiled top-to-bottom as their card arrives. */
	.js .ph-reveal :is(.ph-program__media, .ph-card__media, .ph-timeline__card) > :is(img, .ph-placeholder),
	.js .ph-work.ph-reveal :is(img, .ph-placeholder) {
		clip-path: inset(0 0 100% 0);
		transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) .2s, transform .6s, filter .6s;
	}
	.js .ph-reveal.is-visible :is(.ph-program__media, .ph-card__media, .ph-timeline__card) > :is(img, .ph-placeholder),
	.js .ph-work.ph-reveal.is-visible :is(img, .ph-placeholder) { clip-path: inset(0 0 0 0); }

	/* ช่างสิบหมู่ — each guild steps in after the one before it. */
	.js .ph-crafts.ph-reveal { opacity: 1; transform: none; }
	.js .ph-crafts.ph-reveal .ph-craft { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease, background .3s; transition-delay: calc(var(--i, 0) * 70ms); }
	.js .ph-crafts.ph-reveal.is-visible .ph-craft { opacity: 1; transform: none; }

	/* Timeline — a red thread fills as you read; each year lights up once reached. */
	.ph-timeline::after {
		content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
		background: var(--ph-vermilion); transform: scaleY(var(--progress, 0)); transform-origin: top;
	}
	.ph-timeline__node { position: relative; z-index: 1; color: var(--ph-gold-deep); transition: color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .4s; }
	.ph-timeline__item.is-passed .ph-timeline__node { color: var(--ph-vermilion); transform: scale(1.2); box-shadow: 0 0 0 6px rgba(165, 28, 28, .12); }
	.ph-timeline__year { transition: color .4s; }
	.ph-timeline__item:not(.is-passed) .ph-timeline__year { color: var(--ph-gold-deep); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 800px) {
	.ph-timeline::after { left: 17px; }
}

/* WordPress core classes */
.sticky .ph-card__title::before { content: "★ "; color: var(--ph-gold-deep); }
.bypostauthor > .comment-body .fn::after { content: " ✦"; color: var(--ph-gold-deep); }
.gallery-caption, .wp-caption-text { font-size: .88rem; color: var(--ph-muted); }
.wp-caption { max-width: 100%; }

/* =========================================================
   12. ลวดลายจากตึกอำนวยการ
   Background pattern (Customizer: ลายพื้น) and the building in the footer.
   ========================================================= */
.ph-pattern-grille .ph-lacquer::before { background: var(--ph-pattern-grille) repeat center / 70px auto; opacity: .08; }
.ph-pattern-grille .ph-cta::before { background: var(--ph-pattern-grille-cream) repeat center / 70px auto; opacity: .12; filter: none; }
.ph-pattern-grille .ph-placeholder::before { background: var(--ph-pattern-grille) repeat center / 48px auto; opacity: .16; }
.ph-pattern-none .ph-lacquer::before, .ph-pattern-none .ph-cta::before { display: none; }

/* Footer: no grille pattern — the building is a faint drawing behind the content. */
.ph-footer { overflow: hidden; }
.ph-footer.ph-lacquer::before { display: none; }
.ph-footer__building {
	position: absolute; z-index: -1; left: 50%; bottom: 0; margin: 0;
	width: min(1400px, 130%); transform: translateX(-50%);
	pointer-events: none; user-select: none;
}
.ph-footer__building img { display: block; width: 100%; height: auto; opacity: .12; }
@media (max-width: 700px) { .ph-footer__building { width: 230%; } .ph-footer__building img { opacity: .1; } }
/* =========================================================
   13. มุมตัด ๔๕° — every rectangular card has its bottom-right corner cut.
   clip-path also clips borders and shadows, so the diagonal edge is drawn
   with a pseudo-element in the card's edge colour (--ph-card-edge), and
   hover turns the edges gold instead of adding a shadow.
   ========================================================= */
.ph-card, .ph-program, .ph-timeline__card, .ph-work, .ph-craft,
.ph-sidebar .widget, .ph-postnav a, .ph-story__word {
	--ph-card-edge: var(--ph-line);
	--ph-cut: 28px;
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ph-cut)), calc(100% - var(--ph-cut)) 100%, 0 100%);
}
.ph-card::after, .ph-program::after, .ph-timeline__card::after, .ph-work::after,
.ph-sidebar .widget::after, .ph-postnav a::after, .ph-craft::before {
	content: ""; position: absolute; z-index: 2; right: -1px; bottom: -1px;
	width: var(--ph-cut); height: var(--ph-cut); pointer-events: none;
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ph-card-edge) calc(50% - 1px), var(--ph-card-edge) calc(50% + .5px), transparent calc(50% + .5px));
}
/* sizes to suit each card */
.ph-card, .ph-program { --ph-cut: 30px; }
.ph-timeline__card, .ph-sidebar .widget { --ph-cut: 22px; }
.ph-postnav a { --ph-cut: 16px; }
.ph-work { --ph-cut: 26px; --ph-card-edge: rgba(200, 160, 74, .3); }
.ph-craft { --ph-cut: 22px; --ph-card-edge: rgba(200, 160, 74, .45); }
.ph-craft::before { right: 0; bottom: 0; }
/* hover: gold edges */
.ph-card:hover, .ph-program:hover, .ph-postnav a:hover, .ph-work:hover { --ph-card-edge: var(--ph-gold); border-color: var(--ph-gold); }
.ph-craft:hover { --ph-card-edge: var(--ph-gold); }
/* the story panel keeps its gold top-left bracket (the polygon reaches out to it);
   its bottom-right bracket becomes the gold diagonal */
.ph-story__word {
	--ph-cut: 34px; --ph-card-edge: var(--ph-gold);
	clip-path: polygon(-8px -8px, 100% -8px, 100% calc(100% - var(--ph-cut)), calc(100% - var(--ph-cut)) 100%, -8px 100%);
}
.ph-story__word::after {
	border: 0; right: -1px; bottom: -1px; width: var(--ph-cut); height: var(--ph-cut);
	background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--ph-gold) calc(50% - 1.5px), var(--ph-gold) calc(50% + 1px), transparent calc(50% + 1px));
}

/* =========================================================
   14. ข่าว — ภาพนำ ข้อความรอง
   News cards lead with the photo: taller image, headline capped at two lines,
   no excerpt on the front page; the newest story is the large lead.
   ========================================================= */
.ph-card__media { aspect-ratio: 4 / 3; }
.ph-card__body { padding: 14px 20px 20px; }
.ph-card__meta { font-size: .82rem; margin-bottom: .35rem; }
.ph-card__title { font-size: 1.02rem; line-height: 1.5; margin-bottom: 0; }
.ph-card__title a { -webkit-line-clamp: 2; line-clamp: 2; }
.ph-card__excerpt { font-size: .92rem; margin-top: .5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ph-news-grid .ph-card__excerpt { display: none; }

/* lead story: two columns × two rows, the photo takes the height */
.ph-news-grid .ph-card:first-child { grid-column: span 2; grid-row: span 2; --ph-cut: 40px; }
.ph-news-grid .ph-card:first-child .ph-card__figure { flex: 1; display: flex; flex-direction: column; }
.ph-news-grid .ph-card:first-child .ph-card__media { aspect-ratio: auto; flex: 1; min-height: 340px; }
.ph-news-grid .ph-card:first-child .ph-card__body { flex: none; padding: 18px 26px 26px; }
.ph-news-grid .ph-card:first-child .ph-card__title { font-size: 1.35rem; }
@media (max-width: 900px) {
	.ph-news-grid .ph-card:first-child { grid-row: span 1; }
	.ph-news-grid .ph-card:first-child .ph-card__figure { flex: none; }
	.ph-news-grid .ph-card:first-child .ph-card__media { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
}
@media (max-width: 600px) {
	.ph-news-grid .ph-card:first-child { grid-column: span 1; }
}

/* =========================================================
   15. เส้นทางของเพาะช่าง — หมุดหมาย (pins)
   One gold line, one pin per event. The active pin's card sits above the
   line (desktop) or below the pins (mobile); hover / focus / tap switches it.
   ========================================================= */
.ph-pins { --pins-card-h: 232px; position: relative; padding-top: calc(var(--pins-card-h) + 28px); }
.ph-pins__list { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.ph-pins__list::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: linear-gradient(90deg, transparent, var(--ph-gold) 3%, var(--ph-gold) 97%, transparent); opacity: .6; }
.ph-pins__item { position: relative; flex: 1 1 0; display: flex; justify-content: center; min-width: 0; }
.ph-pins__pin {
	position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
	min-width: 44px; padding: 4px 6px 6px; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ph-muted);
}
.ph-pins__dot {
	width: 34px; height: 34px; padding: 4px; border-radius: 50%; background: var(--ph-khoi); color: var(--ph-gold-deep);
	box-shadow: 0 0 0 1px var(--ph-line); transition: color .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s;
}
.ph-section--paper-2 .ph-pins__dot { background: var(--ph-khoi-2); }
.ph-lacquer .ph-pins__dot { background: var(--ph-lacquer); }
.ph-pins__dot svg { width: 100%; height: 100%; }
.ph-pins__year { font-family: var(--ph-font-display); font-size: 1.05rem; line-height: 1.2; white-space: nowrap; transition: color .2s; }
.ph-pins__pin:hover .ph-pins__dot, .ph-pins__item.is-active .ph-pins__dot { color: var(--ph-vermilion); transform: scale(1.22); box-shadow: 0 0 0 1px var(--ph-vermilion), 0 0 0 7px rgba(165, 28, 28, .1); }
.ph-pins__pin:hover .ph-pins__year, .ph-pins__item.is-active .ph-pins__year { color: var(--ph-vermilion); }
/* stem from the active pin up to its card */
.ph-pins__item.is-active::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 26px; background: var(--ph-gold); }

.ph-pins__card {
	position: absolute; z-index: 2; bottom: calc(100% + 26px); left: 50%; width: min(520px, 86vw); height: var(--pins-card-h);
	display: grid; grid-template-columns: 42% 1fr; box-sizing: border-box;
	background: var(--ph-surface, #fffaf0); border: 1px solid var(--ph-line);
	--ph-cut: 26px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ph-cut)), calc(100% - var(--ph-cut)) 100%, 0 100%);
	opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .35s;
}
.ph-pins__card.is-text { grid-template-columns: 1fr; }
.ph-pins__card::after {
	content: ""; position: absolute; right: -1px; bottom: -1px; width: var(--ph-cut); height: var(--ph-cut);
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ph-line) calc(50% - 1px), var(--ph-line) calc(50% + .5px), transparent calc(50% + .5px));
}
/* cards near the ends stay inside the container */
.ph-pins__item:first-child .ph-pins__card, .ph-pins__item:nth-child(2) .ph-pins__card { left: 0; transform: translate(0, 10px); }
.ph-pins__item:last-child .ph-pins__card, .ph-pins__item:nth-last-child(2) .ph-pins__card { left: auto; right: 0; transform: translate(0, 10px); }
.ph-pins__item.is-active .ph-pins__card, .ph-pins__item:focus-within .ph-pins__card {
	opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
.ph-pins__item:first-child.is-active .ph-pins__card, .ph-pins__item:nth-child(2).is-active .ph-pins__card,
.ph-pins__item:last-child.is-active .ph-pins__card, .ph-pins__item:nth-last-child(2).is-active .ph-pins__card { transform: none; }
.ph-pins__media { overflow: hidden; background: var(--ph-lacquer); }
.ph-pins__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 3s ease; }
.ph-pins__item.is-active .ph-pins__media img { transform: scale(1.04); }
.ph-pins__body { padding: 20px 22px 24px; display: flex; flex-direction: column; min-width: 0; }
.ph-pins__when { font-family: var(--ph-font-display); font-size: 1.5rem; line-height: 1.2; color: var(--ph-vermilion); }
.ph-pins__title { font-family: var(--ph-font-body); font-weight: 600; font-size: 1.08rem; line-height: 1.45; margin: 6px 0; color: var(--ph-lacquer); }
.ph-pins__title a { color: inherit; text-decoration: none; }
.ph-pins__title a:hover { color: var(--ph-vermilion); }
.ph-pins__text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ph-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.ph-pins__card.is-text .ph-pins__text { -webkit-line-clamp: 5; line-clamp: 5; }
.ph-pins__hint { margin: 18px 0 0; text-align: center; font-size: .88rem; color: var(--ph-muted); }

/* pins arrive one after another */
@media (prefers-reduced-motion: no-preference) {
	.js .ph-pins:not(.is-in) .ph-pins__pin { opacity: 0; transform: translateY(12px); }
	.js .ph-pins .ph-pins__pin { transition: opacity .5s ease calc(var(--i, 0) * 70ms), transform .5s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 70ms); }
	.js .ph-pins:not(.is-in) .ph-pins__list::before { transform: scaleX(0); }
	.js .ph-pins .ph-pins__list::before { transform-origin: left; transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
}
@media (prefers-reduced-motion: reduce) { .ph-pins__card { transition: none; } }
/* tablet: pins are too close for a card per pin — centre every card over the whole line */
@media (min-width: 761px) and (max-width: 1100px) {
	.ph-pins__item { position: static; }
	.ph-pins__item.is-active::before { display: none; }
	.ph-pins__item.is-active .ph-pins__pin::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 26px; background: var(--ph-gold); }
	.ph-pins__card, .ph-pins__item:nth-child(n) .ph-pins__card { left: 50%; right: auto; width: min(560px, 100%); transform: translate(-50%, 10px); }
	.ph-pins__item:nth-child(n).is-active .ph-pins__card, .ph-pins__item:nth-child(n):focus-within .ph-pins__card { transform: translate(-50%, 0); }
}

/* mobile: pins scroll sideways, the card sits below them */
@media (max-width: 760px) {
	.ph-pins { --pins-card-h: 380px; padding-top: 0; padding-bottom: calc(var(--pins-card-h) + 20px); }
	/* the row scrolls; the line is its background (scrolls with it) and the card
	   is positioned against .ph-pins, not the scrolling row, so it is never clipped */
	.ph-pins__list {
		position: static; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding-bottom: 4px;
		background: linear-gradient(var(--ph-gold), var(--ph-gold)) 0 21px / calc(var(--n) * 84px) 2px no-repeat;
		background-attachment: local;
	}
	.ph-pins__list::-webkit-scrollbar { display: none; }
	.ph-pins__list::before { display: none; }
	.ph-pins__item { position: static; flex: 0 0 84px; }
	.ph-pins__item.is-active::before { display: none; }
	.ph-pins__card, .ph-pins__item:nth-child(n) .ph-pins__card {
		left: 0; right: 0; bottom: 0; width: auto; height: var(--pins-card-h); grid-template-columns: 1fr; grid-template-rows: 44% 1fr; transform: translateY(10px);
	}
	.ph-pins__card.is-text { grid-template-rows: 1fr; }
	.ph-pins__card.is-text .ph-pins__text { -webkit-line-clamp: 11; line-clamp: 11; }
	.ph-pins__item.is-active .ph-pins__card, .ph-pins__item:nth-child(n).is-active .ph-pins__card { transform: none; }
	.ph-pins__hint { position: absolute; left: 0; right: 0; bottom: calc(var(--pins-card-h) + 2px); margin: 0; font-size: .8rem; }
}
/* =========================================================
   16. Hero — ภาพเต็มขอบขวา (full-bleed)
   Text on lacquer at the left; the photo fills the right 46% edge to edge,
   fading into the lacquer with a fine gold seam. --focus = object-position
   (Customizer: จุดสนใจของภาพ). No photo: the ตึกอำนวยการ drawing.
   ========================================================= */
.ph-hero--bleed { overflow: hidden; }
.ph-hero--bleed::after { z-index: -2; }
.ph-hero--bleed .ph-hero__grid { grid-template-columns: minmax(0, 56%) 1fr; }
/* The title may be any length or language (English, a browser translation…): it wraps rather than
   overflowing, and main.js ("Hero title fit") shrinks it to one line for a single word, two otherwise. */
.ph-hero--bleed .ph-hero__title { font-size: clamp(3.4rem, 8vw, 7.2rem); overflow-wrap: break-word; text-wrap: balance; max-width: 100%; }
.ph-hero__title.is-fitted { font-size: var(--fit); }
.ph-hero__bleed { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 46%; overflow: hidden; }
.ph-hero__photo {
	position: absolute; left: 0; top: -8%; width: 100%; height: 116%; max-width: none;
	object-fit: cover; object-position: var(--focus, 50% 45%);
}
.ph-hero__bleed::before {   /* soft fade into the lacquer */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, var(--ph-lacquer) 0%, rgba(21, 17, 14, .55) 18%, rgba(21, 17, 14, 0) 45%),
	            linear-gradient(0deg, rgba(21, 17, 14, .55) 0%, rgba(21, 17, 14, 0) 30%);
}
.ph-hero__seam { position: absolute; z-index: 2; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(transparent, var(--ph-gold), transparent); }
.ph-hero__cap { position: absolute; z-index: 2; right: clamp(20px, 3vw, 40px); bottom: clamp(24px, 3vw, 40px); text-align: right; color: var(--ph-on-dark, #efe4cf); font-size: .92rem; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.ph-hero__cap strong { display: block; font-family: var(--ph-font-display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--ph-gold-light); }
/* no photo: the building drawing, contained and quiet */
.ph-hero__bleed.is-drawing .ph-hero__photo { top: 0; height: 100%; object-fit: contain; object-position: 30% 60%; width: 180%; opacity: .5; }

@media (max-width: 900px) {
	.ph-hero--bleed { flex-direction: column; align-items: stretch; padding-bottom: 0; min-height: 0; }
	.ph-hero--bleed .ph-hero__grid { grid-template-columns: 1fr; }
	.ph-hero__bleed { position: relative; z-index: 0; width: 100%; height: clamp(260px, 62vw, 460px); margin-top: 40px; }
	.ph-hero__bleed::before { background: linear-gradient(180deg, var(--ph-lacquer) 0%, rgba(21, 17, 14, 0) 30%), linear-gradient(0deg, rgba(21, 17, 14, .6) 0%, rgba(21, 17, 14, 0) 35%); }
	.ph-hero__seam { top: 0; bottom: auto; left: 12%; right: 12%; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--ph-gold), transparent); }
}

@media (prefers-reduced-motion: no-preference) {
	.ph-hero__photo { animation: ph-bleed-in 2.4s cubic-bezier(.2, .7, .2, 1) .15s both; translate: 0 calc(var(--scroll, 0) * .1px); }
	@keyframes ph-bleed-in { from { opacity: 0; scale: 1.12; } to { opacity: 1; scale: 1; } }
	.ph-hero__bleed.is-drawing .ph-hero__photo { animation-name: ph-bleed-in-quiet; }
	@keyframes ph-bleed-in-quiet { from { opacity: 0; } to { opacity: .5; } }
	.ph-hero__seam { animation: ph-seam 1.4s cubic-bezier(.65, 0, .35, 1) 1s both; }
	@keyframes ph-seam { from { transform: scaleY(0); } }
	.ph-hero__cap { animation: ph-cap .8s ease 1.6s both; }
	@keyframes ph-cap { from { opacity: 0; transform: translateX(24px); } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
	@keyframes ph-seam { from { transform: scaleX(0); } }
	.ph-hero__photo { translate: none; }
}

/* On the news picture: category (top-left) and calendar date (bottom-left). */
.ph-card__figure { position: relative; }
.ph-card__date {
	position: absolute; z-index: 3; bottom: 12px; left: 12px; pointer-events: none;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 54px; padding: 7px 8px 8px; box-sizing: border-box;
	background: var(--ph-lacquer); color: var(--ph-gold-light); text-align: center; line-height: 1;
	border-top: 3px solid var(--ph-vermilion);
	box-shadow: inset 0 0 0 1px rgba(200, 160, 74, .45), 0 6px 16px rgba(0, 0, 0, .22);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.ph-card__day { font-family: var(--ph-font-display); font-size: 1.55rem; line-height: 1.05; }
.ph-card__mon { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(200, 160, 74, .35); font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: #eadfca; white-space: nowrap; }
.ph-news-grid .ph-card:first-child .ph-card__date { bottom: 18px; left: 18px; min-width: 66px; }
.ph-news-grid .ph-card:first-child .ph-card__day { font-size: 2rem; }
.ph-news-grid .ph-card:first-child .ph-card__mon { font-size: .8rem; }

.ph-card__badge {
	position: absolute; z-index: 3; left: 12px; top: 12px; display: block;
	max-width: calc(100% - 24px); padding: 4px 10px 4px 11px; box-sizing: border-box;
	background: rgba(22, 16, 12, .82); color: var(--ph-gold-light);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	font-size: .78rem; font-weight: 600; line-height: 1.2; text-decoration: none;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
	box-shadow: inset 0 0 0 1px rgba(200, 160, 74, .45); /* stays visible on dark placeholders too */
	transition: background .2s, color .2s;
}
.ph-card__badge:hover { background: var(--ph-vermilion); color: #fff; }
.ph-news-grid .ph-card:first-child .ph-card__badge { left: 18px; top: 18px; padding: 6px 12px 6px 13px; font-size: .86rem; }

/* =========================================================
   17. เส้นคั่นระหว่าง section พื้นเดียวกัน
   Two sections on the same paper tone run together, so the second one gets a
   gold rule with a ประจำยาม at the centre (the line breaks around it).
   Sections on different tones need nothing — the colour change divides them.
   ========================================================= */
.ph-section--paper + .ph-section--paper::before,
.ph-section--paper-2 + .ph-section--paper-2::before {
	content: ""; position: absolute; z-index: 1; top: 0; left: 50%;
	width: min(calc(100% - 2 * var(--ph-gutter)), calc(var(--ph-container) - 2 * var(--ph-gutter))); height: 26px;
	transform: translate(-50%, -50%); pointer-events: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%2394701f'%3E%3Cpath d='M20 19c-3.4-3.4-3.4-9.6 0-14 3.4 4.4 3.4 10.6 0 14Zm1 1c3.4-3.4 9.6-3.4 14 0-4.4 3.4-10.6 3.4-14 0Zm-1 1c3.4 3.4 3.4 9.6 0 14-3.4-4.4-3.4-10.6 0-14Zm-1-1c-3.4 3.4-9.6 3.4-14 0 4.4-3.4 10.6-3.4 14 0Z'/%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3C/g%3E%3Cpath d='M20 1.5 38.5 20 20 38.5 1.5 20Z' fill='none' stroke='%2394701f' stroke-width='1.2'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
		linear-gradient(90deg, transparent 0%, var(--ph-line) 22%, var(--ph-line) calc(50% - 24px), transparent calc(50% - 24px), transparent calc(50% + 24px), var(--ph-line) calc(50% + 24px), var(--ph-line) 78%, transparent 100%) center / 100% 1px no-repeat;
}

/* =========================================================
   18. เมนูหลัก (อิงโครงสร้างเมนูของ pohchang.rmutr.ac.th)
   Desktop: a second header row across the page; dropdowns, side flyouts for
   deeper levels, a 3-column panel for items with class "ph-mega", and menus
   near the right edge open leftwards. Mobile: an accordion (main.js adds a
   toggle to every item that has children).
   ========================================================= */
.ph-nav .sub-menu a { white-space: normal; }
.ph-subtoggle { display: none; }

@media (min-width: 768px) {
	.ph-header__inner { min-height: 76px; }
	.ph-header.is-scrolled .ph-header__inner { min-height: 60px; }
	.ph-nav { border-top: 1px solid rgba(200, 160, 74, .16); }
	.ph-nav > ul {
		max-width: var(--ph-container); margin: 0 auto; padding: 0 var(--ph-gutter);
		justify-content: space-between; align-items: stretch; gap: 0; min-height: 50px;
	}
	.ph-nav > ul > li { display: flex; }
	.ph-nav > ul > li > a { display: flex; align-items: center; padding: 0 .7em; font-size: .96rem; }
	.ph-nav > ul > li:first-child > a { padding-left: 0; }
	.ph-nav > ul > li:last-child > a { padding-right: 0; }
	/* a small chevron on items with children */
	.ph-nav > ul > .menu-item-has-children > a { padding-right: 1.5em; }
	.ph-nav > ul > li:last-child.menu-item-has-children > a { padding-right: 1.1em; }
	.ph-nav > ul > .menu-item-has-children > a::before {
		content: ""; position: absolute; right: .55em; top: 50%; width: 6px; height: 6px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
		transform: translateY(-75%) rotate(45deg); opacity: .65;
	}
	.ph-nav > ul > li:last-child.menu-item-has-children > a::before { right: 0; }
	.ph-nav > ul > li > .sub-menu { top: 100%; }
	.ph-nav .sub-menu { min-width: 240px; width: max-content; max-width: 320px; }
	.ph-nav .sub-menu .menu-item-has-children > a { padding-right: 2em; }
	.ph-nav .sub-menu .menu-item-has-children > a::after {
		content: ""; position: absolute; right: 1em; top: 50%; width: 5px; height: 5px;
		border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
		transform: translateY(-50%) rotate(45deg); opacity: .6;
	}
	.ph-nav .sub-menu li:hover > a, .ph-nav .sub-menu li:focus-within > a { background: rgba(200, 160, 74, .08); color: var(--ph-gold-light); }
	/* deeper levels take no room until opened, so hidden flyouts never widen the page */
	.ph-nav .sub-menu .sub-menu { display: none; transition-behavior: allow-discrete; }
	.ph-nav .sub-menu li:hover > .sub-menu, .ph-nav .sub-menu li:focus-within > .sub-menu { display: block; }
	@starting-style {
		.ph-nav .sub-menu li:hover > .sub-menu, .ph-nav .sub-menu li:focus-within > .sub-menu { opacity: 0; transform: translateX(-6px); }
	}
	/* menus near the right edge open to the left (main.js adds .ph-flip when needed) */
	.ph-nav > ul > li:nth-last-child(-n+4) > .sub-menu,
	.ph-nav > ul > li.ph-flip > .sub-menu { left: auto; right: 0; }
	.ph-nav > ul > li:nth-last-child(-n+4) .sub-menu .sub-menu,
	.ph-nav .sub-menu li.ph-flip > .sub-menu { left: auto; right: 100%; }
	/* tapped open on touch screens (main.js toggles .is-open) */
	.ph-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.ph-nav .sub-menu li.is-open > .sub-menu { display: block; }
	/* "เพิ่มเติม": holds whatever doesn't fit on the bar (built by main.js) */
	.ph-nav > ul > li.ph-nav-more[hidden] { display: none; }
	.ph-nav-more > .sub-menu > li > a { font-weight: 500; }
	/* level 4 and deeper expand in place inside their flyout instead of cascading further */
	.ph-nav .sub-menu .sub-menu .sub-menu,
	.ph-nav .sub-menu .sub-menu li.ph-flip > .sub-menu {
		position: static; left: auto; right: auto; min-width: 0; width: auto; max-width: none;
		padding: 0 0 4px 14px; border: 0; box-shadow: none; background: rgba(0, 0, 0, .18); transform: none;
	}
	.ph-nav .sub-menu .sub-menu .sub-menu a { font-size: .9rem; padding-block: .4em; }
	.ph-nav .sub-menu .sub-menu .menu-item-has-children > a::after { transform: translateY(-70%) rotate(135deg); }
	/* full-width 3-column panel under the bar (menu item CSS class: ph-mega) */
	.ph-nav > ul { position: relative; }
	.ph-nav > ul > li.ph-mega { position: static; }
	.ph-nav > ul > li.ph-mega > .sub-menu {
		display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 8px;
		left: var(--ph-gutter); right: var(--ph-gutter); width: auto; max-width: none; padding: 16px 12px;
	}
	.ph-nav-more .ph-mega > .sub-menu { display: none; }
	.ph-nav-more .ph-mega:hover > .sub-menu, .ph-nav-more .ph-mega:focus-within > .sub-menu, .ph-nav-more .ph-mega.is-open > .sub-menu { display: block; }
}
/* tablet and small laptop: a tighter bar so more items fit before "เพิ่มเติม" takes over */
@media (min-width: 768px) and (max-width: 1279px) {
	.ph-header__inner { min-height: 68px; }
	.ph-nav > ul > li > a { padding: 0 .5em; font-size: clamp(.86rem, .62rem + .35vw, .96rem); }
	.ph-nav > ul > .menu-item-has-children > a { padding-right: 1.3em; }
	.ph-nav > ul > .menu-item-has-children > a::before { right: .4em; }
	.ph-nav > ul > li.ph-mega > .sub-menu { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.ph-nav .sub-menu, .ph-nav .children { display: none; }
	.ph-nav li.is-open > .sub-menu { display: block; }
	.ph-nav li.menu-item-has-children > a { padding-right: 52px; }
	.ph-subtoggle {
		display: block; position: absolute; top: 0; right: 0; width: 48px; height: 48px;
		background: none; border: 0; border-left: 1px solid rgba(200, 160, 74, .12); color: var(--ph-gold); cursor: pointer;
	}
	.ph-subtoggle::before {
		content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
		transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s;
	}
	.ph-nav li.is-open > .ph-subtoggle::before { transform: translate(-50%, -30%) rotate(-135deg); }
	.ph-nav .sub-menu { background: rgba(0, 0, 0, .18); }
	.ph-nav .sub-menu a { font-size: .94rem; }
}
/* =========================================================
   19. จัดซื้อจัดจ้าง (template-parts/front/procurement.php, procurement archive)
   A list of announcements — date block, type badge, fiscal year, documents —
   with a quick-links panel beside it.
   ========================================================= */
.ph-proc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.ph-proc--solo { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin-inline: auto; }
.ph-proc__tabs { justify-content: flex-start; margin-bottom: 18px; }
.ph-proc__tabs .ph-works-tab { color: var(--ph-ink); border-color: var(--ph-line); }
.ph-proc__tabs .ph-works-tab:hover { color: var(--ph-vermilion); border-color: var(--ph-vermilion); }
.ph-proc__tabs .ph-works-tab[aria-pressed="true"] { background: var(--ph-lacquer); border-color: var(--ph-lacquer); color: var(--ph-gold-light); }
.ph-lacquer .ph-proc__tabs .ph-works-tab { color: var(--ph-gold-light); border-color: rgba(200, 160, 74, .45); }
.ph-lacquer .ph-proc__tabs .ph-works-tab[aria-pressed="true"] { background: var(--ph-gold); border-color: var(--ph-gold); color: var(--ph-lacquer); }
.ph-proc__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ph-line); }
.ph-proc__item { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 8px; border-bottom: 1px solid var(--ph-line); transition: background .2s; }
.ph-proc__item:hover { background: rgba(200, 160, 74, .07); }
.ph-proc__item[hidden] { display: none; }
.ph-proc__date {
	display: flex; flex-direction: column; align-items: center; justify-content: center; height: 62px; line-height: 1;
	background: var(--ph-lacquer); color: var(--ph-gold-light); border-top: 3px solid var(--ph-vermilion);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.ph-proc__date b { font-family: var(--ph-font-display); font-weight: 400; font-size: 1.5rem; }
.ph-proc__date span[aria-hidden] { margin-top: 4px; font-size: .68rem; font-weight: 600; color: #eadfca; white-space: nowrap; }
.ph-proc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.ph-proc__type {
	display: inline-block; padding: 3px 10px 3px 9px; font-size: .74rem; font-weight: 600; line-height: 1.3; color: #fff; background: var(--ph-vermilion);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.ph-proc__type--draft { background: var(--ph-gold); color: var(--ph-lacquer); }
.ph-proc__type--cancel { background: #7d746a; }
.ph-proc__type--result { background: #2f6b4f; }
.ph-proc__type--auction { background: #7a5a2b; }
.ph-proc__type--recruit { background: #2d5f8a; }
.ph-proc__type--plan { background: #3f6f73; }
.ph-proc__fy { font-size: .8rem; color: var(--ph-muted); }
.ph-proc__title { margin: 0; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.ph-proc__title a { color: var(--ph-ink); text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ph-proc__title a:hover { color: var(--ph-vermilion); }
.ph-proc__docs { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .84rem; font-weight: 500; color: var(--ph-vermilion); text-decoration: none; }
.ph-proc__docs svg { width: 16px; height: 16px; flex: none; }
.ph-proc__docs:hover { text-decoration: underline; }
.ph-proc__empty { padding: 24px 8px; color: var(--ph-muted); border-bottom: 1px solid var(--ph-line); margin: 0; }
.ph-proc__footer { margin-top: 24px; }
.ph-proc--archive .ph-proc__title a { -webkit-line-clamp: 3; line-clamp: 3; }

.ph-proc__aside {
	position: sticky; top: 150px; padding: 26px 24px 18px; background: var(--ph-lacquer); color: #eadfca;
	--ph-cut: 26px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ph-cut)), calc(100% - var(--ph-cut)) 100%, 0 100%);
	box-shadow: inset 0 3px 0 var(--ph-gold);
}
.ph-proc__aside h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--ph-gold-light); }
.ph-proc__aside ul { list-style: none; margin: 0; padding: 0; }
.ph-proc__aside li + li { border-top: 1px solid rgba(200, 160, 74, .2); }
.ph-proc__aside a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; color: #eadfca; text-decoration: none; font-size: .93rem; line-height: 1.5; }
.ph-proc__aside a span:last-child { color: var(--ph-gold); flex: none; transition: transform .2s; }
.ph-proc__aside a:hover { color: var(--ph-gold-light); }
.ph-proc__aside a:hover span:last-child { transform: translateX(3px); }

/* on a lacquer background */
.ph-lacquer .ph-proc__list, .ph-lacquer .ph-proc__item, .ph-lacquer .ph-proc__empty { border-color: rgba(200, 160, 74, .22); }
.ph-lacquer .ph-proc__title a { color: #f3e9d6; }
.ph-lacquer .ph-proc__title a:hover, .ph-lacquer .ph-proc__docs { color: var(--ph-gold-light); }
.ph-lacquer .ph-proc__fy { color: #b6a78f; }
.ph-lacquer .ph-proc__aside { background: var(--ph-lacquer-2); }

@media (max-width: 900px) {
	.ph-proc { grid-template-columns: minmax(0, 1fr); }
	.ph-proc__aside { position: static; }
}
@media (max-width: 560px) {
	.ph-proc__item { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding-inline: 2px; }
	.ph-proc__date { height: 54px; }
	.ph-proc__date b { font-size: 1.25rem; }
}

/* Footer options (Customizer > ส่วนท้าย): fewer columns, drawing strength */
@media (min-width: 961px) {
	.ph-footer__grid[data-cols="3"] { grid-template-columns: 1.4fr 1fr 1.2fr; }
	.ph-footer__grid[data-cols="2"] { grid-template-columns: 1.4fr 1fr; }
	.ph-footer__grid[data-cols="1"] { grid-template-columns: minmax(0, 640px); justify-content: center; text-align: center; }
	.ph-footer__grid[data-cols="1"] .ph-brand, .ph-footer__grid[data-cols="1"] .ph-social { justify-content: center; }
}
.ph-footer__building--light img { opacity: .06; }
.ph-footer__building--strong img { opacity: .22; }
@media (max-width: 700px) {
	.ph-footer__building--light img { opacity: .05; }
	.ph-footer__building--strong img { opacity: .18; }
}
.ph-footer__map { display: inline-block; margin-top: 4px; font-size: .88rem; color: var(--ph-gold) !important; }
.ph-footer__map:hover { color: var(--ph-gold-light) !important; }

/* สาขาวิชา: a background picture per card (Customizer > หน้าแรก: สาขาวิชา) */
.ph-craft.has-image { isolation: isolate; }
.ph-craft__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ph-craft__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: saturate(.85); transform: scale(1.02); transition: opacity .45s, transform .8s cubic-bezier(.2, .7, .2, 1); }
.ph-craft__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 17, 14, .35) 0%, rgba(21, 17, 14, .7) 55%, rgba(21, 17, 14, .92) 100%); }
.ph-craft.has-image > :not(.ph-craft__bg) { position: relative; z-index: 1; }
.ph-craft.has-image::before, .ph-craft.has-image::after { z-index: 2; }
.ph-craft.has-image p { color: #d8cbb3; }
.ph-craft.has-image:hover .ph-craft__bg img, .ph-craft.has-image:focus-visible .ph-craft__bg img { opacity: .62; transform: scale(1.08); }
@media (hover: none) { .ph-craft__bg img { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ph-craft__bg img { transition: none; } }
.ph-craft--master .ph-craft__bg::after { background: linear-gradient(150deg, rgba(200, 160, 74, .28), rgba(165, 28, 28, .32)), linear-gradient(180deg, rgba(21, 17, 14, .4) 0%, rgba(21, 17, 14, .9) 100%); }

/* News headlines: their own refined face (Customizer > อัตลักษณ์ > ตัวอักษรพาดหัวข่าว) */
.ph-card__title, .single-post .ph-pagehead h1 {
	font-family: var(--ph-font-headline, var(--ph-font-body)); font-weight: var(--ph-headline-weight, 600);
	letter-spacing: 0; line-height: 1.6;
}
.ph-card__title { font-size: 1.08rem; }
.ph-news-grid .ph-card:first-child .ph-card__title { font-size: 1.45rem; line-height: 1.55; }
.single-post .ph-pagehead h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.5; }

/* News section pages (front page) */
.ph-news-pages { transition: opacity .25s; }
.ph-news-pages.is-loading { opacity: .45; pointer-events: none; }
.ph-news-pagination { margin-top: clamp(28px, 4vw, 40px); }