/* ==========================================================================
   andrewkmorro.com — shared site stylesheet
   Rebuilt from the original Squarespace global custom CSS.
   No header, no footer, no site chrome — every page is just its content.
   ========================================================================== */

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden; /* guard against any float-item nudging past the edge on narrow screens */
}

body {
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 12pt;
  background-color: #B8C1D9;
  color: #000;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  margin: 0;
}

.bold-text {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

.italic-text {
  font-family: "Courier New", Courier, monospace;
  font-style: italic;
}

.bold-italic-text {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-style: italic;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------------
   Hover-to-reveal-text mechanic
   Usage:
   <div class="hover-container">
     <span>default label</span>
     <div class="text-on-hover">revealed label</div>
   </div>
   ------------------------------------------------------------------------ */
.hover-container {
  position: relative;
  width: 200px;
  height: 50px;
  border: 0px solid #000;
  text-align: center;
  line-height: 50px;
}

.text-on-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(184, 193, 217, 1);
  color: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hover-container:hover .text-on-hover {
  opacity: 1;
}

/* ------------------------------------------------------------------------
   Free-positioned canvas layout
   Mirrors Squarespace's Fluid Engine: one full-page container, each element
   placed independently via --top / --left custom properties (percentages).
   Move anything by changing its two numbers on the element itself — e.g.
   <p class="float-item" style="--top: 20%; --left: 46%;">text</p>
   ------------------------------------------------------------------------ */
.canvas {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* Text scales with the viewport instead of staying a fixed size, so the
     whole scattered layout shrinks/grows together on phones, tablets, and
     desktops rather than overflowing or going tiny. Caps at the 12pt
     desktop size. */
  font-size: clamp(0.65rem, 0.45rem + 1.6vw, 12pt);
}

.float-item {
  position: absolute;
  top: var(--top);
  left: var(--left);
  transform: translate(-50%, -50%);
  white-space: nowrap;
  margin: 0;
  max-width: 92vw; /* long lines still won't force horizontal scroll on tiny screens */
}

/* For left-aligned blocks (headings, paragraphs, forms) where --left should
   be the block's left edge rather than its center. */
.float-item.anchor-left {
  transform: translateY(-50%);
  white-space: normal;
  text-align: left;
}

.scatter-photo {
  width: clamp(90px, 14vw, 220px);
  height: auto;
  display: block;
}

/* ------------------------------------------------------------------------
   Hover-swap: base text shown by default, alt text fades in centered over
   it on hover. Used for landing's word-swaps and home's "open X" links.
   <span class="reveal">
     <span class="base">label</span>
     <span class="alt">revealed label or link</span>
   </span>
   ------------------------------------------------------------------------ */
.reveal {
  position: relative;
  display: inline-block;
}

.reveal .base,
.reveal .alt {
  transition: opacity 0.15s ease;
}

.reveal .alt {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  white-space: nowrap;
}

.reveal:hover .base {
  opacity: 0;
}

.reveal:hover .alt {
  opacity: 1;
}

.reveal .alt a {
  color: #000;
}

/* ------------------------------------------------------------------------
   Long-form text (essays, blog posts, anything read paragraph by paragraph).
   Wider column + looser line-height than the default so dense writing
   stays readable — use on any page with real paragraphs of text.
   <div class="prose"><p>...</p><p>...</p></div>
   ------------------------------------------------------------------------ */
.prose {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

.prose p {
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------------
   Blog sections (sketchbook, woodworking, content-blog, ltb01, ...)
   Every blog section is a folder: <section>/index.html lists posts newest
   first, <section>/<slug>.html is one post using .prose. Reused across
   every blog-like section instead of rebuilding this per section.
   Post nav is chronological: "previous" = earlier post, "next" = later post
   (not Squarespace's list-position order, which ran the other way).
   ------------------------------------------------------------------------ */
.blog-list {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}

.blog-list li {
  margin: 0 0 1.2rem;
}

.blog-date {
  display: inline-block;
  min-width: 5.5em;
  opacity: 0.7;
}

.blog-post img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 1.5rem;
}

.blog-post video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
}

/* Photo grid: sits below a post's text, four across, wrapping down on
   narrow screens instead of stacking one-per-row. */
.blog-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.blog-photos img {
  margin: 0;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .blog-photos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.blog-post-nav {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 1rem 0 0;
  border-top: 1px solid #000;
}

.blog-post-nav .disabled {
  opacity: 0.4;
}

/* ------------------------------------------------------------------------
   Home / hierarchy navigation
   Every non-landing/non-home page gets a "home" link back to the site
   root. Pages nested under a hierarchy page (bits, sketchbook,
   woodworking, ...) additionally get a link back to that immediate
   parent, stacked just below "home".
   <div class="home-nav">
     <a class="bold-text" href="...">home</a>
     <a href="...">bits</a>
   </div>
   ------------------------------------------------------------------------ */
.home-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin: 1.5rem;
}

.home-nav a {
  text-decoration: underline;
}

.home-nav a:hover {
  text-decoration: none;
}