/* Visual language after veryman.jp: white ground, navy type, light grotesk,
   hairlines that draw in, things coming into focus from a blur. */

:root {
  --bg: #FFFFFF;
  --panel: #F6F6F6;
  --main: #20456B;   /* all text, rules and the contact band */
  --sub: #8FA2B5;
  --line: #D2DAE1;

  --sans: "Neue Haas Grotesk Display Pro", "Helvetica Neue", "Inter Tight", Helvetica, Arial, "Hiragino Sans", "PingFang SC", sans-serif;

  --pad: clamp(20px, 3.125vw, 48px);
  --max: 1440px;
  --ease-base: cubic-bezier(.71, -.02, .27, 1.04);
  --ease-out: cubic-bezier(.165, .84, .44, 1);
}

html[lang="zh-CN"] {
  --sans: "Helvetica Neue", "Inter Tight", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--main);
  font: 400 15px/1.8 var(--sans);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 1px solid var(--main); outline-offset: 4px; }
::selection { background: var(--main); color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; padding: 6px 12px; background: var(--main); color: #fff; z-index: 40; }
.skip:focus { top: 12px; }
.k { display: block; font-size: 12px; color: var(--sub); letter-spacing: .02em; }

/* ── Motion vocabulary ────────────────── */

/* Letters roll up one by one on hover (each letter carries its own copy below it) */
.w { display: inline-flex; height: 1.3em; overflow: hidden; line-height: 1.3; vertical-align: bottom; }
.w > i { display: inline-block; font-style: normal; text-shadow: 0 1.3em 0 currentColor; transition: transform .45s var(--ease-out) calc(var(--n) * .018s); }
a:hover .w > i, button:hover .w > i { transform: translateY(-1.3em); }

/* (→): the arrow slides out and comes back in from the other side */
.arw { display: inline-flex; align-items: center; white-space: nowrap; font-size: .92em; }
.arw-i { display: inline-block; overflow: hidden; width: 1.05em; text-align: center; }
.arw-i > span { display: inline-block; }
a:hover .arw-i > span { animation: arw .6s var(--ease-base); }
@keyframes arw { 45% { transform: translateX(120%); } 46% { transform: translateX(-120%); } }

/* Hand-drawn loop around the current selection, drawn on */
.ring { position: absolute; left: -17%; top: -34%; width: 134%; height: 168%; overflow: visible; pointer-events: none; }
.fan-label .ring { left: -9%; width: 118%; }
.ring path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw .9s var(--ease-base) .3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Page titles: letters rise out of a blur */
.pop-w { white-space: nowrap; }
.pop { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.3em); animation: pop 1.1s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + var(--n) * .045s); }
@keyframes pop { to { opacity: 1; filter: blur(0); transform: none; } }
.rise { opacity: 0; filter: blur(4px); transform: translateY(16px); animation: rise .8s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; filter: blur(0); transform: none; } }

/* Sections come into focus as they scroll in */
.js .rv { opacity: 0; filter: blur(4px); transform: translateY(16px); }
.js .rv.in { opacity: 1; filter: none; transform: none; transition: opacity .6s ease-out .15s, transform .6s ease-out .15s, filter .6s ease-out .15s; }

/* ── Header ───────────────────────────── */

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 20px var(--pad) 16px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { display: block; line-height: 1.2; }
.brand-name { display: block; font-size: 17px; font-weight: 500; letter-spacing: .01em; }
.brand-legal { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .32em; color: var(--sub); }
.top-right { display: flex; align-items: flex-start; gap: clamp(20px, 4vw, 56px); font-size: 13px; }
.lang { display: inline-flex; gap: 10px; align-items: center; color: var(--sub); }
.lang [data-l] { position: relative; padding: 0 3px; }
.lang [data-l].on { color: var(--main); }
.lang:hover [data-l]:not(.on) { color: var(--main); }
.slash { color: var(--line); }
.top-links { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.top-links a { position: relative; display: inline-flex; gap: .3em; align-items: center; }

/* ── Hero ─────────────────────────────── */

.hero {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: flex-end; gap: clamp(28px, 5vw, 72px);
  padding: clamp(150px, 24vh, 230px) var(--pad) clamp(90px, 13vh, 150px);
}
.hero-text { flex: 1; min-width: 0; }
.hero-name { font-size: clamp(3.6rem, 10.5vw, 9.5rem); font-weight: 400; line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.hero-legal { margin-top: 20px; font-size: 13px; letter-spacing: .42em; color: var(--sub); }
.hero-line { margin-top: 30px; max-width: 32em; font-size: 15px; }
.hero-portrait { flex: 0 0 clamp(180px, 22vw, 300px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ── Two columns: fan on the left, content on the right ── */

.body {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(13rem, 1fr) 3fr; column-gap: clamp(24px, 4vw, 64px);
  padding-inline: var(--pad);
}
.content { min-width: 0; }

/* The fan: entries sit on an arc around a centre far off to the left (very slight),
   the current one on the focus line; the others smaller, fainter, a touch blurred. */
.fan { position: relative; }
.fan-stage { position: sticky; top: 0; height: 100vh; }
.fan-wheel {
  --R: 2600px; --step: 1.6deg; --rot: 0deg;
  position: absolute; left: 24px; top: 52%; width: 0; height: 0;
  transform: rotate(var(--rot)); transform-origin: calc(-1 * var(--R)) 0;
  transition: transform 1s var(--ease-base);
}
.fan-item {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform: rotate(calc(var(--i) * var(--step))); transform-origin: calc(-1 * var(--R)) 0;
}
.fan-item a { position: absolute; left: 0; top: -36px; height: 72px; display: flex; align-items: center; white-space: nowrap; padding-right: 24px; }
.fan-label {
  position: relative; display: inline-block;
  font-size: clamp(1.4rem, 1.9vw, 2rem); line-height: 1.1; letter-spacing: -.005em;
  transform-origin: left center; transform: scale(.46);
  opacity: max(.3, calc(1 - var(--d, 1) * .17));
  filter: blur(calc(var(--d, 1) * .6px));
  transition: transform .7s var(--ease-base), opacity .4s, filter .4s var(--ease-base);
}
.fan-label .ring { display: none; }
.fan-item.on .fan-label { transform: scale(1); opacity: 1; filter: none; }
.fan-item.on .fan-label .ring { display: block; }
.fan-item:not(.on) a:hover .fan-label { transform: scale(.68); opacity: 1; filter: none; }

/* ── Sections ─────────────────────────── */

.sec { padding-bottom: clamp(88px, 11vw, 150px); }
.sec-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sec-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.sec-top .sec-desc { margin-bottom: 0; }
.sec-desc { max-width: 34em; margin-bottom: 28px; font-size: 14px; color: var(--sub); }
.sec-more { margin-top: 28px; }
.line-link { display: inline-flex; align-items: center; gap: .35em; font-size: 13px; }

/* Rows: hairlines draw in from the left once the section is in view */
.rows { position: relative; }
.rows::before, .rows > li::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-base) .2s;
}
.rows::before { top: 0; background: var(--main); }
.rows > li { position: relative; }
.rows > li::after { bottom: 0; background: var(--line); transition-delay: .45s; }
.in .rows::before, .in .rows > li::after { transform: scaleX(1); }

.row {
  display: grid; grid-template-columns: 8rem 1fr minmax(8rem, 12rem) auto; align-items: baseline; gap: 20px;
  padding: 22px 0;
  transition: opacity .3s, filter .3s var(--ease-base);
}
.row-when { font-size: 12px; color: var(--sub); }
.row-main { min-width: 0; }
.row-title { display: block; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; }
.row-text { display: block; font-size: 14px; }
.row-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--sub); }
.row-sub .k { display: inline; margin-right: 10px; }
.row-side { font-size: 12px; color: var(--sub); text-align: right; }
/* Hovering one row pushes the others out of focus */
.rows:has(a.row:hover) a.row { opacity: .35; filter: blur(1.5px); }
.rows:has(a.row:hover) a.row:hover { opacity: 1; filter: none; }

/* ── Web project cards ────────────────── */

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 28px; }
.card-shot { position: relative; display: block; aspect-ratio: 4 / 3; padding: 10%; overflow: hidden; background: var(--panel); }
.card-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  box-shadow: 0 14px 34px rgba(32, 69, 107, .16);
  transition: transform .9s var(--ease-base), filter .3s var(--ease-base), opacity .3s;
}
.card-vert { position: absolute; top: 14px; right: 12px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: .04em; }
.cards:has(.card:hover) .card-shot img { filter: blur(6px); opacity: .3; }
.cards:has(.card:hover) .card:hover .card-shot img { filter: none; opacity: 1; transform: scale(1.04); }
.card-meta { margin-top: 18px; font-size: 12px; color: var(--sub); }
.card-title { margin-top: 2px; font-size: 1.3rem; font-weight: 400; line-height: 1.4; }
.card-title a { display: inline; }
.card-title .ww { display: inline; }
.card-sum { margin-top: 6px; font-size: 14px; }
.card-tools { margin-top: 8px; font-size: 12px; color: var(--sub); }
.card-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 20px; }

/* ── Main call to action: open the real product ──
   Solid navy block so it reads as the thing to click, not a footnote.
   On hover the fill wipes away to the right and it becomes an outline. */
.cta {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 15px 24px 14px; font-size: 16px; line-height: 1.3; letter-spacing: .01em;
  color: #fff; border: 1px solid var(--main);
  background: linear-gradient(var(--main), var(--main)) no-repeat right center / 100% 100%;
  transition: background-size .55s var(--ease-base), color .35s var(--ease-base);
}
.cta:hover { background-size: 0% 100%; color: var(--main); }
.cta .arw { font-size: 1em; flex: none; }
.cta { max-width: 100%; }
.ww { min-width: 0; }
.head-cta { margin-top: 36px; }
.head-cta, .sec-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.lead + .lead { margin-top: 1.1em; }
.note { margin-top: 18px; font-size: 13px; color: var(--sub); }

/* ── Skills ───────────────────────────── */

.sub-title { margin: 64px 0 14px; font-size: 12px; font-weight: 400; color: var(--sub); }
.skills { border-top: 1px solid var(--main); }
.skills li { display: grid; grid-template-columns: 8rem 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.skills .k { padding-top: 2px; }

/* ── Photography: natural proportions, so the watermark is never cropped ── */

.photos { columns: 3 220px; column-gap: 12px; }
.ph { display: block; margin-bottom: 12px; break-inside: avoid; overflow: hidden; background: var(--panel); }
.ph img { width: 100%; height: auto; filter: blur(10px); transition: filter 1.2s, opacity .3s, transform .9s var(--ease-base); }
.in .ph img { filter: none; }
.photos:has(.ph:hover) .ph img { filter: blur(6px); opacity: .3; transition: filter .3s var(--ease-base), opacity .3s, transform .9s var(--ease-base); }
.photos:has(.ph:hover) .ph:hover img { filter: none; opacity: 1; transform: scale(1.05); }

/* ── Portfolio + project pages ────────── */

.page-head { max-width: var(--max); margin: 0 auto; padding: clamp(150px, 22vh, 210px) var(--pad) clamp(72px, 10vh, 120px); }
.page-title { max-width: 14em; font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.page-lead { margin-top: 28px; max-width: 36em; font-size: 15px; }
.crumb { display: flex; gap: 10px; margin-bottom: 22px; font-size: 12px; color: var(--sub); }
.crumb a:hover { color: var(--main); }
.meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--main); }
.meta dt { font-size: 12px; color: var(--sub); }
.meta dd { margin: 4px 0 0; font-size: 14px; }

.lead { max-width: 34em; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.75; }
.tags { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.tags li + li::before { content: "/"; margin: 0 .55em; color: var(--sub); }
.tools { margin-top: 24px; font-size: 14px; }
.did { border-top: 1px solid var(--main); }
.did li { position: relative; max-width: 44em; padding: 16px 0 16px 2.2rem; border-bottom: 1px solid var(--line); }
.did li::before { content: "—"; position: absolute; left: 0; color: var(--sub); }
.next { display: block; padding: 28px 0; border-top: 1px solid var(--main); border-bottom: 1px solid var(--main); }
.next-title { display: inline-flex; align-items: center; gap: .4em; margin-top: 6px; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.3; }

/* ── Contact band, closing every page ─── */

.band { background: var(--main); color: #fff; padding: clamp(80px, 10vw, 140px) var(--pad) 28px; }
.band-in, .band-foot { max-width: calc(var(--max) - 2 * var(--pad)); margin: 0 auto; }
.band-in { display: grid; grid-template-columns: minmax(13rem, 1fr) 3fr; column-gap: clamp(24px, 4vw, 64px); }
.band-in > :not(.band-label) { grid-column: 2; }
.band-label { grid-row: 1 / span 3; font-size: 12px; color: rgba(255, 255, 255, .6); }
.band-text { font-size: 14px; color: rgba(255, 255, 255, .75); }
.email { justify-self: start; margin: 14px 0 22px; font-size: clamp(1.8rem, 4.4vw, 3.8rem); line-height: 1.2; letter-spacing: -.01em; word-break: break-all; }
.email .w { height: 1.3em; }
.band-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(80px, 10vw, 130px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 12px; color: rgba(255, 255, 255, .7); }
.band-foot a { display: inline-flex; gap: .3em; align-items: center; }

/* ── Narrow screens: no fan; each section shows its own heading ── */

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
  .body { grid-template-columns: 1fr; }
  .fan { display: none; }
  .sec-h { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-bottom: 22px; font-size: 1.6rem; font-weight: 400; }
  .band-in { grid-template-columns: 1fr; }
  .band-in > :not(.band-label) { grid-column: 1; }
  .band-label { grid-row: auto; margin-bottom: 8px; }
  .hero-name { white-space: normal; }
}

@media (max-width: 640px) {
  .top-right { gap: 16px; font-size: 12px; }
  .hero { flex-direction: column-reverse; align-items: flex-start; }
  .hero-portrait { flex-basis: auto; width: 60%; }
  .row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .row-when { grid-column: 1; grid-row: 1; }
  .row-main { grid-column: 1; grid-row: 2; }
  .row-side { grid-column: 1; grid-row: 3; text-align: left; }
  .row > .arw { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .cards { grid-template-columns: 1fr; }
  .cta { display: flex; justify-content: space-between; width: 100%; }
  .skills li { grid-template-columns: 1fr; gap: 2px; }
  .meta { grid-template-columns: 1fr 1fr; }
  .photos { columns: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .pop, .rise, .js .rv { opacity: 1; filter: none; transform: none; }
  .ring path { stroke-dashoffset: 0; }
  .rows::before, .rows > li::after { transform: none; }
  .ph img { filter: none; }
}