:root {
  color-scheme: light;
  --paper: #f7f4ee;
  --ink: #28231f;
  --muted: #665f58;
  --wine: #7b2724;
  --line: #d9d1c5;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { color: #fff; background: var(--wine); }
html { scrollbar-color: #9b8273 var(--paper); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #e6bc72; outline-offset: 5px; }
main { padding: clamp(24px, 4vw, 64px); max-width: 1600px; margin: auto; }
.team { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.8fr); gap: clamp(28px, 4.5vw, 76px); align-items: stretch; }
.intro { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0 48px; }
h1 { margin: 0 0 36px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 4vw, 58px); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; }
h1 em { color: var(--wine); font-weight: 400; }
.lead { font-size: 19px; margin: 0 0 16px; }
.description { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.instruction { margin-top: 28px; }
.instruction p { margin: 0; color: var(--wine); font-size: 14px; line-height: 1.6; }
.signature { margin: 60px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 20px; color: var(--wine); }
.garden { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; background: #233626; }
.tree { display: block; width: 100%; height: 100%; object-fit: cover; }
.garden-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 31, 21, .12), transparent 65%, rgba(15, 31, 21, .55)); pointer-events: none; }
.prototype-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.flowers { position: absolute; inset: 0; }
.flower { position: absolute; left: var(--x); top: var(--y); width: clamp(72px, 10vw, 140px); aspect-ratio: 1; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; touch-action: manipulation; z-index: 1; }
.flower::before { content: ''; position: absolute; inset: 0; background: url('assets/flower-bud.png') center / contain no-repeat; filter: drop-shadow(0 0 9px rgba(255, 163, 113, .38)) drop-shadow(0 7px 8px rgba(28, 7, 9, .5)) saturate(1.08) brightness(1.04); transform: scale(1.25); }
.flower::after { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 24% 18% at 42% 31%, rgba(255, 249, 230, .7), transparent 75%), linear-gradient(110deg, transparent 34%, rgba(255, 248, 220, 0) 41%, rgba(255, 248, 220, .82) 47%, rgba(255, 255, 255, .14) 53%, transparent 60%); background-size: 100% 100%, 300% 100%; background-position: 0 0, 85% 0; background-repeat: no-repeat; -webkit-mask: url('assets/flower-bud.png') center / contain no-repeat; mask: url('assets/flower-bud.png') center / contain no-repeat; transform: scale(1.25); pointer-events: none; transition: opacity 160ms ease; }
.instruction-touch { display: none; }
.flower:not(.is-open)::before { transform-origin: 50% 65%; animation: bud-wind-a var(--wind-time) ease-in-out var(--wind-delay) infinite; }
.flower:nth-child(even):not(.is-open)::before { animation-name: bud-wind-b; }
.flower:nth-child(1) { --wind-time: 5.4s; --wind-delay: -.7s; --shine-cycle: 6s; --shine-delay: -.4s; }
.flower:nth-child(2) { --wind-time: 6.1s; --wind-delay: -2.3s; --shine-cycle: 7.3s; --shine-delay: -1.1s; }
.flower:nth-child(3) { --wind-time: 4.9s; --wind-delay: -3.8s; --shine-cycle: 5.5s; --shine-delay: -2.2s; }
.flower:nth-child(4) { --wind-time: 5.8s; --wind-delay: -1.2s; --shine-cycle: 8.1s; --shine-delay: -3.1s; }
.flower:nth-child(5) { --wind-time: 6.5s; --wind-delay: -4.5s; --shine-cycle: 6.7s; --shine-delay: -4.2s; }
.flower:nth-child(6) { --wind-time: 5.1s; --wind-delay: -.3s; --shine-cycle: 7.8s; --shine-delay: -5s; }
.flower:nth-child(7) { --wind-time: 6.3s; --wind-delay: -5.1s; --shine-cycle: 5.9s; --shine-delay: -1.7s; }
.flower:nth-child(8) { --wind-time: 5.6s; --wind-delay: -2.7s; --shine-cycle: 8.6s; --shine-delay: -6.1s; }
.flower:nth-child(9) { --wind-time: 4.7s; --wind-delay: -1.8s; --shine-cycle: 6.4s; --shine-delay: -3.8s; }
.flower:nth-child(10) { --wind-time: 6.7s; --wind-delay: -3.4s; --shine-cycle: 7.1s; --shine-delay: -2.7s; }
.flower:not(.is-open)::after { animation: bud-sheen var(--shine-cycle) ease-in-out var(--shine-delay) infinite; }
@keyframes bud-sheen {
  0%, 10% { background-position: 0 0, 85% 0; }
  42%, 48% { background-position: 0 0, 15% 0; }
  100% { background-position: 0 0, 15% 0; }
}
@keyframes bud-wind-a {
  0%, 100% { transform: translateX(-1px) rotate(-1.2deg) scale(1.25); }
  18% { transform: translateX(-2px) rotate(-.5deg) scale(1.25); }
  48% { transform: translateX(1px) rotate(1.4deg) scale(1.25); }
  74% { transform: translateX(0) rotate(.2deg) scale(1.25); }
}
@keyframes bud-wind-b {
  0%, 100% { transform: translateX(1px) rotate(.8deg) scale(1.25); }
  27% { transform: translateX(-2px) rotate(-1.5deg) scale(1.25); }
  58% { transform: translateX(0) rotate(-.2deg) scale(1.25); }
  82% { transform: translateX(2px) rotate(1.3deg) scale(1.25); }
}
.flower-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(28, 7, 9, .5)); transform: scale(1.15); }
.flower:not(.is-open) .flower-video { opacity: 0; }
.flower.is-open { z-index: 3; }
.flower.is-open::after { animation: none; opacity: 0; }
.flower.show-open-flower .flower-video { opacity: 0; }
.flower.show-open-flower::before { background-image: url('assets/flower-open.png'); }
.member-card { position: fixed; z-index: 20; width: min(300px, 72vw); margin: 0; background: #fffcf7; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(27, 20, 13, .28); transform-origin: 50% 50%; cursor: zoom-in; transition: width 380ms var(--ease); }
.member-card.is-expanded { width: min(440px, 92vw); cursor: default; }
.card-photo-wrap { height: clamp(200px, 34dvh, 310px); overflow: hidden; background: #e8e0d5; transition: height 380ms var(--ease); }
.member-card.is-expanded .card-photo-wrap { height: clamp(300px, 54dvh, 540px); }
.card-photo { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center top; }
.card-body { padding: 17px 20px 19px; }
.card-name { margin: 0 0 8px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(21px, 2.2vw, 27px); font-weight: 400; letter-spacing: -.025em; line-height: 1.08; }
.card-role { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.card-phone { display: flex; align-items: center; gap: 10px; padding-top: 12px; margin-top: 13px; border-top: 1px solid var(--line); font-size: 12px; color: var(--wine); text-decoration: none; text-underline-offset: 4px; }
a.card-phone:hover { text-decoration: underline; }
.card-phone svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; }
.close-card { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fffcf7; color: var(--ink); cursor: pointer; transition: background 160ms ease; }
.close-card:hover { background: #eadfcf; }
.close-card svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.noscript { padding: 24px; }
@media (min-width: 1600px) { .flower { width: 140px; } }
@media (hover: none) and (pointer: coarse) {
  .instruction-hover { display: none; }
  .instruction-touch { display: inline; }
  .instruction svg { display: none; }
}
@media (max-width: 900px) {
  .team { grid-template-columns: 1fr; gap: 30px; }
  .intro { padding: 8px 0 0; }
  .intro-copy { display: block; }
  .instruction { margin-top: 18px; }
  .signature { display: none; }
  h1 { font-size: clamp(34px, 5vw, 42px); }
  .flower { width: 15%; min-width: 54px; }
}
@media (max-width: 560px) {
  main { padding: 28px 16px 20px; }
  .team { gap: 24px; }
  .intro-copy { display: block; }
  h1 { font-size: clamp(24px, 8vw, 34px); margin-bottom: 22px; }
  .lead { font-size: 17px; margin-bottom: 8px; }
  .description { max-width: 32ch; font-size: 14px; line-height: 1.6; }
  .instruction { margin-top: 20px; gap: 10px; }
  .instruction p { font-size: 13px; }
  .member-card { width: min(72vw, 300px); }
  .member-card.is-expanded { width: min(92vw, 440px); }
  .card-photo-wrap { height: clamp(180px, 34dvh, 290px); }
  .member-card.is-expanded .card-photo-wrap { height: clamp(280px, 52dvh, 490px); }
  .card-body { padding: 16px 18px 18px; }
  .card-name { font-size: clamp(20px, 5vw, 27px); }
  .prototype-note { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .flower::before { animation: none; }
  .flower::after { animation: none !important; }
}