.flavors-regular {
  font-family: "Flavors", cursive;
  font-weight: 400;
  font-style: normal;
}

.im-fell-great-primer-regular {
  font-family: "IM Fell Great Primer", serif;
  font-weight: 400;
  font-style: normal;
}

* { 
  box-sizing: border-box; 
}

:root{
  --bg:#fffaf2;
  --card:#ffffff;
  --ink:#222222;
  --accent:#e84545;       
  --accent-dark:#c93636;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-family: "IM Fell Great Primer", serif;
}

.container { 
  max-width:960px; 
  margin:auto; 
  padding:24px 16px; 
}

header{
  background: linear-gradient(135deg, var(--accent), #ff7b54);
  color:#fff;
  text-align:center;
  padding:40px 16px 36px;
  box-shadow: var(--shadow);
}

header h1 { 
  margin:0 0 8px; 
  font-size: clamp(28px, 4vw, 44px); 
}

header p { 
  margin:0; 
  font-size: clamp(14px, 2.2vw, 18px); 
  opacity:.95; 
}

.layout{
  display:grid;
  gap:24px;
  grid-template-columns: 1fr;          
}
@media (min-width: 900px) {
  .layout { 
    grid-template-columns: 2fr 1fr; 
  }
}

section, aside {
  background:var(--card);
  border-radius:16px;
  padding:20px;
  box-shadow: var(--shadow);
}

h2 {
  margin:0 0 10px;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height:1.25;
  font-family: "Flavors", cursive;
}

img.portrait {
  display:block;
  width:100%;
  max-width: 420px;     
  height:auto;
  margin:12px auto 14px;
  border-radius:14px;
  box-shadow: var(--shadow);
}

a.button {
  display:inline-block;
  padding:10px 14px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;
}

a.button:hover { 
  background:var(--accent-dark); 
}

a { 
  color:var(--accent); 
}

.lede { 
  font-style: italic; 
}

footer {
  text-align:center;
  color:#555;
  padding:28px 16px 40px;
  font-size:14px;
}