:root {
  color-scheme: light;
  --paper: #f7f6f2;
  --paper-bright: #fffdf9;
  --ink: #202941;
  --ink-soft: #555b68;
  --blue: #45618a;
  --blue-pale: #e3e9ec;
  --olive: #899a75;
  --olive-pale: #e9ede4;
  --sand: #c9ad84;
  --line: #deded8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input { font: inherit; }
button { color: inherit; }
.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  padding: 12px 16px;
  color: white;
  background: var(--ink);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  width: min(1280px, calc(100% - 112px));
  min-height: 96px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  position: relative;
  display: grid;
  width: max-content;
  text-decoration: none;
}
.wordmark-the {
  font-size: 8px;
  letter-spacing: .24em;
  line-height: 1;
}
.wordmark-name {
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1;
}
.wordmark-edition {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 8px;
  letter-spacing: .16em;
}
.header-action {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
  font-weight: 650;
}
.header-action span { margin-left: 7px; }

.hero {
  width: min(1280px, calc(100% - 112px));
  min-height: 655px;
  margin: 12px auto 115px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
}
.hero-copy { z-index: 2; padding-left: 43px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow-line { width: 29px; height: 1px; background: var(--olive); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; }
.hero h1 {
  margin: 32px 0 19px;
  font-size: clamp(69px, 7.8vw, 106px);
  line-height: .94;
  letter-spacing: -.055em;
}
.hero h1 span, .planner-heading h2 span, .results-panel h3 span, .method-note h2 span {
  color: var(--blue);
  font-style: italic;
}
.hero-description {
  width: min(360px, 92%);
  margin: 25px 0;
  color: var(--ink-soft);
  line-height: 1.8;
}
.button {
  display: inline-flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  padding: 0 23px;
  background: var(--ink);
  color: var(--paper-bright);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .035em;
}
.button-primary:hover { background: #35425b; }
.hero-signature {
  margin-top: 33px;
  color: var(--ink-soft);
  font-size: 11px;
}
.hero-signature span { margin-left: 5px; color: var(--olive); }
.hero-art {
  position: relative;
  min-height: 615px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.art-paper {
  position: absolute;
  inset: 43px 10px 16px 42px;
  transform: rotate(-3deg);
  background: #e9e9e4;
}
.art-paper::before {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(32, 41, 65, .09);
  content: "";
}
.flatlay-frame {
  position: relative;
  z-index: 1;
  width: min(80%, 449px);
  aspect-ratio: 4 / 5;
  margin-top: 20px;
  overflow: hidden;
  box-shadow: 0 22px 34px rgba(32, 41, 65, .14);
}
.flatlay-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.art-caption {
  position: absolute;
  z-index: 3;
  padding: 6px 10px;
  background: rgba(255, 253, 249, .92);
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
}
.art-caption-top { top: 54px; left: 67px; }
.art-caption-bottom { right: 37px; bottom: 73px; }
.flatlay-possibilities {
  position: absolute;
  z-index: 3;
  right: 75px;
  bottom: 133px;
  left: 76px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.flatlay-possibilities span {
  padding: 7px 8px;
  background: rgba(255, 253, 249, .93);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .09em;
}
.art-badge {
  position: absolute;
  z-index: 3;
  top: 102px;
  right: 28px;
  padding: 12px 15px;
  transform: rotate(6deg);
  background: var(--paper-bright);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.6;
  letter-spacing: .13em;
}
.art-index {
  position: absolute;
  right: 35px;
  bottom: 37px;
  color: var(--ink-soft);
  font-size: 8px;
  letter-spacing: .12em;
}

.planner {
  padding: 107px max(56px, calc((100vw - 1160px) / 2)) 128px;
  background: var(--paper-bright);
}
.planner-heading { margin-bottom: 60px; text-align: center; }
.planner-heading .eyebrow { justify-content: center; }
.planner-heading h2 {
  margin: 22px 0 10px;
  font-size: clamp(43px, 5vw, 64px);
  letter-spacing: -.04em;
}
.planner-heading > p:last-child { color: var(--ink-soft); }
.personalisation-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.personalisation-key span {
  padding: 7px 11px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 9px;
  letter-spacing: .045em;
}
.planner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(335px, .82fr);
  gap: 64px;
  align-items: start;
}
.question-block { margin: 0 0 39px; padding: 0; border: 0; }
.question-block legend {
  padding: 0;
  font-family: var(--serif);
  font-size: 22px;
}
.question-number {
  margin-right: 10px;
  color: var(--olive);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  vertical-align: 3px;
}
.question-help { margin: 8px 0 14px 30px; color: var(--ink-soft); font-size: 12px; }
.option-grid { display: grid; gap: 9px; margin-top: 15px; }
.option-grid-trips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-grid-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option-grid-style { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  min-height: 53px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.choice:hover { border-color: #8b91a0; transform: translateY(-1px); }
.choice[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--blue-pale);
}
.choice-icon { width: 20px; color: var(--blue); font-size: 17px; text-align: center; }
.choice-label { font-size: 11px; font-weight: 550; }
.option-grid-scenarios .choice[aria-pressed="true"] { background: var(--olive-pale); }
.option-grid-style .choice { min-height: 50px; }
.custom-possibility-wrap { margin-top: 18px; }
.custom-possibility-wrap label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 11px;
}
.custom-possibility-row { display: flex; }
.custom-possibility-row input {
  min-width: 0;
  height: 42px;
  flex: 1;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-right: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}
.custom-possibility-row button {
  width: 44px;
  height: 42px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
  cursor: pointer;
  font-size: 20px;
}
.custom-possibilities { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.custom-tag {
  padding: 6px 9px;
  border: 1px solid var(--olive);
  background: var(--olive-pale);
  cursor: pointer;
  font-size: 10px;
}
.custom-tag span { margin-left: 7px; }
.compact-question { margin-bottom: 33px; }
.segmented-options {
  display: flex;
  width: 100%;
  margin-top: 15px;
}
.segmented-options .choice {
  min-height: 45px;
  flex: 1;
  justify-content: center;
  border-right: 0;
}
.segmented-options .choice:last-child { border-right: 1px solid var(--line); }
.segmented-options .choice[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper-bright);
}
.segmented-options .choice[aria-pressed="true"] + .choice { border-left-color: var(--ink); }
.final-question { margin-bottom: 0; }

.results-panel {
  position: sticky;
  top: 26px;
  min-height: 545px;
  padding: 31px 31px 25px;
  border: 1px solid #e7e5df;
  background: var(--paper);
}
.results-topline {
  display: flex;
  justify-content: space-between;
  color: var(--ink-soft);
  font-size: 8px;
  letter-spacing: .11em;
}
.results-panel h3 {
  margin: 37px 0 9px;
  font-size: 37px;
  letter-spacing: -.04em;
}
.results-summary { min-height: 34px; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.results-state {
  margin: 21px 0;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: .05em;
}
.results-state strong { color: var(--ink); }
.result-category { margin: 22px 0; }
.category-heading {
  margin: 0 0 11px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.packing-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  margin: 0 0 12px;
  cursor: pointer;
}
.packing-item input {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--olive);
}
.item-copy { display: grid; gap: 3px; }
.item-name { font-size: 12px; font-weight: 550; }
.item-reason { color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.packing-item:has(input:checked) .item-name { color: var(--ink-soft); text-decoration: line-through; }
.results-actions { margin-top: 26px; }
.copy-button { width: 100%; min-height: 48px; }
.copy-button:disabled { cursor: not-allowed; opacity: .55; }
.reset-button {
  display: block;
  margin: 13px auto 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.results-upgrade {
  margin-top: 26px;
  padding: 17px 0 2px;
  border-top: 1px solid var(--line);
}
.results-upgrade p {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 15px;
}
.results-upgrade a {
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.results-upgrade a span { margin-left: 5px; }
.results-principle {
  margin: 25px 0 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

.method-note {
  max-width: 1130px;
  margin: 0 auto;
  padding: 119px 30px 129px;
  text-align: center;
}
.method-asterisk { margin-bottom: 18px; color: var(--olive); font-size: 33px; }
.method-note .eyebrow { justify-content: center; }
.method-note h2 {
  margin: 25px 0;
  font-size: clamp(48px, 7vw, 78px);
  line-height: 1.03;
  letter-spacing: -.05em;
}
.method-note .method-intro {
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.9;
}
.method-signature { margin-top: 26px; font-weight: 600; }
.method-signature span { margin-left: 5px; color: var(--blue); font-family: var(--serif); font-style: italic; }
.personalisation-explainer { margin-top: 94px; }
.personalisation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  margin-top: 28px;
  text-align: left;
}
.personalisation-example {
  min-height: 186px;
  padding: 23px 19px 19px;
  border-top: 1px solid var(--line);
}
.example-number {
  color: var(--olive);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}
.personalisation-example h3 {
  margin: 15px 0 8px;
  font-size: 23px;
  line-height: 1.15;
}
.personalisation-example h3 span { color: var(--blue); font-style: italic; }
.personalisation-example p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.offer-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
  margin-top: 59px;
  text-align: left;
}
.offer-card { min-height: 325px; padding: 28px 29px 23px; border: 1px solid var(--line); }
.offer-card-premium { border-color: var(--ink); background: var(--ink); color: var(--paper-bright); }
.offer-kicker { margin: 0; color: var(--olive); font-size: 9px; font-weight: 650; letter-spacing: .13em; }
.offer-card h3 { margin: 17px 0 9px; font-size: 29px; }
.offer-card > p:not(.offer-kicker):not(.offer-note) { min-height: 38px; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.offer-card-premium > p:not(.offer-kicker):not(.offer-note) { color: #d5d8de; }
.offer-card ul { margin: 19px 0; padding-left: 16px; }
.offer-card li { margin: 0 0 9px; font-size: 11px; line-height: 1.5; }
.offer-link { color: var(--blue); font-size: 11px; font-weight: 650; text-decoration: none; }
.offer-link span { margin-left: 5px; }
.offer-card-premium .offer-link { color: var(--paper-bright); }
.offer-note { margin: 10px 0 0; color: #c9cdd5; font-size: 10px; }
.site-footer {
  min-height: 110px;
  padding: 0 max(56px, calc((100vw - 1220px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
}
.site-footer a { text-decoration: none; }
.footer-brand { font-family: var(--serif); font-size: 23px; }
.site-footer p, .site-footer > a:last-child { color: var(--ink-soft); font-size: 10px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 1040px) {
  .site-header, .hero { width: calc(100% - 72px); }
  .hero-copy { padding-left: 12px; }
  .hero h1 { font-size: clamp(66px, 8vw, 90px); }
  .planner { padding-left: 38px; padding-right: 38px; }
  .planner-layout { grid-template-columns: minmax(0, 1fr) minmax(315px, .85fr); gap: 33px; }
  .results-panel { padding-right: 23px; padding-left: 23px; }
  .site-footer { padding-right: 38px; padding-left: 38px; }
}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 38px); min-height: 77px; }
  .wordmark-name { font-size: 25px; }
  .header-action { font-size: 9px; }
  .hero {
    width: 100%;
    min-height: auto;
    margin: 17px 0 69px;
    grid-template-columns: 1fr;
  }
  .hero-copy { padding: 30px 25px 0; }
  .hero h1 { margin-top: 25px; font-size: clamp(70px, 14vw, 94px); }
  .hero-description { margin-top: 20px; }
  .hero-art { min-height: 465px; margin-top: 12px; }
  .art-paper { inset: 42px 14px 12px 29px; }
  .flatlay-frame { width: min(76%, 344px); margin-top: 11px; }
  .art-caption { font-size: 17px; }
  .art-caption-top { top: 47px; left: 38px; }
  .art-caption-bottom { right: 18px; bottom: 44px; }
  .flatlay-possibilities { right: 49px; bottom: 89px; left: 48px; gap: 5px; }
  .flatlay-possibilities span { padding: 6px 7px; font-size: 7px; }
  .art-badge { top: 84px; right: 15px; }
  .planner { padding: 74px 20px 80px; }
  .planner-heading { margin-bottom: 40px; }
  .planner-heading h2 { font-size: 43px; }
  .planner-heading > p:last-child { font-size: 12px; line-height: 1.7; }
  .planner-layout { grid-template-columns: 1fr; gap: 34px; }
  .results-panel { position: static; min-height: auto; }
  .question-block legend { font-size: 20px; }
  .option-grid-trips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice { min-height: 52px; }
  .segmented-options .choice-label { font-size: 10px; }
  .method-note { padding: 84px 24px 93px; }
  .method-note .method-intro { font-size: 13px; }
  .personalisation-key { gap: 6px; }
  .personalisation-key span { padding: 6px 8px; font-size: 8px; }
  .personalisation-explainer { margin-top: 70px; }
  .personalisation-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 20px; }
  .personalisation-example { min-height: auto; padding: 18px 11px; }
  .personalisation-example h3 { margin-top: 10px; }
  .offer-comparison { grid-template-columns: 1fr; gap: 13px; margin-top: 40px; }
  .offer-card { min-height: auto; padding: 24px 22px; }
  .site-footer { min-height: 150px; padding: 25px 20px; flex-direction: column; justify-content: center; gap: 9px; }
  .site-footer p { margin: 0; text-align: center; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 65px; }
  .choice { padding-right: 8px; padding-left: 8px; gap: 5px; }
  .choice-label { font-size: 10px; }
  .results-panel { padding-right: 18px; padding-left: 18px; }
  .segmented-options .choice { padding-right: 4px; padding-left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}