@charset "UTF-8";

:root {
  --paper: #ece7dc;
  --paper-light: #f4f0e7;
  --ink: #242a2d;
  --ink-soft: #5d6260;
  --indigo: #3f536a;
  --indigo-deep: #25394d;
  --vermilion: #b85c5c;
  --vermilion-dark: #8f474a;
  --line: rgba(44, 53, 56, .18);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, "SimSun", serif;
  --sans: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: -4rem;
  left: 1rem;
  padding: .7rem 1rem;
  color: var(--paper-light);
  background: var(--indigo-deep);
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }
.paper-grain {
  position: fixed;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(53, 48, 39, .14) .55px, transparent .65px),
    radial-gradient(rgba(255, 255, 255, .42) .55px, transparent .7px);
  background-position: 0 0, 6px 7px;
  background-size: 11px 11px, 13px 13px;
}

.site-header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1440px;
  margin: 0 auto;
  padding: 2.2rem clamp(1.5rem, 5vw, 5rem);
  animation: appear .9s .1s both ease-out;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 48% 43% 52% 40%;
  color: var(--vermilion-dark);
  font-size: 1.2rem;
  transform: rotate(-7deg);
}
.brand-name {
  color: var(--indigo-deep);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .22em;
}
.brand-dot { margin-left: .25rem; color: var(--vermilion); }
.site-nav {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.7rem);
  color: var(--ink-soft);
  font-size: .78rem;
  letter-spacing: .16em;
}
.site-nav a { position: relative; text-decoration: none; }
.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -.55rem;
  left: 0;
  height: 1px;
  background: var(--vermilion);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(820px, 100svh);
  isolation: isolate;
  overflow: hidden;
}
.hero-art, .hero-wash { position: absolute; z-index: -2; inset: 0; }
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) contrast(.95);
  animation: landscape-in 1.8s .1s both cubic-bezier(.2,.7,.2,1);
}
.hero-wash {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(241, 237, 226, .98) 0%, rgba(241, 237, 226, .87) 28%, rgba(241, 237, 226, .2) 60%, rgba(241, 237, 226, .16) 100%),
    linear-gradient(0deg, rgba(241, 237, 226, .32), transparent 44%, rgba(241, 237, 226, .26));
}
.hero-content {
  width: min(42rem, 52vw);
  margin-left: clamp(1.5rem, 12vw, 11rem);
  padding: 7rem 0 6rem;
  animation: rise-in 1.1s .35s both cubic-bezier(.2,.8,.2,1);
}
.kicker, .eyebrow, .card-label, .section-index, .copyright {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .2em;
  line-height: 1.6;
}
.kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.6rem;
  color: var(--vermilion-dark);
  font-weight: 600;
}
.kicker-line { width: 2.8rem; height: 1px; background: currentColor; }
h1 {
  max-width: 10em;
  margin: 0;
  color: var(--indigo-deep);
  font-size: clamp(4.5rem, 10vw, 9.2rem);
  font-weight: 400;
  letter-spacing: -.08em;
  line-height: .92;
  text-wrap: balance;
}
h1 em {
  display: inline-block;
  margin-left: .14em;
  font-family: var(--sans);
  font-size: .3em;
  font-style: normal;
  font-weight: 300;
  letter-spacing: .08em;
  vertical-align: .3em;
}
.title-pause { margin-left: .08em; color: var(--vermilion); }
.hero-copy {
  max-width: 26rem;
  margin: 2.35rem 0 0;
  color: #4f5554;
  font-size: clamp(.94rem, 1.4vw, 1.07rem);
  line-height: 2;
}
.hero-copy strong { color: var(--indigo-deep); font-family: var(--sans); font-size: .9em; font-weight: 600; letter-spacing: .04em; }
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 3.6rem;
  color: var(--indigo);
  font-size: .75rem;
  letter-spacing: .13em;
  text-decoration: none;
}
.scroll-cue-ink {
  position: relative;
  display: inline-block;
  width: 2.7rem;
  height: 1px;
  background: currentColor;
}
.scroll-cue-ink::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}
.scroll-cue:hover .scroll-cue-ink { width: 3.4rem; transition: width .3s ease; }
.hero-side-note {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: 4.5rem;
  margin: 0;
  color: rgba(37, 57, 77, .68);
  font-size: .88rem;
  letter-spacing: .35em;
  line-height: 2.2;
  writing-mode: vertical-rl;
  animation: appear 1s 1s both ease-out;
}
.hero-side-note span { color: var(--vermilion-dark); font-size: .68rem; }
.hero-seal, .card-seal, .footer-seal {
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 40% 54% 45% 50%;
  transform: rotate(8deg);
}
.hero-seal {
  position: absolute;
  right: clamp(5.5rem, 12vw, 13rem);
  bottom: 8rem;
  width: 3.8rem;
  height: 3.8rem;
  color: rgba(184, 92, 92, .72);
  font-size: 1.6rem;
  animation: stamp 1.1s .8s both cubic-bezier(.2,.8,.2,1);
}

.works {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(5rem, 11vw, 9.5rem) clamp(1.5rem, 5vw, 5rem) clamp(6rem, 12vw, 10rem);
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(3rem, .18fr) 1fr minmax(7rem, .4fr);
  align-items: end;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.section-index { margin: 0; color: var(--vermilion-dark); }
.eyebrow { margin: 0 0 .7rem; color: var(--indigo); }
h2 { margin: 0; color: var(--indigo-deep); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; letter-spacing: -.05em; }
.section-aside { margin: 0; color: var(--ink-soft); font-size: .95rem; letter-spacing: .1em; line-height: 1.9; text-align: right; }
.link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  padding-top: 2.5rem;
}
.ink-card {
  position: relative;
  display: flex;
  min-height: 18rem;
  padding: 1.55rem;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
.ink-card::before {
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -18%;
  width: 80%;
  height: 150%;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  content: "";
  transform: rotate(25deg);
  transition: transform .7s ease;
}
.ink-card:hover, .ink-card:focus-visible { transform: translateY(-.55rem); box-shadow: 0 1.3rem 2.5rem rgba(42, 47, 48, .14); }
.ink-card:hover::before, .ink-card:focus-visible::before { transform: rotate(8deg) scale(1.1); }
.card-vermilion { color: #f7eee6; background: var(--vermilion); }
.card-indigo { color: #eef0ec; background: var(--indigo); }
.card-paper { color: var(--indigo-deep); background: #ddd9ce; }
.card-number { font: .65rem var(--sans); letter-spacing: .15em; opacity: .75; }
.card-seal {
  position: absolute;
  top: 1.35rem;
  right: 1.35rem;
  width: 2.7rem;
  height: 2.7rem;
  color: currentColor;
  font-size: 1.2rem;
  opacity: .88;
}
.card-body { align-self: end; display: flex; flex-direction: column; }
.card-label { margin-bottom: .55rem; opacity: .7; }
.card-body strong { font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 400; letter-spacing: .02em; }
.card-description { max-width: 12em; margin-top: .75rem; font-size: .88rem; line-height: 1.7; opacity: .78; }
.card-arrow { position: absolute; right: 1.55rem; bottom: 1.35rem; font: 1.25rem var(--sans); transition: transform .3s ease; }
.ink-card:hover .card-arrow, .ink-card:focus-visible .card-arrow { transform: translate(.2rem, -.2rem); }

.site-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem clamp(1.5rem, 5vw, 5rem) 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .83rem;
}
.footer-seal { width: 2rem; height: 2rem; color: var(--vermilion-dark); font-size: .9rem; }
.site-footer p { margin: 0; }
.site-footer p span { color: var(--indigo); }
.copyright { margin-left: auto !important; color: var(--ink-soft); font-size: .6rem; }

@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(1.6rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes landscape-in { from { opacity: .35; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes stamp { from { opacity: 0; transform: rotate(18deg) scale(.6); } to { opacity: 1; transform: rotate(8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 720px) {
  .site-header { padding-top: 1.4rem; padding-bottom: 1.4rem; }
  .site-nav { gap: 1rem; font-size: .68rem; }
  .hero { min-height: 47rem; align-items: flex-end; }
  .hero-art img { object-position: 62% center; }
  .hero-wash { background: linear-gradient(0deg, rgba(241,237,226,.98) 0%, rgba(241,237,226,.82) 40%, rgba(241,237,226,.18) 82%), linear-gradient(90deg, rgba(241,237,226,.2), transparent); }
  .hero-content { width: auto; margin: 0; padding: 8rem 1.5rem 4.2rem; }
  h1 { font-size: clamp(4rem, 19vw, 7rem); }
  .hero-copy { max-width: 20rem; margin-top: 1.6rem; line-height: 1.85; }
  .scroll-cue { margin-top: 2rem; }
  .hero-side-note { right: 1.5rem; bottom: 4.5rem; font-size: .72rem; }
  .hero-seal { right: 4.5rem; bottom: 2.6rem; width: 3rem; height: 3rem; font-size: 1.25rem; }
  .section-heading { grid-template-columns: 2.8rem 1fr; align-items: start; }
  .section-aside { grid-column: 2; text-align: left; }
  .link-grid { grid-template-columns: 1fr; gap: .8rem; }
  .ink-card { min-height: 12rem; }
  .site-footer { flex-wrap: wrap; }
  .copyright { width: 100%; margin-left: 3rem !important; }
}