:root {
  --cream: #fffaf1;
  --cream-deep: #f6e8d6;
  --apricot: #f3d0ae;
  --terracotta: #c75a2b;
  --terracotta-deep: #a84423;
  --coffee: #3d2922;
  --muted: #806b60;
  --mist: #dcebf1;
  --mist-deep: #7d9dac;
  --mist-ink: #496978;
  --sage: #dfe9d7;
  --sage-ink: #5f7358;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  color: var(--coffee);
  background:
    radial-gradient(circle at 14% 8%, rgba(245, 194, 145, .22), transparent 24rem),
    radial-gradient(circle at 88% 9%, rgba(201, 226, 235, .52), transparent 28rem),
    linear-gradient(160deg, #fffdf8 0%, var(--cream) 52%, #f5eee5 100%);
  font-family: var(--serif);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .22;
  pointer-events: none;
  background-image: radial-gradient(rgba(115, 83, 62, .18) .55px, transparent .55px);
  background-size: 5px 5px;
}

button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(62, 111, 137, .56);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--coffee);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.card-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 34px) 150px;
  overflow: hidden;
}

.route {
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 150px;
  border: 2px dashed rgba(217, 116, 52, .34);
  border-color: rgba(217, 116, 52, .34) transparent transparent transparent;
  border-radius: 50%;
  pointer-events: none;
}
.route-left { left: -155px; top: 168px; transform: rotate(22deg); }
.route-right { right: -165px; top: 270px; transform: rotate(-24deg); }

.card-header { position: relative; text-align: center; }
.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 5px 16px 5px 6px;
  border: 1px solid rgba(199, 90, 43, .22);
  border-radius: 999px;
  background: rgba(255, 248, 237, .9);
  box-shadow: 0 11px 27px rgba(103, 70, 50, .09);
  text-align: left;
  text-decoration: none;
}
.brand-pill img { display: block; width: 48px; height: 48px; object-fit: contain; }
.brand-pill span { display: grid; gap: 3px; }
.brand-pill strong { font-size: 18px; letter-spacing: .15em; line-height: 1; }
.brand-pill small { color: #69554c; font: 700 7px/1 var(--sans); letter-spacing: .21em; }

.share-card {
  position: absolute;
  top: 4px;
  right: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(92, 135, 154, .25);
  border-radius: 50%;
  color: var(--mist-ink);
  background: rgba(255, 253, 247, .86);
  box-shadow: 0 10px 24px rgba(74, 98, 108, .09);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.share-card:hover { transform: translateY(-2px); box-shadow: 0 13px 29px rgba(74, 98, 108, .15); }
.share-card svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.profile-mark { position: relative; width: 124px; height: 124px; margin: 42px auto 19px; }
.profile-glow { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(239, 173, 92, .3), rgba(239, 173, 92, .08) 48%, transparent 70%); animation: breathe 4.2s ease-in-out infinite; }
.profile-mark img { position: relative; display: block; width: 124px; height: 124px; padding: 7px; border: 1px solid rgba(199, 90, 43, .25); border-radius: 50%; object-fit: cover; background: rgba(255,250,242,.9); box-shadow: 0 18px 42px rgba(111, 74, 47, .13); }

@keyframes breathe { 50% { transform: scale(1.08); opacity: .68; } }

.card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin: 0 0 11px;
  color: #9a6f55;
  font: 700 9px/1 var(--sans);
  letter-spacing: .2em;
}
.card-eyebrow span { width: 30px; height: 1px; background: rgba(199, 90, 43, .4); }
.card-header h1 { margin: 0; font-size: clamp(31px, 6vw, 43px); letter-spacing: .08em; line-height: 1.25; }
.profile-subtitle { margin: 9px 0 0; color: var(--terracotta-deep); font: 700 14px/1.5 var(--sans); letter-spacing: .1em; }
.profile-intro { max-width: 520px; margin: 19px auto 0; color: var(--muted); font-size: 16px; line-height: 1.85; }

main { display: grid; gap: 18px; margin-top: 35px; }
.link-section, .social-section, .explore-mini, .updates-card {
  border: 1px solid rgba(170, 101, 61, .2);
  border-radius: 28px;
  background: rgba(255, 252, 245, .82);
  box-shadow: 0 20px 50px rgba(95, 66, 45, .09), inset 0 0 0 3px rgba(255,255,255,.38);
}
.link-section, .social-section { padding: 25px 22px 22px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 17px; padding: 0 4px 15px; border-bottom: 1px solid rgba(157, 105, 73, .16); }
.section-heading p, .updates-card p { margin: 0 0 5px; color: #9d715a; font: 700 9px/1 var(--sans); letter-spacing: .2em; }
.section-heading h2, .updates-card h2 { margin: 0; font-size: 23px; letter-spacing: .06em; }
.section-heading > span { color: var(--terracotta); font-size: 28px; }
.instagram-mark { width: 27px; height: 27px; fill: none; stroke: var(--terracotta); stroke-width: 1.6; }

.primary-links { display: grid; gap: 12px; }
.site-link {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(177, 105, 67, .16);
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(249,230,208,.62));
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-link::after { position: absolute; content: ""; right: -20px; bottom: -40px; width: 118px; height: 78px; border-radius: 50%; background: rgba(226, 145, 87, .11); pointer-events: none; }
.site-link:hover { transform: translateY(-2px); border-color: rgba(177, 105, 67, .32); box-shadow: 0 12px 24px rgba(88, 64, 50, .08); }
.link-store { background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(245,221,197,.62)); }
.link-tools { border-color: rgba(92,135,154,.2); background: linear-gradient(135deg, rgba(251,254,255,.9), rgba(216,235,242,.75)); }
.link-tools::after { background: rgba(102, 151, 173, .12); }
.link-portfolio { border-color: rgba(95,115,88,.18); background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(223,233,215,.75)); }
.link-portfolio::after { background: rgba(103, 132, 94, .1); }
.link-index { position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; width: 64px; height: 64px; border: 1px solid rgba(168, 100, 60, .16); border-radius: 18px; color: #a95f3a; background: rgba(255,255,255,.62); }
.link-index b { font: 500 23px/1.05 var(--serif); letter-spacing: .04em; }
.link-index i { margin-top: 5px; font: normal 700 7px/1 var(--sans); letter-spacing: .16em; }
.link-store .link-index { color: #9d6545; background: rgba(255,250,242,.7); }
.link-tools .link-index { border-color: rgba(92,135,154,.2); color: var(--mist-ink); background: rgba(248,253,255,.78); }
.link-portfolio .link-index { border-color: rgba(95,115,88,.2); color: var(--sage-ink); background: rgba(251,253,248,.78); }
.link-copy { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 0; }
.link-copy small { color: #a46c4f; font: 700 8px/1 var(--sans); letter-spacing: .17em; }
.link-tools .link-copy small { color: var(--mist-ink); }
.link-portfolio .link-copy small { color: var(--sage-ink); }
.link-copy strong { overflow: hidden; font-size: 18px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.link-copy em { overflow: hidden; color: var(--muted); font: normal 13px/1.45 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.link-arrow { position: relative; z-index: 1; width: 24px; height: 24px; fill: none; stroke: var(--terracotta-deep); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.site-link:hover .link-arrow { transform: translateX(3px); }
.link-tools .link-arrow { stroke: var(--mist-ink); }
.link-portfolio .link-arrow { stroke: var(--sage-ink); }

.updates-card { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 17px; padding: 23px; }
.updates-light { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle, rgba(247,190,93,.5), rgba(247,190,93,.12) 50%, transparent 72%); }
.updates-light i { position: relative; width: 26px; height: 36px; border: 2px solid #c76a36; border-radius: 45% 45% 34% 34%; background: rgba(255,244,211,.72); }
.updates-light i::after { position: absolute; content: ""; left: 5px; right: 5px; bottom: -6px; height: 6px; border-radius: 0 0 4px 4px; background: #a65c3d; }
.updates-card h2 { font-size: 20px; }
.updates-card div:nth-child(2) > span { display: block; margin-top: 5px; color: var(--muted); font: 13px/1.55 var(--sans); }
.updates-card > a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 0 17px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #d57843, #b44b28); box-shadow: 0 10px 20px rgba(175,77,40,.17); font: 700 13px/1 var(--sans); text-decoration: none; white-space: nowrap; }

.explore-mini { padding: 25px 22px 22px; border-color: rgba(92,135,154,.2); background: rgba(245,251,252,.78); }
.explore-mini-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.explore-mini-links a { display: grid; grid-template-columns: 48px 1fr 18px; align-items: center; gap: 11px; min-height: 76px; padding: 12px; border: 1px solid rgba(92,135,154,.15); border-radius: 18px; background: rgba(255,255,255,.68); text-decoration: none; transition: transform .2s ease, background .2s ease; }
.explore-mini-links a:hover { transform: translateY(-2px); background: rgba(255,255,255,.92); }
.explore-mini-links img { display: block; width: 48px; height: 48px; padding: 3px; border-radius: 15px; object-fit: contain; background: #fff; }
.explore-mini-links span { display: grid; gap: 4px; min-width: 0; }
.explore-mini-links small { color: var(--muted); font: 11px/1.3 var(--sans); }
.explore-mini-links strong { font-size: 14px; line-height: 1.35; }
.explore-mini-links b { color: var(--mist-ink); font: 400 17px/1 var(--sans); }

.social-section { border-color: rgba(92,135,154,.2); background: rgba(245,251,252,.78); }
.social-section .section-heading h2 { font-size: 21px; letter-spacing: .035em; }
.social-links { display: grid; gap: 16px; }
.social-links .ig-corner { display: flex; flex-direction: column; min-height: 240px; padding: 27px 23px 24px; border: 1px solid rgba(177,105,67,.18); border-radius: 22px; background: rgba(255,248,242,.75); text-align: center; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.social-links .ig-corner:hover { transform: translateY(-2px); background: rgba(255,255,255,.92); box-shadow: 0 12px 25px rgba(84,63,51,.08); }
.ig-corner.ig-drawing { border-color: rgba(92,135,154,.22); background: rgba(239,248,251,.78); }
.ig-corner.ig-lenormand { border-color: rgba(160,124,78,.2); background: rgba(249,245,236,.84); }
.ig-corner-heading { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ig-corner-heading img { display: block; width: 58px; height: 58px; padding: 3px; border-radius: 50%; object-fit: cover; background: #fff; }
.ig-corner-heading strong { font-size: 18px; line-height: 1.5; }
.ig-corner p { flex: 1; width: 100%; max-width: 280px; margin: 18px auto 22px; color: var(--muted); font-size: 14px; line-height: 1.85; text-align: center; }
.ig-handle { display: flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; margin: 0 auto; padding: 10px 13px; border-radius: 999px; color: #9c6348; background: rgba(255,255,255,.58); font: 13px/1 var(--sans); }
.ig-drawing .ig-handle { color: var(--mist-ink); }
.ig-lenormand .ig-handle { color: #806243; }
.ig-handle b { font-weight: 400; }

.card-footer { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; margin-top: 68px; text-align: center; }
.footer-light { position: relative; width: 44px; height: 49px; margin-bottom: 4px; }
.footer-light::before { position: absolute; content: ""; inset: -13px; border-radius: 50%; background: radial-gradient(circle, rgba(244,186,91,.42), transparent 70%); }
.footer-light i { position: absolute; left: 9px; top: 2px; width: 27px; height: 34px; border: 2px solid #c76a36; border-radius: 45% 45% 34% 34%; background: rgba(255,244,211,.75); }
.footer-light i::after { position: absolute; content: ""; left: 5px; right: 5px; bottom: -7px; height: 7px; border-radius: 0 0 5px 5px; background: #a65c3d; }
.card-footer p { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: .12em; }
.card-footer p span { margin-left: 5px; color: var(--muted); font: 700 8px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.card-footer small { color: var(--muted); font-size: 12px; letter-spacing: .04em; }

.coast-scene { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; }
.coast-scene i { position: absolute; left: -8%; width: 116%; border-radius: 50% 50% 0 0; }
.coast-scene i:first-child { bottom: -52px; height: 105px; background: rgba(241,197,154,.5); transform: rotate(-1deg); }
.coast-scene i:nth-child(2) { bottom: -75px; height: 120px; background: rgba(233,212,179,.62); transform: rotate(1.5deg); }
.coast-scene span, .coast-scene b { position: absolute; left: -5%; width: 110%; height: 38px; border-top: 4px solid rgba(104,164,192,.55); border-radius: 50%; }
.coast-scene span { bottom: 27px; transform: rotate(.6deg); }
.coast-scene b { bottom: 9px; left: 4%; border-top-width: 3px; opacity: .62; transform: rotate(-.8deg); }

@media (min-width: 900px) {
  .card-stage {
    width: min(calc(100% - 56px), 1240px);
    min-height: calc(100svh - 56px);
    margin-block: 28px;
    padding: 34px clamp(38px, 5vw, 68px) 170px;
    border: 1px solid rgba(178, 108, 66, .18);
    border-radius: 42px;
    background: rgba(255, 252, 245, .6);
    box-shadow: 0 32px 90px rgba(76, 54, 42, .13), inset 0 0 0 5px rgba(255,255,255,.38);
  }

  .card-header { max-width: 820px; margin-inline: auto; }
  .profile-mark { margin-top: 38px; }
  main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 46px; }
  .link-section, .social-section { grid-column: 1 / -1; padding: 30px; }
  .section-heading { margin-bottom: 22px; padding-bottom: 18px; }
  .primary-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .site-link { grid-template-columns: 72px minmax(0, 1fr) 28px; gap: 18px; min-height: 124px; padding: 20px; }
  .link-index { width: 72px; height: 72px; border-radius: 21px; }
  .link-index b { font-size: 27px; }
  .link-copy { gap: 6px; }
  .link-copy strong { font-size: 20px; }
  .link-copy em { font-size: 14px; }

  .updates-card, .explore-mini { min-height: 270px; }
  .updates-card { grid-template-columns: 70px 1fr; grid-template-rows: 1fr auto; align-content: center; gap: 18px 20px; padding: 32px; }
  .updates-light { width: 70px; height: 70px; }
  .updates-card h2 { font-size: 24px; }
  .updates-card div:nth-child(2) > span { max-width: 360px; margin-top: 10px; font-size: 14px; line-height: 1.75; }
  .updates-card > a { grid-column: 1 / -1; justify-self: center; min-height: 46px; margin-left: 0; padding-inline: 22px; }

  .explore-mini { padding: 30px; }
  .explore-mini-links { grid-template-columns: 1fr; gap: 12px; }
  .explore-mini-links a { min-height: 80px; padding-inline: 16px; }

  .social-section { padding-bottom: 32px; }
  .social-links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .social-links .ig-corner { min-height: 300px; padding: 32px 27px 28px; }
  .ig-corner-heading { gap: 16px; }
  .ig-corner-heading img { width: 64px; height: 64px; }
  .ig-corner-heading strong { font-size: 19px; }
  .ig-corner p { margin: 22px auto 25px; font-size: 14px; line-height: 1.9; }
  .ig-handle { align-self: center; padding: 11px 14px; }
  .card-footer { margin-top: 130px; }
}

.share-status { position: fixed; z-index: 90; left: 50%; bottom: 24px; max-width: calc(100% - 32px); padding: 11px 17px; border-radius: 999px; color: #fff; background: rgba(61,41,34,.92); box-shadow: 0 14px 34px rgba(48,34,27,.25); font: 700 13px/1.4 var(--sans); opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: opacity .2s ease, transform .2s ease; }
.share-status.is-visible { opacity: 1; transform: translate(-50%, 0); }

.page-jump {
  position: fixed;
  z-index: 80;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  display: grid;
  gap: 9px;
}
.page-jump a {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(167, 99, 61, .34);
  border-radius: 50%;
  color: var(--terracotta-deep);
  background: rgba(255, 250, 241, .9);
  box-shadow: 0 12px 28px rgba(84, 57, 43, .14);
  backdrop-filter: blur(10px);
  font: 700 9px/1 var(--sans);
  letter-spacing: .12em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.page-jump a[hidden] { display: none; }
.page-jump a:hover { transform: translateY(-2px); background: #fffdf8; box-shadow: 0 15px 32px rgba(84, 57, 43, .18); }
.page-jump svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.page-jump span { margin-left: .12em; }

@media (max-width: 899px) {
  .page-jump { display: none; }
}

@media (max-width: 560px) {
  .card-stage { padding: 18px 14px 135px; }
  .brand-pill { min-height: 52px; padding: 4px 12px 4px 5px; }
  .brand-pill img { width: 43px; height: 43px; }
  .brand-pill strong { font-size: 16px; }
  .share-card { width: 46px; height: 46px; }
  .profile-mark { width: 108px; height: 108px; margin-top: 37px; }
  .profile-mark img { width: 108px; height: 108px; }
  .card-header h1 { font-size: clamp(28px, 8vw, 35px); }
  .profile-intro { padding-inline: 14px; font-size: 15px; }
  main { margin-top: 29px; }
  .link-section, .social-section { padding: 22px 14px 15px; border-radius: 25px; }
  .section-heading { padding-inline: 5px; }
  .site-link { grid-template-columns: 58px minmax(0, 1fr) 22px; column-gap: 16px; row-gap: 0; min-height: 90px; padding: 12px; }
  .link-index { width: 58px; height: 58px; border-radius: 16px; }
  .link-index b { font-size: 22px; }
  .link-copy strong { font-size: 16px; }
  .link-copy em { font-size: 12px; }
  .updates-card { grid-template-columns: 52px 1fr; padding: 20px 17px; }
  .updates-light { width: 52px; height: 52px; }
  .updates-card > a { grid-column: 1 / -1; width: 100%; min-height: 48px; }
  .explore-mini { padding: 22px 14px 15px; }
  .explore-mini-links { grid-template-columns: 1fr; }
  .social-links { gap: 18px; }
  .social-links .ig-corner { min-height: 264px; padding: 27px 20px 25px; }
  .ig-corner-heading { gap: 13px; }
  .ig-corner-heading img { width: 58px; height: 58px; }
  .ig-corner p { max-width: 255px; margin-block: 18px 23px; line-height: 1.9; }
  .social-section .section-heading h2 { font-size: 19px; letter-spacing: .015em; }
  .ig-handle { margin-inline: auto; }
  .page-jump { right: max(12px, env(safe-area-inset-right)); bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); gap: 7px; }
  .page-jump a { width: 51px; height: 51px; font-size: 8px; }
  .page-jump svg { width: 17px; height: 17px; }
}

@media (max-width: 370px) {
  .link-copy em { white-space: normal; }
  .site-link { grid-template-columns: 52px minmax(0, 1fr) 18px; column-gap: 13px; }
  .link-index { width: 52px; height: 52px; }
  .link-index b { font-size: 20px; }
  .card-eyebrow { font-size: 8px; letter-spacing: .14em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}