:root{
  --ink:#e0511d;
  --bg:#ffffff;
  --gutter: 3rem;                 /* gap between prose and margin */
  --aside: min(40ch, 38%);        /* width of the margin column */
  --prose: 65ch;                  /* max width of main text column */
}

html, body { color:var(--ink); background:var(--bg); }

/* html, body { overflow-x: hidden; } */

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
}

.page-wrapper {
    margin: 2em;
    padding-inline: 1em;
    container-type: inline-size;
 }

/* asides */

/* Each pair */
.row{
  position: relative;
  padding-right: calc(var(--aside) + var(--gutter)); /* reserve the margin */
  max-width: 100%;
  margin: 0 auto 2rem 0;
}

/* Prose stays in normal flow so later prose can climb */
.prose{
  width: var(--prose);
}

/* Aside sits in the right margin and doesn't affect flow */
.note{
  position: absolute;
  top: 0;                         /* start aligned with this row’s top */
  left: calc(var(--gutter) + var(--prose));
  max-width: var(--aside);
}
.note img{ width:100%; height:auto; display:block; }
.note figcaption{ font-size:.8rem; line-height:1.35; margin-top:.35rem; font-style: italic; }

/* for nudging images in asides */
.row[data-offset="5"]  .note{ top: 5rem; }
.row[data-offset="10"] .note{ top: 10rem; }
.row[data-offset="15"] .note{ top: 15rem; }
.row[data-offset="20"] .note{ top: 20rem; }
.row[data-offset="25"] .note{ top: 25rem; }

/* Mobile: stack; no duplication or JS needed */
@media (max-width: 820px){
  .row{ padding-right: 0; }
  .note{ position: static; width: auto; margin-top: .5rem; max-width: 100%;}
  .prose{ max-width: 100%; width: 100%;}
  .page-wrapper { margin: 2em 1em;}
}

 /* footer box */
 
footer {
  margin-top: 5em;
}

.stamp-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2em;
}

.stamp {
  width: 3em;
  height: auto;
  margin-left: -0.25em;
}

/* header box */

header {
  display: flex;
  justify-content: space-between; /* pushes them apart */
  align-items: center;            /* vertically aligns them */
  vertical-align: top;
  margin-top: 0.25em;
  margin-bottom: 2em;
  width: 100%;
}

header h1 {
  width: 70%;
}

.home-link a {
  width: 30%;
  text-decoration: none;
}



/* old */

.roundbox {
  border: 1px solid currentColor;
  border-left: none;
  border-radius: 5px;
  margin: 2em 0em 2em -5em;
  padding: 2em var(--gutter) 2em 5em;
}

.roundbox p {
  margin-top: 0;
  margin-bottom: 0;
  font-style: italic;
}

.roundbox p + p {
  margin-top: 1em; /* keeps normal spacing between paragraphs */
}

figure {
  max-width: 100%;
  margin: 0;
}

figure img {
  display: block;
  /* margin-inline: auto; */
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

figcaption {
  max-width: 40ch;
  margin: 0.6em auto 0.6em 0;
  font-size: 0.9em;
  color: var(--ink);
  line-height: 1.3;
}

h1 {
    font-size: 1.15em;
    font-weight: normal;
    margin-bottom: 5em;
}

h2 {
  display: inline-block;
    font-size: 1em;
    /* margin-top: 2em; */
    padding-bottom: 0.25em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid currentColor;
    /* max-width: 60%; */
    text-transform: uppercase;
    font-weight: normal;
}

h3 {
    display: inline;
    font-size: 1em;
    margin-right: 0.3em;
}

/* paragraph after header */
h2 + p {
    margin-top: 0.5em;
    /* padding-top: 0; */
}

a {
    color: var(--ink);
    text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--ink);
  margin: 1em 0;
}

table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
  background-color: white;
}

th, td {
  border: 1px solid #E8E8E4;
  padding: 0.5em;
  text-align: left;
}

code.purple {
  font-family: monospace;
  background-color: #cfd3ff;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}


.baskervville-400 {
  font-family: "Baskervville", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.inter-400 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}