/* Shared layout for lukeleisman.com.
   Colors, fonts, and hero layout come from the theme file (assets/css/themes/*.css),
   which is loaded first and sets the tokens below. This file only uses tokens. */

/* --- Spacing and size tokens (same for every theme) --- */
:root {
  --page-max-width: 1120px;   /* widest content column */
  --wide-max-width: 1400px;   /* the four action tiles in "four-wide" layout (Luke: tiles should be wider) */
  --narrow-max-width: 720px;  /* narrow column: homepage "find each other" band, quote banners */
  --prose-max-width: 840px;   /* reading column on subpages. Was 720px; Luke, session 7: "a bit wider". 840 is my pick — change freely */
  --side-gutter: 20px;        /* left/right padding on phones */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 72px;
  --radius: 10px;
}

/* --- Base --- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; font-weight: var(--heading-weight); }
.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--side-gutter); }
.narrow { max-width: var(--narrow-max-width); }
.narrow.prose { max-width: var(--prose-max-width); }  /* subpage text column (session 7) */
.small { font-size: 15px; color: var(--color-muted); }

/* --- Buttons --- */
.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.button:hover { filter: brightness(1.08); }

/* --- Header and nav --- */
.site-header { border-bottom: 1px solid var(--color-rule); background: var(--color-background); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); padding-top: 14px; padding-bottom: 14px; }
.site-name { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 22px; color: var(--color-text); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-family: var(--font-ui); font-size: 15px; }
.site-nav a { color: var(--color-text); text-decoration: none; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.site-nav .nav-contact { padding: 6px 14px; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }

/* --- Hero (homepage). Themes choose which image shows and the layout. --- */
.hero { position: relative; }
.hero h1 { font-size: clamp(40px, 7vw, 72px); margin: 0 0 var(--space-1); }
.byline { font-family: var(--font-ui); font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 var(--space-1); }
.tagline { font-family: var(--font-heading); font-style: var(--tagline-style); font-size: clamp(22px, 3vw, 30px); margin: 0 0 var(--space-2); }
.intro { max-width: 36em; margin: 0 0 var(--space-3); }
.hero-photo, .hero-photo-alt, .hero-portrait { display: none; }

/* --- Intro paragraph under the banner (session 3) --- */
.intro-block { padding-top: var(--space-4); }
.intro-block .intro { font-size: 20px; max-width: 40em; }

/* --- Four action cards ---
   Layout comes from a body class set per mockup variant (site_config.MOCKUP_VARIANTS["tiles"]):
     tiles-four-wide:  4 across on screens 1100px+, in a wider 1400px column; 2 across on tablets; 1 on phones
     tiles-two-by-two: 2 across in the normal 1120px column; 1 on phones */
.actions { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding-top: var(--space-4); padding-bottom: var(--space-5); }
.tiles-four-wide .actions { max-width: var(--wide-max-width); }
@media (min-width: 640px) { .actions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiles-four-wide .actions { grid-template-columns: repeat(4, 1fr); } }
.tiles-two-by-two .action-card img { aspect-ratio: 16 / 9; }
.action-card { display: flex; flex-direction: column; background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; color: var(--color-text); text-decoration: none; transition: transform .15s; }
.action-card:hover { transform: translateY(-3px); }
.action-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.action-card h2 { font-size: 22px; margin: var(--space-2) var(--space-2) var(--space-1); color: var(--color-heading-accent); }
.action-card p { margin: 0 var(--space-2) var(--space-3); font-size: 16px; }

/* --- Projects list ("Things I've built" and "Organizations I work with" use the same look) --- */
.projects { padding-bottom: var(--space-4); }
.projects h2 { font-size: 26px; }
.project-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-2) var(--space-4); }
.project-list li { border-top: 1px solid var(--color-rule); padding-top: var(--space-1); font-size: 16px; }
.project-list li > a, .project-name { display: block; font-weight: 600; font-family: var(--font-ui); }
.project-list li > span:not(.project-name) { color: var(--color-muted); }

/* --- "Let's find each other" block --- */
.find-each-other { background: var(--color-band); color: var(--color-on-band); padding: var(--space-5) 0; text-align: center; }
.find-each-other .narrow { margin: 0 auto; }
.find-each-other .small { color: inherit; opacity: .8; }
/* Homepage quote band over a photo (session 7). Overlay strength is my pick: dark enough for white text. */
.find-each-other.with-photo { position: relative; overflow: hidden; color: #fff; }
.find-each-other.with-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.find-each-other.with-photo::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 28, .55); }
.find-each-other.with-photo .wrap { position: relative; z-index: 1; }
.find-each-other.with-photo .big-quote { text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.big-quote { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 30px); line-height: 1.35; }

/* --- Recommendations box (session 3): two columns of plain lists on a card --- */
.recommendations { padding-bottom: var(--space-5); }
.recommend-box { background: var(--color-card); border: 1px solid var(--color-rule); border-radius: var(--radius); padding: var(--space-3) var(--space-3) var(--space-2); }
.recommend-box > h2 { font-size: 26px; margin-top: 0; }
.recommend-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-1) var(--space-4); }
.recommend-columns h3 { font-family: var(--font-ui); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); margin: var(--space-2) 0 var(--space-1); }
.recommend-columns ul { list-style: none; padding: 0; margin: 0; font-size: 16px; }
.recommend-columns li { padding: 5px 0; border-top: 1px solid var(--color-rule); }
.recommend-columns .by { color: var(--color-muted); }

/* --- Small credentials box near the bottom of the homepage (session 3) --- */
.credentials-box { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.credentials-box .box { border-left: 3px solid var(--color-accent); padding: 4px 0 4px var(--space-3); font-size: 16px; }
.credentials-box h2 { font-family: var(--font-ui); font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); margin: 0 0 var(--space-1); }
.credentials-box ul { margin: 0 0 var(--space-1); padding-left: 1.1em; }

/* --- Prose pages --- */
.prose { padding-top: var(--space-4); padding-bottom: var(--space-5); }
.prose h1 { font-size: clamp(34px, 5vw, 48px); }
.prose h2 { font-size: 24px; margin-top: var(--space-4); }
.about-photo { border-radius: var(--radius); margin: var(--space-3) 0; }
.prose img { border-radius: var(--radius); margin: var(--space-2) 0; }

/* --- Photo row on subpages (session 4): 2–4 photos cropped to the same shape ---
   Wider than the reading column so photos have room; 1 column on phones, 2 on tablets, up to 4 on desktop. */
.photo-row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); max-width: var(--page-max-width); margin: var(--space-3) auto var(--space-4); }
@media (min-width: 560px) { .photo-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .photo-row.three { grid-template-columns: repeat(3, 1fr); } .photo-row.four { grid-template-columns: repeat(4, 1fr); } }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin: 0; }
.photo-row img.tall { aspect-ratio: 3 / 4; }   /* only for portrait photos in a row of portraits */

/* --- Quote over a full-width photo (session 4; Luke: "perhaps on an image on one of the subpages") --- */
.quote-band { position: relative; color: #fff; background: #141b2d; overflow: hidden; margin: var(--space-4) 0; }
.quote-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.quote-band::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 28, .62); }   /* darkening so white text is readable */
.quote-band blockquote { position: relative; z-index: 1; max-width: var(--narrow-max-width); margin: 0 auto; padding: var(--space-5) var(--side-gutter); font-family: var(--font-heading); font-size: clamp(20px, 2.6vw, 27px); line-height: 1.45; }
.quote-band cite { display: block; margin-top: var(--space-2); font-family: var(--font-ui); font-style: normal; font-size: 16px; opacity: .9; }
.quote-band a { color: #f0c26a; }
.quote-band.poem blockquote { font-size: clamp(18px, 2.1vw, 22px); }

/* --- Contact form --- */
.contact-form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.contact-form label { display: grid; gap: 4px; font-family: var(--font-ui); font-weight: 600; font-size: 15px; }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-card); color: var(--color-text); }
.contact-form .button { justify-self: start; }
.honeypot { position: absolute; left: -9999px; }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--color-rule); padding: var(--space-4) 0; font-family: var(--font-ui); font-size: 15px; color: var(--color-muted); }
.site-footer a { color: inherit; }

/* --- Draft markers (on while site_config.SHOW_DRAFT_MARKERS is True) --- */
.draft-banner { display: none; }
.show-draft-markers .draft { background: #fff3b0; color: #3a3000; box-shadow: 0 0 0 2px #fff3b0; border-radius: 2px; }
.show-draft-markers .draft::after { content: " [" attr(data-note) "]"; font: 600 11px/1.2 system-ui, sans-serif; color: #7a5b00; }
.show-draft-markers .draft-banner { display: block; background: #fff3b0; color: #3a3000; padding: 8px 12px; border-radius: 6px; font: 600 14px/1.4 system-ui, sans-serif; }

/* --- Splitting a prose page around full-width photos (session 4) ---
   .flush: no bottom padding (a photo row or quote band follows)
   .after-media: no top padding (it follows a photo row or quote band) */
.prose.flush { padding-bottom: 0; }
.prose.after-media { padding-top: 0; }
/* Crop a portrait photo from the top so heads stay in a 4:3 frame. */
.photo-row img.focus-top { object-position: 50% 15%; }

/* --- Subpage photo banner with the page title on it (session 5; Luke: images at the top) ---
   Same idea as the homepage banner, a little shorter. */
:root { --page-hero-height: clamp(220px, 40vh, 400px); }
.page-hero { position: relative; min-height: var(--page-hero-height); display: flex; align-items: flex-end; color: #fff; background: #141b2d; overflow: hidden; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,14,28,.8) 0%, rgba(10,14,28,.3) 50%, rgba(10,14,28,0) 80%); }
.page-hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: var(--space-3); }
.page-hero h1 { font-size: clamp(34px, 5vw, 52px); margin: 0; }

/* A quote band used as the top banner: no outer margin, so it sits right under the header. */
.quote-band.at-top { margin: 0; }
/* Poem stanzas side by side on wide screens so the banner stays short; stacked on phones. */
.quote-band.poem blockquote { max-width: var(--page-max-width); }
.poem-stanzas { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-4); }
@media (min-width: 860px) { .poem-stanzas { grid-template-columns: repeat(3, auto); justify-content: center; } }

/* --- Learn & Explore (session 7 layout) ---
   Learn: heading, photos, then Tutoring | Workshops side by side from 900px (stacked on phones).
   Explore Chicago: one column below: heading, text, button, then photos. */
.learn-section, .explore-section { padding-bottom: var(--space-4); }
.learn-section h2, .explore-section h2 { font-size: 30px; margin: var(--space-3) 0 var(--space-2); }
.learn-section h3 { font-size: 23px; margin: var(--space-2) 0 var(--space-1); }
.learn-section .photo-row { margin: var(--space-2) 0 var(--space-3); }
.learn-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-5); }
@media (min-width: 900px) { .learn-columns { grid-template-columns: 1fr 1fr; } }
.explore-section .prose-column { max-width: var(--prose-max-width); }
.explore-section .photo-row { margin-top: var(--space-3); }
/* Student reviews on the tutoring column */
.reviews blockquote { margin: var(--space-2) 0; padding-left: var(--space-2); border-left: 3px solid var(--color-accent); font-style: italic; }
.reviews cite { display: block; font-family: var(--font-ui); font-style: normal; font-size: 14px; color: var(--color-muted); margin-top: 2px; }
/* Dickinson banner photo: the skyline sits ~70–80% down the photo, so anchor the crop there
   instead of the center (Luke, session 7: don't cut off the skyline). 80% is my pick; raise/lower to taste. */
.quote-band img.focus-skyline { object-position: 50% 80%; }
/* Same banner: the even dark overlay hid the skyline even when it was in frame. Here the
   overlay is dark behind the poem (top) and fades to light at the bottom, and extra bottom
   padding leaves a strip below the poem where the skyline shows. Numbers are my picks. */
.quote-band.show-skyline::after { background: linear-gradient(to bottom, rgba(10, 14, 28, .72) 0%, rgba(10, 14, 28, .55) 55%, rgba(10, 14, 28, .08) 100%); }
.quote-band.show-skyline blockquote { padding-bottom: 120px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.poem-stanzas p { margin: 0; }
/* Learn ↓ / Explore ↓ as centered buttons (Luke, session 7) */
.jump-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0; }
.jump-links .button { min-width: 9em; text-align: center; font-size: 17px; padding: 12px 28px; }

/* --- About: photo beside the title and opening paragraph (session 5) ---
   Stacks on phones (text first); side by side from 800px, text column a little wider than the photo. */
.split-hero { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: center; padding-top: var(--space-4); padding-bottom: var(--space-3); max-width: 1000px; }
@media (min-width: 800px) { .split-hero { grid-template-columns: 1.2fr 1fr; gap: var(--space-4); } }
.split-hero h1 { font-size: clamp(34px, 5vw, 48px); margin-top: 0; }
.split-hero img { border-radius: var(--radius); width: 100%; }

/* Poem: keep each line whole when stanzas sit side by side (they wrapped at 1300px). */
@media (min-width: 860px) { .poem-stanzas p { white-space: nowrap; } .quote-band.poem blockquote { font-size: clamp(17px, 1.6vw, 21px); } }

/* --- Writing: latest Galaxy Glasses posts from the RSS feed (session 7) --- */
.post-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.post-list li { padding: 10px 0; border-top: 1px solid var(--color-rule); }
.post-list a { font-weight: 600; }
.post-date { font-family: var(--font-ui); font-size: 14px; color: var(--color-muted); margin-left: 6px; }
.post-subtitle { display: block; font-size: 16px; color: var(--color-muted); }
.learn-section h4 { font-family: var(--font-ui); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); margin: var(--space-3) 0 var(--space-1); }
.past-workshops { padding-left: 1.1em; }
.past-workshops li { margin-bottom: 6px; }
/* Learn: one photo at the top of each column (session 7), same shape as photo-row images */
.column-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); margin: var(--space-2) 0 var(--space-1); }
/* Portrait photos cropped into a 4:3 slot: keep the middle-upper part, where the faces are. 40% is my pick. */
.photo-row img.focus-faces { object-position: 50% 40%; }
/* Events: BAAD signup options A and B (session 7, temporary until Luke picks one) */
.signup-options { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.signup-option { border: 1px dashed var(--color-rule); border-radius: var(--radius); padding: var(--space-2); }
.option-label { font-family: var(--font-ui); font-size: 14px; margin: 0 0 var(--space-1); }
.signup-form { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.signup-form input { flex: 1 1 220px; font: inherit; font-size: 16px; padding: 10px 14px; border: 1px solid var(--color-rule); border-radius: 999px; background: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Homepage band: quote + attribution (session 7, Vonnegut) */
.band-quote { margin: 0 0 var(--space-3); }
.band-quote cite { display: block; margin-top: var(--space-1); font-family: var(--font-ui); font-style: normal; font-size: 16px; opacity: .9; }
/* Vonnegut band: a little wider than the 720px narrow column, and balanced line lengths so the
   last line isn't one hanging word (Luke, session 7). 900px is my pick. text-wrap: balance works in
   current Chrome, Safari, and Firefox; older browsers just wrap normally. */
.find-each-other .band-wide { max-width: 900px; }
.band-quote .big-quote { text-wrap: balance; }

/* Writing: Galaxy Glasses logo beside its heading, blurb, and button (session 7). Stacks under 560px. */
.logo-beside { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-4); }
@media (min-width: 560px) { .logo-beside { grid-template-columns: 160px 1fr; } }
.logo-beside img { width: 160px; border-radius: var(--radius); margin: 0; }
.logo-beside h2 { margin-top: 0; }

/* Build: one tall photo on the left, two stacked on the right (session 7: show the whole Life After Cars book).
   Stacks to one column on phones. */
.photo-mosaic { display: grid; grid-template-columns: 1fr; gap: var(--space-2); margin: var(--space-3) auto var(--space-4); max-width: 900px; }
.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); margin: 0; }
@media (min-width: 640px) {
  .photo-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .photo-mosaic .tall { grid-row: span 2; }
  .photo-mosaic img:not(.tall) { aspect-ratio: 4 / 3; }
}
.photo-mosaic .tall { object-position: 50% 100%; }   /* keep the bottom, where the book is */

/* Build: Maya Angelou quote in a box over a photo (session 7). */
.quote-box { position: relative; overflow: hidden; border-radius: var(--radius); color: #fff; margin: var(--space-4) 0; }
.quote-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.quote-box::after { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 28, .55); }
.quote-box blockquote { position: relative; z-index: 1; margin: 0; padding: var(--space-4) var(--space-3); font-family: var(--font-heading); font-size: clamp(21px, 2.4vw, 26px); line-height: 1.45; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.quote-box cite { display: block; margin-top: var(--space-2); font-family: var(--font-ui); font-style: normal; font-size: 16px; opacity: .9; }
.small-poem { margin: var(--space-2) 0 var(--space-2) var(--space-3); font-family: var(--font-heading); font-size: 20px; }
.small-poem p { margin: 0; }
.small-poem cite { display: block; font-family: var(--font-ui); font-style: normal; font-size: 15px; color: var(--color-muted); margin-top: 4px; }
/* Council dashboard page (session 7): the app draws and styles itself; just give it the full width
   and a little room under the header (the WP page used padding-top: 8px). */
.council-app { padding-top: 8px; }
/* Tidal Forces zine page (session 7): cover beside the text from 860px, stacked on phones. */
.zine-page { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-4); padding-bottom: var(--space-5); max-width: 1000px; }
@media (min-width: 860px) { .zine-page { grid-template-columns: 2fr 3fr; align-items: start; } }
.zine-cover { width: 100%; max-width: 420px; margin: 0 auto; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.zine-text h1 { font-size: clamp(32px, 4.5vw, 44px); margin: 0 0 4px; }
.zine-subtitle { font-family: var(--font-heading); font-size: 21px; margin: 0 0 var(--space-2); color: var(--color-muted); }
.editions { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.edition-label { font-style: italic; margin: 0 0 6px; }