/* Kontakt: a page of its own. Three ways in, each with the room to open in
   place (the form unfolds under its own button), then the way to the door.
   The ways, form and map rules came over unchanged from the home page. */

.kt-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-top: calc(var(--head-h) + clamp(28px, 4vw, 64px)); }
.kt-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.kt-intro .lead { margin-top: 18px; max-width: 46ch; font-size: clamp(1.08rem, 1.3vw, 1.2rem); color: var(--cream-2); }
.ways li .write { margin-top: 14px; }

.kt-side { display: grid; gap: 18px; }
.kt-photo { margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px rgba(244, 233, 218, .06), 0 50px 100px -56px rgba(0, 0, 0, .9); }
.kt-photo img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; animation: drift-a 32s ease-in-out infinite alternate; }
/* the week at a glance: seven days, the four open ones lit */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.week span { padding: 9px 0; border-radius: 12px; text-align: center; font-size: .84rem; font-weight: 700; color: var(--cream-3); box-shadow: inset 0 0 0 1px rgba(244, 233, 218, .1); }
.week span.on { color: var(--esp-0); background: var(--ember); box-shadow: none; }
.week-hours { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.wh-time { font-family: var(--serif); font-size: 1.6rem; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.wh-note { font-size: .9rem; color: var(--cream-3); }

.kt-way { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.kt-way h2 { margin-bottom: 26px; }
.kt-way h3 { margin-top: 26px; font-family: var(--serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
.kt-way-copy p { margin-top: 8px; max-width: 54ch; color: var(--cream-2); }
.kt-address { margin-top: 22px !important; font-weight: 600; color: var(--cream) !important; }
.kt-way-map .link { margin-top: 14px; }
/* from the station to the door: two stops and the walk between them */
.walk { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 0 14px; margin: 0; padding: 0; list-style: none; }
.walk li { display: grid; gap: 2px; }
.walk .w-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 6px rgba(227, 161, 90, .16); }
.walk .w-end .w-dot { background: var(--esp-1); box-shadow: inset 0 0 0 2.5px var(--ember), 0 0 0 6px rgba(227, 161, 90, .12); }
.walk .w-name { margin-top: 10px; font-family: var(--serif); font-size: 1.15rem; color: var(--cream); white-space: nowrap; }
.walk .w-sub { font-size: .88rem; color: var(--cream-3); }
.walk .w-gap { align-self: start; padding-top: 7px; background: linear-gradient(90deg, var(--ember) 0 6px, transparent 6px 12px) repeat-x 0 0 / 12px 2px; text-align: center; }
.w-time { display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--latte); }

.ways { margin: 30px 0 0; padding: 0; list-style: none; }
.ways li { display: grid; gap: 4px; padding: 20px 0; background: linear-gradient(90deg, rgba(227, 161, 90, .5), rgba(227, 161, 90, 0)) no-repeat 0 0 / 100% 1px; }
.way-t { font-size: .88rem; font-weight: 600; color: var(--latte); }
.way-big { justify-self: start; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.1; color: var(--cream); text-decoration: none; }
a.way-big:hover { color: var(--ember-hi); }
.way-btn { display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer; }
.way-btn .chev { color: var(--ember); width: .9em; height: .9em; }
.way-btn:hover, .way-btn[aria-expanded="true"] { color: var(--ember-hi); }
.way-d { color: var(--cream-3); font-size: .96rem; max-width: 48ch; }
.write { margin-top: 8px; padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--esp-2); box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .2); }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form .field-wide, .contact-form .form-foot, .contact-form .form-note { grid-column: 1 / -1; }
.contact-form label { font-size: .9rem; font-weight: 600; color: var(--latte); }
.contact-form input, .contact-form textarea { width: 100%; padding: 13px 15px; border: 0; border-radius: 14px; background: rgba(244, 233, 218, .06); color: var(--cream); font: inherit; box-shadow: inset 0 0 0 1px rgba(244, 233, 218, .14); transition: box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ember); }
.contact-form textarea { resize: vertical; min-height: 130px; }
/* the sum: one short answer, so a short box */
.contact-form .field-cap input { max-width: 120px; font-variant-numeric: tabular-nums; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-small { font-size: .88rem; color: var(--cream-3); }
.form-note { padding: 12px 16px; border-radius: 14px; font-weight: 600; }
.form-note.is-ok { background: rgba(169, 187, 169, .14); color: #cfe0cf; }
.form-note.is-err { background: rgba(196, 98, 76, .16); color: #f0c2b4; }
.wp-only { padding: 22px; border-radius: 18px; background: rgba(244, 233, 218, .05); color: var(--cream-3); font-size: .95rem; text-align: center; box-shadow: inset 0 0 0 1px dashed rgba(244, 233, 218, .2); }

.map { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 16 / 10; background: var(--esp-2); box-shadow: inset 0 0 0 1px rgba(227, 161, 90, .2), 0 40px 80px -44px rgba(0, 0, 0, .9); }
.map-img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.35) saturate(.75) brightness(.86) contrast(1.02); }
.map-pin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 7px rgba(227, 161, 90, .25), 0 0 0 16px rgba(227, 161, 90, .12); }
.map-go { position: absolute; left: 16px; bottom: 16px; padding: 11px 18px; border: 0; border-radius: 999px; background: rgba(18, 12, 9, .82); color: var(--cream); font-weight: 700; font-size: .9rem; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.map-go:hover { background: var(--ember); color: var(--esp-0); }
.map-credit { position: absolute; right: 12px; bottom: 10px; font-size: .72rem; color: rgba(244, 233, 218, .8); text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.map-credit a { color: inherit; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-live .map-pin, .map.is-live .map-go, .map.is-live .map-credit { display: none; }
.map-note { margin-top: 10px; font-size: .86rem; color: var(--cream-3); }
.place { margin: 22px 0 18px; }
.place div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0; background: linear-gradient(90deg, rgba(227, 161, 90, .35), rgba(227, 161, 90, 0)) no-repeat 0 0 / 100% 1px; }
.place dt { font-size: .9rem; font-weight: 600; color: var(--latte); }
.place dd { margin: 0; color: var(--cream-2); }

@media (max-width: 960px) {
  .kt-head, .kt-way { grid-template-columns: 1fr; }
  .kt-side { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .kt-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .contact-form { grid-template-columns: 1fr; }
  .place div { grid-template-columns: 1fr; gap: 2px; }
  .walk .w-name { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .kt-photo img { animation: none; }
}