:root {
  --ink: #241d1b;
  --muted: #746b66;
  --line: #d9c9bd;
  --paper: #fbf8f2;
  --white: #fff;
  --accent: #c26d63;
  --font: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* Warm editorial system */
html, body { background: #fbf8f2; }
.eyebrow, .section-label { color: #b3534b; }
.section-intro h2, .detail-hero h2, .home-heading h2, .cover h1 { font-weight: 700; letter-spacing: -.02em; }
.section-intro h2::after, .detail-hero h2::after, .home-heading h2::after { content: ""; display: block; width: min(260px, 55%); height: 10px; margin-top: 12px; background: #f3e3a2; opacity: .85; }
.project-overview, .account-gallery, .project-section, .metric-section, .takeaways { margin: 3vh 0; padding: 5vh 4vw; border: 1px solid #e3d4c8; border-radius: 16px; background: rgba(255,253,248,.86); box-shadow: 0 12px 30px rgba(95,56,35,.05); }
.project-section:has(.workflow), .project-section:has(.challenge-visual) { border: 2px solid #b94b45; }
.section-heading h3 { font-weight: 700; }
.project-copy > p:not(.section-label), .project-section p, .takeaways li, .result-list p { line-height: 1.65; color: #4f4540; }
.metrics { border: 1.5px solid #c86b5e; border-radius: 12px; overflow: hidden; background: #fff7df; }
.metrics > div { background: #fffaf0; border-color: #dfb9a8; }
.metrics > div:nth-child(2n) { background: #fff0eb; }
.metrics strong { color: #b1433d; font-weight: 800; }
.workflow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 70px 12px 16px; border: 2px solid #bd5048; border-radius: 4px; background: #fffdf8; }
.workflow::before { content: "从0-1运营思路整理"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 10px 28px; background: #c83f43; color: #fff; font-weight: 700; }
.workflow::after { content: ""; position: absolute; top: 67px; left: 4%; right: 4%; height: 4px; background: #e69543; }
.workflow > div { position: relative; z-index: 1; min-height: 230px; padding: 20px 16px; border: 1px solid #e9c4bd; border-radius: 4px; background: #fff2f0; }
.workflow > div:nth-child(2n) { background: #fff8da; }
.workflow > div:nth-child(3n) { background: #edf2fb; }
.workflow b { color: #b52f40; font-size: 20px; font-weight: 800; }
.workflow span { font-weight: 700; }
.challenge-axis { border: 1px solid #da8b59; border-radius: 8px; padding: 24px; background: #fff3df; }
.goal-grid { border: 1.5px solid #bd5048; border-radius: 10px; overflow: hidden; background: #fffdf8; }
.goal-grid p { background: #fff8dc; border-color: #d7a99b; }
.goal-grid p:nth-child(2n) { background: #fff0eb; }
.template-switcher { padding: 24px; border-radius: 14px; background: #fff5e9; border: 1px solid #e1c3ae; }
.template-thumbs { display: flex; gap: 14px; }
.template-thumb { flex: 1; background: #fffdf8; border-color: #d5a995; }
.template-thumb.is-selected { border: 2px solid #bd5048; box-shadow: 0 5px 0 #f1d98d; }
.template-stage { min-height: 620px; border: 1px solid #d9a08d; background: #fffdf8; }
.template-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border: 1px solid #b94b45; border-radius: 50%; background: #fff7df; color: #b94b45; font-size: 22px; cursor: pointer; }
.template-prev { left: 12px; } .template-next { right: 12px; }
.template-full { max-height: 760px; }
.image-grid img, .project-overview img, .data-proof img { border-radius: 12px; }
.tool-logos span { border-color: #d7a99b; background: #fff3df; color: #9b4a42; font-weight: 600; }

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { position: relative; z-index: 0; margin: 0; color: var(--ink); background: transparent; font-family: var(--font); font-weight: 300; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
.star-field { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.cursor-dot, .cursor-ring { position: fixed; z-index: 120; left: 0; top: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
.cursor-dot { width: 4px; height: 4px; background: var(--ink); }
.cursor-ring { width: 28px; height: 28px; border: 1px solid rgba(23,25,26,.45); transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease; }
.cursor-ring.is-hovering { width: 40px; height: 40px; border-color: rgba(139,160,167,.72); background: rgba(139,160,167,.08); }
.site-header, .site-footer { position: fixed; z-index: 20; left: 4vw; right: 4vw; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0; }
.site-header { top: 28px; }
.site-footer { bottom: 24px; color: var(--muted); }
.contact-block { margin-left: auto; line-height: 1.7; text-align: right; }
.wordmark { font-weight: 600; letter-spacing: 0; }
.wordmark.is-hidden { visibility: hidden; pointer-events: none; }
.page-index { color: var(--muted); }
.view { position: relative; z-index: 1; display: none; min-height: 100svh; padding: 88px 7vw 74px; opacity: 0; }
.view.is-active { display: flex; animation: reveal .55s ease forwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.page-wipe { position: fixed; inset: 0; z-index: 100; visibility: hidden; pointer-events: none; background: var(--ink); transform: translateY(100%); }
.page-wipe.is-moving { visibility: visible; animation: wipe .55s cubic-bezier(.65,0,.35,1); }
@keyframes wipe { 0% { transform: translateY(100%); } 46%,54% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .12em; }

.cover { position: relative; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.cover-center { position: relative; z-index: 1; }
.cover-name { margin: 0 0 22px; font-size: clamp(17px, 1.8vw, 26px); font-weight: 500; letter-spacing: .32em; text-indent: .32em; }
.cover h1 { margin: 0; font-size: clamp(54px, 8vw, 118px); line-height: .9; font-weight: 200; letter-spacing: 0; }
.cover h1 span { color: var(--accent); }
.enter-link { position: absolute; left: 50%; bottom: 12vh; display: flex; align-items: center; gap: 18px; transform: translateX(-50%); font-size: 11px; font-weight: 500; letter-spacing: .12em; }
.enter-link small { position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; color: var(--muted); font-size: 9px; font-weight: 300; letter-spacing: .08em; }
.enter-link i { width: 44px; height: 1px; background: var(--ink); transition: width .25s ease; }
.enter-link:hover i { width: 62px; }

.home { flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.home-heading { position: absolute; top: 12vh; left: 7vw; }
.home-heading h2 { margin: 0; font-size: clamp(28px, 4vw, 54px); font-weight: 300; }
.home-heading > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.folder-stack { position: relative; width: min(78vw, 850px); height: min(50vw, 460px); min-height: 390px; margin-top: 10vh; isolation: isolate; }
.folder { position: absolute; left: 50%; width: 78%; height: 43%; padding: 34px 40px 24px; border: 1px solid rgba(184,192,195,.72); background: rgba(239,241,241,.64); backdrop-filter: blur(13px) saturate(.78); -webkit-backdrop-filter: blur(13px) saturate(.78); box-shadow: 0 14px 32px rgba(18,24,27,.07), inset 0 0 0 1px rgba(255,255,255,.32); outline: 1px solid rgba(255,255,255,.2); outline-offset: -4px; transform: translateX(-50%); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, background .3s ease; }
.folder::before { content: ""; position: absolute; top: -27px; left: -1px; width: 34%; height: 28px; border: 1px solid rgba(184,192,195,.72); border-bottom: 0; background: inherit; backdrop-filter: blur(13px); clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%); }
.folder::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.28); pointer-events: none; }
.folder-about { top: 0; z-index: 1; transform: translateX(-60%) rotate(-4deg); background: rgba(219,225,226,.55); }
.folder-operations { top: 29%; z-index: 2; transform: translateX(-45%) rotate(2.4deg); background: rgba(235,238,238,.62); }
.folder-product { top: 58%; z-index: 3; transform: translateX(-54%) rotate(-1.2deg); background: rgba(248,248,246,.7); }
.folder:hover { z-index: 10; box-shadow: 0 22px 42px rgba(18,24,27,.11), inset 0 0 0 1px rgba(255,255,255,.5); background: rgba(255,255,255,.78); }
.folder-about:hover { transform: translateX(-60%) translateY(-9px) rotate(-4deg); }
.folder-operations:hover { transform: translateX(-45%) translateY(-9px) rotate(2.4deg); }
.folder-product:hover { transform: translateX(-54%) translateY(-9px) rotate(-1.2deg); }
.folder.is-opening { z-index: 12; animation: folder-open .38s cubic-bezier(.2,.75,.25,1) forwards; }
@keyframes folder-open { 45% { transform: translateX(-50%) translateY(-14px) scale(1.015); } 100% { transform: translateX(-50%) translateY(-3px) scale(.985); opacity: .72; } }
.folder-number { position: absolute; top: 18px; right: 22px; color: var(--muted); font-size: 10px; }
.folder-title { display: block; position: relative; z-index: 1; font-size: clamp(20px, 3vw, 35px); font-weight: 300; line-height: 1.15; }
.folder-en { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.home-note { position: absolute; right: 7vw; bottom: 12vh; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.reference-slot { position: absolute; right: 7vw; bottom: 76px; display: flex; flex-direction: column; gap: 5px; padding-left: 12px; border-left: 1px solid rgba(139,160,167,.55); color: var(--muted); text-align: left; }
.reference-slot span { font-size: 8px; font-weight: 500; letter-spacing: .08em; }
.reference-slot i { font-size: 8px; font-style: normal; color: #a3a8aa; }
.home .reference-slot { left: 7vw; right: auto; }
.inline-reference { position: relative; right: auto; bottom: auto; width: max-content; margin-top: 34px; }

.content-view { flex-direction: column; }
.view-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.back-link, .text-link { transition: color .2s ease; }
.back-link:hover, .text-link:hover { color: var(--ink); }
.content-shell { width: min(1180px, 100%); margin: auto; padding: 8vh 0 7vh; }
.section-intro { margin-bottom: 7vh; }
.section-intro h2, .detail-hero h2 { margin: 0; font-size: clamp(38px, 6vw, 76px); font-weight: 200; line-height: 1.08; }
.placeholder-copy { color: var(--muted); font-size: 12px; }
.profile-layout { display: grid; grid-template-columns: minmax(250px, .78fr) 1.22fr; gap: 8vw; align-items: start; }
.portrait-placeholder, .case-image, .gallery-placeholder span { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: #92989a; font-size: 10px; letter-spacing: .08em; }
.portrait-placeholder { aspect-ratio: 4 / 5; background: #eceeed; }
.info-list article, .detail-sections article { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.info-list article > span, .detail-sections article > span { color: var(--accent); font-size: 10px; }
.readable-module { padding: 22px 22px 22px 0; border-radius: 7px; }
.readable-module p { color: #51585b; }
.readable-module strong { color: var(--ink); font-weight: 600; }
.info-list h3, .detail-sections h3 { margin: 0 0 9px; font-size: 16px; font-weight: 400; }
.info-list p, .detail-sections p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.info-list article p + p { margin-top: 10px; }
.skill-groups { display: grid; gap: 14px; }
.skill-groups p { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.skill-groups b { color: var(--ink); font-weight: 400; }
.info-list a { transition: color .2s ease; }
.info-list a:hover { color: var(--accent); }
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3vw; }
.case-card { transition: transform .3s ease; }
.case-card:hover { transform: translateY(-7px); }
.case-image { position: relative; aspect-ratio: 4 / 3; border-radius: 7px; background: #e5e8e8; overflow: hidden; }
.case-image::after { content: ""; position: absolute; inset: 13%; border: 1px solid #d0d4d5; }
.case-image:has(img)::after { display: none; }
.case-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) saturate(.78); transition: transform .45s ease, filter .3s ease, opacity .3s ease; }
.case-card:hover .case-image img { transform: scale(1.025); filter: grayscale(0) saturate(.9); opacity: .88; }
.folder-case { display: block; padding: 30px 32px; background: rgba(237,240,240,.78); }
.folder-case::before { content: ""; position: absolute; top: -22px; left: 16px; width: 34%; height: 23px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(237,240,240,.78); }
.folder-case > span { display: block; color: var(--accent); font-size: 10px; }
.folder-case > b { position: absolute; left: 32px; right: 30px; bottom: 30px; color: var(--ink); font-size: clamp(21px, 2.4vw, 32px); font-weight: 300; line-height: 1.25; }
.folder-case.alternate { background: rgba(247,247,245,.82); }
.folder-case.alternate::before { background: rgba(247,247,245,.82); }
.folder-case:hover { background: rgba(250,252,252,.9); }
.case-image.alternate { background: #efefed; }
.case-image b { position: absolute; right: 18px; bottom: 16px; color: #bcc2c4; font-size: 56px; font-weight: 200; }
.case-meta { display: flex; justify-content: space-between; align-items: center; padding: 20px 2px; border-bottom: 1px solid var(--line); }
.case-meta p { margin: 0 0 8px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.case-meta h3 { margin: 0; font-size: 18px; font-weight: 350; }
.case-meta i { font-size: 22px; font-style: normal; }
.detail-shell { padding-top: 9vh; }
.detail-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 5vw; padding-bottom: 7vh; }
.detail-hero > p { margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.detail-sections { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 6vw; }
.product-sections { grid-template-columns: repeat(3, 1fr); gap: 3vw; }
.gallery-placeholder { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; margin-top: 7vh; }
.gallery-placeholder span { min-height: 290px; background: #e8eae9; }
.product-gallery { grid-template-columns: 1.2fr .8fr .8fr; }

.section-label { margin: 0 0 20px; color: var(--accent); font-size: 10px; font-weight: 500; letter-spacing: .12em; }
.project-overview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7vw; align-items: center; padding: 7vh 0; border-top: 1px solid var(--line); }
.project-copy > p:not(.section-label), .project-section p, .takeaways li, .result-list p { color: #5f6567; font-size: 13px; line-height: 2; }
.project-copy > p:not(.section-label) { margin: 0 0 16px; }
.project-overview figure, .image-grid figure, .data-proof { margin: 0; }
.project-overview img, .image-grid img, .data-proof img { display: block; width: 100%; border-radius: 7px; object-fit: cover; }
.project-overview figure { padding: 7%; border: 1px solid var(--line); border-radius: 7px; background: rgba(235,237,236,.72); }
.project-overview figure img { max-height: 340px; object-fit: contain; }
.project-overview figcaption, .image-grid figcaption, .data-proof figcaption { margin-top: 12px; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.account-gallery, .project-section, .metric-section, .takeaways { padding: 9vh 0; border-top: 1px solid var(--line); }
.image-grid { display: grid; gap: 18px; }
.image-grid.four { grid-template-columns: repeat(4, 1fr); }
.image-grid.four img { aspect-ratio: 1 / 1.1; object-fit: cover; object-position: top; }
.section-heading { display: grid; grid-template-columns: .58fr 1.42fr; gap: 4vw; margin-bottom: 5vh; }
.section-heading .section-label { margin: 6px 0 0; }
.section-heading h3 { margin: 0; max-width: 760px; font-size: clamp(24px, 3vw, 40px); font-weight: 250; line-height: 1.3; }
.split-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; }
.split-copy > p { margin: 0; }
.split-copy ul { margin: 0; padding: 0; list-style: none; }
.split-copy li { position: relative; padding: 0 0 16px 20px; color: #5f6567; font-size: 13px; line-height: 1.8; }
.split-copy li::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border: 1px solid var(--accent); border-radius: 50%; }
.challenge-visual { display: grid; grid-template-columns: 1.15fr .85fr; gap: 6vw; align-items: center; }
.challenge-axis { display: flex; align-items: center; gap: 10px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.challenge-axis span { flex: 0 0 auto; font-size: 12px; }
.challenge-axis i { flex: 1; height: 1px; background: var(--accent); }
.challenge-notes p { margin: 0 0 18px; }
.challenge-notes ul { margin: 0; padding: 0; list-style: none; }
.challenge-notes li { position: relative; margin-bottom: 10px; padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.challenge-notes li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.workflow { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.workflow > div { min-height: 210px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(247,247,245,.72); }
.workflow b { display: block; margin-bottom: 42px; color: var(--accent); font-size: 10px; font-weight: 500; }
.workflow span { display: block; margin-bottom: 10px; font-size: 17px; font-weight: 400; }
.workflow p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metrics > div { padding: 32px 22px; border-right: 1px solid var(--line); }
.metrics > div:last-child { border-right: 0; }
.metrics strong { display: block; margin-bottom: 12px; font-size: clamp(30px, 4vw, 54px); font-weight: 200; }
.metrics span { color: var(--muted); font-size: 10px; }
.metric-note { margin: 28px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.result-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin-top: 5vh; }
.result-list p { margin: 0; }
.work-gallery { grid-template-columns: repeat(4, 1fr); align-items: start; }
.work-gallery figure { overflow: hidden; border-radius: 7px; background: #eceeed; }
.work-gallery img { aspect-ratio: 3 / 4; object-position: top; }
.takeaways ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; margin: 0; padding: 0; list-style: none; counter-reset: takeaway; }
.takeaways li { position: relative; padding-top: 55px; counter-increment: takeaway; }
.takeaways li::before { content: "0" counter(takeaway); position: absolute; top: 0; left: 0; color: var(--accent); font-size: 10px; }
.personal-work { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
.personal-work img { aspect-ratio: 3 / 4; object-position: top; }
.goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); counter-reset: goal; }
.goal-grid p { position: relative; min-height: 150px; margin: 0; padding: 50px 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); counter-increment: goal; }
.goal-grid p::before { content: "0" counter(goal); position: absolute; top: 20px; color: var(--accent); font-size: 10px; }
.metrics.six { grid-template-columns: repeat(3, 1fr); }
.metrics.six > div:nth-child(3) { border-right: 0; }
.metrics.six > div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
.conversion-flow { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 6vh 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.conversion-flow span { font-size: 12px; }
.conversion-flow i { color: var(--accent); font-style: normal; }
.data-proof { width: min(420px, 100%); margin: 0 auto; }
.data-proof img { max-height: 620px; object-fit: contain; background: #fff; }
.tool-logos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.tool-logos figure { display: grid; grid-template-rows: 48px auto; place-items: center; width: 66px; margin: 0; padding: 10px 7px 8px; border: 1px solid #d8d0c5; border-radius: 7px; background: rgba(255,255,255,.78); box-shadow: 0 7px 16px rgba(66,53,39,.05); }
.tool-logos img { display: block; max-width: 44px; max-height: 44px; object-fit: contain; }
.tool-logos figcaption { margin-top: 6px; color: #69625b; font-size: 10px; line-height: 1; }
.template-switcher { display: grid; grid-template-columns: 180px 1fr; gap: 4vw; align-items: start; }
.viral-case { display: grid; grid-template-columns: minmax(260px, .72fr) 1.28fr; gap: 22px; margin-top: 4vh; }
.viral-cover { margin: 0; padding: 12px; border: 1px solid #b45145; border-radius: 7px; background: #24211e; color: #fff; overflow: hidden; }
.viral-cover img { display: block; width: 100%; max-height: 610px; border-radius: 4px; object-fit: contain; background: #000; }
.viral-cover figcaption { display: grid; gap: 7px; padding: 15px 6px 4px; font-size: 12px; line-height: 1.45; }
.viral-cover figcaption span { color: #dfd7cd; }
.viral-cover figcaption b { font-size: 13px; }
.viral-formula { display: flex; flex-direction: column; justify-content: center; padding: 34px; border: 1px solid #d8d0c5; border-radius: 7px; background: rgba(255,255,255,.76); }
.viral-formula > p { margin: 0 0 34px; font-size: 17px; line-height: 1.75; }
.viral-formula > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.viral-formula span { display: grid; place-items: center; min-height: 110px; padding: 14px; border-radius: 6px; background: #eae5dd; font-size: 18px; font-weight: 800; text-align: center; }
.viral-formula i { color: #b45145; font-size: 22px; font-style: normal; }
.viral-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.viral-methods article { min-height: 290px; padding: 28px 24px; border: 1px solid #c9867d; border-radius: 7px; background: #f3e4df; }
.viral-methods b { color: #b45145; font-size: 12px; }
.viral-methods h4 { margin: 34px 0 16px; font-size: 20px; }
.viral-methods p { margin: 0; font-size: 15px; line-height: 1.75; }
.reusable-structure { margin-top: 18px; padding: 30px; border: 1px solid #b45145; border-radius: 7px; background: rgba(255,255,255,.7); }
.reusable-structure > div { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.reusable-structure > div p { margin: 0; }
.reusable-structure > div p:last-child { max-width: 480px; color: #6e675f; font-size: 13px; text-align: right; }
.reusable-structure ol { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.reusable-structure li { position: relative; min-height: 150px; padding: 20px 16px; border-top: 3px solid #cb8c55; border-right: 1px solid #d8d0c5; background: #f4eee5; }
.reusable-structure li:last-child { border-right: 0; }
.reusable-structure li b, .reusable-structure li span, .reusable-structure li small { display: block; }
.reusable-structure li b { color: #b45145; font-size: 11px; }
.reusable-structure li span { margin-top: 24px; font-size: 15px; font-weight: 800; }
.reusable-structure li small { margin-top: 10px; color: #6e675f; font-size: 11px; line-height: 1.5; }
.replace-note { margin: 22px 0 0; color: #9d8968; font-size: 12px; font-weight: 700; }
.template-thumbs { display: grid; gap: 14px; }
.template-thumb { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #eceeed; overflow: hidden; cursor: pointer; text-align: left; }
.template-thumb.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(139,160,167,.12); }
.template-thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.template-thumb span { display: block; padding: 10px 12px; color: var(--ink); font-size: 11px; }
.template-stage { position: relative; min-height: 680px; padding: 28px; border: 1px solid var(--line); border-radius: 7px; background: rgba(240,241,239,.72); text-align: center; }
.template-full { max-width: 100%; max-height: 820px; border-radius: 7px; object-fit: contain; }
.template-close { position: absolute; top: 15px; right: 15px; z-index: 2; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 10px; cursor: pointer; }

@media (max-width: 720px) {
  .site-header { top: 20px; }
  .site-footer { position: absolute; bottom: 16px; }
  .view { padding: 72px 22px 62px; }
  .home-heading { top: 10vh; left: 22px; }
  .folder-stack { width: 100%; height: 430px; margin-top: 18vh; }
  .folder { width: 88%; height: 40%; padding: 30px 24px; }
  .folder-about { top: 0; transform: translateX(-56%) rotate(-3deg); }
  .folder-operations { top: 30%; transform: translateX(-44%) rotate(2deg); }
  .folder-product { top: 60%; transform: translateX(-52%) rotate(-1deg); }
  .folder-about:hover { transform: translateX(-56%) translateY(-7px) rotate(-3deg); }
  .folder-operations:hover { transform: translateX(-44%) translateY(-7px) rotate(2deg); }
  .folder-product:hover { transform: translateX(-52%) translateY(-7px) rotate(-1deg); }
  .home-note { display: none; }
  .reference-slot { right: 22px; bottom: 58px; }
  .home .reference-slot { left: 22px; right: auto; }
  .inline-reference { left: auto; right: auto; bottom: auto; }
  .content-shell { padding-top: 6vh; }
  .profile-layout, .case-grid, .detail-sections, .product-sections { grid-template-columns: 1fr; }
  .portrait-placeholder { width: 72%; margin-bottom: 6vh; }
  .case-grid { gap: 48px; }
  .detail-hero { align-items: flex-start; flex-direction: column; }
  .detail-hero > p { white-space: normal; }
  .gallery-placeholder, .product-gallery { grid-template-columns: 1fr; }
  .gallery-placeholder span { min-height: 220px; }
  .skill-groups p { grid-template-columns: 1fr; gap: 4px; }
  .project-overview, .section-heading, .split-copy { grid-template-columns: 1fr; }
  .challenge-visual { grid-template-columns: 1fr; gap: 28px; }
  .project-overview { gap: 40px; }
  .image-grid.four, .work-gallery { grid-template-columns: repeat(2, 1fr); }
  .workflow { grid-template-columns: 1fr 1fr; }
  .workflow > div { min-height: 190px; padding: 22px; }
  .metrics, .metrics.six { grid-template-columns: repeat(2, 1fr); }
  .metrics > div, .metrics.six > div { border-bottom: 1px solid var(--line); }
  .metrics > div:nth-child(2n) { border-right: 0; }
  .result-list, .takeaways ol { grid-template-columns: 1fr; gap: 22px; }
  .template-switcher { grid-template-columns: 1fr; }
  .template-thumbs { grid-template-columns: repeat(3, 1fr); }
  .template-stage { min-height: 480px; padding: 18px; }
  .goal-grid { grid-template-columns: 1fr; }
  .conversion-flow { align-items: flex-start; flex-direction: column; }
  .conversion-flow i { transform: rotate(90deg); }
}

/* Soft Scrapbook 2026 */
:root {
  --ink: #2c2c2c;
  --muted: #77736f;
  --line: #d9d3ca;
  --paper: #f6f3ef;
  --white: #fff;
  --accent: #c9b89c;
}
html, body { background: #f6f3ef; }
body { color: var(--ink); font-weight: 400; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .03; background-image: repeating-radial-gradient(circle at 20% 30%, #2c2c2c 0 0.45px, transparent .55px 3px); background-size: 7px 7px; }
.star-field { display: none; }
.page-wipe { display: none !important; }
.eyebrow, .section-label { color: #77736f; font-weight: 700; letter-spacing: .08em; }
.section-intro h2, .detail-hero h2, .home-heading h2, .cover h1 { color: #252525; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: 0; }
.section-intro h2::after, .detail-hero h2::after, .home-heading h2::after { width: 54px; height: 1px; margin-top: 18px; background: #c9b89c; }
.detail-hero { position: relative; border-bottom: 1px solid #d9d3ca; }
.detail-hero::before, .section-intro::before { content: "✦"; display: block; margin-bottom: 12px; color: #c9b89c; font-size: 16px; }
.cover::before { content: ""; position: absolute; width: min(720px, 72vw); aspect-ratio: 1.7; border: 1px solid rgba(120,108,91,.25); transform: rotate(-2deg); }
.cover::after { content: ""; position: absolute; width: min(720px, 72vw); aspect-ratio: 1.7; border-right: 1px solid rgba(120,108,91,.2); border-bottom: 1px solid rgba(120,108,91,.2); clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); transform: rotate(-2deg); }
.cover-center, .enter-link { z-index: 2; }
.cover h1 span { color: #c9b89c; }
.folder-stack { height: min(58vw, 540px); min-height: 480px; }
.folder { width: 74%; height: 34%; border-color: #d4cdc3; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); box-shadow: 0 14px 26px rgba(70,57,42,.06); }
.folder::before { border-color: #d4cdc3; background: inherit; }
.folder::after { border-color: rgba(201,184,156,.28); }
.folder-about { top: 0; }
.folder-operations { top: 22%; }
.folder-product { top: 44%; }
.folder-insights { top: 66%; z-index: 4; transform: translateX(-47%) rotate(3deg); background: rgba(234,229,221,.9); }
.folder-insights:hover { z-index: 10; transform: translateX(-47%) translateY(-9px) rotate(3deg); }
.folder:hover { background: #fff; box-shadow: 0 20px 34px rgba(70,57,42,.09); }
.folder-title { font-weight: 600; }
.project-overview, body .project-overview, .account-gallery, body .account-gallery, .project-section, body .project-section, .metric-section, body .metric-section, .takeaways, body .takeaways { margin: 4vh 0; padding: 6vh 4vw; border: 1px solid #ded8d0; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(66,53,39,.045); }
body .project-section:has(.workflow), body .project-section:has(.challenge-visual) { border: 1px solid #ded8d0; }
body .section-heading { align-items: end; padding-bottom: 18px; border-bottom: 1px solid #d9d3ca; }
.section-heading h3 { color: #2c2c2c; font-size: clamp(25px, 3vw, 39px); font-weight: 700; }
.project-copy > p:not(.section-label), .project-section p, .takeaways li, .result-list p { color: #484542; font-size: 15px; line-height: 1.65; }
body .metrics { gap: 10px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
body .metrics > div { min-height: 150px; padding: 30px 22px; border: 1px solid #d8d0c5; border-radius: 5px; background: #eae5dd; }
body .metrics > div:nth-child(2n) { background: #fff; }
body .metrics strong { color: #2c2c2c; font-size: clamp(36px, 4vw, 58px); font-weight: 800; }
.metrics > div:first-child { transform: rotate(-1deg); }
.metrics > div:nth-child(3) { transform: rotate(.7deg); }
body .workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; border: 0; background: transparent; }
body .workflow::before, body .workflow::after { display: none; }
body .workflow > div { min-height: 210px; padding: 26px; border: 1px solid #d8d0c5; border-radius: 5px; background: #fff; }
body .workflow > div:nth-child(2n), body .workflow > div:nth-child(3n) { background: #eae5dd; }
body .workflow b { margin-bottom: 34px; color: #9c8a6e; font-size: 12px; font-weight: 800; }
body .workflow span { font-size: 18px; font-weight: 700; }
body .workflow p { font-size: 13px; line-height: 1.65; }
.result-list p, body .result-list p, .takeaways li, body .takeaways li { padding: 24px; border: 0; border-left: 2px solid #c9b89c; border-radius: 0; background: #faf8f4; }
.challenge-axis, body .challenge-axis, .goal-grid, body .goal-grid { border: 1px solid #d8d0c5; border-radius: 5px; background: #faf8f4; }
.goal-grid p, body .goal-grid p, .goal-grid p:nth-child(2n), body .goal-grid p:nth-child(2n) { background: #fff; border-color: #ded8d0; }
.goal-grid p:nth-child(2), .goal-grid p:nth-child(3) { background: #eae5dd; }
.image-grid figure, body .image-grid figure { padding: 12px; border: 1px solid #ded8d0; border-radius: 5px; background: #fff; }
.project-overview img, .image-grid img, .data-proof img, .image-grid.four img, .personal-work img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; border-radius: 4px; object-fit: contain; object-position: center; }
.image-grid.four { align-items: start; }
.image-grid.four figure:first-child { grid-column: span 2; transform: rotate(-1deg); }
.image-grid.four figure:not(:first-child) { margin-top: 28px; transform: rotate(.6deg); }
.product-interface { grid-template-columns: 1fr 1fr; }
.product-docs { grid-template-columns: .65fr 1.35fr 1.35fr; align-items: start; }
.scrapbook-notes { margin-top: 36px; padding-top: 30px; border-top: 1px dashed #c9b89c; }
.template-switcher, body .template-switcher { background: #eae5dd; border-color: #d6cec3; border-radius: 6px; }
.template-stage, body .template-stage { background: #fff; border-color: #d6cec3; }
.template-thumb.is-selected, body .template-thumb.is-selected { border: 1px solid #9f917b; box-shadow: 0 4px 0 #c9b89c; }
.template-nav { border-color: #9f917b; background: #f6f3ef; color: #2c2c2c; }
.profile-layout { position: relative; padding: 54px 40px 40px; border: 1px solid #d8d0c5; border-radius: 5px; background: #fff; }
.profile-layout::before { content: "○   ○   ○   ○   ○   ○   ○"; position: absolute; top: 12px; left: 0; right: 0; color: #b8aa95; text-align: center; letter-spacing: 2.6vw; }
.readable-module { background: #faf8f4; }
.tool-logos span { border-color: #d3c9bb; background: #eae5dd; color: #514b44; }
.insights-shell { display: grid; place-items: center; min-height: 74vh; text-align: center; }
.insights-shell .section-intro { justify-self: start; text-align: left; }
.insight-paper { position: relative; width: min(760px, 100%); padding: 64px 70px; border: 1px solid #d8d0c5; border-radius: 5px; background: #fff; box-shadow: 0 16px 30px rgba(66,53,39,.06); transform: rotate(-.6deg); }
.binder-holes::before { content: "○  ○  ○  ○  ○  ○"; position: absolute; top: 14px; left: 0; right: 0; color: #b8aa95; letter-spacing: 2vw; }
.insight-paper p { margin: 0; color: #403c38; font-size: clamp(16px, 2vw, 22px); line-height: 1.8; }
.insight-paper p + p { margin-top: 22px; }
.insight-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 34px; margin-top: 42px; }
.insight-contact p { flex-basis: 100%; margin: 0; font-family: Georgia, serif; font-size: 20px; font-style: italic; }
.insight-contact a { padding-bottom: 5px; border-bottom: 1px solid #c9b89c; }

@media (max-width: 720px) {
  .folder-stack { min-height: 520px; }
  .folder { height: 30%; }
  .folder-about { top: 0; }
  .folder-operations { top: 23%; }
  .folder-product { top: 46%; }
  .folder-insights { top: 69%; transform: translateX(-48%) rotate(2deg); }
  .folder-insights:hover { transform: translateX(-48%) translateY(-7px) rotate(2deg); }
  .profile-layout { padding: 50px 20px 24px; }
  body .workflow, .product-interface, .product-docs { grid-template-columns: 1fr; }
  .image-grid.four figure:first-child { grid-column: auto; }
  .image-grid.four figure:not(:first-child) { margin-top: 0; }
  .insight-paper { padding: 58px 26px 34px; }
}

@media (max-width: 430px) {
  .workflow, .image-grid.four, .work-gallery, .personal-work { grid-template-columns: 1fr; }
  .metrics, .metrics.six { grid-template-columns: 1fr; }
  .metrics > div { border-right: 0; }
}

@media (pointer: fine) {
  body, a { cursor: none; }
  .cursor-dot.is-visible, .cursor-ring.is-visible { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Final editorial overrides */
body .project-overview, body .account-gallery, body .project-section, body .metric-section, body .takeaways { margin: 3vh 0; padding: 5vh 4vw; border: 1px solid #e3d4c8; border-radius: 16px; background: rgba(255,253,248,.9); box-shadow: 0 12px 30px rgba(95,56,35,.05); }
body .project-section:has(.workflow), body .project-section:has(.challenge-visual) { border: 2px solid #b94b45; }
body .section-heading { align-items: end; padding-bottom: 18px; border-bottom: 10px solid #f3e3a2; }
body .section-heading h3 { font-weight: 700; }
body .metrics { border: 1.5px solid #c86b5e; border-radius: 12px; overflow: hidden; background: #fff7df; }
body .metrics > div { background: #fffaf0; border-color: #dfb9a8; }
body .metrics > div:nth-child(2n) { background: #fff0eb; }
body .metrics strong { color: #b1433d; font-weight: 800; }
body .workflow { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; padding: 78px 12px 16px; border: 2px solid #bd5048; border-radius: 4px; background: #fffdf8; }
body .workflow::before { content: "从0-1运营思路整理"; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); padding: 10px 28px; background: #c83f43; color: #fff; font-weight: 700; }
body .workflow::after { content: ""; position: absolute; top: 70px; left: 4%; right: 4%; height: 4px; background: #e69543; }
body .workflow > div { position: relative; z-index: 1; min-height: 230px; padding: 20px 16px; border: 1px solid #e9c4bd; border-radius: 4px; background: #fff2f0; }
body .workflow > div:nth-child(2n) { background: #fff8da; }
body .workflow > div:nth-child(3n) { background: #edf2fb; }
body .workflow b { margin-bottom: 28px; color: #b52f40; font-size: 20px; font-weight: 800; }
body .workflow span { font-weight: 700; }
body .challenge-axis { border: 1px solid #da8b59; border-radius: 8px; padding: 24px; background: #fff3df; }
body .goal-grid { border: 1.5px solid #bd5048; border-radius: 10px; overflow: hidden; background: #fffdf8; }
body .goal-grid p { background: #fff8dc; border-color: #d7a99b; }
body .goal-grid p:nth-child(2n) { background: #fff0eb; }
body .template-switcher { display: block; padding: 24px; border-radius: 14px; background: #fff5e9; border: 1px solid #e1c3ae; }
body .template-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
body .template-thumb { background: #fffdf8; border-color: #d5a995; }
body .template-thumb img { aspect-ratio: 16 / 9; }
body .template-thumb.is-selected { border: 2px solid #bd5048; box-shadow: 0 5px 0 #f1d98d; }
body .template-stage { min-height: 620px; border: 1px solid #d9a08d; background: #fffdf8; }
body .template-counter { margin: 14px 0 0; color: #9b4a42; font-size: 11px; }
body .image-grid figure { padding: 10px; border-radius: 14px; background: #fff2e5; }
body .result-list p, body .takeaways li { padding: 22px; border-radius: 10px; background: #fff3e8; }

@media (max-width: 980px) {
  body .workflow { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  body .project-overview, body .account-gallery, body .project-section, body .metric-section, body .takeaways { padding: 34px 22px; }
  body .workflow { grid-template-columns: 1fr; padding-top: 82px; }
  body .template-stage { min-height: 430px; padding: 54px 46px 20px; }
  body .template-thumbs { gap: 8px; }
  body .template-thumb span { padding: 8px; }
}

/* Soft Scrapbook priority lock */
body .project-overview, body .account-gallery, body .project-section, body .metric-section, body .takeaways { margin: 4vh 0; padding: 6vh 4vw; border: 1px solid #ded8d0; border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(66,53,39,.045); }
body .project-section:has(.workflow), body .project-section:has(.challenge-visual) { border: 1px solid #ded8d0; }
body .section-heading { padding-bottom: 18px; border-bottom: 1px solid #d9d3ca; }
body .metrics { gap: 10px; border: 0; border-radius: 0; overflow: visible; background: transparent; }
body .metrics > div, body .metrics > div:nth-child(2n) { min-height: 150px; border: 1px solid #d8d0c5; border-radius: 5px; background: #eae5dd; }
body .metrics > div:nth-child(2n) { background: #fff; }
body .metrics strong { color: #2c2c2c; font-weight: 800; }
body .workflow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0; border: 0; background: transparent; }
body .workflow::before, body .workflow::after { display: none; }
body .workflow > div, body .workflow > div:nth-child(2n), body .workflow > div:nth-child(3n) { min-height: 210px; padding: 26px; border: 1px solid #d8d0c5; border-radius: 5px; background: #fff; }
body .workflow > div:nth-child(2n), body .workflow > div:nth-child(3n) { background: #eae5dd; }
body .workflow b { margin-bottom: 34px; color: #9c8a6e; font-size: 12px; }
body .challenge-axis { border: 1px solid #d8d0c5; background: #faf8f4; }
body .goal-grid { border: 1px solid #d8d0c5; background: #faf8f4; }
body .goal-grid p, body .goal-grid p:nth-child(2n) { background: #fff; border-color: #ded8d0; }
body .goal-grid p:nth-child(2), body .goal-grid p:nth-child(3) { background: #eae5dd; }
body .template-switcher { background: #eae5dd; border-color: #d6cec3; border-radius: 6px; }
body .template-stage { background: #fff; border-color: #d6cec3; }
body .template-thumb.is-selected { border: 1px solid #9f917b; box-shadow: 0 4px 0 #c9b89c; }
body .image-grid figure { border: 1px solid #ded8d0; border-radius: 5px; background: #fff; }
body .result-list p, body .takeaways li { border-radius: 0; background: #faf8f4; }
@media (max-width: 720px) {
  body .project-overview, body .account-gallery, body .project-section, body .metric-section, body .takeaways { padding: 34px 22px; }
  body .workflow { grid-template-columns: 1fr; padding: 0; }
}

/* Reference-led readability refinements */
.cover-kicker { position: absolute; top: 12vh; left: 9vw; right: 9vw; z-index: 2; display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(84,76,66,.28); color: #736a5e; font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.site-footer { position: absolute; bottom: 22px; }
.content-view { padding-bottom: 120px; }
.cover::before, .cover::after { width: min(780px, 74vw); }
.cover-name { font-size: clamp(18px, 2vw, 28px); }
.cover h1 { font-size: clamp(64px, 9vw, 132px); }
.enter-link { bottom: 10vh; padding: 12px 0; }
.home-heading h2 { font-size: clamp(38px, 5vw, 66px); }
.folder-title { font-size: clamp(25px, 3.4vw, 40px); }
.folder-en { margin-top: 12px; font-size: 11px; font-weight: 600; }
.folder-number { font-size: 12px; }
.home-note { font-size: 11px; }
.profile-envelope { position: absolute; top: 28px; right: 28px; width: 86px; height: 54px; border: 1px solid rgba(148,132,108,.35); pointer-events: none; }
.profile-envelope::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 49.2%, rgba(148,132,108,.28) 50%, transparent 50.8%), linear-gradient(215deg, transparent 49.2%, rgba(148,132,108,.28) 50%, transparent 50.8%); }
.profile-layout { grid-template-columns: minmax(250px, .7fr) 1.3fr; gap: 7vw; }
.portrait-placeholder { border-radius: 3px; background: #eae5dd; }
.info-list article { padding: 28px 22px 28px 0; }
.info-list h3 { font-size: 19px; font-weight: 700; }
.info-list p { color: #504c47; font-size: 14px; line-height: 1.65; }
.skill-groups b { font-weight: 700; }
.scrapbook-cases { gap: 5vw; }
.scrapbook-cases .case-card { position: relative; padding: 18px; border: 1px solid #d9d2c8; border-radius: 5px; background: #fff; box-shadow: 0 14px 28px rgba(70,57,42,.055); }
.scrapbook-cases .case-card:first-child { transform: rotate(-.65deg); }
.scrapbook-cases .case-card:nth-child(2) { transform: rotate(.65deg); margin-top: 34px; }
.scrapbook-cases .case-card:hover { transform: translateY(-7px) rotate(0); }
.scrapbook-cases .folder-case { aspect-ratio: 5 / 3; border: 0; border-radius: 3px; background: #eae5dd; }
.scrapbook-cases .folder-case.alternate { background: #f5f2ed; }
.scrapbook-cases .folder-case > b { font-size: clamp(25px, 2.8vw, 37px); font-weight: 700; }
.scrapbook-cases .case-meta { padding: 24px 4px 8px; }
.scrapbook-cases .case-meta h3 { font-size: 20px; font-weight: 700; }
.account-gallery .section-label { margin-bottom: 30px; }
.image-grid.four { grid-template-columns: 2fr repeat(2, 1fr); gap: 20px; }
.image-grid.four figure:first-child { grid-column: auto; grid-row: span 2; }
.image-grid.four figure:nth-child(4) { grid-column: 2; }
.image-grid.four figure:not(:first-child) { margin-top: 0; }
.image-grid.four img { max-height: 420px; object-fit: contain; }
.image-grid.four figure:first-child img { max-height: 700px; }
.metrics span { color: #56504a; font-size: 12px; font-weight: 600; }
.project-overview figcaption, .image-grid figcaption, .data-proof figcaption { color: #6f6962; font-size: 10px; line-height: 1.5; }

@media (max-width: 720px) {
  .cover-kicker { top: 10vh; left: 22px; right: 22px; }
  .cover::before, .cover::after { width: 88vw; }
  .folder-title { font-size: 26px; }
  .folder-en, .folder-number { font-size: 10px; }
  .profile-layout { grid-template-columns: 1fr; gap: 38px; }
  .profile-envelope { width: 64px; height: 40px; right: 18px; }
  .portrait-placeholder { width: min(72%, 250px); margin-bottom: 0; }
  .info-list { min-width: 0; }
  .info-list p { font-size: 14px; }
  .scrapbook-cases .case-card:nth-child(2) { margin-top: 0; }
  .image-grid.four { grid-template-columns: 1fr 1fr; }
  .image-grid.four figure:first-child { grid-column: 1 / -1; grid-row: auto; }
  .image-grid.four figure:nth-child(4) { grid-column: auto; }
}

/* Supplied reference image fidelity pass */
.cover { padding: 0 4vw; }
.cover::before { inset: auto 0 0; width: 100%; height: 23vh; aspect-ratio: auto; border: 0; border-top: 1px solid rgba(114,101,81,.32); background: #f1ede2; clip-path: polygon(0 0, 50% 73%, 100% 0, 100% 100%, 0 100%); transform: none; box-shadow: inset 0 10px 20px rgba(94,79,57,.05); }
.cover::after { inset: auto 0 0; width: 100%; height: 23vh; aspect-ratio: auto; border: 0; background: linear-gradient(166deg, transparent 49.7%, rgba(114,101,81,.2) 50%, transparent 50.3%), linear-gradient(194deg, transparent 49.7%, rgba(114,101,81,.2) 50%, transparent 50.3%); clip-path: none; transform: none; }
.cover-center { margin-top: -4vh; }
.cover h1 { margin: 0; font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive; font-size: clamp(68px, 10vw, 146px); font-style: normal; font-weight: 600; line-height: .9; text-transform: none; }
.cover h1 span { display: inline-block; margin: 0 -.02em; color: #c9b27d; font-family: Georgia, serif; font-size: .62em; font-style: normal; vertical-align: .12em; }
.cover-subtitle { margin: 38px 0 0; color: #746957; font-family: Georgia, "Times New Roman", serif; font-size: clamp(18px, 1.65vw, 25px); font-style: italic; }
.cover-nav { position: absolute; z-index: 3; left: 4.5vw; right: 4.5vw; bottom: 22px; display: flex; align-items: center; gap: 12px; padding-top: 15px; border-top: 1px solid rgba(74,68,59,.45); color: #47433d; font-family: Georgia, serif; font-size: 15px; }
.cover-nav i { color: #9a8a6e; font-style: normal; }
.cover-nav b { margin-left: auto; font-weight: 400; }
body:has(.cover.is-active) .site-footer { display: none; }
.cover .enter-link { bottom: 14vh; z-index: 4; }
.cover .enter-link small { display: none; }
.cover .enter-link span { padding: 8px 14px; background: rgba(246,243,239,.8); }

.profile-layout { grid-template-columns: minmax(280px, .72fr) 1.28fr; padding: 62px 54px 46px; background: repeating-linear-gradient(to bottom, #fff 0, #fff 43px, #e9e5df 44px); box-shadow: 8px 9px 22px rgba(58,50,41,.09); }
.profile-layout::before { top: 13px; content: "●   ●   ●   ●   ●   ●   ●   ●   ●   ●   ●"; color: #eeeae4; text-shadow: inset 0 1px #aaa; letter-spacing: 1.5vw; }
.profile-envelope { display: none; }
.portrait-card { position: relative; z-index: 2; margin: -34px 0 0 -32px; padding: 18px 18px 94px; border: 8px solid #b7afa3; border-radius: 2px; background: #faf9f6; box-shadow: 7px 8px 18px rgba(62,52,42,.12); transform: rotate(-1.3deg); }
.portrait-card::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 76px; height: 1px; background: #d0c8bc; }
.portrait-script { position: absolute; z-index: 3; top: -55px; left: -18px; margin: 0; color: #202020; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: 44px; font-weight: 700; transform: rotate(-6deg); }
.portrait-script::after { content: "✦"; margin-left: 7px; color: #c9b27d; font-family: Georgia, serif; font-size: 25px; }
.portrait-card figure { width: 58%; margin: 0; padding: 8px; background: #e7e3dc; transform: rotate(.8deg); }
.portrait-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; filter: grayscale(.08) saturate(.82); }
.portrait-meta { position: absolute; top: 34px; left: 64%; right: 15px; display: grid; gap: 11px; color: #605a53; font-size: 11px; }
.portrait-meta strong { margin-bottom: 5px; color: #2c2c2c; font-size: 18px; }
.portrait-pocket { position: absolute; left: 24px; right: 24px; bottom: 12px; height: 53px; padding: 14px 18px; border: 1px solid #d1cbc2; background: #fff; color: #b49b67; text-align: right; font-size: 26px; clip-path: polygon(0 0, 74% 0, 82% 24%, 100% 24%, 100% 100%, 0 100%); }
.info-list { align-self: center; }
.info-list article { background: rgba(255,255,255,.68); }

.scrapbook-cases .case-card, .scrapbook-cases .case-card:first-child, .scrapbook-cases .case-card:nth-child(2) { padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; }
.scrapbook-cases .case-card:nth-child(2) { margin-top: 0; }
.scrapbook-cases .folder-case { position: relative; display: block; aspect-ratio: 1.35; padding: 42px 36px; border: 2px solid #2c2c2c; border-radius: 38px 38px 28px 28px; background: rgba(246,243,239,.68); overflow: hidden; }
.scrapbook-cases .folder-case::before { top: -2px; left: -2px; width: 63%; height: 54px; border: 2px solid #2c2c2c; border-bottom: 0; border-radius: 36px 0 0 0; background: #f6f3ef; clip-path: polygon(0 0, 74% 0, 86% 100%, 100% 100%, 0 100%); }
.scrapbook-cases .folder-case::after { content: ""; position: absolute; top: -1px; right: 25%; width: 42px; height: 57px; border: 2px solid #2c2c2c; border-top: 0; background: transparent; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
.scrapbook-cases .folder-case > span { position: relative; z-index: 2; color: #2c2c2c; font-size: 13px; }
.scrapbook-cases .folder-case > b { position: relative; z-index: 2; left: auto; right: auto; bottom: auto; display: block; margin-top: 42px; font-size: clamp(27px, 3vw, 42px); font-weight: 400; }
.scrapbook-cases .folder-case > b { color: #2c2c2c; }
.scrapbook-cases .folder-case > em { position: relative; z-index: 2; display: block; margin-top: 10px; font-size: 12px; font-style: normal; }
.scrapbook-cases .folder-case > i { position: absolute; left: 36px; bottom: 50px; color: #2c2c2c; font-size: 38px; font-style: normal; }
.scrapbook-cases .folder-case > small { position: absolute; left: 36px; bottom: 25px; color: #2c2c2c; font-size: 13px; }
.scrapbook-cases .folder-case > mark { position: absolute; right: 28px; bottom: 24px; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid #2c2c2c; border-radius: 50%; background: transparent; color: #2c2c2c; font: 20px Georgia, serif; }
.scrapbook-cases .case-card:hover .folder-case { background: #eae5dd; transform: translateY(-7px); box-shadow: 0 14px 24px rgba(56,49,42,.08); }
.scrapbook-cases .case-meta { padding: 18px 4px; }

@media (max-width: 720px) {
  .cover-center { margin-top: -8vh; }
  .cover h1 { font-size: clamp(56px, 19vw, 78px); }
  .cover-subtitle { margin-top: 24px; font-size: 15px; }
  .cover-nav { gap: 7px; font-size: 11px; }
  .cover .enter-link { bottom: 17vh; }
  .profile-layout { grid-template-columns: 1fr; padding: 65px 20px 28px; gap: 46px; }
  .portrait-card { width: min(100%, 330px); margin: 0 auto; }
  .portrait-script { left: -4px; }
  .scrapbook-cases .folder-case { aspect-ratio: 1.22; padding: 34px 28px; border-radius: 28px 28px 22px 22px; }
  .scrapbook-cases .folder-case > b { margin-top: 34px; font-size: 27px; }
  .scrapbook-cases .folder-case > i, .scrapbook-cases .folder-case > small { left: 28px; }
}

/* Requirements update: clarity, outcomes, template evidence */
.cover::after { display: none; }
.cover-nav { display: none; }
.cover-enter-all { position: absolute; inset: 0; z-index: 5; }
.cover .enter-link { z-index: 10; pointer-events: auto; }
body:has(.cover.is-active) .site-footer { display: flex; z-index: 7; pointer-events: none; }
body:has(.cover.is-active) .contact-block { margin-left: 0; text-align: left; }
.footer-year { margin-left: auto; color: #4c4842; font-family: Georgia, serif; font-size: 14px; }
.folder-stack { height: min(52vw, 470px); min-height: 410px; }
.folder { height: 40%; }
.folder-about { top: 0; }
.folder-operations { top: 30%; }
.folder-product { top: 60%; }
.profile-left { min-width: 0; }
.resume-brief { display: grid; gap: 18px; margin-top: 26px; }
.resume-brief section { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px; border: 1px solid #d5cec3; background: rgba(255,255,255,.78); }
.resume-brief b { grid-column: 1 / -1; margin-bottom: 4px; color: #9d8968; font-size: 11px; letter-spacing: .1em; }
.resume-brief strong { font-size: 14px; }
.resume-brief span, .resume-brief small { color: #68615a; font-size: 11px; }
.resume-brief small { text-align: right; }
.internship-brief > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid #ddd5ca; }
.internship-brief > div:first-of-type { padding-top: 0; border-top: 0; }
.internship-brief > div p { grid-column: 1 / -1; margin: 5px 0 0; color: #68615a; font-size: 12px; line-height: 1.65; }
.section-label { font-size: 14px; line-height: 1.4; }
.project-overview .section-label, .project-section .section-label, .metric-section .section-label, .takeaways .section-label { font-size: clamp(16px, 1.55vw, 21px); font-weight: 800; letter-spacing: .04em; }
.project-copy > p:not(.section-label) { font-size: 18px; line-height: 1.72; }
.project-section p, .takeaways li, .result-list p { font-size: 16px; }
.project-snapshot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 4vh; padding: 30px; border: 1px solid #d8d0c5; border-radius: 6px; background: #eae5dd; box-shadow: 0 12px 24px rgba(66,53,39,.05); }
.project-snapshot > p { grid-column: 1 / -1; margin: 0 0 10px; color: #8e7b5e; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.project-snapshot > div { min-height: 120px; padding: 22px 18px; border: 1px solid #ddd5ca; background: #fff; }
.project-snapshot strong { display: block; color: #292725; font-size: clamp(27px, 3vw, 42px); font-weight: 800; line-height: 1; }
.project-snapshot span { display: block; margin-top: 14px; color: #68615a; font-size: 12px; font-weight: 600; }
.product-results { display: none; }
.product-project-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 7vh; }
.product-project-nav button { display: flex; align-items: center; min-height: 78px; padding: 18px 22px; border: 1px solid #d8d0c5; border-radius: 6px; background: rgba(255,255,255,.72); color: #3f3b37; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .25s ease, background .25s ease; }
.product-project-nav button:hover { transform: translateY(-3px); background: #eae5dd; }
.project-chapter { margin: 0 0 5vh; padding: 30px 34px; border-left: 4px solid #b45145; background: #eae5dd; }
.project-chapter p { margin: 0 0 8px; color: #9d8968; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.project-chapter h3 { margin: 0; font-size: clamp(30px, 4.5vw, 58px); line-height: 1.08; }
.project-chapter span { display: block; margin-top: 12px; color: #68615a; font-size: 13px; }
.project-divider { height: 1px; margin: 12vh 0 8vh; background: #b45145; }
.insight-chapter { background: #eee7da; }
.insight-overview figure img, .insight-interface img, .insight-data img { object-fit: contain; background: #f4f0e9; }
.insight-interface { grid-template-columns: 1fr 1fr; }
.insight-data { grid-template-columns: 1fr 1fr; margin-top: 5vh; }
.insight-data figure { margin: 0; }
.insight-data img { width: 100%; aspect-ratio: 16 / 9; border-radius: 7px; }
.insight-data figcaption { margin-top: 10px; color: #6e675f; font-size: 11px; }
.bandy-template-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bandy-template-card { min-width: 0; padding: 12px 12px 22px; border: 1px solid #d9d1c6; border-radius: 5px; background: #fff; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.bandy-template-card:hover { transform: translateY(-6px); box-shadow: 0 14px 24px rgba(66,53,39,.08); }
.bandy-media { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eae5dd; }
.bandy-media video, .bandy-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bandy-template-card > p { margin: 18px 0 8px; color: #9d8968; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.bandy-template-card h4 { margin: 0 0 12px; font-size: 19px; }
.bandy-template-card > span { color: #77706a; font-size: 11px; }
.bandy-dialog { width: min(1080px, calc(100% - 40px)); max-height: 88vh; padding: 0; border: 1px solid #bfb5a7; border-radius: 6px; background: #f6f3ef; color: #2c2c2c; }
.bandy-dialog, .bandy-dialog * { cursor: auto; }
.bandy-dialog button, .bandy-dialog video { cursor: pointer; }
.bandy-dialog::backdrop { background: rgba(35,31,27,.44); backdrop-filter: blur(3px); }
.bandy-dialog-close { position: sticky; z-index: 4; top: 16px; float: right; width: 38px; height: 38px; margin: 16px 16px 0 0; border: 1px solid #8c8173; border-radius: 50%; background: #fff; color: #2c2c2c; font-size: 24px; cursor: pointer; }
.bandy-dialog-content { padding: 58px 42px 42px; }
.bandy-dialog-title p { margin: 0 0 8px; color: #9d8968; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.bandy-dialog-title h3 { margin: 0 0 30px; font-size: clamp(28px, 4vw, 48px); }
.bandy-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bandy-evidence figure { margin: 0; padding: 12px; border: 1px solid #d6cec3; background: #fff; }
.bandy-evidence img, .bandy-evidence video { display: block; width: 100%; max-height: 620px; object-fit: contain; background: #eeeae4; }
.bandy-evidence figcaption { margin-top: 10px; color: #6e675f; font-size: 11px; }
.bandy-prompt { margin-top: 22px; padding: 24px; border-left: 3px solid #c9b89c; background: #fff; }
.bandy-prompt b { display: block; margin-bottom: 12px; font-size: 12px; letter-spacing: .08em; }
.bandy-prompt pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: #4f4a45; font: 13px/1.7 "Helvetica Neue", "PingFang SC", sans-serif; }

@media (max-width: 720px) {
  body:has(.cover.is-active) .site-footer { left: 22px; right: 22px; }
  .folder-stack { min-height: 440px; }
  .folder { height: 36%; }
  .folder-about { top: 0; }
  .folder-operations { top: 32%; }
  .folder-product { top: 64%; }
  .resume-brief section { grid-template-columns: 1fr; }
  .resume-brief small { text-align: left; }
  .internship-brief > div { grid-template-columns: 1fr; }
  .project-copy > p:not(.section-label) { font-size: 16px; }
  .project-snapshot { grid-template-columns: 1fr 1fr; padding: 18px; }
  .project-snapshot > div { min-height: 105px; padding: 18px 14px; }
  .bandy-template-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .bandy-template-card { flex: 0 0 82%; scroll-snap-align: start; }
  .bandy-dialog-content { padding: 58px 18px 24px; }
  .bandy-evidence { grid-template-columns: 1fr; }
  .viral-case, .viral-methods { grid-template-columns: 1fr; }
  .viral-cover { min-height: 320px; }
  .viral-formula { padding: 24px 18px; }
  .viral-formula > div { grid-template-columns: 1fr; }
  .viral-formula i { transform: rotate(90deg); text-align: center; }
  .viral-methods article { min-height: 0; }
  .reusable-structure { padding: 22px 16px; }
  .reusable-structure > div { display: block; }
  .reusable-structure > div p:last-child { margin-top: 12px; text-align: left; }
  .reusable-structure ol { grid-template-columns: 1fr; }
  .reusable-structure li { min-height: 0; border-right: 0; border-bottom: 1px solid #d8d0c5; }
  .product-project-nav, .insight-interface, .insight-data { grid-template-columns: 1fr; }
  .project-chapter { padding: 24px 20px; }
}