/* =========================================================
   Clark's homepage — shared theme
   Every page links this file so the whole site matches.
   The signature element is the rotating photo band at the
   top of each page — see js/photo-header.js.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,500&family=Nunito+Sans:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* warm dark base */
  --espresso:      #241D18;
  --espresso-deep: #17120E;

  /* cream cards floating on the dark base */
  --paper:      #F6EFE3;
  --paper-dim:  #EDE2CE;

  /* text */
  --ink:        #2A2018;
  --ink-soft:   #5C4E3F;
  --cream-text: #F1E7D6;
  --cream-soft: rgba(241,231,214,0.62);

  /* palette — named colors available for any page to use.
     Each page gets exactly one color, no separate hover shade,
     so there's never ambiguity about "which one is the real
     color." Assignments below match this set:
     Cross Stitch #C1552D · Home #C89A2E · Projects #3E8455
     Page 4 #1F7A72 · Page 5 #3E6FA0 · Page 6 #5B4FA0
     Page 7 #8B4A78 · Page 8 #A83A56 */
  --rust:   #C1552D;
  --amber:  #C89A2E;
  --pine:   #3E8455;
  --teal:   #1F7A72;
  --blue:   #3E6FA0;
  --indigo: #5B4FA0;
  --plum:   #8B4A78;
  --berry:  #A83A56;

  /* the active accent for the current page — defaults to a
     neutral stone tone; each page overrides this below */
  --accent:     #8C8171;
  --accent-hot: #8C8171;

  --line: rgba(241,231,214,0.14);
  --line-on-paper: rgba(42,32,24,0.14);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --radius: 6px;
  --max-width: 1080px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scrollbar-gutter: stable; }

body{
  margin: 0;
  background: var(--espresso);
  color: var(--cream-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--accent-hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--accent-hot); }

img{ max-width: 100%; display: block; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}

/* -----------------------------------------------------------
   Photo header — the site's signature. Rotates through photos
   defined in js/photo-header.js. Nav + name sit on top of it.
----------------------------------------------------------- */
.photo-header{
  position: relative;
  height: 340px;
  overflow: hidden;
  background: var(--espresso-deep);
}

.photo-header img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.photo-header img.is-fading{ opacity: 0; }

.photo-header-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(23,18,14,0.55) 0%,
    rgba(23,18,14,0.15) 35%,
    rgba(23,18,14,0.15) 60%,
    rgba(23,18,14,0.85) 100%);
}

.photo-header-content{
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.site-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--cream-text);
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.site-name:hover{ color: var(--accent-hot); }

.site-nav{
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a{
  color: var(--cream-soft);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color: var(--cream-text);
  border-bottom-color: var(--accent-hot);
}

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

/* -----------------------------------------------------------
   Page shell
----------------------------------------------------------- */
main{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 44px 24px 80px;
}

.page-hero{
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}

.page-title{
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  margin: 0 0 14px;
  color: var(--cream-text);
}

.page-intro{
  max-width: 62ch;
  color: var(--cream-soft);
  font-size: 1.05rem;
}
.page-intro em{
  font-style: italic;
  color: var(--cream-text);
}

/* -----------------------------------------------------------
   Cards — used for project grids, page tiles, anything that
   needs to show as a stack of "items." Shared across pages.
----------------------------------------------------------- */
.project-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.project-card{
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.project-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.34);
}

/* Extra cue for cards that are themselves links (whole-card
   links, e.g. project tiles that open an app or the homepage
   tiles) — an accent ring, a title color shift, and a slight
   zoom on the photo, on top of the lift/shadow above. */
a.project-card .photo-slot img{
  transition: transform 0.3s ease;
}
a.project-card:hover{
  box-shadow: 0 20px 40px rgba(0,0,0,0.34), 0 0 0 2px var(--accent-hot);
}
a.project-card:hover .project-title{
  color: var(--accent-hot);
}
a.project-card:hover .photo-slot img{
  transform: scale(1.04);
}

/* Same cue for cards whose photo opens a lightbox rather than a
   link (see js/lightbox.js) — keeps "this does something on
   click" feeling consistent across the whole site. */
.project-card.has-lightbox:hover{
  box-shadow: 0 20px 40px rgba(0,0,0,0.34), 0 0 0 2px var(--accent-hot);
}
.project-card.has-lightbox:hover .project-title{
  color: var(--accent-hot);
}

.photo-slot{
  aspect-ratio: 4 / 3;
  background: var(--paper-dim);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.photo-slot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
}

.photo-slot .placeholder-label{
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px dashed var(--line-on-paper);
  padding: 6px 12px;
  border-radius: var(--radius);
}

.project-body{
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.project-title{
  font-size: 1.35rem;
  margin: 0 0 10px;
  color: var(--ink);
}

.project-notes{
  color: var(--ink-soft);
  font-size: 0.96rem;
  margin: 0;
}
.project-notes + .project-notes{
  margin-top: 0.9em;
}

.project-card.add-new{
  background: transparent;
  border: 1px dashed var(--line);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 260px;
  color: var(--cream-soft);
  padding: 24px;
}
.project-card.add-new .plus{
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--accent-hot);
  line-height: 1;
  margin-bottom: 6px;
}
.project-card.add-new p{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  max-width: 22ch;
}

@media (max-width: 520px){
  .project-grid{ grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.site-footer{
  border-top: 1px solid var(--line);
}
.site-footer .nav-top{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--cream-soft);
}

.footer-quote{
  font-family: var(--font-display);
  font-style: italic;
  text-align: right;
}

@media (max-width: 640px){
  .photo-header{ height: 220px; }
  .site-nav{ gap: 14px; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .photo-header img{ transition: none; }
}

/* -----------------------------------------------------------
   Photo lightbox — click any project photo to view it larger.
   Applies automatically to any .photo-slot img on any page.
----------------------------------------------------------- */
.photo-slot.has-photo{ cursor: pointer; }
.photo-slot.has-photo img{
  transition: transform 0.3s ease, filter 0.3s ease;
}
.photo-slot.has-photo:hover img{
  transform: scale(1.04);
  filter: brightness(0.82);
}
.photo-slot.has-photo:focus-visible{
  outline: 2px solid var(--accent-hot);
  outline-offset: -2px;
}

.expand-badge{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(36,29,24,0.72);
  color: var(--cream-text);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  pointer-events: none;
}
.photo-slot.has-photo:hover .expand-badge{
  opacity: 1;
  transform: scale(1.08);
  background: var(--accent);
}

.lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(10,8,6,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}
.lightbox-content{
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
}
.lightbox-image{
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.lightbox-close{
  position: fixed;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(36,29,24,0.82);
  color: var(--cream-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover{
  background: var(--accent);
  transform: scale(1.06);
}
body.lightbox-open{
  overflow: hidden;
}

@media (max-width: 640px){
  .lightbox-close{ top: 12px; right: 12px; width: 40px; height: 40px; font-size: 1.4rem; }
}

/* -----------------------------------------------------------
   Page-specific tweaks — scoped by body class so each page
   only picks up its own rules, while everything else in this
   file stays shared across the whole site.
----------------------------------------------------------- */

/* Cross Stitch — a faint stitched texture on photo placeholders,
   specific to this page's craft subject matter. */
.crossstitch-page .photo-slot::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(42,32,24,0.05) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-45deg, rgba(42,32,24,0.05) 0 2px, transparent 2px 11px);
  pointer-events: none;
}

/* Cross Stitch — rust accent. */
body.crossstitch-page{
  --accent: var(--rust);
  --accent-hot: var(--rust);
}

/* Projects — pine green accent, so this section reads as
   visually distinct from Cross Stitch. */
body.projects-page{
  --accent: var(--pine);
  --accent-hot: var(--pine);
}

/* Home — amber accent, its own identity rather than leaning
   toward either section below it. */
body.home-page{
  --accent: var(--amber);
  --accent-hot: var(--amber);
}

/* Patterns — berry accent. */
body.patterns-page{
  --accent: var(--berry);
  --accent-hot: var(--berry);
}

/* As Seen In — dusty blue accent. */
body.press-page{
  --accent: var(--blue);
  --accent-hot: var(--blue);
}

/* Compact contents list for pattern packs — a multi-column grid
   of short names instead of one per line, so a pack with many
   items doesn't blow out the card's height. */
.pack-contents{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-auto-columns: 110px;
  column-gap: 18px;
  row-gap: 3px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 10px 0 0;
  padding: 10px 14px;
  list-style: none;
  height: 140px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #D1CBC0;
  border-radius: 4px;
}
.pack-contents li{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 0;
}

/* Run Reports — teal accent. */
body.runreports-page{
  --accent: var(--teal);
  --accent-hot: var(--teal);
}

/* -----------------------------------------------------------
   Run reports list — a stack of native <details> elements
   instead of a card grid, since each report is a click-to-
   expand row rather than a browsable tile. No JS needed for
   the expand/collapse itself; js/lightbox.js still handles
   any photos inside once expanded.
----------------------------------------------------------- */
.report-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report{
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}

.report summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--ink);
}
.report summary::-webkit-details-marker{ display: none; }
.report summary:hover{ color: var(--accent); }
.report summary:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.report-course{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: inherit;
}
.report-date,
.report-time{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.report-teaser{
  font-size: 0.92rem;
  color: var(--ink-soft);
  flex: 1 1 100%;
}
@media (min-width: 640px){
  .report-teaser{ flex: 1 1 auto; }
}

.report-chevron{
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.report[open] .report-chevron{
  transform: rotate(180deg);
}

.report-body{
  padding: 0 20px 22px;
  border-top: 1px solid var(--line-on-paper);
  margin-top: 2px;
  padding-top: 16px;
}

.report-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.report-stats strong{
  color: var(--ink);
  font-weight: 600;
}

.report-photos{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.report-photos .photo-slot{
  width: 160px;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}