/* Contact (2026-11-04). Fable's direction: the card in the slots. The direct-contact card is tucked into two slits cut in
   a sheet in the head; pointing at it, tabbing to it or tapping it pulls it part way out, in held frames. The intake form
   is an ivory sheet on the dark band, its fields set like the home page's paper search slip. Shared pieces: page.css. */

button.ticket { border: 0; padding: 0; background: none; cursor: pointer; }

.ct-head__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(320px, 36%); gap: clamp(28px, 5vw, 110px); align-items: center; }
.ct-kicker { margin: clamp(10px, 2svh, 20px) 0 0; }
.ct-head .phead__title { margin-top: 6px; }
.ct-note { margin-top: 16px; max-width: 40rem; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- the card in the slots ---------- */
.slot { position: relative; height: clamp(250px, 38svh, 330px); }
.slot__sheet { position: absolute; inset: -6% -8% -10% -4%; background: #FAF7F1 var(--sheet-b); background-size: 700px; transform: rotate(-3deg); opacity: .9;
  box-shadow: inset 1px 1px 0 rgb(257 254 249 / .9), -10px 14px 30px -14px rgb(60 30 20 / .5); }
.slot__card { position: absolute; left: 8%; right: 8%; top: 16%; padding: clamp(22px, 2.2vw, 34px) clamp(24px, 2.4vw, 38px); background: var(--ivory) var(--sheet-a); background-size: 560px;
  box-shadow: var(--edge), 0 2px 3px rgb(21 31 34 / .18), 6px 14px 22px -10px rgb(13 22 25 / .45); transform: rotate(-3deg); transition: transform .5s steps(6, end); outline: none; }
.slot:hover .slot__card, .slot__card:focus-visible, .slot__card:focus-within, .slot.is-out .slot__card { transform: translateY(-28px) rotate(0deg); }
.slot__card:focus-visible { box-shadow: var(--edge), 0 0 0 3px var(--ink), 6px 14px 22px -10px rgb(13 22 25 / .45); }
/* the two lips of paper the card's corners tuck under: the cuts in the sheet */
.slot__lip { position: absolute; z-index: 2; width: 92px; height: 34px; background: #FAF7F1 var(--sheet-b); background-size: 700px; pointer-events: none;
  box-shadow: 0 3px 4px -2px rgb(60 30 20 / .35); }
.slot__lip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: rgb(60 30 20 / .35); }
.slot__lip--a { left: calc(8% - 26px); top: calc(16% - 6px); transform: rotate(-48deg); }
.slot__lip--b { right: calc(8% - 26px); bottom: calc(16% - 2px); transform: rotate(-48deg) scaleY(-1); }
.ct-facts div { display: grid; grid-template-columns: 7rem 1fr; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); }
.ct-facts div:first-child { border-top: 0; }
.ct-facts dt { font: 600 .74rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-red); }
.ct-facts dd { margin: 0; font: 600 clamp(1.05rem, .95rem + .3vw, 1.3rem)/1.3 var(--display); }
.ct-facts a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(23 29 31 / .35); }
.ct-facts a:hover { text-decoration-color: currentColor; }
.ct-note-hand { left: -14%; top: -12%; }

/* ---------- the form on the dark band ---------- */
.ct-form__head { max-width: 50rem; margin-bottom: clamp(26px, 4.4svh, 44px); }
.ct-form__head .stamp { margin-bottom: 18px; }
.ct-form__grid { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(24px, 3.6vw, 72px); align-items: start; }
.ct-sheet { padding: clamp(26px, 3vw, 54px); display: grid; gap: clamp(14px, 2.2svh, 20px); }
.ct-legend { font: italic .92rem var(--serif); color: var(--ink-2); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 28px); }
.ct-field { display: grid; gap: 6px; align-content: start; }
.ct-field label, .ct-why legend { font: 600 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ct-field input { width: 100%; min-height: 50px; padding: 10px 16px; border: 0; border-radius: 26px; font: 400 1.02rem var(--serif); color: var(--ink);
  background: #F7F3EC; box-shadow: inset 1px 1px 3px rgb(80 50 40 / .22), inset -1px -1px 0 rgb(258 255 252 / .6); }
.ct-field input::placeholder { color: #837B77; }
.ct-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ct-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink-red), inset 1px 1px 3px rgb(80 50 40 / .22); }
.ct-hint { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.ct-why { border: 0; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.ct-why legend { padding: 0 0 8px; }
.ct-why legend span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.ct-why label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 1rem; cursor: pointer; }
.ct-why input { width: 18px; height: 18px; accent-color: #395B65; }
.ct-submit { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 8px; }
.ct-next { padding-top: 8px; }
.ct-next .label { margin-bottom: 18px; }
.ct-next ol { display: grid; gap: clamp(18px, 3svh, 28px); }
.ct-next li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; }
.ct-next__n { grid-row: span 2; font: 600 1rem var(--sans); color: var(--sage); padding-top: 3px; }
.ct-next b { font: 600 1.2rem/1.25 var(--display); color: var(--ivory); }
.ct-next li > span:last-child { margin-top: 4px; font-size: 1rem; line-height: 1.5; color: var(--deep-2); }

@media (max-width: 1100px) {
  .ct-head__grid, .ct-form__grid { grid-template-columns: 1fr; }
  .slot { max-width: 520px; }
}
@media (max-width: 760px) {
  .ct-row { grid-template-columns: 1fr; }
  .ct-note-hand { display: none; }
  .slot { height: 270px; }
  .ct-facts div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .slot__card { transition: none; } }