/* Homepage composition; shared navigation and footer live in site.css. */
.home #wrapper { margin: auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; }
.home .panel { min-width: 0; }
.home .banner { grid-column: 1 / -1; display: grid; align-items: center; }
.home .banner .image { position: relative; }
.home .banner .image::before { content: ''; position: absolute; }
.home .banner img { position: relative; display: block; width: 100%; object-fit: cover; }
.home #first { grid-column: 1 / -1; display: grid; border-top: 1px solid var(--line); }
.home .grid-icons { list-style: none; padding: 0; }
.home .grid-icons li { display: grid; place-items: center; }
.home .spotlight { position: relative; }
/* A personal, editorial homepage: warm paper, ink and a vermilion accent. */
.home {
  --paper: #f6f3eb;
  --ink: #292a26;
  --muted: #62625c;
  --line: #d7d3c8;
  --accent: #a93d22;
  --wash: #eae6dc;
  --text-title: clamp(2.75rem, 2rem + 3vw, 4.25rem);
  --column-space: clamp(1.5rem, 3vw, 3rem);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  background-image: radial-gradient(#66604412 .65px, transparent .65px);
  background-size: 6px 6px;
}
.home #wrapper { max-width: 1200px; column-gap: 1.5rem; }
.home .banner { grid-template-columns: 1.15fr 1fr; gap: var(--column-space); padding: var(--section-space) 0; }
.home .banner h1 { margin: 0 0 1.25rem; font: 600 var(--text-title)/1.1 'Segoe UI', sans-serif; letter-spacing: -.06em; }
.home .banner p { margin-bottom: 0; max-width: 44ch; font-size: var(--text-body); line-height: 1.7; }
.home .button.primary { border-radius: 100px; min-height: 50px; padding: .7rem 1.5rem; font-size: var(--text-small); }
.home .banner .image { width: min(85%, 340px); justify-self: center; padding: 0; transform: rotate(3deg); }
.home .banner .image::before { inset: 1.4rem -1.2rem -1.4rem 1.2rem; border: 0; background: #ddd58f; border-radius: 5px; transform: rotate(-7deg); }
.home .banner img { aspect-ratio: 4 / 4.7; border-radius: 5px; border: 9px solid #fffdf6; box-shadow: 0 12px 24px #403a2820; object-position: 25% 25%; }
.home #first { grid-template-columns: .7fr 1.3fr; gap: 1.25rem var(--column-space); padding: var(--section-space) 0; border-bottom: 0; align-items: start; }
.home #first .intro { display: contents; }
.home #first h2 { font: 500 var(--text-section)/1.2 'Segoe UI', sans-serif; letter-spacing: -.035em; max-width: none; }
.home #first p { font-size: var(--text-body); max-width: 65ch; line-height: 1.7; }
.home #first .inner { padding-left: 0; grid-column: 2; }
.home .grid-icons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.home .grid-icons li { width: 48px; height: 44px; aspect-ratio: auto; border: 1px solid var(--line); border-radius: 10px; font-size: 1.1rem; background: #fdfaf3; color: var(--ink); }
.home .grid-icons li:nth-child(2n) { transform: rotate(5deg); }
.home .grid-icons li:nth-child(2n + 1) { transform: rotate(-4deg); }
.home .spotlight { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: #ece9df; margin: 0; overflow: hidden; }
.home .spotlight[data-destination='blog'] { background: #e6e8db; }
.home .section-number { display: block; font: var(--text-small)/1.4 ui-monospace, monospace; color: var(--muted); margin-bottom: 1.5rem; min-height: 36px; display: flex; align-items: center; }
.home .spotlight .content { display: flex; flex-direction: column; flex: 1; }
.home .spotlight h2 { font: 500 var(--text-card)/1.2 'Segoe UI', sans-serif; letter-spacing: -.035em; }
.home .spotlight p { font-size: var(--text-body); max-width: 43ch; margin-bottom: 0; }
.home .spotlight .card-link { text-decoration: none; }
.home .spotlight .card-link::before { font-size: 1.1rem; content: '\2197'; font-family: 'Segoe UI', sans-serif; display: grid; place-items: center; position: absolute; right: 1.5rem; top: 1.5rem; width: 36px; height: 36px; border: 1px solid #babaae; border-radius: 50%; transition: transform .22s var(--ease-out), background .22s; }
.home .spotlight .card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.home .spotlight:focus-within { outline: 3px solid var(--accent); outline-offset: 4px; }
.home .spotlight .card-link:focus-visible { outline: 0; }
.home .button:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .home .spotlight:hover .card-link::before { background: var(--ink); color: var(--paper); transform: rotate(45deg); }
  .home .grid-icons li { transform-origin: 50% 75%; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
  .home .grid-icons li:nth-child(2n):hover { transform: rotate(-8deg); }
  .home .grid-icons li:nth-child(2n + 1):hover { transform: rotate(8deg); }
}

.home #first h2, .home .spotlight h2 { margin-bottom: .75rem; }
@media (max-width: 760px) {
  .home #wrapper { column-gap: 1rem; }
  .home #first { grid-template-columns: 1fr; gap: 1rem; }
  .home #first .inner { grid-column: 1; grid-row: auto; }
  .home #first h2 { margin: 0; }
  .home .spotlight { grid-column: auto; }
}
@media (max-width: 560px) {
  .home .banner { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 2.5rem; }
  .home .banner .image { width: min(75%, 280px); }
  .home .banner img { aspect-ratio: 1.1; }
  .home .spotlight { grid-column: 1 / -1; }
  .home .spotlight + .spotlight { margin-top: 1rem; }
  .home .grid-icons { gap: .5rem; }
  .home .grid-icons li { width: 42px; height: 40px; }
  }
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { transition: none !important; }
}