/* Import the "IM Fell English SC" font from Google Fonts.
   This font is a serif typeface inspired by historic English typography,
   lending an elegant, old-style, Victorian look suitable for literary or historical themes. */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');

/* BODY element styles:
   - Sets the overall background color to a soft cream (#fdfaf3), which is easy on the eyes and evokes vintage paper.
   - Text color is a dark brown (#3c2f2f), softer than black for a warmer, antique feel.
   - Uses the imported serif font for authentic Victorian style.
   - Constrains content width to 900px maximum to keep lines from becoming too long,
     which helps maintain readability on wide screens.
   - Margins set to 'auto' center the body horizontally within the browser viewport.
   - Padding of 2rem creates breathing room around the page content, preventing text from touching edges.
   - Line height of 1.7 increases space between text lines, making paragraphs easier to read and visually appealing. */
body {
  background-color: #fdfaf3;
  color: #3c2f2f;
  font-family: "IM Fell English SC", serif;
  max-width: 900px;
  margin: auto;
  padding: 2rem;
  line-height: 1.7;
}

/* HEADER styles:
   - Centers all text within the header section.
   - Adds a decorative double border on the bottom using a muted gold-brown color (#b39c80),
     which subtly separates the header from the rest of the content while maintaining the vintage aesthetic.
   - Adds bottom padding of 1rem so the text doesn't sit right on the border line, improving visual spacing. */
header {
  text-align: center;
  border-bottom: 3px double #b39c80;
  padding-bottom: 1rem;
}

/* H1 (Main Title) styles:
   - Sets font size to 2.2rem, making the main heading large and prominent.
   - Adds a small bottom margin (0.5rem) to separate the heading from following content, preventing crowding. */
h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

/* H2 (Subheading) styles:
   - Medium font size (1.4rem) appropriate for secondary headings.
   - Adds a top margin of 2rem to create clear separation between sections.
   - Places a thin solid border (1px) beneath the heading in a light beige (#cabba5),
     giving a subtle underline effect to visually define the heading.
   - Padding below the heading text (0.3rem) ensures the underline doesn't stick too close to the text,
     creating better balance. */
h2 {
  font-size: 1.4rem;
  margin-top: 2rem;
  border-bottom: 1px solid #cabba5;
  padding-bottom: 0.3rem;
}

/* IMG element styles:
   - Restricts image width to a maximum of 100% of its container,
     ensuring images scale responsively on smaller screens.
   - Adds vertical margin of 1rem above and below images to separate them from surrounding content.
   - Applies a subtle border (1px solid #c6b39a) that matches the color palette, framing the image gently.
   - Adds a slight shadow with low opacity (rgba(0,0,0,0.1)) offset by 2px horizontally and vertically and blurred by 6px,
     giving a subtle 3D effect and making images stand out slightly from the background. */
img {
  max-width: 100%;
  margin: 1rem 0;
  border: 1px solid #c6b39a;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

/* SECTION with class 'biography':
   - Adds margin on top (2rem) to separate from previous sections.
   - Uses a soft warm background (#f4ede1) to visually distinguish this section from the rest of the page.
   - Padding inside the section (1.5rem) ensures text and content don’t touch edges.
   - Border with the same muted gold color (#b39c80) frames the section.
   - Slightly rounded corners (5px radius) soften the edges for a gentler visual effect.
   - Text color matches the body for consistency and readability. */
section.biography {
  margin-top: 2rem;
  background-color: #f4ede1;
  padding: 1.5rem;
  border: 1px solid #b39c80;
  border-radius: 5px;
  color: #3c2f2f;
}

/* ACCORDION button styles:
   - Background color matches the biography section for thematic consistency (#f4ede1).
   - Border with the same gold-brown color (#b39c80) defines the clickable area.
   - Margin vertically (1rem) separates each accordion button from others.
   - Cursor changes to pointer on hover, signaling interactivity.
   - Padding of 1rem creates a comfortable clickable area.
   - Font size slightly larger than normal (1.1rem) to emphasize button text.
   - Bold font weight makes text stand out.
   - Darker brown text color (#5b4033) differentiates the button text from body text.
   - Smooth transition (0.3s ease) for background color on hover, improving user experience.
   - User-select set to none prevents accidental text highlighting when clicking.
   - Uses the Victorian style serif font for authentic design.
   - Comment notes this font choice maintains Victorian authenticity. */
.accordion {
  background-color: #f4ede1;
  border: 1px solid #b39c80;
  margin: 1rem 0;
  cursor: pointer;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  color: #5b4033;
  transition: background-color 0.3s ease;
  user-select: none;
  font-family: "IM Fell English SC", serif;
  /* Changed to serif for Victorian authenticity */
}

/* ACCORDION hover state:
   - Changes background color to a slightly darker beige (#e6d9b8)
     providing visual feedback when the user hovers over the button, enhancing usability. */
.accordion:hover {
  background-color: #e6d9b8;
}

/* ACCORDION panel (content area that expands):
   - Padding adds spacing inside the panel; no top padding but 1rem on sides and bottom for neat layout.
   - Light cream background (#f9f5e7) provides contrast with the button.
   - 'display: none' hides the panel initially; it is typically toggled visible with JavaScript.
   - Borders on left, right, and bottom with the gold-brown color (#b39c80) visually connect the panel to the accordion button above.
   - Normal font weight (not bold) for body text readability.
   - Text color matches the rest of the content (#3c2f2f).
   - Uses the same Victorian serif font for consistency. */
.panel {
  padding: 0 1rem 1rem 1rem;
  background-color: #f9f5e7;
  display: none;
  border-left: 1px solid #b39c80;
  border-right: 1px solid #b39c80;
  border-bottom: 1px solid #b39c80;
  font-weight: normal;
  color: #3c2f2f;
  font-family: "IM Fell English SC", serif;
}

/* LINKS inside accordion panel:
   - Dark brown color (#5b4033) matching accordion button text.
   - Bold font weight to help links stand out inside the panel content.
   - Removes underline by default to keep links clean-looking.
   - Maintains the Victorian serif font for overall style harmony. */
.panel a {
  color: #5b4033;
  font-weight: bold;
  text-decoration: none;
  font-family: "IM Fell English SC", serif;
}

/* LINKS hover effect inside panel:
   - Adds underline on hover to clearly indicate that links are interactive,
     improving accessibility and user experience. */
.panel a:hover {
  text-decoration: underline;
}

/* NAVIGATION container styles:
   - Centers the navigation links horizontally.
   - Adds vertical margin of 2rem to space the nav from other page elements.
   - Uses the Victorian serif font to keep consistent typography across the site. */
nav {
  text-align: center;
  margin: 2rem 0;
  font-family: "IM Fell English SC", serif;
}

/* NAVIGATION links:
   - Colored dark brown (#5b4033) to stand out against the background.
   - Removes default underline for a cleaner look.
   - Bold font to emphasize the links.
   - Adds horizontal margin (1rem) between each link for spacing.
   - Uses the same serif font for consistency. */
nav a {
  color: #5b4033;
  text-decoration: none;
  font-weight: bold;
  margin: 0 1rem;
  font-family: "IM Fell English SC", serif;
}

/* NAVIGATION links hover effect:
   - Underlines links on hover to provide visual feedback on interactivity,
     aiding usability. */
nav a:hover {
  text-decoration: underline;
}

/* FOOTER styles:
   - Centers the text content horizontally.
   - Uses a smaller font size (0.9rem) to subtly separate footer from main content.
   - Muted brown color (#7e6c58) makes footer text less dominant but readable.
   - Adds a dashed border on top (#b6a484), visually separating the footer from content above.
   - Padding-top of 1rem adds breathing space between border and footer text.
   - Margin-top of 3rem creates significant spacing above the footer to avoid crowding.
   - Uses Victorian serif font for cohesive styling across the page. */
footer {
  text-align: center;
  font-size: 0.9rem;
  color: #7e6c58;
  border-top: 1px dashed #b6a484;
  padding-top: 1rem;
  margin-top: 3rem;
  font-family: "IM Fell English SC", serif;
}