/* B 海報: the iOS 17 Contact Poster. The whole page is the avatar clip's ground, the name is set poster-size
   beside the avatar, and the links are glass pills on that colour. The ground is already dark, so dark mode
   keeps it and only deepens the glass. */
:root {
  color-scheme: dark;
  --bg: #1D4335;              /* = the avatar clip's ground */
  --text: #F3F0E8;
  --text-2: rgba(243, 240, 232, .74);
  --accent: #F4D96C;          /* icons only */
  --solid: #F3F0E8;           /* the one solid button */
  --on-solid: #1D4335;
  --surface: rgba(255, 255, 255, .09);
  --edge: rgba(255, 255, 255, .13);
  --press: rgba(255, 255, 255, .16);
  --ring: rgba(243, 240, 232, .55);
  --glow: .38;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: rgba(0, 0, 0, .18);
    --edge: rgba(255, 255, 255, .1);
    --solid: #E9E4D6;
    --glow: .26;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  position: relative;
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  isolation: isolate;
  overflow-x: hidden;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.glow { position: absolute; inset: 0 0 auto; height: 520px; overflow: hidden; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
/* the glow sits behind the avatar: 40px left of its centre, wherever the 420px column is (on a phone: right -120px) */
.glow img { position: absolute; left: calc(50% + min(210px, 50vw - 16px) - 384px); top: -40px; width: 520px; max-width: none;
  filter: blur(64px) saturate(1.3); opacity: var(--glow); }

.card { max-width: 420px; margin: 0 auto; }

/* poster head: the name bottom-left, the avatar top-right, sharing one baseline */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.name { margin: 0 0 4px; font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: .03em; }
.name[data-len="4"] { font-size: 2.75rem; }
.name:not([data-len="1"]):not([data-len="2"]):not([data-len="3"]):not([data-len="4"]) { font-size: 2.25rem; }

.avatar {
  position: relative; flex: none; display: block; width: 168px; height: 168px; padding: 0; border: 0;
  border-radius: 50%; overflow: hidden; background: var(--bg); cursor: pointer; isolation: isolate; transform: translateZ(0);
  box-shadow: 0 0 0 1.5px var(--ring), 0 18px 40px rgba(0, 0, 0, .28);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.avatar img, .avatar video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-v { opacity: 0; transition: opacity .24s ease-out; }
.av-v.on { opacity: 1; }
.av-hint { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: var(--on-solid); background: rgba(243, 240, 232, .82); }
.av-hint[hidden] { display: none; }
/* editor preview: a click on the circle lands on the poster image (data-img="avatar"), not on the clip above it */
[data-edit] .av-v, [data-edit] .av-hint { pointer-events: none; }
.ic-play { width: 16px; height: 16px; fill: currentColor; }

.en { margin: 14px 0 0; font-size: 1.25rem; font-weight: 600; letter-spacing: .01em; }
.role { margin: 10px 0 0; font-size: 1rem; line-height: 1.45; font-weight: 500; }
.org { color: var(--text-2); font-weight: 400; }
.org::before { content: "・"; }
.bio { margin: 10px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--text-2); }

.add {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; margin-top: 26px;
  border-radius: 16px; background: var(--solid); color: var(--on-solid);
  font-size: 1.1875rem; font-weight: 700; text-decoration: none; letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .24); transition: transform .12s var(--ease);
}
.add .ic { width: 22px; height: 22px; stroke-width: 2; }

.links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.pill {
  display: grid; grid-template-columns: 24px auto 1fr; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 22px 8px 18px; border-radius: 999px; color: var(--text); text-decoration: none;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  -webkit-tap-highlight-color: transparent; transition: transform .12s var(--ease), background-color .12s;
}
.pill .ic { width: 24px; height: 24px; color: var(--accent); }
.lb { font-size: 1.0625rem; font-weight: 600; white-space: nowrap; }
.val { min-width: 0; text-align: right; font-size: .875rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* each clause of the bio stays on one line where it can, so lines break at the commas */
.cl { display: inline-block; }

.foot { max-width: 420px; margin: 32px auto 0; font-size: .75rem; font-weight: 500; color: var(--text-2); letter-spacing: .02em; }

.add:active, .pill:active { transform: scale(.97); }
.pill:active { background: var(--press); }
.avatar:active { transform: translateZ(0) scale(.97); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.name, .en, .role, .bio, .add, .links { animation: rise .32s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 40ms); }

/* desktop: the same poster as a landscape card, centred on the ground — head and the one button on the left,
   the links on the right — so the whole card fits one laptop screen. The card is the page colour, lit by the
   glow and set off by its edge; the glow now sits inside it (on a phone .card is not positioned, so the glow
   still hangs from the body). */
@media (min-width: 1040px) {
  body { display: grid; place-content: center; padding: 24px; }
  .card {
    --pad-x: 56px; --pad-t: 48px; --col: 420px;
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: var(--col) 380px; grid-template-rows: auto 1fr; column-gap: 56px;
    max-width: none; margin: 0; padding: var(--pad-t) var(--pad-x) 52px;
    border-radius: 36px; background: var(--bg);
    box-shadow: inset 0 0 0 1px var(--edge), 0 40px 100px rgba(0, 0, 0, .32);
  }
  .poster { grid-column: 1; grid-row: 1; }
  .add { grid-column: 1; grid-row: 2; align-self: end; }
  .links { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0; }
  /* behind the avatar again: 40px left of its centre, its top 68px above the avatar's, as on the phone */
  .glow { inset: 0; height: auto; }
  .glow img { left: calc(var(--pad-x) + var(--col) - 84px - 300px); top: calc(var(--pad-t) - 68px); }
  .foot { max-width: none; margin: 18px 0 0; text-align: center; }
}
/* a mouse gets the press colour on hover too */
@media (hover: hover) and (pointer: fine) {
  .pill:hover { background: var(--press); }
  .add:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
}

/* very narrow screens: the avatar steps down so a three-character name still fits beside it */
@media (max-width: 359px) {
  .avatar { width: 136px; height: 136px; }
  .name { font-size: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .name, .en, .role, .bio, .add, .links { animation: none; }
  .add, .pill, .avatar, .av-v { transition: none; }
  .add:active, .pill:active, .avatar:active { transform: none; }
}