/* =============================================================
   AI MEDICINE COLLECTIVE — the modern (light) look

   The site has two themes. style.css holds the layout and the original
   terminal look. This file restyles the same pages when <html> has
   class "modern", which is the default; the Dark mode button swaps it
   for class "terminal" and none of this applies.

   Every rule here starts with ".modern". Most of the change is the
   token block: style.css takes its colours, fonts and shadows from
   those tokens, so redefining them carries most components across.
   The rest undoes terminal mannerisms (capitals, monospace, glows,
   dashed rules) and gives buttons, cards and forms their modern shape.

   When you add or change something in style.css, check it in both
   themes and add what it needs here (see CLAUDE.md).
   ============================================================= */


/* === TYPEFACES ===============================================
   Fraunces (headlines) and Inter (text), hosted in fonts/ so no outside
   service is contacted. Both are variable fonts under the SIL Open Font
   License. A browser fetches them only when the light design uses them. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fraunces-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter.woff2") format("woff2");
}


/* === TOKENS ================================================== */

.modern {
  --brand: #0b6b4f;          /* deep green: a nod to the terminal */
  --brand-strong: #084c39;
  --brand-soft: #e8f4ef;
  --ink: #0f172a;            /* headings */
  --page: #f5f7fa;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 4px 16px rgb(15 23 42 / 0.06);
  --shadow-lift: 0 2px 4px rgb(15 23 42 / 0.06), 0 12px 28px rgb(15 23 42 / 0.10);

  /* Character: a bright mint and a green-to-teal sweep for the few things
     the eye should land on, a deep "night" green for the dark bands, and a
     monospace for small labels (the terminal showing through). */
  --spark: #10b981;
  --spark-soft: #6ee7b7;
  --night: #05261f;
  --grad: linear-gradient(135deg, #0b6b4f 0%, #0d8a7a 100%);
  --grad-bright: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  --font-label: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "Roboto Mono", monospace;

  /* The tokens style.css is written against */
  --bg: var(--card);
  --bg-inner: var(--page);
  --base: var(--card);
  --text: var(--brand);       /* "bright": links, names, key numbers */
  --body: #1f2937;
  --muted: #64748b;
  --accent: #94a3b8;          /* rules and quiet labels */
  --error: #dc2626;
  --cyan: #0369a1;
  --yellow: #b45309;          /* "something is waiting" */
  --pink: #475569;
  --amber: #b45309;
  --teal: #0f766e;
  --line: #e5e9f0;
  --line-strong: #cbd5e1;
  --panel: var(--card);
  --glow: var(--shadow-lift);

  --rule-style: solid;
  --surface-rgb: 255 255 255;
  --green-rgb: 15 23 42;      /* translucent fills become soft slate tints */
  --glow-rgb: 148 163 184;    /* glows become faint grey halos */
  --yellow-rgb: 180 83 9;
  --cyan-rgb: 3 105 161;
  --pink-rgb: 71 85 105;
  --error-rgb: 220 38 38;
  --amber-rgb: 180 83 9;
  --teal-rgb: 15 118 110;

  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-display);
  --font-read: var(--font-display);
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;   /* headlines */

  color-scheme: light;
  scrollbar-color: var(--line-strong) var(--page);
}


/* === BASE ==================================================== */

/* Terminal marks ("// ", "> ", ":: ") are hidden; see script.js */
.modern .t-only {
  display: none;
}

.modern *,
.modern *::before,
.modern *::after {
  text-shadow: none !important;
}

.modern body {
  padding: 0;
  /* a soft green and blue wash behind the top of every page */
  background:
    radial-gradient(900px 420px at 10% -120px, rgb(16 185 129 / 0.13), transparent 65%),
    radial-gradient(820px 400px at 96% -80px, rgb(6 182 212 / 0.10), transparent 65%),
    var(--page);
  background-repeat: no-repeat;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
  animation: none;
}

/* no scanlines */
.modern body::after {
  display: none;
}

.modern ::selection {
  background: var(--brand);
  color: #fff;
}

/* The frame becomes a plain centred column */
.modern .terminal-frame {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  border: 0;
  background: none;
  box-shadow: none;
}

.modern .terminal-frame::before,
.modern .terminal-frame::after {
  display: none;
}

/* the status strip belongs to the terminal */
.modern .terminal-frame > .horizontal-rule:first-child {
  display: none;
}

.modern .horizontal-rule,
.modern .section-divider {
  border-top: 1px solid var(--line);
  opacity: 1;
}

.modern h1,
.modern h2,
.modern h3,
.modern h4 {
  color: var(--ink);
  letter-spacing: -0.01em;
}

.modern strong,
.modern b,
.modern dt,
.modern legend,
.modern .account-name,
.modern .project-title,
.modern .roster-name,
.modern .chat-author,
.modern .ms-title,
.modern .home-list-title,
.modern .loading-label,
.modern .empty-state-title {
  color: var(--ink);
}

.modern a:focus-visible,
.modern button:focus-visible,
.modern summary:focus-visible,
.modern input:focus-visible,
.modern select:focus-visible,
.modern textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


/* === HEADER & NAV ============================================ */

/* A white bar across the whole window; its contents stay in the column */
.modern .terminal-frame > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 20px;
  margin-bottom: 28px;
  padding: 14px 0;
  background: var(--card);
  /* the second shadow is the hairline under the bar */
  box-shadow: 0 0 0 100vmax var(--card), 0 1px 0 100vmax var(--line);
  clip-path: inset(0 -100vmax -1px);
  /* a thin strip of colour along the very top of the window (painted
     outwards with border-image, which never causes sideways scrolling) */
  border-top: 3px solid var(--spark);
  border-image: var(--grad-bright) 1 / 3px 0 0 / 0 100vmax;
}

.modern header > .horizontal-rule {
  display: none;
}

.modern .headline {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.modern .headline a,
.modern .headline a:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

/* the mark beside the name: the Collective's logo (images/logo.svg) */
.modern .headline a::before {
  content: "";
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  background: url("images/logo.svg") center / contain no-repeat;
  filter: drop-shadow(0 2px 5px rgb(15 23 42 / 0.22));
}

.modern .headline a:hover {
  color: var(--brand);
}

.modern .nav {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
  gap: 2px;
  margin: 0;
}

.modern .nav a,
.modern .nav a:visited {
  display: inline-block;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  color: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* the menu text is written in capitals; show it as "About", "Sign in" */
.modern .nav a::first-letter {
  text-transform: uppercase;
}

.modern .nav a:hover {
  color: var(--ink);
  background: #eef2f6;
}

.modern .nav a[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-soft);
  font-weight: 600;
}

.modern .nav a.nav-cta,
.modern .nav a.nav-cta:visited {
  margin-left: 8px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 4px 14px rgb(11 107 79 / 0.22);
  color: #fff;
  font-weight: 600;
}

.modern .nav a.nav-cta:hover {
  background: var(--brand-strong);
  color: #fff;
  box-shadow: none;
}

.modern .nav a.nav-account,
.modern .nav a.nav-account:visited {
  margin-left: 6px;
  padding: 7px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.modern .nav a.nav-account:hover,
.modern .nav a.nav-account[aria-current="page"] {
  border-color: var(--brand);
  box-shadow: none;
}

.modern .theme-toggle {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.modern .theme-toggle:hover {
  background: #000;
  color: #7dffb0;
  border-color: #000;
}

.modern .members-bar {
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--brand-soft);
  font-size: 0.82rem;
  letter-spacing: 0;
}

.modern .members-bar-label {
  color: var(--brand);
  font-weight: 700;
  text-transform: capitalize;
}

.modern .members-bar a,
.modern .members-bar a:visited {
  padding: 4px 12px;
  border: 0;
  background: var(--card);
  color: var(--body);
  font-weight: 500;
  text-transform: lowercase;
  display: inline-block;
}

.modern .members-bar a::first-letter {
  text-transform: uppercase;
}

.modern .members-bar a:hover,
.modern .members-bar a[aria-current="page"] {
  background: var(--brand);
  color: #fff;
}

.modern .members-bar a.members-bar-unread,
.modern .members-bar a.members-bar-unread:visited {
  background: #fef3c7;
  color: var(--yellow);
  font-weight: 700;
}

@media (max-width: 1180px) {
  .modern .terminal-frame > header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .modern .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }

  .modern .theme-toggle {
    grid-column: 2;
  }
}

@media (max-width: 600px) {
  .modern .terminal-frame {
    padding: 0 16px 24px;
  }

  .modern .terminal-frame > header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px 10px;
  }

  .modern .headline {
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    white-space: normal;
  }

  .modern .theme-toggle {
    padding: 6px 10px;
    font-size: 0.72rem;
  }

  /* the phone menu button, added by script.js */
  .modern .nav-toggle {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: 0.72rem;
    letter-spacing: 0;
    gap: 6px;
  }

  .modern .nav-toggle[aria-expanded="true"] {
    box-shadow: none;
    border-color: var(--brand);
  }

  .modern .nav-toggle-icon {
    font-family: ui-monospace, Consolas, monospace;
  }

  .modern .nav--collapsible.is-open {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .modern .nav--collapsible.is-open a {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
}


/* === PAGE TITLES & TEXT ====================================== */

.modern .section {
  margin-top: 0;
}

.modern .section-title {
  display: block;
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.modern .section-title::first-letter {
  text-transform: uppercase;
}

.modern .section-title::before {
  display: none;
}

/* a short bright bar under each page title */
.modern .section-title::after {
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--grad-bright);
}

.modern .subsection-title {
  margin: 28px 0 12px;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.modern .note,
.modern .join-hint {
  color: var(--muted);
  font-size: 0.95rem;
}

.modern .section p,
.modern .section ul,
.modern .section li {
  line-height: 1.65;
}

.modern a {
  color: var(--brand);
  font-weight: 600;
}

.modern a:visited {
  color: var(--brand);
}

.modern a:hover {
  color: var(--brand-strong);
  text-decoration: underline;
}

.modern .back-link,
.modern .back-link:visited {
  margin-top: 28px;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* "HOME" is written in capitals */
.modern .back-link {
  text-transform: lowercase;
}

.modern .back-link::first-letter {
  text-transform: uppercase;
}

.modern .back-link:hover {
  color: var(--ink);
}

/* The footer is a dark band across the whole window, in the label font */
.modern .footer {
  justify-content: center;
  margin-top: 56px;
  padding: 26px 0;
  background: var(--night);
  box-shadow: 0 0 0 100vmax var(--night);
  /* open at the bottom too, so a short page ends in the band, not a gap */
  clip-path: inset(0 -100vmax -100vmax);
  color: var(--spark-soft);
  font-family: var(--font-label);
  font-size: 0;
  opacity: 1;
}

.modern .footer::after {
  content: "AI Medicine Collective \00b7  Building intelligent healthcare together";
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.modern .footer .cursor,
.modern .cursor {
  display: none;
}

.modern .bottom-rule {
  display: none;
}


/* === BUTTONS, TABS, TAGS ===================================== */

.modern button {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.modern button:hover {
  background: #f1f5f9;
  box-shadow: none;
}

.modern button:disabled {
  opacity: 0.55;
}

.modern .btn,
.modern .btn:visited,
.modern .hub-tab,
.modern .hub-tab:visited,
.modern .filter-btn,
.modern .project-doc-link,
.modern .project-doc-link:visited,
.modern .ms-cta,
.modern .ms-cta:visited {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.modern .btn:hover,
.modern .hub-tab:hover,
.modern .filter-btn:hover,
.modern .project-doc-link:hover,
.modern .ms-cta:hover {
  background: #f1f5f9;
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: none;
  text-decoration: none;
}

/* the chosen tab or filter */
.modern .hub-tab[aria-current="page"],
.modern .filter-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: none;
}

/* primary actions: solid brand green */
.modern .btn--primary,
.modern .btn--primary:visited,
.modern .signin-btn,
.modern .join-submit,
.modern .hub-tab--submit,
.modern .hub-tab--submit:visited,
.modern button.hub-tab--submit,
.modern .project-launch-btn,
.modern .project-launch-btn:visited,
.modern .video-play,
.modern .ms-cta--signup {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--grad) border-box;
  box-shadow: 0 4px 14px rgb(11 107 79 / 0.22);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.modern .btn--primary:hover,
.modern .signin-btn:hover,
.modern .join-submit:hover,
.modern .hub-tab--submit:hover,
.modern .hub-tab--submit[aria-current="page"],
.modern .project-launch-btn:hover,
.modern .video-play:hover,
.modern .ms-cta--signup:hover {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  color: #fff;
  box-shadow: none;
  text-decoration: none;
}

.modern .member-tag,
.modern .tile-tag,
.modern .blog-tag,
.modern .blog-cat {
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  background: #eef2f6;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.modern .role-admin,
.modern .role-moderator,
.modern .status-published,
.modern .tag-im {
  background: var(--brand-soft);
  color: var(--brand);
}

.modern .role-pending,
.modern .status-pending,
.modern .request-claimed,
.modern .tag-em {
  background: #fef3c7;
  color: #92400e;
}

.modern .role-rejected,
.modern .status-rejected {
  background: #fee2e2;
  color: #b91c1c;
}

.modern .member-tag--new,
.modern .request-done,
.modern .tag-medpeds {
  background: #e0f2fe;
  color: #075985;
}

.modern .member-tag--path {
  background: #fef3c7;
  color: #92400e;
}


/* === CARDS & PANELS ========================================== */

.modern .account-panel,
.modern .hub-detail,
.modern .home-panel,
.modern .tile,
.modern .dash-card,
.modern .roster-card,
.modern .project-item,
.modern .tool-card,
.modern .request-card,
.modern .blog-item,
.modern .path,
.modern .onboard,
.modern .meeting-admin,
.modern .join-hero,
.modern .empty-state,
.modern .resource-group,
.modern .hero-stats,
.modern .profile-card,
.modern .mod-row,
.modern .app-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.modern .tile:hover,
.modern .dash-card:hover,
.modern .home-panel:hover,
.modern a.roster-card:hover,
.modern a.project-item:hover,
.modern .tool-card:hover {
  border-color: rgb(16 185 129 / 0.55);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
  text-decoration: none;
}

.modern div.roster-card:hover {
  border-color: var(--line);
  box-shadow: var(--shadow);
  transform: none;
}

.modern .loading-bar {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef2f6 0, #e2e8f0 50%, #eef2f6 100%);
  background-size: 200% 100%;
}

.modern .empty-state {
  border-style: dashed;
  box-shadow: none;
}

.modern .empty-state-title,
.modern .loading-label,
.modern .account-status {
  letter-spacing: 0.02em;
}


/* === HOME PAGE =============================================== */

/* The hero is a dark green stage: the one place the light theme goes dark */
.modern .hero {
  position: relative;
  margin-top: 4px;
  padding: 64px 40px 40px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(520px 300px at 18% 0%, rgb(16 185 129 / 0.35), transparent 70%),
    radial-gradient(480px 320px at 90% 100%, rgb(6 182 212 / 0.28), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px) 0 0 / 32px 100%,
    linear-gradient(140deg, #04201a 0%, #06342a 55%, #073a44 100%);
  box-shadow: 0 24px 48px -20px rgb(4 32 26 / 0.55);
  color: #fff;
}

.modern .hero-kicker {
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 14px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  color: var(--spark-soft);
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.modern .hero-title {
  color: transparent;
  background: linear-gradient(100deg, #fff 35%, var(--spark-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2.3rem, 7vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
}

/* the terminal's blinking cursor survives here, in mint */
.modern .hero-title .cursor {
  display: inline;
  color: var(--spark);
  -webkit-text-fill-color: var(--spark);
}

.modern .hero-text {
  color: rgb(226 240 235 / 0.9);
  font-size: 1.15rem;
}

.modern .hero-actions {
  margin-top: 28px;
}

.modern .hero-actions .btn,
.modern .hero-actions .btn:visited {
  padding: 11px 22px;
  border-color: rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.07);
  color: #fff;
  font-size: 0.9rem;
}

.modern .hero-actions .btn:hover {
  border-color: rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.modern .hero-actions .btn--primary,
.modern .hero-actions .btn--primary:visited {
  border-color: transparent;
  background: var(--spark-soft);
  box-shadow: 0 6px 22px rgb(16 185 129 / 0.4);
  color: #04201a;
}

.modern .hero-actions .btn--primary:hover {
  border-color: transparent;
  background: #fff;
  color: #04201a;
}

.modern .hero .hero-stats {
  overflow: hidden;
  margin-top: 40px;
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(255 255 255 / 0.06);
  box-shadow: none;
}

.modern .hero-stat {
  padding: 18px 12px;
}

.modern .hero-stat + .hero-stat {
  border-left: 1px solid rgb(255 255 255 / 0.14);
}

.modern .hero-stat dt {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modern .dash-value {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modern .hero-stat dd {
  color: var(--spark-soft);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* the home page arrives in three soft steps */
@keyframes modernRise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

.modern .hero,
.modern .home-panels,
.modern .home-explore {
  animation: modernRise 0.5s ease-out both;
}

.modern .home-panels {
  animation-delay: 0.08s;
}

.modern .home-explore {
  animation-delay: 0.16s;
}

.modern .home-panel {
  position: relative;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-top: 1px solid var(--line);
}

/* a bright edge along the top of each panel */
.modern .home-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-bright);
}

.modern .home-panel-title {
  color: var(--brand);
  font-family: var(--font-label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.modern .dash-title {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.modern .home-list li + li {
  border-top: 1px solid var(--line);
}

.modern .home-list-meta {
  color: var(--muted);
  letter-spacing: 0.03em;
}

.modern .home-panel-link {
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: lowercase;
  display: inline-block;
}

.modern .home-panel-link::first-letter {
  text-transform: uppercase;
}

.modern .home-panel-link::after {
  content: "\00a0\2192";
}

.modern .tile {
  padding: 18px;
}

.modern .tile:hover .tile-title {
  color: var(--brand);
}

/* an arrow slides in when a tile is pointed at */
.modern .tile-title::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  color: var(--spark);
  opacity: 0;
  translate: -6px 0;
  transition: 0.18s ease-out;
}

.modern .tile:hover .tile-title::after {
  opacity: 1;
  translate: 0 0;
}

.modern .tile-title {
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: lowercase;
}

.modern .tile-title::first-letter {
  text-transform: uppercase;
}

.modern .tile-tag {
  text-transform: uppercase;
}

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


/* === ACCOUNT, DASHBOARD, FORMS =============================== */

.modern .account-panel {
  padding: 28px;
}

.modern .account-status {
  color: var(--ink);
  font-size: 0.85rem;
}

.modern .account-status.is-error,
.modern .join-status.is-error {
  color: var(--error);
}

.modern .account-avatar,
.modern .member-avatar {
  border: 0;
  filter: none;
}

.modern .member-avatar {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
  opacity: 1;
}

.modern .dash-card {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 18px;
}

/* each card's icon, in its top corner */
.modern .dash-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  display: block;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
  transition: 0.18s ease-out;
}

.modern .dash-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.modern .dash-card:hover .dash-icon {
  background: var(--brand);
  color: #fff;
}

.modern .dash-card--alert .dash-icon,
.modern .dash-card--alert:hover .dash-icon {
  background: #fde68a;
  color: #92400e;
}

/* keep the label clear of the icon */
.modern .dash-card .dash-title {
  padding-right: 46px;
}

.modern .dash-card--alert,
.modern .dash-card--alert:visited {
  border-color: #fcd34d;
  background: #fffbeb;
}

.modern .dash-card--alert .dash-value {
  color: var(--yellow);
}

.modern .dash-list li,
.modern .path-list li,
.modern .poll-day,
.modern .video-card,
.modern .link-list li {
  border-top: 1px solid var(--line);
}

.modern .account-details {
  border-top: 1px solid var(--line);
}

.modern .account-details-summary,
.modern .resource-summary {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.modern .join-label {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.modern .join-input {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
}

.modern .join-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgb(11 107 79 / 0.15);
  outline: none;
}

.modern .join-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.modern .interest-chip {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--body);
}

.modern .account-signout {
  opacity: 1;
  color: var(--muted);
}

.modern .onboard {
  border-color: #fcd34d;
  background: #fffbeb;
}

.modern .onboard .subsection-title,
.modern .onboard-box {
  color: #92400e;
}

.modern .signin-or {
  color: var(--muted);
}

.modern .signin-choices .hub-tab {
  border: 0;
  background: none;
  padding: 4px 0;
  margin-right: 16px;
  color: var(--brand);
}

.modern .signin-choices .hub-tab:hover {
  background: none;
  text-decoration: underline;
}


/* === PROJECTS HUB, TOOLS, REQUESTS, LEARNING ================= */

.modern .project-item {
  padding: 16px;
}

.modern .project-title {
  font-size: 1.05rem;
  letter-spacing: 0;
}

.modern .project-desc {
  color: #475569;
}

.modern .hub-card-meta {
  color: var(--muted);
}

.modern .hub-detail {
  padding: 28px;
}

.modern .hub-title {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.modern .hub-cite-text {
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  background: #f8fafc;
}

.modern .tool-icon {
  border: 1px solid var(--line);
}

.modern .tool-icon--text {
  background: var(--brand-soft);
  color: var(--brand);
}

.modern .tool-launch,
.modern .tool-launch:visited {
  color: var(--ink);
}

.modern .request-vote {
  border-radius: 10px;
  color: var(--ink);
}

.modern .request-vote[aria-pressed="true"],
.modern .path-done[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: none;
}

.modern .request-delete,
.modern button.meeting-undo {
  border-color: #fecaca;
  color: #b91c1c;
}

.modern .path {
  padding: 8px 20px 16px;
  border-top: 1px solid var(--line);
}

.modern .path-bar {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.modern .path-bar span {
  background: var(--brand);
  box-shadow: none;
}

.modern .resource-group {
  margin-bottom: 12px;
  overflow: hidden;
}

.modern .resource-summary {
  padding: 14px 18px;
  border-bottom: 0;
}

.modern .resource-body {
  border-top: 1px solid var(--line);
}

.modern .video-title {
  color: var(--ink);
}

.modern .video-frame {
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}


/* === BLOG ==================================================== */

.modern .blog-date {
  color: var(--muted);
  letter-spacing: 0.04em;
}

.modern .blog-headline {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modern .blog-item {
  padding: 22px 24px;
  border-left: 4px solid var(--brand);
}

.modern .blog-item--versus {
  border-left-color: var(--cyan);
}

.modern .blog-item-title,
.modern a.blog-item-title,
.modern a.blog-item-title:visited {
  color: var(--ink);
}

.modern a.blog-item-title:hover {
  color: var(--brand);
}

.modern .blog-item--versus .blog-cat {
  background: #e0f2fe;
  color: #075985;
}

.modern .blog-item--versus .blog-verdict--ai_ahead,
.modern .blog-item--versus .blog-verdict--humans_ahead,
.modern .blog-item--versus .blog-verdict--ai_help_improved,
.modern .blog-item--versus .blog-verdict--ai_help_harmed {
  background: #fef3c7;
  color: #92400e;
}

.modern .section .blog-why {
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  background: #fffbeb;
  color: var(--body);
}

.modern .blog-why-label {
  color: #92400e;
}

.modern .blog-more summary {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}


/* === MEETINGS ================================================ */

.modern .meeting-confirmed {
  border-color: #fcd34d;
  background: #fffbeb;
  box-shadow: var(--shadow);
}

.modern .meeting-when {
  color: var(--ink);
}

.modern .poll-day-name {
  color: var(--ink);
}

.modern .poll-slot {
  border-radius: 999px;
  color: var(--body);
  font-weight: 500;
}

.modern .poll-slot.is-top {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgb(11 107 79 / 0.15);
}

.modern .poll-slot[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.modern .ms-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.modern .ms-date {
  border: 0;
  border-radius: 8px;
  background: #eef2f6;
  color: var(--ink);
  font-weight: 600;
}


/* === CHAT ==================================================== */

.modern .chat-log {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.modern .chat-message {
  border-color: var(--line);
}

.modern .chat-time {
  color: var(--muted);
}

.modern .chat-topic-title {
  color: var(--ink);
}


/* === JOIN PAGE =============================================== */

/* the green staff is drawn on black: give it a dark stage to stand on */
.modern .join-hero {
  background: var(--card);
}

.modern .join-hero::before {
  display: none;
}

/* The emblem is green light on black. Here it is turned inside out:
   inverting makes the black white, and the half-turn of hue brings the
   green back, now as dark green ink on the white card. */
.modern .join-emblem {
  filter: invert(1) hue-rotate(180deg) contrast(1.15);
  mix-blend-mode: multiply;
  -webkit-mask-image: none;
  mask-image: none;
  animation: none;
}

.modern .join-title {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}

.modern .join-steps li::marker {
  color: var(--brand);
  font-weight: 700;
}


/* === ABOUT PAGE GUIDE, LIGHTBOX ============================== */

/* the video stays on its dark screen in both looks */
.modern .guide {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.modern .guide-status {
  color: var(--muted);
}

.modern .guide-screen {
  border-radius: 10px;
  overflow: hidden;
}

.modern .lightbox-overlay {
  background: rgb(15 23 42 / 0.85);
}

.modern .resource-thumb img {
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}


/* === ACCORDIONS ============================================== */

/* a chevron in place of the terminal's ">" */
.modern .resource-summary::before {
  content: "\203A";
  display: inline-block;
  width: 1em;
  color: var(--muted);
  font-weight: 700;
  transition: transform 0.15s ease-out;
}

.modern details[open] > .resource-summary::before {
  transform: rotate(90deg);
}


/* === HAND-MADE ADMIN PAGES =================================== */

.modern .profile-photo-frame {
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.modern .profile-photo-frame img {
  border: 0;
  border-radius: 16px;
  filter: none;
}

.modern .profile-name {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
}

.modern .profile-role {
  color: var(--muted);
}

.modern .profile-fields dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.modern .profile-fields dd {
  color: var(--body);
}

.modern .profile-email-address {
  color: var(--ink);
}

.modern .copy-email-btn.copied {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}


/* === ABOUT PAGE GUIDE (more) ================================= */

.modern .guide {
  padding: 16px;
}

.modern .guide-status {
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.modern .guide-screen {
  border: 0;
  background: #000;
}

.modern .guide-scanlines {
  display: none;
}

.modern .guide-btn--play {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.modern .guide-btn--play:hover {
  background: var(--brand-strong);
}

.modern .guide-transcript {
  box-shadow: none;
}


/* === BLOG (more) ============================================= */

.modern .blog-archive-date {
  color: var(--muted);
}

.modern .blog-archive-list a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}


/* === LATE FIXES ============================================== */

/* style.css makes some buttons transparent in their own corners of the
   site; primary actions stay solid everywhere */
.modern .hub-tab--submit,
.modern button.hub-tab--submit,
.modern .join-submit,
.modern .signin-btn,
.modern .video-play {
  background: var(--grad) border-box !important;
  color: #fff !important;
}

.modern .hub-tab--submit:hover,
.modern .join-submit:hover,
.modern .signin-btn:hover,
.modern .video-play:hover {
  background: var(--brand-strong) !important;
}

.modern .account-mod-link,
.modern .chat-project-link {
  letter-spacing: 0;
}

/* "[ ]" and "[x]" become a circle and a tick */
.modern .onboard-box {
  display: inline-block;
  width: 24px;
  font-size: 0;
}

.modern .onboard-box::before {
  content: "\25CB";
  font-size: 1.05rem;
}

.modern .onboard-list li.is-done .onboard-box::before {
  content: "\2713";
  color: var(--brand);
}

@media (max-width: 600px) {
  .modern .hero {
    padding: 40px 18px 22px;
    border-radius: 18px;
  }

  .modern .hero .hero-stats {
    margin-top: 28px;
  }

  .modern .headline a {
    gap: 8px;
  }

  .modern .headline a::before {
    width: 30px;
    height: 30px;
  }
}


/* === EDITORIAL LAYER =========================================
   The "journal meets software" direction, site-wide since 2026-10-08:
   a serif for headlines and Inter for text, a home page built from
   unequal cards, icon tiles, a frosted header that stays put, a face
   wall on the Members page, and sections that rise in on scroll.
   These rules come last, so they refine the sections above. */

.modern body {
  overflow-x: clip;   /* the header reaches past the column to the window's edges */
}

.modern svg.tile-icon,
.modern .bento-big {
  display: block;
}

/* a small give when something is pressed */
.modern .btn:active,
.modern button:active,
.modern .tile:active {
  scale: 0.97;
}

/* The header reaches the window's edges on every page */
.modern .terminal-frame > header {
  margin: 0 calc(50% - 50vw) 36px;
  padding: 14px calc(50vw - 50%);
  border-top: 3px solid var(--spark);
  border-image: var(--grad-bright) 1 / 3px 0 0;
  background: var(--card);
  box-shadow: 0 1px 0 rgb(15 23 42 / 0.07);
  clip-path: none;
}

/* ...and above phone size it stays put and turns to frosted glass.
   (On phones the open menu can be taller than the screen, so it scrolls.) */
@media (min-width: 601px) {
  .modern .terminal-frame > header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(255 255 255 / 0.78);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
  }
}

/* Inter runs wider than the system font: keep the menu on one line */
.modern .terminal-frame > header {
  column-gap: 12px;
}

@media (min-width: 601px) {
  .modern .headline {
    font-size: 1rem;
    letter-spacing: 0.02em;
  }

  .modern .nav a,
  .modern .nav a:visited {
    padding: 8px 8px;
    font-size: 0.88rem;
  }
}

.modern .nav a.nav-cta,
.modern .nav a.nav-cta:visited,
.modern .nav a.nav-account,
.modern .nav a.nav-account:visited {
  margin-left: 3px;
  padding: 7px 13px;
}

.modern .blog-tags {
  margin-top: 28px;
}

/* --- page titles and headings in the serif --- */

.modern .section-title {
  margin: 20px 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, 6.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.modern .section-title::after {
  margin-top: 18px;
}

.modern .subsection-title {
  margin: 44px 0 16px;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* the line under a page title reads as a standfirst */
.modern .section-title + .note,
.modern .section-title + p {
  max-width: 68ch;
  font-size: 1.1rem;
  line-height: 1.6;
}

.modern .hub-title,
.modern .profile-name,
.modern .join-title,
.modern .member-name {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* --- blog: a magazine page --- */

.modern .blog-date {
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.modern .blog-headline {
  margin: 10px 0 16px;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.modern .blog-intro {
  color: #475569;
  font-size: 1.15rem;
  line-height: 1.65;
}

.modern .blog-item {
  padding: 28px;
  border-left-width: 1px;
  border-left-color: var(--line);
  border-top: 4px solid var(--brand);
}

.modern .blog-item--versus {
  border-left-color: var(--line);
  border-top-color: var(--cyan);
}

.modern .blog-item-title,
.modern a.blog-item-title {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* the reviews sit side by side when there is room */
@media (min-width: 900px) {
  .modern .blog-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
  }

  .modern .blog-item:only-child {
    grid-column: 1 / -1;
  }
}

/* --- members: a wall of faces --- */

.modern .roster-photo {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--line-strong);
}

.modern .roster-photo + .member-avatar,
.modern a.roster-card .roster-go {
  display: none;
}

.modern a.roster-card {
  flex-direction: column;
  gap: 16px;
  padding: 32px 20px 26px;
  text-align: center;
}

.modern a.roster-card .roster-text {
  align-items: center;
}

.modern a.roster-card .roster-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.modern a.roster-card .roster-tags {
  justify-content: center;
}

.modern a.roster-card:hover .roster-photo {
  box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--spark);
}

/* --- pages cross-fade into one another (browsers that can) --- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* the terminal design keeps its own page-load flicker instead */
html.terminal::view-transition-group(root),
html.terminal::view-transition-old(root),
html.terminal::view-transition-new(root) {
  animation: none;
}

/* --- hero: calmer, with a serif headline --- */

.modern .hero {
  margin-top: 0;
  padding: 96px 40px 40px;
  border-radius: 28px;
  background:
    radial-gradient(720px 380px at 50% -60px, rgb(16 185 129 / 0.4), transparent 70%),
    linear-gradient(165deg, #03211b 0%, #052e26 60%, #06323a 100%);
}

.modern .hero-title {
  color: #fff;
  background: none;
  font-family: var(--font-serif);
  font-size: clamp(2.9rem, 8.6vw, 5.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}

.modern .hero-em {
  color: var(--spark-soft);
  font-style: italic;
  font-weight: 400;
}

.modern .hero-text {
  max-width: 54ch;
  margin-top: 28px;
  font-size: 1.2rem;
  line-height: 1.6;
}

.modern .hero-actions {
  margin-top: 36px;
}

/* the three figures sit on a hairline, not in a box */
.modern .hero .hero-stats {
  margin-top: 72px;
  border: 0;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 0;
  background: none;
}

.modern .hero-stat {
  padding: 28px 12px 4px;
}

.modern .hero-stat + .hero-stat {
  border-left: 0;
}

.modern .hero-stat dt {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1;
}

.modern .hero-stat dd {
  margin-top: 10px;
}

/* --- the grid of unequal cards --- */

.modern .home-panels {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: 72px;
  animation: none;
}

.modern .home-panel {
  padding: 28px;
  border: 0;
  border-radius: 20px;
}

.modern .home-panel::before {
  display: none;
}

.modern .home-panel--briefing {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
  padding: 40px;
  background: linear-gradient(165deg, #fff 45%, #e6f5ee 100%);
}

.modern .home-panel--meeting {
  grid-column: 8 / span 5;
  grid-row: 1;
}

.modern .home-panel--members {
  grid-column: 8 / span 5;
  grid-row: 2;
  background: var(--night);
  color: rgb(226 240 235 / 0.88);
}

.modern .home-panel--tools {
  grid-column: 1 / span 5;
  grid-row: 3;
}

.modern .home-panel--hub {
  grid-column: 6 / span 7;
  grid-row: 3;
}

.modern .home-panel-title {
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.72rem;
}

.modern .home-panel-body p {
  color: #475569;
  font-size: 1rem;
  line-height: 1.6;
}

.modern .home-headline,
.modern .home-headline:visited {
  margin: 10px 0 14px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.modern .home-headline:hover {
  color: var(--brand);
  text-decoration: none;
}

.modern .home-panel--briefing .home-panel-text {
  max-width: 52ch;
  font-size: 1.08rem;
}

.modern .home-list li {
  padding: 10px 0;
}

.modern .home-list-title,
.modern .home-list-title:visited {
  color: var(--ink);
}

.modern .home-list-title:hover {
  color: var(--brand);
  text-decoration: none;
}

.modern .home-panel-link {
  margin-top: 20px;
  font-size: 0.9rem;
}

.modern p.bento-big {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

.modern .bento-big span {
  display: block;
  margin-top: 12px;
  color: var(--brand);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modern .bento-apps {
  gap: 12px;
  margin-bottom: 20px;
}

.modern .bento-apps img {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgb(15 23 42 / 0.16);
}

.modern .bento-faces {
  gap: 0;
  margin-bottom: 20px;
  padding-left: 10px;
}

.modern .bento-faces img {
  width: 52px;
  height: 52px;
  margin-left: -10px;
  filter: none;
  border: 3px solid var(--night);
  border-radius: 50%;
  object-fit: cover;
}

.modern .home-panel--members .home-panel-title {
  color: var(--spark-soft);
}

.modern .home-panel--members .home-panel-body p {
  color: rgb(226 240 235 / 0.88);
}

.modern .home-panel--members .home-panel-link,
.modern .home-panel--members .home-panel-link:visited {
  color: #fff;
}

/* --- explore: icon tiles --- */

.modern .home-explore {
  margin-top: 96px;
  animation: none;
}

.modern .home-explore .subsection-title {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.modern .tile-grid {
  gap: 16px;
}

.modern .tile {
  gap: 6px;
  padding: 24px;
  border: 0;
  border-radius: 18px;
}

.modern .tile-icon {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  padding: 11px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  transition: 0.18s ease-out;
}

.modern .tile:hover .tile-icon {
  background: var(--brand);
  color: #fff;
}

.modern .tile-title {
  font-size: 1.05rem;
  font-weight: 600;
}

.modern .footer {
  margin-top: 96px;
}

/* --- sections rise into view (script.js: initReveal) --- */

.modern .reveal-ready [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.modern .reveal-ready [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
}

.modern .reveal-ready .home-panel--meeting,
.modern .reveal-ready .home-panel--hub {
  transition-delay: 0.08s, 0.08s, 0s, 0s;
}

.modern .reveal-ready .home-panel--members {
  transition-delay: 0.16s, 0.16s, 0s, 0s;
}

@media (max-width: 900px) {
  .modern .home-panels {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .modern .home-panel--briefing {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .modern .home-panel--meeting,
  .modern .home-panel--members {
    grid-column: span 3;
    grid-row: auto;
  }

  .modern .home-panel--tools,
  .modern .home-panel--hub {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 600px) {
  .modern .terminal-frame > header {
    margin-bottom: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .modern .hero {
    padding: 56px 20px 24px;
    border-radius: 22px;
  }

  .modern .hero-text {
    font-size: 1.08rem;
  }

  .modern .hero .hero-stats {
    margin-top: 44px;
  }

  .modern .hero-stat {
    padding: 20px 6px 4px;
  }

  .modern .home-panels {
    gap: 14px;
    margin-top: 44px;
  }

  .modern .home-panel,
  .modern .home-panel--briefing {
    grid-column: 1 / -1;
    padding: 24px;
  }

  .modern .home-explore,
  .modern .footer {
    margin-top: 64px;
  }

  .modern .tile {
    padding: 18px;
  }

  .modern .bento-apps img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .modern .bento-faces img {
    width: 44px;
    height: 44px;
  }
}

/* --- AI vs Physician: the living review, set as a journal article --- */

/* a page title that keeps its own capitals */
.modern .section-title--as-written {
  text-transform: none;
}

.modern .evidence-card,
.modern .evidence-card:visited {
  gap: 10px;
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background: var(--night);
  box-shadow: var(--shadow);
  color: rgb(226 240 235 / 0.9);
}

.modern .evidence-card:hover {
  box-shadow: var(--shadow-lift);
  color: rgb(226 240 235 / 0.9);
  text-decoration: none;
  transform: translateY(-2px);
}

.modern .evidence-kicker {
  color: var(--spark-soft);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
}

.modern .evidence-title {
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.modern .evidence-go {
  margin-top: 6px;
  color: var(--spark-soft);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: lowercase;
}

.modern .evidence-go::first-letter {
  text-transform: uppercase;
}

.modern .review {
  max-width: 780px;
}

.modern .review-meta {
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modern .review-title {
  margin: 12px 0 18px;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.modern .review-summary {
  color: #334155;
  font-size: 1.2rem;
  line-height: 1.65;
}

.modern .review-text,
.modern .review-list li {
  color: #334155;
  font-size: 1.08rem;
  line-height: 1.75;
}

.modern .review-cite {
  padding: 0 1px;
  font-size: 0.78em;
  font-weight: 600;
  vertical-align: 0.25em;
}

.modern .review-tally {
  overflow: hidden;
  margin-top: 26px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.modern .review-tally-cell {
  padding: 20px 10px 18px;
}

.modern .review-tally dt {
  color: var(--brand);
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 500;
}

.modern .review-tally dd {
  margin-top: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.modern .review-findings {
  margin-top: 32px;
  padding: 26px 28px 14px;
  border: 0;
  border-left: 4px solid var(--spark);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-soft);
}

.modern .review-section {
  margin-top: 44px;
}

.modern .review-heading {
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}

.modern .review-study {
  padding: 22px 24px 12px 64px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.modern .review-study::before {
  content: counter(study);
  left: 22px;
  top: 22px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

.modern .review-study:target {
  border-color: var(--spark);
  box-shadow: 0 0 0 3px rgb(16 185 129 / 0.25), var(--shadow);
}

.modern .review-study-title,
.modern a.review-study-title:visited {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.modern a.review-study-title:hover {
  color: var(--brand);
}

.modern .review-verdict {
  background: #e0f2fe;
  color: #075985;
}

.modern .review-verdict--mixed,
.modern .review-verdict--ai_help_harmed,
.modern .review-verdict--ai_help_no_benefit {
  background: #fef3c7;
  color: #92400e;
}

@media (max-width: 600px) {
  .modern .review-study {
    padding: 18px 18px 8px;
  }

  .modern .review-study::before {
    display: block;
    margin-bottom: 10px;
  }
}

/* the join card is white, so its label is green ink, not mint on glass */
.modern .join-hero .hero-kicker {
  border-color: var(--line-strong);
  background: var(--brand-soft);
  color: var(--brand);
}

/* folders inside their fold */
.modern .hub-folders .resource-summary {
  font-size: 0.95rem;
}

.modern .hub-shelf > .resource-body,
.modern .mod-fold > .resource-body {
  padding-top: 4px;
}

/* the card is a link, but its text reads as text */
.modern .evidence-card .evidence-text {
  font-weight: 400;
}

.modern .site-note {
  margin-top: 56px;
  font-size: 0.85rem;
}

.modern .site-note + .footer,
.modern .site-note + .bottom-rule + .footer {
  margin-top: 28px;
}

.modern .mod-hidden-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
}

.modern .mod-delete,
.modern .mod-delete:hover {
  border-color: #fecaca;
  background: #fff;
  color: var(--error);
}

.modern .mod-delete:hover {
  background: #fef2f2;
}

/* the Instagram link above the footer */
.modern .site-social {
  margin-top: 64px;
  font-size: 0.92rem;
  letter-spacing: 0;
}

.modern .site-social a {
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
}

.modern .site-social a:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.modern .site-social span {
  text-transform: lowercase;
}

.modern .site-social span::first-letter {
  text-transform: uppercase;
}

.modern .site-social + .site-note {
  margin-top: 16px;
}

/* --- the Tools page: one card per tool --- */

.modern .toolbox-card {
  gap: 14px;
  padding: 22px;
}

.modern .toolbox-card .tool-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.14);
}

.modern .toolbox-title,
.modern .toolbox-title:visited {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.modern .toolbox-title:hover {
  color: var(--brand);
  text-decoration: none;
}

.modern .toolbox-card .project-desc {
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.55;
}

.modern .toolbox-wide,
.modern .toolbox-wide:visited {
  color: var(--muted);
  font-weight: 500;
}

/* --- the home page: three ways in, as glass cards on the dark hero --- */

.modern .hero-text strong {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.modern .home-doors {
  gap: 16px;
  margin-top: 48px;
}

.modern .home-door {
  gap: 8px;
  padding: 24px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.07);
  transition: 0.18s ease-out;
}

.modern .home-door:hover {
  border-color: rgb(110 231 183 / 0.6);
  background: rgb(255 255 255 / 0.11);
  transform: translateY(-2px);
}

.modern .home-door-step {
  color: var(--spark-soft);
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
}

.modern .home-door-title,
.modern .home-door-title:visited {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
}

.modern .home-door-title:hover {
  color: var(--spark-soft);
  text-decoration: none;
}

.modern .home-door-text {
  color: rgb(226 240 235 / 0.88);
  font-size: 1rem;
}

.modern .home-door-link,
.modern .home-door-link:visited {
  color: var(--spark-soft);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: lowercase;
}

.modern .home-door-link::first-letter {
  text-transform: uppercase;
}

.modern .home-door-link::after {
  content: "\00a0\2192";
}

.modern .home-door-link:hover {
  color: #fff;
}

@media (max-width: 600px) {
  .modern .home-doors {
    margin-top: 32px;
  }

  .modern .home-door {
    padding: 20px;
  }
}

/* a door link that keeps its own capitals */
.modern .home-door-link--as-written {
  text-transform: none;
}

/* the tabs inside a menu group sit quietly above the page title */
.modern .section-tabs {
  margin: 0 0 4px;
}

.modern .section-tabs .hub-tab {
  padding: 6px 14px;
  font-size: 0.78rem;
}


/* === POLISH PASS (2026-10-12) ================================
   One scale for the small text, so nothing is hard to read:
     labels and tags      0.75rem  (12px), semibold
     small print          0.875rem (14px): dates, sources, bylines
     buttons and tabs     0.875rem (14px)
   Reading text stays at 1rem or more. Long prose is kept to a
   comfortable line length. */

/* labels and tags */
.modern .member-tag,
.modern .blog-cat,
.modern .blog-tag,
.modern .tile-tag,
.modern .blog-why-label,
.modern .roster-role,
.modern .home-panel-title,
.modern .evidence-kicker,
.modern .hero-kicker,
.modern .review-meta,
.modern .dash-title,
.modern .home-door-step,
.modern .review-tally dd {
  font-size: 0.75rem;
}

/* small print */
.modern .blog-date,
.modern .blog-source,
.modern .blog-archive-date,
.modern .home-list-meta,
.modern .hub-card-meta,
.modern .roster-meta,
.modern .account-email,
.modern .mod-detail,
.modern .ms-date,
.modern .video-meta,
.modern .link-source,
.modern .chat-time,
.modern .chat-project-link,
.modern .interest-chip,
.modern .toolbox-wide,
.modern .review-study-who,
.modern .review-study-limit {
  font-size: 0.875rem;
}

.modern .blog-date,
.modern .review-meta {
  letter-spacing: 0.06em;
}

/* buttons, tabs and filters: one size, easy to hit */
.modern .btn,
.modern .hub-tab,
.modern .filter-btn,
.modern .ms-cta,
.modern .project-doc-link,
.modern button {
  font-size: 0.875rem;
}

.modern .section-tabs .hub-tab {
  padding: 7px 15px;
  font-size: 0.8125rem;
}

.modern .theme-toggle {
  font-size: 0.8125rem;
}

.modern .blog-more summary,
.modern .account-details-summary {
  font-size: 0.95rem;
}

/* prose pages (privacy, about): a comfortable line length */
.modern main.section > p:not([class]),
.modern main.section > ul:not([class]),
.modern main.section > ol:not([class]),
.modern .evidence-text {
  max-width: 72ch;
}

/* a tile or title that keeps its own capitals */
.modern .tile-title--as-written {
  text-transform: none;
}

/* the phone menu button: a plain word, no terminal brackets */
.modern .nav-toggle-icon {
  display: none;
}

.modern .nav-toggle {
  text-transform: capitalize;
}

/* home: the large briefing card uses its room */
.modern .home-panel--briefing .home-headline {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

.modern .home-panel--briefing .home-panel-text {
  font-size: 1.15rem;
  line-height: 1.6;
}

.modern .home-list-title {
  font-size: 1.02rem;
  font-weight: 600;
}

/* a tool's details page: the name reads as a title, the text as text */
.modern .hub-detail {
  padding: 32px;
}

.modern .hub-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
}

.modern .hub-detail .hub-description {
  max-width: 72ch;
  font-size: 1.08rem;
  line-height: 1.7;
}

/* cards breathe a little more, and sections sit further apart */
.modern .projects-list.hub-grid {
  gap: 18px;
}

.modern .roster-grid {
  gap: 18px;
}

.modern .back-link {
  display: inline-block;
  margin-top: 40px;
}

@media (max-width: 600px) {
  .modern .hub-detail {
    padding: 22px 18px;
  }

  .modern .theme-toggle,
  .modern .nav-toggle {
    font-size: 0.78rem;
  }

  /* headings a touch smaller on phones, so two-word titles stay on one line */
  .modern .section-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .modern .section-title + .note,
  .modern .section-title + p {
    font-size: 1.02rem;
  }
}


/* === HOME GRID: THE PAPER IS THE FEATURE (2026-10-13) =========
   The AI vs Physician review takes the large card; the latest briefing
   and the team sit beside it; the meeting, the tools and the newest
   tools share the row below. These rules come last so they replace the
   earlier placements. */

.modern .home-panel--review {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
  padding: 40px;
  background: linear-gradient(165deg, #fff 45%, #e6f5ee 100%);
}

.modern .home-panel--briefing {
  grid-column: 8 / span 5;
  grid-row: 1;
  padding: 28px;
  background: var(--card);
}

.modern .home-panel--members {
  grid-column: 8 / span 5;
  grid-row: 2;
}

.modern .home-panel--meeting {
  grid-column: 1 / span 4;
  grid-row: 3;
}

.modern .home-panel--tools {
  grid-column: 5 / span 4;
  grid-row: 3;
}

.modern .home-panel--hub {
  grid-column: 9 / span 4;
  grid-row: 3;
}

.modern .home-panel--review .home-headline {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

.modern .home-panel--review .home-panel-text {
  max-width: 56ch;
  font-size: 1.15rem;
  line-height: 1.6;
}

.modern .home-panel--briefing .home-headline {
  font-size: 1.35rem;
  line-height: 1.25;
}

.modern .home-panel--briefing .home-panel-text {
  font-size: 1rem;
  line-height: 1.55;
}

.modern .home-findings {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: #334155;
  font-size: 1rem;
  line-height: 1.55;
}

.modern .home-findings li {
  position: relative;
  margin: 0;
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--line);
}

.modern .home-findings li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spark);
}

/* the smaller cards in the bottom row: their figures a size down */
.modern .home-panel--meeting p.bento-big {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
}

@media (max-width: 900px) {
  .modern .home-panel--review {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .modern .home-panel--briefing,
  .modern .home-panel--members {
    grid-column: span 3;
    grid-row: auto;
  }

  .modern .home-panel--meeting,
  .modern .home-panel--tools,
  .modern .home-panel--hub {
    grid-column: span 2;
    grid-row: auto;
    order: 0;
  }
}

@media (max-width: 600px) {
  .modern .home-panel--review,
  .modern .home-panel--briefing,
  .modern .home-panel--members,
  .modern .home-panel--meeting,
  .modern .home-panel--tools,
  .modern .home-panel--hub {
    grid-column: 1 / -1;
    padding: 24px;
  }
}

/* --- the Home button on phones: a small house beside the menu button --- */

@media (max-width: 600px) {
  .modern .terminal-frame > header {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .modern .home-button,
  .modern .home-button:visited {
    display: grid;
    place-items: center;
    grid-column: 2;
    grid-row: 1;
    width: 34px;
    height: 34px;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink);
  }

  .modern .home-button svg {
    display: block;
    width: 17px;
    height: 17px;
  }

  .modern .home-button span {
    display: none;
  }

  .modern .theme-toggle {
    grid-column: 3;
  }

  .modern .nav-toggle {
    grid-column: 4;
  }
}

.modern .blog-compare {
  font-size: 0.8125rem;
  font-style: italic;
  letter-spacing: 0;
}

.modern .review-tallies {
  gap: 20px;
  margin-top: 26px;
}

.modern .review-tally-heading {
  color: var(--brand);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
}

.modern .review-tallies .review-tally {
  margin-top: 0;
}