/* A shared typographic scale and a tactile paper surface. */
:root{--paper:#f4efe5;--paper-grain:url("assets/paper-texture.svg")}
body,.site-header,.mobile-nav,.postcard,.trip-builder,.closing,dialog{
  background-image:var(--paper-grain);
  background-size:480px 480px;
  background-repeat:repeat;
}
body{background-color:var(--paper)}
h1,h2,h3{font-family:Alatsi,Arial,sans-serif;text-transform:uppercase;font-weight:400}
.hero-copy{container-type:inline-size}
.hero h1{font-size:clamp(52px,21cqw,116px);letter-spacing:-.025em;line-height:1.01;margin:29px 0}
.hero h1>span{white-space:nowrap}
h2,.intro h2,.day-copy h2,.place-copy h2,.faq h2{
  font-size:clamp(34px,3.65vw,56px);line-height:1.1;letter-spacing:-.025em;text-wrap:balance;
}
.trip-intro h2{font-size:clamp(44px,4.45vw,66px);line-height:1.08;letter-spacing:-.025em}
.closing h2{font-size:clamp(40px,5.1vw,72px);line-height:1.08;letter-spacing:-.025em}
.hero-description,.intro-prose>p,.place-copy>p:not(.eyebrow),.trip-intro>p:not(.eyebrow){
  font-size:16px;line-height:1.75;
}
.section-aside,.day-intro{font-size:15px;line-height:1.7}
.experience-card{display:flex;flex-direction:column}
.card-visual{flex-shrink:0}
.card-text{display:flex;flex-direction:column;flex:1}
.card-text h3{font-size:25px;line-height:1.15;letter-spacing:-.025em;min-height:2.3em}
.card-text p{font-size:15px;line-height:1.7;flex:1;min-height:103px}
.timeline h3{font-size:22px;line-height:1.18}
.timeline p{font-size:14px;line-height:1.7}
.timeline li{padding:22px 0}
.day-copy{padding-top:68px;padding-bottom:60px}
.day-caption p{font-family:Alatsi,Arial,sans-serif;text-transform:uppercase;font-size:38px;line-height:1.1;letter-spacing:-.025em}
.eyebrow{font-size:11px;letter-spacing:1.45px}
.concept-equation{font-size:13px}
.card-bottom>span{font-size:10px}
.card-bottom button{font-size:13px}
.pilot-note,.day-footnote{font-size:12px}
.brand,.brand img{width:146px}
.brand img{height:auto}
.hero-stamp{
  width:137px;height:137px;padding:24px 14px;top:25px;right:-14px;
  transform:rotate(5deg);gap:5px;border-radius:49% 51% 46% 54%;
  background-image:var(--paper-grain);background-size:300px;
}
.hero-stamp span{font-family:Alatsi,Arial,sans-serif;font-size:21px;line-height:1.1;letter-spacing:.03em}
.hero-stamp b{font-family:Alan,Arial,sans-serif;font-size:24px;line-height:1;font-weight:400;opacity:.85}
.card-stamp,.running-stamp{
  background-color:var(--paper);background-image:var(--paper-grain);
  border-radius:50%;padding:4px;
}
.card-stamp{width:135px;max-width:39%;right:15px;bottom:15px}
.running-stamp{width:165px}
.card-visual img.cycling{object-position:50% 64%}
.card-visual img.trail{object-position:50% 50%}
.card-visual img.winery{object-position:56% 50%}
.card-visual img.food{object-position:52% 50%}
.card-visual.fitness{
  background-color:var(--sand);background-image:var(--paper-grain);
  color:var(--ink);padding:28px;align-items:center;justify-content:center;gap:22px;
}
.caos-card-label{font-size:9px;letter-spacing:1.4px;text-align:center}
.caos-card-logo{width:90%;max-width:280px;height:auto;mix-blend-mode:multiply}
.caos-card-foot{font-size:11px;letter-spacing:1.2px;text-align:center}
.partner-strip{
  display:grid;grid-template-columns:150px 1fr auto;gap:28px;align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:28px 0;margin-top:46px;
}
.partner-strip>img{width:140px;height:auto;mix-blend-mode:multiply}
.partner-strip strong{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:500;margin-bottom:7px}
.partner-strip p{font-size:14px;max-width:650px;line-height:1.65}
.partner-strip .text-link{font-size:12px;gap:14px;white-space:nowrap}
.day-visual>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.day-visual{min-height:740px}
.film-toggle{
  position:absolute;top:20px;right:20px;z-index:3;display:flex;align-items:center;gap:9px;
  background:var(--paper);border:0;border-radius:2px;padding:10px 13px;font-size:11px;line-height:1.2;color:var(--ink)
}
.film-toggle>span:first-child{font-size:14px}
.brand-ribbon{position:relative;display:block;padding:22px 0;overflow:hidden}
.ribbon-track{display:flex;width:max-content;animation:ribbon-sweep 36s linear infinite;will-change:transform}
.ribbon-group{display:flex;align-items:center;justify-content:space-around;gap:50px;min-width:max(100vw,1120px);padding:0 28px;flex-shrink:0}
.ribbon-group>span{font-size:12px;letter-spacing:1.4px}
.ribbon-group>b{font-size:25px;font-weight:400}
.brand-ribbon:hover .ribbon-track,.brand-ribbon:focus-within .ribbon-track,.brand-ribbon.is-paused .ribbon-track{animation-play-state:paused}
.ribbon-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);border:1px solid #f4efe580;background:var(--orange);color:var(--paper);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;z-index:2;font-size:13px;line-height:1}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes ribbon-sweep{to{transform:translateX(-50%)}}
.trip-intro>p:not(.eyebrow){max-width:440px}
.trip-intro .trip-lead{font-family:Alatsi,Arial,sans-serif;font-size:22px;line-height:1.25;margin-bottom:18px}
.trip-steps{padding:0;margin:30px 0 0;list-style:none;max-width:390px}
.trip-steps li{display:flex;align-items:center;gap:17px;padding:14px 0;border-top:1px solid #e1d9cd40}
.trip-steps li>span:first-child{font-size:11px;color:var(--yellow)}
.trip-steps li>span:last-child{font-size:13px;letter-spacing:.35px}
.trip-small{display:none}
.trip-builder{padding:36px}
legend{font-size:16px;line-height:1.4}
.choice-group label>span{font-size:13px;padding:12px}
select{font-size:13px}
.select-row>label{font-size:12px}
.form-note,.download-note{font-size:11px}
.result-row p,#result-description{font-size:14px}
.result-row>span{font-size:10px}
.result-note{font-size:12px}
.trip-result h3{font-size:31px;line-height:1.14}
.faq summary{font-size:16px;line-height:1.5}
.faq details p{font-size:15px;line-height:1.75}
.footer-main p{font-size:13px}
.footer-bottom,.footer-link{font-size:10px}
.place-image figcaption{font-size:9px}
@media(max-width:1100px){
  .brand,.brand img{width:130px}
  .partner-strip{grid-template-columns:125px 1fr;gap:22px}
  .partner-strip>img{width:115px}
  .partner-strip .text-link{grid-column:2;justify-self:start}
  .card-text p{min-height:125px}
  .day-copy{padding:50px 32px}
  .day-copy h2{font-size:38px}
  .trip-builder{padding:30px}
}
@media(max-width:820px){
  .brand,.brand img{width:118px}
  .hero h1{font-size:clamp(48px,21cqw,100px);letter-spacing:-.025em}
  .hero-stamp{width:112px;height:112px;padding:20px 12px;gap:4px;right:-10px}
  .hero-stamp span{font-size:17px}
  .hero-stamp b{font-size:20px}
  .card-text h3{font-size:23px}
  .card-text p{font-size:14px;min-height:145px}
  .caos-card-label{font-size:8px;letter-spacing:.8px}
  .caos-card-foot{font-size:9px}
  .card-visual.fitness{padding:22px;gap:25px}
  .caos-card-logo{width:100%}
  .card-stamp{width:115px;max-width:52%}
  .day-visual{min-height:790px}
  .day-copy{padding:45px 28px}
  .day-copy h2{font-size:35px}
  .day-caption p{font-size:31px}
  .timeline h3{font-size:20px}
  .timeline p{font-size:13px}
  .place-copy>p:not(.eyebrow){font-size:15px}
  .trip-intro h2{font-size:52px}
  .trip-intro>p:not(.eyebrow){max-width:580px}
  .trip-steps{display:flex;max-width:none;gap:25px}
  .trip-steps li{flex:1;align-items:flex-start}
  .trip-steps li>span:last-child{font-size:11px}
  .faq h2{font-size:35px}
  .faq summary{font-size:14px}
  .faq details p{font-size:14px}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(56px,22cqw,94px);line-height:1.02}
  .hero-description,.intro-prose>p,.place-copy>p:not(.eyebrow),.trip-intro>p:not(.eyebrow){font-size:15px;line-height:1.75}
  h2,.intro h2,.place-copy h2,.faq h2{font-size:35px;line-height:1.12}
  .hero-stamp{width:116px;height:116px;right:-7px;top:20px}
  .hero-stamp span{font-size:18px}
  .hero-stamp b{font-size:22px}
  .hero-note{font-size:11px}
  .eyebrow{font-size:10px;letter-spacing:1.25px}
  .section-aside{font-size:14px}
  .brand-ribbon{padding:20px 0}
  .ribbon-group{min-width:1000px;gap:35px;padding:0 25px}
  .ribbon-group>span{font-size:11px}
  .ribbon-group>b{font-size:23px}
  .ribbon-track{animation-duration:30s}
  .card-text h3{font-size:27px;min-height:0}
  .card-text p{font-size:15px;min-height:0}
  .card-stamp{width:135px;max-width:42%}
  .running-stamp{width:155px}
  .card-visual.fitness{padding:28px;gap:28px}
  .caos-card-label{font-size:10px;letter-spacing:1.4px}
  .caos-card-logo{width:82%;max-width:280px}
  .caos-card-foot{font-size:12px}
  .partner-strip{grid-template-columns:1fr;gap:18px;padding:28px 0;margin-top:35px}
  .partner-strip>img{width:130px}
  .partner-strip p{font-size:14px}
  .partner-strip .text-link{grid-column:1}
  .pilot-note,.day-footnote{font-size:11px}
  .day-visual{min-height:440px}
  .day-copy{padding:45px 24px 50px}
  .day-copy h2{font-size:38px}
  .day-intro{font-size:14px}
  .day-caption p{font-size:34px}
  .timeline h3{font-size:22px}
  .timeline p{font-size:14px}
  .trip-intro h2{font-size:47px}
  .trip-intro .trip-lead{font-size:22px}
  .trip-steps{display:block;margin-top:24px;max-width:390px}
  .trip-steps li>span:last-child{font-size:12px}
  .trip-builder{padding:28px 20px}
  legend{font-size:15px}
  .choice-group label>span{font-size:12px;padding:11px 10px}
  .trip-result h3{font-size:29px}
  .result-note{font-size:11px}
  .result-row p,#result-description{font-size:13px}
  .faq summary{font-size:15px}
  .faq details p{font-size:14px}
  .closing h2{font-size:38px}
  .footer-main p{font-size:11px}
  .footer-bottom,.footer-link{font-size:9px}
  .place-image figcaption{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .ribbon-track{animation:none!important;transform:none}
  .ribbon-toggle{display:none}
}

/* Brand mustard and wine distinguish the two chapters. */
#la-idea,#experiencias{
  max-width:none;
  padding-inline:max(var(--pad),calc((100vw - 1464px)/2));
}
#la-idea{
  background-color:var(--yellow);
  background-image:linear-gradient(#f2b01acc,#f2b01acc),var(--paper-grain);
  background-size:auto,480px 480px;
  color:var(--ink);
  padding-block:92px;
}
#la-idea .intro-prose{max-width:600px}
#la-idea .eyebrow>span:first-child{opacity:1}
#la-idea .concept-equation{border-top:1px solid #43211250;padding-top:23px}
#la-idea .concept-equation b{color:var(--ink)}
#la-idea .underlined{border-color:var(--ink)}
#experiencias{
  --line:#f4efe54d;
  color:var(--paper);
  background:#541c2c url("assets/wine-texture.svg?v=6") center / cover no-repeat;
  border-top:0;
  padding-block:86px;
}
#experiencias .eyebrow{color:#f0d5ae}
#experiencias .section-aside,#experiencias .card-text p{color:#eee0d6}
#experiencias .experience-tabs button{opacity:1;color:#d9b9bc}
#experiencias .experience-tabs button[aria-selected=true]{color:var(--paper);border-color:var(--yellow)}
#experiencias .experience-tabs button:hover{color:var(--paper)}
#experiencias .card-tag{color:var(--ink)}
#experiencias .card-visual.olive{color:var(--ink)}
#experiencias .card-bottom>span{color:#e4c9bd;opacity:1}
#experiencias .card-bottom button{color:#f8c765}
#experiencias .card-bottom button:hover,#experiencias .text-link:hover{color:white}
#experiencias .pilot-dot{background:var(--yellow)}
#experiencias :is(a,button):focus-visible{outline-color:var(--yellow)}
#experiencias .partner-strip>img{filter:none;mix-blend-mode:normal;background:none}
#experiencias .partner-strip strong{color:#f8c765}
#experiencias .partner-strip p{color:#eee0d6}
#experiencias .pilot-note{color:#e4c9bd}
/* White hand-drawn illustrations, with the sport's stamp as its label. */
.experience-illustration{
  height:215px;display:flex;align-items:center;justify-content:center;
  margin:4px 0 0;flex-shrink:0;
}
.experience-icon{display:block;width:250px;max-width:90%;height:auto}
.experience-illustration+.card-text{padding-top:0;text-align:center}
.experience-illustration+.card-text h3{
  min-height:100px;margin:0 0 18px;display:flex;align-items:center;
  justify-content:center;text-wrap:balance;
}
.experience-illustration+.card-text p{margin-inline:auto}
.experience-illustration+.card-text .card-bottom{text-align:left}
.sport-stamp{
  display:block;width:156px;max-width:80%;height:auto;
  background:var(--paper);border-radius:50%;padding:4px;
}
.cycling+.card-text .sport-stamp{transform:rotate(-7deg)}
.trail+.card-text .sport-stamp{transform:rotate(5deg)}
.fitness+.card-text .sport-stamp{transform:rotate(-7deg)}
/* A warm vineyard orange, with accessible white copy. */
.day-section{background:#b45419;color:#fff}
.day-copy{
  background-color:#b45419;background-image:var(--paper-grain);
  background-size:480px 480px;background-blend-mode:multiply;
}
.day-copy .eyebrow>span:first-child,.day-footnote{opacity:1}
@media(min-width:601px) and (max-width:900px){
  .experience-illustration{height:170px}
  .experience-illustration+.card-text h3{min-height:92px;font-size:22px}
  .sport-stamp{width:140px}
}
@media(max-width:600px){
  #la-idea,#experiencias{padding:60px 24px}
  .experience-grid{gap:40px}
  .experience-illustration{height:185px}
  .experience-icon{width:225px}
  .experience-illustration+.card-text h3{min-height:90px;margin-bottom:15px}
  .experience-illustration+.card-text p{max-width:355px;min-height:0}
  .sport-stamp{width:148px}
}
