/* Peter Huang portfolio — shared styles for every page */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #FFFFFF; color: #111111; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #111111; text-decoration: none; }
a:hover { color: #666666; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid #111111; outline-offset: 3px; }

/* Frame: gallery edges */
.wrap { padding-inline: 6vw; overflow-x: clip; }
.inner { max-width: 1600px; margin-inline: auto; }
@media (max-width: 1023px) { .wrap { padding-inline: 32px; } }
@media (max-width: 767px)  { .wrap { padding-inline: 20px; } }

/* Header */
.hdr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 20px; font-size: 13px; line-height: 18px; font-weight: 400; }
.hdr nav { display: flex; flex-wrap: wrap; gap: 24px; }
.hdr a { display: inline-block; padding: 13px 0; margin: -13px 0; }
.hdr a.cur { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .hdr nav { gap: 16px; } }

/* Intro (secondary alignment) */
.intro { padding-left: 100px; margin-top: 52px; }
.h1 { margin: 0; font-size: 72px; line-height: 72px; font-weight: 700; letter-spacing: -0.02em; }
.disc { margin: 32px 0 0; font-size: 14px; line-height: 18px; font-weight: 400; }
@media (max-width: 1023px) { .intro { padding-left: 48px; } .h1 { font-size: 60px; line-height: 62px; } }
@media (max-width: 767px)  { .intro { padding-left: 0; margin-top: 32px; } .h1 { font-size: 44px; line-height: 46px; } .disc { margin-top: 24px; } }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 20px; margin: 80px 0 24px; font-size: 13px; line-height: 18px; }
.filters button { background: none; border: 0; padding: 13px 0; margin: -13px 0; font: inherit; color: #666666; cursor: pointer; }
.filters button:hover { color: #111111; }
.filters button.on { color: #111111; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .filters { margin: 40px 0 16px; gap: 16px; } }

/* Gallery */
.gallery { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) { .gallery { gap: 6px; } }
.g-item { position: relative; display: block; color: #111111; }
.g-item img { width: 100%; height: auto; }
.g-item img { transition: filter 180ms ease; }
.g-item:hover img, .g-item:focus-visible img { filter: brightness(0.45); }
.g-ov { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 24px; text-align: center; color: #FFFFFF; opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.g-ov .t-title { font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.g-ov .t-meta { font-size: 14px; line-height: 18px; font-weight: 500; white-space: normal; }
.g-item:hover .g-ov, .g-item:focus-visible .g-ov { opacity: 1; }
.g-item:hover { color: #111111; }
.g-cap { display: none; }
@media (hover: none) {
  .g-ov { display: none; }
  .g-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 14px; }
  .g-cap .t-meta { color: #666666; }
}
.t-title { font-size: 18px; line-height: 22px; font-weight: 500; }
.t-meta { font-size: 13px; line-height: 18px; font-weight: 400; white-space: nowrap; }

/* Project / content pages */
.back { display: inline-block; margin-top: 52px; padding: 13px 0; margin-bottom: -13px; font-size: 13px; line-height: 18px; color: #666666; }
.p-head { max-width: 640px; margin-top: 20px; }
.p-title { margin: 0; font-size: 44px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; }
.p-meta { margin: 12px 0 0; font-size: 13px; line-height: 18px; color: #666666; }
.p-desc { margin: 24px 0 0; font-size: 16px; line-height: 25px; }
@media (max-width: 767px) { .back { margin-top: 32px; } .p-title { font-size: 32px; line-height: 36px; } }

.blocks { display: flex; flex-direction: column; margin-top: 64px; }
.b-first { margin-top: 0; }
.b-tight { margin-top: 8px; }
.b-loose { margin-top: 32px; }
.b-img { width: 100%; height: auto; }
.b-narrow { width: 100%; max-width: 760px; height: auto; }
.b-mid { margin-top: 16px; }
.b-text { max-width: 640px; margin-bottom: 0; font-size: 16px; line-height: 25px; }
.b-video { max-width: 640px; font-size: 16px; line-height: 25px; }
.b-video a { text-decoration: underline; text-underline-offset: 3px; }
.b-video span { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: #666666; }

/* Project gallery rows (detail pages) */
.rv { gap: 8px; }
.rv-row { display: flex; gap: 8px; align-items: flex-start; }
/* Hero image: runs edge to edge past the page margins, as large as the window allows */
.rv-hero { margin-left: -6vw; margin-right: -6vw; margin-bottom: 40px; }
@media (min-width: 1819px) { .rv-hero { margin-left: calc((1600px - 100vw) / 2); margin-right: calc((1600px - 100vw) / 2); } }
@media (max-width: 1023px) { .rv-hero { margin-left: -32px; margin-right: -32px; } }
@media (max-width: 767px) { .rv-hero { margin-left: -20px; margin-right: -20px; margin-bottom: 24px; } }
/* Small source images stay near their native size instead of being stretched blurry */
.rv-small { justify-content: center; padding: 24px 0; }
.rv-small .rv-btn { flex: 0 1 400px !important; }
/* Narrower gallery: regular rows at 85% width, centred (hero and panel rows unaffected) */
@media (min-width: 768px) { .rv-narrow .rv-row:not(.rv-hero):not(.rv-trio):not(.rv-small) { width: 85%; margin-inline: auto; } }
.rv-narrow .rv-hero { margin-top: 32px; margin-bottom: 32px; }
/* Three small panels in one row (e.g. Problem / Cause / Solution), equal height, kept near native size */
.rv-trio { width: 100%; max-width: 868px; margin: 24px auto; gap: 24px; align-items: flex-end; }
@media (max-width: 767px) { .rv-trio { gap: 8px; margin: 12px auto; } }

/* Project baseline statement (SILVIA) shown as text under the title */
.bl { margin-top: 24px; max-width: 760px; }
.bl-label { margin: 0; font-size: 13px; line-height: 18px; color: #666666; }
.bl-cols { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 16px; }
.bl-cols > div { flex: 1 1 260px; min-width: 0; }
.bl-h { margin: 0; font-size: 16px; line-height: 25px; font-weight: 500; }
.bl-list { margin: 6px 0 0; padding: 0; list-style: none; font-size: 16px; line-height: 25px; }
.bl-not { color: #666666; }
.bl-not s { text-decoration-thickness: 1px; }

.rv-btn { display: block; min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; cursor: zoom-in; }
.rv-img { display: block; width: 100%; height: auto; }

/* Lightbox: enlarged image over a ghosted page */
.lb { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; overflow: hidden; overscroll-behavior: contain; touch-action: none; background: rgba(255,255,255,0.88); cursor: grab; user-select: none; -webkit-user-select: none; animation: lb-in 180ms ease; }
.lb-drag { cursor: grabbing; }
.lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: 50% 50%; transition: transform 80ms ease-out; will-change: transform; -webkit-user-drag: none; pointer-events: none; }
.lb-drag .lb-img { transition: none; }
/* Close button stays pinned above the image at every zoom level */
.lb-x { position: fixed; top: 12px; right: 12px; z-index: 110; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: rgba(255,255,255,0.92); color: #111111; cursor: pointer; }
.lb-x:hover { background: #FFFFFF; color: #666666; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.rv-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000000; }
.rv-video { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #F2F2F2; color: #767676; font-size: 13px; line-height: 18px; }
.rv-cap { margin: 48px auto; max-width: 640px; text-align: center; font-size: 14px; line-height: 22px; font-weight: 400; color: #767676; }
@media (max-width: 767px) { .rv, .rv-row { gap: 6px; } .rv-cap { margin: 32px auto; font-size: 13px; line-height: 20px; } }

.pn { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-top: 96px; font-size: 13px; line-height: 18px; }
.pn a { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.pn a span { color: #666666; }
.pn a strong { font-size: 18px; line-height: 22px; font-weight: 500; }
.pn .next { text-align: right; margin-left: auto; }

/* About — layout follows the original About Me page: photo + story, then a photo grid */
.ab { max-width: 1152px; margin: 0 auto; }
.ab-title { margin: 72px 0 48px; text-align: center; font-size: 44px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; }
.ab-fig { margin: 0; }
.ab-fig img { display: block; width: 100%; height: auto; }
.ab-fig figcaption { padding: 14px 16px 24px; text-align: center; font-size: 13px; line-height: 18px; color: #666666; }
.ab-split { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 64px; margin-bottom: 8px; }
.ab-split > .ab-fig { flex: 1 1 420px; min-width: 0; }
.ab-text { flex: 0.8 1 360px; min-width: 0; font-size: 16px; line-height: 25px; }
.ab-text p { margin: 0 0 18px; }
.ab-text .ab-note { color: #666666; font-size: 14px; line-height: 20px; margin-bottom: 24px; }
.ab-full { margin-top: 8px; }
.ab-pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.ab-pair > .ab-fig { flex: 1 1 320px; min-width: 0; }
@media (max-width: 767px) { .ab-title { margin: 40px 0 28px; font-size: 32px; line-height: 36px; } .ab-split { gap: 24px; } .ab-pair { gap: 6px; } }

/* Resume */
.rs { max-width: 640px; font-size: 16px; line-height: 25px; }
.rs h2 { margin: 56px 0 0; font-size: 13px; line-height: 18px; font-weight: 400; color: #666666; }
.rs h3 { margin: 24px 0 0; font-size: 18px; line-height: 22px; font-weight: 500; }
.rs .m { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: #666666; }
.rs ul { margin: 10px 0 0; padding-left: 18px; }
.rs li + li { margin-top: 6px; }
.rs p { margin: 10px 0 0; }
.form { display: flex; flex-direction: column; gap: 20px; max-width: 640px; margin-top: 24px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: #666666; }
.form input, .form textarea { font: inherit; font-size: 16px; line-height: 25px; color: #111111; background: transparent; border: 0; border-bottom: 1px solid #BDBDBD; border-radius: 0; padding: 10px 0; }
.form textarea { resize: vertical; }
.form button { align-self: flex-start; font: inherit; font-size: 13px; line-height: 18px; color: #FFFFFF; background: #111111; border: 0; border-radius: 0; padding: 13px 28px; cursor: pointer; }

/* Process book (Audi Athlon) */
.bk-stage { --bk-ease: cubic-bezier(.645,.045,.355,1); --bk-dur: 1100ms; display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.bk-wrap { flex: 1 1 auto; min-width: 0; max-width: 1720px; margin: 0 auto; }
.bk-book { position: relative; width: 100%; aspect-ratio: 2 / 1; perspective: 5200px; transition: transform var(--bk-dur) var(--bk-ease); }
.bk-book.bk-closed { transform: translateX(-25%); }
/* Soft drop shadow under whichever pages are showing */
.bk-shadow { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: 0 14px 34px rgba(0,0,0,0.13), 0 3px 8px rgba(0,0,0,0.07); transition: left var(--bk-dur) var(--bk-ease), width var(--bk-dur) var(--bk-ease); pointer-events: none; }
.bk-closed .bk-shadow { left: 50%; width: 50%; }
.bk-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; transform-origin: left center; transition: transform 450ms var(--bk-ease), box-shadow 450ms ease; }
.bk-left { left: 0; }
.bk-right { left: 50%; }
.bk-half img, .bk-face img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
/* Centre split: a gentle shade toward the spine and a faint crease */
.bk-shade-l, .bk-shade-r, .bk-fshade, .bk-flight { position: absolute; inset: 0; pointer-events: none; }
.bk-shade-l { background: linear-gradient(to left, rgba(0,0,0,0.09), rgba(0,0,0,0.03) 3%, rgba(0,0,0,0) 8%); box-shadow: inset -1px 0 0 rgba(255,255,255,0.25); }
.bk-shade-r { background: linear-gradient(to right, rgba(0,0,0,0.09), rgba(0,0,0,0.03) 3%, rgba(0,0,0,0) 8%); }
.bk-shade-none { display: none; }
/* Hovering "click to flip" lifts the cover slightly */
.bk-closed:has(.bk-cta:hover) .bk-right, .bk-closed:has(.bk-hit-cover:hover) .bk-right { transform: rotateY(-8deg); box-shadow: 8px 0 22px rgba(0,0,0,0.10); }
/* Page turn */
.bk-flip { position: absolute; top: 0; width: 50%; height: 100%; z-index: 5; transform-style: preserve-3d; will-change: transform; animation-duration: var(--bk-dur); animation-timing-function: var(--bk-ease); animation-fill-mode: both; }
.bk-flip-fwd { left: 50%; transform-origin: left center; animation-name: bk-fwd; }
.bk-flip-back { left: 0; transform-origin: right center; animation-name: bk-back; }
.bk-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-back { transform: rotateY(180deg); }
.bk-flip-fwd .bk-front .bk-fshade, .bk-flip-back .bk-back .bk-fshade { background: linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0) 12%); }
.bk-flip-fwd .bk-back .bk-fshade, .bk-flip-back .bk-front .bk-fshade { background: linear-gradient(to left, rgba(0,0,0,0.10), rgba(0,0,0,0) 12%); }
/* Light shifts across the turning page: darker as it lifts, clear as it lands */
.bk-flight { background: #000000; opacity: 0; animation: bk-light var(--bk-dur) var(--bk-ease) both; }
@keyframes bk-fwd { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes bk-back { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes bk-light { 0% { opacity: 0; } 50% { opacity: 0.16; } 100% { opacity: 0; } }
/* Click areas, the cover call-to-action, and side arrows */
.bk-hit { position: absolute; top: 0; width: 50%; height: 100%; z-index: 6; padding: 0; border: 0; background: transparent; }
.bk-hit-l { left: 0; cursor: w-resize; }
.bk-hit-r, .bk-hit-cover { left: 50%; cursor: e-resize; }
.bk-hit-cover { cursor: pointer; }
.bk-cta { position: absolute; top: 50%; left: calc(100% + 40px); transform: translateY(-50%); z-index: 6; display: flex; align-items: center; gap: 40px; padding: 8px 0; border: 0; background: none; color: #8A8A8A; font: inherit; font-size: 22px; line-height: 28px; letter-spacing: 0.22em; white-space: nowrap; cursor: pointer; }
.bk-cta:hover { color: #111111; }
.bk-cta:hover svg { transform: translateX(4px); }
.bk-cta svg { flex: none; transition: transform 180ms ease; }
.bk-arrow { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 180ms ease, opacity 180ms ease; }
.bk-arrow-l:hover { transform: translateX(-3px); }
.bk-arrow-r:hover { transform: translateX(3px); }
.bk-hidden { visibility: hidden; opacity: 0; }
.bk-busy .bk-hit { pointer-events: none; }
.bk-count { margin: 20px 0 0; text-align: center; font-size: 13px; line-height: 18px; color: #767676; }
.bk-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.bk-preload img { width: 1px; height: 1px; }
@media (max-width: 1023px) { .bk-cta { left: calc(100% + 20px); gap: 20px; font-size: 18px; } }
/* Phones: one page at a time, full width */
.bk-single { aspect-ratio: 1 / 1; perspective: 2200px; }
.bk-single.bk-closed { transform: none; }
.bk-single .bk-shadow, .bk-single.bk-closed .bk-shadow { left: 0; width: 100%; }
.bk-single .bk-left { display: none; }
.bk-single .bk-right { left: 0; width: 100%; }
.bk-single .bk-hit-cover { left: 0; width: 100%; }
.bk-single .bk-flip { left: 0; width: 100%; transform-origin: left center; }
.bk-single .bk-flip-out { animation-name: bk-out; }
.bk-single .bk-flip-in { animation-name: bk-in; }
.bk-single .bk-front .bk-fshade { background: linear-gradient(to right, rgba(0,0,0,0.10), rgba(0,0,0,0) 12%); }
@keyframes bk-out { from { transform: rotateY(0deg); opacity: 1; } 85% { opacity: 1; } to { transform: rotateY(-95deg); opacity: 0; } }
@keyframes bk-in { from { transform: rotateY(-95deg); opacity: 0; } 15% { opacity: 1; } to { transform: rotateY(0deg); opacity: 1; } }
.bk-single .bk-cta { top: calc(100% + 14px); left: 50%; transform: translateX(-50%); gap: 12px; font-size: 15px; line-height: 20px; letter-spacing: 0.16em; }
.bk-single .bk-cta svg { width: 34px; height: 31px; }
.bk-single.bk-closed:has(.bk-cta:hover) .bk-right, .bk-single.bk-closed:has(.bk-hit-cover:hover) .bk-right { transform: none; box-shadow: none; }
@media (max-width: 767px) {
  .bk-stage { --bk-dur: 750ms; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 24px; }
  .bk-wrap { order: -1; flex: 0 0 100%; }
  .bk-closed ~ .bk-count, .bk-wrap:has(.bk-closed) .bk-count { margin-top: 64px; }
  .bk-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .bk-flip, .bk-flight { animation-duration: 1ms; } .bk-book, .bk-shadow { transition: none; } }

/* Sketchbook slideshow (Work page) */
.ss { margin-top: 64px; }
@media (max-width: 767px) { .ss { margin-top: 36px; } }
.ss-stage { display: flex; align-items: center; gap: 16px; }
.ss-view { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 7 / 3; overflow: hidden; background: #FFFFFF; box-shadow: 0 14px 34px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.06); touch-action: pan-y; }
.ss-slide { position: absolute; inset: 0; will-change: transform; }
.ss-slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.ss-in.ss-fwd { animation: ss-in-r 700ms cubic-bezier(.645,.045,.355,1) both; }
.ss-out.ss-fwd { animation: ss-out-l 700ms cubic-bezier(.645,.045,.355,1) both; }
.ss-in.ss-back { animation: ss-in-l 700ms cubic-bezier(.645,.045,.355,1) both; }
.ss-out.ss-back { animation: ss-out-r 700ms cubic-bezier(.645,.045,.355,1) both; }
@keyframes ss-in-r { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ss-out-l { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ss-in-l { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes ss-out-r { from { transform: translateX(0); } to { transform: translateX(100%); } }
.ss-hit { position: absolute; top: 0; width: 50%; height: 100%; z-index: 3; padding: 0; border: 0; background: transparent; }
.ss-hit-l { left: 0; cursor: w-resize; }
.ss-hit-r { left: 50%; cursor: e-resize; }
.ss-count { margin: 20px 0 0; text-align: center; font-size: 13px; line-height: 18px; color: #767676; }
@media (max-width: 767px) {
  .ss-stage { flex-wrap: wrap; justify-content: space-between; gap: 8px; }
  .ss-view { order: -1; flex: 0 0 100%; }
  .ss-count { margin-top: -36px; }
}
@media (prefers-reduced-motion: reduce) { .ss-slide { animation-duration: 1ms !important; } }

/* Back to top — pinned bottom-right on project pages */
html { scroll-behavior: smooth; }
.totop { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; transition: transform 180ms ease; }
.totop:hover { transform: translateY(-2px); }
.totop svg { display: block; }
@media (max-width: 767px) { .totop { right: 12px; bottom: 12px; width: 44px; height: 44px; } .totop svg { width: 44px; height: 40px; } }

/* Footer */
.ftr { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 120px 0 32px; font-size: 13px; line-height: 18px; color: #666666; }
.ftr a { color: #111111; }
.ftr a:hover { color: #666666; }