/* The homepage and /credits/: the 2D Club page, "morning light" (ported from the Club prototype, Jason approved 2026-10-08).
   A plain stylesheet, not Tailwind, so the approved page ports as built. The colours below are the same values as the
   club-* palette in tailwind.config.js; change both together. Fonts are the site's own self-hosted files (CSP font-src 'self'). */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2')}
:root{--cream:#fbf6ee;--ink:#23302a;--muted:#6f6455;--garnet:#9a2a36;--line:#e6dccb;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
html{background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--garnet);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:8px;z-index:50;text-decoration:none}
.skip:focus{top:12px}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(251,246,238,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar-in{max-width:1200px;margin:0 auto;padding:6px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.mark{font-family:var(--serif);font-size:24px;font-weight:600;text-decoration:none;letter-spacing:.01em;min-height:44px;display:inline-flex;align-items:center}
.bar-btns{display:flex;gap:2px}
.btn-quiet{font:500 15px/1 var(--sans);color:var(--ink);background:transparent;border:1px solid transparent;border-radius:999px;min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.btn-quiet:hover{background:#f1e8d8}
.btn-quiet[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.btn-quiet[disabled]{opacity:.5;cursor:default}
.menu{max-width:1200px;margin:0 auto;padding:4px 20px 16px;display:grid}
.menu[hidden]{display:none}
.menu a{display:flex;align-items:center;min-height:48px;font-size:17px;text-decoration:none;border-top:1px solid var(--line)}
.menu a:hover{color:var(--garnet)}
@media (min-width:860px){
  .menu{position:absolute;right:20px;top:60px;width:280px;max-width:none;margin:0;padding:8px 20px;background:var(--cream);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(35,48,42,.08)}
  .menu a:first-child{border-top:0}
}

/* hero */
.hero{max-width:1200px;margin:0 auto;padding:28px 20px 56px;display:grid;gap:24px;justify-items:center;text-align:center}
.hero-art{position:relative;width:min(220px,62vw);padding-bottom:18px}
.arch{border-radius:999px 999px 12px 12px;width:100%;aspect-ratio:4/5;object-fit:cover;background:#efe6d6}
.gems{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:9px;position:absolute;left:0;right:0;bottom:0}
.gems li{width:20px;height:20px;border-radius:5px;background:var(--g);transform:rotate(45deg) scale(.82);box-shadow:0 0 0 2px var(--cream)}
.eyebrow{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font:500 clamp(32px,8.4vw,60px)/1.08 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.tag{margin:14px 0 24px;font:italic 500 clamp(19px,4.6vw,26px)/1.3 var(--serif);color:var(--muted)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;background:var(--garnet);color:#fff;font:600 17px/1 var(--sans);border-radius:999px;text-decoration:none}
.btn-primary:hover{background:#862230}
.fine{margin:14px auto 0;max-width:30ch;font-size:15px;color:var(--muted)}
@media (min-width:860px){
  .hero{grid-template-columns:1.1fr 1fr;grid-template-areas:"copy art";align-items:center;text-align:left;justify-items:start;gap:64px;padding:72px 20px 96px}
  .hero-copy{grid-area:copy}
  .hero-art{grid-area:art;width:min(100%,460px);justify-self:center;padding-bottom:26px}
  .gems{gap:16px}
  .gems li{width:26px;height:26px;border-radius:6px}
  .fine{margin-left:0}
}

/* groups and cards */
.group{max-width:1200px;margin:0 auto;padding:40px 20px 24px;scroll-margin-top:60px}
h2{margin:0;font:500 clamp(28px,5vw,40px)/1.15 var(--serif)}
.group-line{margin:10px 0 32px;max-width:52ch;font-size:17px;color:var(--muted)}
.cards{display:grid;gap:28px;grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;min-width:0;text-decoration:none;transition:transform .25s ease}
a.card:hover{transform:translateY(-4px)}
.card-body{padding-top:14px;display:flex;flex-direction:column;gap:4px}
.card-name{display:flex;align-items:center;gap:10px;font:600 21px/1.2 var(--serif)}
.dot{flex:none;width:11px;height:11px;border-radius:3px;background:var(--g);transform:rotate(45deg)}
.card-room{font-size:13px;line-height:1.35;color:var(--muted);letter-spacing:.01em}
.card-hero{margin:4px 0 0;font-size:15px;line-height:1.45}
.card-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.card-links a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--garnet);text-decoration:underline;text-underline-offset:4px}
@media (max-width:959px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}
@media (max-width:639px){
  .group{padding:28px 20px 12px}
  .group-line{margin-bottom:20px}
  .cards{grid-template-columns:1fr;gap:0}
  .card{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line);min-height:44px}
  .cards .card:last-child{border-bottom:1px solid var(--line)}
  a.card:hover{transform:none}
  .card-body{padding-top:0;gap:2px}
  .card-name{font-size:19px}
  .card-room{display:none}
  .card-hero{margin:0;font-size:15px}
}

/* coming up */
.coming{padding-bottom:16px}
.coming[hidden]{display:none}
.events{list-style:none;margin:24px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.events li{display:flex;gap:16px;align-items:center;padding:18px 20px;background:#f5ecdd;border-radius:16px}
.date{flex:none;width:56px;text-align:center;font-family:var(--serif)}
.date b{display:block;font-weight:600;font-size:30px;line-height:1}
.date span{display:block;margin-top:4px;font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--garnet)}
.ev-short{font:600 19px/1.25 var(--serif);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-when{margin-top:2px;font-size:13px;color:var(--muted);line-height:1.4}
.more{display:inline-flex;align-items:center;min-height:48px;margin-top:8px;font-weight:600;color:var(--garnet);text-underline-offset:4px}
@media (max-width:759px){.events{grid-template-columns:1fr;gap:12px}}

/* footer */
.foot{margin-top:56px;border-top:1px solid var(--line);padding:32px 20px 48px;text-align:center;color:var(--muted);font-size:14px}
.foot p{margin:6px auto;max-width:60ch}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin-bottom:14px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink);text-underline-offset:4px}
.credits{display:inline-flex;align-items:center;min-height:28px;font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,a.card:hover{transition:none;transform:none}
}

/* credits page (/credits/) */
.credits-page{max-width:820px;margin:0 auto;padding:56px 20px 8px}
.credits-page h1{margin:0 0 40px;font:500 clamp(36px,6vw,52px)/1.1 var(--serif)}
.credits-page section{margin-bottom:48px}
.credits-page .group-line a,.credit-list a{color:var(--garnet);text-underline-offset:4px}
.credit-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.credit-list li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr);gap:4px 16px;align-items:center;min-height:52px;padding:8px 0;border-bottom:1px solid var(--line);font-size:16px}
.credit-list .where{color:var(--muted);font-size:14px}
.credit-list a{display:inline-flex;align-items:center;min-height:44px}
.credit-list .who{text-align:right}
@media (max-width:639px){
  .credit-list li{grid-template-columns:1fr auto}
  .credit-list .where{grid-column:1 / -1}
}