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

/* Global */

/* Color variables */
:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-accent-green: #a3b18a;
  --color-accent-pink: #d8a3b1;
  --color-muted: #7f7f7f;
  --color-code-bg: rgba(0, 0, 0, 0.04);
  --color-code-border: rgba(0, 0, 0, 0.08);
  --color-accent-green-50: rgba(163, 177, 138, 0.5);
}


body {
  padding: 1rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: auto;
  max-width: 900px;
  margin-right: auto;
  overflow-y: scroll;
  font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1 {
  font-size: 2.25rem;
  color: var(--color-text);
}

h2,
h3,
h4 {
  font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif;
  color: var(--color-text);
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}

h2 { 
  font-size: 1.5rem; border-left: 8px solid var(--color-accent-green);

}

h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }




article {
  margin-bottom: 2rem;
  font-size: 1rem;
}

.poem {
  font-size: 1.125rem;
}

.no-border{
  border-left: none;
}

.one-margin-bottom {
  margin-bottom: 1rem;
}

.related-posts {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

p,
article p:not(.epigraph),
.poem p:not(.epigraph) { margin-bottom: 1rem; }
.no-indent-content p { margin-bottom: 0; }

.bullets { 
  margin: 0 0 1rem; 
  padding-left: 2.5rem; 
}

.epigraph {
  font-size: 1rem;
  font-family: 'Georgia', serif;
  margin: 1rem auto 1rem;
  max-width: 600px;
  text-align: center;
}
.epigraph cite {
  display: block;
  text-align: right;
  font-style: normal;
  margin-right: 2rem;
}

.container-form-index {
  /* Flex-based, right-aligned container sized to its content */
  display: block;
  border: 2px solid var(--color-accent-pink);      /* subtle border */
  padding: 0.75rem;               /* breathing room inside the border */
  border-radius: 6px;             /* small rounding */

  text-align: center;
  width: 400px; /* prevent the card from shrinking-to-fit when floated */
  margin: 2rem 2rem;
}

.right-float {
  float: right;
}

.middle-float {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* Larger input and button inside the subscribe card */






.inline-block {
  display: inline-block;
}

.subhead {
  margin-bottom: 1rem;
}



img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.time { display: block; font-family: "Adobe Garamond Pro", "Adobe Garamond", Garamond, "Times New Roman", serif; font-size: 0.875rem; font-style: italic; font-weight: 300; color: var(--color-muted); margin-bottom: 16px; }

.rule{
  border: 0;
  height: 2px;
  background-color: var(--color-accent-pink);
  margin: 1rem 0 1rem;
  box-shadow: 0 0 0 100vmax var(--color-accent-pink);
  clip-path: inset(0 -100vmax);
  opacity: 0.4;
}

sup { font-size: 0.75em; vertical-align: super; line-height: 0; color: var(--color-text); }

/* Inline code inside paragraphs */
p code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;              /* slightly smaller than body text */
  background: var(--color-code-bg);   
  border: 1px solid var(--color-code-border);
  padding: 0.08em 0.35em; 
  border-radius: 4px;
  white-space: nowrap;
  line-height: normal;
  vertical-align: 0.15em; /* align with surrounding text */
}


.resume-embed {
  width: 100%;
  height: 100vh;
  border: 0;
}

/* Notes */
.notes { max-width: 500px; margin: 2rem 0 2rem 0; margin-left: 0rem; font-size: 0.9375rem; line-height: 1.25; font-family: "Times New Roman", Times, serif; font-weight: 400; color: var(--color-text) }

.notes-list { list-style: none; counter-reset: n; margin: 0; font-size: 0.9375rem; }

.notes-list > li { position: relative; counter-increment: n; padding-left: 4ch; }

.notes-list > li::before { content: "[" counter(n) "]"; position: absolute; left: 0; width: 3.25ch; text-align: right; font-size: 0.9375rem; }



.notes h2 { margin-bottom: 1rem; margin-left: -0.75rem; padding-left: .75rem; }
.notes-list { margin-left: -1.25rem}

.note-quote { border-left: 4px solid var(--color-accent-pink); padding-left: 0.5rem;}

.note-quote p{ margin: 0; font-style: normal; font-size: 0.9375rem; line-height: 1.25; }


.note-citation { margin-top: 0.09rem; margin-bottom: 1rem; color: var(--color-text); font-size: 0.9375rem; font-weight: 400; }
.note-citation cite { font-style: normal; }
.note-citation .cname { font-weight: 400; font-style: normal; }

.notes a:not(.note-backlink) { text-decoration: underline; text-underline-offset: 2px; text-decoration-skip-ink: none; text-decoration-color: var(--color-accent-pink); }

.note-backlink { margin-left: 0.5rem; text-decoration: none; opacity: 0.7; }

.note-backlink:hover, .note-backlink:focus-visible { text-decoration: none; }

.cdescription { font-weight: 400; font-style: normal; }




.romanscope {
  /* Restart numbering at I inside each scope */
  counter-reset: roman;
}



.romanscope ol,
.romanscope ul {
  margin: 0;
  padding-left: 0;
}

.romanscope li.romannumerals {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(2.75ch, max-content) 1fr;
  column-gap: 0.75rem;
  align-items: start;
  counter-increment: roman;
  font-size: 1.25rem;
  font-weight: 700;
}

.romanscope li.romannumerals::before {
  content: counter(roman, upper-roman) ".";
  text-align: right;
  font-variant-numeric: lining-nums;
}

.roman-scope li.romannumerals > *,
.romanscope li.romannumerals > * {
  grid-column: 2;
}





/* Table of Contents */
.toc a, .toc a:visited, .toc a:active { text-decoration: none; }
.toc a:hover, .toc a:focus-visible { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-accent-pink); }
.toc { margin: 0rem 0 1rem 0; }
.toc-list { list-style: decimal; padding-left: 2rem; line-height: 1.25; }
.toc-list > li { margin: 0; font-size: 0.875rem; }




/* Links */
a { text-decoration: underline; text-underline-offset: 2px; text-decoration-skip-ink: none; text-decoration-color: var(--color-accent-pink); text-decoration-thickness: 1px; transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out, text-underline-offset 150ms ease-out; }
a, a:visited, a:active { color: var(--color-text); text-decoration-color: var(--color-accent-pink);}
a:hover, article sup.note-ref a:hover, .poem sup.note-ref a:hover { color: var(--color-accent-green); text-underline-offset: 3px; text-decoration-thickness: 2px; }
article sup.note-ref a,
.poem sup.note-ref a,
article sup.note-ref a:visited,
.poem sup.note-ref a:visited,
article sup.note-ref a:active,
.poem sup.note-ref a:active,
article sup.note-ref a:focus-visible,
.poem sup.note-ref a:focus-visible { text-decoration: none; color: var(--color-text) }




/* Content margins */
article, .poem, h1, .poem-container, time { margin-left: 0; margin-right: auto; }








/* Nav */
.topnav { display: flex; align-items: center; flex-wrap: wrap; }
.topnav nav { margin-left: auto; }
.topnav .brand { margin: 0; padding: 0; margin-right: auto; }
/* Remove inline leading that can look like extra margin under brand */
.topnav .brand a { display: inline-block; line-height: 1; }
.brand { font-family: 'Playfair Display', serif; }
.menu { font-family: "Montserrat", serif;}
.topnav .brand a { text-decoration: none; color: var(--color-text); font-weight: 400; font-size: 1.5rem; white-space: nowrap; }
.topnav .menu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 16px; row-gap: 0px;}
.topnav .menu a { text-decoration: none; color: var(--color-text); font-size: 1rem; padding: 7px 7px; position: relative; }
.menu li a::before { content: ">"; color: var(--color-accent-green); margin-right: 0; font-weight: 800; }
.topnav .menu a:active, .topnav .menu a:visited { color: var(--color-text); }
/* Hover: green text + pink bar (second row) that expands smoothly */






:root { --indent: 3rem; }          /* ≈0.5 in at default 16px, scales with root font size */

.i1 { margin-left: var(--indent); }
.i2 { margin-left: calc(var(--indent) * 2); }
.i3 { margin-left: calc(var(--indent) * 3); }
.i4 { margin-left: calc(var(--indent) * 4); }
.i5 { margin-left: calc(var(--indent) * 5); }

.stanza { margin: 1.125rem 0; }
.line { display: block; }

.preserve { white-space: pre-wrap; }




@media (max-width: 900px) {
  body { padding: 0.5rem 1rem 1rem 1rem; }
  .notes { margin: 1rem 0 1rem 0rem; max-width: 800px;}

}



@media (max-width: 700px) {
  .container-form-index {
    float: none;              
    max-width: 350px;        
    text-align: center;
    margin: 2rem auto;
  }
  .poem {
    font-size: 1rem;
  }
}



@media (max-width: 450px) {
  .topnav .menu a {font-size: 1rem; padding: 5px 5px;}
  .topnav .menu{column-gap: 3px; }
}