/* ==========================================================================
   pf-chinese.css - the "Chinese" (Dragon & Pagoda) portfolio template, public pages.
   Ported from docs/Assem_Arafa___Chinese_Portfolio.html. EVERY rule is scoped under .pf-zh so nothing leaks into Default,
   Editorial, Architect, Pharmacy, Mechanical or the rest of the site. Class names carry a zh- prefix because Bootstrap is
   loaded site-wide (.btn, .box, .lead, .nav ... would collide). Keyframes are zh- prefixed too.

   Wrapper (written by _PortfolioChinese in Step 3a):
     <div class="pf-page pf-zh" id="pf-top" data-pf-template="chinese"> ... </div>

   Tokens (on the wrapper, NOT on :root): --bg --ink --acc --gold --on  (+ derived --mut --line --card).
   The five base tokens are written INLINE on the wrapper by the server for every look (presets: PortfolioPaletteRules.ChinesePresets,
   Custom: the stored palette; Step 4). The values below are only the Red fallback for a page opened without them.
   --mut / --line / --card are mixed from the base tokens with color-mix, exactly as in the prototype.

   Step 2a (this file): tokens, page frame, background layer, petals, shared atoms (wrap, box, buttons, small label, section
   header), reveal, the pagoda scene's animations, focus ring, reduced motion.
   Step 2b: top bar, hero (seal, name, typing line, stats). Step 3a: About, Skills, Words, Journey, Work, Contact, footer.
   Step 3b: the project page.
   ========================================================================== */

@keyframes zh-drift { to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes zh-float { to { transform: translateY(-26px) rotate(3deg); } }
@keyframes zh-fall  { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }
@keyframes zh-sway  { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes zh-mist  { to { transform: translateX(60px); } }
@keyframes zh-moonp { 50% { transform: scale(1.03); opacity: .88; } }
@keyframes zh-glowp { from { opacity: .5; } to { opacity: 1; } }
@keyframes zh-rip   { from { transform: scale(.4); opacity: .6; } to { transform: scale(1.15); opacity: 0; } }

/* ---------- tokens: Red fallback (the real colors come inline from the server) ---------- */
.pf-zh {
    --bg: #130808;
    --ink: #f4e6d3;
    --acc: #d62f2f;
    --gold: #f0b94a;
    --on: #ffffff;
    --mut: color-mix(in srgb, var(--ink) 62%, var(--bg));
    --line: color-mix(in srgb, var(--gold) 30%, transparent);
    --card: color-mix(in srgb, var(--acc) 10%, var(--bg));
    --zh-disp: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --zh-brush: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    --zh-body: 'DM Sans', system-ui, sans-serif;
    --zh-top: 64px;                 /* height of the top bar (Step 2b) */
    --mp-muted: var(--mut);         /* drawing labels (motion-picture.css) */
}

/* ---------- page frame ---------- */
/* Full-bleed (escape the layout container) and the site body painted in the template color so no other-colored strip shows
   around the page. The body cannot read the wrapper's variables, hence the literal Red page color here; every rendered page also
   writes a more specific body rule with its own page color (ChineseHtml.BodyStyle, Step 4). */
body:has(.pf-zh) { background: #130808; overflow-x: hidden; transition: background .4s; }
html:has(.pf-zh) { scroll-behavior: smooth; scroll-padding-top: 72px; }

.pf-zh {
    position: relative; isolation: isolate;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top, 0px);
    background-color: var(--bg);
    color: var(--ink);
    font: 400 15px/1.6 var(--zh-body);
    overflow-x: clip;
    text-align: start;
    transition: background-color .4s, color .4s;
}
.pf-zh *, .pf-zh *::before, .pf-zh *::after { box-sizing: border-box; }
.pf-zh a { color: inherit; text-decoration: none; }
.pf-zh button { font: inherit; color: inherit; }
.pf-zh :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- background layer: two blurred orbs, the huge faint dragon glyph, a radial wave ---------- */
.pf-zh .zh-bgl { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pf-zh .zh-bgl i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; animation: zh-drift 30s ease-in-out infinite alternate; }
.pf-zh .zh-bgl i:nth-child(1) { width: 46vw; height: 46vw; background: var(--acc); left: -12vw; top: -10vw; }
.pf-zh .zh-bgl i:nth-child(2) { width: 38vw; height: 38vw; background: var(--gold); right: -10vw; bottom: -8vw; opacity: .18; animation-duration: 36s; }
.pf-zh .zh-bgl b { position: absolute; right: -3vw; top: 12vh; font: 400 min(60vw, 640px)/1 var(--zh-brush); color: var(--acc); opacity: .06; animation: zh-float 14s ease-in-out infinite alternate; }
.pf-zh .zh-wave { position: absolute; inset: auto 0 0 0; height: 34vh; opacity: .12; background: repeating-radial-gradient(circle at 50% 100%, transparent 0 11px, var(--gold) 11px 12px); background-size: 64px 32px; }

/* falling petals (14, created by chinese-motion.js; none without JS or under reduced motion) */
.pf-zh .zh-petal { position: fixed; top: -30px; width: 12px; height: 9px; border-radius: 80% 0 80% 0; background: var(--acc); opacity: .7; pointer-events: none; z-index: 1; animation: zh-fall linear infinite; }

/* ---------- layout atoms ---------- */
.pf-zh .zh-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.pf-zh .zh-sec { padding: clamp(54px, 8vw, 100px) 22px 0; }

.pf-zh .zh-box {
    border: 1px solid var(--line); border-radius: 20px; min-width: 0; padding: 22px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 1.5%, transparent));
    backdrop-filter: blur(10px);
}

.pf-zh .zh-btn {
    display: inline-block; cursor: pointer; background: none; color: var(--ink);
    border: 1px solid var(--line); border-radius: 30px; padding: 10px 20px;
    font: 700 12px var(--zh-body); letter-spacing: .08em; text-transform: uppercase; text-align: center;
    transition: .25s;
}
.pf-zh .zh-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.pf-zh .zh-btn--p { background: var(--acc); color: var(--on); border-color: var(--acc); }
.pf-zh .zh-btn--p:hover { color: var(--on); box-shadow: 0 8px 26px color-mix(in srgb, var(--acc) 55%, transparent); }

.pf-zh .zh-sm { font: 700 11px var(--zh-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }

/* section header: English title + brush Chinese + gold line */
.pf-zh .zh-sh { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.pf-zh .zh-sh h2 { margin: 0; font: 400 clamp(30px, 4.6vw, 54px)/1 var(--zh-disp); text-transform: uppercase; color: var(--ink); }
.pf-zh .zh-sh em { font: 400 clamp(30px, 4.6vw, 54px)/1 var(--zh-brush); color: var(--acc); font-style: normal; }
.pf-zh .zh-sh i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); }

.pf-zh .zh-tag { justify-self: start; border: 1px solid var(--gold); color: var(--gold); border-radius: 30px; padding: 1px 12px; font: 700 11px var(--zh-body); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- reveal on scroll ----------
   Hidden only when scripting is on (the media feature), so without JS every section is simply visible. chinese-motion.js adds
   .zh-in when an element enters the screen. */
@media (scripting: enabled) {
    .pf-zh .zh-rv { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s; }
    .pf-zh .zh-rv.zh-in { opacity: 1; transform: none; }
}

/* ---------- the pagoda scene (_ChineseScene.cshtml) ---------- */
.pf-zh .zh-scene { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--acc) 35%, transparent)); }
.pf-zh .zh-mist { animation: zh-mist 22s ease-in-out infinite alternate; }
.pf-zh .zh-mist--rev { animation-direction: alternate-reverse; }
.pf-zh .zh-moon { transform-box: fill-box; transform-origin: center; animation: zh-moonp 6s ease-in-out infinite; }
.pf-zh .zh-sway { transform-box: fill-box; transform-origin: 50% 0; animation: zh-sway 4s ease-in-out infinite alternate; }
.pf-zh .zh-glow { animation: zh-glowp 3s ease-in-out infinite alternate; }
.pf-zh .zh-ripple { transform-box: fill-box; transform-origin: center; animation: zh-rip 4s ease-out infinite; }

/* ---------- reduced motion: everything still, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
    html:has(.pf-zh) { scroll-behavior: auto; }
    .pf-zh *, .pf-zh *::before, .pf-zh *::after { animation: none !important; transition: none !important; }
    .pf-zh .zh-rv { opacity: 1; transform: none; }
    .pf-zh .zh-petal { display: none; }
}

/* ==========================================================================
   Step 2b: hero and stats strip (_ChineseHero.cshtml)
   ========================================================================== */
@keyframes zh-stamp { from { transform: scale(2.6) rotate(-30deg); opacity: 0; } }
@keyframes zh-caret { 50% { opacity: 0; } }

.pf-zh .zh-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: center;
    min-height: calc(100vh - var(--zh-top)); padding-top: 30px;
}
.pf-zh .zh-hero-text { padding-top: 34px; min-width: 0; }
.pf-zh .zh-hero p { margin: 0; }
.pf-zh .zh-art { min-width: 0; }

/* seal stamp */
.pf-zh .zh-seal {
    position: absolute; left: 22px; top: 6px; width: 54px; height: 54px; display: grid; place-items: center;
    background: var(--acc); color: var(--on); font: 400 22px/1 var(--zh-brush); border-radius: 6px; transform: rotate(-8deg);
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--on) 35%, transparent);
    animation: zh-stamp 1.2s .4s both cubic-bezier(.2, 1.6, .4, 1);
}

/* the Latin name: sized from the letters in its longest word, so that word fits its column (about half the content width on
   wide screens, all of it under 900px); long words may still break inside the word as a last resort */
.pf-zh .zh-name {
    --zh-col: calc((min(100vw, 1180px) - 44px) * .5);
    margin: 0; color: var(--ink); text-transform: uppercase; overflow-wrap: anywhere;
    font: 400 min(clamp(54px, 9.5vw, 128px), calc(var(--zh-col) / (var(--zh-nl, 6) * .6)))/.9 var(--zh-disp);
}
.pf-zh .zh-name em { display: block; color: var(--acc); font-style: normal; }

/* the owner's Chinese name: gold brush line, sized so up to 12 characters stay on one line, wrapping only as a fallback */
.pf-zh .zh-cn {
    --zh-col: calc((min(100vw, 1180px) - 44px) * .5);
    margin: 6px 0 12px; color: var(--gold); overflow-wrap: anywhere;
    font: 400 max(34px, min(clamp(44px, 7vw, 90px), calc(var(--zh-col) / (var(--zh-cn, 3) * 1.1))))/1.1 var(--zh-brush);
    text-shadow: 0 0 30px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* typing line (the first title is in the markup; chinese-motion.js types the rest) */
.pf-zh .zh-typ { font: 700 clamp(15px, 1.8vw, 20px) var(--zh-body); min-height: 30px; margin-top: 8px; color: var(--ink); overflow-wrap: anywhere; }
.pf-zh .zh-typ-text::after { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--acc); margin-inline-start: 3px; vertical-align: -2px; animation: zh-caret 1s steps(1) infinite; }
.pf-zh .zh-typ-list { display: none; }

.pf-zh .zh-hero p.zh-lead { max-width: 46ch; color: var(--mut); margin: 12px 0 22px; font-size: 17px; }
.pf-zh .zh-hero p.zh-loc { margin: -8px 0 20px; }
.pf-zh .zh-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* stats strip */
.pf-zh .zh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.pf-zh .zh-stats .zh-box { text-align: center; transition: .3s; display: grid; gap: 4px; align-content: center; }
.pf-zh .zh-stats .zh-box:hover { transform: translateY(-5px); border-color: var(--gold); }
.pf-zh .zh-stats b { display: block; font: 400 clamp(34px, 5vw, 56px)/1 var(--zh-disp); color: var(--gold); overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .pf-zh .zh-hero { grid-template-columns: 1fr; min-height: 0; }
    .pf-zh .zh-art { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
    .pf-zh .zh-name, .pf-zh .zh-cn { --zh-col: calc(min(100vw, 1180px) - 44px); }
}
@media (max-width: 560px) {
    .pf-zh .zh-seal { display: none; }
    .pf-zh .zh-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Step 3a: draft banner, top bar, About, Skills, Words, Journey, Work, Contact, footer, edit button
   ========================================================================== */
.pf-zh .zh-draft { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 10px 16px; background: var(--acc); color: var(--on); font-size: 13px; }
.pf-zh .zh-draft form { display: inline; margin: 0; }
.pf-zh .zh-draft .zh-btn { border-color: var(--on); color: var(--on); }
.pf-zh .zh-editrow { display: flex; justify-content: center; padding: 6px 0 40px; }

/* top bar: sticky, blurred; logo glyph + name, pill nav (English + small Chinese label) */
.pf-zh .zh-top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--line); }
.pf-zh .zh-top-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 10px; }
.pf-zh .zh-logo { display: flex; align-items: center; gap: 10px; min-width: 0; font: 400 18px var(--zh-disp); letter-spacing: .06em; text-transform: uppercase; }
.pf-zh .zh-logo span { flex: none; font: 400 26px/1 var(--zh-brush); color: var(--acc); }
.pf-zh .zh-logo b { font-weight: 400; overflow-wrap: anywhere; }
.pf-zh .zh-top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.pf-zh .zh-top nav a { padding: 6px 14px; border-radius: 30px; font: 700 12px var(--zh-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); border: 1px solid transparent; transition: .25s; }
.pf-zh .zh-top nav a:hover { color: var(--gold); border-color: var(--line); }
.pf-zh .zh-top nav a small { font: 400 13px var(--zh-brush); margin-inline-start: 5px; color: var(--acc); text-transform: none; letter-spacing: 0; }

/* About + principles */
.pf-zh .zh-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
.pf-zh .zh-two--one { grid-template-columns: minmax(0, 1fr); }
.pf-zh .zh-about p { margin: 0 0 12px; color: var(--mut); }
.pf-zh .zh-about p:last-child { margin-bottom: 0; }
.pf-zh .zh-pr { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.pf-zh .zh-pr li { display: flex; gap: 12px; align-items: baseline; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: var(--card); transition: .3s; min-width: 0; }
.pf-zh .zh-pr li:hover { transform: translateX(6px); border-color: var(--gold); }
[dir="rtl"] .pf-zh .zh-pr li:hover { transform: translateX(-6px); }
.pf-zh .zh-pr b { flex: none; font: 400 18px/1.3 var(--zh-brush); color: var(--acc); }
.pf-zh .zh-pr span { min-width: 0; overflow-wrap: anywhere; }

/* Skills */
.pf-zh .zh-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.pf-zh .zh-skills h3 { margin: 0 0 12px; font: 400 22px/1.15 var(--zh-disp); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pf-zh .zh-skills ul { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.pf-zh .zh-skills li { border: 1px solid var(--line); border-radius: 30px; padding: 3px 13px; font-size: 13px; background: var(--card); transition: .25s; overflow-wrap: anywhere; }
.pf-zh .zh-skills li:hover { background: var(--acc); color: var(--on); border-color: var(--acc); }

/* Words I love: flip cards (buttons, aria-pressed). Under reduced motion the swap is instant (transition off above). */
.pf-zh .zh-hint { margin: 0 0 14px; }
.pf-zh .zh-words { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.pf-zh .zh-fc { perspective: 900px; min-height: 170px; height: 100%; background: none; border: 0; cursor: pointer; padding: 0; display: block; }
.pf-zh .zh-in-card { position: relative; display: block; height: 100%; min-height: 170px; transition: transform .7s; transform-style: preserve-3d; }
.pf-zh .zh-fc[aria-pressed="true"] .zh-in-card { transform: rotateY(180deg); }
.pf-zh .zh-f {
    position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; padding: 10px; text-align: center;
    border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* the front word is sized from its length (--zh-wl, set by the markup): 1-5 characters at the full size, longer ones smaller, so it
   never needs more than two lines and is never clipped (the limit is 8 characters) */
.pf-zh .zh-f b { font: 400 min(clamp(34px, 5vw, 56px), calc(300px / var(--zh-wl, 1)))/1.1 var(--zh-brush); color: var(--gold); overflow-wrap: anywhere; }
.pf-zh .zh-bk { transform: rotateY(180deg); background: var(--acc); color: var(--on); }
.pf-zh .zh-bk b { font: 400 clamp(17px, 2.2vw, 22px)/1.25 var(--zh-body); font-weight: 700; color: var(--on); text-transform: none; }
.pf-zh .zh-bk-word { font-size: 12px; opacity: .9; }
.pf-zh .zh-fc:hover .zh-f { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
    /* no turning: show one face at a time */
    .pf-zh .zh-in-card { transform: none !important; }
    .pf-zh .zh-f { backface-visibility: visible; -webkit-backface-visibility: visible; }
    .pf-zh .zh-bk { transform: none; visibility: hidden; }
    .pf-zh .zh-fc[aria-pressed="true"] .zh-bk { visibility: visible; }
    .pf-zh .zh-fc[aria-pressed="true"] .zh-f:not(.zh-bk) { visibility: hidden; }
}

/* Journey */
.pf-zh .zh-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pf-zh .zh-cols--one { grid-template-columns: minmax(0, 1fr); }
.pf-zh .zh-subh { margin: 0 0 14px; }
.pf-zh .zh-tl { position: relative; display: grid; gap: 14px; padding-inline-start: 26px; }
.pf-zh .zh-tl::before { content: ""; position: absolute; inset-inline-start: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--acc), var(--gold), transparent); }
.pf-zh .zh-tl .zh-box { position: relative; }
.pf-zh .zh-tl .zh-box::before { content: ""; position: absolute; inset-inline-start: -26px; top: 26px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 3px solid var(--acc); box-shadow: 0 0 14px var(--acc); }
.pf-zh .zh-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-zh .zh-row b { min-width: 0; overflow-wrap: anywhere; }
.pf-zh .zh-org { color: var(--gold); overflow-wrap: anywhere; }
.pf-zh .zh-tl ul { margin: 8px 0 0; padding-inline-start: 18px; color: var(--mut); }
.pf-zh .zh-note { margin: 6px 0 0; }

/* Work: 2-column grid, the lead project spans both on wide screens */
.pf-zh .zh-lead-sec { margin: -8px 0 22px; max-width: 70ch; color: var(--mut); font-size: 16px; }
.pf-zh .zh-projs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pf-zh .zh-pj { display: grid; gap: 12px; align-content: start; transition: transform .15s, border-color .3s, opacity .8s; transform-style: preserve-3d; will-change: transform; }
.pf-zh .zh-pj:hover, .pf-zh .zh-pj:focus-visible { border-color: var(--gold); }
@media (min-width: 901px) { .pf-zh .zh-pj--lead { grid-column: 1 / -1; } .pf-zh .zh-pj--lead .zh-th { aspect-ratio: 21 / 9; } }
.pf-zh .zh-th {
    aspect-ratio: 16 / 9; border-radius: 14px; position: relative; overflow: hidden; display: block;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.pf-zh .zh-th .mp-img { object-fit: contain; }
.pf-zh .zh-th .mp-fit-fill .mp-img { object-fit: cover; }
/* sweep of light over the picture on hover */
.pf-zh .zh-th::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%); transform: translateX(-120%); transition: transform .8s; }
.pf-zh .zh-pj:hover .zh-th::before { transform: translateX(120%); }
/* no picture at all: the project's first letter in the brush font on the red-gold gradient (data-initial, no extra markup) */
.pf-zh .zh-th--empty { display: grid; place-items: center; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 40%, var(--gold))); }
.pf-zh .zh-th--empty::after { content: attr(data-initial); font: 400 clamp(60px, 9vw, 110px)/1 var(--zh-brush); color: var(--on); }
.pf-zh .zh-pj h3 { margin: 0; font: 400 24px/1.1 var(--zh-disp); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pf-zh .zh-desc { margin: 0; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pf-zh .zh-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-zh .zh-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-zh .zh-tools span { border: 1px solid var(--line); border-radius: 30px; padding: 2px 10px; font-size: 11px; color: var(--mut); }

/* Contact */
.pf-zh .zh-cta { position: relative; overflow: hidden; text-align: center; padding: clamp(30px, 6vw, 70px) 22px; }
.pf-zh .zh-wm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 min(60vw, 420px)/1 var(--zh-brush); color: var(--gold); opacity: .05; pointer-events: none; }
.pf-zh .zh-cta-h { position: relative; margin: 0; font: 400 clamp(36px, 7vw, 90px)/.95 var(--zh-disp); text-transform: uppercase; color: var(--ink); }
.pf-zh .zh-cta-h em { color: var(--acc); font-style: normal; }
.pf-zh .zh-btns--c { position: relative; justify-content: center; margin-top: 24px; }
.pf-zh .zh-btns--c .zh-btn { overflow-wrap: anywhere; text-transform: none; letter-spacing: .04em; }

/* footer */
.pf-zh .zh-foot { padding: 40px 0 60px; text-align: center; color: var(--mut); font-size: 13px; }
.pf-zh .zh-foot p { margin: 0; }
.pf-zh .zh-foot-zh { font: 400 22px var(--zh-brush); color: var(--acc); margin-top: 6px; }

@media (max-width: 900px) {
    .pf-zh .zh-two, .pf-zh .zh-cols, .pf-zh .zh-projs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pf-zh .zh-top nav a small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-zh .zh-pj:hover .zh-th::before { transform: translateX(-120%); }
}

/* ==========================================================================
   Step 3b: the project page (_ProjectChinese.cshtml). Same structure as the Mechanical project page, dressed in the
   Chinese look. Everything scoped under .pf-zh; the shared _MediaEmbed keeps its class names and is restyled here only.
   ========================================================================== */
.pf-zh .zh-pg { padding-top: 22px; padding-bottom: 20px; }
.pf-zh .zh-phead { display: grid; gap: 10px; justify-items: start; margin: 30px 0 26px; }
.pf-zh .zh-pname { margin: 0; max-width: 100%; font: 400 clamp(40px, 7vw, 92px)/.95 var(--zh-disp); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.pf-zh .zh-pby { margin: 0; max-width: 60ch; color: var(--mut); font-size: 17px; overflow-wrap: anywhere; }
.pf-zh .zh-credit { margin: 0; color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }
.pf-zh .zh-credit a { text-decoration: underline; color: var(--gold); }

.pf-zh .zh-pg .zh-box + .zh-box, .pf-zh .zh-pg .zh-pic + .zh-kp, .pf-zh .zh-pg .zh-kp + .zh-box { margin-top: 14px; }
.pf-zh .zh-pg .zh-g > .zh-box { margin-top: 0; }
.pf-zh .zh-pic { margin: 14px 0 0; padding: 14px; }
.pf-zh .zh-pic .mp { margin: 0 auto; }

/* stats row: big gold numbers */
.pf-zh .zh-kp { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.pf-zh .zh-kp .zh-box { display: grid; gap: 4px; align-content: center; text-align: center; }
.pf-zh .zh-kp b { display: block; font: 400 clamp(30px, 4.4vw, 48px)/1.05 var(--zh-disp); color: var(--gold); overflow-wrap: anywhere; }

/* sections: label + title, gold line */
.pf-zh .zh-psec { padding: clamp(40px, 6vw, 64px) 0 6px; }
.pf-zh .zh-psec .zh-sh { align-items: flex-end; }
.pf-zh .zh-psec .zh-sh > div { display: grid; gap: 6px; min-width: 0; }
.pf-zh .zh-psec .zh-sh h2 { overflow-wrap: anywhere; }
.pf-zh .zh-sm--gap { display: block; margin-top: 18px; }

/* case study */
.pf-zh .zh-g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.pf-zh .zh-g > * { min-width: 0; }
.pf-zh .zh-c6 { grid-column: span 6; }
.pf-zh .zh-c12 { grid-column: span 12; }
.pf-zh .zh-para { margin: 6px 0 0; max-width: 70ch; color: var(--mut); overflow-wrap: anywhere; }
.pf-zh .zh-steps { list-style: none; counter-reset: zs; margin: 4px 0 0; padding: 0; }
.pf-zh .zh-steps li { counter-increment: zs; position: relative; padding: 10px 0 10px 42px; border-bottom: 1px solid var(--line); color: var(--mut); overflow-wrap: anywhere; }
.pf-zh .zh-steps li:last-child { border-bottom: 0; }
.pf-zh .zh-steps li::before { content: counter(zs, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: 10px; font: 400 18px var(--zh-disp); color: var(--acc); }
.pf-zh .zh-beside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pf-zh .zh-beside > * { min-width: 0; }
.pf-zh .zh-mfig { margin: 0 0 14px; }
.pf-zh .zh-mfig--below { margin: 14px 0 0; }
.pf-zh .zh-beside .zh-mfig { margin: 0; }
.pf-zh .zh-mfig .zh-sm { display: block; margin-bottom: 8px; }

/* specifications + tools */
.pf-zh .zh-spec { width: 100%; border-collapse: collapse; }
.pf-zh .zh-spec td { padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.pf-zh .zh-spec td:first-child { color: var(--mut); width: 42%; padding-inline-end: 12px; }
.pf-zh .zh-spec tr:last-child td { border-bottom: 0; }
.pf-zh .zh-ptags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-zh .zh-ptags span { border: 1px solid var(--line); border-radius: 30px; padding: 2px 12px; font-size: 12px; color: var(--mut); background: var(--card); overflow-wrap: anywhere; }
.pf-zh .zh-ptags--spec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* pictures: screenshots, diagram, the project picture */
.pf-zh .zh-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.pf-zh .zh-shots figure, .pf-zh .zh-psec figure { margin: 0; min-width: 0; }
.pf-zh figcaption { margin-top: 8px; color: var(--mut); font-size: 13px; overflow-wrap: anywhere; }
.pf-zh .zh-shot { display: block; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; transition: .3s; }
.pf-zh .zh-shot:hover { transform: scale(1.02); border-color: var(--gold); }
.pf-zh .zh-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-zh .zh-shot--wide { aspect-ratio: 21 / 9; }
.pf-zh .zh-shot--wide img { object-fit: contain; }
.pf-zh .zh-shot--free { aspect-ratio: auto; }
.pf-zh .zh-shot--free img { height: auto; object-fit: contain; }
.pf-zh .zh-pic .zh-shot { border: 0; background: none; }
.pf-zh .zh-pic .zh-shot:hover { transform: none; }

.pf-zh .zh-links { margin-top: 14px; }
.pf-zh .zh-back2 { margin: 40px 0 0; }
.pf-zh .zh-foot a { text-decoration: underline; }

/* the shared _MediaEmbed partial (embed, video, 3D model, downloads) keeps its class names; these scoped rules give it the
   Chinese look, like pf-mechanical.css does for .pf-me */
.pf-zh .case-label { font: 700 11px var(--zh-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pf-zh .pf-muted, .pf-zh .text-muted { color: var(--mut) !important; }
.pf-zh .hfe-media-stack { display: flex; flex-direction: column; gap: 26px; }
.pf-zh .hfe-media-block { display: flex; flex-direction: column; min-width: 0; }
.pf-zh .hfe-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pf-zh .hfe-media-placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.pf-zh .case-embed-wrap { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.pf-zh .case-embed-wrap iframe, .pf-zh .case-embed-wrap video, .pf-zh .case-embed-wrap model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; display: block; background: var(--card); }
.pf-zh .case-embed-wrap video { object-fit: contain; }
.pf-zh .case-embed-wrap:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.pf-zh .case-embed-wrap.hfe-media-placeholder { aspect-ratio: auto; min-height: 120px; }
.pf-zh .pf-btn {
    display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 30px; padding: 10px 20px;
    font: 700 12px var(--zh-body); letter-spacing: .08em; text-transform: uppercase; color: inherit; background: none; cursor: pointer; transition: .25s;
}
.pf-zh .pf-btn:hover { border-color: var(--gold); color: var(--gold); }
.pf-zh .pf-btn-primary { background: var(--acc); color: var(--on); border-color: var(--acc); }
.pf-zh .pf-btn-primary:hover { color: var(--on); box-shadow: 0 8px 26px color-mix(in srgb, var(--acc) 55%, transparent); }

@media (max-width: 900px) {
    .pf-zh .zh-c6 { grid-column: span 12; }
    .pf-zh .zh-beside { grid-template-columns: minmax(0, 1fr); }
    .pf-zh .zh-spec td:first-child { width: 38%; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-zh .zh-shot:hover { transform: none; }
}

/* ==========================================================================
   Step 6 (QA): owner strings in Arabic, and the Words cards without JavaScript
   ========================================================================== */
/* Every owner-typed string has dir="auto". When that resolves to right-to-left (an Arabic name, eyebrow, tag, label) the small-caps
   letter spacing is switched off: spacing between the letters of a joined script pulls the letters apart. */
.pf-zh [dir="auto"]:dir(rtl) { letter-spacing: 0; text-transform: none; }

/* Without JavaScript a card cannot be flipped, so the meaning would never be reachable: show both faces, one under the other. */
@media (scripting: none) {
    .pf-zh .zh-fc { min-height: 0; height: auto; pointer-events: none; cursor: default; }
    .pf-zh .zh-in-card { min-height: 0; display: grid; gap: 8px; transform: none !important; }
    .pf-zh .zh-f { position: static; backface-visibility: visible; -webkit-backface-visibility: visible; min-height: 0; padding: 14px 10px; }
    .pf-zh .zh-bk { transform: none; visibility: visible; }
    .pf-zh .zh-hint { display: none; }
}

/* ==========================================================================
   Phone fix (900px and below): the site draws its own round menu button (fixed, top-left) and the HFE logo chip (fixed, next to it)
   over the page. The template bar used to be sticky at top:0 and slid UNDER them (logo and name overlapped, the pills wrapped to two
   rows and covered the content). Now the bar scrolls away with the page, starts below the site buttons, and its pills stay on ONE row
   (they scroll sideways if the phone is very narrow).
   ========================================================================== */
@media (max-width: 900px) {
    html:has(.pf-zh) { scroll-padding-top: 16px; }
    .pf-zh .zh-top { position: relative; backdrop-filter: none; }
    body.hfe-authed .pf-zh .zh-top-in { padding-top: 68px; }            /* clears the 44px menu button + logo chip (top 12-64px) */
    .pf-zh .zh-top-in { row-gap: 8px; }
    .pf-zh .zh-top nav {
        flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
        margin-inline: -4px; padding: 2px 4px 4px; scrollbar-width: none;
    }
    .pf-zh .zh-top nav::-webkit-scrollbar { display: none; }
    .pf-zh .zh-top nav a { flex: none; padding: 6px 12px; }
}
@media (max-width: 560px) {
    .pf-zh .zh-top nav a { padding: 6px 10px; font-size: 11px; }
}