/* Locally hosted OFL fonts for the scrapbook design. */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/caveat-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/caveat-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-cyrillic-500-italic.woff2') format('woff2');
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --paper: #faf5e9; --ink: #70263a; --orange: #a72c47; --line: #dcd0c4;
  --drawn-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='m45 4 10 32 32-17-20 29 30 16-35 1 3 31-21-24-27 22 11-32L3 53l30-10Z' fill='none' stroke='%239a3551' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --drawn-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23cf83b2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M72 60C32-5 4 42 54 70 0 60 5 123 60 89 25 148 91 151 83 96 128 147 150 95 99 79 158 58 122 8 85 56 103-4 51 0 72 60Z'/%3E%3Cellipse cx='77' cy='77' rx='12' ry='15' transform='rotate(-17 77 77)'/%3E%3C/g%3E%3C/svg%3E");
}
body::before { opacity: .07; }
.page { max-width: 1400px; }
.header { border-bottom: 1px dashed #cdb8b5; }
.wordmark { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 500; line-height: .88; }
.brand-flower { display: block; width: 48px; height: 48px; background: url("assets/envelope-heart.svg") center / contain no-repeat; }
.brand-flower svg { visibility: hidden; }
.header-note { font: 600 23px 'Caveat', cursive; color: var(--ink); transform: rotate(-3deg); }
.hero { grid-template-columns: 1fr 1.05fr; min-height: 740px; padding: 38px 0 65px; gap: 10px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; color: #7d4a51; }
.hero h1 { font: 500 clamp(76px, 7.7vw, 112px)/.9 'Cormorant Garamond', Georgia, serif; letter-spacing: -4px; margin: 31px 0 35px; }
.own { display: inline-block; font: 600 1.12em/.85 'Caveat', cursive; transform: rotate(-6deg); color: #a62c4a; }
.own svg { bottom: -16px; stroke-width: 1.6; stroke: #ba81ad; }
.period { color: #ba81ad; }
.intro { font-size: 16px; color: #685456; line-height: 1.8; margin-top: 38px; }
.button { background: #7e223b; border-color: #7e223b; border-radius: 50% 44% 46% 48% / 12% 14% 16% 12%; }
.button:hover { background: #9e3552; }
.button-secondary { color: #7e223b; background: transparent; border-color: #bd929c; }
.button-secondary:hover { background: #efdae0; }
.small-note { color: #806169; font: 600 20px/1.3 'Caveat', cursive; max-width: 350px; }
.collage { height: auto; aspect-ratio: 620 / 680; margin: 0; }
.paper-art { display: block; position: relative; height: 100%; }
.paper-art img { display: block; width: 100%; height: auto; }
.art-note { position: absolute; left: 19%; top: 74%; font: 600 clamp(22px, 2.5vw, 35px)/.95 'Caveat', cursive; transform: rotate(-7deg); color: #8f2443; }
.art-caption { position: absolute; bottom: 0; left: 15%; font: 600 clamp(18px, 2vw, 27px) 'Caveat', cursive; color: #84506d; transform: rotate(-3deg); }
.ticker { border: 0; background: #eee9b5; padding: 20px 26px; transform: rotate(-1deg); font: 12px 'Courier New', monospace; }
.ticker i { display: block; width: 30px; height: 30px; flex-shrink: 0; background: var(--drawn-star) center / contain no-repeat; }
.ticker svg { display: none; }
.paper-manifesto { display: grid; grid-template-columns: 1fr 1.35fr 1fr; align-items: center; gap: 35px; position: relative; padding: 70px 20px 55px; border-bottom: 1px solid var(--line); }
.manifesto-label { font: 600 26px 'Caveat', cursive; transform: rotate(-6deg); max-width: 150px; color: #956a85; }
.paper-manifesto p { font: 500 47px/.95 'Cormorant Garamond', Georgia, serif; margin: 0; letter-spacing: -1px; }
.paper-manifesto em { font: 600 52px/1.2 'Caveat', cursive; color: #ab2d47; }
.manifesto-note { font: 12px/1.7 'Courier New', monospace; color: #78545e; }
.manifesto-doodle { position: absolute; width: 74px; height: 74px; right: 6%; top: 0; transform: rotate(13deg); fill: #f2d5e1; stroke: #ac5a78; stroke-width: 1.5; }
.about { padding-top: 65px; }
h2 { font: 500 52px/1 'Cormorant Garamond', Georgia, serif; letter-spacing: -1.5px; }
h2 span { font-family: 'Cormorant Garamond', Georgia, serif; }
.about-copy { color: #685456; }
.handwritten { font: 600 29px/1.2 'Caveat', cursive; color: #9e3552; transform: rotate(-2deg); }
.possibilities { gap: 28px; padding: 24px 5px 90px; }
.card { box-shadow: 2px 5px 5px #6643330d; padding-top: 36px; }
.card::before { content: ''; position: absolute; top: -13px; left: calc(50% - 36px); width: 72px; height: 27px; background: #cab99f80; clip-path: polygon(0 3%,97% 0,100% 95%,2% 100%,6% 75%,0 50%); transform: rotate(6deg); }
.card-yellow { background: #efecb8; transform: rotate(-2deg); }
.card-pink { background: #f0ccda; transform: rotate(2deg); }
.card-green { background: #e4dcea; transform: rotate(-1deg); }
.card-number { font: 600 28px 'Caveat', cursive; color: #936477; }
h3 { font: 500 33px/1 'Cormorant Garamond', Georgia, serif; margin-top: 10px; }
.card p { font-size: 14px; color: #674c55; }
.card-green .card-icon { background: var(--drawn-star) left center / 65px no-repeat; }
.card-green .card-icon svg { visibility: hidden; }
.card-pink .card-icon { background: var(--drawn-flower) left center / 75px no-repeat; }
.card-pink .card-icon i { display: none; }
.contact { background: #f1d3df; border: none; margin-bottom: 45px; padding: 70px 35px; isolation: isolate; }
.contact::before, .contact::after { content: ''; position: absolute; width: 100px; height: 100px; pointer-events: none; z-index: -1; }
.contact::before { background: var(--drawn-star) center / contain no-repeat; top: 30px; left: 25px; transform: rotate(-10deg); }
.contact::after { background: var(--drawn-flower) center / contain no-repeat; right: 20px; bottom: 20px; }
.contact-star { display: none; }
.contact h2 { font: italic 500 72px/.95 'Cormorant Garamond', Georgia, serif; letter-spacing: -2px; }
.contact > p:not(.eyebrow) { color: #72535e; }
footer { border-top: 1px dashed #cdb8b5; color: #806169; }
.footer-brand { font: 600 25px 'Caveat', cursive; }
@media (max-width: 1100px) {
  .hero h1 { font-size: 86px; }
  .hero { min-height: 660px; }
  .intro br { display: none; }
  .paper-manifesto { gap: 20px; }
  .paper-manifesto p { font-size: 40px; }
  .paper-manifesto em { font-size: 43px; }
  h2 { font-size: 44px; }
}
@media (max-width: 700px) {
  .hero { grid-template-columns: 1fr; padding-top: 30px; gap: 0; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(72px, 16vw, 105px); margin-top: 25px; letter-spacing: -3px; }
  .intro { font-size: 15px; }
  .small-note { font-size: 19px; }
  .collage { max-width: 470px; margin: 5px auto 0; }
  .art-note { font-size: clamp(23px, 5.5vw, 34px); }
  .art-caption { font-size: clamp(18px, 4.5vw, 24px); }
  .ticker { font-size: 10px; padding: 15px; gap: 8px 12px; }
  .ticker i { width: 23px; height: 23px; }
  .ticker i:last-child { display: none; }
  .paper-manifesto { grid-template-columns: 1fr; gap: 17px; padding: 45px 15px 35px; }
  .manifesto-label { max-width: none; font-size: 24px; }
  .paper-manifesto p { font-size: 44px; }
  .paper-manifesto em { font-size: 47px; }
  .manifesto-doodle { top: 24px; right: 0; width: 58px; height: 58px; }
  .about { padding-top: 40px; }
  h2 { font-size: 42px; }
  .possibilities { gap: 30px; padding: 20px 5px 50px; }
  .contact { padding: 70px 15px 45px; }
  .contact h2 { font-size: clamp(36px, 9.5vw, 54px); letter-spacing: -1px; }
  .contact::before { width: 50px; height: 50px; left: 14px; top: 10px; }
  .contact::after { width: 50px; height: 50px; right: 8px; bottom: 8px; }
  .socials .button { max-width: 100%; gap: 16px; padding-inline: 16px; }
}
@media (max-width: 380px) {
  .header { gap: 10px; }
  .wordmark { gap: 8px; font-size: 16px; }
  .brand-flower { width: 38px; height: 38px; flex-shrink: 0; }
  nav { flex-shrink: 0; gap: 16px; }
  .hero h1 { font-size: 64px; }
  .paper-manifesto em { font-size: 36px; }
}

.hero > *, .about > * { min-width: 0; }