/* AIP Platform — 關於 AIP page, reproduced 1:1 from about.html + tokens.css.
 * Self-contained, scoped under .aip-about. */

.aip-about {
	--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);
	--gold-hairline-v: linear-gradient(180deg, 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-seal: 0 6px 22px rgba(122,42,36,.20);
	--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(2.1rem, 3.7vw, 2.9rem); --fs-h2: clamp(1.7rem, 2.7vw, 2.2rem);
	--fs-body: 1.15rem; --fs-small: 0.95rem;
	--sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; --sp-air: 120px; --sp-d: 108px;
	--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --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-about * { box-sizing: border-box; }
.aip-about h2, .aip-about h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; font-weight: 700; margin: 0; }
.aip-about h2 { font-size: var(--fs-h2); }
.aip-about p { margin: 0 0 1em; }
.aip-about a { color: var(--seal); text-decoration: none; }
.aip-about img { display: block; max-width: 100%; }
.aip-about .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-lg); }
.aip-about section { padding-block: var(--sp-d); position: relative; }
.aip-about .zone-paper { background: var(--paper); }
.aip-about .zone-paper2 { background: var(--paper-2); }
.aip-about .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-about .aip-acronym {
	color: var(--seal);
	font-size: 1.18em;
	font-weight: 900;
	letter-spacing: .08em;
	text-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 28%, transparent);
}
.aip-about .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-about .btn-primary { background: var(--seal); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.aip-about .btn-primary:hover { background: var(--seal-bright); transform: translateY(-1px); }
.aip-about .btn-ghost { background: transparent; color: var(--bark); border-color: var(--bark); }
.aip-about .btn-ghost:hover { background: var(--bark); color: var(--on-dark); }
.aip-about .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-about .reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
	.aip-about .reveal.in { opacity: 1; transform: none; }
}
.aip-about .hexgrain { position: relative; isolation: isolate; }
.aip-about .hexgrain > .wrap { position: relative; z-index: 1; }
.aip-about .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-about .seam { height: 0; position: relative; z-index: 3; }
.aip-about .seam::before { content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background: var(--gold-hairline); opacity:.7; }
.aip-about .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-about .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-about .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-about .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-about .sec-head-d .overline{ grid-column:2; display:block; margin-bottom: 8px; }
.aip-about .sec-head-d h2{ grid-column:2; font-size: var(--fs-h1); }
.aip-about .sec-head-d.center{ display:block; text-align:center; max-width:46em; margin-inline:auto; }
.aip-about .sec-head-d.center .overline{ grid-column:auto; margin-bottom:6px; }
.aip-about .sec-head-d.center h2{ grid-column:auto; }
@media (max-width:560px){ .aip-about .sec-head-d{ column-gap: var(--sp-sm); } .aip-about .sec-head-d .sh-rule{ max-width:160px; } }

.aip-about .head-quote{ max-width: 40em; margin: var(--sp-lg) auto 0; text-align:center; font-family: var(--font-display); font-weight:500; font-size: 1.22rem; line-height:1.85; color: var(--bark); }
.aip-about .head-quote .q-seal{ display:inline-block; margin-top: var(--sp-md); color: var(--seal); font-weight:700; letter-spacing:.06em; position:relative; padding-top: var(--sp-md); }
.aip-about .head-quote .q-seal::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:56px; height:1px; background: var(--gold-hairline); opacity:.9; }

.aip-about .vision-lead{ max-width: 34em; margin: 0 auto; text-align:center; font-family: var(--font-display); font-size: 1.3rem; color: var(--bark); line-height:1.95; }
.aip-about .vision-lead::first-letter{ float:none; font-family: var(--font-display); font-weight:900; font-size: 3.2rem; line-height:.9; padding: 0 6px 0 0; margin: 0; color: var(--seal); background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--gold) 22%, transparent) 0); }
.aip-about .vision-coda{ max-width: 30em; margin: var(--sp-xl) auto 0; text-align:center; color: var(--ink-soft); font-size: 1.02rem; }

.aip-about .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1160px; margin-inline:auto; }
.aip-about .values .v { padding: 0 var(--sp-lg); text-align: center; position: relative; }
.aip-about .values .v + .v::before { content:""; position:absolute; left:0; top:8%; height:84%; width:1px; background: var(--gold-hairline-v); opacity:.6; }
.aip-about .values .num { font-family: var(--font-display); font-weight:700; font-size: 2rem; line-height:1; color: var(--gold-deep); display:block; margin-bottom: var(--sp-sm); }
.aip-about .values .num .en { display:block; font-family: var(--font-en-display); font-style:italic; font-size:.9rem; color: var(--gold); letter-spacing:.08em; margin-top:4px; }
.aip-about .values h3 { font-size: 1.2rem; margin: var(--sp-sm) 0; }
.aip-about .values p { font-size: .95rem; color: var(--ink-soft); margin:0; }
@media (max-width:820px){ .aip-about .values{ grid-template-columns:1fr 1fr; gap:var(--sp-xl);} .aip-about .values .v+ .v::before{display:none;} }
@media (max-width:460px){ .aip-about .values{ grid-template-columns:1fr; gap:var(--sp-lg);} }

/* timeline */
.aip-about .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-about .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-about .mist-band::after{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gold-hairline); opacity:.7; }
.aip-about .mist-band > .wrap{ position:relative; z-index:1; }
.aip-about .heritage-wrap{ position:relative; }
.aip-about .heritage-colophon{ position:absolute; top:6px; right: clamp(-8px, 1vw, 24px); writing-mode: vertical-rl; text-orientation: upright; font-family: var(--font-display); font-weight:700; font-size: clamp(.9rem, 1.3vw, 1.1rem); letter-spacing:.4em; color: var(--bark); display:flex; gap:14px; align-items:flex-start; }
.aip-about .heritage-colophon::before{ content:""; width:1px; height: 168px; background: var(--gold-hairline-v); opacity:.8; }
@media (max-width: 1080px){ .aip-about .heritage-colophon{ display:none; } }
.aip-about .timeline { max-width: 980px; margin: 0 auto; position: relative; padding-left: 56px; }
.aip-about .timeline::before{ content:""; position:absolute; left:21px; top:10px; bottom:10px; width:2px; background: var(--gold-hairline-v); opacity:.85; }
.aip-about .tl-item { position: relative; display:grid; grid-template-columns:minmax(250px, 280px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items:start; padding-bottom: var(--sp-air); }
.aip-about .tl-item:last-child{ padding-bottom:0; }
.aip-about .tl-dot { position:absolute; left:-56px; top:-4px; }
.aip-about .tl-dot .seal-chip { position: relative; z-index:2; box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--gold-bright) 65%, transparent), var(--shadow-seal); }
.aip-about .tl-item .yr { font-family: var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.06em; color: var(--gold-deep); display:block; margin-bottom: 2px; }
.aip-about .tl-item h3 { font-size:1.34rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.aip-about .tl-item .badge-heir{ font-size:.68rem; letter-spacing:.14em; color: var(--gold-deep); padding: 2px 8px; border-radius:3px; font-family:var(--font-body); font-weight:600; box-shadow: inset 0 0 0 1px var(--gold); }
.aip-about .tl-copy{ padding-top: clamp(4px, 1vw, 12px); }
.aip-about .tl-item p { color: var(--ink-soft); margin-top:6px; font-size:1rem; line-height:1.86; max-width: 39em; }
.aip-about .tl-item .tl-q{ font-family: var(--font-display); font-weight:500; color: var(--bark); margin-top: var(--sp-md); font-size: 1.04rem; line-height:1.65; position:relative; padding-top: var(--sp-sm); max-width: 32em; }
.aip-about .tl-item .tl-q::before{ content:""; position:absolute; top:0; left:0; width:40px; height:1px; background: var(--gold-hairline); }
.aip-about .tl-portrait-wrap{ position:relative; }
.aip-about .tl-portrait { width:100%; height:420px; border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-md), inset 0 0 0 1px color-mix(in oklch, var(--gold) 30%, transparent); background: var(--paper-2); position:relative; }
.aip-about .tl-portrait.ph { display:grid; place-items:center; text-align:center; background: repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 12px, var(--paper-3) 12px, var(--paper-3) 24px); border: 1px dashed var(--clay); }
.aip-about .tl-portrait.ph .needsreal{ position:static; color:var(--clay); font-size:.66rem; line-height:1.3; background:none; box-shadow:none; }
.aip-about .tl-portrait img{ width:100%; height:100%; object-fit:cover; }
	.aip-about .tl-portrait.duotone img,
	.aip-about .tl-portrait.duotone-mist img{ filter:none; }
	.aip-about .tl-portrait.duotone::after,
	.aip-about .tl-portrait.duotone-mist::after{ content:none; }
.aip-about .needsreal{ position:absolute; right:6px; bottom:6px; z-index:3; font-size:.6rem; 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); }
@media (max-width:760px){ .aip-about .tl-item{ grid-template-columns:1fr; gap: var(--sp-md); } .aip-about .tl-portrait{ width:min(100%, 280px); height:350px; } }
@media (max-width:560px){ .aip-about .timeline{ padding-left:46px; } .aip-about .timeline::before{ left:18px; } .aip-about .tl-dot{ left:-46px; } .aip-about .tl-portrait{ width:min(100%, 232px); height:290px; } }

/* mission */
.aip-about .zone-3{ background:var(--paper-3); position:relative; }
.aip-about .zone-3::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); mix-blend-mode:multiply; opacity:.55; }
.aip-about .zone-3 > section{ position:relative; z-index:1; }
.aip-about .mission{ max-width: 52em; margin-inline:auto; text-align:center; position:relative; }
.aip-about .mission .seal-water{ position:absolute; inset:-18px 0 auto; z-index:0; pointer-events:none; font-family:var(--font-display); font-weight:900; font-size:clamp(5rem,16vw,11rem); color:color-mix(in oklch, var(--seal) 8%, transparent); line-height:1; }
.aip-about .mission .creed{ position:relative; z-index:1; }
.aip-about .mission .creed-line{ display:block; font-family: var(--font-display); font-weight:700; font-size: clamp(1.55rem, 3.6vw, 2.35rem); line-height:1.5; color: var(--ink); letter-spacing:.02em; }
.aip-about .mission .creed-line .hot{ color: var(--seal); }
.aip-about .mission .creed-rule{ width:72px; height:1px; margin: var(--sp-lg) auto; background: var(--gold-hairline); opacity:.8; }
.aip-about .mission .creed-sub{ position:relative; z-index:1; max-width: 34em; margin: var(--sp-md) auto 0; color: var(--bark); font-size:1.06rem; }

/* contact */
.aip-about .contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px,6vw,88px); align-items:center; max-width: 1000px; margin-inline:auto; }
.aip-about .contact-copy h2{ font-size: var(--fs-h1); margin-bottom: var(--sp-md); }
.aip-about .contact-copy p{ color: var(--ink-soft); max-width: 30em; }
.aip-about .contact-ctas{ display:flex; gap: var(--sp-md); flex-wrap:wrap; margin-top: var(--sp-lg); }
.aip-about .social-card{ background: var(--surface); border-radius: var(--r-lg); border:1px solid color-mix(in oklch, var(--gold) 26%, var(--line)); box-shadow: var(--shadow-md); padding: var(--sp-xl); position:relative; isolation:isolate; }
.aip-about .social-card::after{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gold-hairline); opacity:.7; }
.aip-about .social-card .label{ font-family:var(--font-display); font-size:1.05rem; color:var(--bark); display:block; margin-bottom: var(--sp-md); }
.aip-about .social-row{ display:flex; align-items:center; gap: var(--sp-md); padding: 14px 0; border-bottom:1px solid var(--line); transition: padding-left var(--dur) var(--ease); }
.aip-about .social-row:last-child{ border-bottom:0; }
.aip-about .social-row:hover{ padding-left: 6px; }
.aip-about .social-row .ic{ flex:none; width:40px; height:40px; border-radius:8px; display:grid; place-items:center; color: var(--seal); background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 55%, var(--line)); }
.aip-about .social-row .ic svg{ width:20px; height:20px; }
.aip-about .social-row .meta{ line-height:1.4; }
.aip-about .social-row .meta b{ font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1.02rem; display:block; }
.aip-about .social-row .meta span{ color: var(--clay); font-family:var(--font-en-body); font-size:.85rem; letter-spacing:.04em; }
@media (max-width:760px){ .aip-about .contact-grid{ grid-template-columns:1fr; gap: var(--sp-xl);} }