/* ravdonikas.com — shared stylesheet
   Linked from every page as /css/style.css (root-relative, so it resolves the
   same from /index.html and from /poems/anything.html). */

/* ---- Type. One size, one leading, everywhere. ---- */

/* iOS Safari runs a "text autosizer" that inflates the type inside blocks it judges
   too narrow for the viewport. It recalculates on rotation, and because each line of
   verse is its own short <p>, it treats the poem as a separate block from the prose
   around it and boosts only that — bigger than the body text, and too big to fit.
   100% (not `none`) switches the inflation off while leaving pinch-zoom working. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: white; /* White background color */
	font-family: courier, monospace;
	font-size: 1rem;
	line-height: 1.6;   /* inherited by every section, including the poems */
	margin: auto;
	/* 1ch is one character's advance in whatever monospace font the device
	   actually has — Courier on Apple, Roboto/Droid Sans Mono on Android,
	   DejaVu Sans Mono on Linux — so this measures the real font rather than
	   assuming Courier's metrics. ≈626px on iOS; adjusts itself elsewhere.
	   Note: the longest line on the site (Updraft's last) is 63 characters,
	   so it clears this column by about a pixel. Raise the 61 if it ever wraps. */
	max-width: calc(61ch + 40px);
}

a {
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
}

a:link {
	color: #05a8f8;
}

a:visited {
	color: #154c79;
}

h1, h2 {
	font-family: "courier new", courier, monospace;
	line-height: 1.2;   /* headings only — body leading is too loose for them */
}

em {
	font-weight: bolder;
	font-style: normal;
}

* {
  box-sizing: border-box;
}

/* ---- Layout ---- */

.header {
	padding: 0px 10px;
}

/* Author line under a page title. The negative top margin eats into the h1's
   bottom margin so the two read as one unit; it is scoped to .byline so pages
   without one keep the browser's default heading spacing. */
.byline {
	font-size: 80%;
	margin: -0.9rem 0 0;
}

/* Rows never switch to flex-direction: column. They stack by wrapping, which keeps
   flex-basis on the horizontal axis where these values are meant to apply. */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;   /* text sits at the top of the row, not centred against a tall photo */
}

/* Text column. Alone in a row it takes the full width; beside an image it takes what's left. */
.main {
  flex: 1 1 300px;
  min-width: 0;   /* lets long hyphenated strings shrink instead of overflowing the row */
  padding: 0px 10px;
}

/* Image column. Same basis and grow factor as .main, so the two share the row
   evenly — half each, whatever the page is. The 10px here plus the 10px on
   .main is the whole gap — 20px. 300 + 300 = 600 is where the row wraps;
   the media query below matches. */
.side {
  flex: 1 1 300px;
  padding: 20px 10px 0px;
}

/* Image on the left, text on the right — only while the row is still two columns. */
.row-flip .side {
  order: -1;
}

/* Every image renders in the same box, whatever its own proportions are.
   aspect-ratio fixes the shape; object-fit: cover fills it, cropping the
   overflowing edges. Switch cover to contain to letterbox instead of crop.
   No pixel cap while the row is two columns: the image fills its half.
   The media query below caps it once it has a full-width line to itself. */
.image {
	display: block;   /* an inline img leaves a baseline gap under the box */
	width: 100%;
	max-width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Substack's embed. Its form stacks the field above the button on narrow
   screens, so a fixed 150px clips the button — see the media query below. */
.subscribe {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;   /* centres the box in the column once it stops filling it */
	height: 150px;
	border: 1px solid #EEE;
	background: white;
}

/* ---- Poems ---- */

/* No font-size here: poems sit at the body's 1rem like every other block.
   When the column is too narrow for a full line, the line wraps and the turnover
   hangs, so a wrap can't be mistaken for one of the poem's own breaks.
   One <p> per line of verse; <p class="stanza"></p> for a blank line between stanzas. */

.poem {
	margin: 0 0 1.2em;
}

.poem p {
	margin: 0;
	padding-left: 2.5em;
	text-indent: -2.5em;
}

.poem .stanza {
	height: 1em;
}


.footer {
	font-size: 80%;
	padding: 40px 20px;
	text-align: center;    /* centres the text itself, at any width */
	white-space: nowrap;   /* a year range must never break at its hyphen */
}

/* ---- Single-poem pages ---- */

/* Put class="poem-page" on <body>. width: fit-content shrinks the page to the
   poem it actually holds, so the illustration sits right after the longest
   line instead of after a column sized for the site's longest possible line.
   The max-width is the ceiling: a 63-character poem (the main page's measure)
   plus the 300px illustration column. */
body.poem-page {
	width: fit-content;
	max-width: calc(61ch + 40px + 300px);
}

/* The verse column is as wide as the poem's longest line, no wider.
   min-width: fit-content stops it shrinking to make room for the picture —
   when they no longer both fit, the row wraps and the picture drops below
   instead of squeezing the lines. On a phone fit-content resolves to the
   available width, so the column collapses normally rather than overflowing. */
.poem-page .main {
	flex: 0 1 auto;
	min-width: fit-content;
}

/* 300px illustration plus 2x10px padding, and it never shrinks — that is what
   makes the row wrap rather than squeeze. Overrides the site-wide media query,
   so the illustration is the same size at every screen width. */
.poem-page .side {
	flex: 0 0 300px;
	max-width: 100%;
}

/* Poem illustrations are 300px wide. Nothing else is fixed: the height comes
   from the image's own proportions, so any shape works and nothing is cropped.
   Upload at 600px wide or more for sharp rendering.
   Give each <img> its real pixel width and height as attributes — the browser
   uses them to reserve the right height before the file loads, so the page
   doesn't jump. Without them everything still works, it just reflows. */
.illustration {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
}

/* Below 600px the rows have wrapped into one column, in document order. */
@media screen and (max-width: 600px) {
  .row-flip .side {
    order: 0;   /* cancel the flip; text still comes first when stacked */
  }
  .side {
    flex: 1 1 100%;   /* the image now owns its line, so let it grow into it */
  }
  .image {
    max-width: 420px;   /* a 3:4 photo 420px wide is already 560px tall */
  }
  .subscribe {
    height: 190px;   /* room for the stacked field + button */
  }
}