/* AIP Platform — 師資總覽 page, reproduced 1:1 from design/mockups/teachers.html
 * + tokens.css. Self-contained, scoped under .aip-teachers-page. */

.aip-teachers-page {
	--surface: oklch(0.992 0.004 90); --paper: oklch(0.975 0.008 88); --paper-2: oklch(0.945 0.014 86);
	--paper-3: oklch(0.905 0.020 84); --paper-4: oklch(0.855 0.030 83);
	--line: oklch(0.850 0.022 82); --line-soft: oklch(0.900 0.018 84);
	--ink: oklch(0.27 0.012 64); --ink-soft: oklch(0.46 0.016 62);
	--bark: oklch(0.40 0.034 68); --clay: oklch(0.60 0.045 62);
	--mist-surface: oklch(0.86 0.020 158); --mist: oklch(0.77 0.028 160); --mist-ink: oklch(0.585 0.040 160);
	--gold: oklch(0.655 0.078 80); --gold-bright: oklch(0.740 0.078 82); --gold-deep: oklch(0.525 0.066 79);
	--gold-hairline: linear-gradient(90deg, transparent, var(--gold-deep) 16%, var(--gold-bright) 50%, var(--gold-deep) 84%, transparent);
	--seal: oklch(0.42 0.115 30); --seal-bright: oklch(0.475 0.125 31);
	--on-dark: oklch(0.945 0.016 86);
	--shadow-sm: 0 1px 2px rgba(72,54,32,.07), 0 2px 6px rgba(72,54,32,.05);
	--shadow-md: 0 4px 12px rgba(72,54,32,.09), 0 14px 30px rgba(72,54,32,.07);
	--shadow-lg: 0 10px 26px rgba(72,54,32,.11), 0 26px 64px rgba(72,54,32,.10);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
	--gua-wash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%238a6d3b' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='30' y1='34' x2='150' y2='34'/%3E%3Cline x1='30' y1='52' x2='72' y2='52'/%3E%3Cline x1='108' y1='52' x2='150' y2='52'/%3E%3Cline x1='30' y1='70' x2='150' y2='70'/%3E%3Cline x1='30' y1='118' x2='72' y2='118'/%3E%3Cline x1='108' y1='118' x2='150' y2='118'/%3E%3Cline x1='30' y1='136' x2='150' y2='136'/%3E%3Cline x1='30' y1='154' x2='72' y2='154'/%3E%3Cline x1='108' y1='154' x2='150' y2='154'/%3E%3C/g%3E%3C/svg%3E");
	--torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='14' viewBox='0 0 180 14'%3E%3Cpath d='M0 14 V6 C12 9 20 2 33 5 C44 7 52 1 64 4 C76 7 84 2 97 5 C108 8 117 2 129 5 C141 8 150 3 162 5 C170 6 175 9 180 6 V14 Z' fill='%23000'/%3E%3C/svg%3E");
	--font-display: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif;
	--font-body: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
	--font-en-display: "Playfair Display", Georgia, serif;
	--font-en-body: "Source Sans 3", system-ui, sans-serif;
	--fs-h1: clamp(1.9rem, 3.4vw, 2.5rem); --fs-h2: clamp(1.5rem, 2.4vw, 1.875rem);
	--fs-body: 1.0625rem; --fs-small: 0.8125rem;
	--sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; --sp-d: 108px;
	--r-sm: 4px; --r-md: 8px; --maxw: 1200px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 420ms;

	width: 100%; max-width: 100%; margin-inline: 0;
	background-color: var(--paper); color: var(--ink);
	font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.75; text-align: left;
}
.aip-teachers-page * { box-sizing: border-box; }
.aip-teachers-page h2, .aip-teachers-page h3, .aip-teachers-page h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; font-weight: 700; margin: 0; }
.aip-teachers-page h2 { font-size: var(--fs-h2); }
.aip-teachers-page p { margin: 0 0 1em; }
.aip-teachers-page a { color: var(--seal); text-decoration: none; }
.aip-teachers-page img { display: block; max-width: 100%; }
.aip-teachers-page .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-lg); }
.aip-teachers-page section { padding-block: var(--sp-d); position: relative; }
.aip-teachers-page .zone-paper { background: var(--paper); }
.aip-teachers-page .zone-paper2 { background: var(--paper-2); }
.aip-teachers-page .overline { font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); font-weight: 600; }
.aip-teachers-page .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 13px 30px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); border: 1px solid transparent; }
.aip-teachers-page .btn-primary { background: var(--seal); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.aip-teachers-page .btn-primary:hover { background: var(--seal-bright); transform: translateY(-1px); }
.aip-teachers-page .btn-ghost { background: transparent; color: var(--bark); border-color: var(--bark); }
.aip-teachers-page .btn-ghost:hover { background: var(--bark); color: var(--on-dark); }
.aip-teachers-page .seal-chip { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--seal); color: var(--on-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 70%, transparent), 0 1px 0 rgba(0,0,0,.12); }
@media (prefers-reduced-motion: no-preference) {
	.aip-teachers-page .reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
	.aip-teachers-page .reveal.in { opacity: 1; transform: none; }
}
.aip-teachers-page .hexgrain { position: relative; isolation: isolate; }
.aip-teachers-page .hexgrain > .wrap { position: relative; z-index: 1; }
.aip-teachers-page .hexgrain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--gua-wash); background-repeat: repeat; background-position: center top; background-size: 200px auto; opacity: .055; mix-blend-mode: multiply; }
.aip-teachers-page .seam { height: 0; position: relative; z-index: 3; }
.aip-teachers-page .seam::before { content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background: var(--gold-hairline); opacity:.7; }
.aip-teachers-page .seam::after { content:""; position:absolute; left:8%; right:8%; top:-6px; height:7px; background: color-mix(in oklch, var(--gold) 30%, transparent); -webkit-mask: var(--torn) repeat-x top center / 180px 7px; mask: var(--torn) repeat-x top center / 180px 7px; opacity:.5; }
.aip-teachers-page .sec-head-d{ display:grid; grid-template-columns:auto 1fr; column-gap: var(--sp-md); align-items:center; max-width:46em; margin-bottom: var(--sp-xl); position:relative; }
.aip-teachers-page .sec-head-d .sh-chip{ grid-row: 1 / span 2; align-self:start; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:7px; font-family:var(--font-display); font-weight:700; font-size:1.18rem; color: var(--gold-deep); background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 62%, var(--line)); }
.aip-teachers-page .sec-head-d .sh-rule{ grid-column: 2; align-self:end; height:1px; width:100%; max-width:280px; background: var(--gold-hairline); opacity:.85; margin-bottom: 8px; }
.aip-teachers-page .sec-head-d .overline{ grid-column:2; display:block; margin-bottom: 8px; }
.aip-teachers-page .sec-head-d h2{ grid-column:2; font-size: var(--fs-h1); }
.aip-teachers-page .sec-head-d.center{ display:block; text-align:center; max-width:46em; margin-inline:auto; }
.aip-teachers-page .sec-head-d.center h2{ grid-column:auto; }
.aip-teachers-page .sec-head-d.center .lead{ max-width: 34em; margin: var(--sp-md) auto 0; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.85; }
.aip-teachers-page .sec-head-d.center .lead .em{ color: var(--bark); font-family: var(--font-display); font-weight: 500; }
@media (max-width:560px){ .aip-teachers-page .sec-head-d{ column-gap: var(--sp-sm); } .aip-teachers-page .sec-head-d .sh-rule{ max-width:160px; } }

/* faculty grid */
.aip-teachers-page .editors{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px,3.5vw,48px); align-items:stretch; }
.aip-teachers-page .editors.as-rail{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(300px, 1fr); overflow-x:auto; padding-bottom:var(--sp-md); scroll-snap-type:x mandatory; }
.aip-teachers-page .editors.as-rail .editor{ scroll-snap-align:start; }
.aip-teachers-page .editor{ display:flex; flex-direction:column; position:relative; background: color-mix(in srgb, var(--surface) 60%, transparent); border:1px solid color-mix(in oklch, var(--gold) 22%, var(--line)); border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.aip-teachers-page a.editor{ color:var(--ink); }
.aip-teachers-page a.editor:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--gold) 46%, var(--line)); }
.aip-teachers-page .editor .pf{ aspect-ratio:5/4; width:100%; overflow:hidden; position:relative; background:var(--paper-2); border-bottom:1px solid var(--line); }
.aip-teachers-page .editor .pf img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.aip-teachers-page .editor .pf.ph{ display:grid; place-items:center; background: repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 12px, var(--paper-3) 12px, var(--paper-3) 24px); }
.aip-teachers-page .editor .pf.ph .needsreal{ position:static; font-family:var(--font-display); color:var(--clay); font-size:.8rem; text-align:center; line-height:1.4; background:none; box-shadow:none; }
	.aip-teachers-page .duotone img,
	.aip-teachers-page .duotone-mist img{ filter:none; }
	.aip-teachers-page .duotone::after,
	.aip-teachers-page .duotone::before,
	.aip-teachers-page .duotone-mist::after,
	.aip-teachers-page .duotone-mist::before{ content:none; }
.aip-teachers-page .needsreal{ position:absolute; right:6px; bottom:6px; z-index:3; font-size:.62rem; line-height:1.2; text-align:center; color:var(--on-dark); background: color-mix(in oklch, var(--bark) 88%, transparent); padding:3px 7px; border-radius:4px; box-shadow:var(--shadow-sm); }
.aip-teachers-page .editor .body{ padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 4px); display:flex; flex-direction:column; flex:1; }
.aip-teachers-page .editor .role{ display:inline-block; color:var(--clay); font-weight:600; font-size:.8rem; letter-spacing:.1em; }
.aip-teachers-page .editor.mist .role{ color:var(--mist-ink); }
.aip-teachers-page .editor h3{ font-size:1.5rem; margin:6px 0 4px; }
.aip-teachers-page .editor .by{ color:var(--ink-soft); font-size:.9rem; }
.aip-teachers-page .editor .q{ font-family:var(--font-display); font-weight:500; color:var(--bark); margin-top:var(--sp-md); font-size:1.06rem; line-height:1.6; position:relative; padding-top:var(--sp-md); }
.aip-teachers-page .editor .q::before{ content:""; position:absolute; top:0; left:0; width:40px; height:1px; background:var(--gold-hairline); }
.aip-teachers-page .editor.mist .q{ color:var(--mist-ink); }
.aip-teachers-page .editor .more{ margin-top:auto; padding-top: var(--sp-md); font-family:var(--font-body); font-weight:600; font-size:.9rem; color: var(--seal); display:inline-flex; align-items:center; gap:6px; }
.aip-teachers-page .editor .more .arr{ transition: transform var(--dur) var(--ease); }
.aip-teachers-page a.editor:hover .more .arr{ transform: translateX(4px); }
.aip-teachers-page .editor.ghost{ background: transparent; box-shadow:none; border:1px dashed color-mix(in oklch, var(--gold) 40%, var(--clay)); align-items:center; justify-content:center; text-align:center; min-height: 100%; }
.aip-teachers-page .editor.ghost .ghost-in{ padding: var(--sp-xl) var(--sp-lg); display:flex; flex-direction:column; align-items:center; gap: var(--sp-sm); }
.aip-teachers-page .editor.ghost .seal-open{ width:52px; height:52px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--gold-deep); border:1px dashed color-mix(in oklch, var(--gold) 55%, var(--clay)); background: color-mix(in srgb, var(--surface) 40%, transparent); margin-bottom: var(--sp-xs); }
.aip-teachers-page .editor.ghost h3{ font-size:1.16rem; color:var(--bark); font-weight:500; }
.aip-teachers-page .editor.ghost p{ font-size:.86rem; color:var(--ink-soft); margin:0; max-width: 16em; }
@media (max-width:900px){ .aip-teachers-page .editors{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .aip-teachers-page .editors{ grid-template-columns:1fr; gap:var(--sp-xl); } .aip-teachers-page .editor .pf{ aspect-ratio:16/10; } .aip-teachers-page .editor.ghost{ min-height: 220px; } }

/* masters band */
.aip-teachers-page .mist-band{ position:relative; background: linear-gradient(180deg, var(--paper-2), color-mix(in oklch, var(--mist-surface) 38%, var(--paper-2))); border-block:1px solid var(--line); overflow:hidden; }
.aip-teachers-page .mist-band::before{ content:""; position:absolute; inset:0; background-image:var(--gua-wash); background-size:200px; opacity:.06; mix-blend-mode:multiply; pointer-events:none; }
.aip-teachers-page .mist-band::after{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gold-hairline); opacity:.7; }
.aip-teachers-page .mist-band > .wrap{ position:relative; z-index:1; }
.aip-teachers-page .lineage-tag{ display:inline-flex; align-items:center; justify-self:start; width:fit-content; max-width:100%; gap:8px; margin-bottom: var(--sp-sm); font-size:.74rem; letter-spacing:.12em; font-weight:600; color: var(--mist-ink); background: color-mix(in srgb, var(--surface) 55%, transparent); border:1px solid color-mix(in oklch, var(--mist-ink) 40%, var(--line)); padding:5px 12px; border-radius:999px; grid-column:2; white-space:nowrap; }
.aip-teachers-page .lineage-tag .seal-chip{ width:22px; height:22px; font-size:.72rem; border-radius:4px; }
.aip-teachers-page .masters{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); margin-top: var(--sp-lg); }
.aip-teachers-page .master{ display:grid; grid-template-columns:128px 1fr; gap:var(--sp-lg); align-items:start; }
.aip-teachers-page .master .pf{ aspect-ratio:4/5; border-radius:var(--r-md); overflow:hidden; position:relative; background:var(--paper-3); border:1px solid var(--line); box-shadow:var(--shadow-md); }
	.aip-teachers-page .master .pf img{ width:100%; height:100%; object-fit:cover; filter:none; }
	.aip-teachers-page .master .pf.ph{ display:grid; place-items:center; }
	.aip-teachers-page .master .pf::after{ content:none; }
.aip-teachers-page .master .era{ display:inline-block; font-family:var(--font-en-body); font-weight:600; font-size:.8rem; letter-spacing:.06em; color:var(--clay); }
.aip-teachers-page .master h3{ font-size:1.4rem; margin:4px 0 2px; }
.aip-teachers-page .master .who{ color:var(--ink-soft); font-size:.9rem; margin:0 0 var(--sp-sm); }
.aip-teachers-page .master blockquote{ margin:0; padding-top: var(--sp-sm); position:relative; font-family:var(--font-display); color:var(--bark); font-size:1.02rem; line-height:1.7; }
.aip-teachers-page .master blockquote::before{ content:""; position:absolute; top:0; left:0; width:36px; height:1px; background:var(--gold-hairline); }
.aip-teachers-page .heritage-quote{ margin: var(--sp-xl) auto 0; max-width: 40em; text-align:center; font-family:var(--font-display); font-weight:500; font-size: clamp(1.18rem, 2.4vw, 1.5rem); color: var(--bark); line-height:1.7; }
.aip-teachers-page .heritage-quote .qmk{ color: var(--mist-ink); }
@media (max-width:860px){ .aip-teachers-page .masters{ grid-template-columns:1fr; gap:var(--sp-xl);} }
@media (max-width:420px){ .aip-teachers-page .master{ grid-template-columns:1fr; } .aip-teachers-page .master .pf{ max-width:200px; } }

/* CTA */
.aip-teachers-page .zone-3{ background:var(--paper-3); position:relative; }
.aip-teachers-page .zone-3::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); mix-blend-mode:multiply; opacity:.55; }
.aip-teachers-page .zone-3 > section{ position:relative; z-index:1; }
.aip-teachers-page .stage-cta{ max-width: 46em; margin-inline:auto; text-align:center; position:relative; }
.aip-teachers-page .stage-cta .kicker{ font-family:var(--font-en-display); font-style:italic; color:var(--clay); font-size:1.1rem; }
.aip-teachers-page .stage-cta h2{ font-size: var(--fs-h1); margin: var(--sp-sm) 0 var(--sp-md); letter-spacing:.02em; }
.aip-teachers-page .stage-cta h2 .accent{ color:var(--seal); position:relative; white-space:nowrap; }
.aip-teachers-page .stage-cta h2 .accent::after{ content:""; position:absolute; left:6%; right:6%; bottom:-.14em; height:2px; background:var(--gold-hairline); opacity:.9; }
.aip-teachers-page .stage-cta p{ color:var(--ink-soft); font-size:1.1rem; max-width: 32em; margin:0 auto var(--sp-xl); }
.aip-teachers-page .stage-cta .ctas{ display:flex; gap:var(--sp-md); justify-content:center; flex-wrap:wrap; }