.front {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--space-3) var(--page-padding) 0;
}

.layout-table {
  width: 100%;
  table-layout: fixed;
  border: 3px outset var(--garnish-border);
  border-spacing: 5px;
  background: var(--bg-sunk);
}
.layout-table > tbody > tr > td {
  padding: 0.8rem 1rem;
  border: 1px inset var(--garnish-border);
  background: var(--garnish-cell-bg);
  vertical-align: top;
}
.layout-table a { color: var(--garnish-link); text-decoration-color: currentColor; }
.layout-table a:visited { color: var(--text-muted); }
.layout-table a:hover { color: var(--link-hover); }

.layout-table .col-main { width: 56%; }

.masthead { position: relative; text-align: center; }
.masthead .site-controls { position: absolute; top: 0.6rem; right: 0.7rem; }
.masthead-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: var(--figure-height, 12rem);
}
.front-title { margin: 0; }
.masthead-nav { margin: 1.1em 0 0; }
.masthead-nav a { margin: 0 0.3em; }
.front-title .title-mark {
  display: block;
  height: clamp(3.2rem, 15vw, 4.6rem);
  margin: 0 auto;
  color: var(--text);
}

.cell-heading {
  margin: -0.8rem -1rem 0.8rem;
  padding: 0.1rem 0.6rem;
  background: var(--garnish-heading-bg);
  border-bottom: 1px solid var(--garnish-border);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.cell-heading:not(:first-child) { margin-top: 1.4rem; border-top: 1px solid var(--garnish-border); }
.cell-heading::before { content: "\25A0\00A0"; color: var(--accent); }
.cell-heading a { color: inherit; text-decoration: none; }
.cell-heading a::after { content: " \2192"; color: var(--text-faint); }
.cell-heading a:hover { color: var(--accent); }

.intro { margin: 0 0 0.9em; font-size: 1.05rem; line-height: 1.5; hyphens: auto; }
.intro + .intro { margin-top: -0.5em; }

.front-nav {
  margin: 0 0 1.2em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.front-nav a { margin-right: 0.6em; }

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}
.recent-list li {
  display: grid;
  grid-template-columns: 6.2em 1fr;
  gap: 0.6em;
  padding: 0.35em 0;
  border-bottom: 1px dotted var(--rule);
}
.recent-list time, .recent-list .when {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--text-muted);
  padding-top: 0.15em;
}
.recent-list .unwritten { color: var(--text-muted); }
.recent-list .note { font-size: 0.8em; color: var(--text-faint); }

.semantic-poetry {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
}
.semantic-poetry .original { margin: 0 0 0.5em; font-style: italic; color: var(--text-muted); }
.semantic-poetry .translation { margin: 0; padding-left: 1em; border-left: 2px solid var(--accent); }
.semantic-poetry .translation span { display: block; }
.semantic-poetry .translation span + span { padding-left: 2.2em; text-indent: -1em; }
.semantic-poetry .credit { margin: 0.5em 0 0; font-size: 0.85em; color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
}

.table-confession {
  margin: 0.4rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  text-align: right;
}

.about-facts { width: 100%; border-collapse: collapse; font-size: 0.85rem; line-height: 1.4; }
.about-facts th, .about-facts td { padding: 0.35em 0.4em; border-bottom: 1px dotted var(--rule); text-align: left; vertical-align: top; }
.about-facts th { width: 6.5em; font-family: var(--font-mono); font-weight: 400; font-size: 0.85em; color: var(--text-muted); }
.about-text p { margin: 0 0 0.8em; line-height: 1.55; hyphens: auto; }

.front .site-footer { margin-top: var(--space-4); }

@media (max-width: 760px) {
  .layout-table colgroup { display: none; }
  .layout-table, .layout-table > tbody, .layout-table > tbody > tr, .layout-table > tbody > tr > td { display: block; width: auto; }
  .layout-table > tbody > tr > td { margin-bottom: 5px; }
  .layout-table { padding: 5px 5px 0; }
  .masthead .site-controls { position: static; justify-content: flex-end; }
  .masthead-text { min-height: 0; padding: 1rem 0 0.8rem; }
}