@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap");

:root {
  --red: #d40718;
  --deep-red: #a80614;
  --paper: #f5f5f1;
  --white: #fff;
  --ink: #050505;
  --gray: #b9b9b4;
  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; }
::selection { color: var(--white); background: var(--ink); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.cover { position: fixed; z-index: 100; inset: 0; overflow: hidden; background: var(--red); transition: visibility 0s linear 1.05s; }
.cover.is-open { visibility: hidden; pointer-events: none; }
.cover-panel { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; width: 50.1%; overflow: hidden; transition: transform .95s cubic-bezier(.77,0,.18,1); }
.cover-panel span { font: 400 20vw/.78 var(--display); letter-spacing: -.045em; white-space: nowrap; }
.cover-panel-left { left: 0; justify-content: flex-end; color: var(--red); background: var(--white); }
.cover-panel-left span { margin-right: -.02em; font-size: 34vw; }
.cover-panel-right { right: 0; justify-content: flex-start; color: var(--white); background: var(--red); }
.cover-panel-right span { margin-left: -.015em; font-size: 16.4vw; }
.cover.is-open .cover-panel-left { transform: translateX(-102%); }
.cover.is-open .cover-panel-right { transform: translateX(102%); }
.cover-bar { position: absolute; top: 0; right: 0; left: 0; display: flex; justify-content: space-between; padding: 17px 22px; color: var(--white); background: var(--ink); font: 700 10px/1 var(--mono); letter-spacing: .08em; transition: opacity .2s; }
.cover-button { position: absolute; z-index: 8; left: 50%; bottom: 5.5vh; display: grid; grid-template-columns: minmax(0,1fr) 118px; width: min(460px,calc(100vw - 40px)); min-height: 102px; margin: 0; padding: 8px 0; overflow: hidden; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 9px 9px 0 var(--ink); cursor: pointer; isolation: isolate; transform: translateX(-50%) rotate(-.5deg); transition: box-shadow .32s ease, transform .32s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.cover-button::before, .cover-button::after { position: absolute; z-index: 3; right: 0; left: 0; height: 5px; background: repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 17px); content: ""; pointer-events: none; }
.cover-button::before { top: 4px; }
.cover-button::after { bottom: 4px; }
.cover-button-copy { display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; align-content: center; padding: 13px 20px 12px 24px; text-align: left; }
.cover-button-copy small { grid-column: 1 / -1; color: rgba(5,5,5,.56); font: 700 8px/1 var(--mono); letter-spacing: .12em; }
.cover-button-copy b { align-self: end; font-size: 19px; font-weight: 850; line-height: 1; letter-spacing: -.04em; }
.cover-button-copy em { align-self: end; font: 700 8px/1 var(--mono); font-style: normal; letter-spacing: .06em; }
.cover-button-stub { position: relative; display: grid; gap: 8px; align-content: center; padding: 12px 15px 12px 21px; color: var(--white); background: var(--red); border-left: 2px dashed var(--ink); text-align: left; transition: transform .32s cubic-bezier(.16,1,.3,1); }
.cover-button-stub::before, .cover-button-stub::after { position: absolute; z-index: 4; left: -8px; width: 14px; height: 14px; background: var(--ink); border-radius: 50%; content: ""; }
.cover-button-stub::before { top: -15px; }
.cover-button-stub::after { bottom: -15px; }
.cover-button-stub small { font: 700 8px/1 var(--mono); letter-spacing: .13em; }
.cover-button-stub b { font: 700 14px/1 var(--mono); letter-spacing: -.04em; }
.cover-button-stub i { position: absolute; right: 13px; bottom: 13px; font: 400 18px/1 var(--mono); font-style: normal; transition: transform .3s ease; }
.cover-button:hover { box-shadow: 14px 14px 0 var(--ink); transform: translate(-50%,-6px) rotate(-1.2deg); }
.cover-button:hover .cover-button-stub { transform: translateX(4px); }
.cover-button:hover .cover-button-stub i { transform: translateX(4px); }
.cover-button:active { box-shadow: 4px 4px 0 var(--ink); transform: translate(-50%,2px) rotate(0); }
.cover-button:focus-visible { outline: 3px solid var(--white); outline-offset: 5px; }
.cover.is-open .cover-button { opacity: 0; transform: translate(-50%,20px); }
.cover.is-open .cover-bar { opacity: 0; }

.site { min-height: 100vh; opacity: 0; transform: scale(.99); transition: opacity .5s ease .4s, transform .65s ease .35s; }
.site.is-visible { opacity: 1; transform: none; }
.masthead, .invite-header, .admin-header { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 62px; padding: 0 22px; background: rgba(245,245,241,.94); border-bottom: 1px solid var(--ink); backdrop-filter: blur(12px); font: 700 10px/1 var(--mono); letter-spacing: .06em; }
.masthead p, .invite-header p, .admin-header p { margin: 0; }
.mark { width: fit-content; color: var(--red); font: 400 29px/1 var(--display); letter-spacing: -.04em; }
.masthead nav { display: flex; justify-content: flex-end; gap: 18px; }
.masthead nav a { padding: 8px 0; }

.walker { position: absolute; z-index: 3; display: block; width: 170px; aspect-ratio: 2 / 3; pointer-events: none; }
.walker img { position: absolute; z-index: 2; top: 50%; left: 50%; width: 285%; max-width: none; transform: translate(-50%,-50%); }
.walker .walker-shadow { z-index: 1; opacity: .2; filter: grayscale(1) brightness(0) blur(1.8px); transform-origin: var(--shadow-origin-x,52%) var(--shadow-origin-y,76%); transform: translate(-50%,-50%) skewX(-30deg) scaleY(-.68); }
.walker .walker-shadow[src$="pedestrian-a.png"] { --shadow-origin-x: 54%; --shadow-origin-y: 67%; }
.walker .walker-shadow[src$="pedestrian-b.png"] { --shadow-origin-x: 51%; --shadow-origin-y: 76%; }
.walker .walker-shadow[src$="pedestrian-c.png"] { --shadow-origin-x: 54%; --shadow-origin-y: 83%; }
.walker-cover-a { top: 25%; left: 10%; width: clamp(105px,12vw,185px); transform: rotate(-7deg); }
.walker-cover-b { top: 34%; left: 43%; width: clamp(108px,12.5vw,195px); transform: rotate(3deg); }
.walker-cover-c { top: 24%; right: 8%; width: clamp(108px,12.5vw,195px); transform: rotate(8deg); }

.hero { position: relative; min-height: calc(100svh - 62px); padding: 24px 22px 22px; overflow: hidden; background: var(--white); }
.hero::after { position: absolute; right: -7vw; bottom: -18vw; width: 38vw; height: 38vw; background: var(--red); content: ""; transform: rotate(14deg); }
.meta-line { position: relative; z-index: 5; display: flex; justify-content: space-between; padding-top: 9px; border-top: 1px solid var(--ink); font: 700 10px/1 var(--mono); letter-spacing: .07em; }
.hero h1 { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; justify-content: center; width: calc(100% - 40px); margin: 0; color: var(--red); font: 400 17.8vw/.78 var(--display); letter-spacing: -.045em; transform: translate(-50%,-52%); white-space: nowrap; }
.walker-hero-a { top: 27%; left: 10%; width: clamp(102px,11vw,172px); transform: rotate(-7deg); }
.walker-hero-b { top: 35%; left: 43%; width: clamp(106px,11.5vw,180px); transform: rotate(2deg); }
.walker-hero-c { top: 26%; right: 9%; width: clamp(106px,11.5vw,180px); transform: rotate(8deg); }
.hero-intro { position: absolute; z-index: 6; right: 22px; bottom: 22px; left: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding-top: 15px; border-top: 1px solid var(--ink); }
.hero-intro p { margin: 0; font-size: clamp(15px,1.25vw,19px); font-weight: 700; line-height: 1.65; letter-spacing: -.02em; }
.hero-intro a { font-size: 13px; font-weight: 800; }
.hero-intro a span { margin-left: 7px; color: var(--red); }
.marquee { overflow: hidden; color: var(--white); background: var(--ink); font: 400 clamp(46px,6.5vw,96px)/.9 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.marquee div { display: flex; width: max-content; padding: 18px 0 22px; animation: humanity-marquee 22s linear infinite; }
@keyframes humanity-marquee { to { transform: translateX(-50%); } }

.section-label { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid currentColor; font: 700 10px/1 var(--mono); letter-spacing: .07em; }
.eyebrow { margin: 0 0 25px; color: var(--red); font: 700 11px/1.2 var(--mono); letter-spacing: .08em; }
.statement { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 7vw; min-height: 880px; padding: 88px 22px 96px; overflow: hidden; }
.statement .section-label, .statement > h2, .statement > .eyebrow { grid-column: 1 / -1; }
.statement > .eyebrow { margin-top: clamp(76px,7vw,108px); }
.statement h2 { margin: 0 0 clamp(62px,5vw,82px); font-size: clamp(44px,7.4vw,112px); font-weight: 900; line-height: 1.04; letter-spacing: -.065em; }
.statement-copy { z-index: 2; grid-column: 2; max-width: 650px; }
.statement-copy p { margin: 0 0 28px; font-size: clamp(17px,1.5vw,22px); font-weight: 550; line-height: 1.8; letter-spacing: -.025em; word-break: keep-all; }
.walker-statement { bottom: 3vw; left: 7vw; width: clamp(145px,18vw,270px); transform: rotate(-8deg); opacity: .88; }

.works { padding: 94px 22px 116px; background: var(--white); }
.works-heading { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; padding: clamp(78px,8vw,124px) 0 clamp(64px,6vw,96px); }
.works-heading h2 { margin: 0; font-size: clamp(44px,7vw,106px); font-weight: 900; line-height: 1.04; letter-spacing: -.065em; }
.team-works-heading { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; align-items: end; margin-bottom: 34px; }
.team-works-heading p { display: flex; flex-direction: column; gap: 8px; margin: 0; color: var(--red); font: 700 10px/1.2 var(--mono); letter-spacing: .07em; }
.team-works-heading h3 { margin: 0; font-size: clamp(34px,4.8vw,72px); font-weight: 900; line-height: 1.03; letter-spacing: -.055em; }
.team-work-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--ink); }
.team-work-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; padding: 24px; color: var(--white); background: var(--ink); border-right: 1px solid var(--white); }
.team-work-card:nth-child(2) { background: var(--red); }
.team-work-card:nth-child(3) { color: var(--ink); background: var(--paper); border-right: 0; }
.team-work-card header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid currentColor; font: 700 10px/1.2 var(--mono); letter-spacing: .07em; }
.team-work-card header span { opacity: .62; }
.team-work-card h3 { margin: 0 0 28px; font-size: clamp(48px,5.6vw,84px); font-weight: 900; line-height: .9; letter-spacing: -.065em; }
.team-work-card p { max-width: 35ch; margin: 0; font-size: clamp(14px,1.1vw,17px); font-weight: 550; line-height: 1.72; letter-spacing: -.02em; word-break: keep-all; }
.work-detail-link { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding-top: 12px; border-top: 1px solid currentColor; font: 700 9px/1 var(--mono); letter-spacing: .09em; }
.work-detail-link i { font-size: 14px; font-style: normal; transition: transform .25s; }
.work-detail-link:hover i { transform: translate(4px,-4px); }
.participant-works-label { margin-top: 88px; }
.work-list { border-top: 1px solid var(--ink); }
.work-list article { position: relative; display: grid; grid-template-columns: 115px minmax(220px,.9fr) 1.3fr; gap: 3vw; align-items: center; min-height: 158px; padding: 26px 20px; border-bottom: 1px solid var(--ink); transition: .2s; }
.work-list article:hover { color: var(--white); background: var(--ink); }
.work-list article > div { display: flex; flex-direction: column; align-self: stretch; justify-content: space-between; font: 700 10px/1.25 var(--mono); letter-spacing: .06em; }
.work-list article > div b { color: var(--red); font-size: 12px; }
.work-list header small { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.work-list h3 { margin: 0; font-size: clamp(24px,2.35vw,36px); font-weight: 850; line-height: 1.15; letter-spacing: -.045em; }
.work-list article > p { max-width: 60ch; margin: 0; font-size: clamp(14px,1.15vw,17px); font-weight: 500; line-height: 1.75; letter-spacing: -.02em; word-break: keep-all; }
.work-row-link { position: absolute; z-index: 2; inset: 0; }
.work-row-link:focus-visible { outline: 3px solid var(--red); outline-offset: -6px; }
.work-list article:has(.work-row-link)::after { position: absolute; right: 20px; bottom: 14px; color: var(--red); content: "VIEW WORK ↗"; font: 700 8px/1 var(--mono); letter-spacing: .08em; }
.work-list article:has(.work-row-link):hover::after { color: var(--white); }

.questions { padding: 24px 22px 80px; color: var(--white); background: var(--ink); }
.questions h2 { margin: clamp(78px,7vw,110px) 0 clamp(58px,4.5vw,76px); font: 400 clamp(72px,11.5vw,172px)/.8 var(--display); letter-spacing: -.035em; }
.question-grid { display: grid; grid-template-columns: repeat(3,1fr); min-height: min(60vw,720px); }
.question-grid article { position: relative; min-width: 0; overflow: hidden; color: var(--ink); background: var(--white); border-right: 1px solid var(--ink); }
.question-grid article:nth-child(2) { color: var(--white); background: var(--red); }
.question-grid article:nth-child(3) { background: var(--gray); border: 0; }
.question-grid article > span { position: absolute; z-index: 2; top: 18px; right: 18px; left: 18px; padding-bottom: 9px; border-bottom: 1px solid currentColor; font: 700 10px/1 var(--mono); }
.question-grid img { position: absolute; top: 48%; left: 50%; width: 82%; transform: translate(-50%,-50%); }
.question-grid p { position: absolute; z-index: 2; right: 18px; bottom: 18px; left: 18px; margin: 0; font-size: clamp(15px,1.45vw,21px); font-weight: 750; line-height: 1.55; letter-spacing: -.03em; }

.info { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; padding: 24px 22px 45px; color: var(--white); background: var(--red); }
.info .section-label { grid-column: 1 / -1; }
.info > div:nth-child(2) { padding-top: 10vw; }
.info > div .eyebrow { color: var(--ink); }
.info h2 { margin: 0; font-size: clamp(44px,7.4vw,112px); font-weight: 900; line-height: 1.04; letter-spacing: -.065em; }
.info dl { margin: 10vw 0 0; }
.info dl div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.75); }
.info dt { font: 700 10px/1.45 var(--mono); letter-spacing: .07em; }
.info dd { margin: 0; font-size: clamp(16px,1.45vw,22px); font-weight: 700; line-height: 1.5; }
.info-note { grid-column: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 58px; padding-top: 19px; border-top: 1px solid var(--white); }
.info-note p { max-width: 34ch; margin: 0; font-size: 13px; line-height: 1.65; }
.info-note button { display: flex; justify-content: space-between; gap: 40px; min-width: 225px; padding: 16px; color: var(--white); background: transparent; border: 1px solid var(--white); border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 800; }
footer { display: grid; grid-template-columns: 1fr auto; align-items: end; min-height: 230px; padding: 22px; background: var(--white); border-top: 1px solid var(--ink); font: 700 10px/1 var(--mono); letter-spacing: .07em; }
footer strong { color: var(--red); font: 400 clamp(44px,7vw,100px)/.8 var(--display); letter-spacing: -.035em; }
footer > span { justify-self: end; }

/* Personalized invitation */
.invite-body { background: var(--paper); }
.invite-header, .admin-header { position: relative; color: var(--white); background: var(--ink); border: 0; }
.invite-header > a:last-child, .admin-header > span { justify-self: end; }
.invite-shell[hidden], .invite-error[hidden], .invite-loading[hidden] { display: none; }
.invite-loading, .invite-error { display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding: clamp(28px,7vw,110px); color: var(--white); background: var(--red); }
.invite-loading p, .invite-error p { margin: 0 0 45px; color: var(--ink); font: 700 11px/1 var(--mono); letter-spacing: .08em; }
.invite-loading h1, .invite-error h1 { max-width: 1000px; margin: 0 0 40px; font-size: clamp(48px,8vw,122px); font-weight: 900; line-height: 1; letter-spacing: -.07em; }
.invite-loading span, .invite-error span { max-width: 42em; font-size: 16px; font-weight: 650; line-height: 1.7; }
.invite-error a { width: fit-content; margin-top: 45px; border-bottom: 1px solid currentColor; font-weight: 800; }
.personal-hero { position: relative; min-height: calc(100svh - 62px); overflow: hidden; color: var(--white); background: var(--red); }
.personal-hero .meta-line { position: absolute; top: 22px; right: 22px; left: 22px; border-color: currentColor; }
.personal-type { position: absolute; top: 50%; left: -1.5vw; font: 400 min(29vw,430px)/.69 var(--display); letter-spacing: -.05em; transform: translateY(-48%); }
.personal-type-mobile { display: none; }
.personal-message { position: absolute; z-index: 8; right: 4vw; bottom: 4vw; width: min(660px,53vw); padding-top: 14px; border-top: 1px solid var(--white); }
.personal-message p { margin: 0 0 28px; font: 700 11px/1 var(--mono); letter-spacing: .08em; }
.personal-message h1 { margin: 0; font-size: clamp(50px,7.2vw,110px); font-weight: 900; line-height: 1.02; letter-spacing: -.065em; }
.personal-message h1 > span { box-sizing: border-box; display: block; width: fit-content; max-width: 100%; padding-right: .12em; white-space: nowrap; }
.personal-message h1 strong { color: var(--ink); }
.personal-a { top: 10%; left: 34%; width: clamp(110px,13vw,195px); transform: rotate(-7deg); }
.personal-b { top: 44%; left: 18%; width: clamp(100px,12vw,185px); transform: rotate(5deg); }
.personal-c { top: 12%; right: 7%; width: clamp(105px,12vw,190px); transform: rotate(9deg); }
.personal-statement { display: grid; grid-template-columns: .72fr 1.28fr; gap: 6vw; padding: clamp(95px,10vw,160px) 22px; background: var(--white); }
.personal-statement .eyebrow { grid-column: 1 / -1; }
.personal-statement h2 { grid-column: 1 / -1; margin: 0 0 9vw; font-size: clamp(56px,9vw,138px); font-weight: 900; line-height: .97; letter-spacing: -.07em; }
.personal-statement h2 > span { display: block; white-space: nowrap; }
.personal-statement div { grid-column: 2; }
.personal-statement div p { margin: 0 0 26px; max-width: 38em; font-size: clamp(17px,1.5vw,22px); font-weight: 600; line-height: 1.8; letter-spacing: -.025em; word-break: keep-all; }
.invite-works { border-top: 1px solid var(--ink); }
.personal-info { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; padding: clamp(90px,9vw,145px) 22px; color: var(--white); background: var(--ink); }
.personal-info h2 { margin: 0; color: var(--red); font: 400 clamp(70px,10vw,150px)/.8 var(--display); }
.personal-info dl { margin: 0; }
.personal-info dl div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 25px 0; border-top: 1px solid rgba(255,255,255,.65); }
.personal-info dt { font: 700 10px/1.4 var(--mono); }
.personal-info dd { margin: 0; font: 700 clamp(18px,1.7vw,25px)/1.35 var(--mono); }
.personal-info dd small { color: var(--gray); font: 600 13px/1.5 var(--body); }
.rsvp-section { padding: clamp(90px,11vw,165px) 22px; background: var(--red); }
.rsvp-form { display: grid; grid-template-columns: .78fr 1.22fr; gap: 0 7vw; max-width: 1320px; margin: 0 auto; }
.rsvp-heading { grid-row: 1 / 9; }
.rsvp-heading p { margin: 0 0 25px; color: var(--ink); font: 700 11px/1 var(--mono); }
.rsvp-heading h2 { margin: 0; color: var(--white); font-size: clamp(48px,5.4vw,82px); font-weight: 900; line-height: 1.03; letter-spacing: -.07em; }
.rsvp-heading h2 > span { display: block; width: fit-content; padding-right: .1em; white-space: nowrap; }
.rsvp-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.rsvp-form legend, .rsvp-field > span { display: block; width: 100%; padding-bottom: 10px; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.75); font: 700 11px/1 var(--mono); }
.rsvp-choices label { display: flex; align-items: center; min-height: 78px; padding: 0 18px; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.75); cursor: pointer; font-size: 17px; font-weight: 750; transition: .2s; }
.rsvp-choices label:hover, .rsvp-choices label.is-selected { color: var(--ink); background: var(--white); }
.rsvp-choices input { position: absolute; opacity: 0; }
.rsvp-choices b { margin-left: auto; font: 700 11px/1 var(--mono); }
.rsvp-field { display: block; margin-top: 35px; }
.rsvp-field small { margin-left: 8px; opacity: .7; }
.rsvp-field input, .rsvp-field select, .rsvp-field textarea { width: 100%; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.75); border-radius: 0; outline: 0; }
.rsvp-field input { min-height: 62px; padding: 0 8px; font-size: 17px; font-weight: 700; }
.rsvp-field input[type="time"] { color-scheme: dark; }
.rsvp-field input::placeholder { color: rgba(255,255,255,.55); }
.rsvp-field select { min-height: 62px; padding: 0 8px; font-weight: 700; }
.rsvp-field select option { color: var(--ink); }
.rsvp-field textarea { resize: vertical; padding: 17px 8px; line-height: 1.6; }
.rsvp-name-field { margin-top: 0; margin-bottom: 35px; }
.rsvp-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rsvp-visit[hidden] { display: none; }
.rsvp-submit, .admin-primary { display: flex; justify-content: space-between; width: 100%; margin-top: 38px; padding: 19px; color: var(--white); background: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; font-weight: 800; }
.form-message { min-height: 24px; margin: 15px 0 0; color: var(--white); font-size: 13px; font-weight: 650; }
.form-message.is-error { color: var(--ink); }

/* Administration */
.admin-body { background: var(--paper); }
.admin-header { position: sticky; }
.admin-header button { justify-self: end; padding: 8px 0; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: 700 10px/1 var(--mono); }
.admin-login { position: fixed; z-index: 50; inset: 0; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 7vw; padding: 22px; color: var(--white); background: var(--red); }
.admin-login[hidden] { display: none; }
.admin-login p { color: var(--ink); font: 700 11px/1 var(--mono); }
.admin-login h1 { margin: 25px 0 0; font-size: clamp(55px,8vw,120px); line-height: .95; letter-spacing: -.07em; }
.admin-login form { max-width: 620px; }
.admin-login label { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--white); font: 700 10px/1 var(--mono); }
.admin-login input { width: 100%; padding: 20px 10px; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid var(--white); border-radius: 0; font: 600 16px/1 var(--mono); }
.admin-shell[hidden] { display: none; }
.admin-hero { display: flex; align-items: flex-end; justify-content: space-between; min-height: 330px; padding: 70px 22px 30px; color: var(--white); background: var(--ink); }
.admin-hero p, .admin-create > div > p, .admin-list-heading p { margin: 0 0 20px; color: var(--red); font: 700 10px/1 var(--mono); letter-spacing: .08em; }
.admin-hero h1 { margin: 0; font-size: clamp(62px,10vw,145px); line-height: .8; letter-spacing: -.07em; }
.admin-hero button { padding: 10px 0; color: var(--white); background: transparent; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: 700 10px/1 var(--mono); }
.admin-stats { display: grid; grid-template-columns: repeat(5,1fr); border-bottom: 1px solid var(--ink); }
.admin-stats article { min-height: 200px; padding: 20px; border-right: 1px solid var(--ink); }
.admin-stats article:last-child { color: var(--white); background: var(--red); border: 0; }
.admin-stats span { font: 700 10px/1 var(--mono); }
.admin-stats strong { display: block; margin-top: 32px; font: 400 72px/1 var(--display); }
.admin-stats small { font-size: 12px; font-weight: 650; }
.admin-create { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; padding: clamp(80px,9vw,140px) 22px; border-bottom: 1px solid var(--ink); }
.admin-create h2, .admin-list-heading h2 { margin: 0; font-size: clamp(44px,6vw,88px); line-height: 1; letter-spacing: -.065em; }
.admin-create > div > span { display: block; max-width: 34em; margin-top: 30px; font-size: 14px; line-height: 1.7; }
.admin-create label { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font: 700 10px/1 var(--mono); }
.admin-create textarea { width: 100%; resize: vertical; padding: 18px 10px; background: var(--white); border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; font-size: 17px; font-weight: 650; line-height: 1.8; }
.admin-create .form-message { color: var(--red); }
.admin-list, .admin-inviter-links { padding: clamp(75px,8vw,120px) 22px; }
.admin-inviter-links { color: var(--white); background: var(--ink); }
.admin-inviter-links .admin-list-heading p { color: var(--red); }
.inviter-link-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 2px solid var(--white); border-left: 1px solid rgba(255,255,255,.35); }
.inviter-link-grid[hidden] { display: none; }
.inviter-link-grid article { display: grid; min-height: 230px; padding: 20px; border-right: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); }
.inviter-link-grid small, .inviter-link-grid span { color: var(--gray); font: 700 9px/1 var(--mono); letter-spacing: .08em; }
.inviter-link-grid h3 { margin: 30px 0 12px; font-size: clamp(26px,3vw,42px); line-height: 1; letter-spacing: -.055em; }
.inviter-link-grid button { align-self: end; justify-self: start; padding: 10px 12px; color: var(--white); background: var(--red); border: 1px solid var(--red); cursor: pointer; font-size: 11px; font-weight: 800; }
.admin-inviter-links .admin-empty { color: var(--white); background: transparent; border-color: rgba(255,255,255,.5); }
.admin-list-heading { margin-bottom: 65px; }
.admin-table-wrap { overflow-x: auto; border-top: 2px solid var(--ink); }
.admin-table { width: 100%; min-width: 1180px; border-collapse: collapse; text-align: left; }
.admin-table th { padding: 12px 10px; border-bottom: 1px solid var(--ink); font: 700 10px/1 var(--mono); }
.admin-table td { max-width: 320px; padding: 18px 10px; border-bottom: 1px solid #c7c7c1; font-size: 13px; line-height: 1.45; }
.admin-table td:first-child b, .admin-table td:first-child small { display: block; }
.visit-cell b, .visit-cell small { display: block; }
.visit-cell small { margin-top: 5px; color: #6f6f6a; font: 700 10px/1.2 var(--mono); }
.admin-table td button { padding: 9px 11px; background: transparent; border: 1px solid var(--ink); cursor: pointer; font-size: 11px; font-weight: 800; }
.status { display: inline-block; min-width: 72px; padding: 7px 8px; text-align: center; border: 1px solid var(--ink); font-size: 11px; font-weight: 800; }
.status-attending { color: var(--white); background: var(--red); border-color: var(--red); }
.status-declined { color: var(--white); background: var(--ink); }
.admin-empty { padding: 80px 20px; background: var(--white); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); text-align: center; font-weight: 650; line-height: 1.8; }

@media (max-width: 800px) {
  .cover-panel { right: 0; left: 0; width: 100%; height: 50.1%; }
  .cover-panel-left { top: 0; bottom: auto; align-items: flex-end; justify-content: flex-start; }
  .cover-panel-right { top: auto; bottom: 0; align-items: flex-start; justify-content: flex-end; }
  .cover-panel-left span { margin: 0 0 -.08em -.02em; font-size: 55vw; }
  .cover-panel-right span { margin: -.055em -.01em 0 0; font-size: 28vw; }
  .cover.is-open .cover-panel-left { transform: translateY(-102%); }
  .cover.is-open .cover-panel-right { transform: translateY(102%); }
  .walker-cover-a { top: 24%; left: 2%; width: 27vw; }
  .walker-cover-b { top: 39%; left: 37%; width: 29vw; }
  .walker-cover-c { top: 25%; right: 0; width: 29vw; }
  .cover-button { bottom: 4vh; grid-template-columns: minmax(0,1fr) 103px; min-height: 94px; box-shadow: 7px 7px 0 var(--ink); }
  .cover-button-copy { grid-template-columns: 1fr; gap: 6px; padding-right: 14px; padding-left: 17px; }
  .cover-button-copy b { font-size: 17px; }
  .cover-button-copy em { grid-column: 1; font-size: 7px; }
  .cover-button-stub { padding-right: 10px; padding-left: 17px; }
  .masthead, .invite-header, .admin-header { grid-template-columns: 1fr auto; padding: 0 16px; }
  .masthead > p, .invite-header p, .admin-header p { display: none; }
  .masthead nav { gap: 12px; }
  .masthead nav a:not(:last-child) { display: none; }
  .hero { min-height: calc(100svh - 62px); padding: 20px 16px; }
  .hero h1 { top: 46%; left: 16px; display: block; width: auto; font-size: 38vw; line-height: .68; transform: translateY(-50%); }
  .hero h1 > span { display: block; width: fit-content; }
  .walker-hero-a { top: 26%; left: 0; width: 25vw; }
  .walker-hero-b { top: 40%; left: 39%; width: 27vw; }
  .walker-hero-c { top: 27%; right: -1%; width: 27vw; }
  .hero-intro { right: 16px; bottom: 20px; left: 16px; align-items: flex-start; }
  .statement, .works, .questions, .info { padding-right: 16px; padding-left: 16px; }
  .statement { display: block; min-height: 0; padding-top: 76px; padding-bottom: 80px; }
  .statement > .eyebrow { margin-top: 22vw; }
  .statement h2 { margin-bottom: 17vw; font-size: 13vw; }
  .statement-copy { margin-left: 10vw; }
  .walker-statement { position: relative; bottom: auto; left: auto; width: 48vw; margin: 36px auto -28px; }
  .works-heading { display: block; padding: 22vw 0 17vw; }
  .works-heading h2 { font-size: 13vw; }
  .team-works-heading { display: block; margin-bottom: 24px; }
  .team-works-heading p { margin-bottom: 24px; }
  .team-works-heading h3 { font-size: 12vw; }
  .team-work-list { grid-template-columns: 1fr; }
  .team-work-card { min-height: 110vw; padding: 22px 18px; border-right: 0; border-bottom: 1px solid var(--white); }
  .team-work-card:nth-child(3) { border-bottom: 0; }
  .team-work-card h3 { font-size: 20vw; }
  .participant-works-label { margin-top: 20vw; }
  .work-list article { display: block; min-height: 0; padding: 24px 10px 28px; }
  .work-list article > div { flex-direction: row; margin-bottom: 36px; }
  .work-list header { margin-bottom: 20px; }
  .question-grid { grid-template-columns: 1fr; }
  .question-grid article { min-height: 104vw; border-right: 0; border-bottom: 1px solid var(--ink); }
  .info { display: block; padding-bottom: 40px; }
  .info > div:nth-child(2) { padding-top: 28vw; }
  .info dl { margin-top: 20vw; }
  .info dl div { grid-template-columns: 88px 1fr; }
  .info-note { display: block; margin-top: 40px; }
  .info-note button { width: 100%; margin-top: 30px; }
  footer { grid-template-columns: 1fr auto; min-height: 180px; padding: 18px 16px; }
  footer > span { display: none; }
  .personal-hero { min-height: 830px; }
  .personal-hero .meta-line { right: 16px; left: 16px; }
  .personal-type { top: 41%; left: 16px; font-size: 42vw; line-height: .72; }
  .personal-type-desktop { display: none; }
  .personal-type-mobile { display: block; }
  .personal-message { right: 16px; bottom: 35px; left: 16px; width: auto; }
  .personal-message h1 { font-size: min(9.2vw,42px); }
  .personal-a { top: 12%; left: 42%; width: 27vw; }
  .personal-b { top: 45%; left: 3%; width: 25vw; }
  .personal-c { top: 30%; right: -4%; width: 27vw; }
  .personal-statement, .personal-info, .rsvp-form, .admin-create, .admin-login { display: block; padding-right: 16px; padding-left: 16px; }
  .personal-statement h2 { margin: 16vw 0 25vw; font-size: 11vw; }
  .personal-statement div { margin-left: 10vw; }
  .personal-info h2 { margin-bottom: 22vw; font-size: 23vw; }
  .personal-info dl div { grid-template-columns: 85px 1fr; }
  .rsvp-heading { margin-bottom: 20vw; }
  .rsvp-heading h2 { font-size: 16vw; }
  .rsvp-visit { grid-template-columns: 1fr; gap: 0; }
  .admin-login > div { margin-bottom: 70px; }
  .admin-hero { min-height: 280px; padding: 60px 16px 26px; }
  .admin-hero h1 { font-size: 19vw; }
  .admin-stats { grid-template-columns: repeat(2,1fr); }
  .admin-stats article { min-height: 155px; padding: 16px; border-bottom: 1px solid var(--ink); }
  .admin-stats article:nth-child(2n) { border-right: 0; }
  .admin-stats article:last-child { grid-column: 1 / -1; }
  .admin-stats strong { margin-top: 23px; font-size: 55px; }
  .admin-create > div { margin-bottom: 55px; }
  .admin-list { padding-right: 16px; padding-left: 16px; }
  .admin-inviter-links { padding-right: 16px; padding-left: 16px; }
  .inviter-link-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
