/*
 * HN Tokyo design system
 * Tokens are documented in /DESIGN.md (see "The Quiet Workshop").
 * Project-namespaced custom properties use the --hnt-* prefix.
 * Shoelace tokens (--sl-*) are overridden in :root so existing
 * <sl-button>, <sl-card>, <sl-alert>, <sl-badge> components inherit
 * the system without per-component restyling.
 */

/* Hide Shoelace components until they're upgraded by the autoloader (prevents FOUC) */
:not(:defined) {
  visibility: hidden;
}

/* ------------------------------------------------------------------------ */
/* Fonts                                                                     */
/* Switzer is loaded via Fontshare's CDN <link> in base.html.                */
/* Commit Mono is loaded from Fontsource on jsdelivr.                        */
/* ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Commit Mono';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@latest/files/commit-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Commit Mono';
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/commit-mono@latest/files/commit-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------------ */
/* Tokens                                                                    */
/* ------------------------------------------------------------------------ */

:root {
  /* Color: identity */
  --hnt-wood: oklch(0.62 0.13 65);
  --hnt-wood-deep: oklch(0.50 0.12 62);
  --hnt-wood-soft: oklch(0.94 0.04 70);

  /* Color: neutrals (warm) */
  --hnt-cream: oklch(0.98 0.008 75);
  --hnt-paper: oklch(0.96 0.008 75);
  --hnt-concrete: oklch(0.88 0.006 75);
  --hnt-concrete-soft: oklch(0.93 0.005 75);
  --hnt-wood-brown: oklch(0.30 0.05 60);
  --hnt-ink: oklch(0.22 0.015 65);
  --hnt-muted: oklch(0.50 0.012 70);

  /* Color: functional */
  --hnt-leaf: oklch(0.50 0.10 145);
  --hnt-coral: oklch(0.58 0.16 30);
  --hnt-focus: oklch(0.62 0.13 65 / 0.35);

  /* Type */
  --hnt-font-sans: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hnt-font-mono: 'Commit Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --hnt-text-xs: 0.75rem;
  --hnt-text-sm: 0.875rem;
  --hnt-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --hnt-text-lg: 1.125rem;
  --hnt-text-title: clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem);
  --hnt-text-headline: clamp(1.875rem, 1.7rem + 0.875vw, 2.25rem);
  --hnt-text-display: clamp(3rem, 2.5rem + 2.5vw, 4.5rem);

  /* Shape */
  --hnt-radius-sm: 3px;
  --hnt-radius-md: 6px;
  --hnt-radius-lg: 12px;

  /* Spacing (alongside Shoelace's --sl-spacing-* scale) */
  --hnt-spacing-xs: 4px;
  --hnt-spacing-sm: 8px;
  --hnt-spacing-md: 16px;
  --hnt-spacing-lg: 24px;
  --hnt-spacing-xl: 40px;
  --hnt-spacing-2xl: 64px;

  /* Elevation: structural shadow only; flat by default */
  --hnt-shadow-structural: 0 8px 24px -8px oklch(0.30 0.05 60 / 0.18);
  --hnt-shadow-popover: 0 4px 12px -4px oklch(0.30 0.05 60 / 0.12);

  /* Motion */
  --hnt-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quart */
  --hnt-duration-fast: 120ms;
  --hnt-duration-base: 180ms;

  /* ----------------------------------------------------------------- */
  /* Shoelace overrides: primary ramp -> Light Cedar wood family       */
  /* ----------------------------------------------------------------- */
  --sl-color-primary-50: oklch(0.97 0.02 70);
  --sl-color-primary-100: oklch(0.94 0.04 70);
  --sl-color-primary-200: oklch(0.88 0.07 68);
  --sl-color-primary-300: oklch(0.80 0.10 67);
  --sl-color-primary-400: oklch(0.72 0.12 66);
  --sl-color-primary-500: var(--hnt-wood);
  --sl-color-primary-600: oklch(0.55 0.13 63);
  --sl-color-primary-700: var(--hnt-wood-deep);
  --sl-color-primary-800: oklch(0.40 0.10 59);
  --sl-color-primary-900: oklch(0.32 0.08 58);
  --sl-color-primary-950: oklch(0.24 0.06 57);

  /* Shoelace overrides: neutral ramp -> warm-gray, no slate */
  --sl-color-neutral-0: oklch(0.99 0.005 75);
  --sl-color-neutral-50: var(--hnt-cream);
  --sl-color-neutral-100: var(--hnt-paper);
  --sl-color-neutral-200: var(--hnt-concrete-soft);
  --sl-color-neutral-300: var(--hnt-concrete);
  --sl-color-neutral-400: oklch(0.75 0.008 75);
  --sl-color-neutral-500: var(--hnt-muted);
  --sl-color-neutral-600: oklch(0.40 0.015 65);
  --sl-color-neutral-700: var(--hnt-wood-brown);
  --sl-color-neutral-800: oklch(0.25 0.018 65);
  --sl-color-neutral-900: var(--hnt-ink);
  --sl-color-neutral-950: oklch(0.16 0.012 65);
  --sl-color-neutral-1000: oklch(0.10 0.010 65);

  /* Shoelace overrides: success ramp -> leaf */
  --sl-color-success-50: oklch(0.96 0.02 145);
  --sl-color-success-100: oklch(0.92 0.04 145);
  --sl-color-success-500: var(--hnt-leaf);
  --sl-color-success-600: oklch(0.45 0.10 145);
  --sl-color-success-700: oklch(0.38 0.09 145);

  /* Shoelace overrides: danger ramp -> coral */
  --sl-color-danger-50: oklch(0.97 0.02 30);
  --sl-color-danger-100: oklch(0.93 0.05 30);
  --sl-color-danger-500: var(--hnt-coral);
  --sl-color-danger-600: oklch(0.52 0.16 30);
  --sl-color-danger-700: oklch(0.44 0.14 30);

  /* Shoelace overrides: warning ramp -> warm amber (slightly more orange than wood) */
  --sl-color-warning-50: oklch(0.97 0.04 80);
  --sl-color-warning-100: oklch(0.93 0.08 80);
  --sl-color-warning-500: oklch(0.70 0.13 78);
  --sl-color-warning-600: oklch(0.62 0.13 76);

  /* Shoelace overrides: type */
  --sl-font-sans: var(--hnt-font-sans);
  --sl-font-mono: var(--hnt-font-mono);

  /* Shoelace overrides: radius */
  --sl-border-radius-small: var(--hnt-radius-sm);
  --sl-border-radius-medium: var(--hnt-radius-md);
  --sl-border-radius-large: 8px;
  --sl-border-radius-x-large: var(--hnt-radius-lg);
  --sl-border-radius-pill: 9999px;
  --sl-border-radius-circle: 50%;

  /* Shoelace overrides: shadows. Flat by default; structural only at large. */
  --sl-shadow-x-small: none;
  --sl-shadow-small: none;
  --sl-shadow-medium: var(--hnt-shadow-popover);
  --sl-shadow-large: var(--hnt-shadow-structural);
  --sl-shadow-x-large: var(--hnt-shadow-structural);

  /* Shoelace overrides: focus ring */
  --sl-focus-ring-color: var(--hnt-focus);
  --sl-focus-ring-width: 3px;
  --sl-focus-ring-offset: 2px;
  --sl-focus-ring: solid var(--sl-focus-ring-width) var(--sl-focus-ring-color);

  /* Legacy aliases. The original style.css used --text-color, --bg-color,    */
  /* --card-bg, --border-color, --text-muted; existing rules below still      */
  /* reference these names, so map them onto the new tokens.                  */
  --text-color: var(--hnt-ink);
  --text-muted: var(--hnt-muted);
  --bg-color: var(--hnt-cream);
  --card-bg: var(--hnt-cream);
  --border-color: var(--hnt-concrete);
}

/* ------------------------------------------------------------------------ */
/* Reset                                                                     */
/* ------------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------------------ */
/* Base                                                                      */
/* ------------------------------------------------------------------------ */

body {
  font-family: var(--hnt-font-sans);
  font-size: var(--hnt-text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--hnt-ink);
  background-color: var(--hnt-cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hnt-font-sans);
  color: var(--hnt-wood-brown);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h1 { font-size: var(--hnt-text-headline); }
h2 { font-size: var(--hnt-text-headline); }
h3 { font-size: var(--hnt-text-title); }
h4 { font-size: var(--hnt-text-lg); }
h5, h6 { font-size: var(--hnt-text-base); }

p {
  max-width: 70ch;
}

a {
  color: var(--hnt-wood-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--hnt-duration-fast) var(--hnt-ease-out);
}

a:hover {
  color: var(--hnt-ink);
}

a:focus-visible {
  outline: 3px solid var(--hnt-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

code, pre, kbd, samp {
  font-family: var(--hnt-font-mono);
  font-size: 0.9em;
}

::selection {
  background: var(--hnt-wood-soft);
  color: var(--hnt-ink);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: var(--hnt-spacing-md);
}

/* ------------------------------------------------------------------------ */
/* Navigation                                                                */
/* ------------------------------------------------------------------------ */

.navbar {
  background-color: var(--hnt-cream);
  border-bottom: 1px solid var(--hnt-concrete);
  padding: var(--hnt-spacing-sm) 0;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-size: var(--hnt-text-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hnt-wood-brown);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--hnt-wood-deep);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--hnt-spacing-xs);
}

/* ------------------------------------------------------------------------ */
/* Main                                                                      */
/* ------------------------------------------------------------------------ */

main {
  flex: 1;
  padding-block: var(--hnt-spacing-xl) clamp(56px, 7vw, 96px);
}

/* When the page leads with a hero, drop main's top padding so the image
   sits flush under the navbar. Other pages keep the standard gap. */
main:has(.hero:first-child) {
  padding-top: 0;
}

.messages {
  margin-bottom: var(--hnt-spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--hnt-spacing-sm);
}

/* ------------------------------------------------------------------------ */
/* Hero                                                                      */
/* ------------------------------------------------------------------------ */

.hero {
  text-align: center;
  padding: var(--hnt-spacing-2xl) 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.hero h1 {
  font-size: var(--hnt-text-display);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--hnt-spacing-md);
  max-width: 18ch;
  margin-inline: auto;
}

.hero p {
  font-size: var(--hnt-text-lg);
  color: var(--hnt-muted);
  margin-bottom: var(--hnt-spacing-lg);
  max-width: 50ch;
  margin-inline: auto;
}

/* Hero with text overlaid on image */
.hero--overlay {
  padding: 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}

.hero--overlay .hero-image {
  position: relative;
}

.hero--overlay .hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(0.22 0.015 65 / 0.20) 0%,
    oklch(0.22 0.015 65 / 0.55) 100%
  );
}

.hero--overlay .hero-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.hero--overlay .hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--hnt-spacing-xl) var(--hnt-spacing-lg);
  z-index: 1;
}

.hero--overlay h1 {
  color: var(--hnt-cream);
  text-shadow: 0 2px 8px oklch(0.22 0.015 65 / 0.4);
}

.hero--overlay p {
  color: oklch(0.98 0.008 75 / 0.92);
  text-shadow: 0 1px 4px oklch(0.22 0.015 65 / 0.4);
}

.cta {
  display: flex;
  gap: var(--hnt-spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------------ */
/* Divider                                                                   */
/* ------------------------------------------------------------------------ */

.divider {
  display: flex;
  align-items: center;
  margin: var(--hnt-spacing-lg) 0;
  color: var(--hnt-muted);
  font-size: var(--hnt-text-sm);
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--hnt-concrete);
}

.divider span {
  padding: 0 var(--hnt-spacing-md);
}

/* ------------------------------------------------------------------------ */
/* Forms                                                                     */
/* ------------------------------------------------------------------------ */

.auth-form {
  max-width: 420px;
  margin: 0 auto;
  background-color: var(--hnt-cream);
  padding: var(--hnt-spacing-xl);
  border: 1px solid var(--hnt-concrete);
  border-radius: var(--hnt-radius-md);
}

.auth-form h1 {
  margin-bottom: var(--hnt-spacing-lg);
  text-align: center;
}

.auth-form p {
  margin-bottom: var(--hnt-spacing-md);
}

.auth-form label,
.form-stacked label {
  display: block;
  margin-bottom: var(--hnt-spacing-xs);
  font-weight: 500;
  color: var(--hnt-wood-brown);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form textarea,
.auth-form select,
.form-stacked input[type="text"],
.form-stacked input[type="email"],
.form-stacked input[type="password"],
.form-stacked input[type="url"],
.form-stacked input[type="number"],
.form-stacked textarea,
.form-stacked select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hnt-concrete);
  border-radius: var(--hnt-radius-sm);
  font-size: var(--hnt-text-base);
  font-family: var(--hnt-font-sans);
  background-color: var(--hnt-cream);
  color: var(--hnt-ink);
  margin-bottom: var(--hnt-spacing-xs);
  transition: border-color var(--hnt-duration-fast) var(--hnt-ease-out);
}

.auth-form input[type="checkbox"],
.form-stacked input[type="checkbox"] {
  margin-right: var(--hnt-spacing-sm);
}

.auth-form input:focus,
.auth-form textarea:focus,
.auth-form select:focus,
.form-stacked input:focus,
.form-stacked textarea:focus,
.form-stacked select:focus {
  outline: none;
  border-color: var(--hnt-wood-deep);
  box-shadow: 0 0 0 3px var(--hnt-focus);
}

.form-stacked p {
  margin-bottom: var(--hnt-spacing-sm);
}

.form-stacked .helptext {
  display: block;
  color: var(--hnt-muted);
  font-size: var(--hnt-text-sm);
  margin: 0 0 var(--hnt-spacing-md);
}

.form-stacked ul.errorlist {
  color: var(--hnt-coral);
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--hnt-spacing-sm);
}

.auth-form button {
  width: 100%;
  margin-top: var(--hnt-spacing-sm);
}

.auth-link {
  text-align: center;
  margin-top: var(--hnt-spacing-md);
  color: var(--hnt-muted);
}

.auth-link a {
  color: var(--hnt-wood-deep);
}

/* ------------------------------------------------------------------------ */
/* Dashboard                                                                 */
/* ------------------------------------------------------------------------ */

.dashboard {
  max-width: 720px;
  margin-inline: auto;
}

.dashboard h1 {
  margin-bottom: var(--hnt-spacing-xl);
}

/* Each major dashboard section (Projects, Past events, …) is wrapped in     */
/* a <section class="dashboard-section"> with a header row that puts the     */
/* section title on the left and an optional link on the right.              */

.dashboard-section {
  margin-top: var(--hnt-spacing-2xl);
}

.dashboard-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hnt-spacing-md);
  margin-bottom: var(--hnt-spacing-md);
  flex-wrap: wrap;
}

.dashboard-section__header h2 {
  font-size: var(--hnt-text-title);
  margin: 0;
}

.dashboard-section__meta {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-muted);
  margin: 0 0 var(--hnt-spacing-md);
}

.dashboard-section__action {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--hnt-spacing-md);
  margin-block: var(--hnt-spacing-md);
}

.dashboard > p {
  color: var(--hnt-muted);
  margin-bottom: var(--hnt-spacing-xl);
}

.dashboard-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hnt-spacing-lg);
}

/* Attendee list inside an .event-card (dashboard "Also checked in: ...").    */
/* Plain muted text, never the Light Cedar link color — the volume of names   */
/* would otherwise dominate the page and break the Restrained Rule.           */

.event-card__attendees {
  color: var(--hnt-muted);
  font-size: var(--hnt-text-sm);
  line-height: 1.6;
  margin: var(--hnt-spacing-sm) 0 0;
}

.event-card__attendees a {
  color: var(--hnt-muted);
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color var(--hnt-duration-fast) var(--hnt-ease-out),
              border-color var(--hnt-duration-fast) var(--hnt-ease-out);
}

.event-card__attendees a:hover {
  color: var(--hnt-ink);
  border-bottom-color: var(--hnt-muted);
}

/* ------------------------------------------------------------------------ */
/* Shoelace card overrides                                                   */
/* ------------------------------------------------------------------------ */

sl-card {
  display: block;
  --padding: var(--hnt-spacing-lg);
  --border-color: var(--hnt-concrete);
  --background-color: var(--hnt-cream);
}

sl-card h3 {
  margin-bottom: var(--hnt-spacing-sm);
}

sl-card p {
  color: var(--hnt-ink);
  margin-bottom: var(--hnt-spacing-sm);
}

sl-card p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------------ */
/* Profile                                                                   */
/* Product-register surface: capped at book measure (720px) for fast scan.   */
/* ------------------------------------------------------------------------ */

.profile {
  max-width: 720px;
  margin-inline: auto;
}

.profile h1 {
  margin-bottom: var(--hnt-spacing-lg);
}

.profile h2 {
  margin-top: var(--hnt-spacing-xl);
  margin-bottom: var(--hnt-spacing-md);
}

.profile-info {
  background-color: var(--hnt-cream);
  border: 1px solid var(--hnt-concrete);
  padding: var(--hnt-spacing-lg);
  border-radius: var(--hnt-radius-md);
  margin-bottom: var(--hnt-spacing-lg);
}

.profile-info p {
  margin-bottom: var(--hnt-spacing-sm);
}

.profile-detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--hnt-spacing-sm) var(--hnt-spacing-lg);
  margin: 0 0 var(--hnt-spacing-lg);
}

.profile-detail-list dt {
  font-weight: 500;
  color: var(--hnt-muted);
}

.profile-detail-list dd {
  margin: 0;
}

.profile > form {
  background-color: var(--hnt-cream);
  border: 1px solid var(--hnt-concrete);
  padding: var(--hnt-spacing-lg);
  border-radius: var(--hnt-radius-md);
}

.profile-actions {
  margin-top: var(--hnt-spacing-xl);
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: var(--hnt-spacing-md);
  border: 1px solid var(--hnt-concrete);
}

/* ------------------------------------------------------------------------ */
/* Projects (member-tool, product register)                                  */
/* The project list and the add/edit form live under /accounts/projects/.    */
/* Both surfaces inherit the .profile 720px cap when applicable; the form    */
/* uses its own narrower measure since forms scan faster at ~560px.          */
/* ------------------------------------------------------------------------ */

.project-list-actions {
  display: flex;
  align-items: center;
  gap: var(--hnt-spacing-md);
  margin: var(--hnt-spacing-md) 0 var(--hnt-spacing-lg);
  flex-wrap: wrap;
}

.btn-text-link {
  font-family: var(--hnt-font-sans);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-wood-deep);
  text-decoration: none;
  padding: 0;
}

.btn-text-link:hover {
  color: var(--hnt-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.project-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hnt-spacing-md);
  margin: 0;
  padding: 0;
}

.project-card {
  background-color: var(--hnt-cream);
  border: 1px solid var(--hnt-concrete);
  border-radius: var(--hnt-radius-md);
  padding: var(--hnt-spacing-md) var(--hnt-spacing-lg);
}

.project-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--hnt-spacing-sm);
  flex-wrap: wrap;
  margin: 0 0 var(--hnt-spacing-xs);
}

.project-card__title {
  font-size: var(--hnt-text-title);
  font-weight: 600;
  color: var(--hnt-wood-brown);
  margin: 0;
}

.project-card__kind {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hnt-muted);
}

.project-card__tagline {
  color: var(--hnt-ink);
  margin: 0 0 var(--hnt-spacing-xs);
  max-width: 60ch;
}

.project-card__description {
  color: var(--hnt-ink);
  margin: 0 0 var(--hnt-spacing-sm);
  max-width: 60ch;
}

.project-card__link {
  margin: 0;
}

.project-card__link a {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-wood-deep);
}

.project-card__actions {
  display: flex;
  gap: var(--hnt-spacing-sm);
  margin-top: var(--hnt-spacing-md);
}

.project-card__delete-form {
  display: inline;
  margin: 0;
}

/* Destructive ghost button: quiet by default, signals via text color.       */
/* Use as: <sl-button variant="default" class="btn-text-danger">             */

sl-button.btn-text-danger::part(base) {
  color: var(--hnt-coral);
  border-color: var(--hnt-concrete);
  background-color: transparent;
}

sl-button.btn-text-danger::part(base):hover {
  color: var(--hnt-coral);
  border-color: var(--hnt-coral);
  background-color: oklch(0.97 0.02 30); /* coral 50 tint */
}

/* Project add/edit form: no card frame, narrower than reading measure for   */
/* fast scanning. Buttons sit in a row at the bottom with explicit gap.      */

.project-form {
  max-width: 560px;
  margin-inline: auto;
}

.project-form h1 {
  margin-bottom: var(--hnt-spacing-lg);
}

.project-form-actions {
  display: flex;
  gap: var(--hnt-spacing-sm);
  margin-top: var(--hnt-spacing-lg);
}

/* ------------------------------------------------------------------------ */
/* Utilities                                                                 */
/* ------------------------------------------------------------------------ */

.text-muted {
  color: var(--hnt-muted);
}

.mono {
  font-family: var(--hnt-font-mono);
  font-size: 0.9375em;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------------ */
/* Check-in                                                                  */
/* ------------------------------------------------------------------------ */

.checkin-page {
  max-width: 500px;
  margin: var(--hnt-spacing-xl) auto;
}

.checkin-options {
  margin-top: var(--hnt-spacing-lg);
}

.event-details {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-muted);
  text-align: center;
  margin-bottom: var(--hnt-spacing-lg);
}

/* ------------------------------------------------------------------------ */
/* Slack invite                                                              */
/* ------------------------------------------------------------------------ */

.slack-invite {
  background-color: var(--hnt-wood-soft);
  padding: var(--hnt-spacing-lg);
  border-radius: var(--hnt-radius-md);
  margin-top: var(--hnt-spacing-lg);
  text-align: center;
}

.slack-invite h3 {
  margin-bottom: var(--hnt-spacing-sm);
}

.slack-invite p {
  margin-bottom: var(--hnt-spacing-md);
  color: var(--hnt-ink);
}

/* ------------------------------------------------------------------------ */
/* Content pages                                                             */
/* ------------------------------------------------------------------------ */

.content-page h1 {
  margin-bottom: var(--hnt-spacing-lg);
}

.page-body {
  max-width: 70ch;
}

.page-body p {
  margin-bottom: var(--hnt-spacing-md);
}

/* ------------------------------------------------------------------------ */
/* Section rhythm                                                            */
/* Used by Wagtail page blocks (e.g. upcoming_events). Sections have fluid   */
/* top space so the hero → first-section transition breathes on wide screens.*/
/* ------------------------------------------------------------------------ */

.home-section {
  padding-top: clamp(40px, 6vw, 80px);
  max-width: 720px;
  margin: 0 auto;
}

.home-section__heading {
  font-size: var(--hnt-text-headline);
  margin-bottom: var(--hnt-spacing-md);
}

.section-intro {
  color: var(--hnt-muted);
  margin-bottom: var(--hnt-spacing-lg);
  max-width: 60ch;
}

/* ------------------------------------------------------------------------ */
/* Events                                                                    */
/* The events block renders two visually distinct sub-sections: Upcoming     */
/* (cards) and Past (compact rows). Past acts as a library shelf of records  */
/* signalling community liveliness without competing with active CTAs.       */
/* ------------------------------------------------------------------------ */

.events-block {
  /* nothing on the outer; rhythm lives on __group */
}

.events-block__group + .events-block__group {
  margin-top: var(--hnt-spacing-2xl);
}

.event-list-heading {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hnt-muted);
  margin: 0 0 var(--hnt-spacing-md);
}

.event-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hnt-spacing-sm);
  margin: 0;
  padding: 0;
}

/* Upcoming: card treatment */

.event-card {
  background-color: var(--hnt-cream);
  border: 1px solid var(--hnt-concrete);
  border-radius: var(--hnt-radius-md);
  padding: var(--hnt-spacing-md) var(--hnt-spacing-lg);
}

.event-card__meta {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  letter-spacing: 0.01em;
  color: var(--hnt-muted);
  margin: 0 0 var(--hnt-spacing-xs);
}

.event-card__title {
  font-size: var(--hnt-text-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--hnt-wood-brown);
  margin: 0 0 var(--hnt-spacing-sm);
}

.event-card__desc {
  color: var(--hnt-ink);
  margin: 0 0 var(--hnt-spacing-md);
  max-width: 60ch;
}

.event-card__action {
  margin-top: var(--hnt-spacing-md);
}

.event-empty {
  color: var(--hnt-muted);
  font-style: italic;
  margin: 0;
}

/* Past: compact row treatment, library-shelf rhythm */

.event-list--past {
  gap: 0;
  border-top: 1px solid var(--hnt-concrete-soft);
}

.event-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--hnt-spacing-md);
  padding: var(--hnt-spacing-sm) 0;
  border-bottom: 1px solid var(--hnt-concrete-soft);
}

.event-row__date {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-muted);
  white-space: nowrap;
}

.event-row__title {
  color: var(--hnt-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.event-row__link {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-wood-deep);
  white-space: nowrap;
}

/* Standalone events page (/events) header */

.events-page__header {
  max-width: 720px;
  margin: 0 auto var(--hnt-spacing-xl);
}

.events-page__header h1 {
  font-size: var(--hnt-text-headline);
  margin-bottom: var(--hnt-spacing-sm);
}

.events-page .intro {
  color: var(--hnt-muted);
  max-width: 60ch;
}

.events-page .events-block {
  max-width: 720px;
  margin-inline: auto;
}

.events-page .events-block + .events-block {
  margin-top: var(--hnt-spacing-2xl);
}

/* ------------------------------------------------------------------------ */
/* Footer                                                                    */
/* ------------------------------------------------------------------------ */

.footer {
  background-color: var(--hnt-cream);
  border-top: 1px solid var(--hnt-concrete);
  padding: var(--hnt-spacing-lg) 0;
  text-align: center;
  color: var(--hnt-muted);
}

.git-commit {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-xs);
  opacity: 0.6;
}

/* ------------------------------------------------------------------------ */
/* Form errors                                                               */
/* ------------------------------------------------------------------------ */

.errorlist {
  list-style: none;
  color: var(--hnt-coral);
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  margin-bottom: var(--hnt-spacing-sm);
}

.helptext {
  font-size: var(--hnt-text-sm);
  color: var(--hnt-muted);
  margin-top: calc(var(--hnt-spacing-md) * -0.75);
  margin-bottom: var(--hnt-spacing-md);
}

/* ------------------------------------------------------------------------ */
/* Section / child pages                                                     */
/* ------------------------------------------------------------------------ */

.child-pages {
  display: grid;
  gap: var(--hnt-spacing-md);
}

.child-page-card {
  background-color: var(--hnt-cream);
  border: 1px solid var(--hnt-concrete);
  padding: var(--hnt-spacing-lg);
  border-radius: var(--hnt-radius-md);
  transition: border-color var(--hnt-duration-fast) var(--hnt-ease-out),
              background-color var(--hnt-duration-fast) var(--hnt-ease-out);
}

.child-page-card:hover {
  border-color: var(--hnt-wood);
  background-color: var(--hnt-paper);
}

.child-page-card a {
  color: var(--hnt-wood-brown);
  text-decoration: none;
}

.child-page-card a:hover {
  color: var(--hnt-wood-deep);
}

/* ------------------------------------------------------------------------ */
/* Marketing blocks                                                          */
/* ------------------------------------------------------------------------ */

.hero-image img {
  width: 100%;
  height: auto;
}

.features-grid {
  padding: var(--hnt-spacing-lg) 0;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--hnt-spacing-lg);
  margin-top: var(--hnt-spacing-md);
}

.feature-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--hnt-spacing-sm);
  color: var(--hnt-wood-deep);
}

.cta-section {
  text-align: center;
  padding: var(--hnt-spacing-2xl) 0;
}

.cta-section p {
  color: var(--hnt-muted);
  margin: var(--hnt-spacing-sm) 0 var(--hnt-spacing-md);
  max-width: 50ch;
  margin-inline: auto;
}

/* ------------------------------------------------------------------------ */
/* Testimonial / pull quote                                                  */
/* No background, no border-stripe (impeccable absolute ban). Pure typography. */
/* ------------------------------------------------------------------------ */

.testimonial {
  padding: var(--hnt-spacing-lg) 0;
  margin: var(--hnt-spacing-lg) 0;
  max-width: 60ch;
}

.testimonial .quote {
  font-size: var(--hnt-text-headline);
  font-weight: 400;
  line-height: 1.3;
  color: var(--hnt-wood-brown);
  letter-spacing: -0.01em;
  text-indent: -0.4em;
  margin-bottom: var(--hnt-spacing-md);
}

.testimonial .quote::before {
  content: '\201C';
}

.testimonial .quote::after {
  content: '\201D';
}

.testimonial .author {
  font-weight: 600;
  color: var(--hnt-ink);
}

.testimonial .role {
  color: var(--hnt-muted);
  margin-left: var(--hnt-spacing-sm);
}

.testimonial .author-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: var(--hnt-spacing-sm);
  border: 1px solid var(--hnt-concrete);
}

.rich-cta-text {
  text-align: center;
  padding: var(--hnt-spacing-2xl) 0;
}

.rich-cta-text-body {
  max-width: 60ch;
  margin: var(--hnt-spacing-sm) auto var(--hnt-spacing-lg);
  color: var(--hnt-muted);
}

/* ------------------------------------------------------------------------ */
/* Shoelace text-variant button                                              */
/* Shoelace's text-variant button defaults to --sl-color-primary-600 (the    */
/* tween between Light Cedar and Wood Deep) and brightens to -500 on hover.  */
/* Both violate the Cedar-Is-Not-Text Rule on cream. Pin text to Wood Deep   */
/* and deepen to Ink on hover; soft wood tint on hover for affordance.       */
/* ------------------------------------------------------------------------ */

sl-button[variant="text"]::part(base) {
  color: var(--hnt-wood-deep);
  min-height: 0;
  padding: 0.4em 0.75em;
  transition: color var(--hnt-duration-fast) var(--hnt-ease-out),
              background-color var(--hnt-duration-fast) var(--hnt-ease-out);
}

sl-button[variant="text"]::part(base):hover {
  color: var(--hnt-ink);
  background-color: var(--hnt-wood-soft);
}

sl-button[variant="text"]::part(base):focus-visible {
  outline: 3px solid var(--hnt-focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------------ */
/* Announcements                                                             */
/* Created on-the-fly during events; browsed afterwards by attendees.        */
/* ------------------------------------------------------------------------ */

.announce-page,
.announcements-page {
  max-width: 640px;
  margin: var(--hnt-spacing-xl) auto;
}

.announce-page__back {
  margin-bottom: var(--hnt-spacing-md);
}

.announcements-page__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--hnt-spacing-md);
  margin-bottom: var(--hnt-spacing-lg);
}

.announcements-page__header h1 {
  margin: 0;
  flex: 1 1 auto;
}

.announce-form .form-field {
  margin-bottom: var(--hnt-spacing-md);
}

.announce-form fieldset.form-field--radio {
  border: 1px solid var(--hnt-concrete);
  border-radius: var(--hnt-radius-md);
  padding: var(--hnt-spacing-sm) var(--hnt-spacing-md);
}

.announce-form fieldset.form-field--radio legend {
  padding: 0 var(--hnt-spacing-xs);
  font-weight: 500;
}

.announce-form .radio-row {
  display: flex;
  align-items: center;
  gap: var(--hnt-spacing-sm);
  padding: 0.25rem 0;
  cursor: pointer;
}

.announce-form__link-field[hidden] {
  display: none;
}

.announce-form__actions {
  display: flex;
  gap: var(--hnt-spacing-sm);
  margin-top: var(--hnt-spacing-lg);
}

.form-error {
  color: var(--hnt-coral);
  font-size: var(--hnt-text-sm);
  margin: 0.25rem 0 0;
}

.form-help {
  color: var(--hnt-muted);
  font-size: var(--hnt-text-sm);
  margin: 0.25rem 0 0;
}

.announcement-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--hnt-spacing-md);
  margin: 0;
  padding: 0;
}

.announcement-card {
  background-color: var(--hnt-cream);
  border: 1px solid var(--hnt-concrete);
  border-radius: var(--hnt-radius-md);
  padding: var(--hnt-spacing-md) var(--hnt-spacing-lg);
}

.announcement-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hnt-spacing-xs);
  font-size: var(--hnt-text-sm);
  margin-bottom: var(--hnt-spacing-xs);
}

.announcement-card__author {
  font-weight: 600;
  color: var(--hnt-wood-brown);
  text-decoration: none;
}

.announcement-card__author:hover {
  text-decoration: underline;
}

.announcement-card__time,
.announcement-card__event {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-xs);
  color: var(--hnt-muted);
}

.announcement-card__event a {
  color: var(--hnt-wood-deep);
}

.announcement-card__text {
  color: var(--hnt-ink);
  margin: 0 0 var(--hnt-spacing-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.announcement-card__link {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--hnt-spacing-sm);
}

.announcement-card__link a {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-sm);
  color: var(--hnt-wood-deep);
  overflow-wrap: anywhere;
}

.announcement-card__kind {
  font-family: var(--hnt-font-mono);
  font-size: var(--hnt-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hnt-muted);
}

.dashboard-checkin-prompt {
  display: block;
  margin: var(--hnt-spacing-lg) 0 0;
}

.checkin-followups {
  margin-top: var(--hnt-spacing-lg);
}

/* ------------------------------------------------------------------------ */
/* Reduced motion                                                            */
/* ------------------------------------------------------------------------ */

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