/* youyang.art — rebuilt from the original Adobe Portfolio design, self-hosted. */
@import url('fonts.css');

:root{
  color-scheme: light;

  --ink:          #282828;   /* nav, logo, masthead name */
  --ink-display:  #303030;   /* the big three-line title */
  --ink-body:     #2e2e2e;   /* running copy */
  --ink-soft:     #4e4e4e;   /* copy inside the columns */
  --accent:       #012b55;   /* captions, link hover */
  --link:         #546e87;
  --green:        #4be100;
  --green-hi:     #55ff00;
  --bg:           #ffffff;
  --field-bg:     #f8f8f8;
  --field-bd:     #eaeaea;
  --veil:         #222222;   /* cover hover */

  --header-h:     65px;
  --shell:        1500px;    /* outer page width */
  --measure:      800px;     /* text + inset media column */
  --gutter:       3%;
  --grid-gap:     8px;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-caption: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-nav:     'Shadows Into Light', 'Bradley Hand', cursive;
  --font-script:  'Parisienne', 'Snell Roundhand', cursive;

  --ease:         cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink-body);
  font-family:var(--font-body); font-weight:300; font-size:21px; line-height:40px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,iframe{ display:block; max-width:100%; height:auto; border:0 }
a{ color:inherit }

.f-display{ font-family:var(--font-display); font-stretch:125% }
.f-body   { font-family:var(--font-body) }
.f-caption{ font-family:var(--font-caption); font-stretch:88% }
.f-nav    { font-family:var(--font-nav) }
.f-script { font-family:var(--font-script) }
.u        { text-decoration:underline }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--bg); color:var(--ink); padding:12px 18px;
  font-family:var(--font-caption); font-size:15px; line-height:1;
}
.skip-link:focus{ left:0 }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* ── header ───────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:3;
  display:flex; align-items:center;
  height:var(--header-h); padding:0 var(--gutter);
  background:var(--bg);
}
.site-nav{ flex:1 1 auto; display:flex; align-items:center; gap:20px }
.site-nav a{
  font-family:var(--font-nav); font-size:22.5px; line-height:24px; font-weight:400;
  color:var(--ink); text-transform:uppercase; text-decoration:none;
}
.site-nav a:hover{ text-decoration:line-through }
.site-nav a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px }
.nav-extras{ display:none }
.nowrap{ white-space:nowrap }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.site-logo{
  flex:0 0 auto; margin-left:auto; padding-right:5%;
  font-family:var(--font-script); font-size:22px; line-height:30px; color:#000;
}
.site-logo a{ text-decoration:none }
.nav-toggle{ display:none }
.header-placeholder{ height:var(--header-h) }   /* only on pages without a masthead */

/* ── masthead (fixed; the page scrolls over it) ───────────── */
.masthead{
  position:fixed; top:0; left:0; width:100%; height:66vh;
  display:flex; align-items:center; justify-content:flex-start; overflow:hidden;
  padding-left:var(--gutter);
}
.masthead-inner{ width:100%; max-width:1000px; padding-bottom:30px }
.masthead h1{
  margin:104px 0 0; font-family:var(--font-script); font-weight:400;
  font-size:66px; line-height:66px; color:var(--ink); text-align:left;
}
.masthead .tagline{
  margin:8px 0; font-family:var(--font-display); font-stretch:125%; font-weight:800;
  font-size:55px; line-height:50px; color:var(--ink-display);
  white-space:pre-line; text-align:left;
}
.masthead-placeholder{ height:66vh }
.masthead-arrow{
  display:block; width:60px; height:40px; margin-top:6px;
  background:none; border:0; padding:0; cursor:pointer;
}
.masthead-arrow::before{
  content:''; display:block; width:22px; height:22px; margin-left:4px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg) translate(-4px,-4px);
}

/* ── shell ────────────────────────────────────────────────── */
.site-wrap{ position:relative; z-index:1; background:var(--bg) }
.shell{ width:100%; max-width:var(--shell); margin:0 auto }
main{ display:block }

/* ── blocks ───────────────────────────────────────────────── */
.block{ clear:both; width:100%; margin-left:auto; margin-right:auto }

.block p{ margin:0; padding-bottom:10px }
.block--text{
  font-family:var(--font-body); font-weight:300;
  font-size:21px; line-height:40px; color:var(--ink-body); text-align:left;
}
.block--text a{ color:var(--link); text-decoration:underline }
.block--text a:hover{ color:var(--accent) }

figure{ margin:0 }
figure.block > img,
figure.block > a{ display:block; margin-left:auto; margin-right:auto }
figcaption,
.caption{
  font-family:var(--font-caption); font-stretch:88%;
  font-size:15px; line-height:16px; font-weight:400; color:var(--accent);
  text-align:center; padding:10px 0 20px;
  max-width:var(--measure); margin:0 auto;
}
figcaption a{ color:inherit }
.caption--left{ text-align:left }

/* columns (Adobe's "tree") */
.cols{ display:flex; align-items:center; width:100% }
.cols > *{ min-width:0 }
.cols .caption{ max-width:none }

/* image grid */
.grid{ display:flex; flex-wrap:wrap; width:100%; margin:0 calc(var(--grid-gap) / -2) }
.grid--flush{ --grid-gap:0px; margin:0 }
.grid > figure{
  position:relative; display:block;
  border-bottom:var(--grid-gap) solid transparent;
  border-left:calc(var(--grid-gap) / 2) solid transparent;
  border-right:calc(var(--grid-gap) / 2) solid transparent;
}
.grid > figure img{ width:100%; height:auto }

/* video embed */
.embed{ position:relative; width:100%; height:0; background:#000 }
.embed iframe,
.embed video{ position:absolute; inset:0; width:100%; height:100% }

/* the green "↓ here ↓" button */
.block--button{ text-align:center }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:90px; padding:0 34px; border-radius:100px;
  border:1px solid rgba(40,40,40,.12); background:none;
  font-family:var(--font-display); font-stretch:125%; font-weight:200; font-size:51px;
  line-height:90px; color:var(--green); text-decoration:none; cursor:pointer;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.pill:hover{ background:rgba(75,225,0,.08); font-style:italic }

/* contact form */
.contact-form{ margin:20px auto 64px; max-width:var(--measure) }
.contact-form label{
  display:block; font-family:var(--font-caption); font-stretch:88%;
  font-size:14px; line-height:1.4; margin:10px 0 8px; color:var(--ink-body);
}
.contact-form input,
.contact-form textarea{
  width:100%; margin-bottom:30px; padding:0 10px;
  background:var(--field-bg); border:1px solid var(--field-bd); border-radius:0;
  font-family:var(--font-body); font-weight:200; font-size:21px; color:#404040;
}
.contact-form input{ height:40px; line-height:40px }
.contact-form textarea{ min-height:160px; padding:10px; line-height:32px; resize:vertical }
/* the original painted this #4BE100 with white text (1.9:1); same green, readable ink */
.contact-form button{
  height:40px; padding:0 25px; border:0; border-radius:20px; cursor:pointer;
  background:var(--green); color:var(--ink);
  font-family:var(--font-display); font-stretch:125%; font-weight:700; font-size:21px;
  transition:background-color .2s var(--ease);
}
.contact-form button:hover{ background:var(--green-hi) }
.form-note{
  margin:14px 0 0; font-family:var(--font-caption); font-stretch:88%;
  font-size:14px; line-height:20px; color:var(--ink-body);
}
.form-note a{ color:var(--link) }

/* social row */
.social-row{ display:flex; justify-content:center; gap:26px; padding:4px 0 10px }
.social-row a{ display:block; line-height:0 }
.social-row svg{ width:30px; height:24px; fill:var(--ink); transition:fill .2s var(--ease) }
.social-row a:hover svg{ fill:var(--green-hi) }

/* ── gallery of project covers ────────────────────────────── */
.covers{ display:flex; flex-wrap:wrap; width:100% }
.cover{ position:relative; display:block; width:50%; text-decoration:none; overflow:hidden }
.cover-img{ position:relative; width:100%; aspect-ratio:4 / 3; background:rgba(0,0,0,.03) }
.cover-img img{ width:100%; height:100%; object-fit:cover }
.cover-img::after{
  content:''; position:absolute; inset:0;
  background:var(--veil); opacity:0; transition:opacity .2s var(--ease);
}
.cover-meta{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:8%; color:#fff; text-align:center;
  opacity:0; transition:opacity .15s var(--ease);
}
.cover:hover .cover-img::after,
.cover:focus-visible .cover-img::after{ opacity:.95 }
.cover:hover .cover-meta,
.cover:focus-visible .cover-meta{ opacity:1 }
.cover-meta .t{ font-family:var(--font-caption); font-stretch:88%; font-size:24px; line-height:24px; padding-bottom:3px }
.cover-meta .d{ font-family:var(--font-caption); font-stretch:88%; font-size:17px; line-height:20px }

/* ── "you may also like" ──────────────────────────────────── */
.related{ padding:60px 0 0 }
.related-title{
  margin:0 0 18px; text-align:center; font-weight:400;
  font-family:var(--font-caption); font-stretch:88%; font-size:20px; line-height:24px; color:var(--ink);
}
.related-top{
  margin:0; padding:28px 0 0; text-align:center;
  font-family:var(--font-caption); font-stretch:88%; font-size:15px; color:var(--ink);
}
.related-top a{ text-decoration:none }
.related-top a:hover{ text-decoration:underline }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px }
.related .cover{ width:100% }

/* ── footer / back to top ─────────────────────────────────── */
.site-footer{
  padding:36px 0 40px; text-align:center;
  font-family:var(--font-body); font-weight:300; font-size:16px; line-height:28px;
  color:var(--ink-body);
}
.site-footer a{ color:var(--link) }
.to-top{
  position:fixed; right:30px; bottom:30px; z-index:3;
  width:60px; height:60px; border:0; border-radius:60px; cursor:pointer;
  background:rgba(0,0,0,.1); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), background-color .2s var(--ease);
}
.to-top.is-on{ opacity:1; visibility:visible; pointer-events:auto }
.to-top:hover{ background:rgba(0,0,0,.2) }
.to-top::before{
  content:''; position:absolute; left:50%; top:54%;
  width:14px; height:14px; margin-left:-7px;
  border-left:2px solid rgba(0,0,0,.45); border-top:2px solid rgba(0,0,0,.45);
  transform:rotate(45deg);
}

/* ── lightbox ─────────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:20; display:none;
  align-items:center; justify-content:center; padding:4vmin;
  background:rgba(255,255,255,.97);
}
.lightbox[open]{ display:flex }
.lightbox img{ max-width:100%; max-height:92vh; width:auto; height:auto; object-fit:contain }
.lightbox-close{
  position:absolute; top:18px; right:22px; width:44px; height:44px;
  border:0; background:none; cursor:pointer; color:var(--ink); font-size:28px; line-height:1;
}
.zoomable{ cursor:zoom-in }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1024px){
  .masthead h1{ font-size:31px; line-height:31px; margin-top:41px }
  .masthead .tagline{ font-size:25px; line-height:23px }
  .block--text{ font-size:17px; line-height:32px }
  figcaption,.caption{ font-size:14px; line-height:20px; padding:8px 0 14px }
  .related-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px){
  :root{ --gutter:5% }
  .site-nav{
    position:fixed; inset:0; z-index:5;
    flex-direction:column; align-items:center; justify-content:center; gap:0;
    background:var(--bg); transform:translateX(100%); transition:transform .3s var(--ease);
  }
  .site-nav[data-open="true"]{ transform:none }
  .site-nav[data-open="true"] ~ .site-logo{ visibility:hidden }
  body:has(.site-nav[data-open="true"]) .to-top{ display:none }
  .site-nav a{ font-size:22px; line-height:32px; padding:0 0 30px }
  .site-nav .nav-extras{ display:flex; gap:28px; margin-top:26px; padding-top:26px; border-top:1px solid var(--editorial-line,#dedede); font:400 17px/1.4 var(--font-body) }
  .site-nav .nav-extras a{ font-family:var(--font-body); font-size:17px; text-transform:none; padding:8px 0; text-decoration:none }
  .site-logo{ order:-1; margin-left:0; padding-right:0 }
  .nav-toggle{
    display:block; margin-left:auto; z-index:6;
    width:34px; height:34px; padding:6px; border:0; background:none; cursor:pointer;
  }
  .nav-toggle span{ display:block; height:2px; margin:4px 0; background:var(--ink); transition:transform .3s var(--ease), opacity .2s var(--ease) }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

  .masthead{ position:relative; top:0; height:auto; min-height:48vh }
  .masthead-placeholder{ display:none }
  .masthead h1{ font-size:28px; line-height:28px; margin-top:35px }
  .masthead .tagline{ font-size:22px; line-height:20px; margin:7px 0 24px }

  .cols{ display:block }
  .cols > *{ width:100% !important }
  .block--text{ font-size:16px; line-height:30px }
  .cover{ width:100% }
  .grid > figure{ width:100% !important; flex:none !important }
  .pill{ font-size:30px; min-height:62px; line-height:62px }
  .to-top{ right:16px; bottom:16px; width:48px; height:48px }
}

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

/* Current practice, 2026. The paper, handwriting and artworks remain the identity. */
:root { --editorial-blue:#173ac5; --editorial-line:#dedede; }
html { scroll-padding-top:100px; }
body { overflow-wrap:break-word; }
.header-tools { display:flex; align-items:center; gap:20px; font:400 15px/1.4 var(--font-body); margin:0 30px; }
.header-tools a { text-decoration:none; }
.header-tools a:hover { color:var(--editorial-blue); }
.language-switch { min-width:30px; padding:8px 0; }
.site-logo { padding-right:0; font-size:30px; }
.site-logo a { display:inline-block; padding:10px 0 10px 12px; }
.site-header { border-bottom:1px solid transparent; }
.editorial-page .site-header { border-color:var(--editorial-line); }
.editorial-page { font-size:19px; line-height:1.75; }
.editorial-page .shell { max-width:1450px; padding:0 clamp(22px,4.5vw,70px); }
.editorial-hero { padding:78px 0 72px; }
.hero-with-image { display:grid; grid-template-columns:1fr 1.06fr; align-items:center; gap:5%; min-height:640px; }
.eyebrow { font:500 13px/1.5 var(--font-caption); letter-spacing:.12em; text-transform:uppercase; color:var(--editorial-blue); margin:0 0 24px; }
.editorial-hero h1 { font:500 clamp(42px,5.4vw,76px)/1.13 var(--font-body); letter-spacing:-.045em; margin:0 0 26px; max-width:1000px; }
.page-home .editorial-hero h1 { font-family:var(--font-script); font-size:clamp(62px,6.6vw,96px); font-weight:400; letter-spacing:-.025em; }
.hero-subtitle { font:400 clamp(19px,1.65vw,24px)/1.55 var(--font-body); max-width:700px; margin:0 0 22px; }
.hero-intro { max-width:710px; margin:0; color:var(--ink-soft); font-size:19px; line-height:1.85; }
.hero-copy .editorial-links { margin-top:30px; }
.editorial-image img { width:100%; height:auto; }
.editorial-image figcaption { text-align:left; margin:0; padding:13px 0 0; max-width:none; font:400 13px/1.6 var(--font-body); color:#666; }
.editorial-section { padding:64px 0; border-top:1px solid var(--editorial-line); }
.editorial-section h2 { font:400 clamp(28px,3.1vw,43px)/1.25 var(--font-body); letter-spacing:-.025em; margin:0 0 28px; }
.editorial-section .eyebrow { margin-bottom:20px; }
.section-copy { max-width:880px; }
.prose { max-width:770px; }
.prose p { margin:0 0 20px; }
.prose p:last-child { margin-bottom:0; }
.prose a { color:var(--editorial-blue); text-underline-offset:4px; }
.prose ul { padding-left:1.2em; margin:24px 0; }
.prose li { margin:10px 0; }
.prose blockquote { border-left:2px solid var(--editorial-blue); margin:30px 0; padding:4px 0 4px 26px; font-size:23px; line-height:1.75; }
.section-with-image { display:grid; grid-template-columns:1.05fr 1fr; gap:6%; align-items:center; }
.editorial-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; margin-top:26px; }
.text-link { font:500 16px/1.5 var(--font-body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:7px; color:var(--editorial-blue); padding:5px 0; }
.text-link:hover { color:var(--ink); }
.basecamp-section { position:relative; padding:54px clamp(24px,4vw,60px); margin-bottom:64px; background:#f3f5fc; border-top:2px solid var(--editorial-blue); }
.basecamp-section .section-copy { max-width:920px; }
.basecamp-section h2 { max-width:950px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:46px 28px; }
.project-card { min-width:0; }
.project-card > a { display:block; text-decoration:none; }
.project-image { overflow:hidden; background:#f5f5f5; aspect-ratio:4/3; }
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.project-card a:hover img { transform:scale(1.025); }
.project-info { display:flex; justify-content:space-between; gap:18px; align-items:baseline; padding:17px 0 0; }
.project-info h3 { font:500 23px/1.4 var(--font-body); letter-spacing:-.015em; margin:0; }
.project-meta { flex-shrink:0; font:400 14px/1.5 var(--font-body); color:#666; margin:0; }
.project-description { font-size:16px; line-height:1.65; color:#666; margin:7px 0 0; max-width:540px; }
.editorial-list { list-style:none; padding:0; margin:0; }
.editorial-list li { border-bottom:1px solid var(--editorial-line); }
.editorial-list a { display:block; position:relative; padding:26px 44px 28px 0; text-decoration:none; }
.editorial-list a:hover h3 { color:var(--editorial-blue); }
.list-meta { font:400 13px/1.5 var(--font-body); color:#666; }
.editorial-list h3 { font:400 clamp(22px,2.5vw,31px)/1.4 var(--font-body); margin:9px 0; }
.editorial-list p { font-size:17px; line-height:1.7; color:#666; max-width:780px; margin:0; }
.list-arrow { position:absolute; right:5px; top:50%; transform:translateY(-50%); font-size:25px; }
.editorial-page .site-footer { margin:0 clamp(22px,4.5vw,70px); padding:35px 0 42px; border-top:1px solid var(--editorial-line); text-align:left; }
.archive-title { margin:30px var(--gutter); font:400 34px/1.3 var(--font-body); }
.archive-page .masthead { position:relative; height:auto; min-height:280px; padding:95px var(--gutter) 38px; }
.archive-page .masthead-inner { padding-bottom:0; }
.archive-page .masthead h1 { margin:0; font-size:clamp(35px,4vw,56px); line-height:1.25; }
.archive-page .masthead .tagline { margin-top:15px; font-size:26px; line-height:1.3; }
.archive-page .masthead-placeholder { display:none; }
.archive-page .masthead-arrow { display:none; }
.archive-page .cover { overflow:visible; }
.archive-page .cover-meta { position:relative; inset:auto; opacity:1; color:var(--ink); padding:15px 20px 30px; min-height:87px; align-items:flex-start; text-align:left; }
.archive-page .cover .cover-img { display:block; overflow:hidden; }
.archive-page .cover:hover .cover-img::after,.archive-page .cover:focus-visible .cover-img::after { opacity:.1; }
.zoomable:focus-visible { outline:3px solid var(--editorial-blue); outline-offset:4px; }
html[lang="zh-Hans"] .site-nav a { font-family:var(--font-body); font-size:18px; }
html[lang="zh-Hans"] .editorial-hero h1 { letter-spacing:0; line-height:1.3; }
html[lang="zh-Hans"] .page-home .editorial-hero h1 { font-family:var(--font-body); font-size:clamp(46px,5.6vw,74px); }
html[lang="zh-Hans"] .hero-intro,html[lang="zh-Hans"] .prose { line-height:1.95; }
html[lang="zh-Hans"] .editorial-section h2 { line-height:1.45; letter-spacing:0; }
html[lang="zh-Hans"] .eyebrow { letter-spacing:.08em; }
@media (max-width:1100px) {
  .site-nav { gap:17px; }
  .site-nav a { font-size:19px; }
  .header-tools { gap:15px; margin:0 22px; }
  .hero-with-image { min-height:550px; }
  .hero-intro { font-size:17px; }
  .project-info { display:block; }
  .project-meta { margin-top:5px; }
}
@media (max-width:768px) {
  .site-header { height:65px; }
  .site-nav { visibility:hidden; }
  .site-nav[data-open="true"] { visibility:visible; }
  .site-nav a { font-size:29px; line-height:1.5; padding:15px 24px; }
  html[lang="zh-Hans"] .site-nav a { font-size:26px; }
  .header-tools { margin:0 18px 0 auto; order:0; gap:20px; }
  .site-logo { order:-1; margin:0; }
  .site-logo a { padding-left:0; }
  .nav-toggle { order:1; margin:0; }
  .editorial-hero { padding:44px 0 46px; }
  .hero-with-image { display:flex; flex-direction:column; align-items:stretch; gap:32px; min-height:0; }
  .editorial-hero h1 { font-size:40px; margin-bottom:22px; }
  .page-home .editorial-hero h1 { font-size:68px; }
  .eyebrow { font-size:12px; margin-bottom:20px; }
  .hero-subtitle { font-size:20px; }
  .hero-intro { font-size:17px; line-height:1.8; }
  .editorial-section { padding:42px 0; }
  .editorial-section h2 { font-size:29px; margin-bottom:24px; }
  .section-with-image { display:flex; flex-direction:column; align-items:stretch; gap:28px; }
  .editorial-page { font-size:17px; }
  .prose blockquote { font-size:20px; padding-left:19px; }
  .basecamp-section { padding:30px 23px; margin-bottom:42px; }
  .project-grid { grid-template-columns:1fr; gap:32px; }
  .project-info h3 { font-size:23px; }
  .project-info { padding-top:14px; }
  .editorial-list a { padding:22px 28px 24px 0; }
  .archive-page .masthead { min-height:220px; padding-top:95px; }
  .archive-page .block--text { max-width:90%; }
  .related-grid { grid-template-columns:1fr; }
}

/* ── project cards without a photo yet ────────────────────── */
.project-card--text > a { border-top:1px solid var(--editorial-line); padding-top:18px; min-height:150px; }
.project-card--text .project-info { padding-top:0; }

/* ── CV (password page + the decrypted document) ─────────── */
.cv-form { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; max-width:520px; }
.cv-form input { flex:1 1 220px; font:400 17px/1.4 var(--font-body); padding:12px 14px; border:1px solid #cfcfcf; border-radius:6px; background:var(--field-bg); color:var(--ink); }
.cv-form input:focus-visible { outline:2px solid var(--editorial-blue); outline-offset:2px; }
.cv-button { font:500 16px/1.4 var(--font-body); padding:12px 22px; border:1px solid var(--ink); border-radius:6px; background:var(--ink); color:#fff; cursor:pointer; }
.cv-button:hover { background:var(--editorial-blue); border-color:var(--editorial-blue); }
.cv-button[disabled] { opacity:.6; cursor:progress; }
.cv-error { flex-basis:100%; margin:0; color:#a92b26; font-size:15px; }
.cv { max-width:820px; padding:20px 0 80px; font-size:17px; line-height:1.7; }
.cv header { margin-bottom:34px; }
.cv h1 { font:500 clamp(34px,4vw,48px)/1.15 var(--font-body); letter-spacing:-.03em; margin:0 0 6px; }
.cv h1 .en { color:#666; font-weight:400; font-size:.6em; margin-left:10px; }
.cv .roles { color:var(--editorial-blue); font:500 15px/1.5 var(--font-caption); letter-spacing:.06em; margin:0 0 8px; }
.cv .contact { color:#666; font-size:14px; margin:0 0 22px; }
.cv .contact a { color:inherit; }
.cv .summary { border-left:2px solid var(--editorial-blue); padding:4px 0 4px 18px; margin:0; }
.cv section { margin-top:42px; }
.cv h2 { font:500 12px/1.5 var(--font-caption); letter-spacing:.18em; text-transform:uppercase; color:var(--editorial-blue); margin:0 0 18px; padding-bottom:8px; border-bottom:1px solid var(--editorial-line); }
.cv h2 .cn { color:var(--ink); letter-spacing:.05em; margin-right:8px; font-size:14px; }
.cv .current { background:#f3f5fc; border-radius:8px; padding:22px 26px; }
.cv .current h3, .cv .project h3 { font:500 19px/1.4 var(--font-body); margin:0 0 4px; }
.cv .sub { color:var(--editorial-blue); font-size:14px; margin:0 0 12px; }
.cv .metric { display:inline-block; background:#fff; border:1px solid var(--editorial-line); border-radius:12px; padding:2px 10px; font-size:13px; margin:0 6px 6px 0; color:var(--editorial-blue); }
.cv .quote { border-left:2px solid var(--editorial-line); padding-left:14px; color:#555; font-style:italic; font-size:15.5px; margin:14px 0; }
.cv .project { padding:20px 0; border-bottom:1px dashed var(--editorial-line); }
.cv .project:last-child { border-bottom:0; }
.cv .num { color:#999; font:400 13px/1.5 var(--font-caption); margin-right:8px; }
.cv .tags { margin:0 0 10px; }
.cv .tag { display:inline-block; font-size:12.5px; color:#666; border:1px solid var(--editorial-line); border-radius:10px; padding:1px 9px; margin:0 6px 6px 0; }
.cv p { margin:0 0 10px; }
.cv ul { padding-left:1.1em; margin:8px 0; }
.cv li { margin:4px 0; }
.cv .caps { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.cv .cap { border:1px solid var(--editorial-line); border-radius:8px; padding:14px 16px; }
.cv .cap b { display:block; margin-bottom:4px; }
.cv .cap span { color:#666; font-size:14px; }
.cv .row { display:grid; grid-template-columns:110px 1fr; gap:14px; margin:0 0 12px; }
.cv .row .when { color:#666; font-size:14px; padding-top:3px; }
.cv .fest b { display:inline-block; min-width:110px; color:#666; font-weight:400; font-size:14px; }
.cv .links a { display:inline-block; margin:0 22px 8px 0; }
.cv a { color:var(--editorial-blue); text-underline-offset:4px; }
@media (max-width:768px) { .cv .row { grid-template-columns:1fr; gap:2px; } .cv { font-size:16px; } }