/* ================================================================
   STYLE.CSS
   Shared stylesheet for every page on the site (index.html,
   poetry.html, photography.html, articles.html, news.html).

   Because every page links to this ONE file, changing a color,
   font, or spacing value here updates the entire site at once.
   You do not need to edit the individual HTML files to restyle.

   Jump to a section by searching for its ALL-CAPS heading below:
   1. COLOR PALETTE      - all colors, in one place
   2. RESET & BASE        - browser defaults, page-wide type rules
   3. SITE NAV             - the small top bar used on section pages
   4. LETTERHEAD           - the big header on the home page only
   5. INDEX / TABLE OF CONTENTS - the linked list on the home page
   6. PAGE HEADER          - the eyebrow + <h1> on each section page
   7. CONTENT HELPERS      - placeholder note, photo frame, entry list
   8. FOOTER               - the sign-off at the bottom of every page
   9. CONCEPT MAP WIDGET   - the interactive 3D corner widget
   10. RESPONSIVE           - small-screen adjustments
   ================================================================ */


/* ----------------------------------------------------------------
   1. COLOR PALETTE (CSS variables)
   Every color on the site is defined once here as a CSS variable,
   then reused everywhere else with var(--name). To change the
   whole site's look, edit the hex values below.
   ---------------------------------------------------------------- */
:root {
  --paper:      #fbf3d9;   /* main light-yellow background */
  --paper-alt:  #f3e8bf;   /* slightly deeper cream, for stripes/cards */
  --ink-brown:  #8a6e4b;   /* light brown  - labels, captions, rules */
  --ink-gold:   #9c7a12;   /* dark yellow  - headings */
  --ink-blue:   #2f4b6e;   /* blue         - links, current-page marker */
  --ink-body:   #4a3f2c;   /* warm brown-black - body text, easy on the eyes */
  --rule:       #d8c89a;   /* dividing lines / dotted leaders */
  --max-width:  700px;     /* how wide the text column gets on large screens */
}


/* ----------------------------------------------------------------
   2. RESET & BASE
   Minimal browser reset, plus the default font/colors/behavior
   applied to every page.
   ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* smooth jump for any in-page # links */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: 'Courier Prime', 'Courier New', monospace; /* typewriter body font */
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover {
  border-bottom-color: currentColor;
}

/* Visible outline when navigating by keyboard (accessibility) */
a:focus-visible {
  outline: 2px dashed var(--ink-blue);
  outline-offset: 3px;
}

/* Centers page content and caps its width so lines of text
   don't stretch too wide on large monitors. */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}


/* ----------------------------------------------------------------
   3. SITE NAV
   The slim bar at the top of every SECTION page (not the home
   page). Shows the site name on the left, linking back home, and
   links to the other three sections on the right. The link for
   whichever page you're currently on gets the "current" class so
   it's visually marked (see the <a class="current"> in each HTML
   file's <nav>).
   ---------------------------------------------------------------- */
.site-nav {
  border-bottom: 2px solid var(--ink-brown);
  padding: 22px 0;
}

.site-nav .container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.site-nav .site-name {
  font-family: 'Special Elite', 'Courier Prime', monospace;
  color: var(--ink-gold);
  font-size: 18px;
  letter-spacing: 0.04em;
}

.site-nav .links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}

.site-nav .links a {
  color: var(--ink-brown);
}

.site-nav .links a:hover {
  color: var(--ink-blue);
}

/* The page you're currently on - styled in blue and underlined
   so it stands out from the other, unvisited links. */
.site-nav .links a.current {
  color: var(--ink-blue);
  border-bottom-color: var(--ink-blue);
}


/* ----------------------------------------------------------------
   4. LETTERHEAD
   The large header at the top of the HOME page only (index.html).
   Reads like the top of a typed personal letter.
   ---------------------------------------------------------------- */
.letterhead {
  padding: 72px 0 40px;
  text-align: center;
  border-bottom: 2px solid var(--ink-brown);
}

.letterhead .eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-brown);
}

.letterhead h1 {
  margin: 0;
  font-family: 'Special Elite', 'Courier Prime', monospace;
  font-weight: 400;
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: 0.04em;
  color: var(--ink-gold);
}

/* Blinking typewriter cursor after your name */
.cursor {
  display: inline-block;
  margin-left: 4px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Respect users who have asked their OS/browser for less motion */
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

.letterhead .tagline {
  margin: 14px 0 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-brown);
}


/* ----------------------------------------------------------------
   5. INDEX / TABLE OF CONTENTS
   The typed list of links on the home page, one row per section
   page, with a number, a dotted "leader" line, and an arrow -
   styled after an old book's table of contents.
   ---------------------------------------------------------------- */
.index {
  padding: 40px 0 64px;
}

.index-heading {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-brown);
}

.index ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index li + li {
  margin-top: 6px;
}

/* Each row is one single <a> so the whole line is clickable,
   not just the text. */
.index-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 4px;
  color: var(--ink-body);
  border-bottom: none; /* overrides the default link hover-underline */
}

.index-item:hover,
.index-item:focus-visible {
  color: var(--ink-blue);
}

.index-item .num {
  color: var(--ink-brown);
  font-size: 14px;
}

.index-item .label {
  font-size: 19px;
  white-space: nowrap;
}

/* The dotted line that stretches between the label and the arrow */
.index-item .filler {
  flex: 1;
  border-bottom: 2px dotted var(--rule);
  height: 0;
  transform: translateY(-5px);
}

.index-item .arrow {
  font-size: 18px;
}


/* ----------------------------------------------------------------
   6. PAGE HEADER
   The small eyebrow label + big <h1> at the top of each SECTION
   page's content (e.g. "01 / Poetry" then "Poetry").
   ---------------------------------------------------------------- */
.page {
  padding: 56px 0 64px;
}

.page .section-num {
  display: block;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-brown);
  margin-bottom: 8px;
}

.page h1 {
  font-family: 'Special Elite', 'Courier Prime', monospace;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 40px);
  color: var(--ink-gold);
  margin: 0 0 28px;
}


/* ----------------------------------------------------------------
   7. CONTENT HELPERS
   Reusable pieces used inside the section pages: an italic note
   marking placeholder text, a placeholder photo frame, a photo
   grid, and a dated list (used by both Articles and News).
   ---------------------------------------------------------------- */

/* Italic callout marking text you should replace with your own */
.placeholder-note {
  font-style: italic;
  color: var(--ink-brown);
  font-size: 15px;
  border-left: 3px solid var(--rule);
  padding-left: 14px;
  margin-bottom: 28px;
}

/* Dashed placeholder box standing in for a real photo.
   Delete this and use a real <img src="..."> tag instead. */
.photo-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    var(--rule),
    var(--rule) 10px,
    var(--paper) 10px,
    var(--paper) 20px
  );
  border: 2px solid var(--ink-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-brown);
  font-size: 14px;
  text-align: center;
}

/* Lays multiple .photo-frame (or <img>) elements out in a
   responsive grid - add more photo-frame elements in the HTML
   and this grid will wrap them automatically. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* Dated list, used for both the Articles page (publications)
   and the News page (updates) so the two stay visually consistent. */
.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list li {
  padding: 14px 0;
  border-bottom: 1px dashed var(--rule);
}

.entry-list .entry-date {
  display: block;
  font-size: 13px;
  color: var(--ink-brown);
  margin-bottom: 4px;
}

/* Small "back home" link placed at the bottom of each section page */
.back-link {
  display: inline-block;
  margin-top: 36px;
  font-size: 14px;
  color: var(--ink-blue);
}


/* ----------------------------------------------------------------
   8. FOOTER
   Short typed sign-off, identical on every page.
   ---------------------------------------------------------------- */
.site-footer {
  padding: 40px 0 60px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-brown);
}


/* ----------------------------------------------------------------
   9. CONCEPT MAP WIDGET
   Small interactive 3D word-map tucked in the bottom-right corner
   of every page (powered by 3d-force-graph, wired up in
   concept-map.js). Visitors can rotate the view, scroll to zoom,
   and drag individual words around - the words themselves can only
   be changed by editing the node list in concept-map.js.
   ---------------------------------------------------------------- */
#concept-map-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 260px;
  height: 260px;
  background: var(--paper);
  border: none;
  z-index: 40;
  overflow: hidden;
}

#concept-map-widget .concept-map-label {
  position: absolute;
  top: 6px;
  left: 10px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-brown);
  z-index: 2;
  pointer-events: none;
}

#concept-map-widget #3d-graph {
  width: 100%;
  height: 100%;
}


/* ----------------------------------------------------------------
   10. RESPONSIVE
   Adjustments for small screens (phones).
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
  .letterhead { padding: 48px 0 28px; }
  .page { padding: 40px 0 48px; }
  .index-item .label { font-size: 17px; }
  .site-nav .links { gap: 14px; font-size: 13px; }

  /* Hidden on phones - a 260px drag-to-rotate widget doesn't work
     well on a small touchscreen and would just sit on top of the
     content. Delete this rule if you want to try it anyway. */
  #concept-map-widget { display: none; }
}