/* mcavoy.dev: the Scrapbook look (picked 2026-09-24). Kraft ground, paper cards, one sage accent. */
:root {
    --ground: #EFE7D8;
    --paper: #FFFDF8;
    --ink: #2B2620;
    --muted: #4A433A;
    --accent: #3F6B4E;
    --accent-deep: #2A4B36;
    --tan: #CFC4B0;
    --sage: #B9C7B4;
    --gold: #E8C98A;
    --shadow: 0 10px 28px rgba(43, 38, 32, 0.18);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 'Nunito Sans', system-ui, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; }
h1, h2 { font-family: 'DM Serif Display', serif; font-weight: 400; margin: 0; }
p { margin: 0; }

.page { max-width: 1280px; margin: 0 auto; padding: 40px 96px 56px; display: flex; flex-direction: column; gap: 64px; min-height: 100vh; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.wordmark { font-family: 'Caveat', cursive; font-size: 36px; font-weight: 700; color: var(--ink); }
.top nav { display: flex; gap: 32px; font-size: 16px; font-weight: 700; }
.top nav a { color: var(--ink); display: inline-flex; align-items: center; min-height: 44px; }
.top nav a:hover { color: var(--accent); }

main { display: flex; flex-direction: column; gap: 64px; }

.scrawl { font-family: 'Caveat', cursive; font-size: 30px; color: var(--accent); line-height: 1.1; }

.hero { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.hero h1 { font-size: clamp(56px, 8vw, 96px); line-height: 1; }
.lede { font-size: 20px; color: var(--muted); max-width: 32em; }
.pups { font-family: 'Caveat', cursive; font-size: 26px; line-height: 1.3; color: var(--ink); }
.pups span { color: var(--accent); }

.snaps { position: relative; height: 500px; }
.snap { position: absolute; margin: 0; background: var(--paper); box-shadow: var(--shadow); animation: drop 0.6s ease-out both; }
.snap figcaption { position: absolute; left: 0; right: 0; text-align: center; font-family: 'Caveat', cursive; }
.snap figcaption { bottom: 10px; font-size: 24px; }
.snap-a { left: 0; top: 30px; width: 250px; padding: 12px 12px 46px; --tilt: -6deg; transform: rotate(var(--tilt)); }
.snap-b { right: 0; top: 0; width: 240px; padding: 12px 12px 46px; --tilt: 5deg; transform: rotate(var(--tilt)); animation-delay: 0.12s; }
.snap-c { left: 110px; top: 190px; width: 250px; padding: 12px 12px 46px; --tilt: -2deg; transform: rotate(var(--tilt)); animation-delay: 0.24s; z-index: 1; }
.photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--tan); }

@keyframes drop {
    from { opacity: 0; transform: translateY(-14px) rotate(var(--tilt)); }
    to { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
}

.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.person { display: flex; gap: 22px; padding: 28px; background: var(--paper); border-radius: 18px; }
.person h2 { font-size: 32px; margin-bottom: 8px; }
.person p { color: var(--muted); }
.avatar { flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--tan); border: 4px solid var(--ground); }

.squad { display: flex; flex-direction: column; gap: 24px; }
.squad > h2 { font-size: 52px; }
.pup-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 8px 12px 0; }
.pup { margin: 0; padding: 14px 14px 56px; background: var(--paper); box-shadow: var(--shadow); position: relative; transform: rotate(-2.5deg); }
.pup:nth-child(2) { transform: rotate(2deg) translateY(10px); }
.pup:nth-child(3) { transform: rotate(-1deg); }
/* On the front page each pup is a shortcut to its row on /squad/. */
a.pup { display: block; color: var(--ink); transition: transform 0.25s ease; }
a.pup:hover { color: var(--ink); transform: rotate(0deg) translateY(-4px); }
.dog { scroll-margin-top: 24px; }
.dog-wall { margin-top: -8px; }
.dog-wall .wall { padding-top: 0; }
.pup figcaption, .pup-name { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: 'Caveat', cursive; font-size: 30px; line-height: 1; }
.pup figcaption span, .pup-name span { color: var(--accent); }

.things { display: flex; flex-direction: column; gap: 24px; }
.things > h2 { font-size: 52px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 20px; background: var(--paper); border-radius: 16px; color: var(--ink); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { color: var(--ink); transform: translateY(-4px) rotate(-0.6deg); box-shadow: var(--shadow); }
.card img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.card-name, .card-blurb, .card-go { padding: 0 6px; }
.card-name { font-family: 'DM Serif Display', serif; font-size: 25px; line-height: 1.2; }
.card-blurb { font-size: 15px; line-height: 1.5; color: var(--muted); }
.card-go { font-size: 15px; font-weight: 700; color: var(--accent); margin-top: auto; padding-top: 6px; }

.hello { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 36px 44px; background: var(--ink); border-radius: 22px; color: var(--ground); }
.hello .scrawl { color: var(--gold); }
.mail { font-family: 'DM Serif Display', serif; font-size: clamp(30px, 4.5vw, 48px); color: var(--paper); overflow-wrap: anywhere; }
.mail:hover { color: var(--gold); }
.copy { font-size: 14px; color: #C9BFAE; }

/* The front page's person cards link to the personal pages. */
a.person { color: var(--ink); transition: transform 0.25s ease, box-shadow 0.25s ease; }
a.person:hover { color: var(--ink); transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow); }
.person .card-go { display: inline-block; margin-top: 10px; padding: 0; }

/* Personal pages (keith.mcavoy.dev, emily.mcavoy.dev): same scrapbook, each with its own colours. */
.me-keith { --ground: #E4E9E1; --accent: #2F6B5A; --accent-deep: #1F4A3E; --tan: #C3CCBF; --gold: #A8D5C4; }
.me-emily { --ground: #F3E4D6; --accent: #B0533C; --accent-deep: #85392A; --tan: #DEC6B0; --gold: #F2C08E; }
.about { display: flex; flex-direction: column; gap: 16px; max-width: 46em; }
.about > h2, .latest > h2 { font-size: 52px; margin-bottom: 8px; }
.about p { font-size: 18px; color: var(--muted); }
.latest { display: flex; flex-direction: column; gap: 16px; }
.video { display: flex; flex-direction: column; gap: 8px; max-width: 560px; padding: 14px 14px 22px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); transform: rotate(-1deg); transition: transform 0.25s ease; }
.video:hover { color: var(--ink); transform: rotate(0deg) translateY(-3px); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tan); }
.video-title { font-family: 'DM Serif Display', serif; font-size: 25px; line-height: 1.25; padding: 4px 4px 0; }
.video .card-go { padding: 0 4px; }
.note { display: inline-block; font-family: 'Caveat', cursive; font-size: 28px; line-height: 1.3; color: var(--accent); background: var(--paper); padding: 14px 22px; border-radius: 4px; box-shadow: var(--shadow); transform: rotate(-1.5deg); }
.elsewhere { margin-top: 12px; font-size: 15px; font-weight: 700; }
.elsewhere a, .hello .copy a { color: var(--gold); }
.elsewhere a:hover, .hello .copy a:hover { color: var(--paper); }
.me .page, .me main { gap: 48px; }

/* Photo wall: polaroids, each at its own tilt. */
.wall-wrap { display: flex; flex-direction: column; gap: 24px; }
.wall-wrap > h2 { font-size: 52px; }
.wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 36px 40px; padding: 16px 8px 8px; }
.wall figure { --t: -2deg; position: relative; margin: 0; width: min(320px, 100%); padding: 12px 12px 46px; background: var(--paper); box-shadow: var(--shadow); transform: rotate(var(--t)); }
.wall figure:nth-child(3n+2) { --t: 2.5deg; transform: rotate(var(--t)) translateY(14px); }
.wall figure:nth-child(3n) { --t: -1deg; }
.wall img { width: 100%; height: auto; background: var(--tan); }
.wall figcaption { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-family: 'Caveat', cursive; font-size: 24px; line-height: 1; }

/* What people say: pinned handwritten notes, filled from quotes.txt. */
.said { display: flex; flex-direction: column; gap: 24px; }
.said > h2 { font-size: 52px; }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; padding: 8px 8px 0; }
.quote { --t: -1.5deg; margin: 0; padding: 22px 24px 20px; background: var(--paper); box-shadow: var(--shadow); transform: rotate(var(--t)); }
.quote:nth-child(3n+2) { --t: 1.5deg; }
.quote:nth-child(3n) { --t: -0.5deg; }
.quote blockquote { margin: 0; font-family: 'Caveat', cursive; font-size: 27px; line-height: 1.25; color: var(--ink); }
.quote figcaption { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--accent); }

/* The squad page (mcavoy.dev/squad/). */
.me-squad { --ground: #F1E6CF; --accent: #9A6A1F; --accent-deep: #6F4B14; --tan: #D9C7A4; --gold: #F0C979; }
.snap-wide { --tilt: 2deg; position: relative; margin: 0; padding: 14px 14px 52px; background: var(--paper); box-shadow: var(--shadow); transform: rotate(var(--tilt)); animation: drop 0.6s ease-out both; }
.snap-wide img { width: 100%; height: auto; background: var(--tan); }
.snap-wide figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: 'Caveat', cursive; font-size: 28px; line-height: 1; }
.dogs { display: flex; flex-direction: column; gap: 40px; }
.dog { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.dog:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) 300px; }
.dog:nth-of-type(even) .pup { order: 2; transform: rotate(2deg); }
.dog h2 { font-size: 44px; line-height: 1.1; }
.dog h2 span { font-family: 'Caveat', cursive; font-size: 34px; color: var(--accent); margin-left: 8px; }
.dog p { font-size: 18px; color: var(--muted); max-width: 32em; margin-top: 10px; }
.more { align-self: flex-start; font-weight: 700; font-size: 17px; }

@media (max-width: 1080px) {
    .page { padding: 32px 40px 48px; }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pup-row { gap: 24px; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .snaps { height: 500px; max-width: 520px; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .page { padding: 20px 16px 32px; gap: 44px; }
    main { gap: 44px; }
    .wordmark { font-size: 30px; }
    .top nav { gap: 18px; font-size: 15px; }
    .pups { font-size: 22px; }
    .snaps { height: 370px; }
    .snap-a, .snap-b, .snap-c { width: 170px; padding: 8px 8px 34px; }
    .snap figcaption { font-size: 19px; bottom: 6px; }
    .snap-wide { padding: 10px 10px 40px; }
    .snap-wide figcaption { font-size: 22px; bottom: 9px; }
    .snap-a { top: 20px; }
    .snap-c { left: 70px; top: 150px; width: 180px; }
    .people { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .person { flex-direction: column; gap: 14px; padding: 22px; }
    .avatar { width: 80px; height: 80px; }
    .things > h2, .squad > h2, .about > h2, .latest > h2, .wall-wrap > h2, .said > h2 { font-size: 40px; }
    .notes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .quote blockquote { font-size: 24px; }
    .me .page, .me main { gap: 36px; }
    .wall { gap: 28px; padding: 16px 12px 0; }
    .wall figure:nth-child(3n+2) { transform: rotate(var(--t)); }
    .dog, .dog:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dog .pup { width: min(300px, 100%); justify-self: center; }
    .dog:nth-of-type(even) .pup { order: 0; }
    .dog h2 { font-size: 36px; }
    .about p { font-size: 17px; }
    .note { font-size: 24px; }
    .video-title { font-size: 22px; }
    .pup-row { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 18px; }
    .pup { padding: 10px 10px 48px; }
    .pup figcaption, .pup-name { font-size: 26px; }
    .cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .card img { height: 180px; }
    .hello { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .snap, .snap-wide { animation: none; }
    .card, a.person, .video, a.pup { transition: none; }
    .card:hover, a.person:hover, .video:hover, a.pup:hover { transform: none; }
}