/* Brescia Story (story.html) as a magazine: masthead, one lead feature, an asymmetric grid, the tools. */
.st { --dusk: #1d1916; --glow: #e9b89f; padding-top: var(--header-h); }
.st h2 em, .st-title em { font-style: italic; color: var(--terracotta); }
.st .mono { color: var(--terracotta); }

.st-mast { padding: clamp(40px, 6vw, 90px) var(--gutter) clamp(30px, 4vw, 60px); border-bottom: 1px solid var(--ink); }
.st-mast-line { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--mute) !important; }
.st-title { margin: clamp(10px, 2vw, 26px) 0 10px; font-family: var(--serif); font-weight: 400; font-size: clamp(72px, 15vw, 240px); line-height: 0.86; letter-spacing: -0.045em; }
.st-mast .lede { max-width: 58ch; }

.st-h { display: block; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; }
.st-p { display: block; color: var(--ink-soft); line-height: 1.6; }

.st-feature { padding: clamp(30px, 4vw, 60px) var(--gutter); }
.st-lead { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 60px); align-items: end; text-decoration: none; }
.st-lead-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.st-lead-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.st-lead:hover .st-lead-media img { transform: scale(1.05); }
.st-lead-copy { display: grid; gap: 16px; padding-bottom: 8px; }
.st-lead .st-h { font-size: clamp(36px, 4.6vw, 72px); }
.st-lead .st-p { font-size: 17px; max-width: 40ch; }
.st-lead .text-link { justify-self: start; }

.st-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 36px); padding: clamp(30px, 4vw, 60px) var(--gutter) clamp(70px, 9vw, 130px); border-top: 1px solid var(--line); }
.st-card { display: grid; gap: 10px; align-content: start; text-decoration: none; }
.st-card-media { display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 8px; }
.st-card-tall .st-card-media { aspect-ratio: 4 / 5; }
.st-card:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); }
.st-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.st-card:hover .st-card-media img { transform: scale(1.06); }
.st-card .st-h { font-size: clamp(24px, 2.2vw, 34px); transition: color 0.3s; }
.st-card:hover .st-h { color: var(--terracotta); }
.st-card .st-p { font-size: 15px; }

.st-tools { padding: clamp(70px, 9vw, 130px) var(--gutter); background: var(--dusk); color: #fff; }
.st-tools .mono { color: var(--glow); }
.st-tools h2 { margin: 12px 0 clamp(26px, 3vw, 44px); font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 76px); line-height: 1; }
.st-tools h2 em { color: var(--glow); }
.st-tool-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-tool { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; gap: 6px; min-height: clamp(260px, 26vw, 380px); padding: 20px; color: #fff; text-decoration: none; }
.st-tool::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tex) center / cover; transition: transform 1.4s var(--ease); }
.st-tool::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, 0.1) 30%, rgba(14, 12, 10, 0.82)); }
.st-tool:hover::before { transform: scale(1.08); }
.st-tool strong { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; max-width: 14ch; }
.st-tool i { position: absolute; top: 16px; right: 18px; font-style: normal; font-size: 22px; transition: transform 0.4s var(--ease); }
.st-tool:hover i { transform: translateX(4px); }

.st-cta { display: grid; justify-items: start; gap: 14px; padding: clamp(70px, 9vw, 130px) var(--gutter); background: var(--terracotta); color: #fff; }
.st-cta .mono { color: rgba(255, 255, 255, 0.82); }
.st-cta h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 88px); line-height: 1; max-width: 16ch; }
.st-cta h2 em { color: #fff; }
.st-cta p { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, 0.86); }
.st-cta .btn-light { color: var(--terracotta); margin-top: 10px; }

@media (max-width: 900px) {
  .st-lead { grid-template-columns: 1fr; }
  .st-grid { grid-template-columns: 1fr 1fr; }
  .st-card-tall { grid-column: 1 / -1; }
  .st-card-tall .st-card-media { aspect-ratio: 16 / 10; }
  .st-card:nth-child(2) { margin-top: 0; }
  .st-tool-row { grid-template-columns: 1fr; }
  .st-tool { min-height: 220px; }
}
@media (max-width: 600px) {
  .st-mast-line span:nth-child(2) { display: none; }
  .st-grid { grid-template-columns: 1fr; }
}