/* paraxa.site
   The plate is not shown. Its LINEWORK is - plate.svg, the ink contours of the
   lithograph traced to centerline vector paths (trace.py), run up the side of
   the page as open outline that bleeds off the edges. Paths are tagged by the
   colour they were drawn over (bloom / leaf / stem / figure), and the svg is
   inlined at load so the season can restyle them. Season comes from the month;
   ?season=winter overrides. */
:root{
  --paper:#f4efe3;
  --ink:#332c22;
  --ink-2:#75674f;
  --ink-3:#a2937a;
  --rule:#cdbfa2;
  --bloom:#b4306a;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 "EB Garamond",Garamond,Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  background-image:
    radial-gradient(80% 60% at 18% 6%, rgba(255,252,244,.7), transparent 62%),
    radial-gradient(70% 60% at 92% 98%, rgba(196,176,138,.18), transparent 64%);
}

/* --- the ornament -------------------------------------------------------- */
.botanical{
  position:fixed;top:50%;right:-7vw;
  /* height-driven so it bleeds top and bottom, but capped by width so it never
     reaches the wordmark on square or portrait viewports */
  width:min(52vw, calc(142vh * 2088 / 3564));aspect-ratio:2088/3564;
  transform:translateY(-50%);
  pointer-events:none;user-select:none;z-index:0;
  opacity:0;transition:opacity 2.2s ease .25s;
  will-change:opacity;
}
.botanical.in{opacity:.78}
.botanical svg{
  width:100%;height:auto;display:block;
  stroke:var(--ink);
  /* feather all three exposed edges - a single-axis mask leaves a visible
     vertical seam where the scan's left edge cuts into the page */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 34%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 34%);
  mask-composite:intersect;
}
.botanical path{transition:stroke 1.6s ease,opacity 1.6s ease}
.botanical .bloom{stroke:var(--ink-bloom,var(--ink));opacity:var(--o-bloom,1)}
.botanical .leaf{stroke:var(--ink-leaf,var(--ink));opacity:var(--o-leaf,1)}
.botanical .stem{stroke:var(--ink-stem,var(--ink))}

/* --- seasons ------------------------------------------------------------- */
/* buds: pale pink, two flowers opened ahead of the rest */
body[data-season=spring]{--paper:#f5f1e6;--ink-bloom:#dc8f9c;--o-bloom:.85;--ink-leaf:#4d6a40}
body[data-season=spring] .botanical .b2,body[data-season=spring] .botanical .b5{stroke:#c25868}


body[data-season=summer]{--paper:#f6efdd;--ink-bloom:#b4306a;--ink-leaf:#3e5a36;--ink-stem:#5c4a2a}
body[data-season=summer] .botanical .b1,body[data-season=summer] .botanical .b4,body[data-season=summer] .botanical .b7{stroke:#8a1f4e}
body[data-season=summer] .botanical.in{opacity:.85}

/* linework stays ink; each flower turns on its own - rust, ochre, brown, wine */
body[data-season=autumn]{--paper:#f2e8d4}
body[data-season=autumn] .botanical .b0,body[data-season=autumn] .botanical .b5{stroke:#a8402a}
body[data-season=autumn] .botanical .b1,body[data-season=autumn] .botanical .b6{stroke:#c58a1e}
body[data-season=autumn] .botanical .b2,body[data-season=autumn] .botanical .b7{stroke:#7a4a22}
body[data-season=autumn] .botanical .b3,body[data-season=autumn] .botanical .b8{stroke:#8c2f3a}
body[data-season=autumn] .botanical .b4{stroke:#b8651c}

/* dried heads: the whole flower (petals + everything traced inside its footprint)
   ghosts together in frost grey. set --o-bloom:0 and .fl opacity:0 for bare. */
body[data-season=winter]{--paper:#eeeeea;--ink:#4a5060;--ink-2:#6d7484;--ink-3:#9aa0ad;--rule:#c9cdd3;--ink-leaf:#5a6270;--o-leaf:.55;--ink-bloom:#8c98b0;--o-bloom:.5}
body[data-season=winter] .botanical .fl{stroke:#8c98b0;opacity:.5}
body[data-season=winter] .botanical.in{opacity:.6}

/* a second, fainter copy on the far left so the page is framed, not lopsided */
.botanical.left{right:auto;left:-13vw;width:min(40vw, calc(104vh * 2088 / 3564));transform:translateY(-50%) scaleX(-1)}
.botanical.left.in{opacity:0}

/* --- weather ------------------------------------------------------------- */
/* st. louis, live from open-meteo. only two events are drawn: rain and snow.
   ?weather=rain|snow|none overrides, same as ?season=. */
#wx{
  position:fixed;inset:0;z-index:2;
  pointer-events:none;
  opacity:0;transition:opacity 1.8s ease;
}
#wx.in{opacity:1}
@media (prefers-reduced-motion:reduce){
  #wx{display:none}
}

/* --- content ------------------------------------------------------------- */
.sheet{
  position:relative;z-index:1;height:100%;
  max-width:540px;margin:0 auto;padding:0 30px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
}
.bar{height:1px;background:var(--rule);opacity:.8;width:100%}
.bar.hair{opacity:.4}
.name{
  margin:0;padding:18px 0 17px;
  font-weight:400;font-size:clamp(34px,6.4vw,56px);
  letter-spacing:.32em;text-indent:.32em;text-transform:lowercase;
}
.links{
  padding:30px 0 0;font-size:14.5px;letter-spacing:.14em;text-transform:lowercase;
}
.links a{
  color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.links a:hover,.links a:focus-visible{color:var(--bloom);border-bottom-color:var(--bloom)}
.links .sep{margin:0 14px;color:var(--rule)}
a:focus-visible{outline:none}

.credit{
  position:fixed;left:0;right:0;bottom:16px;z-index:1;
  text-align:center;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);opacity:.7;
}

@media (max-width:700px){
  .botanical{right:-42vw;width:min(96vw, calc(116vh * 2088 / 3564))}
  .botanical.in{opacity:.42}
  .botanical.left{display:none}
  .name{letter-spacing:.22em;text-indent:.22em}
}
@media (prefers-reduced-motion:reduce){
  .botanical{transition:none}
}

/* --- pages beyond the homepage -------------------------------------------
   the homepage is a single locked screen; every other page scrolls. .page
   turns the fixed viewport off and swaps the centred sheet for a column. */
body.page{overflow:auto;height:auto;min-height:100%}
body.page .botanical.in{opacity:.3}
body.page .botanical{right:-16vw}

.doc{
  position:relative;z-index:1;
  max-width:660px;margin:0 auto;padding:52px 30px 96px;
}

/* --- masthead ------------------------------------------------------------ */
.mast{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--rule);
}
.mast a{color:inherit;text-decoration:none}
.mast .home{
  font-size:19px;letter-spacing:.28em;text-indent:.28em;text-transform:lowercase;
}
.nav{font-size:13px;letter-spacing:.16em;text-transform:lowercase}
.nav a{
  color:var(--ink-3);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.nav a:hover{color:var(--bloom);border-bottom-color:var(--bloom)}
.nav a[aria-current=page]{color:var(--ink-2);border-bottom-color:var(--rule)}
.nav .sep{margin:0 9px;color:var(--rule)}

/* homepage keeps its own centred nav, sitting above the external links */
.links.inner{padding:26px 0 0;font-size:16px;letter-spacing:.13em}
.links.inner a{color:var(--ink)}

/* --- section + post ------------------------------------------------------ */
.lede{
  margin:34px 0 30px;font-style:italic;font-size:16.5px;
  color:var(--ink-2);
}
.index{list-style:none;margin:0;padding:0}
.index li{border-bottom:1px solid var(--rule);border-color:color-mix(in srgb,var(--rule) 55%,transparent)}
.index a{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 2px;color:var(--ink);text-decoration:none;
  transition:color .25s;
}
.index a:hover{color:var(--bloom)}
.index .when{
  flex:0 0 88px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);
}
.index .what{flex:1 1 auto;font-size:18px}
.index .kind{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.empty{color:var(--ink-3);font-style:italic;padding:24px 0}

.post h1{
  margin:32px 0 6px;font-weight:400;font-size:clamp(26px,4.4vw,34px);
  letter-spacing:.01em;line-height:1.25;
}
.post .when{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}
.post .body{margin-top:26px;font-size:17.5px}
.post .body p{margin:0 0 1.15em}
.post .body h2{font-weight:400;font-size:22px;margin:1.7em 0 .5em}
.post .body h3{font-weight:500;font-size:18px;margin:1.5em 0 .4em}
.post .body a{color:var(--bloom);text-decoration:none;border-bottom:1px solid var(--rule)}
.post .body blockquote{
  margin:1.4em 0;padding-left:18px;border-left:1px solid var(--rule);
  color:var(--ink-2);font-style:italic;
}
.post .body img{display:block;max-width:100%;height:auto;margin:1.8em auto;border-radius:1px}
.post .body hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}
.post .body code{
  font:400 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:color-mix(in srgb,var(--rule) 26%,transparent);padding:1px 5px;border-radius:2px;
}
.post .body pre{
  overflow-x:auto;padding:14px 16px;border:1px solid var(--rule);border-radius:2px;
  background:color-mix(in srgb,var(--rule) 14%,transparent);
}
.post .body pre code{background:none;padding:0}
.back{
  display:inline-block;margin-top:52px;font-size:11px;letter-spacing:.18em;
  text-transform:lowercase;color:var(--ink-3);text-decoration:none;
}
.back:hover{color:var(--bloom)}

/* --- gallery ------------------------------------------------------------- */
.grid{
  margin:34px 0 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;
}
.grid button{
  width:100%;padding:0;border:0;background:none;cursor:zoom-in;display:block;line-height:0;
}
.grid img{
  /* height:auto is load-bearing - the width/height attributes are there for CLS,
     and as presentational hints they beat aspect-ratio unless height is auto */
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:1px;opacity:.92;transition:opacity .3s;
}
.grid button:hover img{opacity:1}

#lb{
  position:fixed;inset:0;z-index:20;display:none;
  align-items:center;justify-content:center;padding:4vmin;
  background:color-mix(in srgb,var(--paper) 92%,#000);
  cursor:zoom-out;
}
#lb.on{display:flex}
#lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:1px}
#lb .cap{
  position:absolute;left:0;right:0;bottom:16px;text-align:center;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
}

@media (max-width:700px){
  .doc{padding:34px 22px 72px}
  body.page .botanical.in{opacity:.18}
  .mast{gap:10px}
  .index a{gap:12px}
  .index .when{flex-basis:74px}
}

/* --- prose bits the first pass left unstyled ------------------------------ */
.post .body h4{font-weight:500;font-size:16px;letter-spacing:.04em;margin:1.4em 0 .3em}
.post .body ul,.post .body ol{margin:0 0 1.15em;padding-left:1.35em}
.post .body li{margin:.28em 0}
.post .body li>p{margin:0 0 .5em}
.post .body ul ul,.post .body ol ol,.post .body ul ol,.post .body ol ul{margin:.3em 0 .1em}
.post .body ul{list-style:square}
.post .body ul ul{list-style:disc}

/* a table on a 660px column will overflow on a phone before it wraps, so the
   table scrolls inside the column rather than the page scrolling sideways */
.post .body table{
  display:block;overflow-x:auto;max-width:100%;
  border-collapse:collapse;margin:1.6em 0;font-size:16px;
}
.post .body th,.post .body td{
  padding:7px 14px 7px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);
}
.post .body th{
  font-weight:400;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-color:var(--rule);white-space:nowrap;
}

.post .body dl{margin:1.2em 0}
.post .body dt{font-weight:500;margin-top:.8em}
.post .body dd{margin:.2em 0 0 1.35em;color:var(--ink-2)}

.post .body sup a{border-bottom:0;font-size:.78em}
.post .body .footnote{
  margin-top:2.6em;padding-top:14px;border-top:1px solid var(--rule);
  font-size:15px;color:var(--ink-2);
}
.post .body .footnote hr{display:none}
.post .body .footnote ol{padding-left:1.2em}