/* 
  styles.css
  Project: Typesetting Literature – "How and Why" by Frank Chimero
  Student: Viola Cherchi

  In this CSS file I am:
  - Defining my colour palette and font choices
  - Implementing the "Near" (Craft) and "Far" (Purpose) concept
  - Controlling all layout, spacing and typography

  The HTML files are kept as clean structures, with no inline styles.
  All the "design thinking" happens here via classes.
*/

/* =========================================
   COLOUR TOKENS (design system)
   ========================================= */

/* 
  I am using CSS variables so that I can change a colour in one place
  and have it update everywhere. This is helpful if I need to tweak
  contrast or mood later.
*/
:root {
  /* Main background: ivory, calm and readable */
  --colour-bg: #FAF9F6;

  /* Main text colour: charcoal, strong but not pure black */
  --colour-text: #2E2E2E;

  /* Accent colour: warm ochre, used for emphasis and highlights */
  --colour-accent: #C89B3C;

  /* Muted grey: used for borders and subtle elements */
  --colour-muted: #E6E4DE;

  /* Ink blue: used to emphasise headings and key quotes */
  --colour-ink: #1A2A40;
}

/* =========================================
   BASIC RESET AND GLOBAL TYPOGRAPHY
   ========================================= */

/* 
  Basic reset so paddings/margins do not behave differently
  in different browsers.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 
  Setting a comfortable default scroll behaviour.
  This is a bit of polish so anchor links scroll smoothly.
*/
html {
  scroll-behavior: smooth;
}

/* 
  Main body styles.
  I am setting:
  - background colour
  - text colour
  - base font
  - base line-height
*/
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif; /* Sans-serif is my "How" / craft voice */
  background-color: var(--colour-bg);
  color: var(--colour-text);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}

/* Wrapper for each page so I can make the footer stick to the bottom
   when there is not much content. */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =========================================
   HEADER AND NAVIGATION
   ========================================= */

/* 
  The header appears on every page.
  I give it a subtle border and a slightly translucent background
  to separate it from the main reading area.
*/
.site-header {
  border-bottom: 1px solid var(--colour-muted);
  background-color: rgba(250, 249, 246, 0.95);
  backdrop-filter: blur(4px); /* tiny blur: modern feel, still subtle */
}

/* 
  nav-bar uses flexbox to align the site title on the left
  and the navigation links on the right.
*/
.nav-bar {
  max-width: 72rem; /* 72rem ≈ 1152px, a comfortable reading width */
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

/* 
  Site title uses the serif font because it represents the "Why" voice:
  more reflective and book-like.
*/
.site-title {
  font-family: "Playfair Display", "Times New Roman", Georgia,
    "Palatino Linotype", serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

/* Small subtitle under the site title for context */
.site-subtitle {
  font-size: 0.85rem;
  color: var(--colour-text);
  opacity: 0.8;
  margin-top: 0.25rem;
}

/* 
  Navigation links container.
  I use gap for spacing instead of margins on links.
*/
.nav-links {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

/* 
  Base nav link styles.
  No underline by default, I use a border-bottom for a subtle highlight.
*/
.nav-links a {
  text-decoration: none;
  color: var(--colour-text);
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}

/* 
  State: hover, focus, and "current page".
  I use aria-current="page" in the HTML to show which page we are on.
*/
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--colour-accent);
  color: var(--colour-ink);
}

/* =========================================
   MAIN CONTENT LAYOUT
   ========================================= */

/* 
  main flex child grows to fill space between header and footer.
*/
main {
  flex: 1;
}

/* 
  .content wraps the main text on every page.
  This keeps a consistent width and padding across the site.
*/
.content {
  max-width: 60rem; /* narrower than header to emphasise reading column */
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* 
  Meta block at the top of each page for small, all-caps info.
  This echoes book-like typographic details.
*/
.meta-block {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--colour-ink);
  margin-bottom: 1rem;
}

/* 
  Each piece of meta information is spaced slightly from the next.
*/
.meta-block span {
  display: inline-block;
  margin-right: 0.75rem;
}

/* =========================================
   PAGE TITLES AND INTRO TEXT
   ========================================= */

/* 
  The main page title uses the serif font to emphasise the "Why" voice.
*/
.page-title {
  font-family: "Playfair Display", "Times New Roman", Georgia,
    "Palatino Linotype", serif;
  font-size: 2.15rem;
  line-height: 1.25;
  color: var(--colour-ink);
  margin-bottom: 0.5rem;
}

/* 
  Intro paragraph just under the title.
  Slightly smaller and softer in colour to feel like a preface.
*/
.page-intro {
  max-width: 38rem;
  margin-bottom: 1.75rem;
  font-size: 0.98rem;
  color: #494949;
}

/* =========================================
   KEY QUOTE BLOCK (HOMEPAGE)
   ========================================= */

/* 
  The key quote introduces the main idea of the chapter.
  I style it like a pull quote with a left border and different background.
*/
.key-quote {
  margin: 2rem 0 2.5rem;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--colour-accent);
  background-color: #f3f1eb;
  font-family: "Playfair Display", "Times New Roman", Georgia,
    "Palatino Linotype", serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--colour-ink);
}

/* =========================================
   ARTICLE BASE STYLES
   ========================================= */

/* 
  .article is the main reading column on each page.
  I keep it narrower than the outer container for long-form reading.
*/
.article {
  max-width: 40rem;
}

/* 
  h2 inside article for main sections.
*/
.article h2 {
  font-family: "Playfair Display", "Times New Roman", Georgia,
    "Palatino Linotype", serif;
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
  color: var(--colour-ink);
}

/* 
  h3 inside article for smaller sections or labels.
*/
.article h3 {
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
  margin: 2rem 0 0.5rem;
  color: var(--colour-text);
}

/* 
  Basic paragraph style inside article.
  I am making the paragraphs lighter in both colour and weight
  so they feel softer and easier to read in longer blocks.
*/
.article p {
  margin-bottom: 1rem;

  /* slightly lighter grey than the main body colour */
  color: #555555;

  /* using the light weight from Inter (I loaded 300 in the Google Fonts link) */
  font-weight: 300;
}

/* 
  Small text for references and notes at the end of the article.
*/
.small-text {
  font-size: 0.8rem;
  color: #666666;
  margin-top: 2.25rem;
}

/* 
  Lists inside article.
*/
.article ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.article li {
  margin-bottom: 0.35rem;
}

/* 
  Links inside article text.
  I keep a subtle underline and use colour for hover state.
*/
.article a {
  color: var(--colour-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.article a:hover,
.article a:focus-visible {
  color: var(--colour-accent);
}

/* =========================================
   NEAR / FAR READING SECTIONS
   (core concept from my slides)
   ========================================= */

/* 
  I am using two classes to represent the two "states"
  from the chapter:
  - .reading--near  (Craft / How)
  - .reading--far   (Purpose / Why)

  They use the same HTML structure (section with paragraphs),
  but I change spacing and line-length here in CSS to express
  the conceptual difference.
*/

/* Base for all reading sections so they stack with good spacing */
.reading-section {
  margin-bottom: 2rem;
}

/* 
  Near: Craft
  - narrower margins inside the section
  - slightly smaller line-height
  - feels denser and more intense
*/
.reading--near {
  padding: 1rem 1.25rem;
  background-color: #f7f5f0; /* slightly stronger background */
  line-height: 1.5;
}

/* 
  Optional: I can tweak letter-spacing or font-weight here
  if I want it to feel more "tight", but I keep it subtle.
*/
.reading--near p {
  /* keeping normal font-weight here to maintain legibility */
}

/* 
  Far: Purpose
  - more generous padding
  - bigger line-height
  - more white space
  - feels like stepping back and breathing
*/
.reading--far {
  padding: 1.75rem 1.75rem 2rem;
  background-color: transparent; /* keep it airy */
  line-height: 1.8;
}

/* 
  To reinforce the idea, I limit the maximum width slightly more
  on the "far" sections so they feel like a composed block 
  floating in space.
*/
.reading--far .reading-inner {
  max-width: 32rem;
}

/* =========================================
   FOOTER
   ========================================= */

/* 
  Simple footer at the bottom of each page.
*/
.site-footer {
  border-top: 1px solid var(--colour-muted);
  padding: 1rem 1.5rem 1.25rem;
  font-size: 0.8rem;
  color: #777777;
  text-align: center;
}

/* =========================================
   RESPONSIVE ADJUSTMENTS
   ========================================= */

/* 
  On smaller screens I stack the nav and loosen typography
  so everything remains readable on mobile.
*/
@media (max-width: 720px) {
  .nav-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .content {
    padding: 1.75rem 1.25rem 2.5rem;
  }

  .article {
    max-width: 100%;
  }

  .page-title {
    font-size: 1.75rem;
  }

  .key-quote {
    margin: 1.5rem 0 2rem;
  }
}