@import './fonts.css';
@import url('./speakers.css');

/* ======================================================= */
/*                  ^ fonts and speaker style              */
/*              these two bring in extra styles            */
/* ======================================================= */

:root{
  /*
   * These are like universal variables for color and spacing.
   * This makes it easy to change how things look later,
   * just by changing a number here instead of everywhere else.
   * For example, changing --charcoal changes all the text color.
   */
  --charcoal:#26251C;         /* the main dark for text */
  --cream:#E8E8E7;            /* background color, near-white*/
  --accent:#fff200;           /* a bright yellow, for attention spots */
  --fg:var(--charcoal);       /* fg means foreground, the default text */
  --bg:var(--cream);          /* bg means background */

  --edge:24px;                /* main outer padding */
  --edge-sm:16px;             /* tighter outer padding on mobile */
  --maxw:min(1100px, 98vw);                /* keeps the overall content from getting too wide */
  --reading:64ch;             /* sets a comfortable measure for reading text */
  --column:58ch;              /* columns anchor to this width */
  --border:#000;              /* for any lines, always black */
}

/* ###############  RESET & BASE STYLE ############### */
/* This is the baseline: removes built-in page spacing.
   The box model is set up so that sizing works like you'd expect. */
*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  background:var(--bg);   /* the page background color */
  color:var(--fg);        /* sets main text color */
  font-family:'FluxischElse-Regular','Times New Roman',serif;  
  line-height:1.2;        /* this affects how spread out lines are */
  -webkit-font-smoothing:antialiased;    /* keeps things crisp on Mac */
  text-rendering:optimizeLegibility;     /* helps font details render nicely */
  font-feature-settings:"liga","clig","kern","onum","tnum";   /* tweaks how numbers and text look */
  hanging-punctuation:first;   /* punctuation hangs into the margin a bit */
}

/* --------------------------------------------- */
/* Links look like regular text but with an underline */
a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
a:hover{ text-decoration:underline; }

/* --------------------------------------------- */
/* All images fill their container and have soft corners. */
img{ max-width:100%; height:auto; display:block; border-radius:6px; }

/* --------------------------------------------- */
/* The main content container keeps everything centered,
   with breathing room on the sides. */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding: calc(var(--edge) + 2vh) var(--edge);
}
@media (max-width:720px){
  /* On smaller screens, things fit closer to the edges */
  .container{ padding: calc(var(--edge-sm) + 1.5vh) var(--edge-sm); }
}


/* about page */

.about-title {
	align-content: center;
	text-align: center;
}


/*
  _________________________________________________________
  |                     COLUMN SYSTEM                    |
  -------------------------------------------------------
   This controls the main grid structure and spacing. 
   Four fixed columns for a flexible but consistent layout.
   Content can be placed in any column.
   The measurements keep it feeling balanced on any screen size.
  _________________________________________________________
*/

:root{ --cols-gap: clamp(16px, 2vw, 28px); }  /* sets min/max gap between columns */

.columns{
  /* Each column is not too small or too wide; always readable. 
     The size responds to screen size, staying within limits. */
  --colw: clamp(26ch, calc(var(--column) / 2), 42ch);
  --cols-total: calc( (4 * var(--colw)) + (3 * var(--cols-gap)) );

  display:grid;
  grid-template-columns: repeat(4, minmax(0, var(--colw)));
  justify-content:center;
  gap: var(--cols-gap);
  width: 100%;
  max-width: min(1700px, 98vw);
  margin: 0 auto;
  grid-auto-flow: row;
}

/*
    This last part helps to visually separate the columns, even if they're empty.
    It draws faint vertical lines between them, using a repeating background image.
*/

.columns.rules{
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--colw)),
      var(--border) calc(var(--colw)),
      var(--border) calc(var(--colw) + 1px),
      transparent calc(var(--colw) + 1px),
      transparent calc(var(--colw) + var(--cols-gap))
    );
  background-size: var(--cols-total) 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* -------------------------------------------------------------------------- */
/*      preset sizes for the columns grid, for when you want narrow/wide      */
.columns.narrow { --colw: clamp(22ch, calc(var(--column) / 2.4), 34ch); }
.columns.wide   { --colw: clamp(30ch, calc(var(--column) / 1.6), 48ch); }
.columns.xwide  { --colw: clamp(34ch, calc(var(--column) / 1.3), 54ch); }

/* -------------------------------------------------------------------------- */
/* Each col block is a place you can put stuff inside these columns.          */
.col{
  grid-row: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
}

/* these pick which column a block will go in */
.col[data-col="1"], .col-1{ grid-column: 1; }
.col[data-col="2"], .col-2{ grid-column: 2; }
.col[data-col="3"], .col-3{ grid-column: 3; }
.col[data-col="4"], .col-4{ grid-column: 4; }

/* you can let a block stretch over more than 1 column too */
.col.span-2{ grid-column-end: span 2; }
.col.span-3{ grid-column-end: span 3; }

/* Headings and text in columns have nice separation and spacing*/
.col h1, .col h2, .col h3{
  line-height: 1.25;
  margin: .9em 0 .4em;
  text-wrap: balance;
}
.col p{ text-wrap: pretty; hyphens: auto; widows: 2; orphans: 2; }
.col ul, .col ol{ padding-left: 1.2em; }
.col li + li{ margin-top: .25em; }

/* --------------- responsive columns --------------- */
@media (max-width: 1200px){
  .columns{ --colw: clamp(24ch, 24vw, 36ch); }
}
@media (max-width: 860px){
  .columns{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
  }
  /* the blocks cascade in a logical two-column way on smaller screens */
  .col[data-col="1"], .col-1{ grid-column: 1; }
  .col[data-col="2"], .col-2{ grid-column: 2; }
  .col[data-col="3"], .col-3{ grid-column: 1; }
  .col[data-col="4"], .col-4{ grid-column: 2; }
}
@media (max-width: 640px){
  .columns{ grid-template-columns: 1fr; }
  .col{ grid-column: 1 !important; }
  .columns.rules{ background-image: none; }
}
/* --------------------- Japanese-specific text formatting ----------------------- */
/*
  These rules improve Japanese typesetting:
  - Applies logical and readable fonts for Japanese
  - Uses proper font features for kana/kanji spacing
  - Increases line-height for vertical rhythm
  - Uses letter-spacing but disables for punctuation
  - Ensures safe line breaks and prevents overflow
  - No "text-justify: inter-ideograph" (which can break container flow)
*/
/* General Japanese language elements */
:lang(ja),
[lang="ja"] {
  font-family:
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", "Yu Gothic",
    sans-serif;
  font-feature-settings: "pkna" 1, "palt" 1;
  line-height: 1.85;
  font-weight: 600;
  letter-spacing: 0.012em;
  word-break: break-all;
  overflow-wrap: break-word;
  text-align: left;
  box-sizing: border-box;
  max-width: 100%;
  /* Prevent any overflow, no scrollbars ever */
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Remove letter spacing for Japanese punctuation in headings/paragraphs */
:lang(ja) p,
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) li {
  letter-spacing: 0.012em;
  max-width: 100%;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

:lang(ja) p span,
:lang(ja) h1 span,
:lang(ja) h2 span,
:lang(ja) h3 span,
:lang(ja) li span {
  letter-spacing: 0;
}

/* Ensure English/Latin runs (includes symbols/numbers) on Japanese pages use FluxischElse */
:lang(ja) :lang(en),
[lang="ja"] :lang(en),
:lang(ja) [lang="en"],
[lang="ja"] [lang="en"],
:lang(ja) :not(:lang(ja)):not(:lang(en)),
[lang="ja"] :not(:lang(ja)):not(:lang(en)) {
  font-family: 'FluxischElse-Regular', 'Times New Roman', serif !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
  font-feature-settings: "liga","clig","kern","onum","tnum" !important;
}

/* If you want numbers and isolated Latin characters in Japanese text to always use Latin font: */
:lang(ja) [lang|="en"],
[lang="ja"] [lang|="en"] {
  font-family: 'FluxischElse-Regular', 'Times New Roman', serif !important;
}

/* Japanese in code etc: don't override */
code:lang(ja),
pre:lang(ja),
kbd:lang(ja),
samp:lang(ja) {
  font-family: inherit;
  font-feature-settings: normal;
  line-height: inherit;
  letter-spacing: inherit;
  word-break: normal;
  /* Remove inherited overflow, but never scrollbars here either */
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Prevent overflow for any Japanese text blocks (e.g. articles) */
:lang(ja) {
  max-width: 100%;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* More specific for Japanese headings, e.g. */
h1:lang(ja), h2:lang(ja), h3:lang(ja) {
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-x: clip !important;
  overflow-y: visible !important;
}


/********************* PROFESSIONAL SITE HEADER + NAVIGATION ********************/
/*
   Layout: Logo/title on the left, horizontal nav menu on the right.
   Mobile: Stack or collapse nav into a menu (if JS provided), else wrap.
   Accessibility: Prominent focus, semantic structure, color contrast.
*/

/* Header container: Centers content & adds separation */
.site-header {
  width: 100%;
  margin: 0 auto;
  padding: 20px var(--edge) 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 64px;
}

/* Site name/title: Left side styling, distinct, brand-like */
.site-header h2 a {
  font-size: clamp(1.4rem, 2.7vw, 2.2rem);
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.01em;
  color: var(--fg);
  background: none;      /* Remove sticky bg */
  position: relative;
  z-index: 2;
  line-height: 1.13;
  /* prevents font from shrinking too much on tiny screens */
  white-space: nowrap;
  text-decoration: none;
}

/* Nav: Horizontal inline menu, right-aligned */
.site-header .nav {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: center;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: 1.05rem;
}

/* Nav Links: Clear, sharp, interactive */
.site-header .nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  color: var(--fg);
  letter-spacing: 0.02em;
  font-weight: 600;
  transition: color 0.15s cubic-bezier(.4,0,.2,1);
  border-radius: 3px;
  outline-offset: 2px;
  line-height: 1.28;
}

.site-header .nav a:hover,
.site-header .nav a:focus-visible {
  color: var(--accent);
  background: none;
  text-decoration: underline;
  outline: none;
  text-underline-offset: 3px;
}

.site-header .nav a:active {
  color: var(--accent);
}

/* Active state (if route highlighting is implemented) */
.site-header .nav a[aria-current="page"],
.site-header .nav a.active {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Better focus ring for accessibility */
.site-header .nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Responsive: Stack nav below logo/title on small screens */
@media (max-width: 700px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px var(--edge) 12px;
    min-height: 0;
    position: static;
    width: 100%;

  }
  .site-header h2 {
    font-size: clamp(1.23rem, 4.8vw, 1.7rem);
    margin-bottom: 5px;
    text-align: left;
    white-space: normal;
  }
  .site-header .nav {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 18px 8vw;
    font-size: 1rem;
    padding-top: 4px;
    border: none;
  }
}

/* Optional: reduce nav gap on very narrow screens */
@media (max-width: 430px) {
  .site-header .nav {
    gap: 10px 4vw;
  }
}


/* Print: Hide header if needed */
@media print {
  .site-header { display: none !important; }
}

/****************** HOMEPAGE STYLE ********************/
/* The main heading on the homepage is big and bold */
.container > h1{
  font-size:clamp(20px, 2.3vw, 25px);
  line-height:1.05;
  letter-spacing:.004em;
  margin-bottom:8px;
}
p.home-found{ opacity:.7; margin-bottom:20px; }

/* The list of posts (like news or updates) is kept neat and readable */
.post-feed{ 
  display:block;
  max-width:var(--column);
  margin:0 auto;
  padding: calc(var(--edge) + 2vh) var(--edge);
}
.post-item{
  padding:1vw 0;
  margin-bottom: 3vh;
}
.post-item:first-child{ border-top:0; }
.post-item h2{
  font-size:clamp(14px, 1.4vw, 20px);
  line-height:1;
  font-weight:600;
  margin-bottom:5px;
  text-wrap:balance;
}
.post-item .meta{ 
	opacity:.7; 
	margin-bottom:6px; 
	font-size:.95rem;
 }

.post-item .excerpt{ 
	max-width: none; 
}

/***************** CONVERSATION PAGES (BOOK LAYOUT) *******************/
.conversation{
  max-width:var(--maxw);
  margin:0 auto;
  padding: calc(var(--edge) + 2vh) var(--edge);
}
.conversation-title{
  text-align:center;
  font-size:clamp(32px, 5.2vw, 60px);
  line-height:1.06;
  letter-spacing:.004em;
  margin: 8px auto 14px;
  text-wrap:balance;
}

.conversation-metadata{ margin: 0 auto 24px; }
.conversation-metadata-table{
  width:min(900px,100%);
  margin:0 auto;
  border-collapse:collapse;
  background:transparent;
}
.conversation-metadata-table th,
.conversation-metadata-table td{
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.conversation-metadata-table th{
  width: 180px;
  font-weight:400;
  opacity:.7;
}
.conversation-metadata-table tr:last-child th,
.conversation-metadata-table tr:last-child td{ border-bottom:0; }
.conversation-metadata-table.horizontal { width: 100%; border-collapse: collapse; background: transparent; }
.conversation-metadata-table.horizontal th,
.conversation-metadata-table.horizontal td { padding: 6px 8px; text-align: center; vertical-align: top; }
.conversation-metadata-table.horizontal tr > *:last-child { border-right: 0; }
.conversation-metadata-table.horizontal thead th { font-weight: 600; white-space: nowrap; }

@media (max-width:640px){
  .conversation-title{ font-size:clamp(28px, 7vw, 42px); }
  .conversation-metadata-table th{ width:130px; }
}

.conversation-text{
  width: min(var(--column), 100%);
  margin: 0 auto;
  display:grid;
  gap: 1.1rem;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height:1.62;
}
.conversation-text p,
.conversation-text li{ color:#111; }
.conversation-text p{
  text-wrap: pretty;
  widows: 2;
  orphans: 2;
  hyphens:auto;
}
.conversation-text h1,
.conversation-text h2,
.conversation-text h3{ line-height:1.25; margin: 1.6em 0 .45em; text-wrap:balance; }
.conversation-text h2{ font-size: clamp(22px, 2.1vw, 28px); }
.conversation-text h3{ font-size: clamp(18px, 1.7vw, 22px); }
.conversation-text blockquote{ margin: 1rem 0; padding: .8rem 1rem; border-left: 3px solid var(--fg); }
.conversation-text a{ text-decoration:underline; text-underline-offset:2px; }
.conversation-text img{ margin-top:.2rem; }
.figure figcaption{ opacity:.7; margin-top:.35rem; font-size:.95rem; }
.pullquote{ margin: 1rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--fg); }
.pullquote-inner{ font-size: clamp(20px, 2.2vw, 26px); line-height:1.3; font-style: italic; }
.intro p { font-size: clamp(14px, 1.2vw, 16px); margin: 2vw; font-style: italic;}

/**********************************************/
/*      conversations index / all conversations        */
/**********************************************/
.conversations-index{ max-width: 1400px; margin:0 auto; padding: calc(var(--edge) - 2vh) var(--edge); }
.conversations-index h1{ font-size: clamp(18px, 2.4vw, 20px); margin-bottom: 12px; text-wrap:balance; }
.conversations-table{
  width:100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.35;
  table-layout: fixed;
  background:transparent;
  border:1px solid var(--border);
}
.conversations-table th, .conversations-table td{
  padding:4px 4px;
  text-align:left;
  border-right: 1px solid var(--border);
  border-bottom:1px solid var(--border);
  overflow-wrap: break-word;
}
.conversations-table thead th{ font-weight:600; }
.conversations-table td:first-child a{ text-decoration:underline; }
.conversations-table th:first-child, .conversations-table td:first-child{
  width: 40%;
  white-space: normal;
  text-wrap: balance;
  hyphens: auto;
}
.conversations-table th:nth-child(2), .conversations-table td:nth-child(2){ width: 12ch; }
.conversations-table th:nth-child(3), .conversations-table td:nth-child(3){ white-space: nowrap; width: 14ch; }
.conversations-table th:nth-child(4), .conversations-table td:nth-child(4){ white-space: nowrap; width: 10ch; }
/* Responsive conversations table: readable and scrollable on small screens */
@media (max-width: 760px) {
  .conversations-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
    border: 0;
    font-size: 1rem;
    background: transparent;
  }
  .conversations-table thead,
  .conversations-table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .conversations-table tr {
    display: table-row;
    width: auto;
  }
  .conversations-table th,
  .conversations-table td {
    min-width: 120px;
    padding: 8px 6px;
    font-size: 0.98em;
    white-space: normal !important;
    text-wrap: balance;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    word-break: break-word;
    hyphens: auto;
  }
  .conversations-table th:first-child,
  .conversations-table td:first-child {
    min-width: 180px;
    max-width: 280px;
    width: auto;
    font-size: 1.05em;
  }
  .conversations-table th:nth-child(2),
  .conversations-table td:nth-child(2),
  .conversations-table th:nth-child(3),
  .conversations-table td:nth-child(3),
  .conversations-table th:nth-child(4),
  .conversations-table td:nth-child(4){
    min-width: 90px;
    width: auto;
    white-space: nowrap;
  }
  .conversations-index {
    padding-left: min(2vw, var(--edge-sm, 10px));
    padding-right: min(2vw, var(--edge-sm, 10px));
  }
  /* Make sure table scrolls horizontally if needed, but keep as readable as possible */
  .conversations-table::-webkit-scrollbar {
    height: 5px;
    background: transparent;
  }
  .conversations-table::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
  }
  /* Responsive: tighten up cards/lists below */
  .conversations-list{ display: grid; gap: 12px; margin-top: 8px; font-size: 0.98rem; }
  .conv-card{ padding:14px 0; border-top:1px solid var(--border); }
  .conv-card:first-child{ border-top:0; }
  .conv-card h3{ font-size: 18px; margin-bottom: 6px; text-wrap: balance; }
  .conv-meta{ opacity:.7; font-size: 14px; }
}

/******************** FOOTER ********************/
.site-footer{
  display: flex;
  align-items: center;
  justify-content: right;
  padding: 10px var(--edge);
  border-top: 1px solid var(--border);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  min-height: 64px;
  background: var(--bg);
  width: 100vw;
}

@media (max-width: 700px) {
  .site-footer {
    position: static;
    width: 100%;
  }
}

/* Add body padding so last content isn't hidden behind footer */
body {
  padding-bottom: 64px;
}
.site-footer small{ opacity:.8; }

/******************** MOTION & ACCESSIBILITY ******************/
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------ */
/*      Full-bleed responsive columns grid (modern, robust)      */
.columns.fullbleed {
  /* Removes max-width, stretches to full viewport width */
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  /* Responsive, safe-area aware padding for mobile devices */
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
  /* Ensure it sits above the background */
  background: var(--bg, #fff);
  /* Use grid's own padding for top/bottom spacing if needed */
}

/*      more vertical lines   */
.columns.rules{
  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc(var(--colw)),
      var(--border) calc(var(--colw)),
      var(--border) calc(var(--colw) + 1px),
      transparent calc(var(--colw) + 1px),
      transparent calc(var(--colw) + var(--cols-gap))
    );
  background-size: var(--cols-total) 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* Responsive column width options for varying layouts */
.columns.narrow { --colw: clamp(22ch, calc(var(--column) / 2.4), 34ch); }
.columns.wide   { --colw: clamp(30ch, calc(var(--column) / 1.6), 48ch); }
.columns.xwide  { --colw: clamp(34ch, calc(var(--column) / 1.3), 54ch); }

/*
 * .c-col is a content block inside a columns grid.
 * Ensures spacing, flow, and resets weird inheritance.
 */
.columns .c-col{
  all: unset;
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;
}
.columns .c-col *{ all: revert; }

.columns .c-col h1, 
.columns .c-col h2, 
.columns .c-col h3{
  line-height: 1.25;
  margin: .9em 0 .4em;
  text-wrap: balance;
}
.columns .c-col p{
  text-wrap: pretty;
  hyphens: auto;
  widows: 2;
  orphans: 2;
}
.columns .c-col ul,
.columns .c-col ol{ padding-left: 1.2em; }
.columns .c-col li + li{ margin-top: .25em; }

/* Four-column placement */
.columns .c-col[data-slot="1"], .columns .c-col.slot-1{ grid-column: 1; }
.columns .c-col[data-slot="2"], .columns .c-col.slot-2{ grid-column: 2; }
.columns .c-col[data-slot="3"], .columns .c-col.slot-3{ grid-column: 3; }
.columns .c-col[data-slot="4"], .columns .c-col.slot-4{ grid-column: 4; }

/* Cols spanning */
.columns .c-col.span-2{ grid-column-end: span 2; }
.columns .c-col.span-3{ grid-column-end: span 3; }

/* ----------- Responsive grid: 4, 2, then 1 column ----------- */
@media (max-width: 1200px){
  .columns{ --colw: clamp(24ch, 24vw, 36ch); }
}

@media (max-width: 640px){
  .columns{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns .c-col[data-slot="1"], .columns .c-col.slot-1{ grid-column: 1; }
  .columns .c-col[data-slot="2"], .columns .c-col.slot-2{ grid-column: 2; }
  .columns .c-col[data-slot="3"], .columns .c-col.slot-3{ grid-column: 1; }
  .columns .c-col[data-slot="4"], .columns .c-col.slot-4{ grid-column: 2; }
}
@media (max-width: 640px){
  .columns {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100vw;
  }
  .columns .c-col {
    position: relative;
    z-index: auto;
    order: initial;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    grid-column: auto !important;
  }
  .columns.rules{ background-image: none; }
}

/* ==================== CONVERSATIONS HOMEPAGE CLUSTERS ==================== */
section.conversations-index {
    max-width: none;
    width: min(96vw, var(--maxw, 96vw));
    margin-left: auto;
    margin-right: auto;
    padding: calc(var(--edge) + 2vh) var(--edge);
  }

/* ========================================================================
   CLUSTERED FEED LAYOUT STYLES
   This part is all about making the special conversation cluster layout work—
   putting grouped cards side by side, then letting them stack on smaller screens
   ======================================================================== */

/*
============================================================================
  This bit makes the clustered feed wider than the normal column, and centers it
============================================================================
*/
.post-feed.conversation-clusters {
    max-width: none;               /* Lets the cluster spread out as far as it needs */
    width: min(96vw, var(--maxw, 96vw)); /* Keeps it from going past 96% of screen, or a max if set */
    margin-left: auto;
    margin-right: auto;
    padding: calc(var(--edge) + 2vh) var(--edge); /* Even padding on sides and top/bottom */
}

/*
============================================================================
  This next part just lets the inner wrapper fill the available width
============================================================================
*/
.conversation-clusters{
    display: grid;
    gap: var(--gap, 12px);         /* Controls space between clusters */
    width: 100%;                   /* Takes up full width given by parent */
}

/*
============================================================================
  Cards in a row: Each card sits side by side, centered as a group
  If there are too many cards, you can scroll left/right
============================================================================
*/
.cluster .cluster-row {
    display: flex;
    flex-wrap: nowrap;             /* All cards stay in a single horizontal row */
    gap: var(--gap, 12px);
    justify-content: center;       /* Center the row of cards in the container */
    align-items: stretch;          /* Makes all cards the same height */
    overflow-x: auto;              /* Lets you scroll sideways if there are lots of cards */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
}

/*
============================================================================
  This handles the card sizing—cards shrink and grow but never get too wide
============================================================================
*/
.conversation-card{
    flex: 1 1 260px;               /* Basic card is 260px wide but can get bigger or smaller */
    max-width: 480px;              /* A card will never get ultra-wide */
}

/*
============================================================================
  When the screen is not so wide, stack cards vertically so they are easy to read
============================================================================
*/
@media (max-width: 1705px) {
    .cluster .cluster-row {
        flex-wrap: nowrap;
        flex-direction: column;    /* Stack cards on top of each other */
        overflow-x: visible;       /* No need for sideways scroll when stacked */
		margin-left: 8vw;
		margin-right: 8vw;
    }
    .conversation-card {
        flex: 1 1 auto;            /* Cards fill available width */
        max-width: none;
    }
}

/*
=======================================
  Small table for the little meta row
=======================================
*/
.meta-table {
  width: 100%;                    /* Table stretches to parent width */
  border-collapse: collapse;      /* Gets rid of space between table cells */
  margin: 2px 0 6px 0;            /* Tucks it up / down a bit */
  table-layout: fixed;            /* All cells take up same width */
  font-size: 0.8rem;
}
.meta-table td {
  padding: 0;
  font-size: 0.7 rem;             /* Bit smaller for meta info */
  vertical-align: top;
  text-align: center;
  height: auto;
}

/*
========================================
  Adds a little breathing room for titles
========================================
*/
.conversation-title { margin: 0 0 6px 0; }
.conversation-blurb { margin: 0; }

/*
============================================================================
  Final override—lets the rows wrap into two lines if there are many cards,
  and makes sure they stay centered. No funky scrolling here.
============================================================================
*/
.cluster .cluster-row{
    display: flex;
    flex-wrap: wrap;               /* Lets cards go to a second line if needed */
    gap: var(--gap, 12px);
    justify-content: center;       /* Still centered even when wrapped */
    align-items: stretch;
    overflow: visible;             /* No scrolling */
    padding-bottom: 0;
}

/*--------------------------------------------------------------------------
footnotes
=====================================*/

/* Inline refs */
sup.footnote-ref {
  font-size: 0.8em;
  line-height: 1;
}
sup.footnote-ref a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Footnotes block */
.footnotes {
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border, currentColor);
  color: var(--muted, inherit);
}
.footnotes h2 {
  font: inherit;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--text, inherit);
}
.footnotes-list {
  list-style: decimal;
  margin: 0 0 0 1.25rem;
  padding: 0;
}
.footnote-item {
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0.25rem 0;
}

/* Backlink */
.footnote-backref {
  text-decoration: none;
  margin-left: 0.5rem;
  opacity: 0.8;
}
.footnote-backref:hover,
.footnote-backref:focus {
  opacity: 1;
  outline: none;
  text-decoration: underline;
}

/* Smooth scroll + fixed-header offset */
:target {
  scroll-margin-top: var(--sticky-offset, 80px);
}
html {
  scroll-behavior: smooth;
}