/* Contact page — KOSA 风格复刻组合页
   结构：hero 拼贴 → education（Tokyo 区）→ 联系方式卡片（Kosa Experience）→ 黑色 footer
   布局坐标取自原站 Squarespace Fluid Engine 网格（桌面 24 列 / 移动 8 列）。 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@font-face { font-family: "tiktok"; src: url("/fonts/TikTokSans.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "tronica-mono"; src: url("/fonts/DepartureMono-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

:root {
  --ink: #141414;
  --pixel: 'DotGothic16', 'Courier New', monospace;
  --mono: 'tronica-mono', monospace;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
}

body.contact-page {
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-top: 72px;
}
img { user-select: none; -webkit-user-drag: none; }

/* Homepage navigation chrome. */
.site-header {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: transparent;
  pointer-events: none;
}

.site-header__top,
.site-header__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
}

.site-header a,
.site-clock {
  position: relative;
  padding: 8px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  pointer-events: auto;
}

.site-brand {
  font-family: "tiktok", sans-serif;
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 120;
}

.site-links {
  display: flex;
  flex: 0 0 50%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 8px;
  pointer-events: auto;
}

.site-brand::before,
.site-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px dotted transparent;
  pointer-events: none;
  transition: border-color .2s;
}

.site-header a:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}

@media (hover: hover) and (min-width: 1024px) {
  .site-brand:hover::before,
  .site-links a:hover::before { border-color: currentColor; }
}

@media (min-width: 1280px) {
  .site-links { flex-basis: 33.333333%; }
}

@media (max-width: 1023px) {
  .site-header__top,
  .site-header__bottom { padding: 16px; }
  .site-links { display: none; }
}

/* ================= HERO ================= */
.hero { background: #fff; overflow: hidden; }
.hero-canvas {
  position: relative;
  width: min(1500px, 92vw);
  margin: 0 auto;
  height: max(calc(100svh - 107px), calc(min(1500px, 92vw) * 0.6));
  container-type: inline-size;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero {
    margin-top: min(0px, calc(100svh - 109px - max(calc(100svh - 107px), calc(min(1500px, 92vw) * .6))));
  }
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hb {
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w); height: var(--h);
  z-index: var(--z);
  transform-origin: center;
}
.hb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-memo-text {
  position: absolute;
  left: 68%; top: 33%;
  width: 20%; height: 30%;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: 1.18cqw/1.6 var(--mono);
}
.ticker {
  position: relative;
  z-index: 45;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: #fff;
}
.ticker-track {
  display: flex;
  width: max-content;
  padding: 8px 0;
  font: 13px var(--pixel);
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
}
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ================= EDUCATION ================= */
.edu { background: #f6f3e6; }
.edu-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 635;
  background: url('/contact/assets/edu-bg.webp') center / cover no-repeat;
  container-type: inline-size;
  overflow: hidden;
}
.edu-quote {
  position: absolute;
  left: 50%; top: 10%;
  width: 100%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
  font: 5.3cqw/1.2 var(--serif);
  color: rgba(210,207,190,.43);
}
.edu-star, .edu-arc, .edu-tower { position: absolute; display: block; }
.edu-star { left: 22%; top: 5%; width: 5%; z-index: 2; }
.edu-arc { left: 20%; top: 0; width: 45%; height: 58%; object-fit: fill; }
.edu-text {
  position: absolute;
  left: 12%; bottom: 15%;
  width: 37%;
  z-index: 3;
  color: var(--ink);
}
.edu-school { font-family: var(--sans); }
.edu-school h2 { font-size: clamp(21px, 1.9cqw, 31px); font-weight: 700; line-height: 1.2; }
.edu-school ul { margin-top: .55em; padding-left: 1.15em; list-style: disc; font-size: clamp(15.5px, 1.3cqw, 20.5px); line-height: 1.5; }
.edu-school li + li { margin-top: .18em; }
.edu-tower { left: 61%; bottom: 6%; height: 52%; z-index: 3; }
.edu-story {
  position: relative;
  width: 100%;
  height: max(47vw, 540px);
  background: url('/contact/assets/edu-bg.webp') center / cover no-repeat;
  container-type: inline-size;
  overflow: hidden;
}
.edu-story-arc, .edu-story-fuji, .edu-story-star {
  position: absolute;
  display: block;
}
.edu-story-arc { left: 26%; top: 0; width: 36%; height: 53%; object-fit: fill; }
.edu-story-fuji { left: 15%; top: 26%; width: 28%; }
.edu-story-text { position: absolute; left: 52%; top: 44%; width: 45%; z-index: 2; }
.edu-story-text h2, .edu-story-text li {
  background: transparent;
  width: fit-content;
  padding: 0 .08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.edu-story-star { left: 83%; bottom: 8%; width: 7%; }

/* ================= CONTACT CARDS ================= */
.channels {
  background: url('/contact/assets/exp-bg.webp') repeat;
  background-size: 900px;
  padding: 5.5vw 6vw 6.5vw;
}
.channels-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.channels-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 40px);
  color: var(--ink);
  letter-spacing: .01em;
}
.channels-title strong { font-weight: 700; }
.channels-more {
  font: 13px var(--pixel);
  letter-spacing: .05em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
  padding: 8px 14px;
  white-space: nowrap;
  text-decoration: none;
}
.channels-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.2%;
  margin-top: 3.5vw;
}
.ch-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio: .78;
  border: 1px solid rgba(20,20,20,.55);
  border-radius: 6px;
  padding: 9% 7% 8%;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transition: transform .25s ease;
}
.ch-card:hover { transform: translateY(-6px); }
.ch-card--purple { background: #d17cfe; }
.ch-card--orange { background: #fecb94; }
.ch-card--sage { background: #cdeae5; }
.ch-card--mint { background: #7bffd5; }
.ch-label {
  position: absolute;
  top: 7%;
  font: clamp(13px,1.1vw,17px) var(--pixel);
  letter-spacing: .06em;
}
.ch-circle {
  display: block;
  width: 84%;
  aspect-ratio: 1;
  margin-top: 17%;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.ch-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-circle--github { display: grid; place-items: center; }
.ch-circle--github img { width: 82%; height: 82%; object-fit: contain; }
.ch-circle--rednote { display: grid; place-items: center; }
.ch-circle--rednote img { width: 82%; height: 82%; object-fit: contain; }
.ch-circle--wechat { display: grid; place-items: center; }
.ch-circle--wechat img { width: 72%; height: 72%; object-fit: contain; }
.ch-circle--copy {
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: transform .2s ease;
}
.ch-circle--copy:hover { transform: scale(.97); }
.ch-circle--copy:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.ch-star {
  position: absolute;
  left: 5%; top: 67%;
  width: 21%;
  transform-origin: center;
}
.copy-toast {
  position: fixed;
  left: 50%; bottom: 28px;
  z-index: 200;
  transform: translate(-50%, 16px);
  padding: 10px 18px;
  border: 1px solid #fff;
  background: #181818;
  color: #fff;
  font: 14px var(--pixel);
  letter-spacing: .04em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.copy-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ch-star--01.is-animated { animation: ch-star-bounce 2.5s infinite; }
.ch-star--02.is-animated { animation: ch-star-sway 1.5s ease-in-out infinite alternate; }
.ch-star--03.is-animated { animation: ch-star-float 2s ease-in-out infinite alternate; }
.ch-star--04.is-animated { animation: ch-star-spin 12s linear infinite; }
@keyframes ch-star-bounce {
  0%, 100% { transform: none; }
  22% { transform: translateY(-22%) scale(1.18); }
  40% { transform: translateY(4%) scale(1.25); }
  58% { transform: translateY(-7%) scale(1.08); }
  76% { transform: translateY(1%) scale(1.02); }
}
@keyframes ch-star-sway {
  from { transform: translateX(-12px); }
  to { transform: translateX(calc(12px + 10%)) skew(5deg,5deg) scale(1.0625); }
}
@keyframes ch-star-float { from { transform: none; } to { transform: translate(-7px,5%) scale(1.125); } }
@keyframes ch-star-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg) scale(1.25); } }

/* ================= FOOTER ================= */
.footer { background: #181818; color: #fff; }
.footer-canvas {
  position: relative;
  width: 100%;
  height: clamp(220px, 24vw, 320px);
  margin: 0 auto;
  overflow: hidden;
}
.ft-rainbow { position: absolute; display: block; left: 43%; bottom: 14%; width: 14%; }
.ft-legal { position: absolute; left: 2%; bottom: 7%; font: clamp(10px, .8vw, 12px)/1.6 var(--mono); color: rgba(255,255,255,.58); }

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-canvas { height: max(670px, calc(92vw * .6)); }
  .channels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ch-card { aspect-ratio: .86; }
}

/* ================= 移动端 ================= */
@media (max-width: 767px) {
  /* The source mobile collage uses 38 rows, with a 24px minimum row height. */
  .hero-canvas { width: 94vw; height: max(1032px, calc(94vw * 2.82)); }

  .hb {
    left: var(--ml); top: var(--mt);
    width: var(--mw); height: var(--mh);
  }

  .hero-memo-text {
    left: 25%; top: 23.7%;
    width: 62.5%; height: 26.3%;
    font-size: 2.5cqw;
  }

  .ticker-track { font-size: 11px; }

  .edu-canvas { aspect-ratio: 1 / 1.3; }
  .edu-quote { font-size: 6.5cqw; top: 7%; }
  .edu-star { left: 12%; width: 9%; top: 3%; }
  .edu-arc { left: 10%; width: 45%; }
  .edu-text {
    left: 6%; bottom: 9%;
    width: 51%;
  }
  .edu-school h2 { font-size: 4.85cqw; }
  .edu-school ul { font-size: 3.65cqw; }
  .edu-tower { left: 64%; height: 34%; bottom: 8%; }
  .edu-story { height: max(145vw, 560px); }
  .edu-story-arc { left: 3%; top: 0; width: 89%; height: 32%; }
  .edu-story-fuji { left: -8%; top: 22%; width: 76%; }
  .edu-story-text { left: 6%; top: 52%; width: 88%; }
  .edu-story-star { left: 55%; bottom: 2%; width: 23%; }

  .channels { padding: 10vw 6vw 14vw; }
  .channels-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .channels-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 8vw; }
  .ch-card { aspect-ratio: .9; }
  .ch-label { top: 8%; font-size: 16px; }
  .ch-circle,
  .ch-card:first-child .ch-circle,
  .ch-card:last-child .ch-circle { width: 70%; margin-top: 22%; }
  .ch-star { top: 68%; }
  .ch-star--01, .ch-star--03 { left: -3%; }
  .ch-star--02, .ch-star--04 { right: -3%; left: auto; }
  .ch-star--02.is-animated, .ch-star--04.is-animated { animation: none; }

  .footer-canvas { height: 300px; }
  .ft-rainbow { left: 28.7%; bottom: 18%; width: 42.6%; }
  .ft-legal { left: 6%; bottom: 6%; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ch-card { transition: none; }
  .ch-star.is-animated { animation: none; }
  .hb, .hb img { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; }
}