/*
 * InkEcho visual system
 * Quiet, tactile, and product-led. The photography carries the atmosphere;
 * typography and controls stay deliberately restrained.
 */

:root {
  --paper: #e8e4dc;
  --paper-2: #ddd8cf;
  --ink: #171816;
  --ink-80: rgba(23, 24, 22, .76);
  --ink-55: rgba(23, 24, 22, .52);
  --ink-38: rgba(23, 24, 22, .36);
  --hair: rgba(23, 24, 22, .16);
  --hair-2: rgba(23, 24, 22, .08);
  --seal: #805f43;
  --seal-ink: #f3eee6;
  --disp: "Instrument Serif", "Noto Serif SC", serif;
  --disp-cjk: "Noto Serif SC", "Songti SC", serif;
  --serif: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand-en: "Instrument Serif", serif;
  --hand-zh: "Noto Serif SC", "Songti SC", serif;
  --pad: clamp(22px, 5vw, 76px);
  --maxw: 1480px;
}

html[data-theme="night"] {
  --paper: #10110f;
  --paper-2: #171815;
  --ink: #eee9df;
  --ink-80: rgba(238, 233, 223, .76);
  --ink-55: rgba(238, 233, 223, .5);
  --ink-38: rgba(238, 233, 223, .32);
  --hair: rgba(238, 233, 223, .14);
  --hair-2: rgba(238, 233, 223, .07);
  --seal: #b48a66;
  --seal-ink: #11120f;
}

body.site-home {
  background: var(--paper);
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: .01em;
  transition: background .45s ease, color .45s ease;
}

body.site-home::before {
  display: none;
}

.site-home .wrap {
  width: 100%;
  max-width: var(--maxw);
  padding-right: var(--pad);
  padding-left: var(--pad) !important;
}

.site-home .rail {
  display: none;
}

.site-home header.top {
  position: absolute;
}

.site-home .top-in {
  max-width: var(--maxw);
  padding: 28px var(--pad);
}

.site-home .brand {
  gap: 11px;
}

.site-home .seal-mark {
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  background: var(--seal);
  box-shadow: none;
}

.site-home .brand .name {
  display: block;
}

.site-home .brand .name b {
  font-family: var(--disp-cjk);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .12em;
}

.site-home .brand .name span {
  display: inline;
  margin-left: 9px;
  font-size: 9px;
  letter-spacing: .22em;
}

.site-home .controls {
  gap: 15px;
  font-size: 11px;
}

.site-home .start-link {
  padding: 4px 0;
  color: var(--ink-80);
  border-color: var(--hair);
}

.site-home .switches {
  gap: 4px;
  opacity: .38;
  transform: none;
}

.site-home .switches:hover,
.site-home .switches:focus-within {
  opacity: .72;
}

.site-home .seg {
  border-color: var(--hair-2);
}

.site-home .seg button {
  padding: 3px 7px;
  font-size: 9px;
  font-weight: 400;
}

.site-home .seg button.on,
html[data-theme="night"] .site-home .seg button.on {
  color: var(--ink-80);
  background: var(--hair-2);
}

.site-home .hero {
  min-height: 100svh;
  padding: clamp(140px, 18vh, 210px) 0 72px;
  display: flex;
  align-items: center;
}

.site-home .hero-grid,
.site-home .body-grid,
.site-home .colo-grid {
  display: block;
}

.site-home .hero-main {
  width: 100%;
}

.site-home .kicker {
  margin: 0 0 28px;
  color: var(--ink-55);
  font-family: var(--serif);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .24em;
}

.site-home .hero h1 {
  max-width: 940px;
  font-size: clamp(48px, 7.2vw, 108px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

body.site-home[lang="zh"] .hero h1 {
  font-family: var(--disp-cjk);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .02em;
}

.site-home .hero h1 em {
  color: inherit;
  font-style: normal;
}

.site-home .hero-lower {
  margin-top: clamp(54px, 8vw, 104px);
  display: grid;
  grid-template-columns: minmax(250px, .62fr) minmax(480px, 1.38fr);
  gap: clamp(44px, 8vw, 128px);
  align-items: end;
}

.site-home .hero-lede {
  max-width: 29em;
  margin: 0;
  color: var(--ink-55);
  font-size: 14px;
  line-height: 1.9;
}

.site-home .hand-note {
  margin: 26px 0 0;
  color: var(--ink-80);
  font-family: var(--disp-cjk);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .06em;
}

body.site-home[lang="en"] .hand-note {
  font-family: var(--disp);
  font-size: 19px;
}

.site-home .hero-cta,
.site-home .covenant-action a {
  padding: 11px 0 8px;
  color: var(--ink);
  background: transparent;
  border-bottom: 1px solid var(--seal);
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
}

.site-home .hero-cta:hover,
.site-home .covenant-action a:hover {
  color: var(--seal);
  background: transparent;
  transform: none;
}

.site-home .hero-fig {
  overflow: hidden;
  background: var(--paper-2);
}

.site-home .hero-fig img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="night"] .site-home .hero-fig img,
html[data-theme="night"] .site-home .plates figure img {
  filter: brightness(.82) saturate(.82);
}

.site-home .hero-fig .plate {
  position: static;
  display: block;
  margin-top: 12px;
  color: var(--ink-38);
  font-family: var(--serif);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .14em;
}

.site-home .specline {
  margin-top: clamp(62px, 9vw, 116px);
  padding-top: 20px;
  gap: 10px 18px;
  border-color: var(--hair);
  color: var(--ink-38);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .15em;
}

body.site-home[lang="zh"] .specline {
  font-size: 11px;
}

.site-home .specline .s {
  color: var(--seal);
}

.site-home section.spread:not(.hero) {
  padding: clamp(104px, 13vw, 190px) 0;
  border-top: 1px solid var(--hair-2);
}

.site-home .open {
  max-width: 760px;
}

.site-home .open .oh {
  margin-bottom: 24px;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.2;
}

body.site-home[lang="zh"] .open .oh {
  font-family: var(--disp-cjk);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: .02em;
}

.site-home .open p {
  max-width: 46em;
  color: var(--ink-55);
  font-size: 14px;
  line-height: 1.95;
}

.site-home .plate-row {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(280px, 430px) minmax(280px, 1fr);
  gap: clamp(56px, 10vw, 150px);
  align-items: center;
}

.site-home .plate-fig {
  width: 100%;
  max-width: 430px;
  justify-self: start;
  border: 1px solid var(--hair);
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="night"] .site-home .plate-fig {
  box-shadow: none;
}

.site-home .plate-fig .tag {
  top: 14px;
  left: 14px;
  padding: 4px 8px;
  color: var(--ink-55);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 0;
  font-family: var(--serif);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .14em;
}

.site-home .plate-caption {
  max-width: 560px;
}

.site-home .plate-caption .num {
  color: var(--seal);
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
}

.site-home .plate-caption h3 {
  margin: 26px 0 22px;
  font-size: clamp(32px, 4.5vw, 62px);
}

body.site-home[lang="zh"] .plate-caption h3 {
  font-family: var(--disp-cjk);
  font-weight: 300;
  line-height: 1.48;
}

.site-home .plate-caption p {
  max-width: 38em;
  color: var(--ink-55);
  font-size: 13px;
  line-height: 1.9;
}

.site-home .plate-caption .said {
  margin-top: 30px;
  padding: 0;
  color: var(--ink-38);
  border: 0;
  font-family: var(--disp);
  font-size: 18px;
}

.site-home .voice {
  margin: clamp(72px, 10vw, 132px) 0 0;
  padding: clamp(34px, 5vw, 64px) 0;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  column-gap: clamp(40px, 8vw, 120px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.site-home .pull-q {
  margin: 0;
  color: var(--ink-38);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.9;
}

body.site-home[lang="en"] .pull-q {
  font-family: var(--serif);
  font-size: 13px;
}

.site-home .pull {
  max-width: none;
  margin: 0;
  font-size: clamp(42px, 6vw, 82px);
  line-height: 1.1;
}

body.site-home[lang="zh"] .pull {
  max-width: none;
  font-family: var(--disp-cjk);
  font-weight: 300;
  line-height: 1.25;
}

.site-home .pull .q {
  display: none;
}

.site-home .pull-by {
  grid-column: 2;
  margin-top: 25px;
  color: var(--ink-38);
  font-family: var(--serif);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .14em;
}

.site-home .pull-by .line {
  width: 22px;
  background: var(--seal);
}

.site-home .princ {
  margin-top: clamp(76px, 10vw, 130px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.site-home .princ .item {
  min-height: 240px;
  padding: 34px clamp(24px, 3vw, 44px) 38px;
  border-color: var(--hair);
}

.site-home .princ .item:first-child {
  padding-left: 0;
}

.site-home .princ .n {
  margin-bottom: 38px;
  color: var(--ink-38);
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
}

.site-home .princ h4 {
  margin-bottom: 14px;
  font-family: var(--disp-cjk);
  font-size: 18px;
  font-weight: 400;
}

.site-home .princ p {
  max-width: 26em;
  color: var(--ink-38);
  font-size: 12px;
  line-height: 1.9;
}

.site-home .covenant-journey {
  margin-top: clamp(64px, 8vw, 108px);
  border-color: var(--hair);
}

.site-home .journey-step {
  min-height: 190px;
  padding: 30px clamp(22px, 3vw, 42px);
  border-color: var(--hair);
}

.site-home .journey-step:first-child {
  padding-left: 0;
}

.site-home .journey-step .num {
  color: var(--ink-38);
  font-family: var(--serif);
  font-size: 10px;
  font-weight: 400;
}

.site-home .journey-step h3 {
  margin-top: 35px;
  font-family: var(--disp-cjk);
  font-size: 17px;
  font-weight: 400;
}

.site-home .journey-step p {
  max-width: 25em;
  color: var(--ink-38);
  font-size: 12px;
  line-height: 1.85;
}

.site-home .covenant-action {
  margin-top: 34px;
  gap: 24px;
}

.site-home .covenant-action span {
  color: var(--ink-38);
  font-size: 10px;
  letter-spacing: .04em;
}

.site-home .plates {
  margin-top: clamp(64px, 9vw, 120px);
  gap: 28px;
}

.site-home .plates figure img {
  border-radius: 0;
  box-shadow: none;
}

.site-home .plates figcaption {
  margin-top: 12px;
  color: var(--ink-38);
  font-size: 10px;
  line-height: 1.8;
}

.site-home .plates figcaption b {
  color: var(--seal);
  font-family: var(--serif);
  font-size: 9px;
  font-weight: 400;
}

.site-home .p-a {
  grid-column: 1 / span 8;
}

.site-home .p-b {
  grid-column: 9 / span 4;
  margin-bottom: 72px;
}

.site-home .p-c {
  grid-column: 1 / span 5;
  margin-top: 28px;
}

.site-home .p-lead {
  grid-column: 7 / span 6;
  padding-left: 0;
}

body.site-home[lang="zh"] .p-lead p.big {
  max-width: 23em;
  font-family: var(--disp-cjk);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 300;
  line-height: 1.65;
}

.site-home .p-lead p.small {
  color: var(--ink-38);
  font-size: 10px;
  letter-spacing: .12em;
}

.site-home footer.colophon {
  padding: 80px 0 84px;
  border-color: var(--hair);
}

.site-home .colo-main {
  grid-template-columns: 1fr 1fr;
  gap: clamp(64px, 10vw, 160px);
}

.site-home .colo-mark {
  gap: 10px;
}

.site-home .colo-tag {
  max-width: 14em;
  font-family: var(--disp-cjk);
  font-size: clamp(25px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.55;
}

.site-home .colo-meta {
  color: var(--ink-38);
  font-size: 10px;
}

.site-home .colo-meta .row {
  padding: 11px 0;
  border-color: var(--hair-2);
}

.site-home .colo-meta .row span:first-child {
  font-size: 9px;
}

.site-home .colo-fine {
  color: var(--ink-38);
  font-size: 9px;
}

/* Customization */

body.site-customize {
  min-height: 100vh;
  color: #e9e5dc;
  background: #10110f;
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  letter-spacing: .01em;
}

.site-customize .top {
  width: min(1240px, 100%);
  height: 82px;
  margin: 0 auto;
  padding: 0 clamp(22px, 4vw, 54px);
  border-color: rgba(233, 229, 220, .09);
}

.site-customize .brand {
  gap: 10px;
}

.site-customize .seal {
  width: 8px;
  height: 8px;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  background: #b48a66;
}

.site-customize .brand-name {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
}

.site-customize .back {
  color: rgba(233, 229, 220, .38);
  font-size: 10px;
  letter-spacing: .08em;
}

.site-customize .back:hover {
  color: rgba(233, 229, 220, .78);
}

.site-customize .layout {
  width: min(1240px, 100%);
  min-height: calc(100vh - 82px);
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.42fr);
}

.site-customize .intro {
  padding: clamp(62px, 8vw, 108px) clamp(30px, 5vw, 70px);
  border-color: rgba(233, 229, 220, .1);
}

.site-customize .intro-inner {
  top: 56px;
}

.site-customize .chapter,
.site-customize .phase,
.site-customize .step-no {
  color: #b48a66;
  font-family: "Noto Sans SC", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .16em;
}

.site-customize .chapter {
  margin-bottom: 32px;
  font-size: 10px;
}

.site-customize .intro h1 {
  max-width: 8em;
  color: #ede8de;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.48;
  letter-spacing: .03em;
}

.site-customize .intro h1 em {
  color: inherit;
}

.site-customize .intro-copy {
  max-width: 25em;
  margin-top: 32px;
  color: rgba(233, 229, 220, .45);
  font-size: 12px;
  line-height: 2;
}

.site-customize .promise {
  margin-top: 64px;
  padding-top: 18px;
  color: rgba(233, 229, 220, .26);
  border-color: rgba(233, 229, 220, .1);
  font-size: 10px;
  letter-spacing: .05em;
}

.site-customize .vertical {
  display: none;
}

.site-customize .work {
  padding: clamp(58px, 7vw, 100px) clamp(28px, 6vw, 84px) 64px;
}

.site-customize .progress-row {
  margin-bottom: clamp(58px, 7vw, 92px);
}

.site-customize .phase,
.site-customize .counter {
  font-size: 9px;
}

.site-customize .counter {
  color: rgba(233, 229, 220, .26);
}

.site-customize .track {
  background: rgba(233, 229, 220, .1);
}

.site-customize .track span {
  background: #b48a66;
}

.site-customize .step-no {
  margin-bottom: 22px;
  font-size: 9px;
}

.site-customize .step h2,
.site-customize .contract-head h2 {
  max-width: 15em;
  color: #ede8de;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: .025em;
}

.site-customize .hint {
  max-width: 42em;
  margin: 18px 0 38px;
  color: rgba(233, 229, 220, .4);
  font-size: 12px;
  line-height: 1.9;
}

.site-customize .group-label {
  color: rgba(233, 229, 220, .26);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .15em;
}

.site-customize .question-input,
.site-customize .boundary-input {
  color: #ede8de;
  border-color: rgba(233, 229, 220, .18);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 300;
}

.site-customize textarea::placeholder {
  color: rgba(233, 229, 220, .2);
}

.site-customize .choices {
  gap: 9px;
  margin-top: 28px;
}

.site-customize .choice {
  min-height: 108px;
  padding: 20px;
  color: #e9e5dc;
  background: transparent;
  border-color: rgba(233, 229, 220, .13);
  border-radius: 1px;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.site-customize .choice:hover {
  border-color: rgba(180, 138, 102, .7);
  transform: none;
}

.site-customize .choice.selected {
  color: #161714;
  background: #e6dfd3;
  border-color: #e6dfd3;
}

.site-customize .choice b {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 15px;
  font-weight: 400;
}

.site-customize .choice span {
  color: rgba(233, 229, 220, .38);
  font-size: 11px;
  line-height: 1.8;
}

.site-customize .choice.selected span {
  color: rgba(22, 23, 20, .52);
}

.site-customize .compact .choice {
  min-height: 84px;
}

.site-customize .flavor-stack {
  gap: 8px;
}

.site-customize .flavor-note {
  margin-top: 36px;
  padding: 15px 0;
  color: rgba(233, 229, 220, .34);
  background: transparent;
  border-color: #b48a66;
  font-size: 10px;
}

.site-customize .time-field {
  border-color: rgba(233, 229, 220, .18);
}

.site-customize .time-field label {
  color: rgba(233, 229, 220, .28);
  font-size: 9px;
}

.site-customize .time-field input {
  color: #e9e5dc;
  font-family: "Instrument Serif", serif;
}

.site-customize .actions {
  margin-top: 56px;
  border-color: rgba(233, 229, 220, .09);
}

.site-customize .btn {
  border-radius: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
}

.site-customize .btn:hover {
  transform: none;
}

.site-customize .btn-primary {
  padding: 12px 22px;
  color: #151613;
  background: #e9e5dc;
}

.site-customize .btn-primary:hover {
  background: #d5c8b8;
}

.site-customize .btn-back {
  color: rgba(233, 229, 220, .4);
}

.site-customize .error {
  color: #c2926a;
  font-size: 11px;
}

.site-customize .contract-seal {
  width: 48px;
  height: 48px;
  color: #b48a66;
  border-color: #b48a66;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 20px;
  font-weight: 400;
}

.site-customize .contract-lede,
.site-customize .privacy {
  color: rgba(233, 229, 220, .36);
  font-size: 11px;
}

.site-customize .contract {
  background: transparent;
  border-color: rgba(233, 229, 220, .13);
}

.site-customize .contract-row {
  border-color: rgba(233, 229, 220, .08);
}

.site-customize .contract-row dt {
  color: rgba(233, 229, 220, .26);
  font-size: 9px;
}

.site-customize .contract-row dd {
  color: rgba(233, 229, 220, .72);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 14px;
  font-weight: 300;
}

.site-customize .original-question {
  color: #b48a66;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 18px;
  font-weight: 300;
}

.site-customize .btn-outline {
  color: rgba(233, 229, 220, .65);
  background: transparent;
  border-color: rgba(233, 229, 220, .18);
}

.site-customize button:focus-visible,
.site-customize textarea:focus-visible,
.site-customize input:focus-visible,
.site-customize a:focus-visible {
  outline-color: #b48a66;
}

@media (max-width: 1000px) {
  .site-home .hero-lower {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  .site-home .hero-lower > div {
    max-width: 520px;
  }

  .site-home .plate-row {
    gap: 64px;
  }

  .site-home .princ .item {
    min-height: 0;
    padding: 30px 0;
  }

  .site-home .journey-step {
    min-height: 0;
    padding: 28px 0;
  }

  .site-home .journey-step h3 {
    margin-top: 20px;
  }
}

@media (max-width: 820px) {
  .site-home .top-in {
    padding-top: 20px;
  }

  .site-home .brand .name span {
    display: none;
  }

  .site-home .hero {
    min-height: auto;
    padding-top: 132px;
  }

  .site-home .hero h1 {
    font-size: clamp(43px, 12vw, 72px);
  }

  .site-home .plate-row {
    grid-template-columns: 1fr;
  }

  .site-home .plate-fig {
    order: 2;
  }

  .site-home .voice {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }

  .site-home .pull-by {
    grid-column: 1;
    margin-top: 0;
  }

  .site-home .colo-main {
    grid-template-columns: 1fr;
  }

  .site-customize .top {
    height: 70px;
  }

  .site-customize .layout {
    display: block;
    min-height: 0;
  }

  .site-customize .intro {
    padding: 44px 24px 46px;
    border-right: 0;
    border-bottom: 1px solid rgba(233, 229, 220, .1);
  }

  .site-customize .intro-inner {
    position: static;
  }

  .site-customize .intro h1 {
    max-width: 10em;
    font-size: clamp(34px, 9vw, 48px);
  }

  .site-customize .promise {
    margin-top: 30px;
  }

  .site-customize .work {
    padding: 44px 24px 56px;
  }
}

@media (max-width: 560px) {
  .site-home .controls {
    gap: 9px;
  }

  .site-home .start-link {
    font-size: 10px;
  }

  .site-home .switches {
    opacity: .3;
  }

  .site-home .hero-lower {
    margin-top: 46px;
  }

  .site-home .specline .dot {
    display: none;
  }

  .site-home .specline {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-home section.spread:not(.hero) {
    padding: 92px 0;
  }

  .site-home .plates figure,
  .site-home .p-lead {
    margin-bottom: 48px;
  }

  .site-customize .choices,
  .site-customize .choices.three,
  .site-customize .time-grid {
    grid-template-columns: 1fr;
  }

  .site-customize .choice {
    min-height: 0;
  }
}