:root{
	--space: 1em;            /* desktop base horizontal padding */
	--article-margin: 2em 6em;
	--article-padding: 1em;
	--radius: 2em;
	--background-color: #674105;
	--article-color: #fdeed6;
	--text-color: #362203;
  }

  * { box-sizing: border-box; }

  body {
	font-family: courier, monospace;
	padding: var(--space) var(--space) 0;
	margin: 0;
	background-color: var(--background-color);
  }

  a {
	color: var(--article-color);;
  }

  .web-ring {
	text-align: right;
	color: var(--article-color);
	opacity: 66%;
	margin-top: -1em;
  }

  .title {
  	text-align: right;
  	color: var(--article-color);
  	border-bottom: 2px var(--article-color) solid;
  }

  /* Article styling (desktop) */
  article {
	border: 0px var(--article-color) none;
	margin: var(--article-margin);
	padding: var(--article-padding);
	border-radius: var(--radius);
	background-color: var(--article-color);
	color: var(--text-color);
  }

  article p {
	line-height: 1.4;
	font-size: 1.1em;
  }

  /* Quote */
  blockquote {
	border-left: 3px var(--background-color) solid;
	padding-left: 1em;
  }

  /* Date badge (keeps existing float on desktop) */
  .my-date {
	text-align: right;
	margin-right: 1em;
	font-weight: 800;
	opacity: 45%;
  }

  .end {
	color: var(--article-color);
	text-align: center;
	font-size: 4em;
  }


  /* Single breakpoint: reduce whitespace and undo float on small screens */
  @media (max-width: 600px) {
	:root{
	  --space: 0.5em;           /* much smaller page padding */
	  --article-margin: 0.6em;  /* reduce outer margins */
	  --article-padding: 0.6em; /* reduce inside padding */
	  --radius: 0.5em;          /* smaller radius so corners don't feel huge */
	}

	/* make the date stack above content on small screens */
	.my-date {
	  float: none;
	  display: block;
	  text-align: right;
	  margin: 0 0 0.5em 0;
	}

	/* tighten blockquote spacing slightly */
	blockquote {
	  padding-left: 0.75em;
	}

  }