/*
Theme Name: Ian
Theme URI: http://43.128.24.18
Description: Ian 的个人站点 —— 摄影 · AI · 长期主义。极简暖调、规整网格、细腻交互。
Author: Ian
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ian
*/
:root{--bg:#EEECE7;--panel:#F6F5F1;--ink:#181713;--gray:#6B685F;--faint:#9E9A8F;--line:#D8D4CB;--accent:#B4813F;--maxw:1360px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,system-ui,'PingFang SC',sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(28px,5vw,80px)}
.up{text-transform:uppercase;letter-spacing:.16em}
.arch{font-family:'Archivo','Inter',sans-serif}
/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(238,236,231,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand .n{font-family:'Archivo';font-weight:700;font-size:19px;letter-spacing:.16em;text-transform:uppercase}
.brand .s{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.navlinks{display:flex;gap:44px;align-items:center}
.navlinks a{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);position:relative;padding:6px 0;transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.navlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:78vh;border-bottom:1px solid var(--line)}
.hero .l{padding:8vh 3vw 6vh 0;display:flex;flex-direction:column;justify-content:center}
.hero .l .pad{padding-left:max(clamp(40px,6vw,120px),calc((100vw - var(--maxw))/2 + 48px))}
.hero h1{font-family:'Archivo';font-weight:700;font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:.98;letter-spacing:-.02em}
.hero .r{position:relative;overflow:hidden;background:var(--panel)}
.hero .r img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.03)}
.slider{display:flex;gap:22px;align-items:center;margin-top:44px}
.slider .d{font-size:13px;color:var(--faint);letter-spacing:.1em}.slider .d.on{color:var(--ink)}
.slider .bar{width:60px;height:2px;background:var(--line);position:relative}.slider .bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:40%;background:var(--accent)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:.25s}
.btn.dark{background:var(--ink);color:var(--bg)}.btn.dark:hover{opacity:.86}
.btn.line{border:1px solid var(--ink);color:var(--ink)}.btn.line:hover{background:var(--ink);color:var(--bg)}
/* section headers */
.sechead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:38px}
.label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);font-weight:600}
.vall{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:inline-flex;gap:8px;align-items:center}
.vall:hover{color:var(--ink)}
section{padding:96px 0}
/* work cards — bordered, uniform */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.wc{border:1px solid var(--line);background:var(--panel);border-radius:2px;overflow:hidden;transition:.3s}
.wc:hover{border-color:var(--ink);transform:translateY(-4px)}
.wc .ph{aspect-ratio:16/11;overflow:hidden;background:var(--bg)}
.wc .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.03);transition:transform .7s}
.wc:hover .ph img{transform:scale(1.05)}
.wc .cap{padding:16px 18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.wc .cap h3{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.wc .cap .c{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.wc .cap .y{font-size:12px;color:var(--gray)}
/* about / skills / awards */
.chip{display:inline-block;border:1px solid var(--line);background:var(--panel);padding:9px 16px;font-size:13px;margin:0 8px 8px 0;border-radius:2px}
.aw{display:grid;grid-template-columns:60px 20px 1fr;gap:16px;align-items:start;padding:16px 0}
.aw .yr{font-size:14px;color:var(--gray)}
.aw .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:7px;position:relative}
.aw .dot::after{content:"";position:absolute;left:4px;top:12px;width:1px;height:44px;background:var(--line)}
.aw:last-child .dot::after{display:none}
.aw h4{font-size:1rem;font-weight:600}.aw p{font-size:13px;color:var(--gray)}
.small{font-size:13px;color:var(--gray)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}
footer{border-top:1px solid var(--line);background:var(--panel)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:64px 0 40px}
.foot a{display:block;color:var(--gray);font-size:13px;padding:4px 0}.foot a:hover{color:var(--ink)}
.foot .h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.footbar{border-top:1px solid var(--line);padding:22px 0;font-size:12px;color:var(--faint)}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:960px){.hero{grid-template-columns:1fr;min-height:auto}.hero .l{padding:60px 0}.hero .l .pad{padding:0 32px}.hero .r{height:52vh}.works{grid-template-columns:repeat(2,1fr)}.foot{grid-template-columns:1fr 1fr}.navlinks a:not(.cta){display:none}}
@media(max-width:600px){.works{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}*{transition:none!important}}

/* ===== critique refinements: lines, elevation, tactility ===== */
:root{--sh-card:0 1px 2px rgba(24,23,19,.05);--sh-lift:0 24px 50px -22px rgba(24,23,19,.30),0 8px 18px -10px rgba(24,23,19,.14)}
/* refined line motif under section labels */
.label{display:inline-block}
.label::after{content:"";display:block;width:26px;height:2px;background:var(--accent);margin-top:12px}
.sechead .label::after{margin-bottom:-2px}
/* nav underline animates on hover (not just active) */
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .3s ease}
.navlinks a:hover::after{width:100%}
.navlinks a.active::after{width:100%}
/* work cards: soft elevation instead of hard black border */
.wc{position:relative;box-shadow:var(--sh-card);border-color:var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.wc:hover{transform:translateY(-7px);box-shadow:var(--sh-lift);border-color:var(--line)}
.wc::after{content:"↗";position:absolute;top:12px;right:14px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;background:rgba(24,23,19,.55);backdrop-filter:blur(4px);border-radius:50%;opacity:0;transform:translateY(-4px);transition:.3s;pointer-events:none}
.wc:hover::after{opacity:1;transform:translateY(0)}
.btn{box-shadow:var(--sh-card)}
.btn.dark:hover{opacity:1;box-shadow:var(--sh-lift)}
@media(prefers-reduced-motion:reduce){#bgglow{display:none!important}.wc:hover{transform:none}}

/* soft light/shadow that follows the mouse, like light through paper */
#bgglow{position:fixed;width:820px;height:820px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;background:radial-gradient(circle,rgba(198,138,72,.34),rgba(198,138,72,.16) 38%,transparent 70%);filter:blur(34px);mix-blend-mode:multiply;opacity:1;transition:opacity .8s}
@media(pointer:coarse){#bgglow{display:none}}

/* ===== typography audit: avoid single-char orphans / widows ===== */
h1,h2,h3,h4,.display,.title,.arch,.hero h1,.sechead .label{text-wrap:balance}
p,.sub,.lead,.small,.wc .cap h3,.aw h4,.aw p,li{text-wrap:pretty}
/* CJK line-breaking niceties */
body{word-break:normal;overflow-wrap:break-word;line-break:strict}
h1,h2,h3,h4{overflow-wrap:normal}
/* give long headings a touch more room so lines break naturally */
.hero .l .pad{max-width:none}
.btn{white-space:nowrap}
.navlinks a,.label,.vall,.wc .cap .c,.wc .cap .y{white-space:nowrap}

/* journal list rows (from preview) */
.jrow{display:grid;grid-template-columns:150px 1fr 180px;gap:30px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .3s cubic-bezier(.2,.8,.2,1)}
.jrow:hover{padding-left:12px}
.jrow .thumb{aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line)}
.jrow .thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.jrow h3{font-family:'Archivo','Inter',sans-serif;font-weight:600;font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.015em;line-height:1.2}
/* article body */
.post-body{font-size:1.15rem;line-height:1.95;color:#2b2a26}
.post-body p{margin-bottom:1.5rem;text-wrap:pretty}
.post-body h2,.post-body h3{font-family:'Archivo','Inter',sans-serif;margin:2rem 0 1rem;letter-spacing:-.01em}
.post-body blockquote{font-family:'Archivo','Inter',sans-serif;font-size:1.5rem;line-height:1.5;font-weight:500;color:var(--ink);margin:2.4rem 0;padding-left:22px;border-left:2px solid var(--accent)}
.post-body blockquote p{margin:0}
@media(max-width:820px){.jrow{grid-template-columns:1fr;gap:10px}.jrow .thumb{display:none}}

/* ===== mobile responsiveness (v1.0.1) ===== */
@media(max-width:820px){
  .wrap{padding:0 22px}
  /* nav: stack, show all links */
  nav .nav{height:auto;flex-direction:column;align-items:flex-start;gap:12px;padding-top:14px;padding-bottom:14px}
  .navlinks{width:100%;gap:24px;flex-wrap:wrap}
  .navlinks a:not(.cta){display:inline-block!important}
  .navlinks a{font-size:13px;padding:2px 0}
  /* collapse any inline multi-column grids (about/works-info sections) */
  main section>div[style*="grid-template-columns"]{grid-template-columns:1fr!important;gap:34px!important}
  /* hero */
  .hero{grid-template-columns:1fr!important;min-height:auto}
  .hero .l{padding:44px 0 26px}
  .hero .l .pad{padding:0 22px!important;max-width:none!important}
  .hero .r{height:60vw;min-height:240px}
  .hero h1{font-size:clamp(2.5rem,9vw,3.4rem)}
  .slider{margin-top:28px}
  /* works uniform grid */
  .works{grid-template-columns:1fr 1fr;gap:16px}
  /* section header may wrap */
  .sechead{flex-wrap:wrap;gap:10px}
  /* tighter vertical rhythm */
  section{padding:64px 0}
  section.pad{padding:64px 0}
  /* article side padding */
  article{padding-left:22px;padding-right:22px}
  /* footer */
  .foot{grid-template-columns:1fr 1fr;gap:26px;padding:48px 0 32px}
  /* stats/flex rows wrap */
  main div[style*="display:flex"][style*="gap:44px"],main div[style*="display:flex"][style*="gap:48px"]{flex-wrap:wrap;gap:24px!important}
}
@media(max-width:560px){
  .works{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  h1.display,.hero h1{font-size:clamp(2.2rem,8.5vw,2.8rem)}
  .aw{grid-template-columns:44px 16px 1fr;gap:12px}
  .jrow{padding:22px 0}
}

/* ===== page transition (smooth tab switch) ===== */
@keyframes pagein{from{opacity:0}to{opacity:1}}
body{animation:pagein .5s ease}
body.leaving{opacity:0;transition:opacity .28s ease}
@media(prefers-reduced-motion:reduce){body{animation:none!important}body.leaving{opacity:1!important}}

/* ===== single-page anchors: sticky-nav scroll offset + mobile edge fix ===== */
html{scroll-padding-top:100px}
@media(max-width:820px){
  html{scroll-padding-top:132px}
  /* force horizontal gutter even when a section sets inline padding:X 0 Y */
  .wrap{padding-left:22px!important;padding-right:22px!important}
}

/* scrollIntoView offset for sticky nav */
section[id]{scroll-margin-top:100px}
@media(max-width:820px){section[id]{scroll-margin-top:120px}}