/* unsaltylabs: a travel journal identity, separate from the AI studio. */
:root {
  --forest: #3c2d49;
  --ink: #342c3b;
  --lime: #f2d38a;
  --paper: #fdfcfe;
  --mist: #f1edf5;
  --muted: #746b7d;
  --line: #e1dae8;
  --display: 'DM Sans', sans-serif;
  --body: 'DM Sans', sans-serif;
  --editorial: 'Fraunces', Georgia, serif;
}
::selection { background: #e3d8ee; color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline-color: #886b9f; }
.topline { background: #ece6f2; color: #5c4b6b; }
.topline .wrap { padding-block: 10px; }
.header { height: 112px; }
.brand { gap: 10px; font-size: 28px; letter-spacing: -1.5px; font-weight: 500; }
.brand svg { width: 39px; height: 39px; color: var(--forest); }
.brand small { letter-spacing: 2px; font-size: 7px; margin-top: 9px; color: var(--muted); }
.brand-ending { color: #947ba5; }
.header nav > a:not(.button):hover, .text-link:hover { color: #947044; }
.button { border-radius: 50px; gap: 25px; padding-inline: 23px; }
.icon-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.13em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .icon-arrow { width: 19px; height: 19px; }
.place-links .icon-arrow, .footer-links .icon-arrow { width: 14px; height: 14px; }
.compact { padding-inline: 20px; }
.dark:hover { background: #594264; }
.lime:hover { background: #f9e2ad; }
.hero { width: calc(100% - 40px); max-width: 1560px; margin-inline: auto; border-radius: 22px; min-height: 660px; }
.hero-shade { background: linear-gradient(90deg, #2b1d3be8, #2b1d3ba8 47%, #2b1d3b18), linear-gradient(0deg, #2b1d3b80, transparent 35%); }
.hero-image { object-position: center 50%; }
.hero-inner { padding-block: 65px 27px; }
.hero h1 { font-family: var(--editorial); font-size: clamp(58px, 5.9vw, 83px); letter-spacing: -2.8px; font-weight: 400; line-height: 1.05; }
.hero h1 em { font-style: italic; font-weight: 400; color: #f2d38a; }
.hero .eyebrow.light { color: #eadff0; }
.hero-copy > p:not(.eyebrow) { color: #f2edf5; max-width: 450px; }
.hero-actions { margin-top: 32px; }
.hero-caption { border: 1px solid #ffffff57; border-radius: 9px; background: #34253d70; padding: 12px 17px; }
.hero-caption > span:last-child { margin-left: 25px; }
.audience-strip { border-bottom: 0; padding-block: 33px; }
.audience-strip i { background: #b3a2c0; }
.audience-strip > span { color: #8b789b; }
.eyebrow { color: #8a6e9f; letter-spacing: 1.9px; }
.section h2, .faq-section h2, .learning-copy h2 { font-family: var(--editorial); font-weight: 400; font-size: 47px; line-height: 1.15; letter-spacing: -1.7px; }
.intro h2 span, .places-section h2 > span, .inquiry h2 em { color: #9274a5; }
.intro { border-top: 1px solid var(--line); }
.program-card { border-radius: 15px; border-color: #e3dce9; }
.ecosystem-art { background: #e7deee; }
.mini-orbit, .mini-orbit:before { border-color: #a38bb6; }
.mini-orbit > span { background: #e7deee; }
.art-caption { color: #7e668f; }
.ai-art { background: #483454; }
.ai-art .art-caption { color: #e4d9eb; }
.custom-art { background: #f4ead4; }
.route-drawing b { border-color: #c9b382; }
.route-drawing i { background: #b29b69; }
.tag, .program-body li:before, .step, .day-label, .process li > span { color: #876897; }
.program-body h3 { font-size: 24px; font-weight: 500; }
.program-body .text-link { color: #745387; }
.places-grid { gap: 30px 25px; }
.place-card { border: 1px solid #e6deec; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px -20px #44285660; }
.place-photo { aspect-ratio: 1.55; }
.place-city { color: #4d365d; border-radius: 25px; background: #fcf9ffef; }
.place-content { padding: 26px; }
.place-content h3 { font-family: var(--editorial); font-weight: 400; font-size: 29px; letter-spacing: -.9px; }
.place-type { background: #f0eaf5; color: #796488; }
.place-type.public { background: #eee8f4; color: #775d8b; }
.place-type.historic { background: #f6eddc; color: #927044; }
.place-links a:hover { color: #947044; }
.place-planner { background: #493556; border-radius: 15px; }
.place-planner .eyebrow { color: #dacbe5; }
.place-planner h3 { font-family: var(--editorial); font-size: 37px; letter-spacing: -1px; font-weight: 400; }
.place-planner > p:not(.eyebrow) { color: #e5dcec; }
.itinerary-tabs button { border-radius: 12px; padding-block: 25px; }
.itinerary-tabs button[aria-selected=true] { background: #e6dcef; color: #493356; border-color: #d2c0df; }
.itinerary-tabs button[aria-selected=true] > span { color: #806290; }
.itinerary-panel { border-radius: 16px; background: #fff; }
.duration-pill { background: #f4e9d0; color: #82663a; }
.day-list li > div { border-color: #d6c6e1; }
.day-list li > div:before { background: #a58bb8; }
.journey-footnote > span { color: #9b84ac; }
.learning-section { background: #eee7f4; }
.learning-points > div > span { color: #a082b4; }
.learning-copy h2 { font-size: 41px; }
.faq-list details { border-color: #ddd1e6; }
.faq-list details:first-child { border-color: #ddd1e6; }
.faq-list summary > span { color: #9a7baa; }
.inquiry h2 { font-family: var(--editorial); font-size: 70px; font-weight: 400; letter-spacing: -2px; }
.inquiry h2 em { font-style: italic; }
.inquiry-note > span { border-color: #d1bfdd; color: #9475a6; }
.contact-email { margin-top: 25px; }
.contact-email > span { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.contact-email > a { display: inline-block; font-size: clamp(17px, 2vw, 23px); color: var(--forest); text-decoration: underline; text-decoration-color: #d1bfdd; text-underline-offset: 6px; overflow-wrap: anywhere; }
.contact-email > a:hover { text-decoration-color: currentColor; }
.footer-email { display: inline-block; margin-top: 15px; color: #f2d38a; font-size: 13px; text-underline-offset: 4px; }
.footer-email:hover { text-decoration: underline; }
#tour-form { background: #f5f1f8; border-radius: 17px; }
label > span { color: #9475a6; }
input, select, textarea { border-color: #ded3e6; border-radius: 7px; }
input::placeholder, textarea::placeholder { color: #928699; }
.footer-main .brand svg { color: #d8bdee; }
.footer-main .brand small, .footer-main > div > p { color: #cdbdd6; }
.footer-main .brand-ending { color: #d4b8e6; }
.footer-bottom { color: #c9b9d3; }
@media(min-width:1600px) {
  .hero { min-height: 730px; }
  .hero h1 { font-size: 91px; }
}
@media(max-width:1100px) {
  .header nav { gap: 17px; }
  .brand { font-size: 26px; }
  .hero h1 { font-size: 72px; }
  .section h2, .faq-section h2 { font-size: 41px; }
  .learning-copy h2 { font-size: 35px; }
  .place-content { padding: 22px; }
  .place-content h3 { font-size: 27px; }
}
@media(max-width:800px) {
  .header { height: 90px; }
  .header nav { top: 82px; border-radius: 12px; gap: 0; }
  .header nav > .button { border-radius: 8px; }
  .hero { width: calc(100% - 24px); border-radius: 15px; min-height: 650px; }
  .hero-inner { padding-block: 48px 24px; width: calc(100% - 48px); }
  .hero h1 { font-size: 72px; }
  .hero-caption { align-self: flex-start; }
  .section h2, .faq-section h2 { font-size: 40px; }
  .places-grid { gap: 22px; }
  .place-planner h3 { font-size: 33px; }
  .inquiry h2 { font-size: 64px; }
}
@media(max-width:520px) {
  .brand { font-size: 26px; letter-spacing: -1.2px; gap: 8px; }
  .brand svg { width: 32px; height: 36px; }
  .brand small { font-size: 6px; letter-spacing: 1.3px; margin-top: 7px; }
  .hero { min-height: 660px; }
  .hero h1 { font-size: clamp(44px, 11.5vw, 59px); letter-spacing: -1.7px; line-height: 1.08; }
  .hero .eyebrow { font-size: 7px; letter-spacing: 1px; }
  .hero-copy > p:not(.eyebrow) { font-size: 13px; }
  .hero-actions { gap: 20px; flex-direction: column; align-items: flex-start; }
  .hero .button { padding-inline: 16px; font-size: 10px; gap: 16px; }
  .hero-caption { padding: 9px 12px; gap: 8px; font-size: 6px; }
  .hero-caption > span:last-child { display: none; }
  .hero-caption small { font-size: 9px; }
  .section h2, .faq-section h2 { font-size: 36px; }
  .learning-copy h2 { font-size: 34px; }
  .places-grid { gap: 25px; }
  .place-photo { aspect-ratio: 1.6; }
  .place-content h3 { font-size: 32px; }
  .place-planner h3 { font-size: 37px; }
  .inquiry h2 { font-size: 60px; }
  .footer-main .brand { font-size: 28px; }
}