:root {
  --color-text: rgba(44, 27, 27, 0.85);
  --color-text-light: rgba(44, 27, 27, 0.85);
  --color-link: rgba(44, 27, 27, 0.85);
  --color-link-hover: rgba(44, 27, 27, 0.3);
  --header-height: 112px;
  --footer-height: 90px;
  --max-width: 1000px;
  --spacing: 4rem;
}

/* The home page footer also carries the webring bar (44px), so it gets a
   taller fixed footer; every other page keeps the original height. */
.home {
  --footer-height: 136px;
}

/* ---------- Reset & Base ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 18px;
}

body {
    font-family: "Times New Roman", Times, serif;  line-height: 1.3;
  color: var(--color-text);
  background: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  border-width: clamp(0.75rem, 2.5vw, 3.6rem);
    border-style: solid;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

a:click {
    color: var(--color-link-hover);
}

figure {
    margin: 2rem 0;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

figcaption {
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 5rem var(--spacing) 2rem;
  background: #fff;
  z-index: 1000;
}

.site-header .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-header .site-name {
  font-family: "Pinyon Script", serif;
  font-size: 1.3rem;
  font-weight: 400;
  font-style: normal;
  color: var(--color-text-light);
}

.lang-switcher {
  display: flex;
  gap: 0.5rem;
}

.lang-btn {
  font-size: 0.75rem;
  color: var(--color-text-light);
  transition: opacity 0.3s ease;
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-text-light);
  border-radius: 3px;
  letter-spacing: 0.03em;
  opacity: 1;
  transition: opacity 0.15s;
}

.lang-btn:hover {
  opacity: 0.7;
}

/* ---------- Footer ---------- */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem var(--spacing) 2rem;
  background: #fff;
  font-family: "Pinyon Script", serif;
  font-size: 1.1rem;
  font-weight: 400;
  font-style: normal;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* waisi.live webring bar. It is a cross-origin iframe, so the site's CSS can't
   reach inside it; colours and type are passed as query params on the src (see
   partials/footer.html). Out here we only own the box: no border, and the
   44px height the widget is designed for. */
.webring-embed {
  display: block;
  width: 100%;
  height: 44px;
  border: 0;
  flex: none;
}

/* ---------- Container ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: calc(var(--footer-height) + 3rem);
  padding-left: clamp(1.25rem, 6vw, 10rem);
  padding-right: clamp(1.25rem, 6vw, 10rem);
}

/* ---------- Bio ---------- */
.bio {
  margin-bottom: 2rem;
  margin-left: 3.5rem;
  font-size: 1rem;
  line-height: 1.3;
  font-style:italic;
  text-align: right;
}

.bio a {
    text-decoration: underline;
}

/* ---------- Categories / Sections ---------- */
.category {
  margin-bottom: 0rem;
  margin-left:2rem;
  text-align: left;
}

.category h2 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
  font-weight:bold;
  text-transform: uppercase;
}

.category ul {
  list-style: none;
  padding-left: 0;
}

.category li {
  padding-left: 4rem; /* nested subsections */

}

.category li a {
  font-family: "Times New Roman", Times, serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
}

/* ---------- Article / Single Page ---------- */
.single-article {
  margin-bottom: 3rem;
  margin-left:2rem;
  text-align: left;
}

.single-article h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.single-article h3 {
  line-height:2;
}

.single-article p {
  margin-bottom: 1rem;
  line-height: 1.5;
  font-size: 1rem;
}

.single-article ul {
    margin-left: 1rem;
    list-style-type: none;
    font-size: 1rem;
    margin-bottom:1rem;
}

.single-article a {
  text-decoration: underline;
}

/* Tables: kept minimal to match the rest of the page — no vertical rules or
   boxes, just a header underline, generous cell padding, and top-aligned
   cells. Wrapped in a horizontal scroll on narrow screens. */
.single-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 1.5rem 0;
  display: block;
  overflow-x: auto;
}

.single-article th,
.single-article td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid rgba(44, 27, 27, 0.15);
}

.single-article thead th {
  font-weight: 700;
  border-bottom: 1px solid rgba(44, 27, 27, 0.4);
}

.single-article table a {
  text-decoration: underline;
}

@media (max-width: 768px) {

    html {
    font-size: 18px;
  }
  body {
  border-width: clamp(0.75rem, 2.5vw, 3.6rem);
  }

  .site-header {
    padding: 3rem 1.5rem 1.5rem;
    height: auto;
  }

  .site-footer {
    padding: 1.5rem;
    height: auto;
    font-size: 1rem;
  }

  .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: calc(var(--header-height) + 3rem);
  padding-bottom: calc(var(--footer-height) + 3rem);
  padding-left: 0;
  padding-right: 0;
}


  /* Scale text UP on mobile */
  .bio,
  .category h2,
  .category li a,
  .single-article p,
  .single-article ul,
  figcaption {
    font-size: 1rem;
    line-height: 1.55;
  }

  .single-article h1 {
    font-size: 1.15rem;
  }

  a {
    line-height: 1.6;
  }

  /* The webring bar can't wrap (its links are nowrap and it clips overflow),
     so on narrow phones let it borrow the footer's side padding. Its own inner
     padding is 0.75rem, so pulling out by that much keeps "← Name" flush with
     "Email" below it. */
  .webring-embed {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }

}

@media (min-width: 1024px) {
  .container {
    padding-left: 9rem;
    padding-right: 9rem;
  }
}

/* ---------- Footnotes ---------- */
sup {
  font-size: 0.65rem;
  vertical-align: super;
  line-height: 0;
}

sup a {
  text-decoration: none;
  color: var(--color-text);
  opacity: 0.6;
}

sup a:hover {
  opacity: 1;
}

.footnotes {
  margin-top: 3rem;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: rgba(44, 27, 27, 0.65);
  line-height: 1.5;
}

.footnotes ol {
  padding-left: 1.25rem;
}

.footnotes li {
  margin-bottom: 0.5rem;
}

.footnotes a {
  color: rgba(44, 27, 27, 0.65);
  text-decoration: underline;
}

.footnotes a:hover {
  opacity: 0.7;
}

.footnotes li,
sup {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}