:root {
  --paper: #f3f2ef;
  --ink: #23211e;
  --muted: #6f6a62;
  --amber: #a8741f;
  --hair: rgba(35, 33, 30, .16);
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --side: 0px; /* room reserved on the right for the tree */
}
@media (min-width: 1000px) { :root { --side: 27vw; } }

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; position: relative;
  font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; font-weight: 400;
  color: var(--ink); background: var(--paper);
}
a { color: var(--amber); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; }

/* the tree: a photograph whose pale sky melts into the page */
.tree { position: fixed; top: 0; right: -9vw; height: 100vh; pointer-events: none; mix-blend-mode: multiply; }
.tree img { height: 100%; width: auto; display: block; filter: contrast(1.3) brightness(1.1); }
@media (max-width: 999px) { .tree { opacity: .16; right: -30vw; } }

/* small leaves hanging off the branches */
.drift { position: absolute; display: block; width: 3.2rem; height: 3.2rem; mix-blend-mode: multiply;
  background: url("img/leaf.jpg") 43.8% 71.6% / 280% auto no-repeat; transform-origin: 50% 0;
  animation: sway 7s ease-in-out infinite alternate; }
.d1 { left: 4%;  top: 31%; transform: rotate(-24deg); animation-delay: -1s; }
.d2 { left: 17%; top: 48%; width: 2.4rem; height: 2.4rem; transform: rotate(18deg); animation-delay: -3s; }
.d3 { left: 9%;  top: 66%; width: 2.8rem; height: 2.8rem; transform: rotate(-8deg); animation-delay: -5s; }
.d4 { left: 33%; top: 20%; width: 2.2rem; height: 2.2rem; transform: rotate(30deg); animation-delay: -2s; }
.d5 { left: 41%; top: 74%; width: 2rem; height: 2rem; transform: rotate(-35deg); animation-delay: -4s; }
@keyframes sway { to { rotate: 9deg; translate: 0 .35rem; } }
@media (prefers-reduced-motion: reduce) { .drift, .card { animation: none; } * { transition: none !important; } }

.page { position: relative; padding-right: var(--side); } /* no z-index: keeps multiply blending against the page colour */

/* splash: the cropped leaf */
.hero { position: relative; max-width: 62rem; margin: 0 auto; padding: 1.5rem 1.25rem 0; }
.leaf { width: 100%; aspect-ratio: 16 / 8.5; mix-blend-mode: multiply;
  background: url("img/leaf.jpg") 4% 68% / 160% auto no-repeat; }
.title { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-58%); max-width: min(22rem, 40%); }
.title h1 { margin: 0; font-weight: 300; font-style: italic; font-size: clamp(2.6rem, 6.5vw, 5rem);
  letter-spacing: .02em; line-height: 1; }
.tag { margin: .8rem 0 0; color: var(--amber); letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; }
.lede { color: var(--muted); font-style: italic; font-size: 1.2rem; margin: .8rem 0 0; }
@media (max-width: 700px) {
  .title { position: static; transform: none; max-width: none; padding-top: .5rem; }
  .leaf { aspect-ratio: 16 / 10; background-size: 190% auto; background-position: 30% 68%; }
}

/* filters */
.filters { max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; padding: 1.2rem 1.25rem 0; }
.filters button {
  font: inherit; font-size: 1.05rem; letter-spacing: .06em; color: var(--muted);
  background: transparent; border: 0; border-bottom: 1px solid transparent; padding: .25rem 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; transition: color .25s, border-color .25s;
}
.filters button svg { width: 1.05rem; height: 1.05rem; }
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--amber); }

/* listing */
main { max-width: 62rem; margin: 0 auto; padding: 0 1.25rem 2rem; }
.year { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0 1.2rem; color: var(--muted);
  font-weight: 400; font-size: .9rem; letter-spacing: .3em; }
.year::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column; color: inherit;
  background: var(--paper); border: 1px solid var(--hair); padding: .55rem;
  transition: transform .35s ease, border-color .35s;
  animation: rise .6s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.card:hover, .card:focus-visible { transform: translateY(-3px); border-color: var(--amber); }
.thumb { aspect-ratio: 16 / 10; overflow: hidden; background: #e9e6df; }
.thumb img, .thumb svg { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s ease; }
.card:hover .thumb img, .card:hover .thumb svg { transform: scale(1.04); }
.body { padding: .85rem .45rem .45rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.meta { display: flex; align-items: center; gap: .45rem; color: var(--amber); font-size: .8rem;
  letter-spacing: .2em; text-transform: uppercase; }
.meta svg { width: 1rem; height: 1rem; }
.meta .when { margin-left: auto; color: var(--muted); letter-spacing: .08em; }
.card h2 { margin: 0; font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.card p { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.4; }
.tags { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  font-size: .9rem; font-style: italic; color: var(--muted); }
.badge { position: absolute; top: 1rem; right: 1rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); padding: .1rem .55rem; }
.empty { color: var(--muted); font-style: italic; padding: 3rem 0; }

footer { max-width: 62rem; margin: 0 auto; color: var(--muted); font-size: .95rem; letter-spacing: .1em; padding: 1rem 1.25rem 3rem; }
footer p { margin: 0; border-top: 1px solid var(--hair); padding-top: 1rem; }

/* project sub-pages */
.prose { max-width: 40rem; margin: 0 auto; padding: 3rem 1.25rem; }
.prose h1 { font-weight: 300; font-style: italic; font-size: 2.8rem; margin: .5rem 0 1rem; }
.back { font-size: .95rem; letter-spacing: .1em; }