/* cryptids.dev — shared styles. Design spec: the "cryptids.dev site design" project doc. */

/* ---------- fonts (self-hosted, SIL OFL) ---------- */
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url("/assets/fonts/kalam-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url("/assets/fonts/kalam-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url("/assets/fonts/kalam-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url("/assets/fonts/kalam-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 800; font-display: swap; src: url("/assets/fonts/figtree-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/assets/fonts/figtree-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/assets/fonts/figtree-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/assets/fonts/figtree-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 800; font-display: swap; src: url("/assets/fonts/figtree-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens ---------- */
:root {
  --pink: #fd95ff; --pink-light: #ffc6f5;
  --amber: #ffd48a; --amber-hover: #ffe9c2;
  --sky: #79caf5; --sky-light: #b9e3fb;
  --text: #eadfd6; --white: #ffffff; --ground: #120f33;
  --paper: #f6efe6; --ink: #241a33; --ink-accent: #7a2f7f; --ink-soft: #6b5a74;
  --gutter: 64px;
  --display: "Kalam", cursive;
  --body: "Figtree", system-ui, sans-serif;
  /* backdrop ground lines, measured up from the page bottom */
  --g-near: 100px; --g-mid: 500px; --g-far: 750px;
  --s: 1;         /* backdrop scale */
  --k: 1;         /* paper-wear scale */
  --tk: 1;        /* paper tilt scale */
}
@media (min-width: 1600px) { :root { --s: 1.12; } }
@media (min-width: 1920px) { :root { --s: 1.34; } }
@media (min-width: 2560px) { :root { --s: 1.78; } }
@media (min-width: 3440px) { :root { --s: 2.39; } }
@media (min-width: 3840px) { :root { --s: 2.67; } }
@media (min-width: 5120px) { :root { --s: 3.56; } }
@media (max-width: 640px) {
  :root { --gutter: 16px; --g-near: 60px; --g-mid: 300px; --g-far: 450px; --s: .55; --k: .6; --tk: .36; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: #f6efe6; line-height: 1.5; }
img { max-width: 100%; }
a { color: var(--amber); }
a:hover { color: var(--amber-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--amber-hover); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--amber); color: #2a1a05; font-weight: 800; }
.skip:focus { left: 8px; }

.page {
  position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; overflow: clip; /* clip, not hidden: hidden would make .page a scroll container and freeze the parallax timeline */
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #8c3f93 0%, #6a2f86 19%, #43266f 45%, #261d58 67.5%, #16123f 85%, #120f33 95%);
}
main { position: relative; z-index: 1; flex: 1 0 auto; padding-bottom: 120px; }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 2; height: 96px; padding: 0 var(--gutter); display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #f6efe6; }
.brand img { width: 58px; height: 50px; object-fit: contain; }
.brand span { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1; }
.main-nav { display: flex; gap: 6px; margin-left: auto; font-weight: 600; font-size: 16px; }
.main-nav a, .menu nav a { padding: 10px 16px; border-radius: 12px; color: var(--text); text-decoration: none; }
.main-nav a:hover, .menu nav a:hover { color: var(--white); background: rgba(255, 255, 255, .06); }
.main-nav a[aria-current="page"], .menu nav a[aria-current="page"] { background: rgba(255, 212, 138, .16); color: var(--amber); }
.login { height: 44px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 12px; background: var(--pink); color: #2a0b33; font-weight: 800; font-size: 15px; text-decoration: none; }
.login:hover { background: var(--pink-light); color: #2a0b33; }
.menu-button { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); cursor: pointer; padding: 13px 12px; flex-direction: column; justify-content: space-between; }
.menu-button span { display: block; height: 3px; border-radius: 2px; background: var(--white); }

.menu { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(320px, 86vw); padding: 0; border: 0; background: #16123f; color: var(--text); box-shadow: -20px 0 50px rgba(8, 5, 25, .6); }
.menu::backdrop { background: rgba(8, 5, 25, .6); }
.menu-inner { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.menu-close { align-self: flex-end; width: 48px; height: 48px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .08); color: var(--white); font-size: 30px; line-height: 1; cursor: pointer; }
.menu nav { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 19px; }
.menu nav a { padding: 14px 16px; }
.menu .login { margin-top: 10px; justify-content: center; height: 52px; font-size: 17px; }

@media (max-width: 900px) {
  .main-nav, .site-header > .login { display: none; }
  .menu-button { display: flex; }
}
@media (max-width: 640px) {
  .site-header { height: 76px; gap: 12px; }
  .brand img { width: 46px; height: 40px; }
  .brand span { font-size: 22px; }
}

/* ---------- footer ---------- */
.site-footer { position: relative; z-index: 1; padding: 30px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 15px; color: #d4c8c0; background: var(--ground); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-left: auto; }
.site-footer a { color: #d4c8c0; }
@media (max-width: 640px) { .site-footer nav { margin-left: 0; } }

/* ---------- backdrop ---------- */
.backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; timeline-scope: --backdrop; }
.backdrop-anchor { position: absolute; left: 0; right: 0; bottom: 0; height: 1000px; view-timeline-name: --backdrop; }
.px { position: absolute; left: 50%; width: 1440px; margin-left: -720px; height: var(--h); top: calc(100% - var(--g) - var(--gy)); }
.px-far { --g: var(--g-far); --amp: 220px; }
.px-mid { --g: var(--g-mid); --amp: 120px; }
.px-near { --g: var(--g-near); --amp: 40px; }
.lyr { position: absolute; inset: 0; transform: scale(var(--s)); transform-origin: 50% var(--gy); }
.lyr svg { position: absolute; left: 0; top: 0; display: block; }
.bulb { position: absolute; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px 3px var(--glow); animation: twinkle ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .66; } to { opacity: 1; } }
@supports (animation-timeline: view()) {
  /* Layers lag behind the page as the forest scrolls into view, and settle into
     the designed composition exactly when the page reaches the bottom. */
  @keyframes drift { from { transform: translateY(calc(var(--amp) * -1)); } to { transform: none; } }
  .px { animation: drift linear both; animation-timeline: --backdrop; animation-range: entry 0% exit 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .bulb, .px { animation: none !important; }
}

/* ---------- shared content ---------- */
.section { position: relative; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; }
.lift > p, .lift > h1, .lift > h2, .lift .kicker, .lift .halo { text-shadow: 0 0 10px rgba(22, 18, 63, .9), 0 0 22px rgba(22, 18, 63, .7); }
.kicker { font-size: 14px; font-weight: 800; letter-spacing: .24em; color: var(--pink-light); text-transform: uppercase; }
.page-title { margin: 20px 0 0; font-family: var(--display); font-weight: 700; font-size: 72px; line-height: 1; color: var(--white); }
.tagline { margin: 14px 0 0; max-width: 760px; font-size: 19px; line-height: 1.65; color: var(--text); }
.h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1.1; color: var(--amber); }
.body-copy { max-width: 760px; font-size: 17px; line-height: 1.65; color: var(--text); }
.body-copy strong { color: var(--white); }
@media (max-width: 640px) {
  .page-title { font-size: 52px; }
  .h2 { font-size: 38px; }
  .tagline { font-size: 17px; }
}

/* ---------- admission tickets ---------- */
.ticket {
  display: flex; text-decoration: none; border-radius: 10px; color: var(--t-ink);
  background: var(--t-bg);
  -webkit-mask: radial-gradient(circle 16px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 16px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  transition: transform .15s ease, filter .15s ease;
}
.ticket:hover { color: var(--t-ink); transform: translateY(-3px); filter: brightness(1.05); }
.ticket-pink  { --t-bg: var(--pink);  --t-ink: #2a0b33; --t-dash: rgba(42, 11, 51, .45); }
.ticket-sky   { --t-bg: var(--sky);   --t-ink: #0b2233; --t-dash: rgba(11, 34, 51, .45); }
.ticket-amber { --t-bg: var(--amber); --t-ink: #2a1a05; --t-dash: rgba(42, 26, 5, .45); }
.ticket-main { flex-grow: 1; padding: 22px 22px 20px 36px; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: left; }
.ticket-kicker { font-size: 13px; font-weight: 800; letter-spacing: .22em; }
.ticket-title { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; }
.ticket-text { font-size: 16px; line-height: 1.45; font-weight: 600; }
.ticket-stub { width: 104px; flex-shrink: 0; border-left: 2px dashed var(--t-dash); display: flex; align-items: center; justify-content: center; padding: 0 16px 0 10px; font-weight: 800; font-size: 15px; text-align: center; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .ticket { transition: none; } .ticket:hover { transform: none; } }

/* ---------- posted notices (paper) ---------- */
.sheet { position: relative; width: 100%; max-width: 860px; margin-top: 44px; filter: drop-shadow(0 24px 30px rgba(8, 5, 25, .55)); transform: rotate(calc(var(--tilt) * var(--tk))); }
.sheet.wide { max-width: 900px; }
.paper {
  position: relative; overflow: hidden; padding: 56px 64px 58px; color: var(--ink); text-align: left; border-radius: 6px;
  background: radial-gradient(ellipse 120% 90% at var(--ex) var(--ey), rgba(0, 0, 0, 0) 62%, rgba(120, 84, 40, var(--edge)) 100%), var(--paper);
  --c: calc(var(--curl) * var(--k));
}
.paper.curl-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%); }
.paper.curl-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.paper.curl-tr { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); }
.curl { position: absolute; width: calc(var(--curl) * var(--k)); height: calc(var(--curl) * var(--k)); }
.curl-br.curl { right: 0; bottom: 0; background: linear-gradient(315deg, rgba(0,0,0,0) 49%, #e3d6c2 50%, #efe4d3 72%, #d7c7ae 100%); clip-path: polygon(0 0, 100% 0, 0 100%); filter: drop-shadow(-3px -3px 3px rgba(60, 40, 20, .28)); }
.curl-bl.curl { left: 0; bottom: 0; background: linear-gradient(45deg, rgba(0,0,0,0) 49%, #e3d6c2 50%, #efe4d3 72%, #d7c7ae 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); filter: drop-shadow(3px -3px 3px rgba(60, 40, 20, .28)); }
.curl-tr.curl { right: 0; top: 0; background: linear-gradient(225deg, rgba(0,0,0,0) 49%, #e3d6c2 50%, #efe4d3 72%, #d7c7ae 100%); clip-path: polygon(0 0, 0 100%, 100% 100%); filter: drop-shadow(-3px 3px 3px rgba(60, 40, 20, .28)); }
.ring { position: absolute; width: calc(var(--w) * var(--k)); height: calc(var(--hh) * var(--k)); border-radius: 50%; transform: rotate(var(--rot));
  background: radial-gradient(ellipse at 50% 50%, rgba(150,104,52,0) 56%, rgba(150,104,52,var(--a)) 60%, rgba(150,104,52,var(--a2)) 64%, rgba(150,104,52,0) var(--end)); }
.smudge { position: absolute; width: calc(var(--w) * var(--k)); height: calc(var(--hh) * var(--k)); border-radius: 50%; background: rgba(150, 104, 52, var(--a)); }
.tack { position: absolute; left: calc(50% + var(--tx) * var(--k)); top: 16px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--tc); box-shadow: 0 3px 6px rgb(var(--tr) / .45), inset -3px -3px 0 rgb(var(--tr) / .18); }
.paper-body { position: relative; }
.paper a { color: var(--ink-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .paper { padding: 44px 22px 44px; }
}

/* ---------- home ---------- */
.banner { display: block; width: 100%; height: auto; aspect-ratio: 1733 / 766; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 52%, transparent 96%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 52%, transparent 96%); }
.about { margin-top: -70px; }
.about .mascot { width: 140px; height: 120px; object-fit: contain; }
.about h2 { margin: 12px 0 0; font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.1; color: var(--amber); }
.about .lead { margin: 14px 0 0; max-width: 720px; font-size: 23px; line-height: 1.5; font-weight: 600; color: var(--white); }
.about .copy { margin: 16px 0 0; max-width: 720px; font-size: 19px; line-height: 1.65; color: var(--text); }
.about .adults { margin: 18px 0 0; font-size: 16px; font-weight: 700; color: var(--pink-light); }
.join { display: flex; justify-content: center; gap: 16px; margin-top: 40px; }
.join a { height: 56px; box-sizing: border-box; display: flex; align-items: center; border-radius: 14px; font-weight: 700; font-size: 18px; text-decoration: none; }
.join .discord { padding: 0 26px; gap: 12px; background: #5865f2; color: #e0e3ff; }
.join .discord img { width: 139px; height: 21px; }
.join .vrchat { padding: 0 12px 0 24px; gap: 2px; background: #ffffff; color: #11131a; }
.join .vrchat img { width: 104px; height: 52px; }
.join a:hover { filter: brightness(1.07); }
.step { margin-top: 100px; }
.step h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1.05; color: var(--white); }
.step p { margin: 10px 0 0; font-size: 20px; line-height: 1.5; color: var(--text); }
.ticket-row { margin-top: 40px; width: 100%; max-width: 1312px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ticket-row .ticket { min-height: 172px; }
@media (max-width: 1100px) { .ticket-row { grid-template-columns: 1fr; max-width: 560px; gap: 20px; } .ticket-row .ticket { min-height: 140px; } }
@media (max-width: 640px) {
  .about { margin-top: 6px; }
  .about .mascot { width: 110px; height: 94px; }
  .about h2 { font-size: 40px; }
  .about .lead { font-size: 20px; }
  .about .copy { font-size: 17px; }
  .join { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
  .join a { justify-content: center; }
  .step { margin-top: 72px; }
  .step h2 { font-size: 44px; }
  .step p { font-size: 17px; }
  .ticket-title { font-size: 28px; }
  .ticket-main { padding: 18px 16px 16px 30px; }
  .ticket-stub { width: 86px; padding: 0 14px 0 8px; font-size: 14px; }
}

/* ---------- rules ---------- */
.rules-list { margin: 0; padding-left: 34px; font-size: 19px; line-height: 1.55; }
.rules-list li { padding-left: 10px; }
.rules-list li + li { margin-top: 14px; }
.closing-note { margin: 48px 0 0; }
.cta { margin-top: 28px; width: 100%; max-width: 460px; min-height: 118px; }
@media (max-width: 640px) {
  .apply .ticket-title { font-size: 22px; }
  .apply .ticket-stub { width: 84px; font-size: 15px; }
}
@media (max-width: 640px) { .rules-list { padding-left: 24px; font-size: 17px; } .rules-list li { padding-left: 4px; } }

/* ---------- mod team ---------- */
.apply { margin-top: 40px; width: 100%; max-width: 760px; min-height: 150px; }
.apply .ticket-title { font-size: 29px; }
.apply .ticket-text { font-size: 15px; }
.apply .ticket-stub { width: 120px; font-size: 17px; }
.photo { position: relative; margin: 34px 0 0; width: 100%; max-width: 600px; padding: 14px 14px 46px; background: var(--paper); border-radius: 4px; transform: rotate(calc(1.2deg * var(--tk))); box-shadow: 0 22px 50px rgba(8, 5, 25, .55); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 721; border-radius: 8px; }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 10px; font-family: var(--display); font-weight: 700; font-size: 21px; color: #3a2a4a; }
.photo .pin { position: absolute; left: 50%; top: -9px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--sky); box-shadow: 0 3px 6px rgba(11, 34, 51, .45), inset -3px -3px 0 rgba(11, 34, 51, .2); }
.role + .role { margin-top: 26px; }
.role-head { margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px dashed rgba(122, 47, 127, .3); display: flex; align-items: baseline; gap: 16px; }
.role-head h3 { margin: 0; flex-shrink: 0; font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--ink-accent); }
.role-head p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
.people { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.people .name { display: block; font-size: 19px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.people .pronouns { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-soft); }
.conduct-sub { margin: 12px 0 0; }
.conduct details { border-top: 1px solid rgba(122, 47, 127, .22); padding: 16px 0; }
.conduct details:last-child { border-bottom: 1px solid rgba(122, 47, 127, .22); }
.conduct summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; font-family: var(--display); font-weight: 700; font-size: 27px; color: var(--ink); }
.conduct summary::-webkit-details-marker { display: none; }
.conduct summary .chev { font-family: var(--body); font-size: 18px; color: var(--ink-accent); transition: transform .15s ease; }
.conduct details[open] summary .chev { transform: rotate(90deg); }
.conduct summary .num { color: var(--ink-accent); }
.conduct .body { padding: 4px 0 6px 34px; }
.conduct .body p { margin: 12px 0 0; font-size: 17px; line-height: 1.65; color: #2b2140; }
.conduct .body h2, .conduct .body h3, .conduct .body h4, .conduct .body h5 { margin: 22px 0 6px; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--ink-accent); }
.conduct .body blockquote { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--ink-accent); background: rgba(122, 47, 127, .08); border-radius: 0 8px 8px 0; }
.conduct .body blockquote p { margin: 0; font-size: 16px; }
.conduct .body ul, .conduct .body ol { margin: 12px 0 0; padding-left: 24px; font-size: 17px; line-height: 1.65; color: #2b2140; }
@media (prefers-reduced-motion: reduce) { .conduct summary .chev { transition: none; } }
@media (max-width: 900px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .role-head { flex-direction: column; gap: 2px; }
  .people .name { font-size: 17px; }
  .conduct summary { font-size: 23px; gap: 10px; }
  .conduct .body { padding-left: 12px; }
  .conduct .body p { font-size: 16px; }
}

/* ---------- events ---------- */
.calendar-panel { margin-top: 44px; width: 100%; max-width: 900px; border-radius: 16px; overflow: hidden; background: rgba(14, 11, 40, .86); border: 1px solid rgba(255, 212, 138, .25); text-align: left; }
.calendar-bar { padding: 14px 20px 14px 26px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(255, 212, 138, .2); }
.calendar-bar .name { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--amber); }
.calendar-bar .by { font-size: 14px; color: #cbb8d8; }
.calendar-bar a { margin-left: auto; height: 40px; padding: 0 18px; display: flex; align-items: center; border-radius: 12px; background: var(--amber); color: #2a1a05; font-weight: 800; font-size: 15px; text-decoration: none; }
.calendar-bar a:hover { background: var(--amber-hover); color: #2a1a05; }
.calendar-panel iframe { display: block; width: 100%; height: 860px; border: 0; background: #3d0035; }
.calendar-phone { display: none; }
@media (max-width: 760px) {
  .calendar-panel { display: none; }
  .calendar-phone { display: flex; margin-top: 36px; width: 100%; max-width: 460px; min-height: 118px; }
}