@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root { --paper:#fff; --ink:#21483a; --green:#287844; --yellow:#f2c744; --display:'Instrument Serif',Georgia,serif; font-family:'DM Sans',Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; }
a:focus-visible { outline:2px solid var(--green); outline-offset:5px; }
img { display:block; max-width:100%; }
h1,h2,h3,p,figure { margin:0; }
.wrap { max-width:1280px; margin:auto; padding:0 clamp(18px,5vw,70px); }
.header { display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:22px 0; }
.brand { font:34px/1 var(--display); text-decoration:none; white-space:nowrap; }
.brand i { color:var(--green); }
.links,.languages { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.links { justify-content:center; }
.languages { gap:10px; }
.links a,.languages a { text-decoration:none; font-size:13px; font-weight:700; padding:4px 0; }
.links a:hover,.languages a:hover,a[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:6px; }
.hero { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,6vw,90px); align-items:center; padding:clamp(22px,5vw,72px) 0 42px; }
.cover { text-align:center; }
.cover .flowers { width:110px; height:60px; object-fit:contain; margin:0 auto 12px; }
.eyebrow,.date { text-transform:uppercase; letter-spacing:.13em; font-size:13px; font-weight:700; }
h1 { font:400 clamp(56px,8vw,115px)/.89 var(--display); letter-spacing:-.025em; }
.cover h1 { margin:14px 0 22px; }
.cover h1 span { display:block; }
.cover h1 i { color:var(--green); font-size:.68em; }
.place { font-size:15px; margin:7px 0 0; }
.portrait img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; border-radius:50% 48% 5% 5% / 18% 18% 4% 4%; }
.countdown { display:flex; justify-content:center; gap:18px; margin:22px 0; min-height:46px; font-variant-numeric:tabular-nums; }
.countdown span { display:grid; min-width:42px; }
.countdown strong { font:34px/1 var(--display); }
.countdown small { font-size:11px; }
.button { display:inline-flex; align-items:center; gap:10px; background:var(--yellow); color:#1b352a; font-weight:700; padding:12px 20px; border-radius:30px; text-decoration:none; font-size:14px; }
.button:hover { background:#ffdb66; }
.foot { padding:20px 0; font-size:12px; }
.detail { display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,7vw,95px); padding:clamp(28px,5vw,72px) 0 34px; }
.detail h1 { font-size:clamp(54px,7vw,93px); }
.detail h2 { font:38px/1 var(--display); }
.lede { font-size:18px; line-height:1.6; margin:22px 0; max-width:48ch; }
.row { display:grid; grid-template-columns:minmax(105px,1fr) 2fr; gap:16px; margin:20px 0; }
.row h3 { font:25px/1.1 var(--display); }
.row p { line-height:1.5; }
.aside .flowers { width:145px; margin:0 auto 20px; }
.lodge { width:100%; border-radius:6% 6% 4% 4%; }
.schedule { margin:35px 0; }
.day { margin:0 0 28px; }
.day ol { margin:12px 0 0 8px; padding:0 0 0 18px; border-left:2px solid var(--green); list-style:none; }
.day li { position:relative; display:grid; grid-template-columns:minmax(90px,1fr) 1.7fr 56px; gap:12px; align-items:center; min-height:56px; }
.day li::before { content:''; position:absolute; left:-23px; width:9px; height:9px; background:var(--yellow); border-radius:50%; }
.time { font-weight:700; font-size:13px; }
.tips { padding:8px 0; }
.sketch { display:block; width:min(100%,280px); margin:8px auto; background-image:url('/sketches.jpg'); background-repeat:no-repeat; mix-blend-mode:multiply; }
/* Each window isolates a single drawing on the 1752 × 897 sheet. */
.sketch.drinks { aspect-ratio:310/240; background-size:565.1613% 373.7500%; background-position:48.5437% 13.3942%; }
.sketch.camera { aspect-ratio:300/198; background-size:584.0000% 453.0303%; background-position:70.5234% 16.1660%; }
.sketch.boat { aspect-ratio:369/188; background-size:474.7967% 477.1277%; background-position:97.9031% 17.6305%; }
.sketch.rings { aspect-ratio:250/149; background-size:700.8000% 602.0134%; background-position:46.8708% 57.7540%; }
.sketch.route { aspect-ratio:359/204; background-size:488.0223% 439.7059%; background-position:71.4286% 51.9481%; }
.sketch.yurt { aspect-ratio:360/245; background-size:486.6667% 366.1224%; background-position:98.4195% 54.2945%; }
.sketch.envelope { aspect-ratio:248/224; background-size:706.4516% 400.4464%; background-position:46.6755% 95.9881%; }
.sketch.coffee { aspect-ratio:320/196; background-size:547.5000% 457.6531%; background-position:69.8324% 95.8631%; }
.sketch.luggage { aspect-ratio:352/256; background-size:497.7273% 350.3906%; background-position:97.5000% 95.9438%; }
@media(max-width:780px) {
  .header { grid-template-columns:1fr auto; gap:8px; padding:14px 0; }
  .header .languages { grid-row:1; grid-column:2; }
  .links { grid-column:1/-1; justify-content:flex-start; gap:6px 13px; }
  .hero { gap:22px; }
}
@media(max-width:610px) {
  .hero,.detail { grid-template-columns:1fr; }
  .hero { padding-top:18px; }
  .portrait { max-width:490px; }
  .detail .aside .flowers { display:none; }
  .detail .aside .sketch { width:145px; }
  .day li { grid-template-columns:88px minmax(0,1fr) 46px; gap:8px; }
  .day .sketch { width:46px; }
  .row { grid-template-columns:92px 1fr; gap:10px; }
}

.story { max-width:940px; margin:0 auto; padding:clamp(35px,7vw,94px) 0 45px; }
.story-heading { text-align:center; margin-bottom:clamp(35px,8vw,92px); }
.story-timeline { list-style:none; position:relative; margin:0; padding:0; }
.story-timeline::before { content:''; position:absolute; inset:0 auto 0 50%; width:1px; background:#c3d4be; }
.story-chapter { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,8vw,125px); align-items:center; min-height:clamp(180px,29vw,300px); padding:22px 0; }
.story-chapter:nth-child(even) .story-copy { grid-column:2; grid-row:1; }
.story-chapter:nth-child(even) .story-drawing { grid-column:1; grid-row:1; }
.story-copy { min-width:0; overflow-wrap:anywhere; }
.story-chapter:nth-child(odd) .story-copy { text-align:right; }
.story-chapter:nth-child(odd) .timeline-description { margin-left:auto; }
.story-drawing { min-width:0; }
.story-drawing .sketch { width:min(100%,210px); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .story-chapter > div { animation:story-enter linear both; animation-timeline:view(); animation-range:entry 0% entry 85%; }
  }
}
@keyframes story-enter { from { opacity:.15; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* The floral detail belongs to the shared header, with space around the content. */
.header .brand { position:relative; }
.header .brand::after { content:''; display:inline-block; width:32px; height:24px; margin-left:7px; background:url('/flowers.png') center/contain no-repeat; vertical-align:middle; }
.detail.program { display:block; max-width:850px; margin:auto; }
.program h1 { text-align:center; }

.program-day { margin:clamp(36px,7vw,85px) 0; }
.program .program-day > h2 { text-align:center; font-size:clamp(34px,6vw,64px); margin-bottom:24px; }
.timeline-heart { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--green); background:var(--paper); padding:4px; font-size:17px; line-height:1; }
.timeline-title { font:400 clamp(30px,5vw,54px)/.98 var(--display); margin:8px 0 10px; }
.story-copy .timeline-description { line-height:1.6; max-width:40ch; }
.program .story-chapter { min-height:clamp(115px,17vw,200px); }
.program .story-drawing .sketch,.program .moment-art { width:min(100%,152px); margin:0 auto; }
@media (max-width:610px) {
  .story-chapter { gap:clamp(24px,5.5vw,34px); min-height:0; padding:24px 0; }
  .timeline-title { font-size:clamp(24px,5.5vw,34px); line-height:1.05; }
  .story-copy .eyebrow { font-size:clamp(10px,2.3vw,13px); letter-spacing:.08em; }
  .story-copy .timeline-description { font-size:clamp(.875rem,2.6vw,1rem); line-height:1.5; }
  .timeline-heart { padding:3px; font-size:14px; }
}

.faq { margin:clamp(42px,7vw,82px) auto 0; max-width:680px; }
.faq h2 { margin-bottom:20px; }
.faq details { border-top:1px solid #cfdbcb; }
.faq details:last-child { border-bottom:1px solid #cfdbcb; }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 0; font-weight:700; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; display:grid; place-items:center; flex:0 0 28px; height:28px; color:var(--ink); background:#f9edb9; border-radius:50%; font-size:19px; font-weight:400; }
.faq details[open] summary::after { content:'−'; }
.faq summary:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
.faq details p { max-width:60ch; padding:0 36px 18px 0; line-height:1.55; }

.place-page { padding:clamp(32px,6vw,80px) 0 42px; }
.place-page h1 { font-size:clamp(52px,7vw,91px); line-height:.95; margin-top:10px; }
.place-page h2 { font:clamp(35px,4.6vw,56px)/1 var(--display); }
.place-page h3 { font:31px/1.1 var(--display); margin-bottom:10px; }
.place-page address { font-style:normal; margin:0 0 20px; line-height:1.55; }
.place-lead { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:clamp(24px,6vw,84px); }
.place-photo img { width:100%; aspect-ratio:1.45; object-fit:cover; border-radius:47% 47% 5% 5% / 18% 18% 5% 5%; }
.travel { margin-top:clamp(40px,7vw,85px); background:#eef3e9; border-radius:34px 50px 28px 42px; padding:clamp(22px,4vw,48px); }
.travel-modes { display:grid; grid-template-columns:2fr 1fr; gap:clamp(24px,6vw,70px); margin-top:20px; }
.travel-modes p,.stay-option p { line-height:1.55; max-width:54ch; }
.journey { list-style:none; padding:0; margin:18px 0 0; display:flex; gap:7px 12px; flex-wrap:wrap; align-items:center; font-size:.83rem; font-weight:700; }
.journey li { display:flex; align-items:center; gap:12px; }
.journey li:not(:last-child)::after { content:''; width:16px; border-top:2px dotted var(--green); }
.journey li:last-child { background:#f9edb9; padding:5px 9px; border-radius:15px; }
.lodging { max-width:980px; margin:auto; }
.lodging-title { text-align:center; margin-bottom:clamp(25px,5vw,56px); }
.stay-options { background:#eef3e9; border-radius:48px 28px 42px 30px; display:grid; grid-template-columns:2fr 1fr; padding:clamp(22px,4vw,45px); align-items:center; gap:clamp(20px,4vw,42px); }
.stay-overnight { display:grid; grid-template-columns:minmax(85px,1fr) 1.5fr; gap:clamp(12px,2.5vw,28px); align-items:center; }
.stay-price { margin:8px 0; font-weight:700; }
.stay-return { border-inline-start:1px solid #b9cbb7; padding-inline-start:clamp(20px,4vw,42px); }
.stay-return p { margin-top:10px; }
.stay-option .button { margin-top:16px; }
@media(max-width:720px) {
  .place-lead,.travel-modes,.stay-options { grid-template-columns:1fr; }
  .place-photo img { max-height:360px; }
  .stay-return { border-inline-start:0; border-top:1px solid #b9cbb7; padding:18px 0 0; }
}
@media(max-width:430px) {
  .stay-overnight { grid-template-columns:1fr; }
  .stay-overnight .sketch { width:125px; margin:0; }
}

.story-drawing .moment-art { width:min(100%,210px); margin:0 auto; display:block; mix-blend-mode:multiply; }
.program .story-drawing .moment-art { width:min(100%,180px); }
.fund .row h3 { font-family:inherit; font-size:1rem; font-weight:700; line-height:1.5; }
.fund .row { grid-template-columns: 1fr; gap: 4px; }

.entry { min-height:100svh; display:grid; grid-template-rows:auto 1fr; }
.entry-languages { justify-content:flex-end; padding:22px clamp(18px,5vw,70px); }
.entry-main { align-self:center; padding:24px 18px 12vh; }
.entry-main h1 { font-size:clamp(49px,9vw,98px); line-height:.96; }
.entry-main > p { line-height:1.5; }
.entry-form { display:grid; gap:9px; width:min(100%,300px); margin:24px auto 0; text-align:left; }
.entry-form label { font-size:.9rem; font-weight:700; }
.entry-form input { width:100%; padding:12px; border-radius:9px; border:1px solid #789581; background:#fff; font:inherit; color:var(--ink); }
.entry-form input:focus-visible,.entry-form button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.entry-form button { justify-content:center; border:0; cursor:pointer; font-family:inherit; margin-top:5px; }
#entry-error { color:#963a26; font-size:.9rem; }

@media (max-width:780px) {
  .entry-languages { justify-content:center; padding-block:14px; }
  .entry-languages a { padding:12px 10px; }
  .entry-main { padding-block:18px clamp(24px,8svh,72px); }
}
