/* Contact, travel agents, thank-you and page-not-found.
   Loaded by contact.php, travel-agents.php, thank-you.php and 404.php. */

/* ---- Text-led opener with the introduction on the right ---- */
.ct-title { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.ct-title__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.ct-title__lede .lede { margin: 0 0 .6rem; max-width: 40ch; }
@media (max-width: 860px) { .ct-title__grid { grid-template-columns: 1fr; } }

/* ---- Contact: details left, the form on paper right ---- */
.ct { padding-top: clamp(2.5rem, 5vw, 4rem); }
.ct__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.ct-info { grid-column: 1 / span 4; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.ct-form { grid-column: 6 / -1; margin-top: clamp(1.5rem, 3vw, 2.5rem); background: var(--paper); padding: clamp(2rem, 5vw, 4.5rem); }

.ct-block { display: grid; gap: .9rem; padding: 0 0 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line); }
.ct-block__label {
  font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--moss); line-height: 1.4;
}
.ct-block__body { display: grid; gap: .8rem; justify-items: start; }
.ct-phones li a {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.35;
  color: var(--forest); transition: color .25s var(--ease);
}
.ct-phones li a:hover { color: var(--moss); }
.ct-mails li a { font-size: .95rem; color: var(--forest); border-bottom: 1px solid var(--line); transition: border-color .25s var(--ease); }
.ct-mails li a:hover { border-color: var(--forest); }
.ct-mails li + li { margin-top: .25rem; }
.ct-note { font-style: normal; font-size: .9rem; line-height: 1.75; color: var(--ink-soft); }
.ct-directions { margin-top: .4rem; }
.ct-social { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }
.ct-social a { color: var(--forest); border-bottom: 1px solid var(--line); padding-bottom: .15rem; }
.ct-social a:hover { border-color: var(--forest); }
.ct-photo { margin-top: 1rem; width: 78%; }

.ct-form__head { margin-bottom: 2.4rem; }
.ct-form__head h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin-bottom: 1.2rem; }
.ct-form__lede { color: var(--ink-soft); max-width: 46ch; }
.ct-form .alert { margin-bottom: 1.6rem; }
.ct-form .form { gap: 1.7rem; }
.ct-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: .6rem; }
.ct-submit .hint { flex: 1 1 18rem; font-size: .78rem; color: var(--ink-soft); }

@media (max-width: 960px) {
  .ct__grid { grid-template-columns: 1fr; border-top: 0; }
  .ct-info, .ct-form { grid-column: 1; }
  .ct-form { order: -1; margin-top: 0; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .ct-info { padding-top: clamp(3rem, 8vw, 4.5rem); display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .ct-photo { width: 100%; grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 600px) { .ct-info { grid-template-columns: 1fr; } }

/* ---- "Any extras?": the published services as a ruled checklist ---- */
.book-extras__group { border: 0; padding: 0; margin: .4rem 0 0; min-width: 0; }
.book-extras__eyebrow { display: block; padding: 0; margin-bottom: .5rem; font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--moss); }
.book-extras__intro { font-size: .84rem; color: var(--ink-soft); margin-bottom: 1rem; max-width: 52ch; }
.book-extras__list { list-style: none; border-top: 1px solid var(--line); }
.book-extras__list li { border-bottom: 1px solid var(--line); }
.book-extra { display: flex; align-items: flex-start; gap: .9rem; padding: .95rem 0; cursor: pointer; }
.book-extra__ck {
  flex: none; width: 18px; height: 18px; margin-top: .2rem;
  appearance: none; -webkit-appearance: none; border: 1px solid var(--sage); border-radius: 0; background: var(--white);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s;
}
.book-extra__ck::after { content: ""; width: 9px; height: 5px; border-left: 1.4px solid var(--white); border-bottom: 1.4px solid var(--white); transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.book-extra__ck:checked { background: var(--forest); border-color: var(--forest); }
.book-extra__ck:checked::after { opacity: 1; }
.book-extra__ck:focus-visible { outline: 1.5px solid var(--moss); outline-offset: 3px; }
.book-extra__body { flex: 1 1 auto; display: grid; gap: .1rem; min-width: 0; }
.book-extra__name { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; line-height: 1.3; color: var(--forest); }
.book-extra__route { font-size: .78rem; color: var(--ink-soft); }
.book-extra__price { flex: none; font-size: .78rem; color: var(--moss); text-align: right; padding-top: .2rem; white-space: nowrap; }
.book-extra:hover .book-extra__ck { border-color: var(--forest); }

/* ---- Travel agents ---- */
.ta-intro__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.ta-intro__copy { grid-column: 1 / span 6; }
.ta-intro__copy h2 { margin-bottom: 1.8rem; }
.ta-intro__copy .ab-lead, .ta-lead {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.32;
  color: var(--forest); max-width: 30ch;
}
.ta-intro__copy p:not(.ta-lead) { color: var(--ink-soft); margin-top: 1.2rem; max-width: 50ch; }
.ta-intro__media { grid-column: 8 / span 5; }
@media (max-width: 900px) {
  .ta-intro__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .ta-intro__copy, .ta-intro__media { grid-column: 1; }
  .ta-intro__media { width: 80%; justify-self: end; }
}

.ta-lodges__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.ta-lodges__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.ta-lodges__head h2 { margin-bottom: 1.6rem; }
.ta-lodges__head p { color: var(--ink-soft); max-width: 40ch; }
.ta-lodges__head .ta-actions { margin-top: 2rem; }
.ta-table { border-top: 1px solid var(--line); }
.ta-table li a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem 2rem; align-items: baseline;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.ta-table__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; color: var(--forest); transition: color .25s var(--ease); }
.ta-table__kind { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.ta-table__go { width: 2.2rem; height: 1px; background: var(--sage); align-self: center; transition: width .4s var(--ease-out), background .3s; }
.ta-table li a:hover .ta-table__name { color: var(--moss); }
.ta-table li a:hover .ta-table__go { width: 3.4rem; background: var(--forest); }
.ta-note { margin-top: 1.4rem; font-size: .84rem; color: var(--ink-soft); max-width: 60ch; }
@media (max-width: 900px) {
  .ta-lodges__grid { grid-template-columns: 1fr; }
  .ta-lodges__head { position: static; }
}
@media (max-width: 560px) {
  .ta-table li a { grid-template-columns: 1fr; gap: .35rem; }
  .ta-table__go { display: none; }
}

.ta-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--line); }
.ta-term { padding: 2rem 2rem 2.2rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .8rem; align-content: start; }
.ta-term__n { font-size: .62rem; letter-spacing: .2em; color: var(--sage); }
.ta-term h3 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
.ta-term p { color: var(--ink-soft); font-size: .92rem; }

.ta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.ta-form__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.ta-form__head h2 { margin-bottom: 1.6rem; }
.ta-form__head p { color: var(--on-dark-soft); max-width: 40ch; }
.ta-contact { margin-top: 2.4rem; border-top: 1px solid var(--line-dark); }
.ta-contact li { border-bottom: 1px solid var(--line-dark); }
.ta-contact a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; color: var(--white); font-size: .95rem; }
.ta-contact a span { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lichen); }
.ta-contact a:hover { color: var(--lichen); }
.ta-form .alert { margin-bottom: 1.4rem; }
.ta-form .hint { color: var(--on-dark-soft); font-size: .8rem; }
.ta-form .form { gap: 1.7rem; }
@media (max-width: 900px) { .ta-form__grid { grid-template-columns: 1fr; } }

/* ---- Thank-you and page-not-found: words left, a photograph right ---- */
.nf { padding-block: clamp(3.5rem, 9vw, 7rem) var(--section); }
.nf__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; }
.nf__copy { grid-column: 1 / span 6; }
.nf__copy h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); margin-bottom: 1.8rem; }
.nf__copy .lede { max-width: 42ch; }
.nf__copy .lede + .lede { margin-top: 1rem; }
.nf__media { grid-column: 8 / span 5; }
.nf__links { margin-top: 2.6rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; max-width: 34rem; }
.nf__links li:nth-child(-n+2) { border-top: 1px solid var(--line); }
@media (max-width: 420px) { .nf__links { grid-template-columns: 1fr; } .nf__links li:nth-child(2) { border-top: 0; } }
.nf__links li { border-bottom: 1px solid var(--line); }
.nf__links a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0;
  font-family: var(--serif); font-weight: 300; font-size: 1.35rem; color: var(--forest);
}
.nf__links a::after { content: ""; width: 1.8rem; height: 1px; background: var(--sage); transition: width .4s var(--ease-out), background .3s; }
.nf__links a:hover::after { width: 3rem; background: var(--forest); }
.nf__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.nf__call { margin-top: 1.6rem; font-size: .9rem; color: var(--ink-soft); }
.nf__call a { color: var(--forest); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) {
  .nf__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .nf__copy, .nf__media { grid-column: 1; }
  .nf__media { width: 72%; justify-self: end; }
}