:root {
  color-scheme: light;
  --paper: #fbf6eb;
  --forest: #193e2a;
  --ink: #364839;
  --rule: #d7d4bd;
  --serif: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--forest); font: 16px/1.5 system-ui, sans-serif }
a { color: inherit; text-decoration: none }
a:focus-visible { outline: 3px solid #864513; outline-offset: 5px }
.wrap { width: min(1180px, 89%); margin-inline: auto }
.skip { position: absolute; left: 1rem; top: -5rem; z-index: 2; padding: .8rem; background: white }
.skip:focus { top: .4rem }
.bar, nav, footer, .section-head, .action { display: flex; align-items: center }
.bar { justify-content: space-between; min-height: 84px; border-bottom: 1px solid var(--rule) }
.bar img, footer img { width: 142px; height: auto; display: block }
nav { gap: clamp(12px,3vw,38px); font-weight: 650; font-size: 14px }
nav a { padding: 10px 0 }
nav a:hover { text-decoration: underline; text-underline-offset: 4px }
.nav-btn { border: 1px solid #8e9c84; border-radius: 30px; padding: 9px 17px }
.nav-btn span { margin-left: 6px }
.intro { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: clamp(30px,5vw,80px); padding-block: clamp(62px,7vw,105px) }
h1,h2,h3,p,figure { margin: 0 }
.label { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .17em }
.label i { color: #a5631d; font: 27px/1 var(--serif) }
h1,h2,h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.055em }
h1 { font-size: clamp(55px,6.7vw,97px); line-height: .99; margin: 19px 0 22px }
h1 em { color: #506746; font-weight: 400 }
.summary { max-width: 400px; color: var(--ink); font-size: clamp(16px,1.4vw,19px); line-height: 1.65 }
.primary { display: inline-flex; gap: 20px; align-items: center; padding: 12px 15px 12px 22px; margin-top: 26px; background: var(--forest); color: white; font-weight: 650; border-radius: 32px }
.primary span { background: #ffffff20; border-radius: 50%; width: 29px; height: 29px; text-align: center; line-height: 28px }
.primary:hover { background: #315539 }
.picture { position: relative; padding: 12px 12px 0; background: #fffdf5; border: 1px solid #dedac9; box-shadow: 3px 8px 0 #e7e1ce; rotate: 2deg }
.picture::before { content: ''; position: absolute; left: 37%; top: -14px; width: 24%; height: 27px; background: repeating-linear-gradient(118deg,#dcb96eb5 0 5px,#ead194bb 5px 8px); rotate: -6deg; clip-path: polygon(2% 0,100% 0,98% 23%,100% 49%,98% 69%,100% 100%,0 100%,2% 73%,0 53%,2% 32%,0 15%) }
.print img { display: block; width: 100%; height: auto }
figcaption { font: italic clamp(14px,1.4vw,19px)/1.2 var(--serif); display: flex; justify-content: space-between; align-items: center; padding: 12px 6px; color: #535e47 }
figcaption span { color: #987039 }
.elsewhere { padding-block: clamp(46px,6vw,85px); background: #f1eedf; border-block: 1px solid var(--rule) }
.section-head { justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 26px }
h2 { font-size: clamp(38px,4.2vw,64px); line-height: 1.08 }
h2 span { color: #ad7027 }
.section-head p { color: var(--ink); font-size: 15px }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,2vw,24px) }
.card { display: flex; flex-direction: column; border: 1px solid #30452f24; border-radius: 18px; padding: clamp(20px,2.2vw,32px); transition: box-shadow .2s }
.card:hover { box-shadow: 0 5px 0 #25372424 }
.library { background: #e0e8d5 }.instagram { background: #f5dfd2 }.threads { background: #f2e5bc }
.card img { object-fit: contain; object-position: left center; margin-bottom: 16px }
h3 { font-size: 35px; line-height: 1.2 }
.card p { max-width: 30ch; margin: 8px 0 22px; color: var(--ink) }
.action { margin-top: auto; border-top: 1px solid #30452f35; justify-content: space-between; padding-top: 13px; gap: 10px; font-weight: 650; font-size: 14px }
.action b { font-size: 19px }
footer { gap: 18px; padding-block: 30px; flex-wrap: wrap }
footer img { width: 108px }
footer p { font: italic 16px var(--serif) }
footer small { margin-left: auto }
@media(max-width:760px) {
 .intro { grid-template-columns: 1fr; gap: 42px; padding-block: 40px 46px }
 .picture { width: min(97%,520px); justify-self: center }
 .cards { grid-template-columns: 1fr }
 .card { display: grid; grid-template-columns: 1fr 72px; column-gap: 13px }
 .card img { grid-column: 2; grid-row: 1/3; width: 72px; height: 65px; align-self: center; margin: 0 }
 .card p { grid-column: 1; max-width: 42ch; margin-bottom: 17px }
 .action { grid-column: 1/-1 }
 .section-head { align-items: start; flex-direction: column; gap: 8px }
 .bar { min-height: 68px }.bar img { width: 108px }
}
@media(max-width:420px) {
 .wrap { width: 90% } nav { gap: 10px; font-size: 12px }.nav-btn { padding-inline: 10px }
 footer { column-gap: 10px } footer small { width: 100% }
}
@media(prefers-reduced-motion:reduce) { .card { transition: none } }