@font-face { font-family: 'Goudy'; src: url(/fonts/GoudyStM.ttf); font-display: swap }
@font-face { font-family: 'Chorus'; src: url(/fonts/GyreChorus.otf); font-display: swap }
:root { --bg: #efeee9; --lift: #f8f8f5; --ink: #191919; --ink-2: #3d3d3b; --muted: #77766f; --link: #1f3b68;
  --paper: #f9f6ef;
  --g: #7f8a64; --b: #c9a35a; --r: #9b4c34; --m: #6c4a4a; --i: #b7804e; --h: #221f1c }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 20px/1.55 'Goudy', Georgia, serif }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
.meta { font: 300 14px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--muted) }

.stage { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: 20px 0 }
.stage::before { content: ''; flex: 1 }
.stage::after { content: ''; flex: 3 }
.facade { width: 100%; max-width: 860px; margin: 0 auto; padding: 0 16px }
.roof { position: relative; container-type: inline-size; line-height: 0 }
.roof svg, .steps svg { display: block; width: 100%; height: auto; overflow: visible }
.roof h1 { position: absolute; left: 0; right: 0; top: var(--top); transform: translateY(-50%); margin: 0; text-align: center; line-height: 1; font: 400 var(--fs) 'Chorus', serif; white-space: nowrap }
.narrow { display: none }
.roof h1 a { color: var(--ink) }
.roof h1 a:hover { text-decoration: none }
.hall { display: grid; grid-template-columns: 6.6% 1fr 6.6%; margin: 0 1.923% }
.door > .meta { font-size: 13px; text-wrap: balance }
.column { display: flex; flex-direction: column; line-height: 0 }
.column svg { display: block; width: 100%; height: auto; overflow: visible }
.column .shaft { flex: 1; width: 66.667%; margin: 0 auto }
.door { padding: 60px clamp(12px, 6vw, 64px) 52px; text-align: center; min-width: 0 }
.say { font-size: clamp(22px, 3.2vw, 29px); line-height: 1.3; margin: 0 auto 22px; max-width: 640px; text-wrap: balance }
.say:has(+ .sub) { margin-bottom: 10px }
.sub { font-size: 16px; line-height: 1.5; color: var(--ink-2); max-width: 520px; margin: 0 auto 24px; text-wrap: pretty }
.door form { display: flex; gap: 6px; max-width: 340px; margin: 0 auto 5px }
.door form.one { justify-content: center; margin-top: 20px }
input { flex: 1; min-width: 0; font: 15px 'Goudy', Georgia, serif; padding: 7px 10px; border: 1px solid #9b9a93; border-radius: 0; background: var(--lift); color: var(--ink) }
input:focus { outline: none; border-color: var(--ink) }
button { font: 15px 'Goudy', Georgia, serif; padding: 0 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--lift); cursor: pointer }
.door form button { padding: 7px 14px }
button:hover { background: transparent; color: var(--ink) }

.g { --k: var(--g) } .b { --k: var(--b) } .r { --k: var(--r) } .m { --k: var(--m) } .i { --k: var(--i) } .h { --k: var(--h) }
.acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 20px }
.acts form.one { margin: 0 }
.ways { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 34px }
.ways a, .ways button { font: 17px 'Goudy', Georgia, serif; padding: 7px 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none }
.ways a:hover, .ways button:hover { background: var(--ink); color: var(--lift) }
.door form.join { max-width: 400px }
.door form.inline { display: inline; margin: 0 }
.door form.inline button { padding: 0; border: 0; background: none; font: inherit; color: var(--link); cursor: pointer }
.door form.inline button:hover { text-decoration: underline }
.joinbox { max-width: 460px; margin: 44px auto 0; padding-top: 26px; border-top: 1px solid #cfcec6; text-align: center }
.joinbox p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: balance }
.joinbox form { display: flex; gap: 6px; max-width: 340px; margin: 0 auto }
.joinbox button { padding: 7px 14px }
.foot { margin: 28px auto 20px; text-align: center }

.sheet-page { max-width: 1320px; margin: 0 auto; padding: 40px 24px 70px }
.hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; padding-bottom: 12px; border-bottom: 1px solid #cfcec6 }
.hd .mark { position: relative; padding-left: 38px; font: 400 26px/1 'Chorus', serif; color: var(--ink) }
.hd .mark:hover { text-decoration: none }
.hd .mark img { position: absolute; left: 0; top: 50%; height: 28px; width: auto; transform: translateY(-50%) }
.hd nav { display: flex; align-items: baseline; gap: 20px; font-size: 17px; line-height: 1; white-space: nowrap }
.hd nav a { color: var(--ink); padding-bottom: 4px; border-bottom: 1px solid transparent }
.hd nav a:hover { text-decoration: none; border-color: currentColor }
.hd nav a.here { border-color: var(--ink) }
.top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px }
.pn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 14px 0 }
.pn .next { text-align: right }
.draft { margin: -6px 0 14px; text-align: center }
.sheet { background: var(--paper); border: 1px solid #dcdbd4 }
.sheet [contenteditable]:focus { outline: none }
.sheet .head { font: 300 14px/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 20px 44px; border-bottom: 1px solid #e6e5df; color: #555 }
.sheet .head b { font-weight: 400; color: #999; display: inline-block; width: 64px }
.sheet .head div + div { margin-top: 3px }
.sheet .head span { color: var(--ink) }
.sheet .body { padding: 30px 44px 42px }
.sheet .body p { margin: 0 0 .9em }

.mail { max-width: 860px; margin: 0 auto }
.cal h1 { font-weight: 400; font-size: 32px; margin: 10px 0 4px }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 30px 34px }
.cal h2 { font-weight: 400; font-size: 20px; margin: 0 0 6px }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.wk em { font: 300 10px 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--muted); font-style: normal; text-align: center; padding-bottom: 2px }
.day { height: 64px; overflow: hidden; hyphens: auto; overflow-wrap: break-word; background: color-mix(in srgb, var(--k) 24%, var(--lift)); border: 1px solid color-mix(in srgb, var(--k) 45%, #b9b8b0); padding: 3px 4px; text-decoration: none; font: 9.5px/1.2 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--ink-2) }
.day b { display: block; font-weight: 500; font-size: 10px; color: var(--ink); margin-bottom: 1px }
a.day:hover { background: color-mix(in srgb, var(--k) 36%, var(--lift)); outline: 1px solid var(--ink); text-decoration: none }
a.day { color: var(--ink) } a.day b { color: var(--link) }
.day span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }

@media (max-width: 640px) {
  body { font-size: 18px }
  .facade { padding: 0 8px }
  .door { padding: 30px 4px 32px }
  .wide { display: none } .roof.narrow, .steps.narrow { display: block }
  .hall { grid-template-columns: 10% 1fr 10%; margin: 0 2.857% }
  .door > .meta { font-size: 12px }
  .sub { font-size: 14.5px; margin-bottom: 20px }
  .door form, .joinbox form { flex-direction: column; max-width: 250px; gap: 6px; margin-bottom: 8px }
  .door form input, .door form button, .joinbox input, .joinbox button { font-size: 16px; padding: 10px 12px }
  .ways { gap: 6px }
  .ways a, .ways button { font-size: 14.5px; padding: 5px 9px }
  .sheet-page { padding: 20px 10px 50px }
  .hd { flex-wrap: wrap; row-gap: 12px }
  .hd .mark { white-space: nowrap }
  .hd nav { gap: 14px; font-size: 15.5px }
  .sheet .head, .sheet .body { padding-left: 18px; padding-right: 18px }
  .months { gap: 26px }
  .wk { display: block }
  .wk em, .wk i { display: none }
  .day { display: flex; gap: 10px; height: auto; margin-bottom: 2px; padding: 6px 10px; font-size: 14px; hyphens: none }
  .day b { flex: none; width: 20px; margin: 0; font-size: 14px }
  .day span { display: block }
}