/* styles.css
   Classic, print-inspired palette:
   - calm yellow:    --yellow
   - grey-blue:      --blue
   - relaxed pink:   --pink
   - off-white bg:   --paper
*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,700;1,300&family=Playfair+Display:wght@400;700&display=swap');

:root{
  --paper: #f7f2eb;        /* clean off-white */
  --ink: #222;             /* main text color */
  --yellow: #e8d89e;       /* calm yellow */
  --blue: #8ea4b3;         /* grey-blue */
  --pink: #d9b2b8;         /* relaxed pink */
  --muted: #6b6b6b;        /* secondary text */
  --max-width: 1100px;
  --content-padding: 20px;
  --border-radius: 6px;
  --gutter: 24px;
}

/* Base reset + typography */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: "Merriweather", Georgia, serif;
  color:var(--ink);
  background: var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.site-logo {
  height: 48px;         /* control visual size */
  width: auto;          /* maintain aspect ratio */
  display: block;
  user-select: none;
}
@media (max-width:600px){
  .site-logo { height: 36px; }
}

/* visually-hidden utility */
.sr-only {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* Header (vanishing on scroll) */
.site-header{
  position: sticky;
  top:0;
  z-index: 40;
  backdrop-filter: blur(6px);
  background: rgba(247,243,236,0.85); /* a subtle translucent paper */
  border-bottom: 1px solid rgba(0,0,0,0.04);
  transition: transform 240ms ease, box-shadow 200ms ease;
}
.site-header.hidden { transform: translateY(-110%); box-shadow: none; }
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width: var(--max-width);
  margin:0 auto;
  padding: 12px var(--content-padding);
}
.brand .site-title {
  margin:0;
  font-family: "Playfair Display", Georgia, serif;
  font-size:1.15rem;
  letter-spacing:0.02em;
}
.brand .site-tag {
  margin:2px 0 0;
  font-size:0.8rem;
  color:var(--muted);
}

/* Navigation */
.site-nav a {
  margin-left:14px;
  text-decoration:none;
  color:var(--muted);
  font-weight:600;
  font-size:0.95rem;
}
.site-nav a:hover { color:var(--ink); }

/* Main container */
.container {
  max-width: var(--max-width);
  margin: 36px auto;
  padding: 0 var(--content-padding);
}

/* Typographic hierarchy */
h1, h2, h3 {
  margin: 0 0 10px 0;
  font-family: "Playfair Display", Georgia, serif;
  color: var(--ink);
}
.site-title { font-size:1.2rem; }
.subheading { font-size:1.25rem; color: var(--blue); }

/* Text blocks and optional border */
.text-block {
  background: transparent;
  padding: 12px 0;
  color: var(--ink);
}
.text-block.bordered {
  border-left: 6px solid var(--yellow);
  padding: 12px 16px;
  margin: 8px 0;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Alternate bordered style for emphasis */
.subheading.bordered {
  display:inline-block;
  padding: 6px 10px;
  border: 1px solid var(--pink);
  background: rgba(217,178,184,0.05);
  border-radius: 4px;
}

/* Two-column layout */
.two-column {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--gutter);
  align-items: start;
}

/* Grid for gallery */
.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.grid-item { text-align:left; }
.grid-item figcaption {
  margin-top: 8px;
  font-size:0.9rem;
  color:var(--muted);
}

/* Image framing */
.framed {
  width:100%;
  height:auto;
  display:block;
  border: 6px solid var(--blue); /* default border color */
  padding: 2px; /* small inner padding to mimic print photo */
  background: white;
  object-fit:cover;
  box-shadow: 0 6px 18px rgba(20,20,20,0.04);
  border-radius: 2px;
}

/* Make some images use the pink border for variety (class usage) */
.framed.pink { border-color: var(--pink); }
.framed.yellow { border-color: var(--yellow); }

/* Responsive tweaks */
@media (max-width:1000px){
  .two-column { grid-template-columns: 1fr; }
  .site-nav { display:none; } /* simplify header on small screens */
  .header-inner { justify-content: flex-start; gap: 12px; }
}
@media (max-width:600px){
  .header-inner { padding: 8px 12px; }
  .subheading { font-size:1.05rem; }
  .site-title { font-size:1rem; }
}