/* ==========================================================================
   jofowo-github.css
   Shared house style for jofowood's GitHub Pages sites.
   Repo: shared  →  https://jofowood.github.io/shared/jofowo-github.css

   USAGE — every page needs BOTH of these in <head>, in this order:
     <link rel="stylesheet" href="https://use.typekit.net/fpc1twk.css">
     <link rel="stylesheet" href="https://jofowood.github.io/shared/jofowo-github.css">

   The Typekit line is required and can't be replaced by anything in this
   file: Adobe Fonts' license only permits loading the font through their
   own embed link, not by copying the @font-face rules elsewhere. This file
   just references the font by name once that link has loaded it.

   WHAT LIVES HERE vs. WHAT DOESN'T:
   This file covers things that should look the same everywhere -- colors,
   type, buttons, links, the shared header lockup. It deliberately does NOT
   include page-specific layout (a catalog grid, the Tiny Bone Set board,
   etc.) -- that stays local to each page's own <style> block, using the
   variables and classes defined here as its foundation.
   ========================================================================== */

:root{
  /* Type -- Orator (Adobe Fonts), with graceful fallbacks if the Typekit
     embed ever fails to load (subscription lapse, network issue, etc.) */
  --font: "orator-std", "Courier New", monospace;

  /* Color -- plain black-on-white house style */
  --parchment:      #FFFFFF;  /* page background */
  --panel:          #FFFFFF;  /* card/panel background */
  --ink:            #111111;  /* primary text */
  --ink-soft:       #666666;  /* secondary text */
  --accent:         #111111;  /* links, emphasis, active states */
  --accent-dim:     rgba(0,0,0,0.06);
  --border:         #DDDDDD;
  --border-dim:     rgba(0,0,0,0.18);

  --shadow: none;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 36px 24px 80px; }

/* Constrained-width column for body text, mirroring jofowo.com's pattern of
   a narrow reading column with imagery breaking out to full width around
   it. Use for paragraphs/prose; NOT for the wrap itself (which stays wide
   so full-bleed images have somewhere to break out into). */
.content{ max-width: 800px; margin-left: auto; margin-right:auto; width: 100%;}

/* Lets an element inside .wrap escape back out to the full viewport width
   -- for photos/hero images, the way jofowo.com's image blocks run edge to
   edge regardless of how narrow the body text column is.
   Usage: <img class="full-bleed" src="..."> or wrap a block in a div. */
.full-bleed{
  width: 100vw; position: relative; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw; display:block;
}
.full-bleed img{ width:100%; display:block; }

/* ---------- Shared header ----------
   Logo top-left (not centered), optional nav to the right. Markup pattern:

   <header class="site-header">
     <a class="site-logo-link" href="/">John Woodruff</a>
     <nav class="site-nav">
       <a href="...">Series</a>
       <a href="...">About</a>
       <a href="...">Contact</a>
     </nav>
   </header>

   The nav is optional -- a standalone tool page (like the Tiny Bone Set
   builder) may just omit it and keep the logo alone. Page title itself
   isn't part of this block; each page handles its own title/h1 in its
   own content area below the header, since that varies page to page.
   ------------------------------------------------------------------- */
header.site-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
  padding-bottom: 22px;
  margin-bottom: 30px;
}
.site-logo-link{
  font-size:30px; font-weight:400; letter-spacing:-0.01em;
  color:var(--ink); text-decoration:none;
}
.site-logo-link:hover{ opacity:0.75; }
.site-nav{ display:flex; gap:20px; align-items:center; }
.site-nav a{
  font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink);
}
.site-nav a:hover{ opacity:0.65; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Shared footer ----------
   Matches jofowo.com: a "back to top" link, then centered copyright with
   the mailing list link folded in. Markup pattern:

   <footer class="site-footer">
     <a class="back-to-top" href="#">↑ Back to Top</a>
     <p class="copyright-line">
       Copyright © 2020–<span id="copyright-year"></span> John Woodruff
       | <a href="MAILING_LIST_URL">Mailing List</a>
     </p>
   </footer>

   Same one line of JS as before fills in the year:
     document.getElementById('copyright-year').textContent = new Date().getFullYear();
   ------------------------------------------------------------------- */
footer.site-footer{
  text-align:center; margin-top:60px; padding-top:22px;
}
.back-to-top{
  display:block; font-size:18px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); margin-bottom:14px;
  padding-top:60px; padding-bottom:60px;
}
.back-to-top:hover{ opacity:0.7; }
footer.site-footer .copyright-line{
  font-size:11px; color:var(--ink-soft); margin:0;
}
footer.site-footer .copyright-line a{ color:var(--ink-soft); text-decoration:underline; }

/* ---------- Typography ---------- */
.eyebrow{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px;
}
h1{
  font-weight:600; font-size:60px; line-height:70px; line-height:70px;
  margin:0; letter-spacing:-0.01em; padding-top:90px; padding-bottom:60px;
}
h1 em{ font-style:italic; font-weight:400; color:var(--accent); }
h2{ font-weight:600; font-size:26px; line-height:1.15; margin:0; }
p{ font-size:20px; line-height:28px; }
.note{ font-size:14.5px; color:var(--ink-soft); line-height:1.55; margin:14px 0 0; }

a{ color:var(--ink-soft); }
a:hover{ opacity:0.75; }

p .text-align-center {text-align:center;}

/* ---------- Buttons & button-styled links ---------- */
button, a.btn{
  font-family: var(--font);
  font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 14px; border:1px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; border-radius:5px; transition:background .15s, color .15s;
  display:inline-block; text-decoration:none; text-align:center;
  box-sizing:border-box;
}
button.primary, a.btn.primary{ background:var(--accent); border-color:var(--accent); color:#FFFFFF; }
button.primary:disabled{ background:transparent; color:var(--ink-soft); border-color:var(--border); cursor:not-allowed; }
a.btn.disabled{ background:transparent; color:var(--ink-soft); border-color:var(--border); cursor:not-allowed; pointer-events:none; }
button:not(:disabled):hover, a.btn.primary:hover{ opacity:0.85; }
button.ghost{ border-color:var(--border); color:var(--ink-soft); }
button.small{ font-size:10px; padding:6px 10px; letter-spacing:.04em; }
button.small:disabled{ opacity:0.4; }

/* ---------- Panels / cards ---------- */
.panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: var(--shadow);
}
.panel h2{
  font-size:26px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-soft); margin:0; padding:14px 16px 12px;
  border-bottom:1px solid var(--border); background-color: var(--border);
}
.footnote{
  font-size:14.5px; color:var(--ink-soft); line-height:1.5;
  border-top:1px solid var(--border); border-radius:5px; padding:12px 16px 16px;
}

/* ---------- Forms ---------- */
input, textarea, select{
  width:100%; padding:9px 10px; border:1px solid var(--border);
  background:#FFFFFF; font-family: var(--font); font-size:18px; color:var(--ink);
}
label{
  display:block; font-size:14.5px; text-transform:uppercase; font-style: italics;
  letter-spacing:.08em; color:var(--ink-soft); margin-bottom:5px;
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border); }
